solid-ctrl-flow 1.0.11 → 1.0.13

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export declare function Case(props: {
  *  </e.Joint>
  * <>
  * ```
+ * @param name Name to give to the context of the extractor
  */
 export declare function createExtractor(name?: string): {
     /** Bound {@link Dest} */
@@ -74,17 +75,28 @@ export declare function createExtractor(name?: string): {
     readonly isExtracted: () => number | 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;
+/**
+ * Creates a context with a reactive value.
+ * It returns the provider directly
+ * @param init Initial value for the context
+ * @param def Default value to set when calling the provider without one
+ * @param name Name to give to the context
+ */
+export declare function createOption<T>(init: NonNullable<T>, def?: NonNullable<T>, name?: string): ((props: {
+    value?: T;
     children: JSX.Element;
-}): JSX.Element;
+}) => JSX.Element) & {
+    /** Returns the {@link Accessor} for the value in the current context */
+    read: Accessor<NonNullable<T>>;
+};
 
-/** 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>;
-}
+/** Creates a scope for the value of {@link Debug.read}, which allows you to display different things in debug mode */
+export declare const Debug: ((props: {
+    value?: boolean | undefined;
+    children: JSX.Element;
+}) => JSX.Element) & {
+    read: Accessor<boolean>;
+};
 
 /** Informations about a {@link Source} component */
 declare type Info = {

package/dist/index.mjs

@@ -1,11 +1,58 @@
-import { createContext, createMemo, createComponent, useContext, Match, mergeProps, onCleanup, For, Show, splitProps, createRoot, getOwner, untrack } from "solid-js";
+import { untrack, createMemo, splitProps, createContext, createRoot, getOwner, createComponent, useContext, Match, mergeProps, onCleanup, For, Show } from "solid-js";
 import { createMutable } from "solid-js/store";
-const ctx$1 = createContext(() => void 0, {
+function untrackCall(f, ...args) {
+  return untrack(() => f.apply(this, args));
+}
+function memoProps(obj, keys = Object.keys(obj)) {
+  const out = {};
+  for (const elm of keys)
+    Object.defineProperty(out, elm, {
+      enumerable: true,
+      get: createMemo(() => obj[elm])
+    });
+  return out;
+}
+function splitAndMemoProps(obj, keys) {
+  const [mine, other] = splitProps(obj, keys);
+  return [memoProps(mine, keys), other];
+}
+function createOption(init, def = init, name) {
+  const prop = "read";
+  const ctx2 = createContext(() => init, {
+    name
+  });
+  const provider = (props) => createComponent(ctx2.Provider, {
+    value: () => props.value ?? def,
+    get children() {
+      return props.children;
+    }
+  });
+  Object.defineProperty(provider, prop, {
+    get: () => useContext(ctx2)
+  });
+  return provider;
+}
+function runWithContext(ctx2, value, f) {
+  return createRoot(async (d) => {
+    try {
+      getOwner().context = {
+        [ctx2.id]: value
+      };
+      const out = f(value);
+      if (out instanceof Promise)
+        return out.finally(d);
+      return d(), out;
+    } catch (ex) {
+      throw d(), ex;
+    }
+  });
+}
+const ctx = createContext(() => void 0, {
   name: "case-when"
 });
 function Case(props) {
   const memo = createMemo(() => props.value);
-  return createComponent(ctx$1.Provider, {
+  return createComponent(ctx.Provider, {
     value: memo,
     get children() {
       return props.children;
@@ -14,7 +61,7 @@ function Case(props) {
 }
 function When(props) {
   const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
-  const value = useContext(ctx$1);
+  const value = useContext(ctx);
   const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
   return createComponent(Match, mergeProps({
     get when() {
@@ -22,22 +69,6 @@ function When(props) {
     }
   }, 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
@@ -111,37 +142,13 @@ function Joint(props) {
     }
   });
 }
-function memoProps(obj, keys = Object.keys(obj)) {
-  const out = {};
-  for (const elm of keys)
-    Object.defineProperty(out, elm, { enumerable: true, get: createMemo(() => obj[elm]) });
-  return out;
-}
-function splitAndMemoProps(obj, keys) {
-  const [mine, other] = splitProps(obj, keys);
-  return [memoProps(mine, keys), other];
-}
-function runWithContext(ctx2, value, f) {
-  return createRoot(async (d) => {
-    try {
-      getOwner().context = { [ctx2.id]: value };
-      const out = f(value);
-      if (out instanceof Promise)
-        return out.finally(d);
-      return d(), out;
-    } catch (ex) {
-      throw d(), ex;
-    }
-  });
-}
-function untrackCall(f, ...args) {
-  return untrack(() => f.apply(this, args));
-}
+const Debug = createOption(false, true, "debug-scope");
 export {
   Case,
   Debug,
   When,
   createExtractor,
+  createOption,
   memoProps,
   runWithContext,
   splitAndMemoProps,

package/dist/index.umd.js

@@ -2,12 +2,59 @@
   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.solidCtrlFlow = {}, global.solidJs, global.solidJsStore));
 })(this, function(exports2, solidJs, store) {
   "use strict";
-  const ctx$1 = solidJs.createContext(() => void 0, {
+  function untrackCall(f, ...args) {
+    return solidJs.untrack(() => f.apply(this, args));
+  }
+  function memoProps(obj, keys = Object.keys(obj)) {
+    const out = {};
+    for (const elm of keys)
+      Object.defineProperty(out, elm, {
+        enumerable: true,
+        get: solidJs.createMemo(() => obj[elm])
+      });
+    return out;
+  }
+  function splitAndMemoProps(obj, keys) {
+    const [mine, other] = solidJs.splitProps(obj, keys);
+    return [memoProps(mine, keys), other];
+  }
+  function createOption(init, def = init, name) {
+    const prop = "read";
+    const ctx2 = solidJs.createContext(() => init, {
+      name
+    });
+    const provider = (props) => solidJs.createComponent(ctx2.Provider, {
+      value: () => props.value ?? def,
+      get children() {
+        return props.children;
+      }
+    });
+    Object.defineProperty(provider, prop, {
+      get: () => solidJs.useContext(ctx2)
+    });
+    return provider;
+  }
+  function runWithContext(ctx2, value, f) {
+    return solidJs.createRoot(async (d) => {
+      try {
+        solidJs.getOwner().context = {
+          [ctx2.id]: value
+        };
+        const out = f(value);
+        if (out instanceof Promise)
+          return out.finally(d);
+        return d(), out;
+      } catch (ex) {
+        throw d(), ex;
+      }
+    });
+  }
+  const ctx = solidJs.createContext(() => void 0, {
     name: "case-when"
   });
   function Case(props) {
     const memo = solidJs.createMemo(() => props.value);
-    return solidJs.createComponent(ctx$1.Provider, {
+    return solidJs.createComponent(ctx.Provider, {
       value: memo,
       get children() {
         return props.children;
@@ -16,7 +63,7 @@
   }
   function When(props) {
     const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
-    const value = solidJs.useContext(ctx$1);
+    const value = solidJs.useContext(ctx);
     const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
     return solidJs.createComponent(solidJs.Match, solidJs.mergeProps({
       get when() {
@@ -24,22 +71,6 @@
       }
     }, 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
@@ -113,36 +144,12 @@
       }
     });
   }
-  function memoProps(obj, keys = Object.keys(obj)) {
-    const out = {};
-    for (const elm of keys)
-      Object.defineProperty(out, elm, { enumerable: true, get: solidJs.createMemo(() => obj[elm]) });
-    return out;
-  }
-  function splitAndMemoProps(obj, keys) {
-    const [mine, other] = solidJs.splitProps(obj, keys);
-    return [memoProps(mine, keys), other];
-  }
-  function runWithContext(ctx2, value, f) {
-    return solidJs.createRoot(async (d) => {
-      try {
-        solidJs.getOwner().context = { [ctx2.id]: value };
-        const out = f(value);
-        if (out instanceof Promise)
-          return out.finally(d);
-        return d(), out;
-      } catch (ex) {
-        throw d(), ex;
-      }
-    });
-  }
-  function untrackCall(f, ...args) {
-    return solidJs.untrack(() => f.apply(this, args));
-  }
+  const Debug = createOption(false, true, "debug-scope");
   exports2.Case = Case;
   exports2.Debug = Debug;
   exports2.When = When;
   exports2.createExtractor = createExtractor;
+  exports2.createOption = createOption;
   exports2.memoProps = memoProps;
   exports2.runWithContext = runWithContext;
   exports2.splitAndMemoProps = splitAndMemoProps;

package/package.json

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

package/readMe.md

@@ -40,7 +40,7 @@ const value = false;
 return <>
   <Debug value={value}>
     {/* (A LOT OF NESTING...) */}
-    <Show when={Debug.isDebug()}>
+    <Show when={Debug.read()}>
       THIS WOULD BE VISIBLE IF "value" HAD BEEN {true}
     </Show>
   </Debug>
@@ -63,7 +63,7 @@ function MyCustomComponent() {
   </>
 }
 ```
-If you use it normally it will output `4`, `1`, `2`, `3`, `5`
+If you use it normally it will output `4`, ***`1`***, ***`2`***, ***`3`***, `5`
 ```tsx
 return <>
   4
@@ -116,11 +116,17 @@ return <>
 ## Utility functions
 Utility functions needed for the components above
 
+### `untrackCall()`
+Calls a function untracking what happens inside of it but not what gets passed as its argument
+
 ### `memoProps()`
 Creates a partial version of an object with memoized remaining properties
 
 ### `splitAndMemoProps()`
 Like `splitProps()` but memoizes the whole local part
 
+### `createOption()`
+Allows you to create simple reactive contexts; For example `Debug` is made with it
+
 ### `runWithContext()`
 Creates a context scope that persists for the duration of a function