solid-ctrl-flow 1.0.48 → 1.0.50

package/dist/index.d.ts

@@ -129,11 +129,11 @@ export declare const debug: ReactiveContext<boolean>;
 
 /**
  * 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.
- * You can avoid the memoization trought {@link Standard.unrecycled}, this is needed if you want to use a context provider on your template.
+ * If you set {@link Standard.recycled} to `true`, the content will be memoized in the beginning and will be recycled even if the wrapper changes.
+ * You can't use memoization if you want to use a context provider on your template.
  * If {@link Keyed.keyed} is active, the template will be executed each time the content of {@link Standard.when} changes.
- * If {@link Standard.unrecycled} is active, the content will be executed each time it is mounted (Each time {@link Standard.when} goes from a falsish value to a truish one and vice versa).
- * If both {@link Keyed.keyed} and {@link Standard.unrecycled} are active, the content will be executed each time {@link Standard.when} changes
+ * If {@link Standard.recycled} is not active, the content will be executed each time it is mounted (Each time {@link Standard.when} goes from a falsish value to a truish one and vice versa).
+ * If {@link Keyed.keyed} is active and {@link Standard.recycled} isn't, the content will be executed each time {@link Standard.when} changes
  */
 export declare function Enfold<T>(props: Keyed<T>): JSX.Element;
 
@@ -160,25 +160,6 @@ export declare function memoProps<T>(obj: T, keys?: undefined, equals?: Equals):
 
 export declare function memoProps<T, K extends readonly (keyof T)[]>(obj: T, keys: K, equals?: Equals): Pick<T, K[number]>;
 
