@wirekyt/svelte 0.0.1 → 0.0.2

package/dist/components/tree-view/tree.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface TreeViewTreeBaseProps extends PolymorphicProps<"ul">, RefAttribute {}
+  export interface TreeViewTreeProps extends Assign<HTMLProps<"ul">, TreeViewTreeBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useTreeViewContext } from "./use-context";
+
+  let { ref = $bindable(null), ...props }: TreeViewTreeProps = $props();
+
+  const treeView = useTreeViewContext();
+  const mergedProps = $derived(mergeProps(treeView().getTreeProps(), props));
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface TreeViewTreeBaseProps extends PolymorphicProps<"ul">, RefAttribute {
+}
+export interface TreeViewTreeProps extends Assign<HTMLProps<"ul">, TreeViewTreeBaseProps> {
+}
+declare const Tree: import("svelte").Component<TreeViewTreeProps, {}, "ref">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/dist/components/tree-view/use-context.d.ts

@@ -0,0 +1,5 @@
+import type { TreeNode } from "../collection";
+import type { UseTreeViewReturn } from "./use.svelte";
+export interface UseTreeViewContext<T extends TreeNode> extends UseTreeViewReturn<T> {
+}
+export declare const TreeViewProvider: (opts: UseTreeViewContext<any>) => void, useTreeViewContext: (fallback?: UseTreeViewContext<any> | undefined) => UseTreeViewContext<any>;

package/dist/components/tree-view/use-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "../../utils";
+export const [TreeViewProvider, useTreeViewContext] = createContext({
+    name: "TreeViewContext",
+    hookName: "useTreeViewContext",
+    providerName: "<TreeViewProvider />",
+});

package/dist/components/tree-view/use-node-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from "../../core";
+import type { NodeState } from "@wirekyt/dom/machines/tree-view";
+export interface UseTreeViewNodeContext extends Accessor<NodeState> {
+}
+export declare const TreeViewNodeProvider: (opts: UseTreeViewNodeContext) => void, useTreeViewNodeContext: (fallback?: UseTreeViewNodeContext | undefined) => UseTreeViewNodeContext;

package/dist/components/tree-view/use-node-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "../../utils";
+export const [TreeViewNodeProvider, useTreeViewNodeContext] = createContext({
+    name: "TreeViewNodeContext",
+    hookName: "useTreeViewNodeContext",
+    providerName: "<TreeViewNodeProvider />",
+});

package/dist/components/tree-view/use-node-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from "../../core";
+import type { NodeProps } from "@wirekyt/dom/machines/tree-view";
+export interface UseTreeViewNodePropsContext extends Accessor<NodeProps> {
+}
+export declare const TreeViewNodePropsProvider: (opts: UseTreeViewNodePropsContext) => void, useTreeViewNodePropsContext: (fallback?: UseTreeViewNodePropsContext | undefined) => UseTreeViewNodePropsContext;

package/dist/components/tree-view/use-node-props-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "../../utils";
+export const [TreeViewNodePropsProvider, useTreeViewNodePropsContext] = createContext({
+    name: "TreeViewNodePropsContext",
+    hookName: "useTreeViewNodePropsContext",
+    providerName: "<TreeViewNodePropsProvider />",
+});

package/dist/components/tree-view/use.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Accessor, Optional } from "../../core";
+import { type PropTypes } from "../../core";
+import * as treeView from "@wirekyt/dom/machines/tree-view";
+import { type MaybeFunction } from "@wirekyt/dom/utils";
+import type { TreeNode } from "../collection";
+export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<treeView.Props<T>, "dir" | "getRootNode">, "id"> {
+}
+export interface UseTreeViewReturn<T extends TreeNode> extends Accessor<treeView.Api<PropTypes, T>> {
+}
+export declare const useTreeView: <T extends TreeNode>(props: MaybeFunction<UseTreeViewProps<T>>) => UseTreeViewReturn<T>;

package/dist/components/tree-view/use.svelte.js

@@ -0,0 +1,21 @@
+import { normalizeProps, useMachine } from "../../core";
+import { useEnvironmentContext } from "../../providers";
+import { useLocaleContext } from "../../providers";
+import * as treeView from "@wirekyt/dom/machines/tree-view";
+import { ensureProps, runIfFn } from "@wirekyt/dom/utils";
+export const useTreeView = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        ensureProps(resolvedProps, ["id"]);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(treeView.machine, () => machineProps);
+    const api = $derived(treeView.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/core/bindable.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Bindable, BindableParams } from "@wirekyt/dom";
+export declare function bindable<T>(props: () => BindableParams<T>): Bindable<T>;
+export declare namespace bindable {
+    var cleanup: (fn: VoidFunction) => void;
+    var ref: <T>(defaultValue: T) => {
+        get: () => T;
+        set: (next: T) => void;
+    };
+}

