use hooks for datetime, remove alpinejs

assets/js/app.js

@@ -26,26 +26,18 @@ import 'phoenix_html'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
 import topbar from 'topbar'
+import Date from './date'
+import DateTime from './datetime'
 import MaintainAttrs from './maintain_attrs'
-import Alpine from 'alpinejs'
 
 const csrfTokenElement = document.querySelector("meta[name='csrf-token']")
 let csrfToken
 if (csrfTokenElement) { csrfToken = csrfTokenElement.getAttribute('content') }
 const liveSocket = new LiveSocket('/live', Socket, {
-  dom: {
-    onBeforeElUpdated (from, to) {
-      if (from._x_dataStack) { window.Alpine.clone(from, to) }
-    }
-  },
   params: { _csrf_token: csrfToken },
-  hooks: { MaintainAttrs }
+  hooks: { Date, DateTime, MaintainAttrs }
 })
 
-// alpine.js
-window.Alpine = Alpine
-Alpine.start()
-
 // Show progress bar on live navigation and form submits
 topbar.config({ barThickness: 1, barColors: { 0: '#fff' }, shadowColor: 'rgba(0, 0, 0, .3)' })
 window.addEventListener('phx:page-loading-start', info => topbar.show())

assets/js/date.js

@@ -0,0 +1,11 @@
+export default {
+  displayDate (el) {
+    const date =
+      Intl.DateTimeFormat([], { timeZone: 'Etc/UTC', dateStyle: 'short' })
+        .format(new Date(el.dateTime))
+
+    el.innerText = date
+  },
+  mounted () { this.displayDate(this.el) },
+  updated () { this.displayDate(this.el) }
+}

assets/js/datetime.js

@@ -0,0 +1,11 @@
+export default {
+  displayDateTime (el) {
+    const date =
+      Intl.DateTimeFormat([], { dateStyle: 'short', timeStyle: 'long' })
+        .format(new Date(el.dateTime))
+
+    el.innerText = date
+  },
+  mounted () { this.displayDateTime(this.el) },
+  updated () { this.displayDateTime(this.el) }
+}

assets/package-lock.json

@@ -8,7 +8,6 @@
       "dependencies": {
         "@fontsource/nunito-sans": "^4.5.8",
         "@fortawesome/fontawesome-free": "^6.1.1",
-        "alpinejs": "^3.10.2",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
         "phoenix_live_view": "file:../deps/phoenix_live_view",
@@ -38,19 +37,19 @@
         "webpack-dev-server": "^4.9.0"
       },
       "engines": {
-        "node": "18.12.1",
+        "node": "v18.9.1",
-        "npm": "8.19.2"
+        "npm": "8.19.1"
       }
     },
     "../deps/phoenix": {
-      "version": "1.6.15",
+      "version": "1.6.16",
       "license": "MIT"
     },
     "../deps/phoenix_html": {
-      "version": "3.2.0"
+      "version": "3.3.1"
     },
     "../deps/phoenix_live_view": {
-      "version": "0.18.11",
+      "version": "0.18.18",
       "license": "MIT"
     },
     "node_modules/@ampproject/remapping": {
@@ -2277,19 +2276,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@vue/reactivity": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
-      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
-      "dependencies": {
-        "@vue/shared": "3.1.5"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
-      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -2655,14 +2641,6 @@
         "ajv": "^6.9.1"
       }
     },
-    "node_modules/alpinejs": {
-      "version": "3.10.2",
-      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.2.tgz",
-      "integrity": "sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==",
-      "dependencies": {
-        "@vue/reactivity": "~3.1.1"
-      }
-    },
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -14029,19 +14007,6 @@
         "@types/node": "*"
       }
     },
-    "@vue/reactivity": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
-      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
-      "requires": {
-        "@vue/shared": "3.1.5"
-      }
-    },
-    "@vue/shared": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
-      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
-    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -14355,14 +14320,6 @@
       "dev": true,
       "requires": {}
     },
-    "alpinejs": {
-      "version": "3.10.2",
-      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.2.tgz",
-      "integrity": "sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==",
-      "requires": {
-        "@vue/reactivity": "~3.1.1"
-      }
-    },
     "ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",

assets/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "engines": {
     "node": "v18.9.1",
-    "npm": "8.10.0"
+    "npm": "8.19.1"
   },
   "scripts": {
     "deploy": "NODE_ENV=production webpack --mode production",
@@ -15,7 +15,6 @@
   "dependencies": {
     "@fontsource/nunito-sans": "^4.5.8",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "alpinejs": "^3.10.2",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",

changelog.md

@@ -1,6 +1,7 @@
 # v0.1.10
 - Improve accessibility
 - Code quality improvements
+- Fix dates displaying incorrectly
 
 # v0.1.9
 - Improve server log

lib/memex_web/components/core_components.ex

@@ -89,7 +89,7 @@ defmodule MemexWeb.CoreComponents do
 
   @doc """
   Phoenix.Component for a <time> element that renders the naivedatetime in the
-  user's local timezone with Alpine.js
+  user's local timezone
   """
   def datetime(assigns)
 
@@ -105,7 +105,7 @@ defmodule MemexWeb.CoreComponents do
 
   @doc """
   Phoenix.Component for a <date> element that renders the Date in the user's
-  local timezone with Alpine.js
+  local timezone
   """
   def date(assigns)
 

lib/memex_web/components/core_components/date.html.heex

@@ -1,7 +1,3 @@
-<time :if={@date} id={@id} datetime={@date |> Date.to_iso8601(:extended)} x-data={~s<{
+<time :if={@date} id={@id} datetime={Date.to_iso8601(@date, :extended)} phx-hook="Date">
-    date:
+  <%= Date.to_iso8601(@date, :extended) %>
-      Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
-        .format(new Date("#{Date.to_iso8601(@date, :extended)}"))
-  }>} x-text="date">
-  <%= @date |> Date.to_iso8601(:extended) %>
 </time>

lib/memex_web/components/core_components/datetime.html.heex

@@ -1,7 +1,3 @@
-<time :if={@datetime} id={@id} datetime={cast_datetime(@datetime)} x-data={~s/{
+<time :if={@datetime} id={@id} datetime={cast_datetime(@datetime)} phx-hook="DateTime">
-    datetime:
-      Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
-        .format(new Date("#{cast_datetime(@datetime)}"))
-  }/} x-text="datetime">
   <%= cast_datetime(@datetime) %>
 </time>