@keycloakify/svelte 0.0.1-rc.6 → 0.1.0

package/keycloakify-svelte/tools/useInsertScriptTags.js

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import { onMount } from 'svelte';
+import { assert } from 'tsafe/assert';
+const alreadyMountedComponentOrHookNames = new Set();
+/**
+ * NOTE: The component that use this hook can only be mounded once!
+ * And can't rerender with different scriptTags.
+ * If it's mounted again the page will be reloaded.
+ * This simulates the behavior of a server rendered page that imports javascript in the head.
+ *
+ * The returned function is supposed to be called in a useEffect and
+ * will not download the scripts multiple times event if called more than once (react strict mode).
+ *
+ */
+export function useInsertScriptTags(params) {
+    const { scriptTags, componentOrHookName } = params;
+    onMount(() => {
+        const isAlreadyMounted = alreadyMountedComponentOrHookNames.has(componentOrHookName);
+        if (isAlreadyMounted) {
+            reload: {
+                if (new URL(window.location.href).searchParams.get('viewMode') === 'docs') {
+                    // NOTE: Special case for Storybook, we want to avoid infinite reload loop.
+                    break reload;
+                }
+                window.location.reload();
+            }
+            return;
+        }
+        alreadyMountedComponentOrHookNames.add(componentOrHookName);
+    });
+    let areScriptsInserted = false;
+    const insertScriptTags = () => {
+        if (areScriptsInserted) {
+            return;
+        }
+        scriptTags.forEach((scriptTag) => {
+            // NOTE: Avoid loading same script twice. (Like jQuery for example)
+            {
+                const scripts = document.getElementsByTagName('script');
+                for (let i = 0; i < scripts.length; i++) {
+                    const script = scripts[i];
+                    if ('textContent' in scriptTag) {
+                        const textContent = typeof scriptTag.textContent === 'function' ? scriptTag.textContent() : scriptTag.textContent;
+                        if (script.textContent === textContent) {
+                            return;
+                        }
+                        continue;
+                    }
+                    if ('src' in scriptTag) {
+                        if (script.getAttribute('src') === scriptTag.src) {
+                            return;
+                        }
+                        continue;
+                    }
+                    assert(false);
+                }
+            }
+            const htmlElement = document.createElement('script');
+            htmlElement.type = scriptTag.type;
+            (() => {
+                if ('textContent' in scriptTag) {
+                    const textContent = typeof scriptTag.textContent === 'function' ? scriptTag.textContent() : scriptTag.textContent;
+                    htmlElement.textContent = textContent;
+                    return;
+                }
+                if ('src' in scriptTag) {
+                    htmlElement.src = scriptTag.src;
+                    return;
+                }
+                assert(false);
+            })();
+            document.head.appendChild(htmlElement);
+        });
+        areScriptsInserted = true;
+    };
+    return { insertScriptTags };
+}

package/keycloakify-svelte/tools/useReducer.d.ts

@@ -0,0 +1,2 @@
+import { type Readable } from 'svelte/store';
+export declare const useReducer: <T, R = void>(reducer: (state: T, action: R) => T, initialState: T) => [Readable<T>, (action: R) => void];

package/keycloakify-svelte/tools/useReducer.js

@@ -0,0 +1,7 @@
+import { derived, writable } from 'svelte/store';
+export const useReducer = (reducer, initialState) => {
+    const state = writable(initialState);
+    const dispatch = (action) => state.update((currentState) => reducer(currentState, action));
+    const readableState = derived(state, ($state) => $state);
+    return [readableState, dispatch];
+};

package/keycloakify-svelte/tools/useSetClassName.d.ts

@@ -0,0 +1,4 @@
+export declare function useSetClassName(params: {
+    qualifiedName: 'html' | 'body';
+    className: string | undefined;
+}): void;

package/keycloakify-svelte/tools/useSetClassName.js

@@ -0,0 +1,15 @@
+import { onMount } from 'svelte';
+export function useSetClassName(params) {
+    const { qualifiedName, className } = params;
+    onMount(() => {
+        if (className && className !== '') {
+            const htmlClassList = document.getElementsByTagName(qualifiedName)[0].classList;
+            const tokens = className.split(' ');
+            htmlClassList.add(...tokens);
+            // Clean up when the component is destroyed
+            return () => {
+                htmlClassList.remove(...tokens);
+            };
+        }
+    });
+}

package/keycloakify-svelte/tools/useState.d.ts

@@ -0,0 +1,2 @@
+import { type Readable } from 'svelte/store';
+export declare const useState: <T>(initialState: T) => [Readable<T>, (newState: T) => void];

package/keycloakify-svelte/tools/useState.js

@@ -0,0 +1,7 @@
+import { derived, writable } from 'svelte/store';
+export const useState = (initialState) => {
+    const state = writable(initialState);
+    const dispatch = (newState) => state.set(newState);
+    const readableState = derived(state, ($state) => $state);
+    return [readableState, dispatch];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/svelte",
-  "version": "0.0.1-rc.6",
+  "version": "0.1.0",
   "description": "Svelte Components for Keycloakify",
   "keywords": [
     "keycloak",
@@ -432,7 +432,7 @@
     "lint": "yarn format && eslint . --fix"
   },
   "peerDependencies": {
-    "keycloakify": "^11.3.19",
+    "keycloakify": "^11.7.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
@@ -450,7 +450,7 @@
     "eslint-plugin-svelte": "^2.46.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^15.12.0",
-    "keycloakify": "^11.3.32",
+    "keycloakify": "^11.7.0",
     "npm-check-updates": "^17.1.11",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.3.2",
@@ -462,5 +462,8 @@
     "typescript-eslint": "^8.15.0",
     "vite": "^5.4.11",
     "zod": "^3.23.8"
+  },
+  "bin": {
+    "_keycloakify-custom-handler": "keycloakify-svelte/bin/index.js"
   }
 }