solid-ctrl-flow 1.0.45 → 1.0.47

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { Accessor } from 'solid-js';
-import { ComponentProps } from 'solid-js';
 import { Context } from 'solid-js';
 import { EffectFunction } from 'solid-js';
 import { JSX } from 'solid-js';
@@ -8,9 +7,7 @@ import { Owner } from 'solid-js';
 import { ParentProps } from 'solid-js';
 import { Resource } from 'solid-js';
 import { Setter } from 'solid-js';
-import { Show } from 'solid-js';
 import { Signal } from 'solid-js';
-import { Without } from 'logic-types';
 
 /** Type hack for making {@link ReactiveContext} implement {@link Accessor} */
 declare const BASE_CTOR: new <T>() => Accessor<T>;
@@ -130,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.
@@ -142,31 +147,6 @@ export declare function Enfold<T>(props: Keyed<T>): JSX.Element;
 
 export declare function Enfold<T>(props: Unkeyed<T>): JSX.Element;
 
-/**
- * It works like a `Show`, but for `Switch`es, you can wrap `Match`es with it in order to not trigger them in certain conditions.
- * It doesn't support the `fallback` attribute.
- * Example:
- * ```tsx
- * const value = false;
- * return <>
- *  <Switch>
- *      <Match when={false}>
- *          FALSE
- *      </Match>
- *      <Ensure when={false}>
- *          <Match when>
- *              This won't render because "value" is {false}
- *          </Match>
- *      </Ensure>
- *      <Match when>
- *          (This will render)
- *      </Match>
- *  </Switch>
- * <>
- * ```
- */
-export declare function Ensure(props: Without<ComponentProps<typeof Show>, "fallback">): JSX.Element;
-
 /** Handy type alias */
 declare type Equals = MemoOptions<unknown>["equals"];
 
@@ -195,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>
  * </>
@@ -204,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;
 
 /**
@@ -339,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));
@@ -244,16 +245,6 @@ function Case(props) {
     }
   }, other));
 }
-function Ensure(props) {
-  return createComponent(Show, mergeProps(props, {
-    get fallback() {
-      return createComponent(Match, {
-        when: false,
-        children: void 0
-      });
-    }
-  }));
-}
 const IDENTITY = (x) => x;
 function bind(source, dest, to = IDENTITY, skip = false) {
   const d = createRoot((d2) => (createRenderEffect(on(source, (x) => skip ? skip = false : dest((prev) => to(x, prev)))), d2));
@@ -301,7 +292,6 @@ function SameContext(props) {
 export {
   Case,
   Enfold,
-  Ensure,
   Nest,
   On,
   ReactiveContext,
@@ -313,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));
@@ -246,16 +247,6 @@
       }
     }, other));
   }
-  function Ensure(props) {
-    return solidJs.createComponent(solidJs.Show, solidJs.mergeProps(props, {
-      get fallback() {
-        return solidJs.createComponent(solidJs.Match, {
-          when: false,
-          children: void 0
-        });
-      }
-    }));
-  }
   const IDENTITY = (x) => x;
   function bind(source, dest, to = IDENTITY, skip = false) {
     const d = solidJs.createRoot((d2) => (solidJs.createRenderEffect(solidJs.on(source, (x) => skip ? skip = false : dest((prev) => to(x, prev)))), d2));
@@ -302,7 +293,6 @@
   }
   exports2.Case = Case;
   exports2.Enfold = Enfold;
-  exports2.Ensure = Ensure;
   exports2.Nest = Nest;
   exports2.On = On;
   exports2.ReactiveContext = ReactiveContext;
@@ -313,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.45",
+  "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>
 </>
@@ -100,27 +100,6 @@ return <>
 </>
 ```
 
-### `Ensure`
-It works like a `Show`, but for `Switch`es, you can wrap `Match`es with it in order to not trigger them in certain conditions
-```tsx
-const value = false;
-return <>
-  <Switch>
-    <Match when={false}>
-      FALSE
-    </Match>
-    <Ensure when={false}>
-      <Match when>
-        This won't render because "value" is {false}
-      </Match>
-    </Ensure>
-    <Match when>
-      (This will render)
-    </Match>
-  </Switch>
-<>
-```
-
 ### `createExtractor()`
 Creates a context for components that may need to be out of their parent in certain conditions.
 If you have this component
@@ -255,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