@emberkit/core 0.1.2-alpha.0

package/dist/forms/mutations.js

@@ -0,0 +1,258 @@
+export function createAction(handler, options) {
+    return async (variables, context) => {
+        let optimisticData;
+        try {
+            if (options?.onMutate) {
+                optimisticData = await options.onMutate(variables);
+            }
+            const data = await handler(variables, {
+                request: context?.request ?? new Request('http://localhost'),
+                params: context?.params ?? {},
+                query: context?.query ?? new URLSearchParams(),
+            });
+            options?.onSuccess?.(data, variables);
+            return {
+                data,
+                error: null,
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            };
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            options?.onError?.(error, variables);
+            return {
+                data: null,
+                error: error.message,
+                status: 500,
+                headers: { 'Content-Type': 'application/json' },
+            };
+        }
+        finally {
+            options?.onSettled?.(optimisticData);
+        }
+    };
+}
+export function createMutation(handler, options) {
+    let state = {
+        data: null,
+        error: null,
+        status: 'idle',
+        isPending: false,
+        isSuccess: false,
+        isError: false,
+    };
+    const listeners = new Set();
+    const notify = () => {
+        listeners.forEach((fn) => fn(state));
+    };
+    const mutate = async (variables) => {
+        state = {
+            data: null,
+            error: null,
+            status: 'pending',
+            isPending: true,
+            isSuccess: false,
+            isError: false,
+        };
+        notify();
+        try {
+            let optimisticData;
+            if (options?.onMutate) {
+                optimisticData = await options.onMutate(variables);
+            }
+            const data = await handler(variables, {
+                request: new Request('http://localhost'),
+                params: {},
+                query: new URLSearchParams(),
+            });
+            state = {
+                data,
+                error: null,
+                status: 'success',
+                isPending: false,
+                isSuccess: true,
+                isError: false,
+            };
+            notify();
+            options?.onSuccess?.(data, variables);
+            options?.onSettled?.(data);
+            return { data, error: null, status: 200 };
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            state = {
+                data: null,
+                error,
+                status: 'error',
+                isPending: false,
+                isSuccess: false,
+                isError: true,
+            };
+            notify();
+            options?.onError?.(error, variables);
+            options?.onSettled?.(undefined, error);
+            return { data: null, error: error.message, status: 500 };
+        }
+    };
+    const subscribe = (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    };
+    const getState = () => state;
+    const reset = () => {
+        state = {
+            data: null,
+            error: null,
+            status: 'idle',
+            isPending: false,
+            isSuccess: false,
+            isError: false,
+        };
+        notify();
+    };
+    return { mutate, subscribe, getState, reset };
+}
+export async function handleAction(handler, request) {
+    let variables = {};
+    if (request.method === 'POST' || request.method === 'PUT' || request.method === 'PATCH') {
+        const contentType = request.headers.get('Content-Type') ?? '';
+        if (contentType.includes('application/json')) {
+            variables = await request.json();
+        }
+        else if (contentType.includes('application/x-www-form-urlencoded')) {
+            const formData = await request.formData();
+            for (const [key, value] of formData.entries()) {
+                variables[key] = value;
+            }
+        }
+        else {
+            variables = await request.text().then((t) => JSON.parse(t)).catch(() => ({}));
+        }
+    }
+    else if (request.method === 'GET') {
+        const url = new URL(request.url);
+        for (const [key, value] of url.searchParams.entries()) {
+            variables[key] = value;
+        }
+    }
+    const url = new URL(request.url);
+    const params = {};
+    const segments = url.pathname.split('/').filter(Boolean);
+    for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        if (segment.startsWith(':') || segment.startsWith('[')) {
+            const paramName = segment.replace(/^[:[\]]+/g, '');
+            params[paramName] = segments[i + 1] ?? '';
+        }
+    }
+    const context = {
+        request,
+        params,
+        query: url.searchParams,
+    };
+    try {
+        const data = await handler(variables, context);
+        return Response.json({ data }, {
+            status: 200,
+            headers: { 'X-Action': 'success' },
+        });
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : 'Action failed';
+        return Response.json({ error: message }, {
+            status: 500,
+            headers: { 'X-Action': 'error' },
+        });
+    }
+}
+export function createActionHandler(handler) {
+    return async (request) => {
+        return handleAction(handler, request);
+    };
+}
+export const mutationCache = new Map();
+export function getCachedMutation(key) {
+    return mutationCache.get(key);
+}
+export function setCachedMutation(key, result) {
+    mutationCache.set(key, result);
+}
+export function invalidateMutation(key) {
+    mutationCache.delete(key);
+}
+export function clearMutationCache() {
+    mutationCache.clear();
+}
+export function useMutation(action, options) {
+    let state = {
+        data: null,
+        error: null,
+        status: 'idle',
+        isPending: false,
+        isSuccess: false,
+        isError: false,
+    };
+    const listeners = new Set();
+    const notify = () => listeners.forEach((fn) => fn(state));
+    const mutate = async (variables) => {
+        state = {
+            data: null,
+            error: null,
+            status: 'pending',
+            isPending: true,
+            isSuccess: false,
+            isError: false,
+        };
+        notify();
+        try {
+            if (options?.onMutate) {
+                await options.onMutate(variables);
+            }
+            const data = await action(variables, {
+                request: new Request('http://localhost'),
+                params: {},
+                query: new URLSearchParams(),
+            });
+            state = {
+                data,
+                error: null,
+                status: 'success',
+                isPending: false,
+                isSuccess: true,
+                isError: false,
+            };
+            notify();
+            options?.onSuccess?.(data, variables);
+            options?.onSettled?.(data);
+            return { data, error: null, status: 200 };
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            state = {
+                data: null,
+                error,
+                status: 'error',
+                isPending: false,
+                isSuccess: false,
+                isError: true,
+            };
+            notify();
+            options?.onError?.(error, variables);
+            options?.onSettled?.(undefined, error);
+            return { data: null, error: error.message, status: 500 };
+        }
+    };
+    const reset = () => {
+        state = {
+            data: null,
+            error: null,
+            status: 'idle',
+            isPending: false,
+            isSuccess: false,
+            isError: false,
+        };
+        notify();
+    };
+    return { mutate, state, reset };
+}

