@hyvor/design 0.0.67 → 1.0.3

package/dist/components/Internationalization/T.svelte

@@ -1,117 +1,161 @@
-<script generics="StringsT extends I18nStrings">import {} from "./types.js";
-import {
-  getContext,
-  onMount,
-  tick,
-  afterUpdate,
-  getAllContexts
-} from "svelte";
-import { getStringByKey, InternationalizationService } from "./i18n.js";
-import { IntlMessageFormat } from "intl-messageformat";
-import { browser } from "$app/environment";
-import { getMessage as getMessageBase } from "./t.js";
-export let key;
-export let params = {};
-const context = getAllContexts();
-let hasComponentParams = false;
-function getElementFunc(el) {
-  return (chunks) => {
-    const children = typeof chunks === "string" ? chunks : chunks.join("");
-    return `<${el}>${children}</${el}>`;
-  };
-}
-function getParamsForBackend() {
-  let retParams = {};
-  for (let [key2, value] of Object.entries(params)) {
-    let newValue;
-    if (typeof value === "object" && value !== null) {
-      if (value.hasOwnProperty("component")) {
-        newValue = (chunks) => {
-          const children = typeof chunks === "string" ? chunks : chunks.join("");
-          return children;
-        };
-        hasComponentParams = true;
-      } else if (value.hasOwnProperty("element")) {
-        newValue = getElementFunc(value.element);
-      }
-    } else {
-      newValue = value;
-    }
-    retParams[key2] = newValue;
-  }
-  return retParams;
-}
-const componentBindings = /* @__PURE__ */ new Map();
-function getParamsForFrontend() {
-  let retParams = {};
-  for (let [key2, value] of Object.entries(params)) {
-    let newValue;
-    if (typeof value === "object" && value !== null) {
-      if (value.hasOwnProperty("component")) {
-        const { component, props } = value;
-        newValue = (chunks) => {
-          const children = typeof chunks === "string" ? chunks : chunks.join("");
-          const id = key2 + "-" + Math.random().toString(36).substring(7) + "-" + Date.now().toString();
-          componentBindings.set(id, {
-            component,
-            props: {
-              ...props,
-              children
-            }
-          });
-          return '<span id="' + id + '">' + children + "</span>";
-        };
-      } else if (value.hasOwnProperty("element")) {
-        newValue = getElementFunc(value.element);
-      }
-    } else {
-      newValue = value;
-    }
-    retParams[key2] = newValue;
-  }
-  return retParams;
-}
-const i18n = getContext("i18n");
-const locale = i18n.locale;
-const strings = i18n.strings;
-let message = getMessage(getParamsForBackend());
-function getMessage(processedParams) {
-  return getMessageBase(key, processedParams, $strings, $locale);
-}
-function bindComponents() {
-  for (let [id, binding] of componentBindings) {
-    const el = document.getElementById(id);
-    if (el) {
-      el.innerHTML = "";
-      new binding.component({
-        target: el,
-        hydrate: true,
-        props: binding.props,
-        context
-      });
-    }
-  }
-}
-async function renderFrontend() {
-  message = getMessage(getParamsForFrontend());
-  await tick();
-  if (hasComponentParams)
-    bindComponents();
-}
-let mounted = false;
-$: {
-  params;
-  key;
-  if (browser && mounted) {
-    renderFrontend();
-  }
-}
-onMount(async () => {
-  mounted = true;
-  if (hasComponentParams) {
-    renderFrontend();
-  }
-});
+<script lang="ts" generics="StringsT extends I18nStrings">
+	import { run } from 'svelte/legacy';
+
+	import { type ToDotPaths, type I18nStrings, type PrimitiveType } from './types.js';
+	import { getContext, onMount, tick, getAllContexts, type Component, hydrate } from 'svelte';
+	import { InternationalizationService } from './i18n.js';
+	import { browser } from '$app/environment';
+	import { getMessage as getMessageBase } from './t.js';
+
+	type ComponentDeclaration = {
+		element?: string;
+		component?: Component<any>;
+		props?: Record<string, any>;
+	};
+	type InputParams = Record<string, PrimitiveType | ComponentDeclaration>;
+	type ParamValue = PrimitiveType | ((chunks: string | string[]) => string);
+
+	interface Props {
+		key: ToDotPaths<StringsT>;
+		params?: InputParams;
+	}
+
+	let { key, params = {} }: Props = $props();
+
+	const context = getAllContexts();
+
+	let hasComponentParams = false;
+
+	function getElementFunc(el: string) {
+		return (chunks: string | string[]) => {
+			const children = typeof chunks === 'string' ? chunks : chunks.join('');
+			return `<${el}>${children}</${el}>`;
+		};
+	}
+
+	/**
+	 * In backend processing (SSR), we only render the strings inside it
+	 * The components are not rendered.
+	 * However, if components are found, we set hasComponentParams to true
+	 * so that we can render the components in the frontend later.
+	 */
+	function getParamsForBackend() {
+		let retParams: Record<string, ParamValue> = {};
+
+		for (let [key, value] of Object.entries(params)) {
+			let newValue: ParamValue;
+			if (typeof value === 'object' && value !== null) {
+				if (value.hasOwnProperty('component')) {
+					newValue = (chunks: string | string[]) => {
+						const children = typeof chunks === 'string' ? chunks : chunks.join('');
+						return children;
+					};
+					hasComponentParams = true;
+				} else if (value.hasOwnProperty('element')) {
+					newValue = getElementFunc((value as any).element as string);
+				}
+			} else {
+				newValue = value as PrimitiveType;
+			}
+			retParams[key] = newValue;
+		}
+
+		return retParams;
+	}
+
+	/**
+	 * In frontend processing, we render the components
+	 */
+	interface ComponentBinding {
+		component: Component<any>;
+		props: Record<string, any>;
+	}
+	const componentBindings = new Map<string, ComponentBinding>();
+	function getParamsForFrontend() {
+		let retParams: Record<string, ParamValue> = {};
+
+		for (let [key, value] of Object.entries(params)) {
+			let newValue: ParamValue;
+			if (typeof value === 'object' && value !== null) {
+				if (value.hasOwnProperty('component')) {
+					const { component, props } = value as ComponentDeclaration;
+
+					newValue = (chunks: string | string[]) => {
+						const children = typeof chunks === 'string' ? chunks : chunks.join('');
+						const id =
+							key + '-' + Math.random().toString(36).substring(7) + '-' + Date.now().toString();
+						componentBindings.set(id, {
+							component: component!,
+							props: {
+								...props,
+								children
+							}
+						});
+						return '<span id="' + id + '">' + children + '</span>';
+					};
+				} else if (value.hasOwnProperty('element')) {
+					newValue = getElementFunc((value as any).element as string);
+				}
+			} else {
+				newValue = value as PrimitiveType;
+			}
+			retParams[key] = newValue;
+		}
+
+		return retParams;
+	}
+
+	const i18n = getContext<InternationalizationService>('i18n');
+	const locale = i18n.locale;
+	const strings = i18n.strings;
+
+	let message = $state(getMessage(getParamsForBackend()));
+
+	function getMessage(processedParams: Record<string, ParamValue>) {
+		return getMessageBase(key, processedParams, $strings, $locale);
+	}
+
+	function bindComponents() {
+		for (let [id, binding] of componentBindings) {
+			const el = document.getElementById(id);
+			if (el) {
+				el.innerHTML = '';
+				hydrate(binding.component, {
+					target: el,
+					props: binding.props,
+					context
+				});
+			}
+		}
+	}
+
+	async function renderFrontend() {
+		message = getMessage(getParamsForFrontend());
+		await tick();
+		if (hasComponentParams) bindComponents();
+	}
+
+	let mounted = $state(false);
+
+	run(() => {
+		params;
+		key;
+		if (browser && mounted) {
+			renderFrontend();
+		}
+	});
+
+	onMount(async () => {
+		mounted = true;
+
+		/**
+		 * If there are components,
+		 * we wait for the tick, then bind the components
+		 */
+		if (hasComponentParams) {
+			renderFrontend();
+		}
+	});
 </script>
 
 {@html message}

