@sprawlify/svelte 0.0.38

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

@@ -0,0 +1,9 @@
+import type { Bindable, BindableParams } from "@sprawlify/primitives/core";
+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 "@sprawlify/primitives/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;
+            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,6 @@
+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";

package/dist/core/index.js

@@ -0,0 +1,5 @@
+export { mergeProps } from "./merge-props";
+export { normalizeProps } from "./normalize-props";
+export { portal } from "./portal";
+export { reflect } from "./reflect";
+export { useMachine } from "./machine.svelte";

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

@@ -0,0 +1,2 @@
+import type { Machine, MachineSchema, Service } from "@sprawlify/primitives/core";
+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, INIT_STATE, MachineStatus } from "@sprawlify/primitives/core";
+import { compact, ensure, isFunction, isString, toArray, warn } from "@sprawlify/primitives/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();
+    const transitionRef = { current: null };
+    const previousEventRef = { current: null };
+    const 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 !!machine.states[currentState]?.tags?.includes(tag);
+        },
+        matches(...values) {
+            const currentState = state.get();
+            return values.includes(currentState);
+        },
+    });
+    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(`[zag-js] 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());
+        return machine.implementations?.guards?.[str](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(`[zag-js] 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, () => `[zag-js] 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: machine.initialState({ prop }),
+        onChange(nextState, prevState) {
+            // compute effects: exit -> transition -> enter
+            // exit effects
+            if (prevState) {
+                const exitEffects = effects.get(prevState);
+                exitEffects?.();
+                effects.delete(prevState);
+            }
+            // exit actions
+            if (prevState) {
+                action(machine.states[prevState]?.exit);
+            }
+            // transition actions
+            action(transitionRef.current?.actions);
+            // enter effect
+            const cleanup = effect(machine.states[nextState]?.effects);
+            if (cleanup)
+                effects.set(nextState, cleanup);
+            // root entry actions
+            if (prevState === INIT_STATE) {
+                action(machine.entry);
+                const cleanup = effect(machine.effects);
+                if (cleanup)
+                    effects.set(INIT_STATE, cleanup);
+            }
+            // enter actions
+            action(machine.states[nextState]?.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;
+        const currentState = state.get();
+        // @ts-ignore
+        const transitions = machine.states[currentState].on?.[event.type] ?? machine.on?.[event.type];
+        const transition = choose(transitions);
+        if (!transition)
+            return;
+        // save current transition
+        transitionRef.current = transition;
+        const target = transition.target ?? currentState;
+        debug("transition", event.type, transition.target || currentState, `(${transition.actions})`);
+        const changed = target !== currentState;
+        if (changed) {
+            // state change is high priority
+            state.set(target);
+        }
+        else if (transition.reenter && !changed) {
+            // reenter will re-invoke the current state
+            state.invoke(currentState, currentState);
+        }
+        else {
+            // call transition actions
+            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 zagMergeProps } from "@sprawlify/primitives/core";
+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 = zagMergeProps(...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("@sprawlify/primitives/types").NormalizeProps<PropTypes>;

package/dist/core/normalize-props.js

@@ -0,0 +1,43 @@
+import { createNormalizer } from "@sprawlify/primitives/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();
+            const 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 "@sprawlify/primitives/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/index.d.ts

@@ -0,0 +1 @@
+export * from "./core";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./core";

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@sprawlify/svelte",
+  "version": "0.0.38",
+  "type": "module",
+  "description": "Svelte wrapper for primitives.",
+  "author": "sprawlify <npm@sprawlify.com>",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sprawlify/primitives": "0.0.38"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package",
+    "typecheck": "svelte-check",
+    "lint": "eslint src --fix"
+  }
+}