Remove the UMD distribution of Keycloak JS (#33080)

Closes #32826

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

.github/workflows/js-ci.yml

@@ -72,20 +72,6 @@ jobs:
 
       - run: pnpm --fail-if-no-match --filter ${{ env.WORKSPACE }} build
 
-  keycloak-js:
-    name: Keycloak JS
-    needs: conditional
-    if: needs.conditional.outputs.js-ci == 'true'
-    runs-on: ubuntu-latest
-    env:
-      WORKSPACE: keycloak-js
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: ./.github/actions/pnpm-setup
-
-      - run: pnpm --fail-if-no-match --filter ${{ env.WORKSPACE }} build
-
   ui-shared:
     name: UI Shared
     needs: conditional
@@ -299,7 +285,6 @@ jobs:
       - conditional
       - build-keycloak
       - admin-client
-      - keycloak-js
       - ui-shared
       - account-ui
       - account-ui-e2e

js/apps/account-ui/package.json

@@ -56,7 +56,6 @@
       "command": "vite --host",
       "dependencies": [
         "../../libs/ui-shared:build",
-        "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
     },
@@ -64,7 +63,6 @@
       "command": "vite preview",
       "dependencies": [
         "../../libs/ui-shared:build",
-        "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
     },
@@ -72,7 +70,6 @@
       "command": "vite build",
       "dependencies": [
         "../../libs/ui-shared:build",
-        "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
     },
@@ -80,7 +77,6 @@
       "command": "eslint .",
       "dependencies": [
         "../../libs/ui-shared:build",
-        "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
     },

js/apps/admin-ui/package.json

@@ -32,7 +32,6 @@
       "command": "vite --host",
       "dependencies": [
         "../../libs/ui-shared:build",
-        "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
     },
@@ -40,7 +39,6 @@
       "command": "vite preview",
       "dependencies": [
         "../../libs/ui-shared:build",
-        "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
     },
@@ -48,7 +46,6 @@
       "command": "vite build",
       "dependencies": [
         "../../libs/ui-shared:build",
-        "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
     },
@@ -56,7 +53,6 @@
       "command": "eslint .",
       "dependencies": [
         "../../libs/ui-shared:build",
-        "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
     },
@@ -64,7 +60,6 @@
       "command": "vitest",
       "dependencies": [
         "../../libs/ui-shared:build",
-        "../../libs/keycloak-js:build",
         "../../libs/keycloak-admin-client:build"
       ]
     },

js/libs/keycloak-js/lib/keycloak-authz.d.ts

@@ -18,7 +18,7 @@
  * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import Keycloak from './keycloak';
+import Keycloak from './keycloak.js';
 
 export interface KeycloakAuthorizationPromise {
 	then(onGrant: (rpt: string) => void, onDeny: () => void, onError: () => void): void;

js/libs/keycloak-js/lib/keycloak.js

@@ -298,25 +298,8 @@ function Keycloak (config) {
             }
         }
 