package/dist/core/bindable.svelte.js

@@ -0,0 +1,57 @@
+import { identity, isFunction } from "@wirekyt/dom/utils";
+import { flushSync, onDestroy, untrack } from "svelte";
+export function bindable(props) {
+    const initial = props().defaultValue ?? props().value;
+    const eq = props().isEqual ?? Object.is;
+    let value = $state(initial);
+    const controlled = $derived(props().value !== undefined);
+    let valueRef = { current: untrack(() => value) };
+    let prevValue = { current: undefined };
+    $effect.pre(() => {
+        const v = controlled ? props().value : value;
+        valueRef = { current: v };
+        prevValue = { current: v };
+    });
+    const setValueFn = (v) => {
+        const next = isFunction(v) ? v(valueRef.current) : v;
+        const prev = prevValue.current;
+        if (props().debug) {
+            console.log(`[bindable > ${props().debug}] setValue`, { next, prev });
+        }
+        if (!controlled)
+            value = next;
+        if (!eq(next, prev)) {
+            props().onChange?.(next, prev);
+        }
+    };
+    function get() {
+        return (controlled ? props().value : value);
+    }
+    return {
+        initial,
+        ref: valueRef,
+        get,
+        set(val) {
+            const exec = props().sync ? flushSync : identity;
+            untrack(() => exec(() => setValueFn(val)));
+        },
+        invoke(nextValue, prevValue) {
+            props().onChange?.(nextValue, prevValue);
+        },
+        hash(value) {
+            return props().hash?.(value) ?? String(value);
+        },
+    };
+}
+bindable.cleanup = (fn) => {
+    onDestroy(() => fn());
+};
+bindable.ref = (defaultValue) => {
+    let value = defaultValue;
+    return {
+        get: () => value,
+        set: (next) => {
+            value = next;
+        },
+    };
+};

package/dist/core/index.d.ts

@@ -0,0 +1,8 @@
+export { mergeProps } from "./merge-props";
+export { normalizeProps } from "./normalize-props";
+export type { PropTypes } from "./normalize-props";
+export { portal } from "./portal";
+export { reflect } from "./reflect";
+export { useMachine } from "./machine.svelte";
+export { useSyncExternalStore } from "./use-sync-external-store.svelte";
+export * from "./types";

package/dist/core/index.js

@@ -0,0 +1,7 @@
+export { mergeProps } from "./merge-props";
+export { normalizeProps } from "./normalize-props";
+export { portal } from "./portal";
+export { reflect } from "./reflect";
+export { useMachine } from "./machine.svelte";
+export { useSyncExternalStore } from "./use-sync-external-store.svelte";
+export * from "./types";

package/dist/core/machine.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { Machine, MachineSchema, Service } from "@wirekyt/dom";
+export declare function useMachine<T extends MachineSchema>(machine: Machine<T>, userProps: Partial<T["props"]> | (() => Partial<T["props"]>)): Service<T>;

package/dist/core/machine.svelte.js