package/dist/hmr/client.js

@@ -0,0 +1,84 @@
+import { registerHotModule, getHotModule, } from './types.js';
+export function createHotAPI(context, moduleId, moduleUrl) {
+    const hotModule = {
+        id: moduleId,
+        url: moduleUrl,
+        needsAccept: false,
+        acceptCallbacks: [],
+        disposeCallbacks: [],
+    };
+    registerHotModule(context, hotModule);
+    return {
+        accept(deps, callback) {
+            if (typeof deps === 'function') {
+                callback = deps;
+                deps = undefined;
+            }
+            hotModule.needsAccept = true;
+            if (callback) {
+                hotModule.acceptCallbacks.push(callback);
+            }
+            if (deps && typeof deps === 'string') {
+                import(deps);
+            }
+            else if (Array.isArray(deps)) {
+                Promise.all(deps.map((d) => import(d)));
+            }
+        },
+        decline() {
+            import.meta.hot = undefined;
+        },
+        dispose(callback) {
+            hotModule.disposeCallbacks.push(callback);
+        },
+        data: {},
+        on(event, callback) {
+            if (event === 'vite:beforeUpdate') {
+                const module = getHotModule(context, moduleId);
+                if (module) {
+                    module.acceptCallbacks.push(() => callback({ type: 'update' }));
+                }
+            }
+        },
+        send(event, data) {
+            console.log('[HMR] Send:', event, data);
+        },
+    };
+}
+export function setupHMRClient(context) {
+    if (typeof window === 'undefined')
+        return;
+    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${location.host}/__emberkit_hmr`;
+    const ws = new WebSocket(wsUrl);
+    ws.onopen = () => {
+        console.log('[HMR Client] Connected');
+    };
+    ws.onmessage = async (event) => {
+        try {
+            const data = JSON.parse(event.data);
+            if (data.type === 'update') {
+                await import(/* @vite-ignore */ data.url + '?t=' + Date.now());
+            }
+        }
+        catch (error) {
+            console.error('[HMR Client] Error:', error);
+        }
+    };
+    ws.onclose = () => {
+        console.log('[HMR Client] Disconnected, reconnecting...');
+        setTimeout(() => setupHMRClient(context), 1000);
+    };
+    ws.onerror = (error) => {
+        console.error('[HMR Client] Error:', error);
+    };
+    context.connections.set('main', ws);
+}
+export function cleanupHMRClient() {
+    if (typeof window === 'undefined')
+        return;
+    const ws = window.__emberkit_hmr_ws;
+    if (ws) {
+        ws.close();
+    }
+}

package/dist/hmr/index.js

@@ -0,0 +1,2 @@
+export * from './client.js';
+export * from './types.js';

package/dist/hmr/types.js

@@ -0,0 +1,133 @@
+export class HMRConnection {
+    ws = null;
+    url;
+    constructor(url) {
+        this.url = url;
+    }
+    connect(onMessage) {
+        try {
+            this.ws = new WebSocket(this.url);
+            this.ws.onopen = () => {
+                console.log('[HMR] Connected to dev server');
+            };
+            this.ws.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    onMessage(data);
+                }
+                catch {
+                    console.error('[HMR] Failed to parse message');
+                }
+            };
+            this.ws.onerror = (error) => {
+                console.error('[HMR] WebSocket error:', error);
+            };
+            this.ws.onclose = () => {
+                console.log('[HMR] Disconnected');
+                setTimeout(() => this.reconnect(onMessage), 1000);
+            };
+        }
+        catch (error) {
+            console.error('[HMR] Failed to connect:', error);
+            setTimeout(() => this.reconnect(onMessage), 1000);
+        }
+    }
+    reconnect(onMessage) {
+        console.log('[HMR] Attempting to reconnect...');
+        this.connect(onMessage);
+    }
+    send(data) {
+        if (this.ws?.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(data));
+        }
+    }
+    close() {
+        this.ws?.close();
+    }
+}
+export function createHMRContext() {
+    return {
+        connections: new Map(),
+        modules: new Map(),
+        listeners: [],
+    };
+}
+export function subscribeToHMR(context, callback) {
+    context.listeners.push(callback);
+    return () => {
+        const index = context.listeners.indexOf(callback);
+        if (index > -1) {
+            context.listeners.splice(index, 1);
+        }
+    };
+}
+export function emitHMREvent(context, event) {
+    for (const listener of context.listeners) {
+        listener(event);
+    }
+}
+export async function handleHMRMessage(context, data) {
+    const type = data.type;
+    switch (type) {
+        case 'hot':
+            await handleHotUpdate(context, data);
+            break;
+        case 'close':
+            handleClose(context);
+            break;
+        default:
+            console.warn('[HMR] Unknown message type:', type);
+    }
+}
+async function handleHotUpdate(context, data) {
+    const moduleId = data.moduleId;
+    const hotModule = context.modules.get(moduleId);
+    if (!hotModule) {
+        console.warn('[HMR] Module not found:', moduleId);
+        return;
+    }
+    for (const callback of hotModule.acceptCallbacks) {
+        try {
+            callback();
+        }
+        catch (error) {
+            console.error('[HMR] Error in accept callback:', error);
+        }
+    }
+    emitHMREvent(context, {
+        type: 'update',
+        moduleId,
+        timestamp: Date.now(),
+    });
+}
+function handleClose(context) {
+    for (const connection of context.connections.values()) {
+        connection.close();
+    }
+    context.connections.clear();
+    context.modules.clear();
+    emitHMREvent(context, {
+        type: 'disconnected',
+        timestamp: Date.now(),
+    });
+}
+export function getHotModule(context, id) {
+    return context.modules.get(id);
+}
+export function registerHotModule(context, module) {
+    context.modules.set(module.id, module);
+}
+export function disposeHotModule(context, id) {
+    const module = context.modules.get(id);
+    if (module) {
+        for (const callback of module.disposeCallbacks) {
+            try {
+                callback();
+            }
+            catch (error) {
+                console.error('[HMR] Error in dispose callback:', error);
+            }
+        }
+        context.modules.delete(id);
+    }
+}

package/dist/hydration/helpers/analyzer.js

@@ -0,0 +1,94 @@
+import { hasEventHandlers, isInteractiveTag, INTERACTIVE_ATTRIBUTES, } from '../types.js';
+export function analyzeElement(element) {
+    const { type, props } = element;
+    if (typeof type !== 'string') {
+        return null;
+    }
+    const needsHydration = isInteractiveTag(type) || hasEventHandlers(props ?? {});
+    const eventHandlers = extractEventHandlers(props ?? {});
+    const strategy = determineHydrationStrategy(type, props ?? {});
+    return {
+        selector: buildSelector(type, props ?? {}),
+        eventHandlers,
+        needsHydration,
+        strategy,
+    };
+}
+export function extractEventHandlers(props) {
+    const handlers = new Set();
+    for (const key of Object.keys(props)) {
+        if (INTERACTIVE_ATTRIBUTES.has(key)) {
+            handlers.add(key);
+        }
+    }
+    return handlers;
+}
+export function buildSelector(tagName, props) {
+    let selector = tagName.toLowerCase();
+    if (props.id && typeof props.id === 'string') {
+        selector = `#${props.id}`;
+    }
+    else if (props.class && typeof props.class === 'string') {
+        const classes = props.class.split(' ').filter(Boolean).join('.');
+        if (classes) {
+            selector = `${tagName.toLowerCase()}.${classes}`;
+        }
+    }
+    return selector;
+}
+export function determineHydrationStrategy(tagName, props) {
+    if (props['data-hydrate'] === 'false') {
+        return { type: 'none' };
+    }
+    if (props['data-hydrate'] === 'lazy') {
+        return { type: 'lazy', priority: 'low' };
+    }
+    if (props['data-hydrate'] === 'deferred') {
+        return { type: 'deferred', priority: 'low', timeout: 2000 };
+    }
+    const hasClickHandler = Object.keys(props).some((key) => key === 'onClick');
+    if (hasClickHandler) {
+        return { type: 'eager', priority: 'high' };
+    }
+    if (isInteractiveTag(tagName)) {
+        return { type: 'eager', priority: 'medium' };
+    }
+    return { type: 'none' };
+}
+export function analyzeTree(element) {
+    const elements = [];
+    let hydrationRequired = 0;
+    let hydrationSkipped = 0;
+    function traverse(node) {
+        if (!node)
+            return;
+        const analyzed = analyzeElement(node);
+        if (analyzed) {
+            elements.push(analyzed);
+            if (analyzed.needsHydration) {
+                hydrationRequired++;
+            }
+            else {
+                hydrationSkipped++;
+            }
+        }
+        const children = (node.props?.children ?? []);
+        if (Array.isArray(children)) {
+            for (const child of children) {
+                if (typeof child === 'object' && child !== null && 'type' in child) {
+                    traverse(child);
+                }
+            }
+        }
+    }
+    traverse(element);
+    return {
+        elements,
+        totalElements: elements.length,
+        hydrationRequired,
+        hydrationSkipped,
+    };
+}
+export function getHydrationCandidates(manifest, strategy) {
+    return manifest.elements.filter((el) => el.strategy.type === strategy);
+}

