@keycloakify/svelte 0.0.1-rc.1

package/dist/tools/useInsertLinkTags.d.ts

@@ -0,0 +1,12 @@
+/**
+ * NOTE: The component that use this hook can only be mounded once!
+ * And can't rerender with different hrefs.
+ * If it's mounted again the page will be reloaded.
+ * This simulates the behavior of a server rendered page that imports css stylesheet in the head.
+ */
+export declare function useInsertLinkTags(params: {
+    componentOrHookName: string;
+    hrefs: string[];
+}): {
+    areAllStyleSheetsLoaded: import("svelte/store").Readable<boolean>;
+};

package/dist/tools/useInsertLinkTags.js

@@ -0,0 +1,62 @@
+import { onMount } from 'svelte';
+import { id } from 'tsafe/id';
+import { useConst } from './useConst';
+import { useReducer } from './useReducer';
+const alreadyMountedComponentOrHookNames = new Set();
+/**
+ * NOTE: The component that use this hook can only be mounded once!
+ * And can't rerender with different hrefs.
+ * If it's mounted again the page will be reloaded.
+ * This simulates the behavior of a server rendered page that imports css stylesheet in the head.
+ */
+export function useInsertLinkTags(params) {
+    const { hrefs, 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);
+    });
+    const [areAllStyleSheetsLoaded, setAllStyleSheetsLoaded] = useReducer(() => true, false);
+    const refPrAllStyleSheetLoaded = useConst(() => ({
+        current: id(undefined),
+    }));
+    onMount(() => {
+        let isActive = true;
+        (refPrAllStyleSheetLoaded.current ??= (async () => {
+            let lastMountedHtmlElement = undefined;
+            const prs = [];
+            for (const href of hrefs) {
+                const htmlElement = document.createElement('link');
+                prs.push(new Promise((resolve) => htmlElement.addEventListener('load', () => resolve())));
+                htmlElement.rel = 'stylesheet';
+                htmlElement.href = href;
+                if (lastMountedHtmlElement !== undefined) {
+                    lastMountedHtmlElement.insertAdjacentElement('afterend', htmlElement);
+                }
+                else {
+                    document.head.prepend(htmlElement);
+                }
+                lastMountedHtmlElement = htmlElement;
+            }
+            await Promise.all(prs);
+        })()).then(() => {
+            if (!isActive) {
+                return;
+            }
+            setAllStyleSheetsLoaded();
+        });
+        return () => {
+            isActive = false;
+        };
+    });
+    return { areAllStyleSheetsLoaded };
+}

package/dist/tools/useInsertScriptTags.d.ts

@@ -0,0 +1,29 @@
+export type ScriptTag = ScriptTag.TextContent | ScriptTag.Src;
+export declare namespace ScriptTag {
+    type Common = {
+        type: 'text/javascript' | 'module';
+    };
+    export type TextContent = Common & {
+        textContent: string | (() => string);
+    };
+    export type Src = Common & {
+        src: string;
+    };
+    export {};
+}
+/**
+ * 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 declare function useInsertScriptTags(params: {
+    componentOrHookName: string;
+    scriptTags: ScriptTag[];
+}): {
+    insertScriptTags: () => void;
+};

package/dist/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/dist/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/dist/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/dist/tools/useSetClassName.d.ts

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

package/dist/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/dist/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/dist/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];
+};