@cajoa/core 0.8.0 → 0.10.0

package/dist/index.cjs

@@ -211,7 +211,12 @@ function getRenderer() {
 function h(tag, props, ...children) {
   const r = getRenderer();
   const el = r.createElement(tag);
+  let ref;
   for (const [key, value] of Object.entries(props ?? {})) {
+    if (key === "ref") {
+      if (typeof value === "function") ref = value;
+      continue;
+    }
     if (typeof value === "function" && !key.startsWith("on")) {
       createEffect(() => r.setProp(el, key, value()));
     } else {
@@ -219,6 +224,8 @@ function h(tag, props, ...children) {
     }
   }
   appendChildren(el, children);
+  const onRef = ref;
+  if (onRef) untrack(() => onRef(el));
   return el;
 }
 function toNodes(value) {
@@ -276,9 +283,12 @@ function render(component, container) {
 }
 
 // src/components/show.ts
+function resolve(value) {
+  return typeof value === "function" ? value() : value;
+}
 function Show(props) {
-  const visible = createMemo(() => !!props.when());
-  return () => visible() ? untrack(() => props.children()) : untrack(() => props.fallback?.() ?? null);
+  const visible = createMemo(() => !!resolve(props.when));
+  return () => visible() ? untrack(() => resolve(props.children ?? null)) : untrack(() => resolve(props.fallback ?? null));
 }
 
 // src/components/for.ts
@@ -289,7 +299,7 @@ function For(props) {
     cache.clear();
   });
   return () => {
-    const items = props.each();
+    const items = typeof props.each === "function" ? props.each() : props.each;
     const next = /* @__PURE__ */ new Map();
     const nodes = [];
     items.forEach((item, i) => {

package/dist/index.d.cts

@@ -36,14 +36,15 @@ declare function h(tag: string, props: Record<string, any> | null, ...children:
 
 declare function render(component: () => HostNode, container: HostNode): () => void;
 
+type Lazy<T> = T | (() => T);
 declare function Show<T>(props: {
-    when: () => T;
-    children: () => Child;
-    fallback?: () => Child;
-}): () => Child;
+    when: Lazy<T>;
+    children?: Lazy<Child>;
+    fallback?: Lazy<Child>;
+}): () => string | number | boolean | object | null;
 
 declare function For<T>(props: {
-    each: () => T[];
+    each: T[] | (() => T[]);
     children: (item: T, index: number) => HostNode;
     key?: (item: T, index: number) => unknown;
 }): () => object[];

package/dist/index.d.ts

@@ -36,14 +36,15 @@ declare function h(tag: string, props: Record<string, any> | null, ...children:
 
 declare function render(component: () => HostNode, container: HostNode): () => void;
 
+type Lazy<T> = T | (() => T);
 declare function Show<T>(props: {
-    when: () => T;
-    children: () => Child;
-    fallback?: () => Child;
-}): () => Child;
+    when: Lazy<T>;
+    children?: Lazy<Child>;
+    fallback?: Lazy<Child>;
+}): () => string | number | boolean | object | null;
 
 declare function For<T>(props: {
-    each: () => T[];
+    each: T[] | (() => T[]);
     children: (item: T, index: number) => HostNode;
     key?: (item: T, index: number) => unknown;
 }): () => object[];

package/dist/index.js

@@ -165,7 +165,12 @@ function getRenderer() {
 function h(tag, props, ...children) {
   const r = getRenderer();
   const el = r.createElement(tag);
+  let ref;
   for (const [key, value] of Object.entries(props ?? {})) {
+    if (key === "ref") {
+      if (typeof value === "function") ref = value;
+      continue;
+    }
     if (typeof value === "function" && !key.startsWith("on")) {
       createEffect(() => r.setProp(el, key, value()));
     } else {
@@ -173,6 +178,8 @@ function h(tag, props, ...children) {
     }
   }
   appendChildren(el, children);
+  const onRef = ref;
+  if (onRef) untrack(() => onRef(el));
   return el;
 }
 function toNodes(value) {
@@ -230,9 +237,12 @@ function render(component, container) {
 }
 
 // src/components/show.ts
+function resolve(value) {
+  return typeof value === "function" ? value() : value;
+}
 function Show(props) {
-  const visible = createMemo(() => !!props.when());
-  return () => visible() ? untrack(() => props.children()) : untrack(() => props.fallback?.() ?? null);
+  const visible = createMemo(() => !!resolve(props.when));
+  return () => visible() ? untrack(() => resolve(props.children ?? null)) : untrack(() => resolve(props.fallback ?? null));
 }
 
 // src/components/for.ts
@@ -243,7 +253,7 @@ function For(props) {
     cache.clear();
   });
   return () => {
-    const items = props.each();
+    const items = typeof props.each === "function" ? props.each() : props.each;
     const next = /* @__PURE__ */ new Map();
     const nodes = [];
     items.forEach((item, i) => {

package/package.json

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