@@ -0,0 +1,260 @@
+import { createScope, findTransition, getExitEnterStates, hasTag, INIT_STATE, MachineStatus, matchesState, resolveStateValue, } from "@wirekyt/dom";
+import { callAll, compact, ensure, isFunction, isString, toArray, warn } from "@wirekyt/dom/utils";
+import { flushSync, onDestroy, onMount } from "svelte";
+import { bindable } from "./bindable.svelte";
+import { useRefs } from "./refs.svelte";
+import { track } from "./track.svelte";
+function access(userProps) {
+    if (isFunction(userProps))
+        return userProps();
+    return userProps;
+}
+export function useMachine(machine, userProps) {
+    const scope = $derived.by(() => {
+        const { id, ids, getRootNode } = access(userProps);
+        return createScope({ id, ids, getRootNode });
+    });
+    const debug = (...args) => {
+        if (machine.debug)
+            console.log(...args);
+    };
+    const props = $derived(machine.props?.({ props: compact(access(userProps)), scope }) ?? access(userProps));
+    const prop = useProp(() => props);
+    const context = machine.context?.({
+        prop,
+        bindable: bindable,
+        get scope() {
+            return scope;
+        },
+        flush: flush,
+        getContext() {
+            return ctx;
+        },
+        getComputed() {
+            return computed;
+        },
+        getRefs() {
+            return refs;
+        },
+        getEvent() {
+            return getEvent();
+        },
+    });
+    const ctx = {
+        get(key) {
+            return context?.[key].get();
+        },
+        set(key, value) {
+            context?.[key].set(value);
+        },
+        initial(key) {
+            return context?.[key].initial;
+        },
+        hash(key) {
+            const current = context?.[key].get();
+            return context?.[key].hash(current);
+        },
+    };
+    let effects = new Map();
+    let transitionRef = { current: null };
+    let previousEventRef = { current: null };
+    let eventRef = { current: { type: "" } };
+    const getEvent = () => ({
+        ...eventRef.current,
+        current() {
+            return eventRef.current;
+        },
+        previous() {
+            return previousEventRef.current;
+        },
+    });
+    const getState = () => ({
+        ...state,
+        hasTag(tag) {
+            const currentState = state.get();
+            return hasTag(machine, currentState, tag);
+        },
+        matches(...values) {
+            const currentState = state.get();
+            return values.some((value) => matchesState(currentState, value));
+        },
+    });
+    const refs = useRefs(machine.refs?.({ prop, context: ctx }) ?? {});
+    const getParams = () => ({
+        state: getState(),
+        context: ctx,
+        event: getEvent(),
+        prop,
+        send,
+        action,
+        guard,
+        track,
+        refs,
+        computed,
+        flush,
+        scope,
+        choose,
+    });
+    const action = (keys) => {
+        const strs = isFunction(keys) ? keys(getParams()) : keys;
+        if (!strs)
+            return;
+        const fns = strs.map((s) => {
+            const fn = machine.implementations?.actions?.[s];
+            if (!fn)
+                warn(`[wirekyt] No implementation found for action "${JSON.stringify(s)}"`);
+            return fn;
+        });
+        for (const fn of fns) {
+            fn?.(getParams());
+        }
+    };
+    const guard = (str) => {
+        if (isFunction(str))
+            return str(getParams());
+        const fn = machine.implementations?.guards?.[str];
+        if (!fn)
+            warn(`[wirekyt] No implementation found for guard "${JSON.stringify(str)}"`);
+        return fn?.(getParams());
+    };
+    const effect = (keys) => {
+        const strs = isFunction(keys) ? keys(getParams()) : keys;
+        if (!strs)
+            return;
+        const fns = strs.map((s) => {
+            const fn = machine.implementations?.effects?.[s];
+            if (!fn)
+                warn(`[wirekyt] No implementation found for effect "${JSON.stringify(s)}"`);
+            return fn;
+        });
+        const cleanups = [];
+        for (const fn of fns) {
+            const cleanup = fn?.(getParams());
+            if (cleanup)
+                cleanups.push(cleanup);
+        }
+        return () => cleanups.forEach((fn) => fn?.());
+    };
+    const choose = (transitions) => {
+        return toArray(transitions).find((t) => {
+            let result = !t.guard;
+            if (isString(t.guard))
+                result = !!guard(t.guard);
+            else if (isFunction(t.guard))
+                result = t.guard(getParams());
+            return result;
+        });
+    };
+    const computed = (key) => {
+        ensure(machine.computed, () => `[wirekyt] No computed object found on machine`);
+        const fn = machine.computed[key];
+        return fn({
+            context: ctx,
+            event: getEvent(),
+            prop,
+            refs,
+            scope,
+            computed: computed,
+        });
+    };
+    const state = bindable(() => ({
+        defaultValue: resolveStateValue(machine, machine.initialState({ prop })),
+        onChange(nextState, prevState) {
+            const { exiting, entering } = getExitEnterStates(machine, prevState, nextState, transitionRef.current?.reenter);
+            exiting.forEach((item) => {
+                const exitEffects = effects.get(item.path);
+                exitEffects?.();
+                effects.delete(item.path);
+            });
+            exiting.forEach((item) => {
+                action(item.state?.exit);
+            });
+            action(transitionRef.current?.actions);
+            entering.forEach((item) => {
+                const cleanup = effect(item.state?.effects);
+                if (cleanup) {
+                    const existing = effects.get(item.path);
+                    effects.set(item.path, existing ? callAll(existing, cleanup) : cleanup);
+                }
+            });
+            if (prevState === INIT_STATE) {
+                action(machine.entry);
+                const cleanup = effect(machine.effects);
+                if (cleanup) {
+                    const existing = effects.get(INIT_STATE);
+                    effects.set(INIT_STATE, existing ? callAll(existing, cleanup) : cleanup);
+                }
+            }
+            entering.forEach((item) => {
+                action(item.state?.entry);
+            });
+        },
+    }));
+    let status = MachineStatus.NotStarted;
+    onMount(() => {
+        const started = status === MachineStatus.Started;
+        status = MachineStatus.Started;
+        debug(started ? "rehydrating..." : "initializing...");
+        state.invoke(state.initial, INIT_STATE);
+    });
+    onDestroy(() => {
+        debug("unmounting...");
+        status = MachineStatus.Stopped;
+        effects.forEach((fn) => fn?.());
+        effects = new Map();
+        transitionRef.current = null;
+        action(machine.exit);
+    });
+    const send = (event) => {
+        if (status !== MachineStatus.Started)
+            return;
+        previousEventRef.current = eventRef.current;
+        eventRef.current = event;
+        let currentState = state.get();
+        const { transitions, source } = findTransition(machine, currentState, event.type);
+        const transition = choose(transitions);
+        if (!transition)
+            return;
+        transitionRef.current = transition;
+        const target = resolveStateValue(machine, transition.target ?? currentState, source);
+        debug("transition", event.type, transition.target || currentState, `(${transition.actions})`);
+        const changed = target !== currentState;
+        if (changed) {
+            state.set(target);
+        }
+        else if (transition.reenter) {
+            state.invoke(currentState, currentState);
+        }
+        else {
+            action(transition.actions);
+        }
+    };
+    machine.watch?.(getParams());
+    return {
+        get state() {
+            return getState();
+        },
+        send,
+        context: ctx,
+        prop,
+        get scope() {
+            return scope;
+        },
+        refs,
+        computed,
+        get event() {
+            return getEvent();
+        },
+        getStatus: () => status,
+    };
+}
+function useProp(value) {
+    return function get(key) {
+        return value()[key];
+    };
+}
+function flush(fn) {
+    flushSync(() => {
+        queueMicrotask(() => fn());
+    });
+}