-        function domReady() {
-            var promise = createPromise();
-
-            var checkReadyState = function () {
-                if (document.readyState === 'interactive' || document.readyState === 'complete') {
-                    document.removeEventListener('readystatechange', checkReadyState);
-                    promise.setSuccess();
-                }
-            }
-            document.addEventListener('readystatechange', checkReadyState);
-
-            checkReadyState(); // just in case the event was already fired and we missed it (in case the init is done later than at the load time, i.e. it's done from code)
-
-            return promise.promise;
-        }
-
         configPromise.then(function () {
-            domReady()
+            check3pCookiesSupported()
-                .then(check3pCookiesSupported)
                 .then(processInit)
                 .catch(function (error) {
                     promise.setError(error);

js/libs/keycloak-js/package.json

@@ -1,61 +1,27 @@
 {
   "name": "keycloak-js",
   "version": "999.0.0-SNAPSHOT",
-  "description": "A client-side JavaScript OpenID Connect library that can be used to secure web applications",
+  "type": "module",
-  "main": "./dist/keycloak.js",
+  "description": "A client-side JavaScript OpenID Connect library that can be used to secure web applications.",
-  "module": "./dist/keycloak.mjs",
-  "types": "./dist/keycloak.d.ts",
   "exports": {
     ".": {
-      "import": {
+      "types": "./lib/keycloak.d.ts",
-        "types": "./dist/keycloak.d.mts",
+      "default": "./lib/keycloak.js"
-        "default": "./dist/keycloak.mjs"
-      },
-      "require": {
-        "types": "./dist/keycloak.d.ts",
-        "default": "./dist/keycloak.js"
-      }
     },
     "./authz": {
-      "import": {
+      "types": "./lib/keycloak-authz.d.ts",
-        "types": "./dist/keycloak-authz.d.mts",
+      "default": "./lib/keycloak-authz.js"
-        "default": "./dist/keycloak-authz.mjs"
-      },
-      "require": {
-        "types": "./dist/keycloak-authz.d.ts",
-        "default": "./dist/keycloak-authz.js"
-      }
     }
   },
   "files": [
-    "dist"
+    "lib"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "wireit",
-    "duplicate-types": "shx cp dist/keycloak.d.ts dist/keycloak.d.mts && shx cp dist/keycloak-authz.d.ts dist/keycloak-authz.d.mts",
-    "prepublishOnly": "pnpm build"
-  },
-  "wireit": {
-    "build": {
-      "command": "rollup --config --configPlugin typescript && pnpm duplicate-types",
-      "files": [
-        "src/**",
-        "package.json",
-        "rollup.config.ts",
-        "tsconfig.json"
-      ],
-      "output": [
-        "dist/**",
-        "!dist/*.d.ts"
-      ]
-    }
-  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/keycloak/keycloak"
+    "url": "git+https://github.com/keycloak/keycloak.git"
   },
   "author": "Keycloak",
   "license": "Apache-2.0",
@@ -66,11 +32,5 @@
     "oauth",
     "oauth2",
     "authentication"
-  ],
+  ]
-  "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.0",
-    "rollup": "^4.22.4",
-    "shx": "^0.3.4"
-  }
 }

js/libs/keycloak-js/pom.xml

@@ -46,6 +46,11 @@
                 <groupId>com.github.eirslett</groupId>
                 <artifactId>frontend-maven-plugin</artifactId>
                 <executions>
+                    <execution>
+                        <!-- Skip execution of build with an empty phase. -->
+                        <id>pnpm-build</id>
+                        <phase/>
+                    </execution>
                     <execution>
                         <id>pack</id>
                         <phase>package</phase>

js/libs/keycloak-js/rollup.config.ts

@@ -1,68 +0,0 @@
-import terser from "@rollup/plugin-terser";
-import path from "node:path";
-import type { OutputOptions, RollupOptions } from "rollup";
-import { defineConfig } from "rollup";
-
-interface DefineOptionsArgs {
-  file: string;
-  name: string;
-  amdId: string;
-}
-
-const sourceFile = (file: string) => path.join("src", file);
-const targetFile = (file: string) => path.join("dist", file);
-
-function defineOptions({
-  file,
-  name,
-  amdId,
-}: DefineOptionsArgs): RollupOptions[] {
-  const input = sourceFile(`${file}.js`);
-  const umdOutput: OutputOptions = {
-    format: "umd",
-    name,
-    amd: { id: amdId },
-  };
-
-  return [
-    // Modern ES module variant.
-    {
-      input,
-      output: [
-        {
-          file: targetFile(`${file}.mjs`),
-        },
-      ],
-    },
-    // Legacy Universal Module Definition, or “UMD”.
-    {
-      input,
-      output: [
-        {
-          ...umdOutput,
-          file: targetFile(`${file}.js`),
-        },
-        {
-          ...umdOutput,
-          file: targetFile(`${file}.min.js`),
-          sourcemap: true,
-          sourcemapExcludeSources: true,
-          plugins: [terser()],
-        },
-      ],
-    },
-  ];
-}
-
-export default defineConfig([
-  ...defineOptions({
-    file: "keycloak",
-    name: "Keycloak",
-    amdId: "keycloak",
-  }),
-  ...defineOptions({
-    file: "keycloak-authz",
-    name: "KeycloakAuthorization",
-    amdId: "keycloak-authorization",
-  }),
-]);

pnpm-lock.yaml

@@ -378,20 +378,7 @@ importers:
         specifier: ^10.9.2
         version: 10.9.2(@swc/core@1.7.22)(@types/node@22.7.2)(typescript@5.6.2)
 
-  js/libs/keycloak-js:
+  js/libs/keycloak-js: {}
-    devDependencies:
-      '@rollup/plugin-terser':
-        specifier: ^0.4.4
-        version: 0.4.4(rollup@4.22.4)
-      '@rollup/plugin-typescript':
-        specifier: ^12.1.0
-        version: 12.1.0(rollup@4.22.4)(tslib@2.7.0)(typescript@5.6.2)
-      rollup:
-        specifier: ^4.22.4
-        version: 4.22.4
-      shx:
-        specifier: ^0.3.4
-        version: 0.3.4
 
   js/libs/ui-shared:
     dependencies:
@@ -1266,19 +1253,6 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/plugin-typescript@12.1.0':
-    resolution: {integrity: sha512-Kzs8KGJofe7cfTRODsnG1jNGxSvU8gVoNNd7Z/QaY25AYwe2LSSUpx/kPxqF38NYkpR8de3m51r9uwJpDlz6dg==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^2.14.0||^3.0.0||^4.0.0
-      tslib: '*'
-      typescript: '>=3.7.0'
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-      tslib:
-        optional: true
-
   '@rollup/pluginutils@5.1.0':
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -5796,15 +5770,6 @@ snapshots:
     optionalDependencies:
       rollup: 4.22.4
 
-  '@rollup/plugin-typescript@12.1.0(rollup@4.22.4)(tslib@2.7.0)(typescript@5.6.2)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.22.4)
-      resolve: 1.22.8
-      typescript: 5.6.2
-    optionalDependencies:
-      rollup: 4.22.4
-      tslib: 2.7.0
-
   '@rollup/pluginutils@5.1.0(rollup@4.22.4)':
     dependencies:
       '@types/estree': 1.0.6

testsuite/integration-arquillian/servers/auth-server/services/testsuite-providers/pom.xml

@@ -31,7 +31,7 @@
     <name>Auth Server Services - Testsuite Providers</name>
 
     <properties>
-        <js-adapter.dist.path>${project.basedir}/../../../../../../js/libs/keycloak-js/dist</js-adapter.dist.path>
+        <js-adapter.dist.path>${project.basedir}/../../../../../../js/libs/keycloak-js/lib</js-adapter.dist.path>
         <js-adapter.target.path>${project.basedir}/target/classes/javascript</js-adapter.target.path>
     </properties>
 

testsuite/integration-arquillian/servers/auth-server/services/testsuite-providers/src/main/resources/javascript/index.html

@@ -17,7 +17,13 @@
 
 <html>
 <head>
-    <script src="js/keycloak.js"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "keycloak-js": "./js/keycloak.js"
+        }
+      }
+    </script>
 </head>
 <body>
 
