@cajoa/core 0.11.0 → 0.12.1

package/dist/index.cjs

@@ -20,10 +20,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ErrorBoundary: () => ErrorBoundary,
   For: () => For,
   Fragment: () => Fragment,
   Show: () => Show,
   batch: () => batch,
+  catchError: () => catchError,
   createContext: () => createContext,
   createEffect: () => createEffect,
   createMemo: () => createMemo,
@@ -44,6 +46,19 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/dev.ts
+function isDev() {
+  return globalThis.__CAJOA_DEV__ === true;
+}
+function warn(message) {
+  if (isDev() && typeof console !== "undefined")
+    console.warn(`[cajoa] ${message}`);
+}
+function logError(message, error) {
+  if (isDev() && typeof console !== "undefined")
+    console.error(`[cajoa] ${message}`, error);
+}
+
 // src/reactivity/signal.ts
 var currentOwner = null;
 var currentEffect = null;
@@ -57,6 +72,18 @@ function cleanComputation(c) {
   c.deps.clear();
   clean(c);
 }
+function addCleanup(fn) {
+  currentOwner?.cleanups.push(fn);
+}
+function handleError(error, owner) {
+  for (let o = owner; o; o = o.parent) {
+    if (o.errorHandler) {
+      o.errorHandler(error);
+      return;
+    }
+  }
+  throw error;
+}
 var batchDepth = 0;
 var pending = /* @__PURE__ */ new Set();
 function flush() {
@@ -109,20 +136,27 @@ function createEffect(fn) {
       currentEffect = effect;
       try {
         fn();
+      } catch (error) {
+        handleError(error, effect);
       } finally {
         currentOwner = prevOwner;
         currentEffect = prevEffect;
       }
     }
   };
-  onCleanup(() => {
+  addCleanup(() => {
     effect.disposed = true;
     cleanComputation(effect);
   });
   effect.run();
 }
 function onCleanup(fn) {
-  currentOwner?.cleanups.push(fn);
+  if (!currentOwner) {
+    warn(
+      "onCleanup() was called outside of a component or effect, so this cleanup will never run."
+    );
+  }
+  addCleanup(fn);
 }
 function createRoot(fn) {
   const root = { cleanups: [], parent: currentOwner };
@@ -146,12 +180,48 @@ function onMount(fn) {
     currentEffect = null;
     try {
       fn();
+    } catch (error) {
+      handleError(error, owner);
     } finally {
       currentOwner = prevOwner;
       currentEffect = prevEffect;
     }
   });
 }
+function untrack(fn) {
+  const prev = currentEffect;
+  currentEffect = null;
+  try {
+    return fn();
+  } finally {
+    currentEffect = prev;
+  }
+}
+function catchError(fn, handler) {
+  const owner = {
+    cleanups: [],
+    parent: currentOwner,
+    errorHandler: handler
+  };
+  addCleanup(() => clean(owner));
+  const prevOwner = currentOwner;
+  currentOwner = owner;
+  let result;
+  let thrown = null;
+  try {
+    result = fn();
+  } catch (error) {
+    clean(owner);
+    thrown = { error };
+  } finally {
+    currentOwner = prevOwner;
+  }
+  if (thrown) {
+    handler(thrown.error);
+    return void 0;
+  }
+  return result;
+}
 function createContext(defaultValue) {
   return { id: /* @__PURE__ */ Symbol("cajoa-context"), defaultValue };
 }
@@ -161,7 +231,7 @@ function provide(ctx, value, fn) {
     parent: currentOwner,
     context: /* @__PURE__ */ new Map([[ctx.id, value]])
   };
-  onCleanup(() => clean(owner));
+  addCleanup(() => clean(owner));
   const prev = currentOwner;
   currentOwner = owner;
   try {
@@ -171,20 +241,16 @@ function provide(ctx, value, fn) {
   }
 }
 function useContext(ctx) {
+  if (!currentOwner) {
+    warn(
+      "useContext() was called outside of a component or effect, so it can only return the default value. Call it at the top of your component and use the value later."
+    );
+  }
   for (let o = currentOwner; o; o = o.parent) {
     if (o.context?.has(ctx.id)) return o.context.get(ctx.id);
   }
   return ctx.defaultValue;
 }