package/dist/core/merge-props.d.ts

@@ -0,0 +1 @@
+export declare function mergeProps(...args: Record<string | symbol, any>[]): Record<string | symbol, any>;

package/dist/core/merge-props.js

@@ -0,0 +1,32 @@
+import { mergeProps as wireMergeProps } from "@wirekyt/dom";
+import { toStyleString } from "./normalize-props";
+const CSS_REGEX = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g;
+const serialize = (style) => {
+    const res = {};
+    let match;
+    while ((match = CSS_REGEX.exec(style))) {
+        res[match[1]] = match[2];
+    }
+    return res;
+};
+export function mergeProps(...args) {
+    const classNames = [];
+    for (const props of args) {
+        if (!props)
+            continue;
+        if ("class" in props && props.class != null) {
+            classNames.push(props.class);
+        }
+    }
+    const merged = wireMergeProps(...args);
+    if (classNames.length > 0) {
+        merged.class = classNames.length === 1 ? classNames[0] : classNames;
+    }
+    if ("style" in merged) {
+        if (typeof merged.style === "string") {
+            merged.style = serialize(merged.style);
+        }
+        merged.style = toStyleString(merged.style);
+    }
+    return merged;
+}

package/dist/core/normalize-props.d.ts

@@ -0,0 +1,7 @@
+import type { SvelteHTMLElements, HTMLAttributes } from "svelte/elements";
+export type PropTypes = SvelteHTMLElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style?: HTMLAttributes<HTMLElement>["style"] | undefined;
+};
+export declare function toStyleString(style: Record<string, number | string>): string;
+export declare const normalizeProps: import("@wirekyt/dom/types").NormalizeProps<PropTypes>;

package/dist/core/normalize-props.js

@@ -0,0 +1,43 @@
+import { createNormalizer } from "@wirekyt/dom/types";
+const propMap = {
+    className: "class",
+    defaultChecked: "checked",
+    defaultValue: "value",
+    htmlFor: "for",
+    onBlur: "onfocusout",
+    onChange: "oninput",
+    onFocus: "onfocusin",
+    onDoubleClick: "ondblclick",
+};
+export function toStyleString(style) {
+    let string = "";
+    for (let key in style) {
+        const value = style[key];
+        if (value === null || value === undefined)
+            continue;
+        if (!key.startsWith("--"))
+            key = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+        string += `${key}:${value};`;
+    }
+    return string;
+}
+const preserveKeys = new Set("viewBox,className,preserveAspectRatio,fillRule,clipPath,clipRule,strokeWidth,strokeLinecap,strokeLinejoin,strokeDasharray,strokeDashoffset,strokeMiterlimit".split(","));
+function toSvelteProp(key) {
+    if (key in propMap)
+        return propMap[key];
+    if (preserveKeys.has(key))
+        return key;
+    return key.toLowerCase();
+}
+function toSveltePropValue(key, value) {
+    if (key === "style" && typeof value === "object")
+        return toStyleString(value);
+    return value;
+}
+export const normalizeProps = createNormalizer((props) => {
+    const normalized = {};
+    for (const key in props) {
+        normalized[toSvelteProp(key)] = toSveltePropValue(key, props[key]);
+    }
+    return normalized;
+});

