solid-ctrl-flow 1.0.35 → 1.0.37

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 {
@@ -105,7 +105,7 @@ function Dest() {
 function Source(props) {
   const obj = useContext(this);
   if (!obj)
-    return props.children;
+    return createMemo(() => props.children);
   const order = createMemo(() => props.order || 0);
   const info = {
     get order() {
@@ -116,7 +116,7 @@ function Source(props) {
     }
   };
   obj.source.push(info);
-  onCleanup(() => obj.source.splice(obj.source.indexOf(info), 1));
+  onCleanup(() => obj.source.splice(obj.source.indexOf(createMutable(info)), 1));
   return createComponent(Show, {
     get when() {
       return !obj.attached;
@@ -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

@@ -107,7 +107,7 @@
   function Source(props) {
     const obj = solidJs.useContext(this);
     if (!obj)
-      return props.children;
+      return solidJs.createMemo(() => props.children);
     const order = solidJs.createMemo(() => props.order || 0);
     const info = {
       get order() {
@@ -118,7 +118,7 @@
       }
     };
     obj.source.push(info);
-    solidJs.onCleanup(() => obj.source.splice(obj.source.indexOf(info), 1));
+    solidJs.onCleanup(() => obj.source.splice(obj.source.indexOf(store.createMutable(info)), 1));
     return solidJs.createComponent(solidJs.Show, {
       get when() {
         return !obj.attached;
@@ -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.37",
   "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