Update everything and more

Author: simonprev

.tool-versions

@@ -1,3 +1,3 @@
-erlang 26.0.2
-elixir 1.15.5-otp-26
+erlang 27.3.2
+elixir 1.18.3-otp-27
 nodejs 20.5.1

assets/css/app.css

@@ -1,10 +1,4 @@
-.home {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 40px;
-  text-align: center;
+body {
   font-family:
     system-ui,
     -apple-system,
@@ -19,6 +13,15 @@
     'Segoe UI Emoji',
     'Segoe UI Symbol',
     'Noto Color Emoji';
+}
+
+.home {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+  text-align: center;
   line-height: 1.4;
 }
 
@@ -37,7 +40,24 @@
 
 .flash-messages {
   position: fixed;
-  top: 0;
-  right: 0;
+  top: 5px;
+  right: 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  z-index: 1000;
+}
+
+#flash-success {
+  padding: 10px;
+  color: #123c12;
+  border: 1px solid rgb(62, 146, 62);
+  background-color: #90d690;
+}
+
+#flash-error {
   padding: 10px;
+  color: #3c1212;
+  border: 1px solid rgb(144, 35, 35);
+  background-color: #d68d8d;
 }

assets/js/app.js assets/js/app.tsassets/js/app.js renamed to assets/js/app.ts

@@ -1,19 +1,33 @@
-import 'simple-css-reset/reset.css';
 import '../css/app.css';
 
 import {Socket} from 'phoenix';
 import {LiveSocket} from 'phoenix_live_view';
 
