Import Alpine through module instead of script tag (#27496)

Signed-off-by: Jon Koops <jonkoops@gmail.com>

themes/src/main/resources/theme/keycloak.v2/login/template.ftl

@@ -24,6 +24,13 @@
             <link href="${url.resourcesPath}/${style}" rel="stylesheet" />
         </#list>
     </#if>
+    <script type="importmap">
+        {
+            "imports": {
+                "alpinejs": "${url.resourcesCommonPath}/node_modules/alpinejs/dist/module.esm.js"
+            }
+        }
+    </script>
     <#if properties.scripts?has_content>
         <#list properties.scripts?split(' ') as script>
             <script src="${url.resourcesPath}/${script}" type="text/javascript"></script>
@@ -216,6 +223,11 @@
     </main>
   </div>
 </div>
+<script type="module">
+    import Alpine from "alpinejs";
+
+    Alpine.start();
+</script>
 </body>
 </html>
 </#macro>

themes/src/main/resources/theme/keycloak.v2/login/theme.properties

@@ -3,7 +3,6 @@ import=common/keycloak
 
 styles=css/styles.css
 stylesCommon=node_modules/@patternfly-v5/patternfly/patternfly.min.css node_modules/@patternfly-v5/patternfly/patternfly-addons.css
-scripts=script/cdn.min.js
 
 kcFormGroupClass=pf-v5-c-form__group
 kcLabelClass=pf-v5-c-form__label

themes/src/main/resources/theme/keycloak/common/resources/package.json

@@ -9,6 +9,7 @@
     "@patternfly-v5/patternfly": "npm:@patternfly/patternfly@^5.1.0",
     "@patternfly/patternfly": "^4.224.5",
     "@patternfly/react-core": "^4.278.1",
+    "alpinejs": "^3.13.5",
     "jquery": "^3.7.1",
     "patternfly": "^3.59.5",
     "react": "^18.2.0",

themes/src/main/resources/theme/keycloak/common/resources/pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   '@patternfly/react-core':
     specifier: ^4.278.1
     version: 4.278.1(react-dom@18.2.0)(react@18.2.0)
+  alpinejs:
+    specifier: ^3.13.5
+    version: 3.13.5
   jquery:
     specifier: ^3.7.1
     version: 3.7.1
@@ -573,12 +576,28 @@ packages:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
     dev: true
 
+  /@vue/reactivity@3.1.5:
+    resolution: {integrity: sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==}
+    dependencies:
+      '@vue/shared': 3.1.5
+    dev: false
+
+  /@vue/shared@3.1.5:
+    resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==}
+    dev: false
+
   /acorn@8.11.2:
     resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
     engines: {node: '>=0.4.0'}
     hasBin: true
     dev: true
 
+  /alpinejs@3.13.5:
+    resolution: {integrity: sha512-1d2XeNGN+Zn7j4mUAKXtAgdc4/rLeadyTMWeJGXF5DzwawPBxwTiBhFFm6w/Ei8eJxUZeyNWWSD9zknfdz1kEw==}
+    dependencies:
+      '@vue/reactivity': 3.1.5
+    dev: false
+
   /attr-accept@1.1.3:
     resolution: {integrity: sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==}
     engines: {node: '>=4'}