solid-ctrl-flow 1.0.46 → 1.0.47

package/dist/index.d.ts

@@ -127,6 +127,14 @@ export declare function createReactiveResource<R>(f: EffectFunction<R | undefine
 /** Built-in {@link ReactiveContext} which allows you to display different things in debug mode */
 export declare const debug: ReactiveContext<boolean>;
 
+/**
+ * Utility function that makes you use an {@link Accessor} of a {@link JSX.Element} as a {@link JSX.Element} itself.
+ * Used to defer the execution of {@link f} until it gets rendered.
+ * Using {@link Function}s as {@link JSX.Element} is supported by default but is forbidden by the types
+ * @param f The {@link Accessor} to the actual content
+ */
+export declare const deferCall: (f: Accessor<JSX.Element>) => JSX.Element;
+
 /**
  * Eventually wraps its content into a template if a certain condition is met.
  * The content is memoized in the beginning and will be recycled even if the wrapper changes.
@@ -167,7 +175,7 @@ export declare function memoProps<T, K extends readonly (keyof T)[]>(obj: T, key
  * Example:
  * ```tsx
  * return <>
- * 	<Nest each={[ 1, 2, 3 ]} template={(c, x) => <>({x}, {c()}, -{x})</>}>
+ * 	<Nest each={[ 1, 2, 3 ]} template={(c, x) => <>({x}, {c}, -{x})</>}>
  *		CONTENT
  * 	</Nest>
  * </>
@@ -176,7 +184,7 @@ export declare function memoProps<T, K extends readonly (keyof T)[]>(obj: T, key
  */
 export declare function Nest<T>(props: ParentProps<{
     each: readonly T[] | undefined;
-    template: (c: Accessor<JSX.Element>, x: T, i: Accessor<number>) => JSX.Element;
+    template: (c: JSX.Element, x: T, i: Accessor<number>) => JSX.Element;
 }>): JSX.Element;
 
 /**
@@ -311,7 +319,7 @@ declare type Standard<T> = ParentProps<{
 }>;
 
 /** Type of an element wrapping call-back which accepts an additional parameter */
-declare type Template<T> = (c: Accessor<JSX.Element>, x: T) => JSX.Element;
+declare type Template<T> = (c: JSX.Element, x: T) => JSX.Element;
 
 /**
  * Creates a full-fledged solid {@link Setter} from a normal one

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useContext, createMemo, createComponent, createContext, createRoot, getOwner, splitProps, createEffect, on, createResource, untrack, Show, onCleanup, For, mapArray, createSignal, onMount, Match, mergeProps, createRenderEffect, getListener } from "solid-js";
+import { useContext, createMemo, createComponent, createContext, createRoot, getOwner, untrack, createEffect, on, createResource, splitProps, Show, onCleanup, For, mapArray, createSignal, onMount, Match, mergeProps, createRenderEffect, getListener } from "solid-js";
 import { createMutable } from "solid-js/store";
 const BASE_CTOR = Function;
 class ReactiveContext extends BASE_CTOR {
@@ -64,6 +64,17 @@ function runWithContext(ctx2, value, f) {
     }
   });
 }
+const deferCall = (f) => f;
+function untrackCall(f, ...args) {
+  return untrack(() => f.apply(this, args));
+}
+function createReactiveResource(f) {
+  var refetch;
+  const memo = createMemo(f);
+  createEffect(on(memo, () => refetch?.()));
+  const [get] = [, { refetch }] = createResource(memo);
+  return get;
+}
 function memoProps(obj, keys = Object.keys(obj), equals = false) {
   const out = {};
   for (const elm of keys)
@@ -75,16 +86,6 @@ function splitAndMemoProps(obj, keys, equals) {
   out[0] = memoProps(out[0], keys, equals);
   return out;
 }
-function createReactiveResource(f) {
-  var refetch;
-  const memo = createMemo(f);
-  createEffect(on(memo, () => refetch?.()));
-  const [get] = [, { refetch }] = createResource(memo);
-  return get;
-}
-function untrackCall(f, ...args) {
-  return untrack(() => f.apply(this, args));
-}
 const unwrap = (f) => new Proxy(f, HANDLER);
 const HANDLER = new Proxy({}, {
   get(cache, k) {
@@ -106,7 +107,7 @@ function Enfold(props) {
     get fallback() {
       return children();
     },
-    children: (x) => createMemo(() => untrackCall(props.template, children, x))
+    children: (x) => createMemo(() => untrackCall(props.template, deferCall(children), x))
   });
 }
 var Slot;
@@ -221,7 +222,7 @@ function Nest(props) {
   const memo = memoProps(props, ["template", "children"]);
   const content = mapArray(() => props.each, (x, i) => {
     const [get, set] = createSignal();
-    const out = createMemo(() => untrackCall(memo.template, get, x, i));
+    const out = createMemo(() => untrackCall(memo.template, deferCall(get), x, i));
     return (x2) => {
       onMount(() => set(() => x2));
       onCleanup(() => set(void 0));
@@ -302,6 +303,7 @@ export {
   createExtractor,
   createReactiveResource,
   debug,
+  deferCall,
   memoProps,
   runWithContext,
   splitAndMemoProps,

package/dist/index.umd.js

@@ -66,6 +66,17 @@
       }
     });
   }
+  const deferCall = (f) => f;
+  function untrackCall(f, ...args) {
+    return solidJs.untrack(() => f.apply(this, args));
+  }
+  function createReactiveResource(f) {
+    var refetch;
+    const memo = solidJs.createMemo(f);
+    solidJs.createEffect(solidJs.on(memo, () => refetch?.()));
+    const [get] = [, { refetch }] = solidJs.createResource(memo);
+    return get;
+  }
   function memoProps(obj, keys = Object.keys(obj), equals = false) {
     const out = {};
     for (const elm of keys)
@@ -77,16 +88,6 @@
     out[0] = memoProps(out[0], keys, equals);
     return out;
   }
-  function createReactiveResource(f) {
-    var refetch;
-    const memo = solidJs.createMemo(f);
-    solidJs.createEffect(solidJs.on(memo, () => refetch?.()));
-    const [get] = [, { refetch }] = solidJs.createResource(memo);
-    return get;
-  }
-  function untrackCall(f, ...args) {
-    return solidJs.untrack(() => f.apply(this, args));
-  }
   const unwrap = (f) => new Proxy(f, HANDLER);
   const HANDLER = new Proxy({}, {
     get(cache, k) {
@@ -108,7 +109,7 @@
       get fallback() {
         return children();
       },
-      children: (x) => solidJs.createMemo(() => untrackCall(props.template, children, x))
+      children: (x) => solidJs.createMemo(() => untrackCall(props.template, deferCall(children), x))
     });
   }
   exports2.Slot = void 0;
@@ -223,7 +224,7 @@
     const memo = memoProps(props, ["template", "children"]);
     const content = solidJs.mapArray(() => props.each, (x, i) => {
       const [get, set] = solidJs.createSignal();
-      const out = solidJs.createMemo(() => untrackCall(memo.template, get, x, i));
+      const out = solidJs.createMemo(() => untrackCall(memo.template, deferCall(get), x, i));
       return (x2) => {
         solidJs.onMount(() => set(() => x2));
         solidJs.onCleanup(() => set(void 0));
@@ -302,6 +303,7 @@
   exports2.createExtractor = createExtractor;
   exports2.createReactiveResource = createReactiveResource;
   exports2.debug = debug;
+  exports2.deferCall = deferCall;
   exports2.memoProps = memoProps;
   exports2.runWithContext = runWithContext;
   exports2.splitAndMemoProps = splitAndMemoProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-ctrl-flow",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "description": "Control flow components for solid-js",
   "author": "AFatNiBBa",
   "license": "ISC",

package/readMe.md

@@ -22,7 +22,7 @@ The following code
 ```tsx
 const value = true;
 return <>
-  <Enfold when={value} template={c => <div style={{ background: "red" }}>{c()}</div>}>
+  <Enfold when={value} template={c => <div style={{ background: "red" }}>{c}</div>}>
     CONTENT
   </Enfold>
 </>
@@ -42,7 +42,7 @@ return <>CONTENT</>
 If you are wrapping the content with a context provider you need to set the `unrecycled` attribute to `true` to run again the whole content, otherwise the `Owner` of the content won't be child of the template one
 ```tsx
 return <>
-  <Enfold unrecycled when={value} template={c => <ctx.Provider value={2} children={c()} />}>
+  <Enfold unrecycled when={value} template={c => <ctx.Provider value={2} children={c} />}>
     {useContext(ctx)}
   </Enfold>
 </>
@@ -53,7 +53,7 @@ Like a `For`, but instead of putting an element after another it nests them.
 The following code
 ```tsx
 return <>
-  <Nest each={[ "red", "green", "blue" ]} template={(c, x) => <div style={{ background: x, padding: "1ch" }}>{c()}</div>}>
+  <Nest each={[ "red", "green", "blue" ]} template={(c, x) => <div style={{ background: x, padding: "1ch" }}>{c}</div>}>
     CONTENT
   </Nest>
 </>
@@ -234,14 +234,17 @@ return <>
 </>
 ```
 
-### `memoProps()`
-Creates a partial version of an object with memoized remaining properties
+### `deferCall()`
+Utility function that makes you use an `Accessor` of a `JSX.Element` as a `JSX.Element` itself
 
-### `splitAndMemoProps()`
-Like `splitProps()` but memoizes the whole local part
+### `untrackCall()`
+Calls a function untracking what happens inside of it but not what gets passed as its argument
 
 ### `createReactiveResource()`
 Like `createResource()` but the provided function will be reactive
 
-### `untrackCall()`
-Calls a function untracking what happens inside of it but not what gets passed as its argument
+### `memoProps()`
+Creates a partial version of an object with memoized remaining properties
+
+### `splitAndMemoProps()`
+Like `splitProps()` but memoizes the whole local part