@emberkit/core 0.1.2-alpha.0

package/dist/router/helpers/path.js

@@ -0,0 +1,74 @@
+import { PARAM_REGEX, CATCH_ALL_REGEX } from '../types.js';
+export function normalizePath(path) {
+    const cleaned = path.replace(/^\/|\/$/g, '').replace(/\/+/g, '/') || '';
+    return '/' + cleaned;
+}
+export function pathToRegex(path) {
+    const paramNames = [];
+    let regexString = path.replace(CATCH_ALL_REGEX, (_, name) => {
+        paramNames.push(name);
+        return '(.*)';
+    });
+    regexString = regexString.replace(PARAM_REGEX, (_, name) => {
+        paramNames.push(name);
+        return '([^/]+)';
+    });
+    return {
+        pattern: new RegExp(`^${regexString}$`),
+        paramNames,
+    };
+}
+export function matchPath(pattern, path) {
+    const match = path.match(pattern);
+    if (match) {
+        return match.slice(1);
+    }
+    return null;
+}
+export function scoreRoute(routePath) {
+    let score = 100;
+    const segments = routePath.split('/').filter(Boolean);
+    score -= segments.length * 20;
+    for (const segment of segments) {
+        if (segment.startsWith(':') || segment.startsWith('*')) {
+            score -= 30;
+        }
+        else {
+            score += 10;
+        }
+    }
+    if (routePath.includes('*')) {
+        score -= 50;
+    }
+    return Math.max(0, score);
+}
+export function extractSegments(filePath) {
+    return filePath
+        .replace(/^\/|\/$/g, '')
+        .split('/')
+        .filter(Boolean);
+}
+export function segmentsToPath(segments) {
+    return '/' + segments.join('/');
+}
+export function isIndexFile(fileName) {
+    return fileName === 'index' || fileName === 'index.tsx' || fileName === 'index.ts';
+}
+export function isDynamicSegment(segment) {
+    return segment.startsWith('[') && segment.endsWith(']');
+}
+export function isCatchAll(segment) {
+    return segment.startsWith('[...') && segment.endsWith(']');
+}
+export function getParamName(segment) {
+    if (isDynamicSegment(segment)) {
+        return segment.slice(1, -1);
+    }
+    return null;
+}
+export function getCatchAllName(segment) {
+    if (isCatchAll(segment)) {
+        return segment.slice(4, -1);
+    }
+    return null;
+}

package/dist/router/helpers/route.js

