@keycloakify/svelte 0.0.1-rc.1

package/dist/login/components/PasswordWrapper.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { useReducer } from '../../tools/useReducer';
+  import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { assert } from 'keycloakify/tools/assert';
+  import { onMount, type Snippet } from 'svelte';
+  import type { I18n } from '../i18n';
+  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 { msgStr } = $i18n;
+
+  const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer<boolean, boolean>(
+    (isPasswordRevealed: boolean) => !isPasswordRevealed,
+    false,
+  );
+  onMount(() => {
+    const unsubscribe = isPasswordRevealed.subscribe(($isPasswordRevealed) => {
+      const passwordInputElement: HTMLInputElement = document.getElementById(passwordInputId) as HTMLInputElement;
+
+      assert(passwordInputElement instanceof HTMLInputElement);
+      passwordInputElement.type = $isPasswordRevealed ? 'text' : 'password';
+    });
+    return () => unsubscribe();
+  });
+</script>
+
+<div class={kcClsx('kcInputGroup')}>
+  {@render children?.()}
+  <button
+    type="button"
+    class={kcClsx('kcFormPasswordVisibilityButtonClass')}
+    aria-label={msgStr($isPasswordRevealed ? 'hidePassword' : 'showPassword')}
+    aria-controls={passwordInputId}
+    onclick={() => toggleIsPasswordRevealed($isPasswordRevealed)}
+  >
+    <i
+      class={kcClsx($isPasswordRevealed ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow')}
+      aria-hidden="true"
+    ></i>
+  </button>
+</div>

package/dist/login/components/PasswordWrapper.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    kcClsx: KcClsx;
+    i18n: Readable<I18n>;
+    passwordInputId: string;
+    children: Snippet;
+};
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import { type Snippet } from 'svelte';
+import type { I18n } from '../i18n';
+import type { Readable } from 'svelte/store';
+declare const PasswordWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type PasswordWrapper = ReturnType<typeof PasswordWrapper>;
+export default PasswordWrapper;

package/dist/login/components/SelectTag.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+  import { inputLabel } from './inputLabel';
+  import { assert } from 'keycloakify/tools/assert';
+  const { attribute, dispatchFormAction, kcClsx, displayableErrors, i18n, valueOrValues }: InputFieldByTypeProps =
+    $props();
+
+  const isMultiple = attribute.annotations.inputType === 'multiselect';
+  const options = (() => {
+    walk: {
+      const { inputOptionsFromValidation } = attribute.annotations;
+
+      if (inputOptionsFromValidation === undefined) {
+        break walk;
+      }
+
+      assert(typeof inputOptionsFromValidation === 'string');
+
+      const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
+
+      if (validator === undefined) {
+        break walk;
+      }
+
+      if (validator.options === undefined) {
+        break walk;
+      }
+
+      return validator.options;
+    }
+
+    return attribute.validators.options?.options ?? [];
+  })();
+</script>
+
+<select
+  id={attribute.name}
+  name={attribute.name}
+  class={kcClsx('kcInputClass')}
+  aria-invalid={displayableErrors.length !== 0}
+  disabled={attribute.readOnly}
+  multiple={isMultiple}
+  size={attribute.annotations.inputTypeSize === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeSize}`)}
+  value={valueOrValues}
+  onchange={(event) =>
+    dispatchFormAction('formAction', {
+      action: 'update',
+      name: attribute.name,
+      valueOrValues: (() => {
+        if (isMultiple) {
+          return Array.from(event.currentTarget.selectedOptions).map((option) => option.value);
+        }
+
+        return event.currentTarget.value;
+      })(),
+    })}
+  onblur={() =>
+    dispatchFormAction('formAction', {
+      action: 'focus lost',
+      name: attribute.name,
+      fieldIndex: undefined,
+    })}
+>
+  {#if !isMultiple}<option value=""></option>{/if}
+  {#each options as option}
+    <option value={option}>
+      {@render inputLabel($i18n, attribute, option)()}
+    </option>
+  {/each}
+</select>

package/dist/login/components/SelectTag.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+declare const SelectTag: import("svelte").Component<InputFieldByTypeProps, {}, "">;
+type SelectTag = ReturnType<typeof SelectTag>;
+export default SelectTag;

package/dist/login/components/TermsAcceptance.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+  import type { Readable } from 'svelte/store';
+
+  type TermsAcceptanceProps = {
+    i18n: Readable<I18n>;
+    kcClsx: KcClsx;
+    messagesPerField: Pick<KcContext['messagesPerField'], 'existsError' | 'get'>;
+    areTermsAccepted: boolean;
+    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+  };
+  const { i18n, kcClsx, messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange }: TermsAcceptanceProps =
+    $props();
+
+  const { msg } = $i18n;
+</script>
+
+<div class="form-group">
+  <div class={kcClsx('kcInputWrapperClass')}>
+    {@render msg('termsTitle')()}
+    <div id="kc-registration-terms-text">{@render msg('termsText')()}</div>
+  </div>
+</div>
+<div class="form-group">
+  <div class={kcClsx('kcLabelWrapperClass')}>
+    <input
+      type="checkbox"
+      id="termsAccepted"
+      name="termsAccepted"
+      class={kcClsx('kcCheckboxInputClass')}
+      checked={areTermsAccepted}
+      onchange={(e) => onAreTermsAcceptedValueChange(e.currentTarget.checked)}
+      aria-invalid={messagesPerField.existsError('termsAccepted')}
+    />
+    <label
+      for="termsAccepted"
+      class={kcClsx('kcLabelClass')}
+    >
+      {@render msg('acceptTerms')()}
+    </label>
+  </div>
+  {#if messagesPerField.existsError('termsAccepted')}
+    <div class={kcClsx('kcLabelWrapperClass')}>
+      <span
+        id="input-error-terms-accepted"
+        class={kcClsx('kcInputErrorMessageClass')}
+        aria-live="polite"
+      >
+        {@html kcSanitize(messagesPerField.get('termsAccepted'))}
+      </span>
+    </div>
+  {/if}
+</div>

package/dist/login/components/TermsAcceptance.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+import type { Readable } from 'svelte/store';
+declare const TermsAcceptance: import("svelte").Component<{
+    i18n: Readable<I18n>;
+    kcClsx: KcClsx;
+    messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
+    areTermsAccepted: boolean;
+    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+}, {}, "">;
+type TermsAcceptance = ReturnType<typeof TermsAcceptance>;
+export default TermsAcceptance;

package/dist/login/components/TextareaTag.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { assert } from 'keycloakify/tools/assert';
+  import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+
+  const { attribute, dispatchFormAction, kcClsx, displayableErrors, valueOrValues }: InputFieldByTypeProps = $props();
+
+  assert(typeof valueOrValues === 'string');
+
+  const value = valueOrValues;
+</script>
+
+<textarea
+  id={attribute.name}
+  name={attribute.name}
+  class={kcClsx('kcInputClass')}
+  aria-invalid={displayableErrors.length !== 0}
+  disabled={attribute.readOnly}
+  cols={attribute.annotations.inputTypeCols === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeCols}`)}
+  rows={attribute.annotations.inputTypeRows === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeRows}`)}
+  maxlength={attribute.annotations.inputTypeMaxlength === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeMaxlength}`)}
+  {value}
+  onchange={(event) =>
+    dispatchFormAction('formAction', {
+      action: 'update',
+      name: attribute.name,
+      valueOrValues: event.currentTarget.value,
+    })}
+  onblur={() =>
+    dispatchFormAction('formAction', {
+      action: 'focus lost',
+      name: attribute.name,
+      fieldIndex: undefined,
+    })}
+></textarea>