@@ -28,7 +34,37 @@
 <pre style="background-color: #ddd; border: 1px solid #ccc; padding: 10px;" id="events"></pre>
 
 
-<script>
+<script type="module">
+    import Keycloak from 'keycloak-js';
+
+    function output(data) {
+        if (typeof data === 'object') {
+            data = JSON.stringify(data, null, '  ');
+        }
+        document.getElementById('output').innerHTML = data;
+    }
+
+    function event(event) {
+        var e = document.getElementById('events').innerHTML;
+        document.getElementById('events').innerHTML = new Date().toLocaleString() + "\t" + event + "\n" + e;
+    }
+
+    function getParameterByName(name, url) {
+        if (!url) url = window.location.href;
+        name = name.replace(/[\[\]]/g, "\\$&");
+        var regex = new RegExp("[?&#]" + name + "(=([^&#]*)|&|#|$)"),
+            results = regex.exec(url);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, " "));
+    }
+
+    // Expose globals for tests.
+    globalThis.Keycloak = Keycloak;
+    globalThis.output = output;
+    globalThis.event = event;
+    globalThis.getParameterByName = getParameterByName;
+
      function showExpires() {
         if (!keycloak.tokenParsed) {
             output("Not authenticated");
@@ -49,28 +85,6 @@
     function showError() {
         output("Error: " + getParameterByName("error") + "\n" + "Error description: " + getParameterByName("error_description"));
     }
-
-    function getParameterByName(name, url) {
-        if (!url) url = window.location.href;
-        name = name.replace(/[\[\]]/g, "\\$&");
-        var regex = new RegExp("[?&#]" + name + "(=([^&#]*)|&|#|$)"),
-            results = regex.exec(url);
-        if (!results) return null;
-        if (!results[2]) return '';
-        return decodeURIComponent(results[2].replace(/\+/g, " "));
-    }
-
-    function output(data) {
-        if (typeof data === 'object') {
-            data = JSON.stringify(data, null, '  ');
-        }
-        document.getElementById('output').innerHTML = data;
-    }
-
-    function event(event) {
-        var e = document.getElementById('events').innerHTML;
-        document.getElementById('events').innerHTML = new Date().toLocaleString() + "\t" + event + "\n" + e;
-    }
 </script>
 </body>
 </html>

testsuite/integration-arquillian/servers/auth-server/services/testsuite-providers/src/main/resources/javascript/init-in-head.html

@@ -17,14 +17,41 @@
 
 <html>
 <head>
-    <script src="js/keycloak.js"></script>
+    <script type="importmap">
-    <script>
+      {
-        var keycloak = new Keycloak({
+        "imports": {
+          "keycloak-js": "./js/keycloak.js"
+        }
+      }
+    </script>
+    <script type="module">
+        import Keycloak from 'keycloak-js';
+
+        function output(data) {
+            if (typeof data === 'object') {
+                data = JSON.stringify(data, null, '  ');
+            }
+            document.getElementById('output').innerHTML = data;
+        }
+
+        function event(event) {
+            var e = document.getElementById('events').innerHTML;
+            document.getElementById('events').innerHTML = new Date().toLocaleString() + "\t" + event + "\n" + e;
+        }
+
+        const keycloak = new Keycloak({
             url: '${js-adapter.auth-server-url}',
             realm: 'test',
             clientId: 'js-console'
         });
-        keycloak.init({}).then(function(authenticated) {
+
+        // Expose globals for tests.
+        globalThis.Keycloak = Keycloak;
+        globalThis.keycloak = keycloak;
+        globalThis.output = output;
+        globalThis.event = event;
+
+        keycloak.init({}).then((authenticated) => {
             output('Init Success (' + (authenticated ? 'Authenticated' : 'Not Authenticated') + ')');
         }).catch(function() {
             output('Init Error');
@@ -46,20 +73,5 @@
 
 <h2>Events</h2>
 <pre style="background-color: #ddd; border: 1px solid #ccc; padding: 10px;" id="events"></pre>
-
-
-<script>
-    function output(data) {
-        if (typeof data === 'object') {
-            data = JSON.stringify(data, null, '  ');
-        }
-        document.getElementById('output').innerHTML = data;
-    }
-
-    function event(event) {
-        var e = document.getElementById('events').innerHTML;
-        document.getElementById('events').innerHTML = new Date().toLocaleString() + "\t" + event + "\n" + e;
-    }
-</script>
 </body>
 </html>

tsconfig.json

@@ -10,7 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,