@cajoa/core 0.13.0 → 0.14.0

package/dist/index.cjs

@@ -20,10 +20,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Dynamic: () => Dynamic,
   ErrorBoundary: () => ErrorBoundary,
   For: () => For,
   Fragment: () => Fragment,
+  Match: () => Match,
+  Portal: () => Portal,
   Show: () => Show,
+  Suspense: () => Suspense,
+  Switch: () => Switch,
   batch: () => batch,
   catchError: () => catchError,
   createContext: () => createContext,
@@ -37,6 +42,7 @@ __export(index_exports, {
   jsx: () => jsx,
   jsxDEV: () => jsxDEV,
   jsxs: () => jsxs,
+  lazy: () => lazy,
   onCleanup: () => onCleanup,
   onMount: () => onMount,
   provide: () => provide,
@@ -48,12 +54,22 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/dev.ts
+var muted = 0;
 function isDev() {
   return globalThis.__CAJOA_DEV__ === true;
 }
+function quietly(fn) {
+  muted++;
+  try {
+    return fn();
+  } finally {
+    muted--;
+  }
+}
 function warn(message) {
-  if (isDev() && typeof console !== "undefined")
+  if (muted === 0 && isDev() && typeof console !== "undefined") {
     console.warn(`[cajoa] ${message}`);
+  }
 }
 function logError(message, error) {
   if (isDev() && typeof console !== "undefined")
@@ -260,6 +276,13 @@ function createMemo(fn) {
   return value;
 }
 
+// src/reactivity/suspense.ts
+var SuspenseContext = createContext(null);
+function trackPending() {
+  const state = quietly(() => useContext(SuspenseContext));
+  return state ? () => state.add() : void 0;
+}
+
 // src/reactivity/resource.ts
 function isPromiseLike(value) {
   return typeof value?.then === "function";
@@ -273,8 +296,12 @@ function createResource(a, b) {
   const [loading, setLoading] = createSignal(false);
   const [version, setVersion] = createSignal(0);
   let run = 0;
+  const track = trackPending();
+  let release;
+  let settled = false;
   const finish = (id, outcome) => {
     if (id !== run) return;
+    settled = true;
     batch(() => {
       setLoading(false);
       if ("error" in outcome) {
@@ -284,6 +311,8 @@ function createResource(a, b) {
         setData(() => outcome.value);
       }
     });
+    release?.();
+    release = void 0;
   };
   createEffect(() => {
     const s = source();
@@ -292,6 +321,8 @@ function createResource(a, b) {
     const id = run;
     onCleanup(() => {
       run++;
+      release?.();
+      release = void 0;
     });
     if (s === false || s === null || s === void 0) {
       batch(() => {
@@ -301,6 +332,7 @@ function createResource(a, b) {
       });
       return;
     }
+    if (!settled && track && !release) release = track();
     setLoading(true);
     setFailure(null);
     let result;
@@ -537,6 +569,32 @@ function ErrorBoundary(props) {
   };
 }
 
+// src/components/switch.ts
+function resolve3(value) {
+  return typeof value === "function" ? value() : value;
+}
+function Match(props) {
+  return { __match: true, when: props.when, children: props.children };
+}
+var isMatch = (value) => typeof value === "object" && value !== null && value.__match === true;
+function Switch(props) {
+  const matches = [props.children].flat(Infinity).filter(isMatch);
+  const selected = createMemo(() => {
+    for (let i = 0; i < matches.length; i++) {
+      if (resolve3(matches[i].when)) return i;
+    }
+    return -1;
+  });
+  return () => {
+    const i = selected();
+    return untrack(
+      () => resolve3(
+        i === -1 ? props.fallback ?? null : matches[i].children ?? null
+      )
+    );
+  };
+}
+
 // src/jsx-runtime.ts
 function jsx(type, props) {
   if (typeof type === "function") return type(props ?? {});
@@ -551,12 +609,127 @@ function Fragment(props) {
   appendChildren(frag, props.children === void 0 ? [] : [props.children]);
   return frag;
 }
+
+// src/components/dynamic.ts
+function Dynamic(props) {
+  const { is, ...rest } = props;
+  const read = typeof is === "function" ? is : () => is;
+  return () => {
+    const target = read();
+    if (target == null || target === false) return null;
+    if (typeof target !== "string" && typeof target !== "function") {
+      throw new Error(
+        `<Dynamic>: \`is\` must be a tag name, or a function that returns a tag name or a component (got ${typeof target}). To render a component directly, write is={() => MyComponent}.`
+      );
+    }
+    return untrack(() => jsx(target, rest));
+  };
+}
+
+// src/components/portal.ts
+function resolve4(value) {
+  return typeof value === "function" ? value() : value;
+}
+function Portal(props) {
+  const r = getRenderer();
+  const mount = props.mount ?? r.portalRoot?.();
+  if (!mount) {
+    throw new Error(
+      "<Portal>: nowhere to render into. Pass a `mount` element (this renderer has no default)."
+    );
+  }
+  const start = r.createMarker();
+  const end = r.createMarker();
+  r.insert(mount, start);
+  r.insert(
+    mount,
+    materialize(() => resolve4(props.children ?? null))
+  );
+  r.insert(mount, end);
+  onCleanup(() => {
+    let node = r.nextSibling(start);
+    while (node && node !== end) {
+      const next = r.nextSibling(node);
+      r.remove(node);
+      node = next;
+    }
+    r.remove(start);
+    r.remove(end);
+  });
+  return null;
+}
+
+// src/components/suspense.ts
+function resolve5(value) {
+  return typeof value === "function" ? value() : value;
+}
+function Suspense(props) {
+  const [pending2, setPending] = createSignal(0);
+  const [ready, setReady] = createSignal(false);
+  const state = {
+    add() {
+      setPending((n) => n + 1);
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        setPending((n) => n - 1);
+      };
+    }
+  };
+  const content = untrack(
+    () => provide(
+      SuspenseContext,
+      state,
+      () => materialize(resolve5(props.children ?? null))
+    )
+  );
+  createEffect(() => {
+    if (pending2() === 0) setReady(true);
+  });
+  return () => ready() ? content : untrack(() => resolve5(props.fallback ?? null));
+}
+
+// src/components/lazy.ts
+function lazy(loader) {
+  let promise;
+  let component;
+  let failure = null;
+  const load = () => promise ??= loader().then(
+    (module2) => {
+      component = typeof module2 === "function" ? module2 : module2.default;
+    },
+    (error) => {
+      failure = { error };
+    }
+  );
+  return function LazyComponent(props) {
+    if (component) return component(props);
+    if (failure) throw failure.error;
+    const release = trackPending()?.();
+    const [done, setDone] = createSignal(false);
+    load().then(() => {
+      setDone(true);
+      release?.();
+    });
+    return () => {
+      done();
+      if (failure) throw failure.error;
+      return component ? untrack(() => component(props)) : null;
+    };
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Dynamic,
   ErrorBoundary,
   For,
   Fragment,
+  Match,
+  Portal,
   Show,
+  Suspense,
+  Switch,
   batch,
   catchError,
   createContext,
@@ -570,6 +743,7 @@ function Fragment(props) {
   jsx,
   jsxDEV,
   jsxs,
+  lazy,
   onCleanup,
   onMount,
   provide,

package/dist/index.d.cts

@@ -41,6 +41,7 @@ interface Renderer<N = any> {
     remove(node: N): void;
     nextSibling(node: N): N | null;
     parentNode(node: N): N | null;
+    portalRoot?(): N;
     clear(parent: N): void;
     setProp(el: N, name: string, value: unknown): void;
 }
@@ -50,11 +51,11 @@ declare function h(tag: string, props: Record<string, any> | null, ...children:
 
 declare function render(component: () => HostNode, container: HostNode): () => void;
 
-type Lazy$1<T> = T | (() => T);
+type Lazy$4<T> = T | (() => T);
 declare function Show<T>(props: {
-    when: Lazy$1<T>;
-    children?: Lazy$1<Child>;
-    fallback?: Lazy$1<Child>;
+    when: Lazy$4<T>;
+    children?: Lazy$4<Child>;
+    fallback?: Lazy$4<Child>;
 }): () => string | number | boolean | object | null;
 
 declare function For<T>(props: {
@@ -63,13 +64,51 @@ declare function For<T>(props: {
     key?: (item: T, index: number) => unknown;
 }): () => object[];
 
-type Lazy<T> = T | (() => T);
+type Lazy$3<T> = T | (() => T);
 declare function ErrorBoundary(props: {
     fallback: Child | ((error: unknown, reset: () => void) => Child);
-    children?: Lazy<Child>;
+    children?: Lazy$3<Child>;
     onError?: (error: unknown) => void;
 }): () => unknown;
 
+type Lazy$2<T> = T | (() => T);
+interface MatchDef {
+    __match: true;
+    when: Lazy$2<unknown>;
+    children?: Lazy$2<Child>;
+}
+declare function Match(props: {
+    when: Lazy$2<unknown>;
+    children?: Lazy$2<Child>;
+}): MatchDef;
+declare function Switch(props: {
+    fallback?: Lazy$2<Child>;
+    children?: unknown;
+}): () => string | number | boolean | object | null;
+
+type Target = string | ((props: any) => unknown) | null | undefined | false;
+declare function Dynamic(props: {
+    is: Target | (() => Target);
+    [key: string]: unknown;
+}): () => any;
+
+type Lazy$1<T> = T | (() => T);
+declare function Portal(props: {
+    mount?: HostNode;
+    children?: Lazy$1<Child>;
+}): null;
+
+type Lazy<T> = T | (() => T);
+declare function Suspense(props: {
+    fallback?: Lazy<Child>;
+    children?: Lazy<Child>;
+}): () => unknown;
+
+type Component<P> = (props: P) => unknown;
+declare function lazy<P = Record<string, unknown>>(loader: () => Promise<{
+    default: Component<P>;
+} | Component<P>>): Component<P>;
+
 declare function jsx(type: any, props: Record<string, any> | null): any;
 declare const jsxs: typeof jsx;
 declare const jsxDEV: typeof jsx;
@@ -89,5 +128,5 @@ declare function Fragment(props: {
 declare function setRenderer(renderer: Renderer): void;
 declare function getRenderer(): Renderer;
 
-export { ErrorBoundary, For, Fragment, JSX, Show, batch, catchError, createContext, createEffect, createMemo, createResource, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
-export type { Child, Context, HostNode, Renderer, Resource, ResourceActions };
+export { Dynamic, ErrorBoundary, For, Fragment, JSX, Match, Portal, Show, Suspense, Switch, batch, catchError, createContext, createEffect, createMemo, createResource, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, lazy, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
+export type { Child, Context, HostNode, MatchDef, Renderer, Resource, ResourceActions };

package/dist/index.d.ts

@@ -41,6 +41,7 @@ interface Renderer<N = any> {
     remove(node: N): void;
     nextSibling(node: N): N | null;
     parentNode(node: N): N | null;
+    portalRoot?(): N;
     clear(parent: N): void;
     setProp(el: N, name: string, value: unknown): void;
 }
@@ -50,11 +51,11 @@ declare function h(tag: string, props: Record<string, any> | null, ...children:
 
 declare function render(component: () => HostNode, container: HostNode): () => void;
 
-type Lazy$1<T> = T | (() => T);
+type Lazy$4<T> = T | (() => T);
 declare function Show<T>(props: {
-    when: Lazy$1<T>;
-    children?: Lazy$1<Child>;
-    fallback?: Lazy$1<Child>;
+    when: Lazy$4<T>;
+    children?: Lazy$4<Child>;
+    fallback?: Lazy$4<Child>;
 }): () => string | number | boolean | object | null;
 
 declare function For<T>(props: {
@@ -63,13 +64,51 @@ declare function For<T>(props: {
     key?: (item: T, index: number) => unknown;
 }): () => object[];
 
-type Lazy<T> = T | (() => T);
+type Lazy$3<T> = T | (() => T);
 declare function ErrorBoundary(props: {
     fallback: Child | ((error: unknown, reset: () => void) => Child);
-    children?: Lazy<Child>;
+    children?: Lazy$3<Child>;
     onError?: (error: unknown) => void;
 }): () => unknown;
 
+type Lazy$2<T> = T | (() => T);
+interface MatchDef {
+    __match: true;
+    when: Lazy$2<unknown>;
+    children?: Lazy$2<Child>;
+}
+declare function Match(props: {
+    when: Lazy$2<unknown>;
+    children?: Lazy$2<Child>;
+}): MatchDef;
+declare function Switch(props: {
+    fallback?: Lazy$2<Child>;
+    children?: unknown;
+}): () => string | number | boolean | object | null;
+
+type Target = string | ((props: any) => unknown) | null | undefined | false;
+declare function Dynamic(props: {
+    is: Target | (() => Target);
+    [key: string]: unknown;
+}): () => any;
+
+type Lazy$1<T> = T | (() => T);
+declare function Portal(props: {
+    mount?: HostNode;
+    children?: Lazy$1<Child>;
+}): null;
+
+type Lazy<T> = T | (() => T);
+declare function Suspense(props: {
+    fallback?: Lazy<Child>;
+    children?: Lazy<Child>;
+}): () => unknown;
+
+type Component<P> = (props: P) => unknown;
+declare function lazy<P = Record<string, unknown>>(loader: () => Promise<{
+    default: Component<P>;
+} | Component<P>>): Component<P>;
+
 declare function jsx(type: any, props: Record<string, any> | null): any;
 declare const jsxs: typeof jsx;
 declare const jsxDEV: typeof jsx;
@@ -89,5 +128,5 @@ declare function Fragment(props: {
 declare function setRenderer(renderer: Renderer): void;
 declare function getRenderer(): Renderer;
 
-export { ErrorBoundary, For, Fragment, JSX, Show, batch, catchError, createContext, createEffect, createMemo, createResource, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
-export type { Child, Context, HostNode, Renderer, Resource, ResourceActions };
+export { Dynamic, ErrorBoundary, For, Fragment, JSX, Match, Portal, Show, Suspense, Switch, batch, catchError, createContext, createEffect, createMemo, createResource, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, lazy, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
+export type { Child, Context, HostNode, MatchDef, Renderer, Resource, ResourceActions };

package/dist/index.js

@@ -1,10 +1,20 @@
 // src/dev.ts
+var muted = 0;
 function isDev() {
   return globalThis.__CAJOA_DEV__ === true;
 }
+function quietly(fn) {
+  muted++;
+  try {
+    return fn();
+  } finally {
+    muted--;
+  }
+}
 function warn(message) {
-  if (isDev() && typeof console !== "undefined")
+  if (muted === 0 && isDev() && typeof console !== "undefined") {
     console.warn(`[cajoa] ${message}`);
+  }
 }
 function logError(message, error) {
   if (isDev() && typeof console !== "undefined")
@@ -211,6 +221,13 @@ function createMemo(fn) {
   return value;
 }
 
+// src/reactivity/suspense.ts
+var SuspenseContext = createContext(null);
+function trackPending() {
+  const state = quietly(() => useContext(SuspenseContext));
+  return state ? () => state.add() : void 0;
+}
+
 // src/reactivity/resource.ts
 function isPromiseLike(value) {
   return typeof value?.then === "function";
@@ -224,8 +241,12 @@ function createResource(a, b) {
   const [loading, setLoading] = createSignal(false);
   const [version, setVersion] = createSignal(0);
   let run = 0;
+  const track = trackPending();
+  let release;
+  let settled = false;
   const finish = (id, outcome) => {
     if (id !== run) return;
+    settled = true;
     batch(() => {
       setLoading(false);
       if ("error" in outcome) {
@@ -235,6 +256,8 @@ function createResource(a, b) {
         setData(() => outcome.value);
       }
     });
+    release?.();
+    release = void 0;
   };
   createEffect(() => {
     const s = source();
@@ -243,6 +266,8 @@ function createResource(a, b) {
     const id = run;
     onCleanup(() => {
       run++;
+      release?.();
+      release = void 0;
     });
     if (s === false || s === null || s === void 0) {
       batch(() => {
@@ -252,6 +277,7 @@ function createResource(a, b) {
       });
       return;
     }
+    if (!settled && track && !release) release = track();
     setLoading(true);
     setFailure(null);
     let result;
@@ -488,6 +514,32 @@ function ErrorBoundary(props) {
   };
 }
 
+// src/components/switch.ts
+function resolve3(value) {
+  return typeof value === "function" ? value() : value;
+}
+function Match(props) {
+  return { __match: true, when: props.when, children: props.children };
+}
+var isMatch = (value) => typeof value === "object" && value !== null && value.__match === true;
+function Switch(props) {
+  const matches = [props.children].flat(Infinity).filter(isMatch);
+  const selected = createMemo(() => {
+    for (let i = 0; i < matches.length; i++) {
+      if (resolve3(matches[i].when)) return i;
+    }
+    return -1;
+  });
+  return () => {
+    const i = selected();
+    return untrack(
+      () => resolve3(
+        i === -1 ? props.fallback ?? null : matches[i].children ?? null
+      )
+    );
+  };
+}
+
 // src/jsx-runtime.ts
 function jsx(type, props) {
   if (typeof type === "function") return type(props ?? {});
@@ -502,11 +554,126 @@ function Fragment(props) {
   appendChildren(frag, props.children === void 0 ? [] : [props.children]);
   return frag;
 }
+
+// src/components/dynamic.ts
+function Dynamic(props) {
+  const { is, ...rest } = props;
+  const read = typeof is === "function" ? is : () => is;
+  return () => {
+    const target = read();
+    if (target == null || target === false) return null;
+    if (typeof target !== "string" && typeof target !== "function") {
+      throw new Error(
+        `<Dynamic>: \`is\` must be a tag name, or a function that returns a tag name or a component (got ${typeof target}). To render a component directly, write is={() => MyComponent}.`
+      );
+    }
+    return untrack(() => jsx(target, rest));
+  };
+}
+
+// src/components/portal.ts
+function resolve4(value) {
+  return typeof value === "function" ? value() : value;
+}
+function Portal(props) {
+  const r = getRenderer();
+  const mount = props.mount ?? r.portalRoot?.();
+  if (!mount) {
+    throw new Error(
+      "<Portal>: nowhere to render into. Pass a `mount` element (this renderer has no default)."
+    );
+  }
+  const start = r.createMarker();
+  const end = r.createMarker();
+  r.insert(mount, start);
+  r.insert(
+    mount,
+    materialize(() => resolve4(props.children ?? null))
+  );
+  r.insert(mount, end);
+  onCleanup(() => {
+    let node = r.nextSibling(start);
+    while (node && node !== end) {
+      const next = r.nextSibling(node);
+      r.remove(node);
+      node = next;
+    }
+    r.remove(start);
+    r.remove(end);
+  });
+  return null;
+}
+
+// src/components/suspense.ts
+function resolve5(value) {
+  return typeof value === "function" ? value() : value;
+}
+function Suspense(props) {
+  const [pending2, setPending] = createSignal(0);
+  const [ready, setReady] = createSignal(false);
+  const state = {
+    add() {
+      setPending((n) => n + 1);
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        setPending((n) => n - 1);
+      };
+    }
+  };
+  const content = untrack(
+    () => provide(
+      SuspenseContext,
+      state,
+      () => materialize(resolve5(props.children ?? null))
+    )
+  );
+  createEffect(() => {
+    if (pending2() === 0) setReady(true);
+  });
+  return () => ready() ? content : untrack(() => resolve5(props.fallback ?? null));
+}
+
+// src/components/lazy.ts
+function lazy(loader) {
+  let promise;
+  let component;
+  let failure = null;
+  const load = () => promise ??= loader().then(
+    (module) => {
+      component = typeof module === "function" ? module : module.default;
+    },
+    (error) => {
+      failure = { error };
+    }
+  );
+  return function LazyComponent(props) {
+    if (component) return component(props);
+    if (failure) throw failure.error;
+    const release = trackPending()?.();
+    const [done, setDone] = createSignal(false);
+    load().then(() => {
+      setDone(true);
+      release?.();
+    });
+    return () => {
+      done();
+      if (failure) throw failure.error;
+      return component ? untrack(() => component(props)) : null;
+    };
+  };
+}
 export {
+  Dynamic,
   ErrorBoundary,
   For,
   Fragment,
+  Match,
+  Portal,
   Show,
+  Suspense,
+  Switch,
   batch,
   catchError,
   createContext,
@@ -520,6 +687,7 @@ export {
   jsx,
   jsxDEV,
   jsxs,
+  lazy,
   onCleanup,
   onMount,
   provide,

package/package.json

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