elit 3.5.6 → 3.5.7

package/src/state.ts

@@ -1,556 +0,0 @@
-/**
- * Elit - State Management
- */
-
-import type { State, StateOptions, VNode, VirtualListController, Child, Props } from './types';
-import { dom } from './dom';
-
-export type NativeBindingKind = 'value' | 'checked';
-
-export interface NativeBindingMetadata<T = unknown> {
-    kind: NativeBindingKind;
-    state: State<T>;
-}
-
-export const ELIT_NATIVE_BINDING = Symbol.for('elit.native.binding');
-const ELIT_INTERNAL_WS_PATH = '/__elit_ws';
-
-// State management helpers
-export const createState = <T>(initial: T, options?: StateOptions): State<T> =>
-    dom.createState(initial, options);
-
-export const computed = <T extends any[], R>(
-    states: { [K in keyof T]: State<T[K]> },
-    fn: (...values: T) => R
-): State<R> => dom.computed(states, fn);
-
-export const effect = (fn: () => void): void => dom.effect(fn);
-
-// Performance helpers
-export const batchRender = (container: string | HTMLElement, vNodes: VNode[]): HTMLElement =>
-    dom.batchRender(container, vNodes);
-
-export const renderChunked = (
-    container: string | HTMLElement,
-    vNodes: VNode[],
-    chunkSize?: number,
-    onProgress?: (current: number, total: number) => void
-): HTMLElement => dom.renderChunked(container, vNodes, chunkSize, onProgress);
-
-export const createVirtualList = <T>(
-    container: HTMLElement,
-    items: T[],
-    renderItem: (item: T, index: number) => VNode,
-    itemHeight?: number,
-    bufferSize?: number
-): VirtualListController => dom.createVirtualList(container, items, renderItem, itemHeight, bufferSize);
-
-export const lazy = <T extends any[], R>(loadFn: () => Promise<(...args: T) => R>) =>
-    dom.lazy(loadFn);
-
-export const cleanupUnused = (root: HTMLElement): number =>
-    dom.cleanupUnusedElements(root);
-
-// Throttle helper
-export const throttle = <T extends any[]>(fn: (...args: T) => void, delay: number) => {
-    let timer: NodeJS.Timeout | null = null;
-    return (...args: T) => {
-        if (!timer) {
-            timer = setTimeout(() => {
-                timer = null;
-                fn(...args);
-            }, delay);
-        }
-    };
-};
-
-// Debounce helper
-export const debounce = <T extends any[]>(fn: (...args: T) => void, delay: number) => {
-    let timer: NodeJS.Timeout | null = null;
-    return (...args: T) => {
-        timer && clearTimeout(timer);
-        timer = setTimeout(() => fn(...args), delay);
-    };
-};
-
-export function bindValue<T extends string | number | string[]>(state: State<T>): Props {
-    const props = {
-        value: state.value,
-        onInput: (event: Event) => {
-            const target = event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;
-            if (!target) {
-                return;
-            }
-
-            if (target instanceof HTMLSelectElement && target.multiple) {
-                state.value = Array.from(target.selectedOptions).map((option) => option.value) as T;
-                return;
-            }
-
-            const nextValue = typeof state.value === 'number'
-                ? Number(target.value)
-                : target.value;
-
-            state.value = (typeof state.value === 'number' && Number.isNaN(nextValue))
-                ? state.value
-                : nextValue as T;
-        },
-    } as Props & { [ELIT_NATIVE_BINDING]: NativeBindingMetadata<T> };
-
-    props[ELIT_NATIVE_BINDING] = {
-        kind: 'value',
-        state,
-    };
-
-    return props;
-}
-
-export function bindChecked(state: State<boolean>): Props {
-    const props = {
-        checked: state.value,
-        onInput: (event: Event) => {
-            const target = event.target as HTMLInputElement | null;
-            if (!target) {
-                return;
-            }
-
-            state.value = Boolean(target.checked);
-        },
-    } as Props & { [ELIT_NATIVE_BINDING]: NativeBindingMetadata<boolean> };
-
-    props[ELIT_NATIVE_BINDING] = {
-        kind: 'checked',
-        state,
-    };
-
-    return props;
-}
-
-// ===== Shared State - syncs with elit-server =====
-
-type StateChangeCallback<T = any> = (value: T, oldValue: T) => void;
-
-interface StateMessage {
-    type: 'state:init' | 'state:update' | 'state:subscribe' | 'state:unsubscribe' | 'state:change';
-    key: string;
-    value?: any;
-    timestamp?: number;
-}
-
-function resolveSharedStateWebSocketUrl(wsUrl?: string): string {
-    const protocol = typeof location !== 'undefined' && location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const origin = typeof location !== 'undefined' ? `${protocol}//${location.host}` : `${protocol}//localhost`;
-
-    if (!wsUrl) {
-        return `${origin}${ELIT_INTERNAL_WS_PATH}`;
-    }
-
-    if (/^wss?:\/\//i.test(wsUrl)) {
-        const parsedUrl = new URL(wsUrl);
-        if (!parsedUrl.pathname || parsedUrl.pathname === '/') {
-            parsedUrl.pathname = ELIT_INTERNAL_WS_PATH;
-        }
-        return parsedUrl.toString();
-    }
-
-    if (wsUrl.startsWith('/')) {
-        return `${origin}${wsUrl}`;
-    }
-
-    return wsUrl;
-}
-
-/**
- * Shared State - syncs with elit-server
- */
-export class SharedState<T = any> {
-    private localState: State<T>;
-    private ws: WebSocket | null = null;
-    private pendingUpdates: T[] = [];
-    private previousValue: T;
-
-    constructor(
-        public readonly key: string,
-        defaultValue: T,
-        private wsUrl?: string
-    ) {
-        this.localState = createState(defaultValue);
-        this.previousValue = defaultValue;
-        this.connect();
-    }
-
-    /**
-     * Get current value
-     */
-    get value(): T {
-        return this.localState.value;
-    }
-
-    /**
-     * Set new value and sync to server
-     */
-    set value(newValue: T) {
-        this.previousValue = this.localState.value;
-        this.localState.value = newValue;
-        this.sendToServer(newValue);
-    }
-
-    /**
-     * Get the underlying Elit State (for reactive binding)
-     */
-    get state(): State<T> {
-        return this.localState;
-    }
-
-    /**
-     * Subscribe to changes (returns Elit State for reactive)
-     */
-    onChange(callback: StateChangeCallback<T>): () => void {
-        return this.localState.subscribe((newValue) => {
-            const oldValue = this.previousValue;
-            this.previousValue = newValue;
-            callback(newValue, oldValue);
-        });
-    }
-
-    /**
-     * Update value using a function
-     */
-    update(updater: (current: T) => T): void {
-        this.value = updater(this.value);
-    }
-
-    /**
-     * Connect to WebSocket
-     */
-    private connect(): void {
-        if (typeof window === 'undefined') return;
-
-        const url = resolveSharedStateWebSocketUrl(this.wsUrl);
-        this.ws = new WebSocket(url);
-
-        this.ws.addEventListener('open', () => {
-            this.subscribe();
-
-            // Send pending updates
-            while (this.pendingUpdates.length > 0) {
-                const value = this.pendingUpdates.shift();
-                this.sendToServer(value!);
-            }
-        });
-
-        this.ws.addEventListener('message', (event) => {
-            this.handleMessage(event.data);
-        });
-
-        this.ws.addEventListener('close', () => {
-            // Reconnect after delay
-            setTimeout(() => this.connect(), 1000);
-        });
-
-        this.ws.addEventListener('error', (error) => {
-            console.error('[SharedState] WebSocket error:', error);
-        });
-    }
-
-    /**
-     * Subscribe to server state
-     */
-    private subscribe(): void {
-        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
-
-        this.ws.send(JSON.stringify({
-            type: 'state:subscribe',
-            key: this.key
-        }));
-    }
-
-    /**
-     * Handle message from server
-     */
-    private handleMessage(data: string): void {
-        try {
-            const msg = JSON.parse(data) as StateMessage;
-
-            if (msg.key !== this.key) return;
-
-            if (msg.type === 'state:init' || msg.type === 'state:update') {
-                // Update local state without sending back to server
-                this.localState.value = msg.value;
-            }
-        } catch (error) {
-            // Ignore parse errors (could be HMR messages)
-        }
-    }
-
-    /**
-     * Send value to server
-     */
-    private sendToServer(value: T): void {
-        if (!this.ws) return;
-
-        if (this.ws.readyState !== WebSocket.OPEN) {
-            // Queue update for when connection is ready
-            this.pendingUpdates.push(value);
-            return;
-        }
-
-        this.ws.send(JSON.stringify({
-            type: 'state:change',
-            key: this.key,
-            value
-        }));
-    }
-
-    /**
-     * Disconnect
-     */
-    disconnect(): void {
-        if (this.ws) {
-            this.ws.close();
-            this.ws = null;
-        }
-    }
-
-    /**
-     * Destroy state and cleanup
-     */
-    destroy(): void {
-        this.disconnect();
-        this.localState.destroy();
-    }
-}
-
-/**
- * Create a shared state that syncs with elit-server
- */
-export function createSharedState<T>(
-    key: string,
-    defaultValue: T,
-    wsUrl?: string
-): SharedState<T> {
-    return new SharedState(key, defaultValue, wsUrl);
-}
-
-/**
- * Shared State Manager for managing multiple shared states
- */
-class SharedStateManager {
-    private states = new Map<string, SharedState<any>>();
-
-    /**
-     * Create or get a shared state
-     */
-    create<T>(key: string, defaultValue: T, wsUrl?: string): SharedState<T> {
-        if (this.states.has(key)) {
-            return this.states.get(key) as SharedState<T>;
-        }
-
-        const state = new SharedState<T>(key, defaultValue, wsUrl);
-        this.states.set(key, state);
-        return state;
-    }
-
-    /**
-     * Get existing state
-     */
-    get<T>(key: string): SharedState<T> | undefined {
-        return this.states.get(key) as SharedState<T>;
-    }
-
-    /**
-     * Delete a state
-     */
-    delete(key: string): boolean {
-        const state = this.states.get(key);
-        if (state) {
-            state.destroy();
-            return this.states.delete(key);
-        }
-        return false;
-    }
-
-    /**
-     * Clear all states
-     */
-    clear(): void {
-        this.states.forEach(state => state.destroy());
-        this.states.clear();
-    }
-}
-
-// Export singleton instance
-export const sharedStateManager = new SharedStateManager();
-
-// ===== Reactive Rendering Helpers =====
-
-// Helper function to schedule RAF updates (reused in reactive and reactiveAs)
-const scheduleRAFUpdate = (rafId: number | null, updateFn: () => void): number => {
-    rafId && cancelAnimationFrame(rafId);
-    return requestAnimationFrame(() => {
-        updateFn();
-    });
-};
-
-// Helper function to render content to fragment (reused in reactive and reactiveAs)
-const renderToFragment = (content: VNode | Child | Child[], isVNode?: boolean): DocumentFragment => {
-    const fragment = document.createDocumentFragment();
-
-    if (Array.isArray(content)) {
-        // Handle array of children
-        for (const child of content) {
-            dom.renderToDOM(child, fragment);
-        }
-    } else if (isVNode && content && typeof content === 'object' && 'tagName' in content) {
-        const { children } = content as VNode;
-        for (const child of children) {
-            dom.renderToDOM(child, fragment);
-        }
-    } else {
-        dom.renderToDOM(content, fragment);
-    }
-
-    return fragment;
-};
-
-// Helper function to update element props (reused in reactive)
-const updateElementProps = (element: HTMLElement | SVGElement, props: Props): void => {
-    for (const key in props) {
-        const value = props[key];
-        if (key === 'ref') continue;
-
-        if (key === 'class' || key === 'className') {
-            (element as HTMLElement).className = Array.isArray(value) ? value.join(' ') : (value || '');
-        } else if (key === 'style' && typeof value === 'object') {
-            const s = (element as HTMLElement).style;
-            for (const k in value) (s as any)[k] = value[k];
-        } else if (key.startsWith('on')) {
-            (element as any)[key.toLowerCase()] = value;
-        } else if (value != null && value !== false) {
-            element.setAttribute(key, String(value === true ? '' : value));
-        } else {
-            element.removeAttribute(key);
-        }
-    }
-};
-
-// Reactive element helpers
-export const reactive = <T>(state: State<T>, renderFn: (value: T) => VNode | Child | Child[]): VNode => {
-    let rafId: number | null = null;
-    let elementRef: HTMLElement | SVGElement | null = null;
-    let placeholder: Comment | null = null;
-    let isInDOM = true;
-
-    const initialResult = renderFn(state.value);
-    const isVNodeResult = initialResult && typeof initialResult === 'object' && 'tagName' in initialResult;
-    const initialIsNull = initialResult == null || initialResult === false;
-
-    const updateElement = () => {
-        if (!elementRef && !placeholder) return;
-
-        const newResult = renderFn(state.value);
-        const resultIsNull = newResult == null || newResult === false;
-
-        if (resultIsNull) {
-            if (isInDOM && elementRef) {
-                placeholder = document.createComment('reactive');
-                elementRef.parentNode?.replaceChild(placeholder, elementRef);
-                isInDOM = false;
-            }
-        } else {
-            if (!isInDOM && placeholder && elementRef) {
-                placeholder.parentNode?.replaceChild(elementRef, placeholder);
-                placeholder = null;
-                isInDOM = true;
-            }
-
-            if (elementRef) {
-                const isCurrentVNode = !!(isVNodeResult && newResult && typeof newResult === 'object' && 'tagName' in newResult);
-                if (isCurrentVNode) {
-                    const { props } = newResult as VNode;
-                    updateElementProps(elementRef, props);
-                }
-                const fragment = renderToFragment(newResult as any, isCurrentVNode);
-                elementRef.textContent = '';
-                elementRef.appendChild(fragment);
-                dom.getElementCache().set(elementRef, true);
-            }
-        }
-    };
-
-    state.subscribe(() => {
-        rafId = scheduleRAFUpdate(rafId, () => {
-            updateElement();
-            rafId = null;
-        });
-    });
-
-    const refCallback = (el: HTMLElement | SVGElement) => {
-        elementRef = el;
-        if (initialIsNull && el.parentNode) {
-            placeholder = document.createComment('reactive');
-            el.parentNode.replaceChild(placeholder, el);
-            isInDOM = false;
-        }
-    };
-
-    if (isVNodeResult) {
-        const vnode = initialResult as VNode;
-        return {
-            tagName: vnode.tagName,
-            props: { ...vnode.props, ref: refCallback },
-            children: vnode.children
-        };
-    }
-
-    // Handle array result - wrap in fragment-like VNode
-    const initialChildren = Array.isArray(initialResult) ? initialResult : [initialResult];
-
-    // Use span with display: contents as wrapper (doesn't affect layout)
-    return { tagName: 'span', props: { ref: refCallback, style: { display: 'contents' } }, children: initialChildren };
-};
-
-// Reactive element with custom wrapper tag
-export const reactiveAs = <T>(
-    tagName: string,
-    state: State<T>,
-    renderFn: (value: T) => VNode | Child | Child[],
-    props: Props = {}
-): VNode => {
-    let rafId: number | null = null;
-    let elementRef: HTMLElement | SVGElement | null = null;
-
-    state.subscribe(() => {
-        rafId = scheduleRAFUpdate(rafId, () => {
-            if (elementRef) {
-                const newResult = renderFn(state.value);
-
-                if (newResult == null || newResult === false) {
-                    (elementRef as HTMLElement).style.display = 'none';
-                    elementRef.textContent = '';
-                } else {
-                    (elementRef as HTMLElement).style.display = '';
-                    const fragment = renderToFragment(newResult as any, false);
-                    elementRef.textContent = '';
-                    elementRef.appendChild(fragment);
-                }
-                dom.getElementCache().set(elementRef, true);
-            }
-            rafId = null;
-        });
-    });
-
-    const refCallback = (el: HTMLElement | SVGElement) => {
-        elementRef = el;
-    };
-
-    const initialResult = renderFn(state.value);
-    const initialChildren = Array.isArray(initialResult) ? initialResult : [initialResult];
-
-    return { tagName, props: { ...props, ref: refCallback }, children: initialChildren };
-};
-
-export const text = (state: State<any> | any): VNode | string =>
-    (state && state.value !== undefined)
-        ? reactive(state, v => ({ tagName: 'span', props: {}, children: [String(v)] }))
-        : String(state);