solid-ctrl-flow 1.0.44 → 1.0.45

package/dist/index.d.ts

@@ -1,11 +1,16 @@
 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';
 import { MemoOptions } from 'solid-js';
+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>;
@@ -38,40 +43,26 @@ export declare function bindTwoWay<S>(source: Signal<S>, dest: Signal<S>): () =>
 
 export declare function bindTwoWay<S, D>(source: Signal<S>, dest: Signal<D>, to: Convert<S, D>, from: Convert<D, S>): () => void;
 
-/**
- * Allows the use of {@link When}s inside of {@link Switch}es.
- * Example:
- * ```tsx
- * return <>
- *  <Switch>
- *   <Match when={SOMETHING}>
- *       RANDOM_CONDITION
- *   </Match>
- *   <Case value={1}>
- *       <When value={1}>
- *           TRUE
- *       </When>
- *       <When pred={x => x === 2}>
- *           FALSE_WITH_PREDICATE
- *       </When>
- *       <When pred={x => x.innerValue}>
- *           {x => <>THRUTHY VALUE {x()}</>}
- *       </When>
- *       <When keyed pred={x => x.innerValue}>
- *           {x => <>THRUTHY KEYED VALUE {x}</>}
- *       </When>
- *   </Case>
- *   <Match when>
- *       DEFAULT
- *   </Match>
- *  </Switch>
- * <>
- * ```
- */
-export declare const Case: (props: {
-    value: any;
-    children: JSX.Element;
-}) => JSX.Element;
+/** Like a {@link Match} but gets the value from the closest {@link On} ancestor */
+export declare function Case(props: ParentProps<{
+    value: unknown;
+}>): JSX.Element;
+
+export declare function Case(props: ParentProps<{
+    pred: (x: any) => unknown;
+}>): JSX.Element;
+
+export declare function Case<T>(props: {
+    pred: (x: any) => T;
+    keyed?: false;
+    children: (x: Accessor<NonNullable<T>>) => JSX.Element;
+}): JSX.Element;
+
+export declare function Case<T>(props: {
+    pred: (x: any) => T;
+    keyed: true;
+    children: (x: NonNullable<T>) => JSX.Element;
+}): JSX.Element;
 
 /**
  * Returns a {@link Signal} that applies the `??=` operator to the input one.
@@ -110,10 +101,16 @@ export declare function createExtractor(name?: string): {
     /** Shows the content of the closest {@link Source} child of the closest {@link Joint} ancestor of this component */
     Dest: () => JSX.Element;
     /** Puts its content inside of a {@link Dest} if it is available; There is no need to include this component on the DOM tree */