-const FLASH_TTL = 8000;
-const Hooks = {};
+interface Hook {
+  mounted?(): void;
+  destroyed?(): void;
+}
+
+interface FlashHook extends Hook {
+  el: HTMLElement;
+  timer: ReturnType<typeof setTimeout>;
+  FLASH_TTL: number;
+  _hide(): void;
+}
+
+const Hooks: Record<string, Hook> = {};
 
 Hooks.Flash = {
-  mounted() {
-    this.timer = setTimeout(() => this._hide(), FLASH_TTL);
+  el: null as unknown as HTMLElement,
+  timer: null as unknown as ReturnType<typeof setTimeout>,
+  FLASH_TTL: 8000,
+
+  mounted(this: FlashHook) {
+    this.timer = setTimeout(() => this._hide(), this.FLASH_TTL);
 
     this.el.addEventListener('mouseover', () => {
       clearTimeout(this.timer);
-      this.timer = setTimeout(() => this._hide(), FLASH_TTL);
+      this.timer = setTimeout(() => this._hide(), this.FLASH_TTL);
     });
   },
 
@@ -24,11 +38,11 @@ Hooks.Flash = {
   _hide() {
     liveSocket.execJS(this.el, this.el.getAttribute('phx-click'));
   }
-};
+} as FlashHook;
 
 const csrfToken = document
   .querySelector("meta[name='csrf-token']")
-  .getAttribute('content');
+  ?.getAttribute('content');
 
 const liveSocket = new LiveSocket('/live', Socket, {
   hooks: Hooks,

assets/package-lock.json

@@ -10,17 +10,18 @@
   "dependencies": {
     "phoenix": "^1.7.7",
     "phoenix_html": "^3.3.1",
-    "phoenix_live_view": "^0.20.14",
-    "simple-css-reset": "^3.0.0"
+    "phoenix_live_view": "^1.0.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.10",
+    "@types/phoenix": "^1.6.6",
+    "@types/phoenix_live_view": "^1.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-mirego": "^1.0.0",
     "prettier": "^3.2.5",
     "stylelint": "^15.11.0",
     "stylelint-config-mirego": "^2.3.0",
-    "stylelint-scss": "^5.3.2",
-    "stylelint-order": "^6.0.4"
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^5.3.2"
   }
 }

assets/package.json

@@ -2,47 +2,45 @@ import Config
 
 version = Mix.Project.config()[:version]
 
-config :elixir_boilerplate,
-  ecto_repos: [ElixirBoilerplate.Repo],
-  version: version
-
-config :phoenix, :json_library, Jason
+config :absinthe_security, AbsintheSecurity.Phase.MaxAliasesCheck, max_alias_count: 100
+config :absinthe_security, AbsintheSecurity.Phase.MaxDepthCheck, max_depth_count: 100
+config :absinthe_security, AbsintheSecurity.Phase.MaxDirectivesCheck, max_directive_count: 100
 
-config :elixir_boilerplate, ElixirBoilerplateWeb.Endpoint,
-  pubsub_server: ElixirBoilerplate.PubSub,
-  render_errors: [view: ElixirBoilerplateWeb.Errors, accepts: ~w(html json)]
+config :elixir_boilerplate, Corsica, allow_headers: :all
+config :elixir_boilerplate, ElixirBoilerplate.Gettext, default_locale: "en"
 
 config :elixir_boilerplate, ElixirBoilerplate.Repo,
   migration_primary_key: [type: :binary_id, default: {:fragment, "gen_random_uuid()"}],
   migration_timestamps: [type: :utc_datetime_usec],
   start_apps_before_migration: [:ssl]
 
-config :elixir_boilerplate, Corsica, allow_headers: :all
-
-config :elixir_boilerplate, ElixirBoilerplate.Gettext, default_locale: "en"
-
 config :elixir_boilerplate, ElixirBoilerplateGraphQL, token_limit: 2000
 
+config :elixir_boilerplate, ElixirBoilerplateWeb.Endpoint,
+  pubsub_server: ElixirBoilerplate.PubSub,
+  render_errors: [view: ElixirBoilerplateWeb.Errors, accepts: ~w(html json)]
+
 config :elixir_boilerplate, ElixirBoilerplateWeb.Plugs.Security, allow_unsafe_scripts: false
 
-config :absinthe_security, AbsintheSecurity.Phase.MaxAliasesCheck, max_alias_count: 100
-config :absinthe_security, AbsintheSecurity.Phase.MaxDepthCheck, max_depth_count: 100
-config :absinthe_security, AbsintheSecurity.Phase.MaxDirectivesCheck, max_directive_count: 100
+config :elixir_boilerplate,
+  ecto_repos: [ElixirBoilerplate.Repo],
+  version: version
 
 config :esbuild,
   version: "0.16.4",
   default: [
-    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
+    args: ~w(js/app.ts --bundle --target=es2020 --outdir=../priv/static/assets),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
+config :logger, backends: [:console, Sentry.LoggerBackend]
+
+# Import environment configuration
+config :phoenix, :json_library, Jason
+
 config :sentry,
-  included_environments: [:all],
   root_source_code_path: File.cwd!(),
   release: version
 
-config :logger, backends: [:console, Sentry.LoggerBackend]
-
-# Import environment configuration
 import_config "#{Mix.env()}.exs"

config/config.exs

@@ -19,5 +19,5 @@ config :elixir_boilerplate, ElixirBoilerplateWeb.Plugs.Security, allow_unsafe_sc
 
 config :logger, :console, format: "[$level] $message\n"
 
-config :phoenix, :stacktrace_depth, 20
 config :phoenix, :plug_init_mode, :runtime
+config :phoenix, :stacktrace_depth, 20

config/dev.exs

@@ -4,6 +4,18 @@ config :elixir_boilerplate, ElixirBoilerplateWeb.Endpoint,
   cache_static_manifest: "priv/static/cache_manifest.json",
   debug_errors: false
 
+config :elixir_boilerplate, :logger, [
+  {:handler, :sentry_handler, Sentry.LoggerHandler,
+   %{
+     config: %{
+       metadata: [:file, :line],
+       rate_limiting: [max_events: 10, interval: _1_second = 1_000],
+       capture_log_messages: true,
+       level: :error
+     }
+   }}
+]
+
 config :logger, :console,
   format: "$time $metadata[$level] $message\n",
   level: :info,

config/prod.exs

@@ -4,22 +4,28 @@ import ElixirBoilerplate.Config
 canonical_uri = get_env("CANONICAL_URL", :uri)
 static_uri = get_env("STATIC_URL", :uri)
 
-config :elixir_boilerplate,
-  canonical_host: get_uri_part(canonical_uri, :host),
-  force_ssl: get_uri_part(canonical_uri, :scheme) == "https"
-
 config :elixir_boilerplate, ElixirBoilerplate.Repo,
   url: get_env!("DATABASE_URL"),
   ssl: get_env("DATABASE_SSL", :boolean),
   pool_size: get_env!("DATABASE_POOL_SIZE", :integer),
   socket_options: if(get_env("DATABASE_IPV6", :boolean), do: [:inet6], else: [])
 
+config :elixir_boilerplate,
+  canonical_host: get_uri_part(canonical_uri, :host),
+  force_ssl: get_uri_part(canonical_uri, :scheme) == "https"
+
 # NOTE: Only set `server` to `true` if `PHX_SERVER` is present. We cannot set
 # it to `false` otherwise because `mix phx.server` will stop working without it.
 if get_env("PHX_SERVER", :boolean) == true do
   config :elixir_boilerplate, ElixirBoilerplateWeb.Endpoint, server: true
 end
 
+config :absinthe_security, AbsintheSecurity.Phase.FieldSuggestionsCheck, enable_field_suggestions: get_env("GRAPHQL_ENABLE_FIELD_SUGGESTIONS", :boolean)
+config :absinthe_security, AbsintheSecurity.Phase.IntrospectionCheck, enable_introspection: get_env("GRAPHQL_ENABLE_INTROSPECTION", :boolean)
+
+config :elixir_boilerplate, Corsica, origins: get_env("CORS_ALLOWED_ORIGINS", :cors)
+config :elixir_boilerplate, ElixirBoilerplate.TelemetryUI, share_key: get_env("TELEMETRY_UI_SHARE_KEY")
+
 config :elixir_boilerplate, ElixirBoilerplateWeb.Endpoint,
   http: [port: get_env!("PORT", :integer)],
   secret_key_base: get_env!("SECRET_KEY_BASE"),
@@ -29,19 +35,12 @@ config :elixir_boilerplate, ElixirBoilerplateWeb.Endpoint,
   url: get_endpoint_url_config(canonical_uri),
   static_url: get_endpoint_url_config(static_uri)
 
-config :elixir_boilerplate, Corsica, origins: get_env("CORS_ALLOWED_ORIGINS", :cors)
-
 config :elixir_boilerplate,
   basic_auth: [
     username: get_env("BASIC_AUTH_USERNAME"),
     password: get_env("BASIC_AUTH_PASSWORD")
   ]
 
-config :elixir_boilerplate, ElixirBoilerplate.TelemetryUI, share_key: get_env("TELEMETRY_UI_SHARE_KEY")
-
 config :sentry,
   dsn: get_env("SENTRY_DSN"),
   environment_name: get_env("SENTRY_ENVIRONMENT_NAME")
-
-config :absinthe_security, AbsintheSecurity.Phase.IntrospectionCheck, enable_introspection: get_env("GRAPHQL_ENABLE_INTROSPECTION", :boolean)
-config :absinthe_security, AbsintheSecurity.Phase.FieldSuggestionsCheck, enable_field_suggestions: get_env("GRAPHQL_ENABLE_FIELD_SUGGESTIONS", :boolean)

config/runtime.exs

@@ -15,13 +15,13 @@ defmodule TestEnvironment do
   end
 end
 
+# This config is to output keys instead of translated message in test
+config :elixir_boilerplate, ElixirBoilerplate.Gettext, priv: "priv/null", interpolation: ElixirBoilerplate.GettextInterpolation
+
 config :elixir_boilerplate, ElixirBoilerplate.Repo,
   pool: Ecto.Adapters.SQL.Sandbox,
   url: TestEnvironment.get_database_url()
 
 config :elixir_boilerplate, ElixirBoilerplateWeb.Endpoint, server: false
 
-# This config is to output keys instead of translated message in test
-config :elixir_boilerplate, ElixirBoilerplate.Gettext, priv: "priv/null", interpolation: ElixirBoilerplate.GettextInterpolation
-
 config :logger, level: :warning