round-core 0.0.1

package/src/runtime/dom.js

@@ -0,0 +1,345 @@
+import { effect, untrack } from './signals.js';
+import { runInContext, createComponentInstance, mountComponent, initLifecycleRoot } from './lifecycle.js';
+import { reportErrorSafe } from './error-reporter.js';
+
+let isObserverInitialized = false;
+
+const warnedSignals = new Set();
+
+function isPromiseLike(v) {
+    return v && (typeof v === 'object' || typeof v === 'function') && typeof v.then === 'function';
+}
+
+function warnSignalDirectUsage(fn, kind) {
+    try {
+        if (typeof fn !== 'function') return;
+        if (typeof fn.peek !== 'function') return;
+        if (!('value' in fn)) return;
+        // Using signals as dynamic children/props is a supported pattern.
+        if (kind === 'child') return;
+        if (typeof kind === 'string' && kind.startsWith('prop:')) return;
+        const key = `${kind}:${fn.name ?? 'signal'}`;
+        if (warnedSignals.has(key)) return;
+        warnedSignals.add(key);
+        console.warn(`[round] Prefer {signal()} (reactive) or {signal.value} (static). Direct {signal} usage is allowed but discouraged.`);
+    } catch {
+    }
+}
+
+export function createElement(tag, props = {}, ...children) {
+    if (typeof tag === 'function') {
+        const componentInstance = createComponentInstance();
+        const componentName = tag?.name ?? 'Anonymous';
+        componentInstance.name = componentName;
+
+        let node = runInContext(componentInstance, () => {
+            const componentProps = { ...props, children };
+            try {
+                const res = untrack(() => tag(componentProps));
+                if (isPromiseLike(res)) throw res;
+                return res;
+            } catch (e) {
+                if (isPromiseLike(e)) throw e;
+                reportErrorSafe(e, { phase: 'component.render', component: componentName });
+                return createElement('div', { style: { padding: '16px' } }, `Error in ${componentName}`);
+            }
+        });
+
+        if (Array.isArray(node)) {
+            const wrapper = document.createElement('span');
+            wrapper.style.display = 'contents';
+            node.forEach(n => appendChild(wrapper, n));
+            node = wrapper;
+        }
+
+        if (node instanceof Node) {
+            node._componentInstance = componentInstance;
+            componentInstance.nodes.push(node);
+
+            componentInstance.mountTimerId = setTimeout(() => {
+                componentInstance.mountTimerId = null;
+                mountComponent(componentInstance);
+            }, 0);
+        }
+
+        return node;
+    }
+
+    const element = document.createElement(tag);
+
+    if (props) {
+        Object.entries(props).forEach(([key, value]) => {
+            if (key === 'bind:value' || key === 'bind:checked') {
+                const isSignalLike = typeof value === 'function' && typeof value.peek === 'function' && ('value' in value);
+                const isBindable = isSignalLike && value.bind === true;
+
+                if (!isSignalLike) {
+                    try {
+                        console.warn('[round] bind:* expects a signal/bindable. Example: const name = bindable(\'\'); <input bind:value={name} />');
+                    } catch {
+                    }
+                    return;
+                }
+
+                if (!isBindable) {
+                    try {
+                        console.warn('[round] bind:* is intended to be used with bindable(). Plain signal() is accepted but discouraged.');
+                    } catch {
+                    }
+                }
+
+                const isValueBinding = key === 'bind:value';
+                const isCheckedBinding = key === 'bind:checked';
+                const el = element;
+                const tagName = String(el.tagName ?? '').toLowerCase();
+                const type = String(el.getAttribute?.('type') ?? '').toLowerCase();
+
+                const isInput = tagName === 'input';
+                const isTextarea = tagName === 'textarea';
+                const isSelect = tagName === 'select';
+
+                if (isCheckedBinding && !(isInput && (type === 'checkbox' || type === 'radio'))) {
+                    try {
+                        console.warn(`[round] bind:checked is only supported on <input type="checkbox|radio">. Got <${tagName}${type ? ` type=\"${type}\"` : ''}>.`);
+                    } catch {
+                    }
+                    return;
+                }
+
+                if (isValueBinding && !(isInput || isTextarea || isSelect)) {
+                    try {
+                        console.warn(`[round] bind:value is only supported on <input>, <textarea>, and <select>. Got <${tagName}>.`);
+                    } catch {
+                    }
+                    return;
+                }
+
+                const coerceFromDom = () => {
+                    if (isCheckedBinding) {
+                        if (type === 'radio') {
+                            return Boolean(el.checked);
+                        }
+                        return Boolean(el.checked);
+                    }
+
+                    if (isInput && type === 'number') {
+                        const raw = el.value;
+                        if (raw === '') return '';
+                        const n = Number(raw);
+                        return Number.isFinite(n) ? n : raw;
+                    }
+
+                    if (isSelect && el.multiple) {
+                        try {
+                            return Array.from(el.selectedOptions ?? []).map(o => o.value);
+                        } catch {
+                            return [];
+                        }
+                    }
+
+                    return el.value;
+                };
+
+                const writeToDom = (v) => {
+                    if (isCheckedBinding) {
+                        const b = Boolean(v);
+                        if (type === 'radio') {
+                            el.checked = b;
+                        } else {
+                            el.checked = b;
+                        }
+                        return;
+                    }
+
+                    if (isSelect && el.multiple) {
+                        const arr = Array.isArray(v) ? v.map(x => String(x)) : [];
+                        try {
+                            Array.from(el.options ?? []).forEach(opt => {
+                                opt.selected = arr.includes(opt.value);
+                            });
+                        } catch {
+                        }
+                        return;
+                    }
+
+                    el.value = v ?? '';
+                };
+
+                const warnTypeMismatch = (next) => {
+                    try {
+                        if (isCheckedBinding && typeof next !== 'boolean') {
+                            console.warn('[round] bind:checked expects a boolean signal value.');
+                        }
+                        if (isValueBinding && isSelect && el.multiple && !Array.isArray(next)) {
+                            console.warn('[round] bind:value on <select multiple> expects an array signal value.');
+                        }
+                        if (isValueBinding && isInput && type === 'number' && !(typeof next === 'number' || typeof next === 'string')) {
+                            console.warn('[round] bind:value on <input type="number"> expects number|string (empty string allowed).');
+                        }
+                    } catch {
+                    }
+                };
+
+                effect(() => {
+                    const v = value();
+                    warnTypeMismatch(v);
+                    writeToDom(v);
+                }, { onLoad: false });
+
+                const validateOn = isValueBinding && value && typeof value === 'function'
+                    ? value.__round_validateOn
+                    : null;
+                const valueEvent = (validateOn === 'blur') ? 'blur' : (isSelect ? 'change' : 'input');
+                const eventName = isCheckedBinding ? 'change' : valueEvent;
+                el.addEventListener(eventName, (e) => {
+                    try {
+                        const target = e.currentTarget;
+                        if (!target) return;
+                        const next = coerceFromDom();
+                        value(next);
+                    } catch {
+                    }
+                });
+                return;
+            }
+
+            if (key.startsWith('on') && typeof value === 'function') {
+                element.addEventListener(key.toLowerCase().substring(2), value);
+                return;
+            }
+
+            if (key === 'dangerouslySetInnerHTML') {
+                if (typeof value === 'function') {
+                    effect(() => {
+                        const v = value();
+                        if (v && typeof v === 'object' && '__html' in v) {
+                            element.innerHTML = v.__html ?? '';
+                        }
+                    }, { onLoad: false });
+                } else if (value && typeof value === 'object' && '__html' in value) {
+                    element.innerHTML = value.__html ?? '';
+                }
+                return;
+            }
+
+            if (key === 'style') {
+                if (typeof value === 'function') {
+                    effect(() => {
+                        const v = value();
+                        if (v && typeof v === 'object') {
+                            Object.assign(element.style, v);
+                        }
+                    }, { onLoad: false });
+                    return;
+                }
+                if (value && typeof value === 'object') {
+                    Object.assign(element.style, value);
+                    return;
+                }
+            }
+
+            if (typeof value === 'function') {
+                warnSignalDirectUsage(value, `prop:${key}`);
+                effect(() => {
+                    const val = value();
+                    if (key === 'className') element.className = val;
+                    else if (key === 'value') element.value = val;
+                    else if (key === 'checked') element.checked = Boolean(val);
+                    else element.setAttribute(key, val);
+                }, { onLoad: false });
+                return;
+            }
+
+            if (key === 'className') element.className = value;
+            else if (key === 'value') element.value = value;
+            else if (key === 'checked') element.checked = Boolean(value);
+            else element.setAttribute(key, value);
+        });
+    }
+
+    children.forEach(child => appendChild(element, child));
+
+    return element;
+}
+
+function appendChild(parent, child) {
+    if (child === null || child === undefined) return;
+
+    if (Array.isArray(child)) {
+        child.forEach(c => appendChild(parent, c));
+        return;
+    }
+
+    if (typeof child === 'string' || typeof child === 'number') {
+        parent.appendChild(document.createTextNode(child));
+        return;
+    }
+
+    if (typeof child === 'function') {
+        warnSignalDirectUsage(child, 'child');
+        const placeholder = document.createTextNode('');
+        parent.appendChild(placeholder);
+
+        let currentNode = placeholder;
+
+        effect(() => {
+            let val;
+            try {
+                val = child();
+                if (isPromiseLike(val)) throw val;
+            } catch (e) {
+                if (isPromiseLike(e)) throw e;
+                reportErrorSafe(e, { phase: 'child.dynamic' });
+                val = createElement('div', { style: { padding: '16px' } }, 'Error');
+            }
+
+            if (Array.isArray(val)) {
+                if (!(currentNode instanceof Element) || !currentNode._roundArrayWrapper) {
+                    const wrapper = document.createElement('span');
+                    wrapper.style.display = 'contents';
+                    wrapper._roundArrayWrapper = true;
+                    if (currentNode.parentNode) {
+                        currentNode.parentNode.replaceChild(wrapper, currentNode);
+                        currentNode = wrapper;
+                    }
+                }
+
+                while (currentNode.firstChild) currentNode.removeChild(currentNode.firstChild);
+                val.forEach(v => appendChild(currentNode, v));
+                return;
+            }
+
+            if (val instanceof Node) {
+                if (currentNode !== val) {
+                    if (currentNode.parentNode) {
+                        currentNode.parentNode.replaceChild(val, currentNode);
+                        currentNode = val;
+                    }
+                }
+            }
+            else {
+                const textContent = (val === null || val === undefined) ? '' : val;
+
+                if (currentNode instanceof Element) {
+                    const newText = document.createTextNode(textContent);
+                    if (currentNode.parentNode) {
+                        currentNode.parentNode.replaceChild(newText, currentNode);
+                        currentNode = newText;
+                    }
+                } else {
+                    currentNode.textContent = textContent;
+                }
+            }
+        }, { onLoad: false });
+        return;
+    }
+
+    if (child instanceof Node) {
+        parent.appendChild(child);
+        return;
+    }
+}
+
+export function Fragment(props) {
+    return props.children;
+}

package/src/runtime/error-boundary.js

@@ -0,0 +1,48 @@
+import { signal } from './signals.js';
+import { createElement } from './dom.js';
+import { reportError } from './error-store.js';
+
+export function ErrorBoundary(props = {}) {
+    const error = signal(null);
+
+    const name = props.name ?? 'ErrorBoundary';
+    const fallback = props.fallback;
+    const resetKey = props.resetKey;
+
+    let lastResetKey = resetKey;
+
+    return createElement('span', { style: { display: 'contents' } }, () => {
+        if (resetKey !== undefined && resetKey !== lastResetKey) {
+            lastResetKey = resetKey;
+            if (error()) error(null);
+        }
+
+        const err = error();
+        if (err) {
+            if (typeof fallback === 'function') {
+                try {
+                    return fallback({ error: err });
+                } catch (e) {
+                    reportError(e, { phase: 'ErrorBoundary.fallback', component: name });
+                    return createElement('div', { style: { padding: '16px' } }, 'ErrorBoundary fallback crashed');
+                }
+            }
+            if (fallback !== undefined) return fallback;
+            return createElement('div', { style: { padding: '16px' } }, 'Something went wrong.');
+        }
+
+        const renderFn = (typeof props.render === 'function')
+            ? props.render
+            : (typeof props.children === 'function' ? props.children : null);
+
+        if (typeof renderFn !== 'function') return props.children ?? null;
+
+        try {
+            return renderFn();
+        } catch (e) {
+            if (!error() || error() !== e) error(e);
+            reportError(e, { phase: 'ErrorBoundary.render', component: name });
+            return null;
+        }
+    });
+}

package/src/runtime/error-reporter.js

@@ -0,0 +1,13 @@
+let reporter = null;
+
+export function setErrorReporter(fn) {
+    reporter = typeof fn === 'function' ? fn : null;
+}
+
+export function reportErrorSafe(error, info) {
+    if (!reporter) return;
+    try {
+        reporter(error, info);
+    } catch {
+    }
+}

package/src/runtime/error-store.js

@@ -0,0 +1,85 @@
+import { signal } from './signals.js';
+import { setErrorReporter } from './error-reporter.js';
+
+const errors = signal([]);
+
+let lastSentKey = null;
+let lastSentAt = 0;
+
+let lastStoredKey = null;
+let lastStoredAt = 0;
+
+export function reportError(error, info = {}) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    const stack = err.stack ? String(err.stack) : '';
+    const message = err.message;
+    const phase = info.phase ?? null;
+    const component = info.component ?? null;
+    const key = `${message}|${component ?? ''}|${phase ?? ''}|${stack}`;
+    const now = Date.now();
+
+    if (lastStoredKey === key && (now - lastStoredAt) < 1500) {
+        return;
+    }
+    lastStoredKey = key;
+    lastStoredAt = now;
+
+    const entry = {
+        error: err,
+        message,
+        stack,
+        phase,
+        component,
+        time: now
+    };
+
+    const current = typeof errors.peek === 'function' ? errors.peek() : errors();
+    errors([entry, ...(Array.isArray(current) ? current : [])]);
+
+    try {
+        const where = entry.component ? ` in ${entry.component}` : '';
+        const phase = entry.phase ? ` (${entry.phase})` : '';
+        const label = `[round] Runtime error${where}${phase}`;
+
+        if (typeof console.groupCollapsed === 'function') {
+            console.groupCollapsed(label);
+            console.error(entry.error);
+            if (entry.stack) console.log(entry.stack);
+            if (info && Object.keys(info).length) console.log('info:', info);
+            console.groupEnd();
+        } else {
+            console.error(label);
+            console.error(entry.error);
+            if (entry.stack) console.log(entry.stack);
+            if (info && Object.keys(info).length) console.log('info:', info);
+        }
+    } catch {
+    }
+
+    try {
+        if (import.meta?.hot && typeof import.meta.hot.send === 'function') {
+            if (lastSentKey !== key || (now - lastSentAt) > 1500) {
+                lastSentKey = key;
+                lastSentAt = now;
+                import.meta.hot.send('round:runtime-error', {
+                    message: entry.message,
+                    stack: entry.stack ? String(entry.stack) : '',
+                    phase: entry.phase,
+                    component: entry.component,
+                    time: entry.time
+                });
+            }
+        }
+    } catch {
+    }
+}
+
+export function clearErrors() {
+    errors([]);
+}
+
+export function useErrors() {
+    return errors;
+}
+
+setErrorReporter(reportError);