-    Source: (props: Info) => JSX.Element;
+    Source: (props: Slot & {
+        order?: number | undefined;
+    } & {
+        children?: JSX.Element;
+    } & {
+        sameContext?: boolean | undefined;
+    }) => JSX.Element;
     /** Allows {@link Dest} and {@link Source} childrens to communicate with each other  */
     Joint: (props: {
-        children: JSX.Element;
+        children?: JSX.Element;
     }) => JSX.Element;
     /**
      * Gets an {@link Accessor} that tells if the context in which THIS getter has been executed has been extracted (Is inside of a {@link Dest})
@@ -145,16 +142,34 @@ 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"];
 
-/** Informations about a {@link Source} component */
-declare type Info = Slot & {
-    /** Order of the current source if there are many */
-    order?: number;
-    children: JSX.Element;
-};
-
 /** Parameters to pass to a keyed {@link Enfold} */
 declare type Keyed<T> = Standard<T> & {
     keyed: true;
@@ -181,17 +196,50 @@ export declare function memoProps<T, K extends readonly (keyof T)[]>(obj: T, key
  * ```tsx
  * return <>
  * 	<Nest each={[ 1, 2, 3 ]} template={(c, x) => <>({x}, {c()}, -{x})</>}>
- * 		content
+ *		CONTENT
  * 	</Nest>
  * </>
  * ```
- * Will output "(1, (2, (3, content, -3), -2), -1)"
+ * Will output "(1, (2, (3, CONTENT, -3), -2), -1)"
  */
-export declare function Nest<T>(props: {
+export declare function Nest<T>(props: ParentProps<{
     each: readonly T[] | undefined;
     template: (c: Accessor<JSX.Element>, x: T, i: Accessor<number>) => JSX.Element;
-    children: JSX.Element;
-}): JSX.Element;
+}>): JSX.Element;
+
+/**
+ * Allows the use of {@link Case}s inside of {@link Switch}es.
+ * Example:
+ * ```tsx
+ * return <>
+ *  <Switch>
+ *      <Match when={SOMETHING}>
+ *          RANDOM_CONDITION
+ *      </Match>
+ *      <On value={1}>
+ *          <Case value={1}>
+ *              TRUE
+ *          </Case>
+ *          <Case pred={x => x === 2}>
+ *              FALSE_WITH_PREDICATE
+ *          </Case>
+ *          <Case pred={x => x.innerValue}>
+ *              {x => <>THRUTHY VALUE {x()}</>}
+ *          </Case>
+ *          <Case keyed pred={x => x.innerValue}>
+ *              {x => <>THRUTHY KEYED VALUE {x}</>}
+ *          </Case>
+ *      </On>
+ *      <Match when>
+ *          DEFAULT
+ *      </Match>
+ *  </Switch>
+ * <>
+ * ```
+ */
+export declare const On: (props: ParentProps<{
+    value: any;
+}>) => JSX.Element;
 
 /**
  * Reactive {@link Context} with some additional built-in functionalities.
@@ -211,18 +259,16 @@ export declare abstract class ReactiveContext<T> extends BASE_CTOR<T> {
      * The function is binded for the way solid compiles components inside other objects.
      * (The value is memoized)
      */
-    get Provider(): (props: {
+    get Provider(): (props: ParentProps<{
         value?: T;
-        children: JSX.Element;
-    }) => JSX.Element;
+    }>) => JSX.Element;
     /**
      * Executes {@link runWithContext} on the current context
      * @param value The value for the context
      * @param f The function to run
      * @returns The same thing {@link f} returned
      */
-    runWith<V extends T, R>(value: V, f: (x: V) => R): R;
-    runWith<R>(value: T | undefined, f: (x: T) => R): R;
+    runWith<V extends T, R>(value: V | undefined, f: (x: V) => R): R;
     /**
      * Creates a {@link ReactiveContext}
      * @param defaultValue Initial value for the context
@@ -241,9 +287,12 @@ export declare abstract class ReactiveContext<T> extends BASE_CTOR<T> {
  * @param f The function to run
  * @returns The same thing {@link f} returned
  */
-export declare function runWithContext<T, V extends T, R>(ctx: Context<T>, value: V, f: (x: V) => R): R;
+export declare function runWithContext<T, V extends T, R>(ctx: Context<T>, value: V | undefined, f: (x: V) => R): R;
 
-export declare function runWithContext<T, R>(ctx: Context<T>, value: T | undefined, f: (x: T) => R): R;
+/** Makes its children inherit the {@link Context}s of the provided {@link Owner} */
+export declare function SameContext(props: ParentProps<{
+    owner: Owner;
+}>): JSX.Element;
 
 /** Element which tracks its index in its containing array */
 export declare interface Slot {
@@ -284,11 +333,10 @@ export declare namespace Slot {
 export declare function splitAndMemoProps<T extends Record<any, any>, K extends readonly (keyof T)[]>(obj: T, keys: K, equals?: Equals): [Pick<T, Extract<K, readonly (keyof T)[]>[number]>, Omit<T, K[number]>];
 
 /** Standard parameters to pass to an {@link Enfold} */
-declare type Standard<T> = {
+declare type Standard<T> = ParentProps<{
     when: T;
-    children: JSX.Element;
     unrecycled?: boolean;
-};
+}>;
 
 /** Type of an element wrapping call-back which accepts an additional parameter */
 declare type Template<T> = (c: Accessor<JSX.Element>, x: T) => JSX.Element;
@@ -345,27 +393,4 @@ export declare const unwrap: <T extends object>(f: Accessor<T>) => T;
  */
 export declare function unwrapSignal<T>(f: Accessor<Signal<T>>): Signal<T>;
 
-/** Like a {@link Match} but gets the value from the closest {@link Case} ancestor */
-export declare function When(props: {
-    value: unknown;
-    children: JSX.Element;
-}): JSX.Element;
-
-export declare function When(props: {
-    pred: (x: any) => unknown;
-    children: JSX.Element;
-}): JSX.Element;
-
-export declare function When<T>(props: {
-    pred: (x: any) => T;
-    keyed?: false;
-    children: (x: Accessor<NonNullable<T>>) => JSX.Element;
-}): JSX.Element;
-
-export declare function When<T>(props: {
-    pred: (x: any) => T;
-    keyed: true;
-    children: (x: NonNullable<T>) => JSX.Element;
-}): JSX.Element;
-
 export { }

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useContext, createMemo, createComponent, createContext, createRoot, getOwner, Match, mergeProps, splitProps, createEffect, on, createResource, untrack, Show, onCleanup, For, mapArray, createSignal, onMount, createRenderEffect, getListener } from "solid-js";
+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 { createMutable } from "solid-js/store";
 const BASE_CTOR = Function;
 class ReactiveContext extends BASE_CTOR {
@@ -64,20 +64,6 @@ function runWithContext(ctx2, value, f) {
     }
   });
 }
-const ctx = ReactiveContext.create(void 0, "case-when");
-const Case = ctx.Provider;
-function When(props) {
-  const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
-  const {
-    read
-  } = ctx;
-  const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
-  return createComponent(Match, mergeProps({
-    get when() {
-      return pred(read());
-    }
-  }, other));
-}
 function memoProps(obj, keys = Object.keys(obj), equals = false) {
   const out = {};
   for (const elm of keys)
@@ -169,7 +155,7 @@ function Dest() {
   onCleanup(() => obj.attached--);
   return createComponent(For, {
     get each() {
-      return obj.source.toSorted((a, b) => a.order - b.order);
+      return obj.source.toSorted((a, b) => (a.order ?? 0) - (b.order ?? 0));
     },
     children: (x) => createMemo(() => x.children)
   });
@@ -178,15 +164,7 @@ function Source(props) {
   const obj = useContext(this);
   if (!obj)
     return createMemo(() => props.children);
-  const order = createMemo(() => props.order || 0);
-  const info = {
-    get order() {
-      return order();
-    },
-    get children() {
-      return props.children;
-    }
-  };
+  const info = createInfo(props);
   Slot.push(obj.source, info);
   onCleanup(() => Slot.remove(obj.source, info));
   return createComponent(Show, {
@@ -213,6 +191,32 @@ function Joint(props) {
     }
   });
 }
+function createInfo(props) {
+  const owner = getOwner(), memo = createMemo(() => props.order);
+  return {
+    get order() {
+      return memo();
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return props.sameContext;
+        },
+        get fallback() {
+          return props.children;
+        },
+        get children() {
+          return createComponent(SameContext, {
+            owner,
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
+  };
+}
 function Nest(props) {
   const memo = memoProps(props, ["template", "children"]);
   const content = mapArray(() => props.each, (x, i) => {
@@ -226,6 +230,30 @@ function Nest(props) {
   });
   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
+  } = ctx;
+  const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
+  return createComponent(Match, mergeProps({
+    get when() {
+      return pred(read());
+    }
+  }, 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));
@@ -264,13 +292,21 @@ function coalesceSignal([get, set], f) {
   }
 }
 const debug = ReactiveContext.create(false, "debug-scope");
+function SameContext(props) {
+  return createMemo(() => {
+    getOwner().context = props.owner.context;
+    return props.children;
+  });
+}
 export {
   Case,
   Enfold,
+  Ensure,
   Nest,
+  On,
   ReactiveContext,
+  SameContext,
   Slot,
-  When,
   bind,
   bindTwoWay,
   coalesceSignal,

package/dist/index.umd.js

@@ -66,20 +66,6 @@
       }
     });
   }
-  const ctx = ReactiveContext.create(void 0, "case-when");
-  const Case = ctx.Provider;
-  function When(props) {
-    const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
-    const {
-      read
-    } = ctx;
-    const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
-    return solidJs.createComponent(solidJs.Match, solidJs.mergeProps({
-      get when() {
-        return pred(read());
-      }
-    }, other));
-  }
   function memoProps(obj, keys = Object.keys(obj), equals = false) {
     const out = {};
     for (const elm of keys)
@@ -171,7 +157,7 @@
     solidJs.onCleanup(() => obj.attached--);
     return solidJs.createComponent(solidJs.For, {
       get each() {
-        return obj.source.toSorted((a, b) => a.order - b.order);
+        return obj.source.toSorted((a, b) => (a.order ?? 0) - (b.order ?? 0));
       },
       children: (x) => solidJs.createMemo(() => x.children)
     });
@@ -180,15 +166,7 @@
     const obj = solidJs.useContext(this);
     if (!obj)
       return solidJs.createMemo(() => props.children);
-    const order = solidJs.createMemo(() => props.order || 0);
-    const info = {
-      get order() {
-        return order();
-      },
-      get children() {
-        return props.children;
-      }
-    };
+    const info = createInfo(props);
     exports2.Slot.push(obj.source, info);
     solidJs.onCleanup(() => exports2.Slot.remove(obj.source, info));
     return solidJs.createComponent(solidJs.Show, {
@@ -215,6 +193,32 @@
       }
     });
   }
+  function createInfo(props) {
+    const owner = solidJs.getOwner(), memo = solidJs.createMemo(() => props.order);
+    return {
+      get order() {
+        return memo();
+      },
+      get children() {
+        return solidJs.createComponent(solidJs.Show, {
+          get when() {
+            return props.sameContext;
+          },
+          get fallback() {
+            return props.children;
+          },
+          get children() {
+            return solidJs.createComponent(SameContext, {
+              owner,
+              get children() {
+                return props.children;
+              }
+            });
+          }
+        });
+      }
+    };
+  }
   function Nest(props) {
     const memo = memoProps(props, ["template", "children"]);
     const content = solidJs.mapArray(() => props.each, (x, i) => {
@@ -228,6 +232,30 @@
     });
     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
+    } = ctx;
+    const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
+    return solidJs.createComponent(solidJs.Match, solidJs.mergeProps({
+      get when() {
+        return pred(read());
+      }
+    }, 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));
@@ -266,11 +294,19 @@
     }
   }
   const debug = ReactiveContext.create(false, "debug-scope");
