solid-ctrl-flow 2.2.1 → 2.2.3

package/dist/index.d.ts

@@ -43,6 +43,9 @@ declare type Equals = MemoOptions<unknown>["equals"];
  *          <e.Source>
  *              This text will be shown instead of `e.Dest`
  *          </e.Source>
+ *
+ *          This would have been shown if there wasn't any `e.Dest`
+ *          <e.Fallback />
  *      </div>
  *  </e.Joint>
  * </>
@@ -54,7 +57,10 @@ export declare class Extractor {
     Joint: (props: {
         children?: JSX;
     }) => JSX;
-    Dest: () => JSX;
+    Fallback: () => JSX;
+    Dest: (props: {
+        hidden?: boolean | undefined;
+    }) => JSX;
     Source: (props: Info) => JSX;
     /**
      * Returns the number of destinations available for the current {@link Extractor}.
@@ -174,9 +180,10 @@ declare type Standard<T> = ParentProps<{
 }>;
 
 /** Type of the data stored in the {@link Context} created by each {@link Extractor} */
-declare interface State {
-    readonly sources: OrderedLinkedList<Info>;
-    readonly extracting: number;
+declare class State {
+    #private;
+    get sources(): OrderedLinkedList<Info>;
+    get destCount(): number;
     shift(k: number): void;
     force(): void;
 }

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { createMemo, splitProps, untrack, createRoot, getOwner, createComponent, Show, createContext, useContext, onCleanup, For, createRenderEffect, on, createSignal, createSelector, equalFn, Match } from "solid-js";
+import { createMemo, splitProps, untrack, createRoot, getOwner, createComponent, Show, createContext, useContext, createRenderEffect, on, onCleanup, For, createSignal, createSelector, equalFn, Match } from "solid-js";
 function memoProps(obj, keys = Reflect.ownKeys(obj), equals = false) {
   const out = {};
   for (const elm of keys)
@@ -92,6 +92,28 @@ class OrderedLinkedListNode extends OrderedLinkedList {
   }
 }
 const COMPARATOR = (a, b) => (a.order ?? 0) - (b.order ?? 0);
+const SOURCES_OPTS = {
+  internal: true,
+  equals: false
+}, DEST_COUNT_OPTS = {
+  internal: true
+};
+class State {
+  #sources = createSignal(new OrderedLinkedList(), SOURCES_OPTS);
+  #destCount = createSignal(0, DEST_COUNT_OPTS);
+  get sources() {
+    return this.#sources[0]();
+  }
+  get destCount() {
+    return this.#destCount[0]();
+  }
+  shift(k) {
+    this.#destCount[1]((v) => v + k);
+  }
+  force() {
+    this.#sources[1]((v) => v);
+  }
+}
 class Extractor {
   constructor(name) {
     this.ctx = createContext(void 0, {
@@ -100,6 +122,7 @@ class Extractor {
   }
   ctx;
   Joint = Joint.bind(this);
+  Fallback = Fallback.bind(this);
   Dest = Dest.bind(this);
   Source = Source.bind(this);
   /**
@@ -109,11 +132,11 @@ class Extractor {
    */
   get getDestCount() {
     const state = useContext(this.ctx);
-    return state && (() => state.extracting);
+    return state && (() => state.destCount);
   }
 }
 function Joint(props) {
-  const state = createState();
+  const state = new State();
   return createComponent(this.ctx.Provider, {
     value: state,
     get children() {
@@ -121,12 +144,30 @@ function Joint(props) {
     }
   });
 }
-function Dest() {
+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");
-  state.shift(1);
-  onCleanup(() => state.shift(-1));
+  createRenderEffect(on(createMemo(() => props.hidden), (x) => {
+    if (x)
+      return;
+    onCleanup(() => state.shift(-1));
+    state.shift(1);
+  }));
   return createComponent(For, {
     get each() {
       return [...state.sources];
@@ -139,8 +180,7 @@ function Source(props) {
   if (!state)
     throw new Error("An extractor's source must be inside one of its joints");
   const {
-    sources,
-    force
+    sources
   } = state;
   const order = createMemo(() => props.order);
   const info = {
@@ -155,29 +195,10 @@ function Source(props) {
   createRenderEffect(on(order, () => {
     onCleanup(() => node.remove());
     sources.add(node, COMPARATOR);
-    force();
+    state.force();
   }));
   return [];
 }
-function createState() {
-  const [getExtracting, setExtracting] = createSignal(0, {
-    internal: true
-  });
-  const [getSources, setSources] = createSignal(new OrderedLinkedList(), {
-    internal: true,
-    equals: false
-  });
-  return {
-    get sources() {
-      return getSources();
-    },
-    get extracting() {
-      return getExtracting();
-    },
-    shift: (k) => setExtracting((v) => v + k),
-    force: () => setSources((s) => s)
-  };
-}
 const ctx = createContext(void 0, {
   name: "on-case"
 });

package/dist/index.umd.js

@@ -95,6 +95,28 @@
     }
   }
   const COMPARATOR = (a, b) => (a.order ?? 0) - (b.order ?? 0);
+  const SOURCES_OPTS = {
+    internal: true,
+    equals: false
+  }, DEST_COUNT_OPTS = {
+    internal: true
+  };
+  class State {
+    #sources = solidJs.createSignal(new OrderedLinkedList(), SOURCES_OPTS);
+    #destCount = solidJs.createSignal(0, DEST_COUNT_OPTS);
+    get sources() {
+      return this.#sources[0]();
+    }
+    get destCount() {
+      return this.#destCount[0]();
+    }
+    shift(k) {
+      this.#destCount[1]((v) => v + k);
+    }
+    force() {
+      this.#sources[1]((v) => v);
+    }
+  }
   class Extractor {
     constructor(name) {
       this.ctx = solidJs.createContext(void 0, {
@@ -103,6 +125,7 @@
     }
     ctx;
     Joint = Joint.bind(this);
+    Fallback = Fallback.bind(this);
     Dest = Dest.bind(this);
     Source = Source.bind(this);
     /**
@@ -112,11 +135,11 @@
      */
     get getDestCount() {
       const state = solidJs.useContext(this.ctx);
-      return state && (() => state.extracting);
+      return state && (() => state.destCount);
     }
   }
   function Joint(props) {
-    const state = createState();
+    const state = new State();
     return solidJs.createComponent(this.ctx.Provider, {
       value: state,
       get children() {
@@ -124,12 +147,30 @@
       }
     });
   }
-  function Dest() {
+  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");
-    state.shift(1);
-    solidJs.onCleanup(() => state.shift(-1));
+    solidJs.createRenderEffect(solidJs.on(solidJs.createMemo(() => props.hidden), (x) => {
+      if (x)
+        return;
+      solidJs.onCleanup(() => state.shift(-1));
+      state.shift(1);
+    }));
     return solidJs.createComponent(solidJs.For, {
       get each() {
         return [...state.sources];
@@ -142,8 +183,7 @@
     if (!state)
       throw new Error("An extractor's source must be inside one of its joints");
     const {
-      sources,
-      force
+      sources
     } = state;
     const order = solidJs.createMemo(() => props.order);
     const info = {
@@ -158,29 +198,10 @@
     solidJs.createRenderEffect(solidJs.on(order, () => {
       solidJs.onCleanup(() => node.remove());
       sources.add(node, COMPARATOR);
-      force();
+      state.force();
     }));
     return [];
   }
-  function createState() {
-    const [getExtracting, setExtracting] = solidJs.createSignal(0, {
-      internal: true
-    });
-    const [getSources, setSources] = solidJs.createSignal(new OrderedLinkedList(), {
-      internal: true,
-      equals: false
-    });
-    return {
-      get sources() {
-        return getSources();
-      },
-      get extracting() {
-        return getExtracting();
-      },
-      shift: (k) => setExtracting((v) => v + k),
-      force: () => setSources((s) => s)
-    };
-  }
   const ctx = solidJs.createContext(void 0, {
     name: "on-case"
   });

package/package.json

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

package/readMe.md

@@ -145,7 +145,79 @@ 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***, 3, ***1***, ***5***, 4, 0, 2, ***8***, 7, ***8***.
+<br />
+You can detect the number of destinations available for a given extractor through `Extractor.getDestCount()`
+```tsx
+const e = new Extractor();
+const [ g, s ] = createSignal(true);
+return <>
+  {void untrack(() => {
+    // The function is `undefined` when we're not under an `Extractor.Joint`
+    console.log(e.getDestCount); //→ undefined
+  })}
+  <e.Joint>
+    {untrack(() => {
+      // The founction is returned by a getter that bounds it to the current context
+      const f = e.getDestCount!;
+      return <>
+        {untrack(() => {
+          // (This scope is not reactive, so it doesn't know about the destinations that will come up later)
+          console.log(f()); //→ 0
+        })}
+
+        <e.Dest />
+        {untrack(() => {
+          console.log(f()); //→ 1
+        })}
+
+        <e.Dest />
+
+        <Show when={g()}>
+          <e.Dest />
+        </Show>
+
+        <button onClick={() => s(x => !x)}>
+          Toggle
+        </button>
+        <br />
+        {/* This is reactive and will contain the number 2 or 3 depending on `g()` */}
+        {JSON.stringify(g())} - {f()}
+
+        <e.Joint>
+          {untrack(() => {
+            // Since `f()` is bound, it will return the destination count of ITS `Extractor.Joint`, not the closest one
+            console.log(f()); //→ 3
+            console.log(e.getDestCount!()); //→ 0
+          })}
+        </e.Joint>
+      </>
+    })}
+  </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
+```tsx
+return <>
+  <someExtractor.Fallback />
+</>
+```
 
 ## Utility