-/**
- * Like a {@link For}, but instead of putting an element after another it nests them.
- * The component will try to recycle the layers when the source array changes (Once again, like the {@link For}).
- * Due to the recyling, the layers will be created indipendently, thus their {@link Owner}s won't be nested in their parents' ones, this makes the component unsuitable to wrap the content with context providers.
- * Example:
- * ```tsx
- * return <>
- * 	<Nest each={[ 1, 2, 3 ]} template={(c, x) => <>({x}, {c}, -{x})</>}>
- *		CONTENT
- * 	</Nest>
- * </>
- * ```
- * Will output "(1, (2, (3, CONTENT, -3), -2), -1)"
- */
-export declare function Nest<T>(props: ParentProps<{
-    each: readonly T[] | undefined;
-    template: (c: JSX.Element, x: T, i: Accessor<number>) => JSX.Element;
-}>): JSX.Element;
-
 /**
  * Allows the use of {@link Case}s inside of {@link Switch}es.
  * Example:
@@ -215,7 +196,7 @@ export declare const On: (props: ParentProps<{
 
 /**
  * Reactive {@link Context} with some additional built-in functionalities.
- * The call signature returns the value in the current {@link Owner} (It's like calling {@link read})
+ * The call signature returns the value in the current {@link Owner} (It's like calling {@link get})
  */
 export declare abstract class ReactiveContext<T> extends BASE_CTOR<T> {
     /** The actual {@link Context} that contains the reactive {@link Accessor} to the value */
@@ -224,7 +205,7 @@ export declare abstract class ReactiveContext<T> extends BASE_CTOR<T> {
      * Returns the {@link Accessor} for the value in the current {@link Owner}.
      * It's like calling {@link useContext}
      */
-    get read(): Accessor<T>;
+    get get(): Accessor<T>;
     /**
      * Component that sets the value of the current {@link Context} for its children.
      * If no value is provided then it will use the default value for {@link ctx}.
@@ -307,11 +288,11 @@ export declare function splitAndMemoProps<T extends Record<any, any>, K extends
 /** Standard parameters to pass to an {@link Enfold} */
 declare type Standard<T> = ParentProps<{
     when: T;
-    unrecycled?: boolean;
+    recycled?: boolean;
 }>;
 
 /** Type of an element wrapping call-back which accepts an additional parameter */
-declare type Template<T> = (c: JSX.Element, x: T) => JSX.Element;
+declare type Template<T> = (c: Accessor<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, untrack, createEffect, on, createResource, splitProps, 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, Match, mergeProps, createRenderEffect, getListener } from "solid-js";
 import { createMutable } from "solid-js/store";
 const BASE_CTOR = Function;
 class ReactiveContext extends BASE_CTOR {
@@ -7,7 +7,7 @@ class ReactiveContext extends BASE_CTOR {
    * Returns the {@link Accessor} for the value in the current {@link Owner}.
    * It's like calling {@link useContext}
    */
-  get read() {
+  get get() {
     return useContext(this.ctx);
   }
   /**
@@ -48,7 +48,7 @@ class ReactiveContext extends BASE_CTOR {
     const ctx2 = createContext(() => defaultValue, {
       name
     });
-    const f = () => out.read();
+    const f = () => out.get();
     f.ctx = ctx2;
     const out = Object.setPrototypeOf(f, ReactiveContext.prototype);
     return out;
@@ -95,7 +95,7 @@ const HANDLER = new Proxy({}, {
 });
 function Enfold(props) {
   const f = () => props.children;
-  const children = unwrap(createMemo(() => props.unrecycled ? f : createMemo(f)));
+  const children = unwrap(createMemo(() => props.recycled ? createMemo(f) : f));
   return createComponent(Show, {
     get keyed() {
       return props.keyed;
@@ -106,7 +106,7 @@ function Enfold(props) {
     get fallback() {
       return children();
     },
-    children: (x) => createMemo(() => untrackCall(props.template, createMemo(children), x))
+    children: (x) => createMemo(() => untrackCall(props.template, children, x))
   });
 }
 var Slot;
@@ -217,30 +217,17 @@ function createInfo(props) {
     }
   };
 }
-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, createMemo(get), x, i));
-    return (x2) => {
-      onMount(() => set(() => x2));
-      onCleanup(() => set(void 0));
-      return out;
-    };
-  });
-  return createMemo(() => content().reduceRight((a, b) => b(a), memo.children));
-}
 const ctx = ReactiveContext.create(void 0, "on-case");
 const On = ctx.Provider;
 function Case(props) {
   const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
   const {
-    read
+    get
   } = ctx;
   const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
   return createComponent(Match, mergeProps({
     get when() {
-      return pred(read());
+      return pred(get());
     }
   }, other));
 }
@@ -291,7 +278,6 @@ function SameContext(props) {
 export {
   Case,
   Enfold,
-  Nest,
   On,
   ReactiveContext,
   SameContext,

package/dist/index.umd.js

@@ -9,7 +9,7 @@
      * Returns the {@link Accessor} for the value in the current {@link Owner}.
      * It's like calling {@link useContext}
      */
-    get read() {
+    get get() {
       return solidJs.useContext(this.ctx);
     }
     /**
@@ -50,7 +50,7 @@
       const ctx2 = solidJs.createContext(() => defaultValue, {
         name
       });
-      const f = () => out.read();
+      const f = () => out.get();
       f.ctx = ctx2;
       const out = Object.setPrototypeOf(f, ReactiveContext.prototype);
       return out;
@@ -97,7 +97,7 @@
   });
   function Enfold(props) {
     const f = () => props.children;
-    const children = unwrap(solidJs.createMemo(() => props.unrecycled ? f : solidJs.createMemo(f)));
+    const children = unwrap(solidJs.createMemo(() => props.recycled ? solidJs.createMemo(f) : f));
     return solidJs.createComponent(solidJs.Show, {
       get keyed() {
         return props.keyed;
@@ -108,7 +108,7 @@
       get fallback() {
         return children();
       },
-      children: (x) => solidJs.createMemo(() => untrackCall(props.template, solidJs.createMemo(children), x))
+      children: (x) => solidJs.createMemo(() => untrackCall(props.template, children, x))
     });
   }
   exports2.Slot = void 0;
@@ -219,30 +219,17 @@
       }
     };
   }
-  function Nest(props) {
-    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, solidJs.createMemo(get), x, i));
-      return (x2) => {
-        solidJs.onMount(() => set(() => x2));
-        solidJs.onCleanup(() => set(void 0));
-        return out;
-      };
-    });
-    return solidJs.createMemo(() => content().reduceRight((a, b) => b(a), memo.children));
-  }
   const ctx = ReactiveContext.create(void 0, "on-case");
   const On = ctx.Provider;
   function Case(props) {
     const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
     const {
-      read
+      get
     } = ctx;
     const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
     return solidJs.createComponent(solidJs.Match, solidJs.mergeProps({
       get when() {
-        return pred(read());
+        return pred(get());
       }
     }, other));
   }
@@ -292,7 +279,6 @@
   }
   exports2.Case = Case;
   exports2.Enfold = Enfold;
-  exports2.Nest = Nest;
   exports2.On = On;
   exports2.ReactiveContext = ReactiveContext;
   exports2.SameContext = SameContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-ctrl-flow",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "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>
 </>
@@ -39,38 +39,16 @@ And if `value` was falsish, it would have been equivalent to this
 ```tsx
 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
+If you are NOT wrapping the content with a context provider you can set the `recycled` attribute to `true` in order to NOT run again the whole content each time its template gets added/removed, in this case 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 recycled when={value} template={c => <ctx.Provider value={2} children={c()} />}>
+    {/* This won't work */}
     {useContext(ctx)}
   </Enfold>
 </>
 ```
 
-### `Nest`
-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>}>
-    CONTENT
-  </Nest>
-</>
-```
-Is equivalent to this
-```tsx
-return <>
-  <div style={{ background: "red", padding: "1ch" }}>
-    <div style={{ background: "green", padding: "1ch" }}>
-      <div style={{ background: "blue", padding: "1ch" }}>
-        CONTENT
-      </div>
-    </div>
-  </div>
-</>
-```
-
 ### `On` - `Case`
 Allows you to not repeat the same condition across many `Match` components.
 The following code
@@ -210,7 +188,7 @@ Method that creates a reactive version of a solid `Context` with some additional
 ```ts
 const ctx = ReactiveContext.create("SOMETHING");
 const underlyingNormalContext = ctx.ctx;
-const valueAccessorForTheCurrentOwner = ctx.read;
+const valueAccessorForTheCurrentOwner = ctx.get;
 const value = ctx();
 ```