@keycloakify/svelte 0.2.7 → 0.2.8

package/keycloakify-svelte/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/keycloakify-svelte/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/keycloakify-svelte/login/components/AddRemoveButtonsMultiValuedAttribute.svelte

@@ -4,7 +4,7 @@
     type FormAction,
   } from '../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}

package/keycloakify-svelte/login/components/AddRemoveButtonsMultiValuedAttribute.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type FormAction } from '../lib/useUserProfileForm';
 import type { Attribute } from 'keycloakify/login/KcContext';
-import type { EventDispatcher } from 'svelte';
+import { type EventDispatcher } from 'svelte';
 import type { Readable } from 'svelte/store';
 import type { I18n } from '../i18n';
 type AddRemoveButtonsMultiValuedAttributeProps = {

package/keycloakify-svelte/login/components/GroupLabel.svelte

@@ -15,23 +15,25 @@
     kcClsx: KcClsx;
   };
   const { attribute, groupNameRef, i18n, kcClsx }: GroupLabelProps = $props();
-  const { advancedMsg } = $i18n;
+  const { advancedMsg } = $derived($i18n);
 
   let isGrouplabel = $state<boolean>(false);
-  if (attribute.group?.name !== groupNameRef.current) {
-    groupNameRef.current = attribute.group?.name ?? '';
+  $effect(() => {
+    if (attribute.group?.name !== groupNameRef.current) {
+      groupNameRef.current = attribute.group?.name ?? '';
 
-    if (groupNameRef.current !== '') {
-      assert(attribute.group !== undefined);
-      isGrouplabel = true;
+      if (groupNameRef.current !== '') {
+        assert(attribute.group !== undefined);
+        isGrouplabel = true;
+      }
     }
-  }
+  });
 
-  const html5DataAnnotations = {
+  const html5DataAnnotations = $derived({
     ...Object.fromEntries(
       Object.entries(attribute.group?.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]),
     ),
-  };
+  });
 </script>
 
 {#if isGrouplabel}

package/keycloakify-svelte/login/components/InputFieldByType.svelte

@@ -8,8 +8,8 @@
   import type { I18n } from '../i18n';
 
   let { displayableErrors, ...props }: InputFieldByTypeProps<I18n> = $props();
-  const { attribute, valueOrValues } = props;
-  const inputType = attribute.annotations.inputType ?? '';
+  const { attribute, valueOrValues } = $derived(props);
+  const inputType = $derived(attribute.annotations.inputType ?? '');
 </script>
 
 {#if inputType === 'hidden'}

package/keycloakify-svelte/login/components/InputTag.svelte

@@ -16,9 +16,9 @@
     displayableErrors = $bindable([]),
   }: InputTagProps = $props();
 
-  const { advancedMsgStr } = $i18n;
-  const { inputType } = attribute.annotations;
-  let value = $state(
+  const { advancedMsgStr } = $derived($i18n);
+  const { inputType } = $derived(attribute.annotations);
+  let value = $derived(
     (() => {
       if (fieldIndex !== undefined) {
         assert(valueOrValues instanceof Array);
@@ -30,11 +30,11 @@
       return valueOrValues;
     })(),
   );
-  const html5DataAnnotations = {
+  const html5DataAnnotations = $derived({
     ...Object.fromEntries(
       Object.entries(attribute.group?.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]),
     ),
-  };
+  });
 </script>
 
 <input

package/keycloakify-svelte/login/components/InputTagSelects.svelte

@@ -7,59 +7,63 @@
   const { attribute, dispatchFormAction, kcClsx, i18n, valueOrValues, displayableErrors }: InputFieldByTypeProps<I18n> =
     $props();
 
-  const { classDiv, classInput, classLabel, inputType } = (() => {
-    const { inputType } = attribute.annotations;
-
-    assert(inputType === 'select-radiobuttons' || inputType === 'multiselect-checkboxes');
-
-    switch (inputType) {
-      case 'select-radiobuttons':
-        return {
-          inputType: 'radio',
-          classDiv: kcClsx('kcInputClassRadio'),
-          classInput: kcClsx('kcInputClassRadioInput'),
-          classLabel: kcClsx('kcInputClassRadioLabel'),
-        };
-      case 'multiselect-checkboxes':
-        return {
-          inputType: 'checkbox',
-          classDiv: kcClsx('kcInputClassCheckbox'),
-          classInput: kcClsx('kcInputClassCheckboxInput'),
-          classLabel: kcClsx('kcInputClassCheckboxLabel'),
-        };
-      default:
-        return {
-          inputType: '',
-          classDiv: '',
-          classInput: '',
-          classLabel: '',
-        };
-    }
-  })();
-
-  const options = (() => {
-    walk: {
-      const { inputOptionsFromValidation } = attribute.annotations;
-
-      if (inputOptionsFromValidation === undefined) {
-        break walk;
+  const { classDiv, classInput, classLabel, inputType } = $derived(
+    (() => {
+      const { inputType } = attribute.annotations;
+
+      assert(inputType === 'select-radiobuttons' || inputType === 'multiselect-checkboxes');
+
+      switch (inputType) {
+        case 'select-radiobuttons':
+          return {
+            inputType: 'radio',
+            classDiv: kcClsx('kcInputClassRadio'),
+            classInput: kcClsx('kcInputClassRadioInput'),
+            classLabel: kcClsx('kcInputClassRadioLabel'),
+          };
+        case 'multiselect-checkboxes':
+          return {
+            inputType: 'checkbox',
+            classDiv: kcClsx('kcInputClassCheckbox'),
+            classInput: kcClsx('kcInputClassCheckboxInput'),
+            classLabel: kcClsx('kcInputClassCheckboxLabel'),
+          };
+        default:
+          return {
+            inputType: '',
+            classDiv: '',
+            classInput: '',
+            classLabel: '',
+          };
       }
+    })(),
+  );
 
-      const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
+  const options = $derived(
+    (() => {
+      walk: {
+        const { inputOptionsFromValidation } = attribute.annotations;
 
-      if (validator === undefined) {
-        break walk;
-      }
+        if (inputOptionsFromValidation === undefined) {
+          break walk;
+        }
 
-      if (validator.options === undefined) {
-        break walk;
-      }
+        const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
+
+        if (validator === undefined) {
+          break walk;
+        }
 
-      return validator.options;
-    }
+        if (validator.options === undefined) {
+          break walk;
+        }
+
+        return validator.options;
+      }
 
-    return attribute.validators.options?.options ?? [];
-  })();
+      return attribute.validators.options?.options ?? [];
+    })(),
+  );
 </script>
 
 {#each options as option (option)}

package/keycloakify-svelte/login/components/LogoutOtherSessions.svelte

@@ -5,7 +5,7 @@
 
   const { kcClsx, i18n }: { kcClsx: KcClsx; i18n: Readable<I18n> } = $props();
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <div

package/keycloakify-svelte/login/components/PasswordWrapper.svelte

@@ -7,9 +7,9 @@
   import type { Readable } from 'svelte/store';
 
   const props: { kcClsx: KcClsx; i18n: Readable<I18n>; passwordInputId: string; children: Snippet } = $props();
-  const { kcClsx, i18n, passwordInputId, children } = props;
+  const { kcClsx, i18n, passwordInputId, children } = $derived(props);
 
-  const { msgStr } = $i18n;
+  const { msgStr } = $derived($i18n);
 
   const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer<boolean, boolean>(
     (isPasswordRevealed: boolean) => !isPasswordRevealed,

package/keycloakify-svelte/login/components/SelectTag.svelte

@@ -7,32 +7,34 @@
   const { attribute, dispatchFormAction, kcClsx, displayableErrors, i18n, valueOrValues }: InputFieldByTypeProps<I18n> =
     $props();
 
-  const isMultiple = attribute.annotations.inputType === 'multiselect';
-  const options = (() => {
-    walk: {
-      const { inputOptionsFromValidation } = attribute.annotations;
+  const isMultiple = $derived(attribute.annotations.inputType === 'multiselect');
+  const options = $derived(
+    (() => {
+      walk: {
+        const { inputOptionsFromValidation } = attribute.annotations;
 
-      if (inputOptionsFromValidation === undefined) {
-        break walk;
-      }
+        if (inputOptionsFromValidation === undefined) {
+          break walk;
+        }
 
-      assert(typeof inputOptionsFromValidation === 'string');
+        assert(typeof inputOptionsFromValidation === 'string');
 
-      const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
+        const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
 
-      if (validator === undefined) {
-        break walk;
-      }
+        if (validator === undefined) {
+          break walk;
+        }
 
-      if (validator.options === undefined) {
-        break walk;
-      }
+        if (validator.options === undefined) {
+          break walk;
+        }
 
-      return validator.options;
-    }
+        return validator.options;
+      }
 
-    return attribute.validators.options?.options ?? [];
-  })();
+      return attribute.validators.options?.options ?? [];
+    })(),
+  );
 </script>
 
 <select

package/keycloakify-svelte/login/components/TermsAcceptance.svelte

@@ -15,7 +15,7 @@
   const { i18n, kcClsx, messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange }: TermsAcceptanceProps =
     $props();
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <div class="form-group">

package/keycloakify-svelte/login/components/TextareaTag.svelte

@@ -6,9 +6,12 @@
   const { attribute, dispatchFormAction, kcClsx, displayableErrors, valueOrValues }: InputFieldByTypeProps<I18n> =
     $props();
 
-  assert(typeof valueOrValues === 'string');
-
-  const value = valueOrValues;
+  const value = $derived(
+    (() => {
+      assert(typeof valueOrValues === 'string');
+      return valueOrValues;
+    })(),
+  );
 </script>
 
 <textarea

package/keycloakify-svelte/login/components/UserProfileFormFields.svelte

@@ -4,7 +4,7 @@
   import InputFieldByType from './InputFieldByType.svelte';
   import type { UserProfileFormFieldsProps } from './UserProfileFormFieldsProps';
   import { useUserProfileForm } from '../lib/useUserProfileForm';
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import { derived } from 'svelte/store';
   import type { I18n } from '../i18n';
   import type { KcContext } from '../KcContext';
@@ -18,14 +18,14 @@
     doMakeUserConfirmPassword,
     beforeField,
     afterField,
-  } = props;
+  } = $derived(props);
 
-  const { advancedMsg } = $i18n;
+  const { advancedMsg } = $derived($i18n);
 
   const { formState, dispatchFormAction } = useUserProfileForm({
-    kcContext,
-    i18n: $i18n,
-    doMakeUserConfirmPassword,
+    kcContext: untrack(() => kcContext),
+    i18n: untrack(() => $i18n),
+    doMakeUserConfirmPassword: untrack(() => doMakeUserConfirmPassword),
   });
   onMount(() => {
     const unsubscribe = formState.subscribe(({ isFormSubmittable }) => {

package/keycloakify-svelte/login/pages/Code.svelte

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

package/keycloakify-svelte/login/pages/DeleteAccountConfirm.svelte

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

package/keycloakify-svelte/login/pages/DeleteCredential.svelte

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

package/keycloakify-svelte/login/pages/Error.svelte

@@ -12,9 +12,9 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'error.ftl' }>, I18n> = $props();
 
-  const { message, client, skipLink } = kcContext;
+  const { message, client, skipLink } = $derived(kcContext);
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/keycloakify-svelte/login/pages/FrontchannelLogout.svelte

@@ -11,9 +11,9 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'frontchannel-logout.ftl' }>, I18n> = $props();
 
-  const { logout } = kcContext;
+  const { logout } = $derived(kcContext);
 
-  const { msg, msgStr } = $i18n;
+  const { msg, msgStr } = $derived($i18n);
   let iframeLoadCount = $state(0);
   $effect(() => {
     if (!kcContext.logout.logoutRedirectUri) {

package/keycloakify-svelte/login/pages/IdpReviewUserProfile.svelte

@@ -21,14 +21,16 @@
     UserProfileFormFields,
     doMakeUserConfirmPassword,
   }: IdpReviewUserProfileProps = $props();
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { msg, msgStr } = $i18n;
+  const { msg, msgStr } = $derived($i18n);
 
-  const { url, messagesPerField } = kcContext;
+  const { url, messagesPerField } = $derived(kcContext);
 
   const [isFomSubmittable, setIsFomSubmittable] = useState(false);
 </script>

package/keycloakify-svelte/login/pages/Info.svelte

@@ -12,9 +12,9 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'info.ftl' }>, I18n> = $props();
 
-  const { advancedMsgStr, msg } = $i18n;
+  const { advancedMsgStr, msg } = $derived($i18n);
 
-  const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
+  const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = $derived(kcContext);
 </script>
 
 <Template

package/keycloakify-svelte/login/pages/Login.svelte

@@ -14,14 +14,17 @@
     Template,
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'login.ftl' }>, I18n> = $props();
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField } = kcContext;
+  const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField } =
+    $derived(kcContext);
 
-  const { msg, msgStr } = $i18n;
+  const { msg, msgStr } = $derived($i18n);
 
   const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 </script>
@@ -178,7 +181,7 @@
                       name="rememberMe"
                       type="checkbox"
                       checked={!!login.rememberMe}
-                    />&nbsp;
+                    />
                     {@render msg('rememberMe')()}
                   </label>
                 </div>

package/keycloakify-svelte/login/pages/LoginConfigTotp.svelte

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

package/keycloakify-svelte/login/pages/LoginIdpLinkConfirm.svelte

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

package/keycloakify-svelte/login/pages/LoginIdpLinkConfirmOverride.svelte

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