package/dist/components/Internationalization/T.svelte.d.ts

@@ -1,24 +1,26 @@
-import { SvelteComponent } from "svelte";
-import { type ToDotPaths, type I18nStrings } from "./types.js";
-import { type ComponentType } from "svelte";
-import { type PrimitiveType } from "intl-messageformat";
+import { type ToDotPaths, type I18nStrings, type PrimitiveType } from './types.js';
+import { type Component } from 'svelte';
 declare class __sveltets_Render<StringsT extends I18nStrings> {
     props(): {
         key: ToDotPaths<StringsT>;
         params?: Record<string, PrimitiveType | {
-            element?: string | undefined;
-            component?: ComponentType | undefined;
-            props?: Record<string, any> | undefined;
+            element?: string;
+            component?: Component<any>;
+            props?: Record<string, any>;
         }> | undefined;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
+    bindings(): "";
+    exports(): {};
 }
-export type TProps<StringsT extends I18nStrings> = ReturnType<__sveltets_Render<StringsT>['props']>;
-export type TEvents<StringsT extends I18nStrings> = ReturnType<__sveltets_Render<StringsT>['events']>;
-export type TSlots<StringsT extends I18nStrings> = ReturnType<__sveltets_Render<StringsT>['slots']>;
-export default class T<StringsT extends I18nStrings> extends SvelteComponent<TProps<StringsT>, TEvents<StringsT>, TSlots<StringsT>> {
+interface $$IsomorphicComponent {
+    new <StringsT extends I18nStrings>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<StringsT>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<StringsT>['props']>, ReturnType<__sveltets_Render<StringsT>['events']>, ReturnType<__sveltets_Render<StringsT>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<StringsT>['bindings']>;
+    } & ReturnType<__sveltets_Render<StringsT>['exports']>;
+    <StringsT extends I18nStrings>(internal: unknown, props: ReturnType<__sveltets_Render<StringsT>['props']> & {}): ReturnType<__sveltets_Render<StringsT>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-export {};
+declare const T: $$IsomorphicComponent;
+type T<StringsT extends I18nStrings> = InstanceType<typeof T<StringsT>>;
+export default T;

package/dist/components/Internationalization/i18n.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="svelte" />
-import type { PrimitiveType } from "intl-messageformat";
-import { type Readable, type Writable } from "svelte/store";
-import T from "./T.svelte";
-import type { ToDotPaths, I18nStrings } from "./types.js";
+import { type Readable, type Writable } from 'svelte/store';
+import T from './T.svelte';
+import type { ToDotPaths, I18nStrings, PrimitiveType } from './types.js';
 export type i18nLoaderType = () => Promise<any>;
 interface LanguageBase {
     name: string;

package/dist/components/Internationalization/i18n.js

@@ -1,7 +1,7 @@
-import { deepmerge } from "deepmerge-ts";
-import { writable, derived } from "svelte/store";
-import { t } from "./t.js";
-import T from "./T.svelte";
+import { deepmerge } from 'deepmerge-ts';
+import { writable, derived } from 'svelte/store';
+import { t } from './t.js';
+import T from './T.svelte';
 export class InternationalizationService {
     languages = [];
     locale;
@@ -10,7 +10,7 @@ export class InternationalizationService {
     stringsCache = new Map();
     defaultStrings;
     constructor(languages) {
-        const defaultLanguage = languages.find(l => l.default);
+        const defaultLanguage = languages.find((l) => l.default);
         if (!defaultLanguage) {
             throw new Error('Default language not found');
         }
@@ -19,7 +19,7 @@ export class InternationalizationService {
             throw new Error('Default strings not found for the default language');
         }
         this.locale = writable(defaultLanguage.code);
-        this.localeLanguage = derived(this.locale, $locale => this.languageByCode($locale));
+        this.localeLanguage = derived(this.locale, ($locale) => this.languageByCode($locale));
         this.defaultStrings = defaultStrings;
         this.strings.set(this.defaultStrings);
         this.stringsCache.set(defaultLanguage.code, this.defaultStrings);
@@ -39,7 +39,9 @@ export class InternationalizationService {
             this.locale.set(code);
         }
         else {
-            this.languageByCode(code)?.loader().then(({ default: strings }) => {
+            this.languageByCode(code)
+                ?.loader()
+                .then(({ default: strings }) => {
                 this.stringsCache.set(code, strings);
                 this.setStrings(code);
                 this.locale.set(code);
@@ -49,16 +51,16 @@ export class InternationalizationService {
     register(language) {
         this.languages.push({
             ...language,
-            loader: language.hasOwnProperty('strings') ?
-                () => Promise.resolve(language.strings) :
-                language.loader,
+            loader: language.hasOwnProperty('strings')
+                ? () => Promise.resolve(language.strings)
+                : language.loader
         });
     }
     found(code) {
         return !!this.languageByCode(code);
     }
     languageByCode(code) {
-        return this.languages.find(l => l.code === code);
+        return this.languages.find((l) => l.code === code);
     }
     t(key, params = {}) {
         return t(key, params, this);

package/dist/components/Internationalization/t.d.ts

@@ -1,6 +1,5 @@
-import { type PrimitiveType } from "intl-messageformat";
-import { type InternationalizationService } from "./i18n.js";
-import type { I18nStrings, ToDotPaths } from "./types.js";
+import { type InternationalizationService } from './i18n.js';
+import type { I18nStrings, PrimitiveType, ToDotPaths } from './types.js';
 type ParamValue = PrimitiveType | ((chunks: string | string[]) => string);
 type ParamsType = Record<string, ParamValue>;
 export declare function getMessage(key: string, params: ParamsType, $strings: Record<string, any>, $locale: string): string;

package/dist/components/Internationalization/t.js

@@ -1,7 +1,7 @@
-import { IntlMessageFormat } from "intl-messageformat";
-import { getContext } from "svelte";
-import { get } from "svelte/store";
-import { getStringByKey } from "./i18n.js";
+import { IntlMessageFormat } from 'intl-messageformat';
+import { getContext } from 'svelte';
+import { get } from 'svelte/store';
+import { getStringByKey } from './i18n.js';
 export function getMessage(key, params, $strings, $locale) {
     const string = getStringByKey($strings, key);
     if (string) {

package/dist/components/Internationalization/types.d.ts

@@ -1,7 +1,8 @@
 export type I18nStrings = {
     [key: string]: string | I18nStrings;
 };
+export type PrimitiveType = string | number | boolean | null | undefined | Date;
 export type ToDotPaths<T> = T extends object ? {
-    [K in keyof T]: `${Exclude<K, symbol>}${"" | `.${ToDotPaths<T[K]>}`}`;
+    [K in keyof T]: `${Exclude<K, symbol>}${'' | `.${ToDotPaths<T[K]>}`}`;
 }[keyof T] : never;
 export type FromDotPath<T, K extends string> = K extends keyof T ? T[K] : K extends `${infer K0}.${infer KR}` ? K0 extends keyof T ? FromDotPath<T[K0], KR> : never : never;

package/dist/components/Link/Link.svelte

@@ -1,72 +1,79 @@
-<script>export let href;
-export let color = "link";
-export let underline = true;
-</script>
-
-<a
-    {href}
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
 
-    class="color-{color}"
-    class:underline={underline}
+	const bubble = createBubbler();
+	interface Props {
+		href: string;
+		color?: 'link' | 'accent' | 'text';
+		underline?: boolean;
+		start?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		[key: string]: any;
+	}
 
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
+	let { href, color = 'link', underline = true, start, children, end, ...rest }: Props = $props();
+</script>
 
-    {...$$restProps}
+<a
+	{href}
+	class="color-{color}"
+	class:underline
+	onkeyup={bubble('keyup')}
+	onkeydown={bubble('keydown')}
+	onkeypress={bubble('keypress')}
+	onfocus={bubble('focus')}
+	onblur={bubble('blur')}
+	onclick={bubble('click')}
+	onmouseover={bubble('mouseover')}
+	onmouseenter={bubble('mouseenter')}
+	onmouseleave={bubble('mouseleave')}
+	onchange={bubble('change')}
+	{...rest}
 >
+	{#if start}
+		<span class="slot start-slot">{@render start?.()}</span>
+	{/if}
 
-    {#if $$slots.start}
-        <span class="slot start-slot"><slot name="start" /></span>
-    {/if}
-
-    <slot />
-
-    {#if $$slots.end}
-        <span class="slot end-slot"><slot name="end" /></span>
-    {/if}
+	{@render children?.()}
 
+	{#if end}
+		<span class="slot end-slot">{@render end?.()}</span>
+	{/if}
 </a>
 
 <style>
-    a {
-        display: inline-flex;
-        align-items: center;
-        color: var(--local-color);
-    }
-    a.color-link {
-        --local-color: var(--link);
-    }
-    a.color-accent {
-        --local-color: var(--accent);
-    }
-    a.color-text {
-        --local-color: var(--text);
-    }
-    a.underline {
-        text-decoration: underline;
-        text-decoration-color: var(--local-color);
-    }
-    a:not(.underline):hover {
-        text-decoration: underline;
-    }
+	a {
+		display: inline-flex;
+		align-items: center;
+		color: var(--local-color);
+	}
+	a.color-link {
+		--local-color: var(--link);
+	}
+	a.color-accent {
+		--local-color: var(--accent);
+	}
+	a.color-text {
+		--local-color: var(--text);
+	}
+	a.underline {
+		text-decoration: underline;
+		text-decoration-color: var(--local-color);
+	}
+	a:not(.underline):hover {
+		text-decoration: underline;
+	}
 
-    .slot {
-        display: inline-flex;
-        align-items: center;
-    }
+	.slot {
+		display: inline-flex;
+		align-items: center;
+	}
 
-    .start-slot {
-        margin-right: 4px;
-    }
-    .end-slot {
-        margin-left: 4px;
-    }
-</style>
+	.start-slot {
+		margin-right: 4px;
+	}
+	.end-slot {
+		margin-left: 4px;
+	}
+</style>

package/dist/components/Link/Link.svelte.d.ts

@@ -1,34 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        href: string;
-        color?: "accent" | "text" | "link" | undefined;
-        underline?: boolean | undefined;
-    };
-    events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        start: {};
-        default: {};
-        end: {};
-    };
-};
-export type LinkProps = typeof __propDef.props;
-export type LinkEvents = typeof __propDef.events;
-export type LinkSlots = typeof __propDef.slots;
-export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
-}
-export {};
+declare const Link: import("svelte").Component<{
+    [key: string]: any;
+    href: string;
+    color?: "link" | "accent" | "text";
+    underline?: boolean;
+    start?: import("svelte").Snippet;
+    children?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+}, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;