webpack: remove jquery-mask-plugin and enable alpine and alpine-mask

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.1",
       "license": "MIT",
       "dependencies": {
+        "@alpinejs/mask": "^3.14.1",
         "@babel/core": "^7.16.7",
         "@babel/eslint-parser": "^7.16.5",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -31,7 +32,6 @@
         "htmx.org": "^2.0.1",
         "hyperscript.org": "^0.9.12",
         "jquery": "^3.7.1",
-        "jquery-mask-plugin": "^1.14.16",
         "mini-css-extract-plugin": "^2.5.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.2.3",
@@ -65,6 +65,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@alpinejs/mask": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/@alpinejs/mask/-/mask-3.14.1.tgz",
+      "integrity": "sha512-xW5uyn9lFMpvdzA4RfSE3lj+HjA7BjtEk+QJXU7jB5Wxpe0Jk5qFOrCydTDl+bFkRwOk/fMe2PG7IWeWEnn4BA=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -5522,11 +5527,6 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
     },
-    "node_modules/jquery-mask-plugin": {
-      "version": "1.14.16",
-      "resolved": "https://registry.npmjs.org/jquery-mask-plugin/-/jquery-mask-plugin-1.14.16.tgz",
-      "integrity": "sha512-reywdHlYEkPbzWjTpcc1fk9XQ3PLvO5dzEAVqy8zI7NTF22tB1HbeU3iboZTLdkBEPaWAqeI2HtEjsGQ4roZKw=="
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

frontend/package.json

@@ -22,6 +22,7 @@
     "url": "https://github.com/AccordBox/python-webpack-boilerplate/issues"
   },
   "dependencies": {
+    "@alpinejs/mask": "^3.14.1",
     "@babel/core": "^7.16.7",
     "@babel/eslint-parser": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -44,7 +45,6 @@
     "htmx.org": "^2.0.1",
     "hyperscript.org": "^0.9.12",
     "jquery": "^3.7.1",
-    "jquery-mask-plugin": "^1.14.16",
     "mini-css-extract-plugin": "^2.5.1",
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.2.3",

frontend/src/application/htmx.js

@@ -1,6 +1,11 @@
 import htmx from "htmx.org";
 import _hyperscript from 'hyperscript.org/dist/_hyperscript.min';
+import Alpine from "alpinejs";
+import mask from '@alpinejs/mask';
+window.Alpine = Alpine;
 
+Alpine.start();
+Alpine.plugin(mask);
 _hyperscript.browserInit();
 
 let modalEle = document.getElementById("modal");

frontend/src/application/jquery_mask.js

@@ -1 +0,0 @@
-import 'jquery-mask-plugin/dist/jquery.mask.min';