@keycloakify/svelte 0.1.3 → 0.1.4

package/src/bin/update-kc-gen.ts

@@ -0,0 +1,153 @@
+import * as crypto from 'crypto';
+import * as fs from 'fs';
+import { join as pathJoin } from 'path';
+import type { BuildContext } from './core';
+import { getIsPrettierAvailable, runPrettier } from './tools/runPrettier';
+
+export async function command(params: { buildContext: BuildContext }) {
+  const { buildContext } = params;
+
+  const filePath = pathJoin(buildContext.themeSrcDirPath, 'kc.gen.ts');
+  const svelteFilePath = pathJoin(buildContext.themeSrcDirPath, 'kc.gen.svelte');
+
+  const hasLoginTheme = buildContext.implementedThemeTypes.login.isImplemented;
+  const hasAccountTheme = buildContext.implementedThemeTypes.account.isImplemented;
+  const hasAdminTheme = buildContext.implementedThemeTypes.admin.isImplemented;
+
+  const newContent = [
+    `/* eslint-disable */`,
+    ``,
+    `// @ts-nocheck`,
+    ``,
+    `// noinspection JSUnusedGlobalSymbols`,
+    ``,
+    `export type ThemeName = ${buildContext.themeNames.map((themeName) => `"${themeName}"`).join(' | ')};`,
+    ``,
+    `export const themeNames: ThemeName[] = [${buildContext.themeNames.map((themeName) => `"${themeName}"`).join(', ')}];`,
+    ``,
+    `export type KcEnvName = ${buildContext.environmentVariables.length === 0 ? 'never' : buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(' | ')};`,
+    ``,
+    `export const kcEnvNames: KcEnvName[] = [${buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(', ')}];`,
+    ``,
+    `export const kcEnvDefaults: Record<KcEnvName, string> = ${JSON.stringify(
+      Object.fromEntries(
+        buildContext.environmentVariables.map(({ name, default: defaultValue }) => [name, defaultValue]),
+      ),
+      null,
+      2,
+    )};`,
+    ``,
+    `export type KcContext =`,
+    hasLoginTheme && `    | import("./login/KcContext").KcContext`,
+    hasAccountTheme && `    | import("./account/KcContext").KcContext`,
+    hasAdminTheme && `    | import("./admin/KcContext").KcContext`,
+    ``,
+    `declare global {`,
+    `    interface Window {`,
+    `        kcContext?: KcContext;`,
+    `    }`,
+    `}`,
+    ``,
+  ]
+    .filter((item) => typeof item === 'string')
+    .join('\n');
+
+  const newSvelteContent = [
+    `  import type { Component } from 'svelte';`,
+    `  import type { KcContext } from './kc.gen';`,
+    ``,
+    `  const { kcContext, Fallback }: { kcContext: KcContext; Fallback?: Component } = $props();`,
+    ``,
+    hasLoginTheme && `  const KcLoginPage = import("./login/KcPage.svelte");`,
+    hasAccountTheme && `  const KcAccountPage = import("./account/KcPage.svelte");`,
+    hasAdminTheme && `  const KcAdminPage = import("./admin/KcPage.svelte");`,
+    `</script>`,
+    ``,
+    `{#if kcContext.themeType === 'login'}`,
+    hasLoginTheme && `  {#await KcLoginPage}`,
+    hasLoginTheme && `    {#if Fallback}`,
+    hasLoginTheme && `      <Fallback></Fallback>`,
+    hasLoginTheme && `    {/if}`,
+    hasLoginTheme && `  {:then { default: KcPage }}`,
+    hasLoginTheme && `    <KcPage {kcContext} />`,
+    hasLoginTheme && `  {/await}`,
+    !hasLoginTheme && `  <!-- login not implemented -->`,
+    `{:else if kcContext.themeType === 'account'}`,
+    hasAccountTheme && `  {#await KcAccountPage}`,
+    hasAccountTheme && `    {#if Fallback}`,
+    hasAccountTheme && `      <Fallback></Fallback>`,
+    hasAccountTheme && `    {/if}`,
+    hasAccountTheme && `  {:then { default: KcPage }}`,
+    hasAccountTheme && `    <KcPage {kcContext} />`,
+    hasAccountTheme && `  {/await}`,
+    !hasAccountTheme && `  <!-- account not implemented -->`,
+    // TODO: admin theme
+    `{/if}`,
+  ]
+    .filter((item) => typeof item === 'string')
+    .join('\n');
+
+  const hash = crypto.createHash('sha256').update(newContent).digest('hex');
+  const svelteHash = crypto.createHash('sha256').update(newSvelteContent).digest('hex');
+
+  skip_if_no_changes: {
+    if (!fs.existsSync(filePath)) {
+      break skip_if_no_changes;
+    }
+
+    const currentContent = fs.readFileSync(filePath).toString('utf8');
+
+    if (!currentContent.includes(hash)) {
+      break skip_if_no_changes;
+    }
+
+    return;
+  }
+
+  skip_if_no_svelte_changes: {
+    if (!fs.existsSync(svelteFilePath)) {
+      break skip_if_no_svelte_changes;
+    }
+
+    const currentContent = fs.readFileSync(svelteFilePath).toString('utf8');
+
+    if (!currentContent.includes(svelteHash)) {
+      break skip_if_no_svelte_changes;
+    }
+
+    return;
+  }
+
+  let sourceCode = [
+    `// This file is auto-generated by keycloakify. Do not edit it manually.`,
+    `// Hash: ${hash}`,
+    ``,
+    newContent,
+  ].join('\n');
+
+  let svelteSourceCode = [
+    `<script lang="ts">`,
+    `// This file is auto-generated by keycloakify. Do not edit it manually.`,
+    `// Hash: ${svelteHash}`,
+    ``,
+    newSvelteContent,
+  ].join('\n');
+
+  run_prettier: {
+    if (!(await getIsPrettierAvailable())) {
+      break run_prettier;
+    }
+
+    sourceCode = await runPrettier({
+      filePath,
+      sourceCode,
+    });
+    svelteSourceCode = await runPrettier({
+      filePath: svelteFilePath,
+      sourceCode: svelteSourceCode,
+    });
+  }
+
+  fs.writeFileSync(filePath, Buffer.from(sourceCode, 'utf8'));
+  fs.writeFileSync(svelteFilePath, Buffer.from(svelteSourceCode, 'utf8'));
+}