-function untrack(fn) {
-  const prev = currentEffect;
-  currentEffect = null;
-  try {
-    return fn();
-  } finally {
-    currentEffect = prev;
-  }
-}
 
 // src/reactivity/memo.ts
 function createMemo(fn) {
@@ -228,11 +294,21 @@ function h(tag, props, ...children) {
   if (onRef) untrack(() => onRef(el));
   return el;
 }
+function materialize(value) {
+  if (typeof value !== "function") return value;
+  const holder = getRenderer().createFragment();
+  appendChildren(holder, [value]);
+  return holder;
+}
 function toNodes(value) {
   const r = getRenderer();
   const out = [];
   for (const v of [value].flat(Infinity)) {
     if (v == null || typeof v === "boolean") continue;
+    if (typeof v === "function") {
+      out.push(materialize(v));
+      continue;
+    }
     out.push(r.isNode(v) ? v : r.createText(String(v)));
   }
   return out;
@@ -273,6 +349,11 @@ function render(component, container) {
   return createRoot((dispose) => {
     const r = getRenderer();
     const node = component();
+    if (typeof node === "function") {
+      throw new Error(
+        "render(): the component returned a function (for example <Show>, <For>, <Router> or <ErrorBoundary>). Wrap it in an element, such as <div>\u2026</div>."
+      );
+    }
     r.clear(container);
     r.insert(container, node);
     return () => {
@@ -304,6 +385,11 @@ function For(props) {
     const nodes = [];
     items.forEach((item, i) => {
       const k = props.key ? props.key(item, i) : item;
+      if (next.has(k)) {
+        warn(
+          `<For> found a duplicate key (${String(k)}). Keys must be unique, otherwise one item replaces another.`
+        );
+      }
       let entry = cache.get(k);
       if (!entry) {
         entry = createRoot((dispose) => ({
@@ -322,6 +408,56 @@ function For(props) {
   };
 }
 
+// src/components/error-boundary.ts
+function resolve2(value) {
+  return typeof value === "function" ? value() : value;
+}
+function ErrorBoundary(props) {
+  const [version, setVersion] = createSignal(0);
+  let failure = null;
+  const caught = (error) => {
+    logError("ErrorBoundary caught an error:", error);
+    props.onError?.(error);
+  };
+  const reset = () => {
+    failure = null;
+    setVersion((v) => v + 1);
+  };
+  const fail = (error) => {
+    caught(error);
+    failure = { error };
+    setVersion((v) => v + 1);
+  };
+  const showFallback = (error) => typeof props.fallback === "function" ? props.fallback(
+    error,
+    reset
+  ) : props.fallback;
+  return () => {
+    version();
+    const current2 = failure;
+    if (current2) return untrack(() => showFallback(current2.error));
+    let creating = true;
+    let early = null;
+    const content = untrack(
+      () => catchError(
+        () => materialize(resolve2(props.children ?? null)),
+        (error) => {
+          if (creating) early = { error };
+          else fail(error);
+        }
+      )
+    );
+    creating = false;
+    const first = early;
+    if (first) {
+      caught(first.error);
+      failure = first;
+      return untrack(() => showFallback(first.error));
+    }
+    return content;
+  };
+}
+
 // src/jsx-runtime.ts
 function jsx(type, props) {
   if (typeof type === "function") return type(props ?? {});
@@ -338,10 +474,12 @@ function Fragment(props) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ErrorBoundary,
   For,
   Fragment,
   Show,
   batch,
+  catchError,
   createContext,
   createEffect,
   createMemo,

package/dist/index.d.cts

@@ -5,6 +5,8 @@ declare function createEffect(fn: () => void): void;
 declare function onCleanup(fn: Cleanup): void;
 declare function createRoot<T>(fn: (dispose: () => void) => T): T;
 declare function onMount(fn: () => void): void;
+declare function untrack<T>(fn: () => T): T;
+declare function catchError<T>(fn: () => T, handler: (error: unknown) => void): T | undefined;
 interface Context<T> {
     readonly id: symbol;
     readonly defaultValue: T;
@@ -12,7 +14,6 @@ interface Context<T> {
 declare function createContext<T>(defaultValue: T): Context<T>;
 declare function provide<T, R>(ctx: Context<T>, value: T, fn: () => R): R;
 declare function useContext<T>(ctx: Context<T>): T;
-declare function untrack<T>(fn: () => T): T;
 
 declare function createMemo<T>(fn: () => T): () => T;
 
@@ -36,11 +37,11 @@ declare function h(tag: string, props: Record<string, any> | null, ...children:
 
 declare function render(component: () => HostNode, container: HostNode): () => void;
 
-type Lazy<T> = T | (() => T);
+type Lazy$1<T> = T | (() => T);
 declare function Show<T>(props: {
-    when: Lazy<T>;
-    children?: Lazy<Child>;
-    fallback?: Lazy<Child>;
+    when: Lazy$1<T>;
+    children?: Lazy$1<Child>;
+    fallback?: Lazy$1<Child>;
 }): () => string | number | boolean | object | null;
 
 declare function For<T>(props: {
@@ -49,6 +50,13 @@ declare function For<T>(props: {
     key?: (item: T, index: number) => unknown;
 }): () => object[];
 
+type Lazy<T> = T | (() => T);
+declare function ErrorBoundary(props: {
+    fallback: Child | ((error: unknown, reset: () => void) => Child);
+    children?: Lazy<Child>;
+    onError?: (error: unknown) => void;
+}): () => unknown;
+
 declare function jsx(type: any, props: Record<string, any> | null): any;
 declare const jsxs: typeof jsx;
 declare const jsxDEV: typeof jsx;
@@ -68,5 +76,5 @@ declare function Fragment(props: {
 declare function setRenderer(renderer: Renderer): void;
 declare function getRenderer(): Renderer;
 
-export { For, Fragment, JSX, Show, batch, createContext, createEffect, createMemo, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
+export { ErrorBoundary, For, Fragment, JSX, Show, batch, catchError, createContext, createEffect, createMemo, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
 export type { Child, Context, HostNode, Renderer };

package/dist/index.d.ts

@@ -5,6 +5,8 @@ declare function createEffect(fn: () => void): void;
 declare function onCleanup(fn: Cleanup): void;
 declare function createRoot<T>(fn: (dispose: () => void) => T): T;
 declare function onMount(fn: () => void): void;
+declare function untrack<T>(fn: () => T): T;
+declare function catchError<T>(fn: () => T, handler: (error: unknown) => void): T | undefined;
 interface Context<T> {
     readonly id: symbol;
     readonly defaultValue: T;
@@ -12,7 +14,6 @@ interface Context<T> {
 declare function createContext<T>(defaultValue: T): Context<T>;
 declare function provide<T, R>(ctx: Context<T>, value: T, fn: () => R): R;
 declare function useContext<T>(ctx: Context<T>): T;
-declare function untrack<T>(fn: () => T): T;
 
 declare function createMemo<T>(fn: () => T): () => T;
 
@@ -36,11 +37,11 @@ declare function h(tag: string, props: Record<string, any> | null, ...children:
 
 declare function render(component: () => HostNode, container: HostNode): () => void;
 
-type Lazy<T> = T | (() => T);
+type Lazy$1<T> = T | (() => T);
 declare function Show<T>(props: {
-    when: Lazy<T>;
-    children?: Lazy<Child>;
-    fallback?: Lazy<Child>;
+    when: Lazy$1<T>;
+    children?: Lazy$1<Child>;
+    fallback?: Lazy$1<Child>;
 }): () => string | number | boolean | object | null;
 
 declare function For<T>(props: {
@@ -49,6 +50,13 @@ declare function For<T>(props: {
     key?: (item: T, index: number) => unknown;
 }): () => object[];
 
+type Lazy<T> = T | (() => T);
+declare function ErrorBoundary(props: {
+    fallback: Child | ((error: unknown, reset: () => void) => Child);
+    children?: Lazy<Child>;
+    onError?: (error: unknown) => void;
+}): () => unknown;
+
 declare function jsx(type: any, props: Record<string, any> | null): any;
 declare const jsxs: typeof jsx;
 declare const jsxDEV: typeof jsx;
@@ -68,5 +76,5 @@ declare function Fragment(props: {
 declare function setRenderer(renderer: Renderer): void;
 declare function getRenderer(): Renderer;
 
-export { For, Fragment, JSX, Show, batch, createContext, createEffect, createMemo, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
+export { ErrorBoundary, For, Fragment, JSX, Show, batch, catchError, createContext, createEffect, createMemo, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
 export type { Child, Context, HostNode, Renderer };

package/dist/index.js

@@ -1,3 +1,16 @@
+// src/dev.ts
+function isDev() {
+  return globalThis.__CAJOA_DEV__ === true;
+}
+function warn(message) {
+  if (isDev() && typeof console !== "undefined")
+    console.warn(`[cajoa] ${message}`);
+}
+function logError(message, error) {
+  if (isDev() && typeof console !== "undefined")
+    console.error(`[cajoa] ${message}`, error);
+}
+
 // src/reactivity/signal.ts
 var currentOwner = null;
 var currentEffect = null;
@@ -11,6 +24,18 @@ function cleanComputation(c) {
   c.deps.clear();
   clean(c);
 }
+function addCleanup(fn) {
+  currentOwner?.cleanups.push(fn);
+}
+function handleError(error, owner) {
+  for (let o = owner; o; o = o.parent) {
+    if (o.errorHandler) {
+      o.errorHandler(error);
+      return;
+    }
+  }
+  throw error;
+}
 var batchDepth = 0;
 var pending = /* @__PURE__ */ new Set();
 function flush() {
@@ -63,20 +88,27 @@ function createEffect(fn) {
       currentEffect = effect;
       try {
         fn();
+      } catch (error) {
+        handleError(error, effect);
       } finally {
         currentOwner = prevOwner;
         currentEffect = prevEffect;
       }
     }
   };
-  onCleanup(() => {
+  addCleanup(() => {
     effect.disposed = true;
     cleanComputation(effect);
   });
   effect.run();
 }
 function onCleanup(fn) {
-  currentOwner?.cleanups.push(fn);
+  if (!currentOwner) {
+    warn(
+      "onCleanup() was called outside of a component or effect, so this cleanup will never run."
+    );
+  }
+  addCleanup(fn);
 }
 function createRoot(fn) {
   const root = { cleanups: [], parent: currentOwner };
@@ -100,12 +132,48 @@ function onMount(fn) {
     currentEffect = null;
     try {
       fn();
+    } catch (error) {
+      handleError(error, owner);
     } finally {
       currentOwner = prevOwner;
       currentEffect = prevEffect;
     }
   });
 }
+function untrack(fn) {
+  const prev = currentEffect;
+  currentEffect = null;
+  try {
+    return fn();
+  } finally {
+    currentEffect = prev;
+  }
+}
+function catchError(fn, handler) {
+  const owner = {
+    cleanups: [],
+    parent: currentOwner,
+    errorHandler: handler
+  };
+  addCleanup(() => clean(owner));
+  const prevOwner = currentOwner;
+  currentOwner = owner;
+  let result;
+  let thrown = null;
+  try {
+    result = fn();
+  } catch (error) {
+    clean(owner);
+    thrown = { error };
+  } finally {
+    currentOwner = prevOwner;
+  }
+  if (thrown) {
+    handler(thrown.error);
+    return void 0;
+  }
+  return result;
+}
 function createContext(defaultValue) {
   return { id: /* @__PURE__ */ Symbol("cajoa-context"), defaultValue };
 }
@@ -115,7 +183,7 @@ function provide(ctx, value, fn) {
     parent: currentOwner,
     context: /* @__PURE__ */ new Map([[ctx.id, value]])
   };
-  onCleanup(() => clean(owner));
+  addCleanup(() => clean(owner));
   const prev = currentOwner;
   currentOwner = owner;
   try {
@@ -125,20 +193,16 @@ function provide(ctx, value, fn) {
   }
 }
 function useContext(ctx) {
+  if (!currentOwner) {
+    warn(
+      "useContext() was called outside of a component or effect, so it can only return the default value. Call it at the top of your component and use the value later."
+    );
+  }
   for (let o = currentOwner; o; o = o.parent) {
     if (o.context?.has(ctx.id)) return o.context.get(ctx.id);
   }
   return ctx.defaultValue;
 }
-function untrack(fn) {
-  const prev = currentEffect;
-  currentEffect = null;
-  try {
-    return fn();
-  } finally {
-    currentEffect = prev;
-  }
-}
 
 // src/reactivity/memo.ts
 function createMemo(fn) {
@@ -182,11 +246,21 @@ function h(tag, props, ...children) {
   if (onRef) untrack(() => onRef(el));
   return el;
 }
+function materialize(value) {
+  if (typeof value !== "function") return value;
+  const holder = getRenderer().createFragment();
+  appendChildren(holder, [value]);
+  return holder;
+}
 function toNodes(value) {
   const r = getRenderer();
   const out = [];
   for (const v of [value].flat(Infinity)) {
     if (v == null || typeof v === "boolean") continue;
+    if (typeof v === "function") {
+      out.push(materialize(v));
+      continue;
+    }
     out.push(r.isNode(v) ? v : r.createText(String(v)));
   }
   return out;
@@ -227,6 +301,11 @@ function render(component, container) {
   return createRoot((dispose) => {
     const r = getRenderer();
     const node = component();
+    if (typeof node === "function") {
+      throw new Error(
+        "render(): the component returned a function (for example <Show>, <For>, <Router> or <ErrorBoundary>). Wrap it in an element, such as <div>\u2026</div>."
+      );
+    }
     r.clear(container);
     r.insert(container, node);
     return () => {
@@ -258,6 +337,11 @@ function For(props) {
     const nodes = [];
     items.forEach((item, i) => {
       const k = props.key ? props.key(item, i) : item;
+      if (next.has(k)) {
+        warn(
+          `<For> found a duplicate key (${String(k)}). Keys must be unique, otherwise one item replaces another.`
+        );
+      }
       let entry = cache.get(k);
       if (!entry) {
         entry = createRoot((dispose) => ({
@@ -276,6 +360,56 @@ function For(props) {
   };
 }
 
+// src/components/error-boundary.ts
+function resolve2(value) {
+  return typeof value === "function" ? value() : value;
+}
+function ErrorBoundary(props) {
+  const [version, setVersion] = createSignal(0);
+  let failure = null;
+  const caught = (error) => {
+    logError("ErrorBoundary caught an error:", error);
+    props.onError?.(error);
+  };
+  const reset = () => {
+    failure = null;
+    setVersion((v) => v + 1);
+  };
+  const fail = (error) => {
+    caught(error);
+    failure = { error };
+    setVersion((v) => v + 1);
+  };
+  const showFallback = (error) => typeof props.fallback === "function" ? props.fallback(
+    error,
+    reset
+  ) : props.fallback;
+  return () => {
+    version();
+    const current2 = failure;
+    if (current2) return untrack(() => showFallback(current2.error));
+    let creating = true;
+    let early = null;
+    const content = untrack(
+      () => catchError(
+        () => materialize(resolve2(props.children ?? null)),
+        (error) => {
+          if (creating) early = { error };
+          else fail(error);
+        }
+      )
+    );
+    creating = false;
+    const first = early;
+    if (first) {
+      caught(first.error);
+      failure = first;
+      return untrack(() => showFallback(first.error));
+    }
+    return content;
+  };
+}
+
 // src/jsx-runtime.ts
 function jsx(type, props) {
   if (typeof type === "function") return type(props ?? {});
@@ -291,10 +425,12 @@ function Fragment(props) {
   return frag;
 }
 export {
+  ErrorBoundary,
   For,
   Fragment,
   Show,
   batch,
+  catchError,
   createContext,
   createEffect,
   createMemo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cajoa/core",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Cajoa core: signals, JSX runtime and the renderer interface.",
   "type": "module",
   "main": "./dist/index.cjs",