solid-ctrl-flow 2.2.5 → 3.0.0

package/dist/index.d.ts

@@ -57,11 +57,23 @@ export declare class Extractor {
     Joint: (props: {
         children?: JSX.Element;
     }) => JSX.Element;
-    Fallback: () => JSX.Element;
     Dest: (props: {
-        hidden?: boolean | undefined;
+        children?: JSX.Element;
+    }) => JSX.Element;
+    Source: (props: {
+        order?: number | undefined;
+    } & {
+        children?: JSX.Element;
+    } & {
+        fallback?: JSX.Element;
+    }) => JSX.Element;
+    SameContextSource: (props: {
+        order?: number | undefined;
+    } & {
+        children?: JSX.Element;
+    } & {
+        fallback?: JSX.Element;
     }) => JSX.Element;
-    Source: (props: Info) => JSX.Element;
     /**
      * Returns the number of destinations available for the current {@link Extractor}.
      * It's a getter that returns a function that will be bound to the {@link Owner} in which the getter was called.

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { createMemo, splitProps, untrack, createRoot, getOwner, createComponent, Show, createContext, useContext, createRenderEffect, on, onCleanup, For, createSignal, createSelector, equalFn, Match } from "solid-js";
+import { createMemo, splitProps, untrack, createRoot, getOwner, createComponent, Show, createContext, useContext, onCleanup, For, createRenderEffect, on, mergeProps, createSignal, createSelector, equalFn, Match } from "solid-js";
 const NO_OP = () => {
 };
 function memoProps(obj, keys = Reflect.ownKeys(obj), equals = false) {
@@ -124,9 +124,9 @@ class Extractor {
     });
   }
   Joint = Joint.bind(this);
-  Fallback = Fallback.bind(this);
   Dest = Dest.bind(this);
   Source = Source.bind(this);
+  SameContextSource = SameContextSource.bind(this);
   /**
    * Returns the number of destinations available for the current {@link Extractor}.
    * It's a getter that returns a function that will be bound to the {@link Owner} in which the getter was called.
@@ -146,41 +146,26 @@ function Joint(props) {
     }
   });
 }
-function Fallback() {
-  const _self$ = this;
-  const f = this.getDestCount;
-  return createComponent(Show, {
-    get when() {
-      return !f?.();
-    },
-    get children() {
-      return createComponent(_self$.Dest, {
-        hidden: true
-      });
-    }
-  });
-}
 function Dest(props) {
   const state = useContext(this.ctx);
   if (!state)
-    throw new Error("An extractor's destination must be inside one of its joints");
-  createRenderEffect(on(createMemo(() => props.hidden), (x) => {
-    if (x)
-      return;
-    onCleanup(() => state.shift(-1));
-    state.shift(1);
-  }));
+    return createMemo(() => props.children);
+  onCleanup(() => state.shift(-1));
+  state.shift(1);
   return createComponent(For, {
     get each() {
       return [...state.sources];
     },
+    get fallback() {
+      return props.children;
+    },
     children: (x) => createMemo(() => x.children)
   });
 }
 function Source(props) {
   const state = useContext(this.ctx);
   if (!state)
-    throw new Error("An extractor's source must be inside one of its joints");
+    return createMemo(() => props.fallback);
   const {
     sources
   } = state;
@@ -202,7 +187,29 @@ function Source(props) {
     sources.add(node, COMPARATOR);
     state.force();
   }));
-  return [];
+  return createComponent(Show, {
+    get when() {
+      return !state.destCount;
+    },
+    get children() {
+      return props.fallback;
+    }
+  });
+}
+function SameContextSource(props) {
+  const _self$ = this;
+  const [mine, other] = splitProps(props, ["children"]);
+  const owner = getOwner();
+  return createComponent(_self$.Source, mergeProps(other, {
+    get children() {
+      return createComponent(SameContext, {
+        owner,
+        get children() {
+          return mine.children;
+        }
+      });
+    }
+  }));
 }
 const ctx = createContext(void 0, {
   name: "on-case"

package/dist/index.umd.js

@@ -127,9 +127,9 @@
       });
     }
     Joint = Joint.bind(this);
-    Fallback = Fallback.bind(this);
     Dest = Dest.bind(this);
     Source = Source.bind(this);
+    SameContextSource = SameContextSource.bind(this);
     /**
      * Returns the number of destinations available for the current {@link Extractor}.
      * It's a getter that returns a function that will be bound to the {@link Owner} in which the getter was called.
@@ -149,41 +149,26 @@
       }
     });
   }
-  function Fallback() {
-    const _self$ = this;
-    const f = this.getDestCount;
-    return solidJs.createComponent(solidJs.Show, {
-      get when() {
-        return !f?.();
-      },
-      get children() {
-        return solidJs.createComponent(_self$.Dest, {
-          hidden: true
-        });
-      }
-    });
-  }
   function Dest(props) {
     const state = solidJs.useContext(this.ctx);
     if (!state)
-      throw new Error("An extractor's destination must be inside one of its joints");
-    solidJs.createRenderEffect(solidJs.on(solidJs.createMemo(() => props.hidden), (x) => {
-      if (x)
-        return;
-      solidJs.onCleanup(() => state.shift(-1));
-      state.shift(1);
-    }));
+      return solidJs.createMemo(() => props.children);
+    solidJs.onCleanup(() => state.shift(-1));
+    state.shift(1);
     return solidJs.createComponent(solidJs.For, {
       get each() {
         return [...state.sources];
       },
+      get fallback() {
+        return props.children;
+      },
       children: (x) => solidJs.createMemo(() => x.children)
     });
   }
   function Source(props) {
     const state = solidJs.useContext(this.ctx);
     if (!state)
-      throw new Error("An extractor's source must be inside one of its joints");
+      return solidJs.createMemo(() => props.fallback);
     const {
       sources
     } = state;
@@ -205,7 +190,29 @@
       sources.add(node, COMPARATOR);
       state.force();
     }));
-    return [];
+    return solidJs.createComponent(solidJs.Show, {
+      get when() {
+        return !state.destCount;
+      },
+      get children() {
+        return props.fallback;
+      }
+    });
+  }
+  function SameContextSource(props) {
+    const _self$ = this;
+    const [mine, other] = solidJs.splitProps(props, ["children"]);
+    const owner = solidJs.getOwner();
+    return solidJs.createComponent(_self$.Source, solidJs.mergeProps(other, {
+      get children() {
+        return solidJs.createComponent(SameContext, {
+          owner,
+          get children() {
+            return mine.children;
+          }
+        });
+      }
+    }));
   }
   const ctx = solidJs.createContext(void 0, {
     name: "on-case"

package/package.json

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

package/readMe.md

@@ -94,7 +94,9 @@ return <>
   </e.Joint>
 </>
 ```
-Both `Extractor.Source` and `Extractor.Dest` will throw if they're not inside a `Extractor.Joint`.
+If a `Extractor.Dest` has no `Extractor.Source` to render (Or it isn't inside a `Extractor.Joint`), it will render whatever you pass inside the `children` attribute
+<br />
+If a `Extractor.Source` has no available `Extractor.Dest` (Or it isn't inside a `Extractor.Joint`), it will render whatever you pass inside the `fallback` attribute
 <br />
 Componets from different `Extractor`s don't "talk" to each other and there can be more than one source and destinations:
 ```tsx
@@ -117,7 +119,7 @@ return <>
     <a.Dest />
     <b.Joint>
       {/* No source */}