package/dist/hydration/helpers/hydration.js

@@ -0,0 +1,129 @@
+import { createElement } from '../../runtime/index.js';
+import { analyzeTree, getHydrationCandidates } from './analyzer.js';
+const hydrationCache = new Map();
+export async function hydrateSelective(container, element, options = {}) {
+    const root = typeof container === 'string' ? document.querySelector(container) : container;
+    if (!root || !element)
+        return;
+    const { hydrateInteractive = true, onHydrated, onError, } = options;
+    const manifest = analyzeTree(element);
+    if (!hydrateInteractive) {
+        return;
+    }
+    const candidates = getHydrationCandidates(manifest, 'eager');
+    await Promise.allSettled(candidates.map((candidate) => hydrateElement(root, candidate, element, onHydrated, onError)));
+}
+async function hydrateElement(root, candidate, element, onHydrated, onError) {
+    const cacheKey = candidate.selector;
+    if (hydrationCache.has(cacheKey)) {
+        await hydrationCache.get(cacheKey);
+        return;
+    }
+    const promise = new Promise((resolve) => {
+        const targetElement = root.querySelector(candidate.selector);
+        if (!targetElement) {
+            resolve();
+            return;
+        }
+        try {
+            attachEventHandlers(targetElement, candidate.eventHandlers);
+            if (onHydrated) {
+                onHydrated(candidate);
+            }
+            resolve();
+        }
+        catch (err) {
+            if (onError && err instanceof Error) {
+                onError(candidate, err);
+            }
+            resolve();
+        }
+    });
+    hydrationCache.set(cacheKey, promise);
+    await promise;
+}
+export function attachEventHandlers(element, handlers) {
+    for (const handler of handlers) {
+        const attribute = handler.toLowerCase();
+        const attrValue = element.getAttribute(attribute);
+        if (attrValue) {
+            try {
+                const fn = new Function('event', attrValue);
+                element.addEventListener(mapHandlerToEvent(handler), fn);
+            }
+            catch {
+                // Invalid handler, skip
+            }
+        }
+    }
+}
+function mapHandlerToEvent(handler) {
+    const mapping = {
+        onClick: 'click',
+        onMouseDown: 'mousedown',
+        onMouseUp: 'mouseup',
+        onMouseEnter: 'mouseenter',
+        onMouseLeave: 'mouseleave',
+        onFocus: 'focus',
+        onBlur: 'blur',
+        onChange: 'change',
+        onInput: 'input',
+        onSubmit: 'submit',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onKeyPress: 'keypress',
+        onScroll: 'scroll',
+        onTouchStart: 'touchstart',
+        onTouchEnd: 'touchend',
+        onTouchMove: 'touchmove',
+        onDragStart: 'dragstart',
+        onDrag: 'drag',
+        onDragEnd: 'dragend',
+        onWheel: 'wheel',
+        onAnimationStart: 'animationstart',
+        onAnimationEnd: 'animationend',
+    };
+    return mapping[handler] ?? handler.toLowerCase().replace('on', '');
+}
+export function createLazyHydration(loader, options = {}) {
+    const { fallback = createElement('div', { 'data-loading': '' }, 'Loading...'), timeout, onLoaded, onError, } = options;
+    const container = createElement('div', {
+        'data-lazy': '',
+        'data-loader': loader.toString(),
+    }, fallback);
+    if (typeof IntersectionObserver !== 'undefined') {
+        requestAnimationFrame(() => {
+            observeAndHydrate(container, loader, timeout, onLoaded, onError);
+        });
+    }
+    else {
+        loadImmediately(loader, onLoaded, onError);
+    }
+    return container;
+}
+function observeAndHydrate(container, loader, timeout, onLoaded, onError) {
+    const observer = new IntersectionObserver((entries) => {
+        if (entries[0]?.isIntersecting) {
+            observer.disconnect();
+            loadImmediately(loader, onLoaded, onError);
+        }
+    }, { rootMargin: '100px' });
+    const root = document.querySelector(`[data-lazy]`);
+    if (root) {
+        observer.observe(root);
+    }
+}
+async function loadImmediately(loader, onLoaded, onError) {
+    try {
+        const result = await loader();
+        onLoaded?.(result);
+    }
+    catch (err) {
+        if (err instanceof Error && onError) {
+            onError(err);
+        }
+    }
+}
+export function clearHydrationCache() {
+    hydrationCache.clear();
+}

package/dist/hydration/index.js

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './helpers/analyzer.js';
+export * from './helpers/hydration.js';