solid-ctrl-flow 1.0.35 → 1.0.36

package/dist/index.d.ts

@@ -16,8 +16,8 @@ declare const BASE_CTOR: new <T>() => Accessor<T>;
  * - As soon as the function is done executing the two {@link Signal}s will have the same value
  * - If {@link source} changes, {@link dest} wont be instantly updated
  * - If the current owner gets disposed before {@link dest} is updated, it never will
- * @param source The getter of source of the binding
- * @param dest The setter of destination of the binding
+ * @param source The getter of the source of the binding
+ * @param dest The setter of the destination of the binding
  * @param to Conversion function from {@link S} to {@link D}
  * @returns A function that disposes the binding
  */
@@ -147,6 +147,26 @@ declare type Info = {
  */
 export declare function memoProps<T, K extends readonly (keyof T)[] = (keyof T)[]>(obj: T, keys?: K): 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.
+ * Example:
+ * ```tsx
+ * return <>
+ * 	<Nest each={[ 1, 2, 3 ]} template={(x, y) => <>({x}, {y()}, -{x})</>}>
+ * 		content
+ * 	</Nest>
+ * </>
+ * ```
+ * Will output "(1, (2, (3, content, -3), -2), -1)"
+ */
+export declare function Nest<T>(props: {
+    each: T[];
+    template: (x: T, c: Accessor<JSX.Element>, i: Accessor<number>) => JSX.Element;
+    children: JSX.Element;
+}): JSX.Element;
+
 /**
  * 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})

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useContext, createMemo, createComponent, createContext, Match, mergeProps, onCleanup, For, Show, createRoot, createRenderEffect, on, untrack, splitProps, getOwner, createEffect, createResource } from "solid-js";
+import { useContext, createMemo, createComponent, createContext, Match, mergeProps, onCleanup, For, Show, mapArray, createSignal, onMount, createRoot, createRenderEffect, on, untrack, splitProps, getOwner, createEffect, createResource } from "solid-js";
 import { createMutable } from "solid-js/store";
 const BASE_CTOR = Function;
 class ReactiveContext extends BASE_CTOR {
@@ -141,6 +141,19 @@ function Joint(props) {
     }
   });
 }
+function Nest(props) {
+  const memo = memoProps(props, ["template", "children"]);
+  const content = mapArray(() => props.each, (x, i) => {
+    const [get, set] = createSignal();
+    const out = memo.template(x, get, i);
+    return (x2) => {
+      onMount(() => set(() => x2));
+      onCleanup(() => set(void 0));
+      return out;
+    };
+  });
+  return createMemo(() => content().reduceRight((a, b) => b(a), memo.children));
+}
 const IDENTITY = (x) => x;
 function bind(source, dest, to = IDENTITY) {
   const d = createRoot((d2) => (createRenderEffect(on(source, (x) => dest((prev) => to(x, prev)))), d2));
@@ -214,6 +227,7 @@ function createReactiveResource(f) {
 const debug = ReactiveContext.create(false, "debug-scope");
 export {
   Case,
+  Nest,
   ReactiveContext,
   When,
   bind,

package/dist/index.umd.js

@@ -143,6 +143,19 @@
       }
     });
   }
+  function Nest(props) {
+    const memo = memoProps(props, ["template", "children"]);
+    const content = solidJs.mapArray(() => props.each, (x, i) => {
+      const [get, set] = solidJs.createSignal();
+      const out = memo.template(x, get, 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 IDENTITY = (x) => x;
   function bind(source, dest, to = IDENTITY) {
     const d = solidJs.createRoot((d2) => (solidJs.createRenderEffect(solidJs.on(source, (x) => dest((prev) => to(x, prev)))), d2));
@@ -215,6 +228,7 @@
   }
   const debug = ReactiveContext.create(false, "debug-scope");
   exports2.Case = Case;
+  exports2.Nest = Nest;
   exports2.ReactiveContext = ReactiveContext;
   exports2.When = When;
   exports2.bind = bind;

package/package.json

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

package/readMe.md

@@ -6,7 +6,7 @@ It's always under hard development
 ## Components
 
 ### `Case` - `When`
-Allows you to not specify the full condition inside of a `Switch` component.
+Allows you to not repeat the same condition across many `Match` components.
 The following code
 ```tsx
 const value = 1;
@@ -34,6 +34,29 @@ return <>
 </>
 ```
 
+### `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={(x, y) => <div style={{ background: x, padding: "1ch" }}>{y()}</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>
+</>
+```
+
 ### `createExtractor()`
 Creates a context for components that may need to be out of their parent in certain conditions.
 If you have this component