@keycloakify/svelte 0.2.7 → 0.2.8

package/src/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/src/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/src/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/src/login/components/UserProfileFormFields.svelte

@@ -4,7 +4,7 @@
   import InputFieldByType from '@keycloakify/svelte/login/components/InputFieldByType.svelte';
   import type { UserProfileFormFieldsProps } from '@keycloakify/svelte/login/components/UserProfileFormFieldsProps';
   import { useUserProfileForm } from '@keycloakify/svelte/login/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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

package/src/login/pages/LoginIdpLinkEmail.svelte

@@ -11,9 +11,9 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'login-idp-link-email.ftl' }>, I18n> = $props();
 
-  const { url, realm, brokerContext, idpAlias } = kcContext;
+  const { url, realm, brokerContext, idpAlias } = $derived(kcContext);
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/src/login/pages/LoginOauth2DeviceVerifyUserCode.svelte

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

package/src/login/pages/LoginOauthGrant.svelte

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

package/src/login/pages/LoginOtp.svelte

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

package/src/login/pages/LoginPageExpired.svelte

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

package/src/login/pages/LoginPasskeysConditionalAuthenticate.svelte

@@ -4,6 +4,7 @@
   import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
   import { clsx } from 'keycloakify/tools/clsx';
   import type { CxArg } from 'keycloakify/tools/clsx_withTransform';
+  import { untrack } from 'svelte';
   import type { KcContext } from '../KcContext';
   import type { I18n } from '../i18n';
 
@@ -24,18 +25,24 @@
     authenticators,
     registrationDisabled,
     realm,
-  } = kcContext;
+  } = $derived(kcContext);
 
-  const { msg, msgStr, advancedMsg } = $i18n;
+  const { msg, msgStr, advancedMsg } = $derived($i18n);
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
   const authButtonId = 'authenticateWebAuthnButton';
 
-  useScript({ authButtonId, kcContext, i18n });
+  useScript({
+    authButtonId,
+    kcContext: untrack(() => kcContext),
+    i18n: untrack(() => i18n),
+  });
 </script>
 
 <Template

package/src/login/pages/LoginPassword.svelte

@@ -16,14 +16,16 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'login-password.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { realm, url, messagesPerField } = kcContext;
+  const { realm, url, messagesPerField } = $derived(kcContext);
 
-  const { msg, msgStr } = $i18n;
+  const { msg, msgStr } = $derived($i18n);
 
   const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 </script>

package/src/login/pages/LoginRecoveryAuthnCodeConfig.svelte

@@ -4,6 +4,7 @@
   import type { PageProps } from '@keycloakify/svelte/login/pages/PageProps';
   import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
   import { clsx } from 'keycloakify/tools/clsx';
+  import { untrack } from 'svelte';
   import type { I18n } from '../i18n';
   import type { KcContext } from '../KcContext';
 
@@ -15,18 +16,20 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'login-recovery-authn-code-config.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
+  const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = $derived(kcContext);
 
-  const { msg, msgStr } = $i18n;
+  const { msg, msgStr } = $derived($i18n);
 
   const olRecoveryCodesListId = 'kc-recovery-codes-list';
 
-  useScript({ olRecoveryCodesListId, i18n });
+  useScript({ olRecoveryCodesListId, i18n: untrack(() => i18n) });
 </script>
 
 <Template

package/src/login/pages/LoginRecoveryAuthnCodeInput.svelte

@@ -13,14 +13,16 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'login-recovery-authn-code-input.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { url, messagesPerField, recoveryAuthnCodesInputBean } = kcContext;
+  const { url, messagesPerField, recoveryAuthnCodesInputBean } = $derived(kcContext);
 
-  const { msg, msgStr } = $i18n;
+  const { msg, msgStr } = $derived($i18n);
 </script>
 
 <Template

package/src/login/pages/LoginResetOtp.svelte

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

package/src/login/pages/LoginResetPassword.svelte

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

package/src/login/pages/LoginUpdatePassword.svelte

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