+  function SameContext(props) {
+    return solidJs.createMemo(() => {
+      solidJs.getOwner().context = props.owner.context;
+      return props.children;
+    });
+  }
   exports2.Case = Case;
   exports2.Enfold = Enfold;
+  exports2.Ensure = Ensure;
   exports2.Nest = Nest;
+  exports2.On = On;
   exports2.ReactiveContext = ReactiveContext;
-  exports2.When = When;
+  exports2.SameContext = SameContext;
   exports2.bind = bind;
   exports2.bindTwoWay = bindTwoWay;
   exports2.coalesceSignal = coalesceSignal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-ctrl-flow",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "description": "Control flow components for solid-js",
   "author": "AFatNiBBa",
   "license": "ISC",
@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.6.0",
+    "logic-types": "^1.3.2",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.5.3",
     "vite-plugin-solid": "^2.7.0"

package/readMe.md

@@ -5,32 +5,14 @@ It's always under hard development
 
 ## Components
 
-### `Case` - `When`
-Allows you to not repeat the same condition across many `Match` components.
-The following code
+### `SameContext`
+Makes its children inherit the `Context`s of the provided `Owner`
 ```tsx
-const value = 1;
+const owner = ...;
 return <>
-  <Switch>
-    <Case value={value}>
-      <When value={1}>One</When>
-      <When value={2}>Two</When>
-      <When pred={(x) => `${x}`.length === 3}>Long</When>
-    </Case>
-    <Match when>Default</Match>
-  </Switch>
-</>
-```
-Is equivalent to this
-```tsx
-const value = 1;
-return <>
-  <Switch>
-    <Match when={value === 1}>One</Match>
-    <Match when={value === 2}>Two</Match>
-    <Match when={`${value}`.length === 3}>Long</Match>
-    <Match when>Default</Match>
-  </Switch>
+  <SameContext owner={owner}>
+    ...
+  </SameContext>
 </>
 ```
 
