solid-ctrl-flow 1.0.0

package/dist/flow.d.ts

@@ -0,0 +1,128 @@
+import { Accessor } from 'solid-js';
+import { JSX } from 'solid-js';
+
+/**
+ * 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 function Case(props: {
+    value: any;
+    children: JSX.Element;
+}): JSX.Element;
+
+/**
+ * Creates a slot that allows you to show a component outside of its parent.
+ * It works with arbitrary nesting.
+ * Example:
+ * ```tsx
+ * const e = createExtractor();
+ * return <>
+ *  <e.Joint>
+ *      <div id="something">
+ *          <e.Dest />
+ *      </div>
+ *      <div id="something-else">
+ *          <e.Source>
+ *              This text will be shown instead of "e.Dest".
+ *              If there weren't to be any "e.Joint" ancestor, then this text would have stayed here
+ *          </e.Source>
+ *      </div>
+ *  </e.Joint>
+ * <>
+ * ```
+ */
+export declare function createExtractor(name?: string): {
+    /** Bound {@link Dest} */
+    Dest: () => JSX.Element;
+    /** Bound {@link Source} */
+    Source: (props: {
+        children: JSX.Element;
+    }) => JSX.Element;
+    /** Bound {@link Joint} */
+    Joint: (props: {
+        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})
+     * @returns Returns `null` if there is no parent {@link Joint}, `false` if there is a {@link Joint} but not a {@link Dest} and `true` otherwise
+     */
+    readonly isExtracted: () => boolean | null;
+};
+
+/** Sets the value that will be returned by {@link Debug.isDebug} for the children of the current component */
+export declare function Debug(props: {
+    value?: boolean;
+    children: JSX.Element;
+}): JSX.Element;
+
+/** Utility functions for the debug scopes */
+export declare namespace Debug {
+    /** Gets an {@link Accessor} that tells if the context in which THIS getter has been executed is in debug mode */
+    const isDebug: Accessor<boolean>;
+}
+
+/**
+ * Memoizes some of the properties of {@link obj}
+ * If {@link keys} is not provided, memoizes everything that get returned by {@link Object.keys} when provided with {@link obj}
+ * @param obj Object to partially memoize
+ * @param keys The keys of the properties to memoize
+ */
+export declare function memoProps<T, K extends readonly (keyof T)[] = (keyof T)[]>(obj: T, keys?: K): Pick<T, K[number]>;
+
+/**
+ * Esecutes {@link splitProps} and memoizes the first of the two returned objects
+ * @param obj Object to split and partially memoize
+ * @param keys The keys of the properties to memoize and to include in the first of the two objects
+ */
+export declare function splitAndMemoProps<T extends object, K extends readonly (keyof T)[]>(obj: T, keys: K): readonly [Pick<Pick<T, Extract<K, readonly (keyof T)[]>[number]>, K[number]>, Omit<T, K[number]>];
+
+/** 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/flow.mjs

@@ -0,0 +1,120 @@
+import { createContext, createMemo, createComponent, useContext, Match, mergeProps, onCleanup, children, Show, splitProps } from "solid-js";
+import { createMutable } from "solid-js/store";
+const ctx$1 = createContext(() => void 0, {
+  name: "case-when"
+});
+function Case(props) {
+  const memo = createMemo(() => props.value);
+  return createComponent(ctx$1.Provider, {
+    value: memo,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function When(props) {
+  const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
+  const value = useContext(ctx$1);
+  const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
+  return createComponent(Match, mergeProps({
+    get when() {
+      return pred(value());
+    }
+  }, other));
+}
+const ctx = createContext(() => false, {
+  name: "debug-scope"
+});
+function Debug(props) {
+  return createComponent(ctx.Provider, {
+    value: () => props.value ?? true,
+    get children() {
+      return props.children;
+    }
+  });
+}
+(function(_Debug) {
+  Object.defineProperty(Debug, "isDebug", {
+    get: () => useContext(ctx)
+  });
+})(Debug || (Debug = {}));
+function createExtractor(name = "extractor") {
+  const ctx2 = createContext(void 0, {
+    name
+  });
+  return {
+    /** Bound {@link Dest} */
+    Dest: Dest.bind(ctx2),
+    /** Bound {@link Source} */
+    Source: Source.bind(ctx2),
+    /** Bound {@link Joint} */
+    Joint: Joint.bind(ctx2),
+    /**
+     * 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})
+     * @returns Returns `null` if there is no parent {@link Joint}, `false` if there is a {@link Joint} but not a {@link Dest} and `true` otherwise
+     */
+    get isExtracted() {
+      const obj = useContext(ctx2);
+      return () => obj?.attached ?? null;
+    }
+  };
+}
+function Dest() {
+  const obj = useContext(this);
+  if (!obj)
+    return;
+  if (obj.attached)
+    throw new Error("Un extractor non può avere più di una destinazione");
+  obj.attached = true;
+  onCleanup(() => obj.attached = false);
+  return createMemo(() => obj.source);
+}
+function Source(props) {
+  const obj = useContext(this);
+  if (!obj)
+    return props.children;
+  if (obj.source)
+    throw new Error("Un extractor non può avere più di una sorgente");
+  const memo = children(() => props.children);
+  obj.source = createMemo(memo);
+  onCleanup(() => obj.source = void 0);
+  return createComponent(Show, {
+    get when() {
+      return !obj.attached;
+    },
+    get children() {
+      return memo();
+    }
+  });
+}
+function Joint(props) {
+  const obj = createMutable({
+    attached: false
+  });
+  return createComponent("this".Provider, {
+    value: obj,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function memoProps(obj, keys = Object.keys(obj)) {
+  const out = {};
+  for (const elm of keys)
+    Object.defineProperty(out, elm, {
+      get: createMemo(() => obj[elm])
+    });
+  return out;
+}
+function splitAndMemoProps(obj, keys) {
+  const [mine, other] = splitProps(obj, keys);
+  return [memoProps(mine, keys), other];
+}
+export {
+  Case,
+  Debug,
+  When,
+  createExtractor,
+  memoProps,
+  splitAndMemoProps
+};

package/dist/flow.umd.js

@@ -0,0 +1,122 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("solid-js"), require("solid-js/store")) : typeof define === "function" && define.amd ? define(["exports", "solid-js", "solid-js/store"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.solidFlow = {}, global.solidJs, global.solidJsStore));
+})(this, function(exports2, solidJs, store) {
+  "use strict";
+  const ctx$1 = solidJs.createContext(() => void 0, {
+    name: "case-when"
+  });
+  function Case(props) {
+    const memo = solidJs.createMemo(() => props.value);
+    return solidJs.createComponent(ctx$1.Provider, {
+      value: memo,
+      get children() {
+        return props.children;
+      }
+    });
+  }
+  function When(props) {
+    const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
+    const value = solidJs.useContext(ctx$1);
+    const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
+    return solidJs.createComponent(solidJs.Match, solidJs.mergeProps({
+      get when() {
+        return pred(value());
+      }
+    }, other));
+  }
+  const ctx = solidJs.createContext(() => false, {
+    name: "debug-scope"
+  });
+  function Debug(props) {
+    return solidJs.createComponent(ctx.Provider, {
+      value: () => props.value ?? true,
+      get children() {
+        return props.children;
+      }
+    });
+  }
+  (function(_Debug) {
+    Object.defineProperty(Debug, "isDebug", {
+      get: () => solidJs.useContext(ctx)
+    });
+  })(Debug || (Debug = {}));
+  function createExtractor(name = "extractor") {
+    const ctx2 = solidJs.createContext(void 0, {
+      name
+    });
+    return {
+      /** Bound {@link Dest} */
+      Dest: Dest.bind(ctx2),
+      /** Bound {@link Source} */
+      Source: Source.bind(ctx2),
+      /** Bound {@link Joint} */
+      Joint: Joint.bind(ctx2),
+      /**
+       * 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})
+       * @returns Returns `null` if there is no parent {@link Joint}, `false` if there is a {@link Joint} but not a {@link Dest} and `true` otherwise
+       */
+      get isExtracted() {
+        const obj = solidJs.useContext(ctx2);
+        return () => obj?.attached ?? null;
+      }
+    };
+  }
+  function Dest() {
+    const obj = solidJs.useContext(this);
+    if (!obj)
+      return;
+    if (obj.attached)
+      throw new Error("Un extractor non può avere più di una destinazione");
+    obj.attached = true;
+    solidJs.onCleanup(() => obj.attached = false);
+    return solidJs.createMemo(() => obj.source);
+  }
+  function Source(props) {
+    const obj = solidJs.useContext(this);
+    if (!obj)
+      return props.children;
+    if (obj.source)
+      throw new Error("Un extractor non può avere più di una sorgente");
+    const memo = solidJs.children(() => props.children);
+    obj.source = solidJs.createMemo(memo);
+    solidJs.onCleanup(() => obj.source = void 0);
+    return solidJs.createComponent(solidJs.Show, {
+      get when() {
+        return !obj.attached;
+      },
+      get children() {
+        return memo();
+      }
+    });
+  }
+  function Joint(props) {
+    const obj = store.createMutable({
+      attached: false
+    });
+    return solidJs.createComponent("this".Provider, {
+      value: obj,
+      get children() {
+        return props.children;
+      }
+    });
+  }
+  function memoProps(obj, keys = Object.keys(obj)) {
+    const out = {};
+    for (const elm of keys)
+      Object.defineProperty(out, elm, {
+        get: solidJs.createMemo(() => obj[elm])
+      });
+    return out;
+  }
+  function splitAndMemoProps(obj, keys) {
+    const [mine, other] = solidJs.splitProps(obj, keys);
+    return [memoProps(mine, keys), other];
+  }
+  exports2.Case = Case;
+  exports2.Debug = Debug;
+  exports2.When = When;
+  exports2.createExtractor = createExtractor;
+  exports2.memoProps = memoProps;
+  exports2.splitAndMemoProps = splitAndMemoProps;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "solid-ctrl-flow",
+  "version": "1.0.0",
+  "description": "Control flow components for solid-js",
+  "author": "AFatNiBBa",
+  "license": "ISC",
+  "types": "./dist/flow.d.ts",
+  "exports": {
+    "require": "./dist/flow.umd.js",
+    "import": "./dist/flow.mjs",
+    "types": "./dist/flow.d.ts"
+  },
+  "scripts": {
+    "build": "vite build",
+    "save": "npm run build && npm publish"
+  },
+  "devDependencies": {
+    "@types/node": "^20.6.0",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.5.3",
+    "vite-plugin-solid": "^2.7.0"
+  },
+  "dependencies": {
+    "solid-js": "^1.7.11"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AFatNiBBa/solid-ctrl-flow.git"
+  },
+  "keywords": [
+    "solid-js",
+    "control",
+    "flow",
+    "switch",
+    "case",
+    "when",
+    "debug"
+  ]
+}

package/readme.md

@@ -0,0 +1,123 @@
+
+# solid-ctrl-flow
+Control flow components for "solid-js"
+
+## Components
+
+### `Case` - `When`
+Allows you to not specify the full condition inside of a `Switch` component.
+The following code
+```tsx
+const value = 1;
+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>
+</>
+```
+
+### `Debug`
+Allows you to define ui section that are only visible in debug or NOT in debug
+```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>
+</>
+```
+
+### `createExtractor()`
+Creates a context for components that may need to be out of their parent in certain conditions.
+If you have this component
+```tsx
+const myCustomExtractor = createExtractor();
+
+function MyCustomComponent() {
+  return <>
+    1
+    <myCustomExtractor.Source>
+      2 {/* THIS WILL BE MOVED INSIDE THE "Dest" */}
+    </myCustomExtractor.Source>
+    3
+  </>
+}
+```
+If you use it normally it will output `1`, `2`, `3`, `4`, `5`
+```tsx
+return <>
+  4
+  <MyCustomComponent />
+  5
+</>
+```
+But if you use it together with a `Dest` and a `Joint` it will output `6`, `7`, `8`, ***`2`***, `9`, `10`, `11`, ***`1`***, ***`3`***, `12`, `13`, `14`
+```tsx
+return <>
+  6
+  <myCustomExtractor.Joint>
+    7
+    <div>
+      8
+      <myCustomExtractor.Dest /> {/* THE CONTENT OF "Source" WILL BE MOVED HERE */}
+      9
+    </div>
+    10
+    <div>
+      11
+      <MyCustomComponent />
+      12
+    </div>
+    13
+  </myCustomExtractor.Joint>
+  14
+</>
+```
+The `Joint` component is necessary for the `Source` and the `Dest` to communicate with each other.
+For example this will output `15`, `16`, `17`, `18`, `19`, ***`1`***, ***`2`***, ***`3`***, `20`, `21`
+```tsx
+return <>
+  15
+  <div>
+    16
+    <myCustomExtractor.Dest />
+    17
+  </div>
+  18
+  <div>
+    19
+    <MyCustomComponent />
+    20
+  </div>
+  21
+</>
+```
+
+## Utility functions
+Utility functions needed for the components above
+
+### `memoProps()`
+Creates a partial version of an object with memoized remaining properties
+
+### `splitAndMemoProps()`
+Like `splitProps()` but memoizes the whole local part