@@ -0,0 +1,109 @@
+import { normalizePath, matchPath, scoreRoute, extractSegments } from './path.js';
+export function createRoute(filePath, routeDir = 'src/routes') {
+    const relativePath = filePath.replace(/\\/g, '/').replace(routeDir, '').replace(/\.(tsx|ts|jsx|js|md|mdx)$/, '');
+    if (relativePath.startsWith('/_api/') || relativePath.startsWith('_api/') || relativePath.includes('/_api/')) {
+        return null;
+    }
+    const isLayout = filePath.includes('/_layout.tsx') || filePath.includes('/_layout.ts');
+    const isError = filePath.includes('/_error.tsx') || filePath.includes('/_error.ts');
+    const isLoading = filePath.includes('/_loading.tsx') || filePath.includes('/_loading.ts');
+    let cleanPath = relativePath
+        .replace(/\/_layout$/, '')
+        .replace(/\/_layout\/index$/, '')
+        .replace(/^\/_layout/, '')
+        .replace(/\/_error$/, '')
+        .replace(/\/_loading$/, '');
+    cleanPath = cleanPath
+        .replace(/\/index$/, '')
+        .replace(/\/\[/g, '/:')
+        .replace(/\[/g, ':')
+        .replace(/\]/g, '')
+        .replace(/\.\.\./g, '');
+    if (cleanPath === '' || cleanPath === '/') {
+        return {
+            path: '/',
+            pattern: /^\/$/,
+            paramNames: [],
+            filePath,
+            fileName: filePath.split('/').pop() ?? '',
+            isLayout,
+            isError,
+            isLoading,
+            isApi: false,
+        };
+    }
+    const { pattern, paramNames } = createPatternFromPath(cleanPath);
+    return {
+        path: normalizePath(cleanPath),
+        pattern,
+        paramNames,
+        filePath,
+        fileName: filePath.split('/').pop() ?? '',
+        isLayout,
+        isError,
+        isLoading,
+        isApi: false,
+    };
+}
+function createPatternFromPath(path) {
+    const paramNames = [];
+    const segments = path.split('/').filter(Boolean);
+    const regexSegments = segments.map((segment) => {
+        if (segment.startsWith(':')) {
+            const paramName = segment.slice(1);
+            paramNames.push(paramName);
+            return '([^/]+)';
+        }
+        if (segment.startsWith('*')) {
+            return '(.*)';
+        }
+        return segment.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    });
+    return {
+        pattern: new RegExp('^/' + regexSegments.join('/') + '$'),
+        paramNames,
+    };
+}
+export function matchRoute(routes, pathname) {
+    const normalizedPath = normalizePath(pathname);
+    let bestMatch = null;
+    for (const route of routes) {
+        const paramValues = matchPath(route.pattern, normalizedPath);
+        if (paramValues !== null) {
+            const params = {};
+            for (let i = 0; i < route.paramNames.length; i++) {
+                const paramName = route.paramNames[i];
+                const paramValue = paramValues[i];
+                if (paramName !== undefined && paramValue !== undefined) {
+                    params[paramName] = paramValue;
+                }
+            }
+            const score = scoreRoute(route.path);
+            if (!bestMatch || score > bestMatch.score) {
+                bestMatch = { route, params, score };
+            }
+        }
+    }
+    return bestMatch;
+}
+export function sortRoutes(routes) {
+    return [...routes].sort((a, b) => scoreRoute(b.path) - scoreRoute(a.path));
+}
+export function findLayoutChain(routes, pathname) {
+    const normalizedPath = normalizePath(pathname);
+    const segments = extractSegments(normalizedPath);
+    const layouts = [];
+    for (let i = 0; i <= segments.length; i++) {
+        const pathPrefix = '/' + segments.slice(0, i).join('/');
+        const layout = routes.find((r) => r.isLayout &&
+            (r.path === pathPrefix || r.path === pathPrefix + '/_layout' || r.path === pathPrefix + '/index'));
+        if (layout) {
+            layouts.push(layout);
+        }
+    }
+    const rootLayout = routes.find((r) => r.isLayout && (r.path === '/' || r.path === '/_layout'));
+    if (rootLayout && !layouts.includes(rootLayout)) {
+        layouts.unshift(rootLayout);
+    }
+    return layouts;
+}

package/dist/router/index.js

@@ -0,0 +1,110 @@
+import { createRoute, matchRoute, sortRoutes, findLayoutChain } from './helpers/route.js';
+import { normalizePath } from './helpers/path.js';
+class EmberKitRouter {
+    basePath = '';
+    currentPath = '/';
+    listeners = new Set();
+    routes = [];
+    back() {
+        history.back();
+    }
+    createHref(path) {
+        return this.basePath + path;
+    }
+    createRouteParams(params) {
+        return {
+            params,
+            query: this.parseQuery(this.currentPath),
+            request: new Request(this.currentPath),
+        };
+    }
+    forward() {
+        history.forward();
+    }
+    getBasePath() {
+        return this.basePath;
+    }
+    getCurrentPath() {
+        return this.currentPath;
+    }
+    getLayouts(pathname) {
+        return findLayoutChain(this.routes, pathname);
+    }
+    getRoutes() {
+        return this.routes;
+    }
+    initialize(routes) {
+        this.routes = sortRoutes(routes);
+        this.currentPath = normalizePath(window.location.pathname);
+    }
+    match(pathname) {
+        return matchRoute(this.routes, pathname);
+    }
+    navigate(path, options) {
+        const normalizedPath = normalizePath(path);
+        if (options?.replace) {
+            history.replaceState(options.state ?? null, '', path);
+        }
+        else {
+            history.pushState(options?.state ?? null, '', path);
+        }
+        this.currentPath = normalizedPath;
+        this.notify();
+    }
+    setBasePath(path) {
+        this.basePath = path;
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    notify() {
+        const state = {
+            pathname: this.currentPath,
+            params: this.match(this.currentPath)?.params ?? {},
+            query: this.parseQuery(this.currentPath),
+        };
+        this.listeners.forEach((listener) => listener(state));
+    }
+    parseQuery(pathname) {
+        const query = {};
+        const queryIndex = pathname.indexOf('?');
+        if (queryIndex === -1) {
+            return query;
+        }
+        const queryString = pathname.slice(queryIndex + 1);
+        const pairs = queryString.split('&');
+        for (const pair of pairs) {
+            const [key, value] = pair.split('=');
+            if (!key)
+                continue;
+            const decodedKey = decodeURIComponent(key);
+            const decodedValue = decodeURIComponent(value ?? '');
+            if (query[decodedKey]) {
+                const existing = query[decodedKey];
+                if (Array.isArray(existing)) {
+                    existing.push(decodedValue);
+                }
+                else {
+                    query[decodedKey] = [existing, decodedValue];
+                }
+            }
+            else {
+                query[decodedKey] = decodedValue;
+            }
+        }
+        return query;
+    }
+}
+export const router = new EmberKitRouter();
+export function createRouter(routes) {
+    const instance = new EmberKitRouter();
+    instance.initialize(routes);
+    return instance;
+}
+export function createMemoryRouter(initialPath = '/') {
+    const instance = new EmberKitRouter();
+    instance.navigate(initialPath);
+    return instance;
+}
+export { createRoute, matchRoute, sortRoutes, findLayoutChain };

package/dist/router/types.js

@@ -0,0 +1,5 @@
+export const SPECIAL_FILES = new Set([
+    '_layout', '_error', '_loading', 'index',
+]);
+export const PARAM_REGEX = /\[([^\]]+)\]/g;
+export const CATCH_ALL_REGEX = /\[\.\.\.(\w+)\]/g;

package/dist/runtime/helpers/element.js

@@ -0,0 +1,52 @@
+export function createElement(type, props, ...children) {
+    const resolvedProps = props ?? {};
+    if (children.length > 0) {
+        const flatChildren = children.flat().filter((child) => child != null && child !== false);
+        if (flatChildren.length > 0) {
+            resolvedProps.children = flatChildren;
+        }
+    }
+    return {
+        type: type,
+        props: resolvedProps,
+    };
+}
+export function isValidElement(element) {
+    if (typeof element !== 'object' || element === null)
+        return false;
+    const obj = element;
+    return typeof obj['type'] === 'string' && typeof obj['props'] === 'object';
+}
+export function isComponent(type) {
+    return typeof type === 'function';
+}
+export function flattenChildren(children) {
+    const result = [];
+    for (const child of children) {
+        if (child == null || child === false || child === undefined)
+            continue;
+        if (typeof child === 'string' || typeof child === 'number') {
+            result.push(child);
+        }
+        else if (Array.isArray(child)) {
+            result.push(...flattenChildren(child));
+        }
+        else {
+            result.push(child);
+        }
+    }
+    return result;
+}
+export function resolveComponent(type, props) {
+    if (isComponent(type)) {
+        const result = type(props);
+        if (typeof result === 'string' || typeof result === 'number') {
+            return createElement('span', null, result);
+        }
+        if (isValidElement(result)) {
+            return result;
+        }
+        return createElement('span', null, String(result));
+    }
+    return createElement(type, props);
+}

package/dist/runtime/helpers/render.js

@@ -0,0 +1,121 @@
+const SELF_CLOSING_TAGS = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr',
+]);
+let handlerCounter = 0;
+const handlerRegistry = new Map();
+export function getHandler(id) {
+    return handlerRegistry.get(id);
+}
+export function clearHandlers() {
+    handlerRegistry.clear();
+    handlerCounter = 0;
+}
+export function renderElementToHTML(element) {
+    if (!element)
+        return '';
+    let currentType = element.type;
+    let props = element.props ?? {};
+    while (typeof currentType === 'function') {
+        try {
+            const result = currentType(props);
+            if (result && typeof result === 'object' && 'type' in result) {
+                currentType = result.type;
+                props = result.props ?? {};
+            }
+            else if (typeof result === 'string' || typeof result === 'number') {
+                return String(result);
+            }
+            else {
+                return '';
+            }
+        }
+        catch (error) {
+            return `<div style="color: red;">Error rendering component</div>`;
+        }
+    }
+    const rawChildren = props.children ?? [];
+    const children = Array.isArray(rawChildren) ? rawChildren : [rawChildren];
+    const childHtml = children
+        .map((child) => {
+        if (typeof child === 'string' || typeof child === 'number') {
+            return String(child);
+        }
+        if (typeof child === 'object' && child !== null && 'type' in child) {
+            return renderElementToHTML(child);
+        }
+        return '';
+    })
+        .join('');
+    if (currentType === 'Fragment' || currentType === 'React.Fragment') {
+        return childHtml;
+    }
+    // Handle dangerouslySetInnerHTML
+    let innerHtml = childHtml;
+    for (const [, value] of Object.entries(props)) {
+        if (typeof value === 'object' && value !== null && '__html' in value) {
+            innerHtml = String(value.__html);
+            break;
+        }
+    }
+    const attributes = Object.entries(props)
+        .filter(([key, value]) => {
+        if (key === 'children' || key === 'key')
+            return false;
+        if (typeof value === 'object' && value !== null && '__html' in value)
+            return false;
+        return true;
+    })
+        .filter(([, value]) => typeof value !== 'function' && value != null)
+        .map(([key, value]) => {
+        // Map React/JSX prop names to HTML attributes
+        if (key === 'className')
+            key = 'class';
+        if (key === 'strokeWidth' || key === 'strokeLinecap' || key === 'strokeLinejoin') {
+            key = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        }
+        if (value === true)
+            return ` ${key}`;
+        if (value === false)
+            return '';
+        return ` ${key}="${value}"`;
+    })
+        .join('');
+    // Register onClick handler as data attribute
+    const onClick = props.onClick;
+    let onclickAttr = '';
+    if (typeof onClick === 'function') {
+        const id = `ekh${++handlerCounter}`;
+        handlerRegistry.set(id, onClick);
+        onclickAttr = ` data-ekclick="${id}"`;
+    }
+    if (SELF_CLOSING_TAGS.has(currentType)) {
+        return `<${currentType}${attributes}${onclickAttr}/>`;
+    }
+    return `<${currentType}${attributes}${onclickAttr}>${innerHtml}</${currentType}>`;
+}
+export function renderToString(element) {
+    if (!element && element !== 0)
+        return '';
+    if (typeof element === 'string')
+        return element;
+    if (typeof element === 'number')
+        return String(element);
+    return renderElementToHTML(element);
+}
+export function getComponentName(type) {
+    if (typeof type === 'function') {
+        const fn = type;
+        return fn.displayName ?? fn.name ?? 'Anonymous';
+    }
+    return type;
+}
+export function createPropsProxy(props) {
+    return new Proxy(props, {
+        get(target, prop) {
+            if (prop === 'toJSON') {
+                return () => target;
+            }
+            return target[prop];
+        },
+    });
+}