package/dist/core/portal.d.ts

@@ -0,0 +1,9 @@
+export interface PortalActionProps {
+    disabled?: boolean | undefined;
+    container?: HTMLElement | undefined;
+    getRootNode?: (() => ShadowRoot | Document | Node) | undefined;
+}
+export declare function portal(node: HTMLElement, props?: PortalActionProps): {
+    destroy: () => void;
+    update: (props?: PortalActionProps) => void;
+};

package/dist/core/portal.js

@@ -0,0 +1,15 @@
+export function portal(node, props = {}) {
+    function update(props = {}) {
+        const { container, disabled, getRootNode } = props;
+        if (disabled)
+            return;
+        const doc = getRootNode?.().ownerDocument ?? document;
+        const mountNode = container ?? doc.body;
+        mountNode.appendChild(node);
+    }
+    update(props);
+    return {
+        destroy: () => node.remove(),
+        update,
+    };
+}

package/dist/core/reflect.d.ts

@@ -0,0 +1 @@
+export declare function reflect<T extends Record<string, any>>(obj: () => T): T;

package/dist/core/reflect.js

@@ -0,0 +1,11 @@
+const isFunction = (value) => typeof value === "function";
+export function reflect(obj) {
+    return new Proxy(obj(), {
+        get(_, prop) {
+            const target = obj();
+            let value = Reflect.get(target, prop);
+            // @ts-ignore
+            return isFunction(value) ? value.bind(target) : value;
+        },
+    });
+}

package/dist/core/refs.svelte.d.ts

@@ -0,0 +1,4 @@
+export declare function useRefs<T>(refs: T): {
+    get<K extends keyof T>(key: K): T[K];
+    set<K extends keyof T>(key: K, value: T[K]): void;
+};

package/dist/core/refs.svelte.js

@@ -0,0 +1,11 @@
+export function useRefs(refs) {
+    const ref = { current: refs };
+    return {
+        get(key) {
+            return ref.current[key];
+        },
+        set(key, value) {
+            ref.current[key] = value;
+        },
+    };
+}

package/dist/core/track.svelte.d.ts

@@ -0,0 +1 @@
+export declare const track: (deps: any[], effect: VoidFunction) => void;

package/dist/core/track.svelte.js

@@ -0,0 +1,28 @@
+import { isEqual } from "@wirekyt/dom/utils";
+const access = (value) => {
+    if (typeof value === "function")
+        return value();
+    return value;
+};
+export const track = (deps, effect) => {
+    let prevDeps = [];
+    let isFirstRun = true;
+    $effect(() => {
+        if (isFirstRun) {
+            prevDeps = deps.map((d) => access(d));
+            isFirstRun = false;
+            return;
+        }
+        let changed = false;
+        for (let i = 0; i < deps.length; i++) {
+            if (!isEqual(prevDeps[i], access(deps[i]))) {
+                changed = true;
+                break;
+            }
+        }
+        if (changed) {
+            prevDeps = deps.map((d) => access(d));
+            effect();
+        }
+    });
+};

package/dist/core/types.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, SvelteHTMLElements } from "svelte/elements";
+export type Assign<T, U> = Omit<T, keyof U> & U;
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type Accessor<T> = () => T;
+export type HTMLTag = keyof SvelteHTMLElements;
+export type PropsFn<T extends HTMLTag> = (props?: HTMLProps<T>) => HTMLAttributes<HTMLElement>;
+export type HTMLProps<T extends HTMLTag> = SvelteHTMLElements[T];
+export type PolymorphicProps<T extends HTMLTag> = {
+    children?: Snippet;
+    asChild?: Snippet<[PropsFn<T>]>;
+};
+export interface RefAttribute<T extends Element = Element> {
+    ref?: T | null | undefined;
+}

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/core/use-sync-external-store.svelte.d.ts

@@ -0,0 +1 @@
+export declare function useSyncExternalStore<T>(subscribe: (listener: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T): () => T;