Fix web_app example (didn't compile)

example_applications/web_app/assets/package.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/webpack.config.js

@@ -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/config/config.exs

@@ -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/dev.exs

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

example_applications/web_app/config/prod.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/test.exs

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

example_applications/web_app/lib/web_app/temp_tracker.ex

@@ -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_web.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/gettext.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

example_applications/web_app/lib/web_app_web/templates/layout/app.html.eex

@@ -1,5 +1,5 @@
 <main role="main" class="container">
-  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+  <p class="alert alert-info" role="alert"><%= Phoenix.Flash.get(@conn, :info) %></p>
+  <p class="alert alert-danger" role="alert"><%= Phoenix.Flash.get(@conn, :error) %></p>
   <%= @inner_content %>
 </main>

example_applications/web_app/lib/web_app_web/templates/layout/live.html.leex

@@ -1,11 +1,11 @@
 <main role="main" class="container">
   <p class="alert alert-info" role="alert"
     phx-click="lv:clear-flash"
-    phx-value-key="info"><%= live_flash(@flash, :info) %></p>
+    phx-value-key="info"><%= Phoenix.Flash.get(@flash, :info) %></p>
 
   <p class="alert alert-danger" role="alert"
     phx-click="lv:clear-flash"
-    phx-value-key="error"><%= live_flash(@flash, :error) %></p>
+    phx-value-key="error"><%= Phoenix.Flash.get(@flash, :error) %></p>
 
   <%= @inner_content %>
 </main>

example_applications/web_app/lib/web_app_web/templates/layout/root.html.leex → example_applications/web_app/lib/web_app_web/templates/layout/root.html.heex

@@ -5,9 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <%= csrf_meta_tag() %>
-    <%= live_title_tag assigns[:page_title] || "WebApp", suffix: " · Phoenix Framework" %>
-    <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
-    <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
+    <.live_title suffix=" · Phoenix Framework"><%= assigns[:page_title] || "WebApp" %></.live_title>
+    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")}/>
+    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/js/app.js")}></script>
   </head>
   <body>
     <header>
@@ -21,7 +21,7 @@
           </ul>
         </nav>
         <a href="https://phoenixframework.org/" class="phx-logo">
-          <img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
+          <img src={Routes.static_path(@conn, "/images/phoenix.png")} alt="Phoenix Framework Logo"/>
         </a>
       </section>
     </header>

example_applications/web_app/mix.exs

@@ -7,7 +7,7 @@ defmodule WebApp.MixProject do
       version: "0.1.0",
       elixir: "~> 1.11",
       elixirc_paths: elixirc_paths(Mix.env()),
-      compilers: [:phoenix, :gettext] ++ Mix.compilers(),
+      compilers: Mix.compilers(),
       start_permanent: Mix.env() == :prod,
       aliases: aliases(),
       deps: deps()
@@ -33,22 +33,23 @@ defmodule WebApp.MixProject do
   # Type `mix help deps` for examples and options.
   defp deps do
     [
-      {:phoenix, "~> 1.6.0"},
+      {:phoenix, "~> 1.7.0"},
       {:phoenix_ecto, "~> 4.4.0"},
-      {:ecto_sql, "~> 3.7.0"},
+      {:ecto_sql, "~> 3.12.0"},
       {:postgrex, ">= 0.0.0"},
-      {:phoenix_live_view, "~> 0.16.0"},
+      {:phoenix_live_view, "~> 0.20.0"},
       {:floki, ">= 0.0.0", only: :test},
-      {:phoenix_html, "~> 3.0.0"},
+      {:phoenix_view, "~> 2.0.0"},
+      {:phoenix_html, "~> 3.3.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
-      {:phoenix_live_dashboard, "~> 0.5.0"},
+      {:phoenix_live_dashboard, "~> 0.8.0"},
       {:telemetry_metrics, "~> 0.6.0", override: true},
       {:gettext, "~> 0.11"},
       {:jason, "~> 1.0"},
       {:plug_cowboy, "~> 2.0"},
       {:faker, "~> 0.16"},
-      {:oban, "~> 2.9.0"},
-      {:broadway, "~> 1.0.2"},
+      {:oban, "~> 2.10.0"},
+      {:broadway, "~> 1.1.0"},
       {:dialyxir, "~> 1.0", only: :dev, runtime: false},
       # {:prom_ex, "~> 1.5.0"}
       {:prom_ex, path: "../../"}
@@ -64,7 +65,12 @@ defmodule WebApp.MixProject do
   # See the documentation for `Mix` for more info on aliases.
   defp aliases do
     [
-      setup: ["deps.get", "ecto.setup", "cmd npm install --prefix assets"],
+      setup: [
+        "deps.get",
+        "ecto.setup",
+        "cmd npm install --prefix assets",
+        "cmd npm run deploy --prefix assets"
+      ],
       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"]