solid-ctrl-flow 1.0.34 → 1.0.36

package/dist/index.d.ts

@@ -16,14 +16,14 @@ 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 source of the binding
- * @param dest The 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
  */
-export declare function bind<S>(source: Signal<S>, dest: Signal<S>): () => void;
+export declare function bind<S>(source: Accessor<S>, dest: Setter<S>): () => void;
 
-export declare function bind<S, D>(source: Signal<S>, dest: Signal<D>, to: Convert<S, D>): () => void;
+export declare function bind<S, D>(source: Accessor<S>, dest: Setter<D>, to: Convert<S, D>): () => void;
 
 /**
  * Creates a two-way binding between two {@link Signal}s calling {@link bind} two times
@@ -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,14 +141,27 @@ 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([get], [, set], to = IDENTITY) {
-  const d = createRoot((d2) => (createRenderEffect(on(get, (x) => set((prev) => to(x, prev)))), d2));
+function bind(source, dest, to = IDENTITY) {
+  const d = createRoot((d2) => (createRenderEffect(on(source, (x) => dest((prev) => to(x, prev)))), d2));
   return onCleanup(d), d;
 }
-function bindTwoWay(source, dest, to = IDENTITY, from = IDENTITY) {
-  const a = bind(source, dest, to);
-  const b = bind(dest, source, from);
+function bindTwoWay(source, dest, to, from) {
+  const a = bind(source[0], dest[1], to);
+  const b = bind(dest[0], source[1], from);
   return () => (a(), b());
 }
 function toSetter(get, set) {
@@ -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,14 +143,27 @@
       }
     });
   }
+  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([get], [, set], to = IDENTITY) {
-    const d = solidJs.createRoot((d2) => (solidJs.createRenderEffect(solidJs.on(get, (x) => set((prev) => to(x, prev)))), d2));
+  function bind(source, dest, to = IDENTITY) {
+    const d = solidJs.createRoot((d2) => (solidJs.createRenderEffect(solidJs.on(source, (x) => dest((prev) => to(x, prev)))), d2));
     return solidJs.onCleanup(d), d;
   }
-  function bindTwoWay(source, dest, to = IDENTITY, from = IDENTITY) {
-    const a = bind(source, dest, to);
-    const b = bind(dest, source, from);
+  function bindTwoWay(source, dest, to, from) {
+    const a = bind(source[0], dest[1], to);
+    const b = bind(dest[0], source[1], from);
     return () => (a(), b());
   }
   function toSetter(get, set) {
@@ -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.34",
+  "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,17 +34,26 @@ return <>
 </>
 ```
 
-### `Debug`
-Allows you to define ui section that are only visible in debug or NOT in debug
+### `Nest`
+Like a `For`, but instead of putting an element after another it nests them.
+The following code
 ```tsx
-const value = false;
 return <>
-  <Debug value={value}>
-    {/* (A LOT OF NESTING...) */}
-    <Show when={Debug.isDebug()}>
-      THIS WOULD BE VISIBLE IF "value" HAD BEEN {true}
-    </Show>
-  </Debug>
+  <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>
 </>
 ```
 
@@ -122,6 +131,29 @@ Notice that you can use a `Source` component without adding it to the DOM:
 return <>Something else</>
 ```
 
+## Utility
+
+### Bindings
+Functions that create bindings between `Signal`s
+
+> #### `bind()`
+> Creates a one-way binding between two `Signal`s
+> 
+> #### `bindTwoWay()`
+> Creates a two-way binding between two `Signal`s
+> 
+> #### `toSetter()`
+> Creates a full-fledged solid `Setter` from a normal one
+> 
+> #### `toSignal()`
+> Creates a `Signal` from a property of an object
+> 
+> #### `coalesceSignal()`
+> Creates a non nullable `Signal` from a nullable one
+> 
+> #### `unwrapSignal()`
+> Calls an `Accessor` to a `Signal` maintaining its reactivity
+
 ### `ReactiveContext.create()`
 Method that creates a reactive version of a solid `Context` with some additional built-in functionalities
 ```ts
@@ -131,29 +163,19 @@ const valueAccessorForTheCurrentOwner = ctx.read;
 const value = ctx();
 ```
 
-## Bindings
-Functions that create bindings between `Signal`s
-
-### `bind()`
-Creates a one-way binding between two `Signal`s
-
-### `bindTwoWay()`
-Creates a two-way binding between two `Signal`s
-
-### `toSetter()`
-Creates a full-fledged solid `Setter` from a normal one
-
-### `toSignal()`
-Creates a `Signal` from a property of an object
-
-### `coalesceSignal()`
-Creates a non nullable `Signal` from a nullable one
-
-### `unwrapSignal()`
-Calls an `Accessor` to a `Signal` maintaining its reactivity
-
-## Utility functions
-Utility functions needed for the components above
+### `debug()`
+Allows you to define ui section that are only visible in debug or NOT in debug
+```tsx
+const value = false;
+return <>
+  <debug.Provider value={value}>
+    {/* (A LOT OF NESTING...) */}
+    <Show when={debug()}>
+      THIS WOULD BE VISIBLE IF "value" HAD BEEN {true}
+    </Show>
+  </debug.Provider>
+</>
+```
 
 ### `untrackCall()`
 Calls a function untracking what happens inside of it but not what gets passed as its argument