Fix web_app example (didn't compile)

The example depends on the current HEAD and wasn't updated for a while.
PromEx increased many dependencies requirements (including
phoenix/phoenix_live_view which had breaking changes or deprecations).

Author: v0idpwn

example_applications/web_app/assets/package-lock.json

@@ -21,20 +21,20 @@
     "ansi-regex": ">=5.0.1",
     "babel-loader": "^8.0.0",
     "browserslist": ">=4.16.5",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.2",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
     "elliptic": "^6.5.7",
-    "hard-source-webpack-plugin": "^0.13.1",
+    "glob": "^8.0.0",
     "is-svg": "4.4.0",
     "lodash": ">=4.17.21",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^2.7.6",
     "nanoid": "^3.1.31",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss": ">=8.4.31",
     "sass": "^1.22.10",
-    "sass-loader": "^8.0.2",
+    "sass-loader": "^13.3.2",
     "ssri": ">=6.0.2",
-    "terser-webpack-plugin": "^2.3.2",
+    "terser-webpack-plugin": "^5.3.9",
     "webpack": "5.94.0",
     "webpack-cli": "^5.1.4"
   }

example_applications/web_app/assets/package.json

@@ -1,53 +1,49 @@
-const path = require('path');
-const glob = require('glob');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require("path");
+const glob = require("glob");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = (env, options) => {
-  const devMode = options.mode !== 'production';
+  const devMode = options.mode !== "production";
 
   return {
     optimization: {
       minimizer: [
-        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
-        new OptimizeCSSAssetsPlugin({})
-      ]
+        new TerserPlugin({ parallel: true }),
+        new CssMinimizerPlugin(),
+      ],
     },
     entry: {
-      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
+      app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"]),
     },
     output: {
-      filename: '[name].js',
-      path: path.resolve(__dirname, '../priv/static/js'),
-      publicPath: '/js/'
+      filename: "[name].js",
+      path: path.resolve(__dirname, "../priv/static/js"),
+      publicPath: "/js/",
     },
-    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
+    devtool: devMode ? "eval-cheap-module-source-map" : undefined,
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
-            loader: 'babel-loader'
-          }
+            loader: "babel-loader",
+          },
         },
         {
           test: /\.[s]?css$/,
-          use: [
-            MiniCssExtractPlugin.loader,
-            'css-loader',
-            'sass-loader',
-          ],
-        }
-      ]
+          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+        },
+      ],
     },
     plugins: [
-      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
-      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
-    ]
-    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
-  }
+      new MiniCssExtractPlugin({ filename: "../css/app.css" }),
+      new CopyWebpackPlugin({
+        patterns: [{ from: "static/", to: "../" }],
+      }),
+    ],
+  };
 };

example_applications/web_app/assets/webpack.config.js

@@ -5,7 +5,7 @@
 # is restricted to this project.
 
 # General application configuration
-use Mix.Config
+import Config
 
 config :web_app,
   ecto_repos: [WebApp.Repo, WebApp.Repo2],

example_applications/web_app/config/config.exs

@@ -1,4 +1,4 @@
-use Mix.Config
+import Config
 
 # Configure your database
 config :web_app, WebApp.Repo,

example_applications/web_app/config/dev.exs

@@ -1,4 +1,4 @@
-use Mix.Config
+import Config
 
 # For production, don't forget to configure the url host
 # to something meaningful, Phoenix uses this information

example_applications/web_app/config/prod.exs

@@ -1,4 +1,4 @@
-use Mix.Config
+import Config
 
 # Configure your database
 #

example_applications/web_app/config/test.exs

@@ -9,9 +9,7 @@ defmodule WebApp.TempTracker do
 
   def get_coldest_city do
     Agent.get(__MODULE__, fn {city, country, temp} ->
-      "The coldest city on earth is currently #{city}, #{country} with a temperature of #{
-        kelvin_to_c(temp)
-      }°C"
+      "The coldest city on earth is currently #{city}, #{country} with a temperature of #{kelvin_to_c(temp)}°C"
     end)
   end
 

example_applications/web_app/lib/web_app/temp_tracker.ex

@@ -22,7 +22,7 @@ defmodule WebAppWeb do
       use Phoenix.Controller, namespace: WebAppWeb
 
       import Plug.Conn
-      import WebAppWeb.Gettext
+      use Gettext, backend: WebAppWeb.Gettext
       alias WebAppWeb.Router.Helpers, as: Routes
     end
   end
@@ -45,7 +45,7 @@ defmodule WebAppWeb do
   def live_view do
     quote do
       use Phoenix.LiveView,
-        layout: {WebAppWeb.LayoutView, "live.html"}
+        layout: {WebAppWeb.LayoutView, :live}
 
       unquote(view_helpers())
     end
@@ -72,7 +72,7 @@ defmodule WebAppWeb do
   def channel do
     quote do
       use Phoenix.Channel
-      import WebAppWeb.Gettext
+      use Gettext, backend: WebAppWeb.Gettext
     end
   end
 
@@ -83,12 +83,13 @@ defmodule WebAppWeb do
 
       # Import LiveView helpers (live_render, live_component, live_patch, etc)
       import Phoenix.LiveView.Helpers
+      import Phoenix.Component
 
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
 
       import WebAppWeb.ErrorHelpers
-      import WebAppWeb.Gettext
+      use Gettext, backend: WebAppWeb.Gettext
       alias WebAppWeb.Router.Helpers, as: Routes
     end
   end

example_applications/web_app/lib/web_app_web.ex

@@ -20,5 +20,5 @@ defmodule WebAppWeb.Gettext do
 
   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
   """
-  use Gettext, otp_app: :web_app
+  use Gettext.Backend, otp_app: :web_app
 end