round-core 0.1.3 → 0.1.4

package/README.md

@@ -73,9 +73,19 @@ A **signal** is a small reactive container.
 Round includes a CLI with a project initializer.
 
 ```bash
+# Install the CLI
+npm install round
+
+# Create a new app
 round init myapp
+
+# Navigate to the app directory
 cd myapp
+
+# Install dependencies
 npm install
+
+# Run the app
 npm run dev
 ```
 
@@ -163,6 +173,39 @@ effect(() => {
 name('Grace');
 ```
 
+### `asyncSignal(fetcher)`
+
+Create a signal that manages asynchronous data fetching.
+
+- It returns a signal that resolves to the data once fetched.
+- **`.pending`**: A reactive signal (boolean) indicating if the fetch is in progress.
+- **`.error`**: A reactive signal containing any error that occurred during fetching.
+- **`.refetch()`**: A method to manually trigger a re-fetch.
+
+```jsx
+import { asyncSignal } from 'round-core';
+
+const user = asyncSignal(async () => {
+    const res = await fetch('/api/user');
+    return res.json();
+});
+
+export function UserProfile() {
+    return (
+        <div>
+            {if(user.pending()){
+                <div>Loading...</div>
+            } else if(user.error()){
+                <div>Error: {user.error().message}</div>
+            } else {
+                <div>Welcome, {user().name}</div>
+            }}
+            <button onClick={() => user.refetch()}>Reload</button>
+        </div>
+    );
+}
+```
+
 ### `untrack(fn)`
 
 Run a function without tracking any signals it reads.
@@ -385,6 +428,25 @@ Notes:
 - The `switch` expression is automatically wrapped in a reactive tracker, ensuring that the view updates surgically when the condition (e.g., a signal) changes.
 - Each case handles its own rendering without re-running the parent component.
 
+### `try / catch`
+
+Round supports both static and **reactive** `try/catch` blocks inside JSX.
+
+- **Static**: Just like standard JS, but renders fragments.
+- **Reactive**: By passing a signal to `try(signal)`, the block will **automatically re-run** if the signal (or its dependencies) update. This is perfect for handling transient errors in async data.
+
+```jsx
+{try(user()) {
+    {if(user() && user().name) {
+        <div>Hello {user().name}</div>
+    } else if(user.pending()) {
+        <div>⏳ Loading...</div>
+    }}
+} catch(e) {
+    <div className="error"> Failed to load user: {e.message} </div>
+}}
+```
+
 ## Routing
 
 Round includes router primitives intended for SPA navigation. All route paths must start with a forward slash `/`.
@@ -452,26 +514,14 @@ const LazyWidget = lazy(() => import('./Widget'));
 
 ## Error handling
 
-Round aims to provide strong developer feedback:
-
-- Runtime error reporting with safe boundaries.
-- `ErrorBoundary` to catch render-time errors and show a fallback.
-
-### `ErrorBoundary`
-
-Wrap components to prevent the whole app from crashing if a child fails to render.
+Round JS favors individual error control and standard browser debugging:
 
-```jsx
-import { ErrorBoundary } from 'round-core';
-
-function DangerousComponent() {
-    throw new Error('Boom!');
-}
+1.  **Explict `try/catch`**: Use the JSX `try/catch` syntax to handle local component failures gracefully.
+2.  **Console-First Reporting**: Unhandled errors in component rendering or reactive effects are logged to the browser console with descriptive metadata (component name, render phase) and then allowed to propagate.
+3.  **No Intrusive Overlays**: Round has removed conflicting global error boundaries to ensure that your local handling logic always takes precedence and the developer experience remains clean.
 
-<ErrorBoundary fallback={(err) => <div className="error">Something went wrong: {err.message}</div>}>
-    <DangerousComponent />
-</ErrorBoundary>
-```
+Example of a descriptive console log:
+`[round] Error in phase "component.render" of component <UserProfile />: TypeError: Cannot read property 'avatar' of undefined`
 
 ## CLI
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "round-core",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "description": "A lightweight frontend framework for SPA with signals and fine grained reactivity",
     "main": "./src/index.js",
     "types": "./src/index.d.ts",

package/src/compiler/transformer.js

@@ -262,6 +262,81 @@ export function transform(code, initialDepth = 0) {
         return { end: endIdx, replacement };
     }
 
+    function handleTry(currI, isBare = false) {
+        let ptr = currI;
+        if (!isBare) ptr = consumeWhitespace(code, currI + 1);
+
+        if (!code.startsWith('try', ptr)) return null;
+        ptr += 3;
+        ptr = consumeWhitespace(code, ptr);
+
+        // Check for reactive try: try(expr) {...}
+        let reactiveExpr = null;
+        if (code[ptr] === '(') {
+            const condRes = extractCondition(code, ptr);
+            if (condRes) {
+                reactiveExpr = condRes.cond;
+                ptr = consumeWhitespace(code, condRes.end);
+            }
+        }
+
+        // Must have opening brace for try block
+        if (code[ptr] !== '{') return null;
+
+        const tryBlock = parseBlock(code, ptr);
+        if (!tryBlock) return null;
+
+        const tryContent = code.substring(tryBlock.start + 1, tryBlock.end);
+        const transformedTry = transform(tryContent, 1);
+
+        ptr = tryBlock.end + 1;
+        ptr = consumeWhitespace(code, ptr);
+
+        // Must have catch
+        if (!code.startsWith('catch', ptr)) return null;
+        ptr += 5;
+        ptr = consumeWhitespace(code, ptr);
+
+        // Extract catch parameter (e) or (err)
+        let catchParam = 'e';
+        if (code[ptr] === '(') {
+            const catchCondRes = extractCondition(code, ptr);
+            if (catchCondRes) {
+                catchParam = catchCondRes.cond.trim() || 'e';
+                ptr = consumeWhitespace(code, catchCondRes.end);
+            }
+        }
+
+        // Must have catch block
+        if (code[ptr] !== '{') return null;
+
+        const catchBlock = parseBlock(code, ptr);
+        if (!catchBlock) return null;
+
+        const catchContent = code.substring(catchBlock.start + 1, catchBlock.end);
+        const transformedCatch = transform(catchContent, 1);
+
+        let endIdx = catchBlock.end + 1;
+
+        // If not bare, consume closing '}'
+        if (!isBare) {
+            endIdx = consumeWhitespace(code, endIdx);
+            if (code[endIdx] !== '}') return null;
+            endIdx++;
+        }
+
+        let replacement;
+        if (reactiveExpr) {
+            // Reactive try: return a THUNK (function) so dom.js handles it as a reactive child (effect)
+            replacement = `{() => { try { ${reactiveExpr}; return (<Fragment>${transformedTry}</Fragment>); } catch(${catchParam}) { return (<Fragment>${transformedCatch}</Fragment>); } }}`;
+        } else {
+            // Static try: simple IIFE
+            replacement = `{(() => { try { return (<Fragment>${transformedTry}</Fragment>); } catch(${catchParam}) { return (<Fragment>${transformedCatch}</Fragment>); } })()}`;
+        }
+
+        return { end: endIdx, replacement };
+    }
+
     // --- Main Parser Loop ---
 
     let inSingle = false, inDouble = false, inTemplate = false;
@@ -397,6 +472,9 @@ export function transform(code, initialDepth = 0) {
                 } else if (code.startsWith('switch', ptr)) {
                     const res = handleSwitch(i, false);
                     if (res) { result += res.replacement; i = res.end; processed = true; }
+                } else if (code.startsWith('try', ptr)) {
+                    const res = handleTry(i, false);
+                    if (res) { result += res.replacement; i = res.end; processed = true; }
                 }
             }
 
@@ -421,6 +499,13 @@ export function transform(code, initialDepth = 0) {
                     const res = handleSwitch(i, true);
                     if (res) { result += res.replacement; i = res.end; processed = true; }
                 }
+            } else if (ch === 't' && code.startsWith('try', i)) {
+                // Bare try: try { ... } catch { ... } or try(expr) { ... } catch { ... }
+                let ptr = consumeWhitespace(code, i + 3);
+                if (code[ptr] === '{' || code[ptr] === '(') {
+                    const res = handleTry(i, true);
+                    if (res) { result += res.replacement; i = res.end; processed = true; }
+                }
             }
 
             if (processed) continue;

package/src/index.d.ts

@@ -101,6 +101,92 @@ export function effect(deps: any[], fn: () => void | (() => void), options?: {
  */
 export function derive<T>(fn: () => T): () => T;
 
+/**
+ * Async signal that loads data from an async function.
+ * Provides reactive pending/error states and refetch capability.
+ */
+export interface AsyncSignal<T> {
+    /**
+     * Get the current resolved value, or set a new value.
+     * Returns undefined while pending or if an error occurred.
+     */
+    (newValue?: T): T | undefined;
+
+    /**
+     * Get the current value (reactive).
+     */
+    value: T | undefined;
+
+    /**
+     * Get the current value without tracking dependencies.
+     */
+    peek(): T | undefined;
+
+    /**
+     * Signal indicating whether the async function is currently executing.
+     * @example
+     * if (user.pending()) {
+     *   return <Spinner />;
+     * }
+     */
+    pending: RoundSignal<boolean>;
+
+    /**
+     * Signal containing the error if the async function rejected.
+     * Returns null if no error occurred.
+     * @example
+     * if (user.error()) {
+     *   return <div>Error: {user.error().message}</div>;
+     * }
+     */
+    error: RoundSignal<Error | null>;
+
+    /**
+     * Re-execute the async function to refresh the data.
+     * Resets pending to true and clears any previous error.
+     * @returns Promise that resolves to the new value
+     * @example
+     * <button onClick={() => user.refetch()}>Refresh</button>
+     */
+    refetch(): Promise<T | undefined>;
+}
+
+/**
+ * Options for asyncSignal.
+ */
+export interface AsyncSignalOptions {
+    /**
+     * If true (default), executes the async function immediately on creation.
+     * If false, you must call refetch() to start loading.
+     */
+    immediate?: boolean;
+}
+
+/**
+ * Creates an async signal that loads data from an async function.
+ * The signal provides reactive pending and error states, plus a refetch method.
+ * 
+ * @param asyncFn - Async function that returns a promise
+ * @param options - Configuration options
+ * @returns AsyncSignal with pending, error, and refetch properties
+ * 
+ * @example
+ * const user = asyncSignal(() => fetch('/api/user').then(r => r.json()));
+ * 
+ * // In component:
+ * {if(user.pending()) {
+ *     <Spinner />
+ * } else if(user.error()) {
+ *     <Error message={user.error().message} />
+ * } else {
+ *     <Profile user={user()} />
+ * }}
+ * 
+ * // Refetch on demand:
+ * <button onClick={() => user.refetch()}>Refresh</button>
+ */
+export function asyncSignal<T>(asyncFn: () => Promise<T>, options?: AsyncSignalOptions): AsyncSignal<T>;
+
 /**
  * Creates a read/write view of a specific path within a signal object.
  */
@@ -319,25 +405,6 @@ export function readContext<T>(ctx: Context<T>): T;
  */
 export function bindContext<T>(ctx: Context<T>): () => T;
 
-/**
- * Error Handling
- */
-
-export interface ErrorBoundaryProps {
-    /** Content to render if an error occurs. Can be a signal or function. */
-    fallback?: any | ((props: { error: any }) => any);
-    /** Optional identifier for the boundary. */
-    name?: string;
-    /** Optional key that, when changed, resets the boundary error state. */
-    resetKey?: any;
-    /** Content that might throw an error. */
-    children?: any;
-}
-
-/**
- * Component that catches runtime errors in its child tree and displays a fallback UI.
- */
-export function ErrorBoundary(props: ErrorBoundaryProps): any;
 
 /**
  * Async & Code Splitting

package/src/index.js

@@ -2,9 +2,6 @@ export * from './runtime/signals.js';
 export * from './runtime/dom.js';
 export * from './runtime/lifecycle.js';
 export * from './runtime/router.js';
-export * from './runtime/errors.js';
-export * from './runtime/error-store.js';
-export * from './runtime/error-boundary.js';
 export * from './runtime/suspense.js';
 export * from './runtime/context.js';
 export * from './runtime/store.js';
@@ -13,20 +10,16 @@ import * as Signals from './runtime/signals.js';
 import * as DOM from './runtime/dom.js';
 import * as Lifecycle from './runtime/lifecycle.js';
 import * as Router from './runtime/router.js';
-import * as Errors from './runtime/errors.js';
 import * as Suspense from './runtime/suspense.js';
 import * as Context from './runtime/context.js';
 import * as Store from './runtime/store.js';
 
 export function render(Component, container) {
     Lifecycle.initLifecycleRoot(container);
-    Errors.initErrorHandling(container);
-    try {
-        const root = DOM.createElement(Component);
-        container.appendChild(root);
-    } catch (e) {
-        Errors.reportError(e, { phase: 'render', component: Component?.name ?? 'App' });
-    }
+    // Errors are no longer handled by a global overlay.
+    // They propagate to the console or local try/catch.
+    const root = DOM.createElement(Component);
+    container.appendChild(root);
 }
 
 export default {
@@ -34,7 +27,6 @@ export default {
     ...DOM,
     ...Lifecycle,
     ...Router,
-    ...Errors,
     ...Suspense,
     ...Context,
     ...Store,

package/src/runtime/context-shared.js

@@ -0,0 +1,63 @@
+
+let nextContextId = 1;
+export const contextStack = [];
+
+/**
+ * Internal helper to push context layers.
+ */
+export function pushContext(values) {
+    contextStack.push(values);
+}
+
+/**
+ * Internal helper to pop context layers.
+ */
+export function popContext() {
+    contextStack.pop();
+}
+
+/**
+ * Capture current context stack.
+ */
+export function captureContext() {
+    return contextStack.slice();
+}
+
+/**
+ * Read context value from the stack.
+ */
+export function readContext(ctx) {
+    for (let i = contextStack.length - 1; i >= 0; i--) {
+        const layer = contextStack[i];
+        if (layer && Object.prototype.hasOwnProperty.call(layer, ctx.id)) {
+            return layer[ctx.id];
+        }
+    }
+    return ctx.defaultValue;
+}
+
+/**
+ * Generate a new context ID.
+ */
+export function generateContextId() {
+    return nextContextId++;
+}
+
+
+export const SuspenseContext = {
+    id: generateContextId(),
+    defaultValue: null,
+    Provider: null
+};
+
+export function runInContext(snapshot, fn) {
+    const prev = contextStack.slice();
+    contextStack.length = 0;
+    contextStack.push(...snapshot);
+    try {
+        return fn();
+    } finally {
+        contextStack.length = 0;
+        contextStack.push(...prev);
+    }
+}

package/src/runtime/context.js

@@ -1,62 +1,29 @@
-import { createElement } from './dom.js';
+import { pushContext, popContext, contextStack, generateContextId, readContext, SuspenseContext, runInContext } from './context-shared.js';
+import { createElement, Fragment } from './dom.js';
 
-let nextContextId = 1;
-const contextStack = [];
-
-function pushContext(values) {
-    contextStack.push(values);
-}
-
-function popContext() {
-    contextStack.pop();
-}
+export { pushContext, popContext, contextStack, generateContextId, readContext, SuspenseContext, runInContext };
 
 /**
- * Read the current value of a context from the tree.
- * @template T
- * @param {Context<T>} ctx The context object.
- * @returns {T} The current context value.
+ * Internal logic to create a Provider component for a context.
  */
-export function readContext(ctx) {
-    for (let i = contextStack.length - 1; i >= 0; i--) {
-        const layer = contextStack[i];
-        if (layer && Object.prototype.hasOwnProperty.call(layer, ctx.id)) {
-            return layer[ctx.id];
-        }
-    }
-    return ctx.defaultValue;
-}
-
-/**
- * Create a new Context object for sharing state between components.
- * @template T
- * @param {T} [defaultValue] The value used when no provider is found.
- * @returns {Context<T>} The context object with a `Provider` component.
- */
-export function createContext(defaultValue) {
-    const ctx = {
-        id: nextContextId++,
-        defaultValue,
-        Provider: null
-    };
-
-    function Provider(props = {}) {
+function createProvider(ctx) {
+    const Provider = function Provider(props = {}) {
         const children = props.children;
+        const value = props.value;
 
         // Push context now so that any createElement/appendChild called 
         // during the instantiation of this Provider branch picks it up immediately.
-        pushContext({ [ctx.id]: props.value });
+        pushContext({ [ctx.id]: value });
         try {
             // We use a span to handle reactive value updates and dynamic children.
             return createElement('span', { style: { display: 'contents' } }, () => {
                 // Read current value (reactive if it's a signal)
-                const val = (typeof props.value === 'function' && props.value.peek) ? props.value() : props.value;
+                const val = (typeof value === 'function' && value.peek) ? value() : value;
 
-                // Push it during the effect run too! This ensures that anything returned 
-                // from this callback (which might trigger more appendChild calls) sees the context.
+                // Push it during the effect run too!
                 pushContext({ [ctx.id]: val });
                 try {
-                    return children;
+                    return typeof children === 'function' ? children() : children;
                 } finally {
                     popContext();
                 }
@@ -64,12 +31,26 @@ export function createContext(defaultValue) {
         } finally {
             popContext();
         }
-    }
+    };
+    return Provider;
+}
 
-    ctx.Provider = Provider;
+/**
+ * Create a new Context object for sharing state between components.
+ */
+export function createContext(defaultValue) {
+    const ctx = {
+        id: generateContextId(),
+        defaultValue,
+        Provider: null
+    };
+    ctx.Provider = createProvider(ctx);
     return ctx;
 }
 
+// Attach providers to built-in shared contexts
+SuspenseContext.Provider = createProvider(SuspenseContext);
+
 export function bindContext(ctx) {
     return () => {
         const provided = readContext(ctx);
@@ -87,15 +68,3 @@ export function bindContext(ctx) {
 export function captureContext() {
     return contextStack.slice();
 }
-
-export function runInContext(snapshot, fn) {
-    const prev = contextStack.slice();
-    contextStack.length = 0;
-    contextStack.push(...snapshot);
-    try {
-        return fn();
-    } finally {
-        contextStack.length = 0;
-        contextStack.push(...prev);
-    }
-}

package/src/runtime/dom.js

@@ -1,8 +1,7 @@
 import { effect, untrack } from './signals.js';
 import { runInLifecycle, createComponentInstance, mountComponent, initLifecycleRoot } from './lifecycle.js';
 import { reportErrorSafe } from './error-reporter.js';
-import { captureContext, runInContext, readContext } from './context.js';
-import { SuspenseContext } from './suspense.js';
+import { captureContext, runInContext, readContext, SuspenseContext } from './context-shared.js';
 
 
 const warnedSignals = new Set();
@@ -54,8 +53,9 @@ export function createElement(tag, props = {}, ...children) {
                     }
                     throw e;
                 }
+
                 reportErrorSafe(e, { phase: 'component.render', component: componentName });
-                return createElement('div', { style: { padding: '16px' } }, `Error in ${componentName}`);
+                throw e;
             }
         });
 
@@ -341,8 +341,9 @@ function appendChild(parent, child) {
                         }
                         throw new Error("cannot instance a lazy component outside a suspense");
                     }
+
                     reportErrorSafe(e, { phase: 'child.dynamic' });
-                    val = createElement('div', { style: { padding: '16px' } }, 'Error');
+                    throw e;
                 }
 
                 if (Array.isArray(val)) {

package/src/runtime/error-reporter.js

@@ -1,3 +1,4 @@
+
 let reporter = null;
 
 export function setErrorReporter(fn) {
@@ -5,9 +6,16 @@ export function setErrorReporter(fn) {
 }
 
 export function reportErrorSafe(error, info) {
-    if (!reporter) return;
-    try {
-        reporter(error, info);
-    } catch {
+    if (reporter) {
+        try {
+            reporter(error, info);
+            return;
+        } catch {
+        }
     }
+
+    // Default: Descriptive console logging
+    const phase = info?.phase ? ` in phase "${info.phase}"` : "";
+    const component = info?.component ? ` of component <${info.component} />` : "";
+    console.error(`[round] Error${phase}${component}:`, error);
 }

package/src/runtime/signals.js

@@ -1,5 +1,6 @@
 import { onMount, triggerUpdate, getCurrentComponent } from './lifecycle.js';
 import { reportErrorSafe } from './error-reporter.js';
+import { readContext } from './context-shared.js';
 
 let context = null;
 let batchCount = 0;
@@ -143,10 +144,10 @@ export function effect(arg1, arg2, arg3) {
                 }
                 const res = callback();
                 if (typeof res === 'function') this._cleanup = res;
-                if (owner?.isMounted) triggerUpdate(owner);
             } catch (e) {
-                if (!isPromiseLike(e)) reportErrorSafe(e, { phase: 'effect', component: owner?.name });
-                else throw e;
+                if (isPromiseLike(e)) throw e;
+                reportErrorSafe(e, { phase: 'effect', component: owner?.name });
+                throw e;
             } finally {
                 context = prev;
             }
@@ -311,6 +312,98 @@ export function bindable(initialValue) {
     return attachHelpers(s);
 }
 
+/**
+ * Create an async signal that loads data from an async function.
+ * Provides pending, error, and refetch capabilities.
+ * @param {Function} asyncFn - Async function that returns a promise
+ * @param {Object} options - Options: { immediate: true }
+ */
+export function asyncSignal(asyncFn, options = {}) {
+    if (typeof asyncFn !== 'function') {
+        throw new Error('[round] asyncSignal() expects an async function.');
+    }
+
+    const immediate = options.immediate !== false;
+    const data = signal(undefined);
+    const pending = signal(immediate);
+    const error = signal(null);
+
+    let currentPromise = null;
+
+    async function execute() {
+        pending(true);
+        error(null);
+
+        try {
+            const promise = asyncFn();
+            currentPromise = promise;
+
+            if (!isPromiseLike(promise)) {
+                // Sync result
+                data(promise);
+                pending(false);
+                return promise;
+            }
+
+            const result = await promise;
+
+            // Only update if this is still the current request
+            if (currentPromise === promise) {
+                data(result);
+                pending(false);
+            }
+
+            return result;
+        } catch (e) {
+            if (currentPromise !== null) {
+                error(e);
+                pending(false);
+            }
+            return undefined;
+        }
+    }
+
+    // The main signal function - returns current data value
+    const s = function (newValue) {
+        if (arguments.length > 0) {
+            return data(newValue);
+        }
+        if (context) {
+            // Subscribe to all internal signals so any change triggers a re-run
+            data();
+            pending();
+            error();
+        }
+        return data.peek();
+    };
+
+    s.peek = () => data.peek();
+
+    Object.defineProperty(s, 'value', {
+        enumerable: true,
+        configurable: true,
+        get() { return s(); },
+        set(v) { data(v); }
+    });
+
+    // Expose pending and error as signals
+    s.pending = pending;
+    s.error = error;
+
+    // Refetch function
+    s.refetch = execute;
+
+    // Mark as async signal
+    s.__asyncSignal = true;
+
+    // Execute immediately if requested
+    if (immediate) {
+        execute();
+    }
+
+    return s;
+}
+
 function getIn(obj, path) {
     let cur = obj;
     for (let i = 0; i < path.length; i++) {

package/src/runtime/suspense.js

@@ -6,7 +6,7 @@ function isPromiseLike(v) {
     return v && (typeof v === 'object' || typeof v === 'function') && typeof v.then === 'function';
 }
 
-const SuspenseContext = createContext(null);
+import { SuspenseContext } from './context-shared.js';
 export { SuspenseContext };
 
 export function lazy(loader) {