Use exports field for Keycloak JS (#24974)

Closes #24923

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

docs/documentation/release_notes/topics/24_0_0.adoc

@@ -0,0 +1,3 @@
+= Keycloak JS using `exports` field
+
+The Keycloak JS adapter now uses the https://webpack.js.org/guides/package-exports/[`exports` field] in `package.json`. This improves support for more modern bundlers like Webpack 5 and Vite, but comes with some unavoidable breaking changes. Consult the link:{upgradingguide_link}[{upgradingguide_name}] for more details.

docs/documentation/upgrading/topics/keycloak/changes-24_0_0.adoc

@@ -0,0 +1,14 @@
+= Keycloak JS imports might need to be updated
+
+If you are loading Keycloak JS directly from the Keycloak server this section can be safely ignored. If you are loading Keycloak JS from the NPM package and are using a bundler like Webpack, Vite, etc. you might need to make some changes to your code. The Keycloak JS package now uses the https://webpack.js.org/guides/package-exports/[`exports` field] in the package.json file. This means that you might have to change your imports:
+
+[source,js]
+----
+// Before
+import Keycloak from 'keycloak-js/dist/keycloak.js';
+import AuthZ from 'keycloak-js/dist/keycloak-authz.js';
+
+// After
+import Keycloak from 'keycloak-js';
+import AuthZ from 'keycloak-js/authz';
+----

js/libs/keycloak-js/package.json

@@ -5,16 +5,39 @@
   "main": "./dist/keycloak.js",
   "module": "./dist/keycloak.mjs",
   "types": "./dist/keycloak.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/keycloak.d.mts",
+        "default": "./dist/keycloak.mjs"
+      },
+      "require": {
+        "types": "./dist/keycloak.d.ts",
+        "default": "./dist/keycloak.js"
+      }
+    },
+    "./authz": {
+      "import": {
+        "types": "./dist/keycloak-authz.d.mts",
+        "default": "./dist/keycloak-authz.mjs"
+      },
+      "require": {
+        "types": "./dist/keycloak-authz.d.ts",
+        "default": "./dist/keycloak-authz.js"
+      }
+    }
+  },
   "files": [
     "dist"
   ],
   "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 run build"
   },
   "wireit": {
     "build": {
-      "command": "rollup --config --configPlugin typescript",
+      "command": "rollup --config --configPlugin typescript && pnpm run duplicate-types",
       "files": [
         "src/**",
         "package.json",
@@ -48,7 +71,8 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
     "es6-promise": "^4.2.8",
-    "rollup": "^4.5.1"
+    "rollup": "^4.5.1",
+    "shx": "^0.3.4"
   },
   "dependencies": {
     "base64-js": "^1.5.1",

js/pnpm-lock.yaml

@@ -384,6 +384,9 @@ importers:
       rollup:
         specifier: ^4.5.1
         version: 4.5.1
+      shx:
+        specifier: ^0.3.4
+        version: 0.3.4
 
   libs/keycloak-masthead:
     dependencies:
@@ -4620,6 +4623,11 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /interpret@1.4.0:
+    resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
   /is-arguments@1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -6139,6 +6147,13 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /rechoir@0.6.2:
+    resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      resolve: 1.22.8
+    dev: true
+
   /redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -6426,6 +6441,25 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /shelljs@0.8.5:
+    resolution: {integrity: sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+      interpret: 1.4.0
+      rechoir: 0.6.2
+    dev: true
+
+  /shx@0.3.4:
+    resolution: {integrity: sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+      shelljs: 0.8.5
+    dev: true
+
   /side-channel@1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
     dependencies: