solid-ctrl-flow 2.2.4 → 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.
@@ -134,7 +146,8 @@ export declare class OrderedLinkedList<T> {
     /** Yields all the elements PAST the current */
     [Symbol.iterator](): Generator<T>;
     /**
-     * Adds a node to the list in order
+     * Adds a node to the list in order.
+     * If two nodes have the same order, it would have been more efficient to put the latest one first, but this would not have been ok, since we also want to order by insertion time
      * @param node The node to add
      * @param comp The comparison function to use
      * @returns The same value as {@link node}

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) {
@@ -61,14 +61,15 @@ class OrderedLinkedList {
     yield* next;
   }
   /**
-   * Adds a node to the list in order
-   * @param node The node to add
-   * @param comp The comparison function to use
-   * @returns The same value as {@link node}
-   */
+     * Adds a node to the list in order.
+  * If two nodes have the same order, it would have been more efficient to put the latest one first, but this would not have been ok, since we also want to order by insertion time
+     * @param node The node to add
+     * @param comp The comparison function to use
+     * @returns The same value as {@link node}
+     */
   add(node, comp) {
     const { next } = this;
-    if (next && comp(node.value, next.value) > 0)
+    if (next && comp(node.value, next.value) >= 0)
       return next.add(node, comp);
     this.next = node;
     node.prev = this;
@@ -123,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.
@@ -145,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;
@@ -194,11 +180,36 @@ function Source(props) {
   };
   const node = new OrderedLinkedListNode(info);
   createRenderEffect(on(order, () => {
-    onCleanup(() => node.remove());
+    onCleanup(() => {
+      node.remove();
+      state.force();
+    });
     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

@@ -64,14 +64,15 @@
       yield* next;
     }
     /**
-     * Adds a node to the list in order
-     * @param node The node to add
-     * @param comp The comparison function to use
-     * @returns The same value as {@link node}
-     */
+       * Adds a node to the list in order.
+    * If two nodes have the same order, it would have been more efficient to put the latest one first, but this would not have been ok, since we also want to order by insertion time
+       * @param node The node to add
+       * @param comp The comparison function to use
+       * @returns The same value as {@link node}
+       */
     add(node, comp) {
       const { next } = this;
-      if (next && comp(node.value, next.value) > 0)
+      if (next && comp(node.value, next.value) >= 0)
         return next.add(node, comp);
       this.next = node;
       node.prev = this;
@@ -126,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.
@@ -148,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;
@@ -197,11 +183,36 @@
     };
     const node = new OrderedLinkedListNode(info);
     solidJs.createRenderEffect(solidJs.on(order, () => {
-      solidJs.onCleanup(() => node.remove());
+      solidJs.onCleanup(() => {
+        node.remove();
+        state.force();
+      });
       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.4",
+  "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>
 </>
 ```