-      <b.Dest />
+      <b.Dest>fb1</b.Dest>
       <c.Joint>
         3
         {/* Double destination */}
@@ -126,7 +128,7 @@ return <>
         <a.Source>
           5
         </a.Source>
-        <c.Source>
+        <c.Source fallback="fb2">
           {/* No destination */}
           6
         </c.Source>
@@ -145,7 +147,7 @@ return <>
   </a.Joint>
 </>
 ```
-The output of this code is ***1***, ***5***, 3, ***1***, ***5***, 4, 0, 2, ***8***, 7, ***8***.
+The output of this code is ***1***, ***5***, ~~fb1~~, 3, ***1***, ***5***, 4, ~~fb2~~, 0, 2, ***8***, 7, ***8***.
 <br />
 You can detect the number of destinations available for a given extractor through `Extractor.getDestCount()`
 ```tsx
@@ -196,26 +198,26 @@ return <>
   </e.Joint>
 </>
 ```
-You can NOT do this to create a fallback destination for when there aren't any other
-```tsx
-return <>
-  <Show when={!someExtractor.getDestCount!()}>
-    <someExtractor.Dest />
-  </Show>
-</>
-```
-Because it would start a strange loop due to which the new destination would disable itself. To do that you must use the `hidden` attribute, which will made sure that the destination is not considered by `Extractor.getDestCount()` at all
-```tsx
-return <>
-  <Show when={!someExtractor.getDestCount!()}>
-    <someExtractor.Dest hidden />
-  </Show>
-</>
-```
-Due to this pattern being fairly common, there's the `Extractor.Fallback` component that does that exact thing
+You can use `Extractor.SameContextSource` to automate the process of using a `SameContext` inside a `Extractor.Source`. When in doubt, use `Extractor.SameContextSource` instead of `Extractor.Source`
 ```tsx
+const e = new Extractor(), ctx = createContext(1);
 return <>
-  <someExtractor.Fallback />
+  <e.Joint>
+    <div>
+      {/* This will contain "1" and "3" */}
+      <e.Dest />
+    </div>
+    <ctx.Provider value={2}>
+      <div>
+        {/* This will contain "2" and "3" */}
+        <e.Dest />
+      </div>
+      <ctx.Provider value={3}>
+        <e.Source>{useContext(ctx)}</e.Source>
+        <e.SameContextSource>{useContext(ctx)}</e.SameContextSource>
+      </ctx.Provider>
+    </ctx.Provider>
+  </e.Joint>
 </>
 ```