assets/js/app.js

@@ -26,18 +26,26 @@ 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: { Date, DateTime, MaintainAttrs }
+  hooks: { 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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "engines": {
     "node": "v18.9.1",
-    "npm": "8.19.1"
+    "npm": "8.10.0"
   },
   "scripts": {
     "deploy": "NODE_ENV=production webpack --mode production",
@@ -13,35 +13,35 @@
     "test": "standard"
   },
   "dependencies": {
-    "@fontsource/nunito-sans": "^4.5.10",
-    "@fortawesome/fontawesome-free": "^6.3.0",
+    "@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",
-    "topbar": "^2.0.1"
+    "topbar": "^1.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.3",
-    "@babel/preset-env": "^7.20.2",
-    "autoprefixer": "^10.4.14",
-    "babel-loader": "^9.1.2",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
-    "css-minimizer-webpack-plugin": "^4.2.2",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.7.5",
-    "npm-check-updates": "^16.7.12",
-    "postcss": "^8.4.21",
-    "postcss-import": "^15.1.0",
-    "postcss-loader": "^7.1.0",
-    "postcss-preset-env": "^8.0.1",
-    "sass": "^1.59.3",
-    "sass-loader": "^13.2.1",
+    "mini-css-extract-plugin": "^2.6.0",
+    "postcss": "^8.4.13",
+    "postcss-import": "^14.1.0",
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^7.5.0",
+    "sass": "^1.56.0",
+    "sass-loader": "^12.6.0",
     "standard": "^17.0.0",
-    "tailwindcss": "^3.2.7",
-    "terser-webpack-plugin": "^5.3.7",
-    "webpack": "^5.76.2",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.1"
+    "tailwindcss": "^3.0.24",
+    "terser-webpack-plugin": "^5.3.1",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
   }
 }

changelog.md

@@ -1,7 +1,6 @@
 # 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
+  user's local timezone with Alpine.js
   """
   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
+  local timezone with Alpine.js
   """
   def date(assigns)
 

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

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