round-core 0.0.1

package/src/runtime/lifecycle.js

@@ -0,0 +1,142 @@
+import { reportErrorSafe } from './error-reporter.js';
+
+const componentStack = [];
+
+export function getCurrentComponent() {
+    return componentStack[componentStack.length - 1];
+}
+
+export function runInContext(componentInstance, fn) {
+    componentStack.push(componentInstance);
+    try {
+        return fn();
+    } finally {
+        componentStack.pop();
+    }
+}
+
+export function createComponentInstance() {
+    return {
+        mountHooks: [],
+        unmountHooks: [],
+        updateHooks: [],
+        nodes: [],
+        isMounted: false,
+        mountTimerId: null
+    };
+}
+
+export function onMount(fn) {
+    const component = getCurrentComponent();
+    if (component) {
+        component.mountHooks.push(fn);
+    } else {
+        setTimeout(() => {
+            try {
+                fn();
+            } catch (e) {
+                reportErrorSafe(e, { phase: 'onMount' });
+            }
+        }, 0);
+    }
+}
+
+export function onUnmount(fn) {
+    const component = getCurrentComponent();
+    if (component) {
+        component.unmountHooks.push(fn);
+    }
+}
+
+export const onCleanup = onUnmount;
+
+export function onUpdate(fn) {
+    const component = getCurrentComponent();
+    if (component) {
+        component.updateHooks.push(fn);
+    }
+}
+
+export function mountComponent(component) {
+    if (component.isMounted) return;
+
+    try {
+        const root = component?.nodes?.[0];
+        if (root && root instanceof Node && root.isConnected === false) {
+            return;
+        }
+    } catch {
+    }
+
+    component.isMounted = true;
+    component.mountHooks.forEach(hook => {
+        try {
+            const cleanup = hook();
+            if (typeof cleanup === 'function') {
+                component.unmountHooks.push(cleanup);
+            }
+        } catch (e) {
+            reportErrorSafe(e, { phase: 'mount', component: component.name ?? null });
+        }
+    });
+}
+
+export function unmountComponent(component) {
+    if (!component.isMounted) return;
+
+    if (component.mountTimerId != null) {
+        try {
+            clearTimeout(component.mountTimerId);
+        } catch {
+        }
+        component.mountTimerId = null;
+    }
+
+    component.isMounted = false;
+    component.unmountHooks.forEach(hook => {
+        try {
+            hook();
+        } catch (e) {
+            reportErrorSafe(e, { phase: 'unmount', component: component.name ?? null });
+        }
+    });
+}
+
+export function triggerUpdate(component) {
+    if (!component.isMounted) return;
+    component.updateHooks.forEach(hook => {
+        try {
+            hook();
+        } catch (e) {
+            reportErrorSafe(e, { phase: 'update', component: component.name ?? null });
+        }
+    });
+}
+
+const observer = (typeof MutationObserver !== 'undefined')
+    ? new MutationObserver((mutations) => {
+        mutations.forEach(mutation => {
+            if (mutation.removedNodes.length > 0) {
+                mutation.removedNodes.forEach(node => {
+                    if (node._componentInstance) {
+                        unmountComponent(node._componentInstance);
+                    }
+                    cleanupNodeRecursively(node);
+                });
+            }
+        });
+    })
+    : null;
+
+function cleanupNodeRecursively(node) {
+    if (node._componentInstance) {
+        unmountComponent(node._componentInstance);
+    }
+    node.childNodes.forEach(cleanupNodeRecursively);
+}
+
+export function initLifecycleRoot(rootNode) {
+    if (!rootNode) return;
+    if (!observer) return;
+    observer.observe(rootNode, { childList: true, subtree: true });
+}

package/src/runtime/markdown.js