package/src/tools/useConst.ts

@@ -0,0 +1,4 @@
+export function useConst<T>(getValue: () => T): T {
+  const value = getValue();
+  return value;
+}

package/src/tools/useInsertLinkTags.ts

@@ -0,0 +1,81 @@
+import { onMount } from 'svelte';
+import { id } from 'tsafe/id';
+import { useConst } from '@keycloakify/svelte/tools/useConst';
+import { useReducer } from '@keycloakify/svelte/tools/useReducer';
+
+const alreadyMountedComponentOrHookNames = new Set<string>();
+
+/**
+ * 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: { componentOrHookName: string; hrefs: string[] }) {
+  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<boolean, void>(() => true, false);
+
+  const refPrAllStyleSheetLoaded = useConst(() => ({
+    current: id<Promise<void> | undefined>(undefined),
+  }));
+
+  onMount(() => {
+    let isActive = true;
+
+    (refPrAllStyleSheetLoaded.current ??= (async () => {
+      let lastMountedHtmlElement: HTMLLinkElement | undefined = undefined;
+
+      const prs: Promise<void>[] = [];
+
+      for (const href of hrefs) {
+        const htmlElement = document.createElement('link');
+
+        prs.push(new Promise<void>((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/src/tools/useInsertScriptTags.ts

@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import { onMount } from 'svelte';
+import { assert } from 'tsafe/assert';
+
+export type ScriptTag = ScriptTag.TextContent | ScriptTag.Src;
+
+export namespace ScriptTag {
+  type Common = {
+    type: 'text/javascript' | 'module';
+  };
+
+  export type TextContent = Common & {
+    textContent: string | (() => string);
+  };
+  export type Src = Common & {
+    src: string;
+  };
+}
+
+const alreadyMountedComponentOrHookNames = new Set<string>();
+
+/**
+ * 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: { componentOrHookName: string; scriptTags: ScriptTag[] }) {
+  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/src/tools/useReducer.ts

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

package/src/tools/useSetClassName.ts

@@ -0,0 +1,18 @@
+import { onMount } from 'svelte';
+
+export function useSetClassName(params: { qualifiedName: 'html' | 'body'; className: string | undefined }) {
+  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/src/tools/useState.ts

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

package/stories/login/KcPage.svelte

@@ -12,7 +12,7 @@
 
   const classes = {} satisfies { [key in ClassKey]?: string };
   const doMakeUserConfirmPassword = true;
-  
+
   const page = async (): Promise<{ default?: Component<any> }> => {
     switch (kcContext.pageId) {
       default:
@@ -22,13 +22,13 @@
 </script>
 
 {#await page() then { default: Page }}
-    <Page
-      {kcContext}
-      i18n={i18n}
-      {classes}
-      {Template}
-      {UserProfileFormFields}
-      doUseDefaultCss={true}
-      {doMakeUserConfirmPassword}
-    ></Page>
+  <Page
+    {kcContext}
+    {i18n}
+    {classes}
+    {Template}
+    {UserProfileFormFields}
+    doUseDefaultCss={true}
+    {doMakeUserConfirmPassword}
+  ></Page>
 {/await}