@hyvor/design 0.0.68 → 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 { ToDotPaths, I18nStrings, PrimitiveType } from './types.js';
 export type i18nLoaderType = () => Promise<any>;
 interface LanguageBase {
     name: string;

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 { 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/types.d.ts

@@ -1,6 +1,7 @@
 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]>}`}`;
 }[keyof T] : never;

package/dist/components/Link/Link.svelte

@@ -1,32 +1,44 @@
-<script>export let href;
-export let color = "link";
-export let underline = true;
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	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;
+	}
+
+	let { href, color = 'link', underline = true, start, children, end, ...rest }: Props = $props();
 </script>
 
 <a
 	{href}
 	class="color-{color}"
 	class:underline
-	on:keyup
-	on:keydown
-	on:keypress
-	on:focus
-	on:blur
-	on:click
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:change
-	{...$$restProps}
+	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 $$slots.start}
-		<span class="slot start-slot"><slot name="start" /></span>
+	{#if start}
+		<span class="slot start-slot">{@render start?.()}</span>
 	{/if}
 
-	<slot />
+	{@render children?.()}
 
-	{#if $$slots.end}
-		<span class="slot end-slot"><slot name="end" /></span>
+	{#if end}
+		<span class="slot end-slot">{@render end?.()}</span>
 	{/if}
 </a>
 

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;

package/dist/components/Loader/LoadButton.svelte

@@ -1,12 +1,27 @@
-<script>import Button from "../Button/Button.svelte";
-import Loader from "./Loader.svelte";
-export let text;
-export let show;
-export let loading;
-export let height = 50;
-export let divProps = {};
-export let loaderProps = {};
-export let buttonProps = {};
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import Button from '../Button/Button.svelte';
+	import Loader from './Loader.svelte';
+
+	interface Props {
+		text: string;
+		show: boolean; // has more
+		loading: boolean; // whether loading
+		height?: number;
+		divProps?: Record<string, any>;
+		loaderProps?: ComponentProps<typeof Loader>;
+		buttonProps?: ComponentProps<typeof Button>;
+	}
+
+	let {
+		text,
+		show,
+		loading,
+		height = 50,
+		divProps = {},
+		loaderProps = {},
+		buttonProps = {}
+	}: Props = $props();
 </script>
 
 {#if show}

package/dist/components/Loader/LoadButton.svelte.d.ts

@@ -1,44 +1,31 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        text: string;
-        show: boolean;
-        loading: boolean;
-        height?: number | undefined;
-        divProps?: Record<string, any> | undefined;
-        loaderProps?: {
-            [x: string]: any;
-            block?: boolean | undefined;
-            full?: boolean | undefined;
-            padding?: number | "none" | "small" | "medium" | "large" | undefined;
-            size?: number | "small" | "medium" | "large" | undefined;
-            state?: "none" | "error" | "loading" | "success" | undefined;
-            duration?: number | null | undefined;
-            color?: string | undefined;
-            colorTrack?: string | undefined;
-            invert?: boolean | undefined;
-        } | undefined;
-        buttonProps?: {
-            [x: string]: any;
-            as?: "button" | "a" | undefined;
-            size?: "small" | "medium" | "large" | "x-small" | undefined;
-            color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
-            block?: boolean | undefined;
-            variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
-            align?: "start" | "center" | undefined;
-            button?: HTMLButtonElement | HTMLAnchorElement | undefined;
-        } | undefined;
+import type { ComponentProps } from 'svelte';
+import Button from '../Button/Button.svelte';
+import Loader from './Loader.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LoadButtonProps = typeof __propDef.props;
-export type LoadButtonEvents = typeof __propDef.events;
-export type LoadButtonSlots = typeof __propDef.slots;
-export default class LoadButton extends SvelteComponent<LoadButtonProps, LoadButtonEvents, LoadButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const LoadButton: $$__sveltets_2_IsomorphicComponent<{
+    text: string;
+    show: boolean;
+    loading: boolean;
+    height?: number;
+    divProps?: Record<string, any>;
+    loaderProps?: ComponentProps<typeof Loader>;
+    buttonProps?: ComponentProps<typeof Button>;
+}, {
+    click: any;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type LoadButton = InstanceType<typeof LoadButton>;
+export default LoadButton;