@@ -0,0 +1,72 @@
+import { signal } from './signals.js';
+import { onMount } from './lifecycle.js';
+import { createElement } from './dom.js';
+import { marked } from 'marked';
+import { reportErrorSafe } from './error-reporter.js';
+
+const mdLoaders = (typeof import.meta !== 'undefined' && typeof import.meta.glob === 'function')
+    ? import.meta.glob('/src/**/*.md', { query: '?raw', import: 'default' })
+    : {};
+
+export function Markdown(props = {}) {
+    const html = signal('');
+
+    const parse = (md) => {
+        try {
+            return marked.parse(md ?? '');
+        } catch {
+            return '';
+        }
+    };
+
+    if (typeof props.content === 'string') {
+        html(parse(props.content));
+    }
+
+    onMount(async () => {
+        if (typeof props.src !== 'string') return;
+
+        const base = typeof props.base === 'string' ? props.base : '/src';
+        const resolved = props.src.startsWith('./') ? (base + props.src.slice(1)) : props.src;
+
+        const loader = mdLoaders[resolved];
+        if (typeof loader === 'function') {
+            try {
+                const text = await loader();
+                html(parse(text ?? ''));
+                return;
+            } catch (e) {
+                reportErrorSafe(e instanceof Error ? e : new Error(`Failed to load markdown: ${resolved}`), { phase: 'markdown.load', component: 'Markdown' });
+                html('');
+                return;
+            }
+        }
+
+        try {
+            const r = await fetch(resolved);
+            if (!r.ok) {
+                reportErrorSafe(new Error(`Markdown not found: ${resolved} (HTTP ${r.status})`), { phase: 'markdown.fetch', component: 'Markdown' });
+                html('');
+                return;
+            }
+            const text = await r.text();
+
+            const looksLikeHtml = /^\s*<!doctype\s+html\b|^\s*<html\b/i.test(text);
+            if (looksLikeHtml) {
+                reportErrorSafe(new Error(`Markdown not found (served HTML fallback): ${resolved}`), { phase: 'markdown.fetch', component: 'Markdown' });
+                html('');
+                return;
+            }
+            html(parse(text));
+        } catch (e) {
+            reportErrorSafe(e instanceof Error ? e : new Error(`Failed to fetch markdown: ${resolved}`), { phase: 'markdown.fetch', component: 'Markdown' });
+            html('');
+        }
+    });
+
+    const className = props.className ?? props.theme ?? '';
+    return createElement('div', {
+        className,
+        dangerouslySetInnerHTML: () => ({ __html: html() })
+    });
+}

package/src/runtime/router.js