package/src/runtime/errors.js

@@ -0,0 +1,152 @@
+import { createElement } from './dom.js';
+import { clearErrors, useErrors, reportError } from './error-store.js';
+
+export { reportError } from './error-store.js';
+
+export function ErrorProvider(props = {}) {
+    return createElement('span', { style: { display: 'contents' } }, () => {
+        const list = useErrors()();
+        if (!Array.isArray(list) || list.length === 0) return props.children ?? null;
+
+        const first = list[0];
+
+        return createElement(
+            'div',
+            {
+                style: {
+                    position: 'fixed',
+                    inset: '0',
+                    zIndex: 2147483647,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '24px',
+                    background: 'rgba(17, 24, 39, 0.72)',
+                    backdropFilter: 'blur(10px)',
+                    WebkitBackdropFilter: 'blur(10px)'
+                }
+            },
+            createElement(
+                'div',
+                {
+                    style: {
+                        width: 'min(900px, 100%)',
+                        borderRadius: '14px',
+                        border: '1px solid rgba(255,255,255,0.12)',
+                        background: 'rgba(0,0,0,0.55)',
+                        boxShadow: '0 30px 80px rgba(0,0,0,0.55)',
+                        color: '#fff',
+                        overflow: 'hidden'
+                    }
+                },
+                createElement(
+                    'div',
+                    {
+                        style: {
+                            padding: '14px 16px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '10px',
+                            borderBottom: '1px solid rgba(255,255,255,0.10)',
+                            background: 'linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0))'
+                        }
+                    },
+                    createElement('div', {
+                        style: {
+                            width: '10px',
+                            height: '10px',
+                            borderRadius: '999px',
+                            background: '#ef4444',
+                            boxShadow: '0 0 0 4px rgba(239,68,68,0.18)'
+                        }
+                    }),
+                    createElement('strong', { style: { fontFamily: 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial' } }, 'Round Error'),
+                    createElement('span', { style: { opacity: 0.75, fontFamily: 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial', fontSize: '12px' } }, new Date(first.time).toLocaleString()),
+                    createElement('button', {
+                        style: {
+                            marginLeft: 'auto',
+                            border: '1px solid rgba(255,255,255,0.16)',
+                            background: 'rgba(255,255,255,0.08)',
+                            color: '#fff',
+                            padding: '8px 10px',
+                            borderRadius: '10px',
+                            cursor: 'pointer'
+                        },
+                        onMouseOver: (e) => { try { e.currentTarget.style.background = 'rgba(255,255,255,0.12)'; } catch { } },
+                        onMouseOut: (e) => { try { e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; } catch { } },
+                        onClick: () => clearErrors()
+                    }, 'Dismiss')
+                ),
+                createElement(
+                    'div',
+                    {
+                        style: {
+                            padding: '16px',
+                            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+                        }
+                    },
+                    createElement('div', { style: { fontSize: '14px', fontWeight: '700' } }, String(first.message ?? 'Error')),
+                    createElement(
+                        'div',
+                        { style: { marginTop: '10px', opacity: 0.85, fontSize: '12px', lineHeight: '18px' } },
+                        first.component ? createElement('div', null, createElement('span', { style: { opacity: 0.75 } }, 'Component: '), String(first.component)) : null,
+                        first.phase ? createElement('div', null, createElement('span', { style: { opacity: 0.75 } }, 'Phase: '), String(first.phase)) : null
+                    ),
+                    first.stack
+                        ? createElement('pre', {
+                            style: {
+                                marginTop: '12px',
+                                padding: '12px',
+                                borderRadius: '12px',
+                                background: 'rgba(0,0,0,0.55)',
+                                border: '1px solid rgba(255,255,255,0.10)',
+                                whiteSpace: 'pre-wrap',
+                                fontSize: '12px',
+                                lineHeight: '18px',
+                                overflow: 'auto',
+                                maxHeight: '55vh'
+                            }
+                        }, String(first.stack))
+                        : null
+                )
+            )
+        );
+    });
+}
+
+export function initErrorHandling(container) {
+    if (typeof document === 'undefined') return;
+    if (!container || !(container instanceof Element)) return;
+
+    if (!document.querySelector('[data-round-error-style="1"]')) {
+        const style = document.createElement('style');
+        style.setAttribute('data-round-error-style', '1');
+        style.textContent = `
+[data-round-error-root="1"] pre{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.28) rgba(255,255,255,0.06);}
+[data-round-error-root="1"] pre::-webkit-scrollbar{width:10px;height:10px;}
+[data-round-error-root="1"] pre::-webkit-scrollbar-track{background:rgba(255,255,255,0.06);border-radius:999px;}
+[data-round-error-root="1"] pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.22);border-radius:999px;border:2px solid rgba(0,0,0,0.35);}
+[data-round-error-root="1"] pre::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.32);}
+        `.trim();
+        document.head.appendChild(style);
+    }
+
+    if (!document.querySelector('[data-round-error-root="1"]')) {
+        const root = document.createElement('div');
+        root.setAttribute('data-round-error-root', '1');
+        container.appendChild(root);
+        root.appendChild(createElement(ErrorProvider, null));
+    }
+
+    if (!window.__round_error_handlers_installed) {
+        window.__round_error_handlers_installed = true;
+
+        window.addEventListener('error', (e) => {
+            reportError(e?.error ?? e?.message ?? e, { phase: 'window.error' });
+        });
+
+        window.addEventListener('unhandledrejection', (e) => {
+            reportError(e?.reason ?? e, { phase: 'window.unhandledrejection' });
+        });
+    }
+}