@@ -41,7 +23,7 @@ The following code
 const value = true;
 return <>
   <Enfold when={value} template={c => <div style={{ background: "red" }}>{c()}</div>}>
-    content
+    CONTENT
   </Enfold>
 </>
 ```
@@ -49,13 +31,13 @@ Is equivalent to this
 ```tsx
 return <>
   <div style={{ background: "red" }}>
-    content
+    CONTENT
   </div>
 </>
 ```
 And if `value` was falsish, it would have been equivalent to this
 ```tsx
-return <>content</>
+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
@@ -72,7 +54,7 @@ The following code
 ```tsx
 return <>
   <Nest each={[ "red", "green", "blue" ]} template={(c, x) => <div style={{ background: x, padding: "1ch" }}>{c()}</div>}>
-    content
+    CONTENT
   </Nest>
 </>
 ```
@@ -82,13 +64,63 @@ return <>
   <div style={{ background: "red", padding: "1ch" }}>
     <div style={{ background: "green", padding: "1ch" }}>
       <div style={{ background: "blue", padding: "1ch" }}>
-        content
+        CONTENT
       </div>
     </div>
   </div>
 </>
 ```
 
+### `On` - `Case`
+Allows you to not repeat the same condition across many `Match` components.
+The following code
+```tsx
+const value = 1;
+return <>
+  <Switch>
+    <On value={value}>
+      <Case value={1}>One</Case>
+      <Case value={2}>Two</Case>
+      <Case pred={x => `${x}`.length === 3}>Long</Case>
+    </On>
+    <Match when>Default</Match>
+  </Switch>
+</>
+```
+Is equivalent to this
+```tsx
+const value = 1;
+return <>
+  <Switch>
+    <Match when={value === 1}>One</Match>
+    <Match when={value === 2}>Two</Match>
+    <Match when={`${value}`.length === 3}>Long</Match>
+    <Match when>Default</Match>
+  </Switch>
+</>
+```
+
+### `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
@@ -162,6 +194,14 @@ Notice that you can use a `Source` component without adding it to the DOM:
 </myCustomExtractor.Source>
 return <>Something else</>
 ```
+When something gets moved from a `Source` to a `Dest`, it will inherit contexts from its destination, UNLESS you use the `sameContext` attribute
+```tsx
+return <>
+  <myCustomExtractor.Source sameContext>
+    ...
+  </myCustomExtractor.Source>
+</>
+```
 
 ## Utility