round-core 0.1.3 → 0.1.5

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.
@@ -364,12 +407,16 @@ Notes:
 ### `for (... in ...)`
 
 ```jsx
-{for(item in items){
-    <div className="row">{item}</div>
+{for(item in items()) key=item.id {
+    <div className="row">{item.name}</div>
 }}
 ```
 
-This compiles roughly to a `.map(...)` under the hood.
+This compiles to efficient **keyed reconciliation** using the `ForKeyed` runtime component. 
+
+#### Keyed vs Unkeyed
+- **Keyed (Recommended)**: By providing `key=expr`, Round maintains the identity of DOM nodes. If the list reorders, Round moves the existing nodes instead of recreating them. This preserves local state (like input focus, cursor position, or CSS animations).
+- **Unkeyed**: If no key is provided, Round simply maps over the list. Reordering the list will cause nodes to be reused based on their index, which might lead to state issues in complex lists.
 
 ### `switch`
 
@@ -385,6 +432,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 +518,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.5",
     "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

@@ -202,6 +202,29 @@ export function transform(code, initialDepth = 0) {
         const list = inMatch[2].trim();
 
         ptr = consumeWhitespace(code, condRes.end);
+
+        // --- KEY PARSING ---
+        let keyExpr = null;
+        if (code.startsWith('key', ptr)) {
+            let kPtr = consumeWhitespace(code, ptr + 3);
+            if (code[kPtr] === '=') {
+                kPtr = consumeWhitespace(code, kPtr + 1);
+                if (code[kPtr] === '{') {
+                    const keyBlock = parseBlock(code, kPtr);
+                    if (keyBlock) {
+                        keyExpr = code.substring(keyBlock.start + 1, keyBlock.end);
+                        ptr = consumeWhitespace(code, keyBlock.end + 1);
+                    }
+                } else {
+                    // Bare key: parse until whitespace or {
+                    let start = kPtr;
+                    while (kPtr < code.length && !/\s/.test(code[kPtr]) && code[kPtr] !== '{') kPtr++;
+                    keyExpr = code.substring(start, kPtr);
+                    ptr = consumeWhitespace(code, kPtr);
+                }
+            }
+        }
+
         if (code[ptr] !== '{') return null;
 
         const block = parseBlock(code, ptr);
@@ -217,7 +240,12 @@ export function transform(code, initialDepth = 0) {
             endIdx++;
         }
 
-        const replacement = `{(() => ${list}.map(${item} => (<Fragment>${transformedContent}</Fragment>)))}`;
+        let replacement;
+        if (keyExpr) {
+            replacement = `{createElement(ForKeyed, { each: () => ${list}, key: (${item}) => ${keyExpr} }, (${item}) => (<Fragment>${transformedContent}</Fragment>))}`;
+        } else {
+            replacement = `{(() => ${list}.map(${item} => (<Fragment>${transformedContent}</Fragment>)))}`;
+        }
         return { end: endIdx, replacement };
     }
 
@@ -262,6 +290,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 +500,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 +527,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/compiler/vite-plugin.js

@@ -458,8 +458,8 @@ export default function RoundPlugin(pluginOptions = {}) {
 
                 let transformedCode = transform(nextCode);
 
-                if (!/^\s*import\s+\{\s*createElement\s*,\s*Fragment\s*\}\s+from\s+['"][^'"]+['"];?/m.test(transformedCode)) {
-                    transformedCode = `import { createElement, Fragment } from '${runtimeImport}';\n` + transformedCode;
+                if (!/^\s*import\s+\{\s*createElement\s*,\s*Fragment\s*,\s*ForKeyed\s*\}\s+from\s+['"][^'"]+['"];?/m.test(transformedCode)) {
+                    transformedCode = `import { createElement, Fragment, ForKeyed } from '${runtimeImport}';\n` + transformedCode;
                 }
 
                 return {

package/src/index.d.ts

@@ -6,7 +6,7 @@ export interface RoundSignal<T> {
     /**
      * Get or set the current value.
      */
-    (newValue?: T): T;
+    (newValue?: T | ((prev: T) => T)): T;
 
     /**
      * Get the current value (reactive).
@@ -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.
  */
@@ -295,6 +381,11 @@ export function createElement(tag: any, props?: any, ...children: any[]): any;
  */
 export function Fragment(props: { children?: any }): any;
 
+/**
+ * A component for efficient keyed list reconciliation.
+ */
+export function ForKeyed<T>(props: { each: T[] | (() => T[]), key: (item: T) => any, children: (item: T) => any }): any;
+
 export interface Context<T> {
     /** Internal identifier for the context. */
     id: number;
@@ -319,25 +410,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,31 +2,25 @@ 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';
+export * from './runtime/keyed.js';
 
 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 +28,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/keyed.js

@@ -0,0 +1,83 @@
+import { effect } from './signals.js';
+
+/**
+ * ForKeyed Component
+ * Performs keyed reconciliation for lists to maintain DOM identity.
+ * 
+ * @template T
+ * @param {{ 
+ *   each: T[] | (() => T[]), 
+ *   key: (item: T) => any, 
+ *   children: (item: T) => any 
+ * }} props
+ */
+export function ForKeyed(props) {
+    const { each, key: keyFn, children } = props;
+    const renderFn = Array.isArray(children) ? children[0] : children;
+
+    if (typeof renderFn !== 'function') {
+        return null;
+    }
+
+    const container = document.createElement('span');
+    container.style.display = 'contents';
+
+    // Map of key -> Node
+    const cache = new Map();
+
+    effect(() => {
+        const list = typeof each === 'function' ? each() : each;
+        const items = Array.isArray(list) ? list : [];
+
+        // 1. Generate new keys and nodes
+        const newNodes = items.map(item => {
+            const k = keyFn(item);
+            if (cache.has(k)) {
+                return cache.get(k);
+            }
+            // Create new node if key doesn't exist
+            let node = renderFn(item);
+
+            // Handle Fragments (Arrays)
+            if (Array.isArray(node)) {
+                if (node.length === 1) {
+                    node = node[0];
+                } else {
+                    const wrapper = document.createElement('span');
+                    wrapper.style.display = 'contents';
+                    node.forEach(n => {
+                        if (n instanceof Node) wrapper.appendChild(n);
+                        else wrapper.appendChild(document.createTextNode(String(n)));
+                    });
+                    node = wrapper;
+                }
+            }
+
+            cache.set(k, node);
+            return node;
+        });
+
+        // 2. Remove nodes that are no longer in the list
+        const newNodesSet = new Set(newNodes);
+        for (const [k, node] of cache.entries()) {
+            if (!newNodesSet.has(node)) {
+                if (node.parentNode === container) {
+                    container.removeChild(node);
+                }
+                cache.delete(k);
+            }
+        }
+
+        // 3. Reorder/Append nodes (Minimal Move)
+        // Iterate specifically up to the length of the new list.
+        newNodes.forEach((node, i) => {
+            const currentAtPos = container.childNodes[i];
+            if (currentAtPos !== node) {
+                // insertBefore moves the node if it's already in the DOM
+                container.insertBefore(node, currentAtPos || null);
+            }
+        });
+    });
+
+    return container;
+}

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;
             }
@@ -276,8 +277,9 @@ export function signal(initialValue) {
 
     const s = function (newValue) {
         if (arguments.length > 0) {
-            if (dep.value !== newValue) {
-                dep.value = newValue;
+            const next = typeof newValue === 'function' ? newValue(dep.value) : newValue;
+            if (dep.value !== next) {
+                dep.value = next;
                 dep.version = ++globalVersion;
                 notify(dep);
             }
@@ -311,6 +313,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) {