@cajoa/core 0.12.0 → 0.13.0

package/dist/index.cjs

@@ -29,6 +29,7 @@ __export(index_exports, {
   createContext: () => createContext,
   createEffect: () => createEffect,
   createMemo: () => createMemo,
+  createResource: () => createResource,
   createRoot: () => createRoot,
   createSignal: () => createSignal,
   getRenderer: () => getRenderer,
@@ -259,6 +260,84 @@ function createMemo(fn) {
   return value;
 }
 
+// src/reactivity/resource.ts
+function isPromiseLike(value) {
+  return typeof value?.then === "function";
+}
+function createResource(a, b) {
+  const hasSource = typeof b === "function";
+  const source = hasSource ? a : () => true;
+  const fetcher = hasSource ? b : a;
+  const [data, setData] = createSignal(void 0);
+  const [failure, setFailure] = createSignal(null);
+  const [loading, setLoading] = createSignal(false);
+  const [version, setVersion] = createSignal(0);
+  let run = 0;
+  const finish = (id, outcome) => {
+    if (id !== run) return;
+    batch(() => {
+      setLoading(false);
+      if ("error" in outcome) {
+        setFailure({ error: outcome.error });
+      } else {
+        setFailure(null);
+        setData(() => outcome.value);
+      }
+    });
+  };
+  createEffect(() => {
+    const s = source();
+    version();
+    run++;
+    const id = run;
+    onCleanup(() => {
+      run++;
+    });
+    if (s === false || s === null || s === void 0) {
+      batch(() => {
+        setLoading(false);
+        setFailure(null);
+        setData(() => void 0);
+      });
+      return;
+    }
+    setLoading(true);
+    setFailure(null);
+    let result;
+    try {
+      result = untrack(() => fetcher(s));
+    } catch (error) {
+      finish(id, { error });
+      return;
+    }
+    if (isPromiseLike(result)) {
+      result.then(
+        (value) => finish(id, { value }),
+        (error) => finish(id, { error })
+      );
+    } else {
+      finish(id, { value: result });
+    }
+  });
+  const resource = (() => {
+    const failed = failure();
+    if (failed) throw failed.error;
+    return data();
+  });
+  resource.loading = loading;
+  resource.error = () => failure()?.error;
+  return [
+    resource,
+    {
+      refetch: () => setVersion((v) => v + 1),
+      mutate: (value) => batch(() => {
+        setFailure(null);
+        setData(() => value);
+      })
+    }
+  ];
+}
+
 // src/renderer/index.ts
 var current = null;
 function setRenderer(renderer) {
@@ -294,11 +373,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;
@@ -400,11 +489,7 @@ function For(props) {
 
 // src/components/error-boundary.ts
 function resolve2(value) {
-  let current2 = value;
-  while (typeof current2 === "function") {
-    current2 = current2();
-  }
-  return current2;
+  return typeof value === "function" ? value() : value;
 }
 function ErrorBoundary(props) {
   const [version, setVersion] = createSignal(0);
@@ -434,7 +519,7 @@ function ErrorBoundary(props) {
     let early = null;
     const content = untrack(
       () => catchError(
-        () => resolve2(props.children ?? null),
+        () => materialize(resolve2(props.children ?? null)),
         (error) => {
           if (creating) early = { error };
           else fail(error);
@@ -477,6 +562,7 @@ function Fragment(props) {
   createContext,
   createEffect,
   createMemo,
+  createResource,
   createRoot,
   createSignal,
   getRenderer,

package/dist/index.d.cts

@@ -17,6 +17,19 @@ declare function useContext<T>(ctx: Context<T>): T;
 
 declare function createMemo<T>(fn: () => T): () => T;
 
+interface Resource<T> {
+    (): T | undefined;
+    loading: () => boolean;
+    error: () => unknown;
+}
+interface ResourceActions<T> {
+    refetch: () => void;
+    mutate(value: T | undefined): void;
+}
+type ResourceTuple<T> = [Resource<T>, ResourceActions<T>];
+declare function createResource<T>(fetcher: () => T | Promise<T>): ResourceTuple<T>;
+declare function createResource<T, S>(source: () => S | false | null | undefined, fetcher: (source: S) => T | Promise<T>): ResourceTuple<T>;
+
 type HostNode = object;
 interface Renderer<N = any> {
     createElement(tag: string): N;
@@ -55,7 +68,7 @@ declare function ErrorBoundary(props: {
     fallback: Child | ((error: unknown, reset: () => void) => Child);
     children?: Lazy<Child>;
     onError?: (error: unknown) => void;
-}): () => Child;
+}): () => unknown;
 
 declare function jsx(type: any, props: Record<string, any> | null): any;
 declare const jsxs: typeof jsx;
@@ -76,5 +89,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, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
-export type { Child, Context, HostNode, 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 };

package/dist/index.d.ts

@@ -17,6 +17,19 @@ declare function useContext<T>(ctx: Context<T>): T;
 
 declare function createMemo<T>(fn: () => T): () => T;
 
+interface Resource<T> {
+    (): T | undefined;
+    loading: () => boolean;
+    error: () => unknown;
+}
+interface ResourceActions<T> {
+    refetch: () => void;
+    mutate(value: T | undefined): void;
+}
+type ResourceTuple<T> = [Resource<T>, ResourceActions<T>];
+declare function createResource<T>(fetcher: () => T | Promise<T>): ResourceTuple<T>;
+declare function createResource<T, S>(source: () => S | false | null | undefined, fetcher: (source: S) => T | Promise<T>): ResourceTuple<T>;
+
 type HostNode = object;
 interface Renderer<N = any> {
     createElement(tag: string): N;
@@ -55,7 +68,7 @@ declare function ErrorBoundary(props: {
     fallback: Child | ((error: unknown, reset: () => void) => Child);
     children?: Lazy<Child>;
     onError?: (error: unknown) => void;
-}): () => Child;
+}): () => unknown;
 
 declare function jsx(type: any, props: Record<string, any> | null): any;
 declare const jsxs: typeof jsx;
@@ -76,5 +89,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, createRoot, createSignal, getRenderer, h, jsx, jsxDEV, jsxs, onCleanup, onMount, provide, render, setRenderer, untrack, useContext };
-export type { Child, Context, HostNode, 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 };

package/dist/index.js

@@ -211,6 +211,84 @@ function createMemo(fn) {
   return value;
 }
 
+// src/reactivity/resource.ts
+function isPromiseLike(value) {
+  return typeof value?.then === "function";
+}
+function createResource(a, b) {
+  const hasSource = typeof b === "function";
+  const source = hasSource ? a : () => true;
+  const fetcher = hasSource ? b : a;
+  const [data, setData] = createSignal(void 0);
+  const [failure, setFailure] = createSignal(null);
+  const [loading, setLoading] = createSignal(false);
+  const [version, setVersion] = createSignal(0);
+  let run = 0;
+  const finish = (id, outcome) => {
+    if (id !== run) return;
+    batch(() => {
+      setLoading(false);
+      if ("error" in outcome) {
+        setFailure({ error: outcome.error });
+      } else {
+        setFailure(null);
+        setData(() => outcome.value);
+      }
+    });
+  };
+  createEffect(() => {
+    const s = source();
+    version();
+    run++;
+    const id = run;
+    onCleanup(() => {
+      run++;
+    });
+    if (s === false || s === null || s === void 0) {
+      batch(() => {
+        setLoading(false);
+        setFailure(null);
+        setData(() => void 0);
+      });
+      return;
+    }
+    setLoading(true);
+    setFailure(null);
+    let result;
+    try {
+      result = untrack(() => fetcher(s));
+    } catch (error) {
+      finish(id, { error });
+      return;
+    }
+    if (isPromiseLike(result)) {
+      result.then(
+        (value) => finish(id, { value }),
+        (error) => finish(id, { error })
+      );
+    } else {
+      finish(id, { value: result });
+    }
+  });
+  const resource = (() => {
+    const failed = failure();
+    if (failed) throw failed.error;
+    return data();
+  });
+  resource.loading = loading;
+  resource.error = () => failure()?.error;
+  return [
+    resource,
+    {
+      refetch: () => setVersion((v) => v + 1),
+      mutate: (value) => batch(() => {
+        setFailure(null);
+        setData(() => value);
+      })
+    }
+  ];
+}
+
 // src/renderer/index.ts
 var current = null;
 function setRenderer(renderer) {
@@ -246,11 +324,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;
@@ -352,11 +440,7 @@ function For(props) {
 
 // src/components/error-boundary.ts
 function resolve2(value) {
-  let current2 = value;
-  while (typeof current2 === "function") {
-    current2 = current2();
-  }
-  return current2;
+  return typeof value === "function" ? value() : value;
 }
 function ErrorBoundary(props) {
   const [version, setVersion] = createSignal(0);
@@ -386,7 +470,7 @@ function ErrorBoundary(props) {
     let early = null;
     const content = untrack(
       () => catchError(
-        () => resolve2(props.children ?? null),
+        () => materialize(resolve2(props.children ?? null)),
         (error) => {
           if (creating) early = { error };
           else fail(error);
@@ -428,6 +512,7 @@ export {
   createContext,
   createEffect,
   createMemo,
+  createResource,
   createRoot,
   createSignal,
   getRenderer,

package/package.json

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