package/dist/login/components/TextareaTag.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+declare const TextareaTag: import("svelte").Component<InputFieldByTypeProps, {}, "">;
+type TextareaTag = ReturnType<typeof TextareaTag>;
+export default TextareaTag;

package/dist/login/components/UserProfileFormFields.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import FieldErrors from './FieldErrors.svelte';
+  import GroupLabel from './GroupLabel.svelte';
+  import InputFieldByType from './InputFieldByType.svelte';
+  import type { UserProfileFormFieldsProps } from './UserProfileFormFieldsProps';
+  import { useUserProfileForm } from '../lib/useUserProfileForm';
+  import { onMount } from 'svelte';
+  import { derived } from 'svelte/store';
+  import type { I18n } from '../i18n';
+  import type { KcContext } from '../KcContext';
+
+  const props: UserProfileFormFieldsProps<KcContext, I18n> = $props();
+  const {
+    kcContext,
+    i18n,
+    kcClsx,
+    onIsFormSubmittableValueChange,
+    doMakeUserConfirmPassword,
+    beforeField,
+    afterField,
+  } = props;
+
+  const { advancedMsg } = $i18n;
+
+  const { formState, dispatchFormAction } = useUserProfileForm({
+    kcContext,
+    i18n: $i18n,
+    doMakeUserConfirmPassword,
+  });
+  onMount(() => {
+    const unsubscribe = formState.subscribe(({ isFormSubmittable }) => {
+      onIsFormSubmittableValueChange(isFormSubmittable);
+    });
+    return () => unsubscribe();
+  });
+
+  const groupNameRef = { current: '' };
+  const formFieldStates = derived(formState, ($formState) => $formState.formFieldStates);
+  const displayableErrors = derived(formFieldStates, ($formFieldStates) =>
+    $formFieldStates.map((f) => f.displayableErrors),
+  );
+</script>
+
+{#each $formFieldStates as formFieldState, i}
+  {@const { attribute, valueOrValues } = formFieldState}
+  <GroupLabel
+    {attribute}
+    {groupNameRef}
+    {i18n}
+    {kcClsx}
+  />
+  {#if beforeField}
+    {@render beforeField({
+      attribute,
+      dispatchFormAction,
+      displayableErrors: $displayableErrors[i],
+      valueOrValues,
+      kcClsx,
+      i18n,
+    })}
+  {/if}
+  <div
+    class={kcClsx('kcFormGroupClass')}
+    style:display={attribute.name === 'password-confirm' && !doMakeUserConfirmPassword ? 'none' : undefined}
+  >
+    <div class={kcClsx('kcLabelWrapperClass')}>
+      <label
+        for={attribute.name}
+        class={kcClsx('kcLabelClass')}
+      >
+        {@render advancedMsg(attribute.displayName ?? '')()}
+      </label>
+      {#if attribute.required}
+        *
+      {/if}
+    </div>
+    <div class={kcClsx('kcInputWrapperClass')}>
+      {#if attribute.annotations.inputHelperTextBefore !== undefined}
+        <div
+          class={kcClsx('kcInputHelperTextBeforeClass')}
+          id={`form-help-text-before-${attribute.name}`}
+          aria-live="polite"
+        >
+          {@render advancedMsg(attribute.annotations.inputHelperTextBefore)()}
+        </div>
+      {/if}
+      <InputFieldByType
+        {attribute}
+        {valueOrValues}
+        displayableErrors={$displayableErrors[i]}
+        {dispatchFormAction}
+        {kcClsx}
+        {i18n}
+      />
+      <FieldErrors
+        {attribute}
+        bind:displayableErrors={$displayableErrors[i]}
+        {kcClsx}
+      />
+      {#if attribute.annotations.inputHelperTextAfter !== undefined}
+        <div
+          class={kcClsx('kcInputHelperTextAfterClass')}
+          id={`form-help-text-after-${attribute.name}`}
+          aria-live="polite"
+        >
+          {@render advancedMsg(attribute.annotations.inputHelperTextAfter)()}
+        </div>
+      {/if}
+
+      {#if afterField}
+        {@render afterField({
+          attribute,
+          dispatchFormAction,
+          displayableErrors: $displayableErrors[i],
+          valueOrValues,
+          kcClsx,
+          i18n,
+        })}
+      {/if}
+      <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
+    </div>
+  </div>
+{/each}

package/dist/login/components/UserProfileFormFields.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { UserProfileFormFieldsProps } from './UserProfileFormFieldsProps';
+import type { I18n } from '../i18n';
+import type { KcContext } from '../KcContext';
+declare const UserProfileFormFields: import("svelte").Component<UserProfileFormFieldsProps<KcContext, I18n>, {}, "">;
+type UserProfileFormFields = ReturnType<typeof UserProfileFormFields>;
+export default UserProfileFormFields;

package/dist/login/components/UserProfileFormFieldsProps.d.ts

@@ -0,0 +1,27 @@
+import { type FormAction, type FormFieldError } from '../lib/useUserProfileForm';
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { EventDispatcher, Snippet } from 'svelte';
+import type { Readable } from 'svelte/store';
+export type UserProfileFormFieldsProps<KcContext = any, I18n = any> = {
+    kcContext: Extract<KcContext, {
+        profile: unknown;
+    }>;
+    i18n: Readable<I18n>;
+    kcClsx: KcClsx;
+    onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    doMakeUserConfirmPassword: boolean;
+    beforeField?: Snippet<[BeforeAfterFieldProps<I18n>]> | null;
+    afterField?: Snippet<[BeforeAfterFieldProps<I18n>]> | null;
+};
+type BeforeAfterFieldProps<I18n> = {
+    attribute: Attribute;
+    dispatchFormAction: EventDispatcher<{
+        formAction: FormAction;
+    }>;
+    displayableErrors: FormFieldError[];
+    valueOrValues: string | string[];
+    kcClsx: KcClsx;
+    i18n: Readable<I18n>;
+};
+export {};

package/dist/login/components/UserProfileFormFieldsProps.js

@@ -0,0 +1,2 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {} from '../lib/useUserProfileForm';

package/dist/login/components/inputLabel.d.ts

@@ -0,0 +1,3 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { I18n } from '../i18n';
+export declare const inputLabel: (i18n: I18n, attribute: Attribute, option: string) => import("svelte").Snippet<[]>;

package/dist/login/components/inputLabel.js

@@ -0,0 +1,12 @@
+import { createRawSnippet } from 'svelte';
+export const inputLabel = (i18n, attribute, option) => {
+    const { advancedMsg } = i18n;
+    if (attribute.annotations.inputOptionLabels !== undefined) {
+        const { inputOptionLabels } = attribute.annotations;
+        return advancedMsg(inputOptionLabels[option] ?? option);
+    }
+    if (attribute.annotations.inputOptionLabelsI18nPrefix !== undefined) {
+        return advancedMsg(`${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}`);
+    }
+    return createRawSnippet(() => ({ render: () => option }));
+};

package/dist/login/i18n/i18n.d.ts

@@ -0,0 +1,15 @@
+import type { GenericI18n_noJsx } from 'keycloakify/login/i18n/noJsx/GenericI18n_noJsx';
+import { type MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import type { Snippet } from 'svelte';
+/** INTERNAL: DO NOT IMPORT THIS */
+export type GenericI18n_svelte<MessageKey extends string, LanguageTag extends string> = GenericI18n_noJsx<MessageKey, LanguageTag> & {
+    /**
+     * Same as msgStr but returns a Snippet with the html string rendered as html.
+     */
+    msg: (key: MessageKey_defaultSet, ...args: (string | undefined)[]) => Snippet;
+    /**
+     * Same as advancedMsgStr but returns a Snippet with the html string rendered as html.
+     */
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => Snippet;
+};
+export type I18n = GenericI18n_svelte<MessageKey_defaultSet, string>;

package/dist/login/i18n/i18n.js

@@ -0,0 +1 @@
+import {} from 'keycloakify/login/i18n/messages_defaultSet/types';

package/dist/login/i18n/i18nBuilder.d.ts

@@ -0,0 +1,18 @@
+import type { LanguageTag as LanguageTag_defaultSet, MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { type ReturnTypeOfCreateUseI18n } from './useI18n';
+export type I18nBuilder<ThemeName extends string = never, MessageKey_themeDefined extends string = never, LanguageTag_notInDefaultSet extends string = never, ExcludedMethod extends 'withThemeName' | 'withExtraLanguages' | 'withCustomTranslations' = never> = Omit<{
+    withThemeName: <ThemeName extends string>() => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withThemeName'>;
+    withExtraLanguages: <LanguageTag_notInDefaultSet extends string>(extraLanguageTranslations: {
+        [LanguageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    }) => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withExtraLanguages'>;
+    withCustomTranslations: <MessageKey_themeDefined extends string>(messagesByLanguageTag_themeDefined: Partial<{
+        [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<MessageKey_themeDefined, string | Record<ThemeName, string>>;
+    }>) => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withCustomTranslations'>;
+    build: () => ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;
+}, ExcludedMethod>;
+export declare const i18nBuilder: I18nBuilder<never, never, never, never>;

package/dist/login/i18n/i18nBuilder.js

@@ -0,0 +1,26 @@
+import { createUseI18n } from './useI18n';
+function createI18nBuilder(params) {
+    const i18nBuilder = {
+        withThemeName: () => createI18nBuilder({
+            extraLanguageTranslations: params.extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+        }),
+        withExtraLanguages: (extraLanguageTranslations) => createI18nBuilder({
+            extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+        }),
+        withCustomTranslations: (messagesByLanguageTag_themeDefined) => createI18nBuilder({
+            extraLanguageTranslations: params.extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined,
+        }),
+        build: () => createUseI18n({
+            extraLanguageTranslations: params.extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+        }),
+    };
+    return i18nBuilder;
+}
+export const i18nBuilder = createI18nBuilder({
+    extraLanguageTranslations: {},
+    messagesByLanguageTag_themeDefined: {},
+});

package/dist/login/i18n/index.d.ts

@@ -0,0 +1 @@
+export * from './i18n';

package/dist/login/i18n/index.js

@@ -0,0 +1 @@
+export * from './i18n';

package/dist/login/i18n/useI18n.d.ts

@@ -0,0 +1,28 @@
+import { type LanguageTag as LanguageTag_defaultSet, type MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { type KcContextLike } from 'keycloakify/login/i18n/noJsx/getI18n';
+import type { Readable } from 'svelte/store';
+import type { GenericI18n_svelte } from './i18n';
+export type ReturnTypeOfCreateUseI18n<MessageKey_themeDefined extends string, LanguageTag_notInDefaultSet extends string> = {
+    useI18n: (params: {
+        kcContext: KcContextLike;
+    }) => {
+        i18n: Readable<GenericI18n_svelte<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>>;
+    };
+    ofTypeI18n: GenericI18n_svelte<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>;
+};
+export type { KcContextLike };
+export declare function createUseI18n<ThemeName extends string = string, MessageKey_themeDefined extends string = never, LanguageTag_notInDefaultSet extends string = never>(params: {
+    extraLanguageTranslations: {
+        [languageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    };
+    messagesByLanguageTag_themeDefined: Partial<{
+        [languageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: {
+            [key in MessageKey_themeDefined]: string | Record<ThemeName, string>;
+        };
+    }>;
+}): ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;

package/dist/login/i18n/useI18n.js

@@ -0,0 +1,65 @@
+import { useState } from '../../tools/useState';
+import {} from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { createGetI18n } from 'keycloakify/login/i18n/noJsx/getI18n';
+import { createRawSnippet, onMount } from 'svelte';
+import { Reflect } from 'tsafe/Reflect';
+export function createUseI18n(params) {
+    const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+    const { withSvelte } = (() => {
+        const cache = new WeakMap();
+        function renderHtmlString(params) {
+            const { htmlString, msgKey } = params;
+            return createRawSnippet(() => ({
+                render: () => `<div data-kc-msg="${msgKey}">${htmlString}</div>`,
+            }));
+        }
+        function withSvelte(i18n_noJsx) {
+            use_cache: {
+                const i18n = cache.get(i18n_noJsx);
+                if (i18n === undefined) {
+                    break use_cache;
+                }
+                return i18n;
+            }
+            const i18n = {
+                ...i18n_noJsx,
+                msg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.msgStr(msgKey, ...args), msgKey }),
+                advancedMsg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey }),
+            };
+            cache.set(i18n_noJsx, i18n);
+            return i18n;
+        }
+        return { withSvelte };
+    })();
+    add_style: {
+        const attributeName = 'data-kc-i18n';
+        // Check if already exists in head
+        if (document.querySelector(`style[${attributeName}]`) !== null) {
+            break add_style;
+        }
+        const styleElement = document.createElement('style');
+        styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
+        styleElement.textContent = `[data-kc-msg] { display: inline-block; }`;
+        document.head.prepend(styleElement);
+    }
+    const { getI18n } = createGetI18n({ extraLanguageTranslations, messagesByLanguageTag_themeDefined });
+    function useI18n(params) {
+        const { kcContext } = params;
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+        const [i18n_toReturn, setI18n_toReturn] = useState(withSvelte(i18n));
+        onMount(() => {
+            let isActive = true;
+            prI18n_currentLanguage?.then((i18n) => {
+                if (!isActive) {
+                    return;
+                }
+                setI18n_toReturn(withSvelte(i18n));
+            });
+            return () => {
+                isActive = false;
+            };
+        });
+        return { i18n: i18n_toReturn };
+    }
+    return { useI18n, ofTypeI18n: Reflect() };
+}

package/dist/login/index.d.ts

@@ -0,0 +1,2 @@
+export type { ExtendKcContext } from './KcContext';
+export { i18nBuilder } from './i18n/i18nBuilder';

package/dist/login/index.js

@@ -0,0 +1 @@
+export { i18nBuilder } from './i18n/i18nBuilder';