package/dist/runtime/index.js

@@ -0,0 +1,132 @@
+import { renderToString, getHandler, clearHandlers } from './helpers/render.js';
+export function createElement(type, props, ...children) {
+    const resolvedProps = props ?? {};
+    const flatChildren = children.flat().filter((child) => child != null && child !== false);
+    if (flatChildren.length > 0) {
+        resolvedProps.children = flatChildren;
+    }
+    return {
+        type: type,
+        props: resolvedProps,
+    };
+}
+function attachEventHandlers(container) {
+    const elements = container.querySelectorAll('[data-ekclick]');
+    elements.forEach((el) => {
+        const id = el.getAttribute('data-ekclick');
+        if (id) {
+            const handler = getHandler(id);
+            if (handler) {
+                el.addEventListener('click', handler);
+                el.removeAttribute('data-ekclick');
+            }
+        }
+    });
+}
+function renderToTarget(layout, target, routeComponent) {
+    clearHandlers();
+    const jsxElement = {
+        type: layout,
+        props: routeComponent ? { children: [createElement(routeComponent, {})] } : {},
+    };
+    const html = renderToString(jsxElement);
+    target.innerHTML = html;
+    attachEventHandlers(target);
+}
+export function render(element, container, options) {
+    if (!element)
+        return;
+    const target = typeof container === 'string' ? document.querySelector(container) : container;
+    if (!target) {
+        throw new Error(`Container element not found: ${container}`);
+    }
+    const layout = typeof element === 'function'
+        ? element
+        : null;
+    if (!layout) {
+        const html = renderToString(element);
+        target.innerHTML = html;
+        return;
+    }
+    const routes = options?.routes;
+    if (!routes || routes.length === 0) {
+        renderToTarget(layout, target);
+        return;
+    }
+    function matchRoute(pathname) {
+        const normalized = pathname === '/' ? '/' : pathname.replace(/\/$/, '');
+        for (const route of routes) {
+            const routePath = route.path === '/' ? '/' : route.path.replace(/\/$/, '');
+            if (routePath === normalized)
+                return route;
+            if (routePath !== '/' && normalized.startsWith(routePath + '/'))
+                return route;
+            if (routePath !== '/' && routePath.includes(':')) {
+                const routeParts = routePath.split('/');
+                const pathParts = normalized.split('/');
+                if (routeParts.length === pathParts.length) {
+                    let match = true;
+                    for (let i = 0; i < routeParts.length; i++) {
+                        if (routeParts[i].startsWith(':'))
+                            continue;
+                        if (routeParts[i] !== pathParts[i]) {
+                            match = false;
+                            break;
+                        }
+                    }
+                    if (match)
+                        return route;
+                }
+            }
+        }
+        return undefined;
+    }
+    async function renderCurrentRoute() {
+        const matched = matchRoute(window.location.pathname);
+        if (matched) {
+            const mod = await matched.component();
+            renderToTarget(layout, target, mod.default);
+        }
+        else {
+            renderToTarget(layout, target);
+        }
+    }
+    renderCurrentRoute();
+    // Global link interceptor for SPA navigation
+    document.addEventListener('click', (e) => {
+        const link = e.target.closest('a');
+        if (!link)
+            return;
+        const href = link.getAttribute('href');
+        if (!href || href.startsWith('http') || href.startsWith('#') || link.target === '_blank')
+            return;
+        e.preventDefault();
+        history.pushState(null, '', href);
+        renderCurrentRoute();
+    });
+    window.addEventListener('popstate', () => {
+        renderCurrentRoute();
+    });
+    const originalPushState = history.pushState.bind(history);
+    history.pushState = function (...args) {
+        originalPushState(...args);
+        renderCurrentRoute();
+    };
+    const originalReplaceState = history.replaceState.bind(history);
+    history.replaceState = function (...args) {
+        originalReplaceState(...args);
+        renderCurrentRoute();
+    };
+}
+export function hydrate(element, container) {
+    render(element, container, { hydrate: true });
+}
+export function flushSync(fn) {
+    fn();
+}
+export function isElement(element) {
+    return (typeof element === 'object' &&
+        element !== null &&
+        'type' in element &&
+        'props' in element);
+}

package/dist/runtime/types.js

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