@keycloakify/svelte 0.2.6 → 0.2.8-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/svelte",
-  "version": "0.2.6",
+  "version": "0.2.8-rc.1",
   "description": "Svelte Components for Keycloakify",
   "keywords": [
     "keycloak",
@@ -437,36 +437,38 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.48.5",
-    "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@eslint/js": "^10.0.1",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/eslint": "^9.6.1",
     "@types/node": "^24.10.1",
     "@vercel/ncc": "^0.38.4",
+    "chalk": "^5.6.2",
     "cli-select": "^1.1.2",
     "conventional-changelog": "^7.1.1",
     "conventional-changelog-angular": "^8.1.0",
-    "eslint": "^9.39.1",
+    "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-svelte": "^3.13.0",
-    "eslint-plugin-unused-imports": "^4.3.0",
-    "globals": "^16.5.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-svelte": "^3.15.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^17.3.0",
     "husky": "^9.1.7",
-    "keycloakify": "^11.11.3",
-    "npm-check-updates": "^19.1.2",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.15",
-    "svelte": "^5.43.7",
-    "svelte-check": "^4.3.4",
+    "keycloakify": "^11.15.1",
+    "npm-check-updates": "^19.6.3",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.0",
+    "publint": "^0.3.17",
+    "svelte": "^5.53.6",
+    "svelte-check": "^4.4.4",
     "ts-node": "^10.9.2",
     "tsx": "4.20.4",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.2",
-    "zod": "^4.1.12"
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1",
+    "zod": "^4.3.6"
   },
   "bin": {
     "_keycloakify-custom-handler": "keycloakify-svelte/bin/index.js"

package/src/account/DefaultPage.svelte

@@ -4,7 +4,7 @@
   import type { KcContext } from './KcContext';
 
   const props: PageProps<KcContext, I18n> = $props();
-  const { kcContext: kcContext, ...rest } = props;
+  const { kcContext, ...rest } = $derived(props);
   const loadComponent = () => {
     switch (kcContext.pageId) {
       case 'password.ftl':

package/src/account/Template.svelte

@@ -4,17 +4,17 @@
   import { useSetClassName } from '@keycloakify/svelte/tools/useSetClassName';
   import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
   import { clsx } from 'keycloakify/tools/clsx';
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import type { I18n } from './i18n';
   import type { KcContext } from './KcContext';
   import { kcSanitize } from 'keycloakify/lib/kcSanitize';
 
   const { kcContext, i18n, doUseDefaultCss, active, classes, children }: TemplateProps<KcContext, I18n> = $props();
-  const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+  const { kcClsx } = $derived(getKcClsx({ doUseDefaultCss, classes }));
 
-  const { msg, msgStr, currentLanguage, enabledLanguages } = $i18n;
+  const { msg, msgStr, currentLanguage, enabledLanguages } = $derived($i18n);
 
-  const { url, features, realm, message, referrer } = kcContext;
+  const { url, features, realm, message, referrer } = $derived(kcContext);
 
   onMount(() => {
     document.title = msgStr('accountManagementTitle');
@@ -22,15 +22,22 @@
 
   useSetClassName({
     qualifiedName: 'html',
-    className: kcClsx('kcHtmlClass'),
+    className: untrack(() => kcClsx('kcHtmlClass')),
   });
 
   useSetClassName({
     qualifiedName: 'body',
-    className: clsx('admin-console', 'user', kcClsx('kcBodyClass')),
+    className: clsx(
+      'admin-console',
+      'user',
+      untrack(() => kcClsx('kcBodyClass')),
+    ),
   });
 
-  const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss });
+  const { isReadyToRender } = useInitialize({
+    kcContext: untrack(() => kcContext),
+    doUseDefaultCss: untrack(() => doUseDefaultCss),
+  });
 </script>
 
 {#if $isReadyToRender}

package/src/account/pages/Account.svelte

@@ -13,19 +13,21 @@
     ...props
   }: PageProps<Extract<KcContext, { pageId: 'account.ftl' }>, I18n> = $props();
 
-  const classes = {
+  const classes = $derived({
     ...props.classes,
     kcBodyClass: clsx(props.classes?.kcBodyClass, 'user'),
-  };
-
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
   });
 
-  const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
+
+  const { url, realm, messagesPerField, stateChecker, account, referrer } = $derived(kcContext);
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/src/account/pages/Applications.svelte

@@ -12,18 +12,20 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'applications.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
   const {
     url,
     applications: { applications },
     stateChecker,
-  } = kcContext;
+  } = $derived(kcContext);
 
-  const { msg, advancedMsg } = $i18n;
+  const { msg, advancedMsg } = $derived($i18n);
 
   function isArrayWithEmptyObject(variable: unknown): boolean {
     return (

package/src/account/pages/FederatedIdentity.svelte

@@ -11,8 +11,8 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'federatedIdentity.ftl' }>, I18n> = $props();
 
-  const { url, federatedIdentity, stateChecker } = kcContext;
-  const { msg } = $i18n;
+  const { url, federatedIdentity, stateChecker } = $derived(kcContext);
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/src/account/pages/Log.svelte

@@ -12,14 +12,16 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'log.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { log } = kcContext;
+  const { log } = $derived(kcContext);
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/src/account/pages/Password.svelte

@@ -14,18 +14,20 @@
     ...props
   }: PageProps<Extract<KcContext, { pageId: 'password.ftl' }>, I18n> = $props();
 
-  const classes = {
+  const classes = $derived({
     ...props.classes,
     kcBodyClass: clsx(props.classes?.kcBodyClass, 'password'),
-  };
-
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
   });
-  const { url, password, account, stateChecker } = kcContext;
 
-  const { msgStr, msg } = $i18n;
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
+  const { url, password, account, stateChecker } = $derived(kcContext);
+
+  const { msgStr, msg } = $derived($i18n);
 
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');

package/src/account/pages/Sessions.svelte

@@ -12,14 +12,16 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'sessions.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { url, stateChecker, sessions } = kcContext;
+  const { url, stateChecker, sessions } = $derived(kcContext);
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/src/account/pages/Totp.svelte

@@ -14,14 +14,16 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'totp.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
+  const { totp, mode, url, messagesPerField, stateChecker } = $derived(kcContext);
 
-  const { msg, msgStr, advancedMsg } = $i18n;
+  const { msg, msgStr, advancedMsg } = $derived($i18n);
 </script>
 
 <Template

package/src/bin/initialize-account-theme/boilerplate/KcPage.svelte

@@ -6,13 +6,13 @@
 
   const { kcContext }: { kcContext: KcContext } = $props();
 
-  const { i18n } = useI18n({ kcContext });
-  const page = async () => {
+  const { i18n } = $derived(useI18n({ kcContext }));
+  const page = $derived(async () => {
     switch (kcContext.pageId) {
       default:
         return import('@keycloakify/svelte/account/DefaultPage.svelte');
     }
-  };
+  });
 
   const classes = {} satisfies { [key in ClassKey]?: string };
 </script>

package/src/bin/initialize-account-theme/boilerplate/KcPageStory.svelte

@@ -3,7 +3,7 @@
   import { getKcContextMock, type KcPageStoryProps } from './KcPageStory';
 
   const { pageId, kcContext }: KcPageStoryProps = $props();
-  const kcContextMock = getKcContextMock({ pageId, overrides: kcContext });
+  const kcContextMock = $derived(getKcContextMock({ pageId, overrides: kcContext }));
 </script>
 
 <KcPage kcContext={kcContextMock} />

package/src/bin/initialize-account-theme/initialize-account-theme.ts

@@ -26,7 +26,7 @@ export async function command(params: { buildContext: BuildContext }) {
   }
 
   exit_if_uncommitted_changes: {
-    let hasUncommittedChanges: boolean | undefined = undefined;
+    let hasUncommittedChanges: boolean | undefined;
 
     try {
       hasUncommittedChanges =
@@ -73,6 +73,7 @@ export async function command(params: { buildContext: BuildContext }) {
         account: {
           isImplemented: true,
           type: accountThemeType,
+          hasEarlyColorSchemeScript: false,
         },
       },
     },

package/src/bin/tools/getThisCodebaseRootDirPath.ts

@@ -20,3 +20,10 @@ export function getThisCodebaseRootDirPath(): string {
 
   return (result = getThisCodebaseRootDirPath_rec(__dirname));
 }
+
+export function getNearestPackageJsonDirPath(dirPath: string): string {
+  if (fs.existsSync(path.join(dirPath, 'package.json'))) {
+    return dirPath;
+  }
+  return getNearestPackageJsonDirPath(path.join(dirPath, '..'));
+}

package/src/bin/tools/nodeModulesBinDirPath.ts

@@ -1,7 +1,20 @@
-import { sep as pathSep } from 'path';
+import { dirname as pathDirname, join as pathJoin, sep as pathSep } from 'path';
+import { getNearestPackageJsonDirPath } from './getThisCodebaseRootDirPath';
 
 let cache: string | undefined = undefined;
 
+/** NOTE: Careful, this function can fail when the binary
+ *  Used is not in the node_modules directory of the project
+ * (for example when running tests with vscode extension we'll get
+ * '/Users/dylan/.vscode/extensions/vitest.explorer-1.16.0/dist/worker.js'
+ *
+ * instead of
+ * '/Users/joseph/.nvm/versions/node/v22.12.0/bin/node'
+ * or
+ * '/Users/joseph/github/keycloakify-starter/node_modules/.bin/vite'
+ *
+ * as the value of process.argv[1]
+ */
 export function getNodeModulesBinDirPath() {
   if (cache !== undefined) {
     return cache;
@@ -9,6 +22,18 @@ export function getNodeModulesBinDirPath() {
 
   const binPath = process.argv[1];
 
+  special_case_running_not_from_distribution: {
+    if (!binPath.endsWith('.ts')) {
+      break special_case_running_not_from_distribution;
+    }
+
+    const packageJsonDirPath = getNearestPackageJsonDirPath(pathDirname(binPath));
+
+    const nodeModulesBinDirPath = pathJoin(packageJsonDirPath, 'node_modules', '.bin');
+
+    return nodeModulesBinDirPath;
+  }
+
   const segments: string[] = ['.bin'];
 
   let foundNodeModules = false;
@@ -30,6 +55,10 @@ export function getNodeModulesBinDirPath() {
     segments.unshift(segment);
   }
 
+  if (!foundNodeModules) {
+    throw new Error(`Could not find node_modules in path ${binPath}`);
+  }
+
   const nodeModulesBinDirPath = segments.join(pathSep);
 
   cache = nodeModulesBinDirPath;

package/src/bin/tools/runPrettier.ts

@@ -2,12 +2,10 @@ import chalk from 'chalk';
 import * as crypto from 'crypto';
 import * as fsPr from 'fs/promises';
 import { join as pathJoin, resolve as pathResolve } from 'path';
-import { assert } from 'tsafe/assert';
+import { assert, is } from 'tsafe/assert';
 import { id } from 'tsafe/id';
-import { is } from 'tsafe/is';
 import { symToStr } from 'tsafe/symToStr';
 import { getNodeModulesBinDirPath } from './nodeModulesBinDirPath';
-import { readThisNpmPackageVersion } from './readThisNpmPackageVersion';
 
 getIsPrettierAvailable.cache = id<boolean | undefined>(undefined);
 
@@ -29,7 +27,10 @@ export async function getIsPrettierAvailable(): Promise<boolean> {
   return isPrettierAvailable;
 }
 
-type PrettierAndConfigHash = { prettier: typeof import('prettier'); configHash: string };
+type PrettierAndConfigHash = {
+  prettier: typeof import('prettier');
+  configHash: string;
+};
 
 getPrettier.cache = id<PrettierAndConfigHash | undefined>(undefined);
 
@@ -43,36 +44,28 @@ export async function getPrettier(): Promise<PrettierAndConfigHash> {
   let prettier = id<typeof import('prettier') | undefined>(undefined);
 
   import_prettier: {
-    // NOTE: When module is linked we want to make sure we import the correct version
-    // of prettier, that is the one of the project, not the one of this repo.
-    // So we do a sketchy eval to bypass ncc.
-    // We make sure to only do that when linking, otherwise we import properly.
-    if (readThisNpmPackageVersion().startsWith('0.0.0')) {
-      const prettierDirPath = pathResolve(pathJoin(getNodeModulesBinDirPath(), '..', 'prettier'));
-
-      const isCJS = typeof module !== 'undefined' && module.exports;
-
-      if (isCJS) {
-        eval(`${symToStr({ prettier })} = require("${prettierDirPath}")`);
-      } else {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        prettier = await new Promise((_resolve) => {
-          eval(
-            `import("file:///${pathJoin(prettierDirPath, 'index.mjs').replace(/\\/g, '/')}").then(prettier => _resolve(prettier))`,
-          );
-        });
-      }
-
-      assert(!is<undefined>(prettier));
-
-      break import_prettier;
+    const prettierDirPath = pathResolve(pathJoin(getNodeModulesBinDirPath(), '..', 'prettier'));
+
+    const isCJS = typeof module !== 'undefined' && module.exports;
+
+    if (isCJS) {
+      eval(`${symToStr({ prettier })} = require("${prettierDirPath}")`);
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      prettier = await new Promise((_resolve) => {
+        eval(
+          `import("file:///${pathJoin(prettierDirPath, 'index.mjs').replace(/\\/g, '/')}").then(prettier => _resolve(prettier))`,
+        );
+      });
     }
 
-    prettier = await import('prettier');
+    assert(!is<undefined>(prettier));
+
+    break import_prettier;
   }
 
   const configHash = await (async () => {
-    const configFilePath = await prettier.resolveConfigFile(pathJoin(getNodeModulesBinDirPath(), '..'));
+    const configFilePath = await prettier.resolveConfigFile(pathJoin(getNodeModulesBinDirPath(), '..', '..'));
 
     if (configFilePath === null) {
       return '';
@@ -83,14 +76,19 @@ export async function getPrettier(): Promise<PrettierAndConfigHash> {
     return crypto.createHash('sha256').update(data).digest('hex');
   })();
 
-  const prettierAndConfig: PrettierAndConfigHash = { prettier, configHash };
+  const prettierAndConfig: PrettierAndConfigHash = {
+    prettier,
+    configHash,
+  };
 
   getPrettier.cache = prettierAndConfig;
 
   return prettierAndConfig;
 }
 
-export async function runPrettier(params: { sourceCode: string; filePath: string }): Promise<string> {
+export async function runPrettier(params: { sourceCode: string; filePath: string }): Promise<string>;
+export async function runPrettier(params: { sourceCode: Buffer; filePath: string }): Promise<Buffer>;
+export async function runPrettier(params: { sourceCode: string | Buffer; filePath: string }): Promise<string | Buffer> {
   const { sourceCode, filePath } = params;
 
   let formattedSourceCode: string;
@@ -98,24 +96,29 @@ export async function runPrettier(params: { sourceCode: string; filePath: string
   try {
     const { prettier } = await getPrettier();
 
-    const { ignored, inferredParser } = await prettier.getFileInfo(filePath, { resolveConfig: true });
+    const { ignored, inferredParser } = await prettier.getFileInfo(filePath, {
+      resolveConfig: true,
+    });
 
-    if (ignored) {
+    if (ignored || inferredParser === null) {
       return sourceCode;
     }
 
     const config = await prettier.resolveConfig(filePath);
 
-    formattedSourceCode = await prettier.format(sourceCode, {
-      ...config,
-      filePath,
-      parser: inferredParser ?? undefined,
-    });
+    formattedSourceCode = await prettier.format(
+      typeof sourceCode === 'string' ? sourceCode : sourceCode.toString('utf8'),
+      {
+        ...config,
+        filePath,
+        parser: inferredParser,
+      },
+    );
   } catch (error) {
     console.log(chalk.red(`You probably need to upgrade the version of prettier in your project`));
 
     throw error;
   }
 
-  return formattedSourceCode;
+  return typeof sourceCode === 'string' ? formattedSourceCode : Buffer.from(formattedSourceCode, 'utf8');
 }

package/src/login/DefaultPage.svelte

@@ -10,7 +10,7 @@
     doMakeUserConfirmPassword: boolean;
   };
   const props: DefaultPageProps = $props();
-  const { kcContext: kcContext, ...rest } = props;
+  const { kcContext, ...rest } = $derived(props);
   const loadComponent = () => {
     switch (kcContext.pageId) {
       case 'login.ftl':

package/src/login/Template.svelte

@@ -5,7 +5,7 @@
   import { kcSanitize } from 'keycloakify/lib/kcSanitize';
   import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
   import { clsx } from 'keycloakify/tools/clsx';
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import type { I18n } from './i18n';
   import type { KcContext } from './KcContext';
 
@@ -24,24 +24,30 @@
     classes,
     children,
   }: TemplateProps<KcContext, I18n> = $props();
-  const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+  const { kcClsx } = $derived(getKcClsx({ doUseDefaultCss, classes }));
 
-  const { msgStr, currentLanguage, enabledLanguages } = $i18n;
+  const { msgStr, currentLanguage, enabledLanguages } = $derived($i18n);
+
+  const { realm, auth, url, message, isAppInitiatedAction } = $derived(kcContext);
 
-  const { realm, auth, url, message, isAppInitiatedAction } = kcContext;
   onMount(() => {
-    document.title = documentTitle ?? msgStr('loginTitle', kcContext.realm.displayName);
+    document.title = documentTitle ?? untrack(() => msgStr('loginTitle', kcContext.realm.displayName));
   });
+
   useSetClassName({
     qualifiedName: 'html',
-    className: kcClsx('kcHtmlClass'),
+    className: untrack(() => kcClsx('kcHtmlClass')),
   });
 
   useSetClassName({
     qualifiedName: 'body',
-    className: bodyClassName ?? kcClsx('kcBodyClass'),
+    className: untrack(() => bodyClassName ?? kcClsx('kcBodyClass')),
+  });
+
+  const { isReadyToRender } = useInitialize({
+    kcContext: untrack(() => kcContext),
+    doUseDefaultCss: untrack(() => doUseDefaultCss),
   });
-  const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss });
 </script>
 
 {#if $isReadyToRender}

package/src/login/components/AddRemoveButtonsMultiValuedAttribute.svelte

@@ -4,7 +4,7 @@
     type FormAction,
   } from '@keycloakify/svelte/login/lib/useUserProfileForm';
   import type { Attribute } from 'keycloakify/login/KcContext';
-  import type { EventDispatcher } from 'svelte';
+  import { untrack, type EventDispatcher } from 'svelte';
   import type { Readable } from 'svelte/store';
   import type { I18n } from '../i18n';
 
@@ -17,11 +17,13 @@
   };
   const { attribute, values, fieldIndex, dispatchFormAction, i18n }: AddRemoveButtonsMultiValuedAttributeProps =
     $props();
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 
-  const { hasAdd, hasRemove } = getButtonToDisplayForMultivaluedAttributeField({ attribute, values, fieldIndex });
+  const { hasAdd, hasRemove } = $derived(
+    getButtonToDisplayForMultivaluedAttributeField({ attribute, values, fieldIndex }),
+  );
 
-  const idPostfix = `-${attribute.name}-${fieldIndex + 1}`;
+  const idPostfix = `-${untrack(() => attribute.name)}-${untrack(() => fieldIndex) + 1}`;
 </script>
 
 {#if hasRemove}