@@ -0,0 +1,371 @@
+import { signal, effect } from './signals.js';
+import { createElement } from './dom.js';
+
+const hasWindow = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+const ROUTING_TRAILING_SLASH = (typeof __ROUND_ROUTING_TRAILING_SLASH__ !== 'undefined')
+    ? Boolean(__ROUND_ROUTING_TRAILING_SLASH__)
+    : true;
+
+const currentPath = signal(hasWindow ? window.location.pathname : '/');
+let listenerInitialized = false;
+
+let lastPathEvaluated = null;
+let hasMatchForPath = false;
+
+const pathHasMatch = signal(false);
+const pathEvalReady = signal(true);
+
+let defaultNotFoundComponent = null;
+let autoNotFoundMounted = false;
+let userProvidedNotFound = false;
+
+function ensureListener() {
+    if (!hasWindow || listenerInitialized) return;
+    listenerInitialized = true;
+
+    mountAutoNotFound();
+
+    window.addEventListener('popstate', () => {
+        currentPath(window.location.pathname);
+    });
+}
+
+export function getPathname() {
+    return normalizePathname(currentPath());
+}
+
+export function usePathname() {
+    return () => normalizePathname(currentPath());
+}
+
+export function getLocation() {
+    if (!hasWindow) {
+        return { pathname: normalizePathname('/'), search: '', hash: '' };
+    }
+    return {
+        pathname: normalizePathname(window.location.pathname),
+        search: window.location.search ?? '',
+        hash: window.location.hash ?? ''
+    };
+}
+
+export function useLocation() {
+    return () => {
+        const pathname = normalizePathname(currentPath());
+        if (!hasWindow) return { pathname, search: '', hash: '' };
+        return { pathname, search: window.location.search ?? '', hash: window.location.hash ?? '' };
+    };
+}
+
+export function getRouteReady() {
+    const pathname = normalizePathname(currentPath());
+    return Boolean(pathEvalReady()) && lastPathEvaluated === pathname;
+}
+
+export function useRouteReady() {
+    return () => {
+        const pathname = normalizePathname(currentPath());
+        return Boolean(pathEvalReady()) && lastPathEvaluated === pathname;
+    };
+}
+
+export function getIsNotFound() {
+    const pathname = normalizePathname(currentPath());
+    if (!(Boolean(pathEvalReady()) && lastPathEvaluated === pathname)) return false;
+    return !Boolean(pathHasMatch());
+}
+
+export function useIsNotFound() {
+    return () => {
+        const pathname = normalizePathname(currentPath());
+        if (!(Boolean(pathEvalReady()) && lastPathEvaluated === pathname)) return false;
+        return !Boolean(pathHasMatch());
+    };
+}
+
+function mountAutoNotFound() {
+    if (!hasWindow || autoNotFoundMounted) return;
+    autoNotFoundMounted = true;
+
+    const host = document.getElementById('app') ?? document.body;
+    const root = document.createElement('div');
+    root.setAttribute('data-round-auto-notfound', '1');
+    host.appendChild(root);
+
+    const view = createElement('span', { style: { display: 'contents' } }, () => {
+        if (userProvidedNotFound) return null;
+
+        const pathname = normalizePathname(currentPath());
+        const ready = pathEvalReady();
+        const hasMatch = pathHasMatch();
+
+        if (!ready) return null;
+        if (lastPathEvaluated !== pathname) return null;
+        if (hasMatch) return null;
+
+        const Comp = defaultNotFoundComponent;
+        if (typeof Comp === 'function') {
+            return createElement(Comp, { pathname });
+        }
+
+        return createElement('div', { style: { padding: '16px' } },
+            createElement('h1', null, '404'),
+            createElement('p', null, 'Page not found: ', pathname)
+        );
+    });
+
+    root.appendChild(view);
+}
+
+export function navigate(to, options = {}) {
+    if (!hasWindow) return;
+    ensureListener();
+
+    const normalizedTo = normalizeTo(to);
+    const replace = Boolean(options.replace);
+    if (replace) window.history.replaceState({}, '', normalizedTo);
+    else window.history.pushState({}, '', normalizedTo);
+
+    currentPath(window.location.pathname);
+}
+
+function applyHead({ title, meta, links, icon, favicon }) {
+    if (!hasWindow) return;
+
+    if (typeof title === 'string') {
+        document.title = title;
+    }
+
+    document.querySelectorAll('[data-round-head="1"]').forEach((n) => n.remove());
+
+    const iconHref = icon ?? favicon;
+    if (typeof iconHref === 'string' && iconHref.length) {
+        const el = document.createElement('link');
+        el.setAttribute('data-round-head', '1');
+        el.setAttribute('rel', 'icon');
+        el.setAttribute('href', iconHref);
+        document.head.appendChild(el);
+    }
+
+    if (Array.isArray(links)) {
+        links.forEach((l) => {
+            if (!l || typeof l !== 'object') return;
+            const el = document.createElement('link');
+            el.setAttribute('data-round-head', '1');
+            Object.entries(l).forEach(([k, v]) => {
+                if (v === null || v === undefined) return;
+                el.setAttribute(k, String(v));
+            });
+            document.head.appendChild(el);
+        });
+    }
+
+    if (Array.isArray(meta)) {
+        meta.forEach((entry) => {
+            if (!entry) return;
+            const el = document.createElement('meta');
+            el.setAttribute('data-round-head', '1');
+
+            if (Array.isArray(entry) && entry.length >= 2) {
+                const [name, content] = entry;
+                if (typeof name === 'string') el.setAttribute('name', name);
+                el.setAttribute('content', String(content ?? ''));
+            } else if (typeof entry === 'object') {
+                Object.entries(entry).forEach(([k, v]) => {
+                    if (v === null || v === undefined) return;
+                    el.setAttribute(k, String(v));
+                });
+            } else {
+                return;
+            }
+
+            document.head.appendChild(el);
+        });
+    } else if (meta && typeof meta === 'object') {
+        Object.entries(meta).forEach(([name, content]) => {
+            if (typeof name !== 'string') return;
+            const el = document.createElement('meta');
+            el.setAttribute('data-round-head', '1');
+            el.setAttribute('name', name);
+            el.setAttribute('content', String(content ?? ''));
+            document.head.appendChild(el);
+        });
+    }
+}
+
+export function startHead(_head) {
+    return _head;
+}
+
+function splitUrl(url) {
+    const str = String(url ?? '');
+    const hashIdx = str.indexOf('#');
+    const queryIdx = str.indexOf('?');
+    const cutIdx = (hashIdx === -1)
+        ? queryIdx
+        : (queryIdx === -1 ? hashIdx : Math.min(hashIdx, queryIdx));
+
+    if (cutIdx === -1) return { path: str, suffix: '' };
+    return { path: str.slice(0, cutIdx), suffix: str.slice(cutIdx) };
+}
+
+function normalizePathname(p) {
+    let pathname = String(p ?? '/');
+    if (!pathname.startsWith('/')) pathname = '/' + pathname;
+    if (pathname.length > 1) {
+        if (ROUTING_TRAILING_SLASH) {
+            if (!pathname.endsWith('/')) pathname += '/';
+        } else {
+            if (pathname.endsWith('/')) pathname = pathname.slice(0, -1);
+        }
+    }
+    return pathname;
+}
+
+function normalizeTo(to) {
+    const { path, suffix } = splitUrl(to);
+    if (!path.startsWith('/')) return String(to ?? '');
+    return normalizePathname(path) + suffix;
+}
+
+function matchRoute(route, pathname) {
+    const r = normalizePathname(route);
+    const p = normalizePathname(pathname);
+    return r === p;
+}
+
+function beginPathEvaluation(pathname) {
+    if (pathname !== lastPathEvaluated) {
+        lastPathEvaluated = pathname;
+        hasMatchForPath = false;
+        pathHasMatch(false);
+
+        pathEvalReady(false);
+        setTimeout(() => {
+            if (lastPathEvaluated !== pathname) return;
+            pathEvalReady(true);
+        }, 0);
+    }
+}
+
+export function setNotFound(Component) {
+    defaultNotFoundComponent = Component;
+}
+
+export function Route(props = {}) {
+    ensureListener();
+
+    return createElement('span', { style: { display: 'contents' } }, () => {
+        const pathname = normalizePathname(currentPath());
+        beginPathEvaluation(pathname);
+        const route = props.route ?? '/';
+        if (!matchRoute(route, pathname)) return null;
+
+        hasMatchForPath = true;
+        pathHasMatch(true);
+        const mergedHead = (props.head && typeof props.head === 'object') ? props.head : {};
+        const meta = props.description
+            ? ([{ name: 'description', content: String(props.description) }].concat(mergedHead.meta ?? props.meta ?? []))
+            : (mergedHead.meta ?? props.meta);
+        const links = mergedHead.links ?? props.links;
+        const title = mergedHead.title ?? props.title;
+        const icon = mergedHead.icon ?? props.icon;
+        const favicon = mergedHead.favicon ?? props.favicon;
+
+        applyHead({ title, meta, links, icon, favicon });
+        return props.children;
+    });
+}
+
+export function Page(props = {}) {
+    ensureListener();
+
+    return createElement('span', { style: { display: 'contents' } }, () => {
+        const pathname = normalizePathname(currentPath());
+        beginPathEvaluation(pathname);
+        const route = props.route ?? '/';
+        if (!matchRoute(route, pathname)) return null;
+
+        hasMatchForPath = true;
+        pathHasMatch(true);
+        const mergedHead = (props.head && typeof props.head === 'object') ? props.head : {};
+        const meta = props.description
+            ? ([{ name: 'description', content: String(props.description) }].concat(mergedHead.meta ?? props.meta ?? []))
+            : (mergedHead.meta ?? props.meta);
+        const links = mergedHead.links ?? props.links;
+        const title = mergedHead.title ?? props.title;
+        const icon = mergedHead.icon ?? props.icon;
+        const favicon = mergedHead.favicon ?? props.favicon;
+
+        applyHead({ title, meta, links, icon, favicon });
+        return props.children;
+    });
+}
+
+export function NotFound(props = {}) {
+    ensureListener();
+
+    userProvidedNotFound = true;
+
+    return createElement('span', { style: { display: 'contents' } }, () => {
+        const pathname = normalizePathname(currentPath());
+        beginPathEvaluation(pathname);
+
+        const ready = pathEvalReady();
+        const hasMatch = pathHasMatch();
+        if (!ready) return null;
+        if (lastPathEvaluated !== pathname) return null;
+
+        if (hasMatch) return null;
+
+        const Comp = props.component ?? defaultNotFoundComponent;
+        if (typeof Comp === 'function') {
+            return createElement(Comp, { pathname });
+        }
+
+        if (props.children !== undefined) return props.children;
+
+        return createElement('div', { style: { padding: '16px' } },
+            createElement('h1', null, '404'),
+            createElement('p', null, 'Page not found: ', pathname)
+        );
+    });
+}
+
+export function Link(props = {}) {
+    ensureListener();
+
+    const rawHref = props.href ?? props.to ?? '#';
+    const href = spaNormalizeHref(rawHref);
+
+     const spa = props.spa !== undefined ? Boolean(props.spa) : true;
+     const reload = Boolean(props.reload);
+
+    const onClick = (e) => {
+        if (typeof props.onClick === 'function') props.onClick(e);
+        if (e.defaultPrevented) return;
+
+        // Classic navigation: allow the browser to reload.
+        if (!spa || reload) return;
+
+        if (e.button !== 0) return;
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+
+        e.preventDefault();
+        navigate(href);
+    };
+
+    const { children, to, ...rest } = props;
+    const normalizedChildren = Array.isArray(children)
+        ? children
+        : (children === undefined || children === null ? [] : [children]);
+
+    return createElement('a', { ...rest, href, onClick }, ...normalizedChildren);
+}
+
+function spaNormalizeHref(href) {
+    const str = String(href ?? '#');
+    if (!str.startsWith('/')) return str;
+    return normalizeTo(str);
+}