solid-ctrl-flow 1.0.49 → 1.0.51

package/dist/index.d.ts

@@ -127,13 +127,22 @@ export declare function createReactiveResource<R>(f: EffectFunction<R | undefine
 /** Built-in {@link ReactiveContext} which allows you to display different things in debug mode */
 export declare const debug: ReactiveContext<boolean>;
 
+/**
+ * Defines a reactive property on an object
+ * @param obj The object on which to define the property
+ * @param k The key of the property that will be defined
+ * @param param2 The {@link Signal} to use as the data store of the property
+ * @returns The same thing passed as {@link obj}
+ */
+export declare function defineSignalProperty<const T, K extends keyof T>(obj: T, k: K, [get, set]: Signal<T[K]>): T;
+
 /**
  * Eventually wraps its content into a template if a certain condition is met.
- * The content is memoized in the beginning and will be recycled even if the wrapper changes.
- * You can avoid the memoization trought {@link Standard.unrecycled}, this is needed if you want to use a context provider on your template.
+ * If you set {@link Standard.recycled} to `true`, the content will be memoized in the beginning and will be recycled even if the wrapper changes.
+ * You can't use memoization if you want to use a context provider on your template.
  * If {@link Keyed.keyed} is active, the template will be executed each time the content of {@link Standard.when} changes.
- * If {@link Standard.unrecycled} is active, the content will be executed each time it is mounted (Each time {@link Standard.when} goes from a falsish value to a truish one and vice versa).
- * If both {@link Keyed.keyed} and {@link Standard.unrecycled} are active, the content will be executed each time {@link Standard.when} changes
+ * If {@link Standard.recycled} is not active, the content will be executed each time it is mounted (Each time {@link Standard.when} goes from a falsish value to a truish one and vice versa).
+ * If {@link Keyed.keyed} is active and {@link Standard.recycled} isn't, the content will be executed each time {@link Standard.when} changes
  */
 export declare function Enfold<T>(props: Keyed<T>): JSX.Element;
 
@@ -160,25 +169,6 @@ export declare function memoProps<T>(obj: T, keys?: undefined, equals?: Equals):
 
 export declare function memoProps<T, K extends readonly (keyof T)[]>(obj: T, keys: K, equals?: Equals): Pick<T, K[number]>;
 
-/**
- * Like a {@link For}, but instead of putting an element after another it nests them.
- * The component will try to recycle the layers when the source array changes (Once again, like the {@link For}).
- * Due to the recyling, the layers will be created indipendently, thus their {@link Owner}s won't be nested in their parents' ones, this makes the component unsuitable to wrap the content with context providers.
- * Example:
- * ```tsx
- * return <>
- * 	<Nest each={[ 1, 2, 3 ]} template={(c, x) => <>({x}, {c()}, -{x})</>}>
- *		CONTENT
- * 	</Nest>
- * </>
- * ```
- * Will output "(1, (2, (3, CONTENT, -3), -2), -1)"
- */
-export declare function Nest<T>(props: ParentProps<{
-    each: readonly T[] | undefined;
-    template: (c: Accessor<JSX.Element>, x: T, i: Accessor<number>) => JSX.Element;
-}>): JSX.Element;
-
 /**
  * Allows the use of {@link Case}s inside of {@link Switch}es.
  * Example:
@@ -215,7 +205,7 @@ export declare const On: (props: ParentProps<{
 
 /**
  * Reactive {@link Context} with some additional built-in functionalities.
- * The call signature returns the value in the current {@link Owner} (It's like calling {@link read})
+ * The call signature returns the value in the current {@link Owner} (It's like calling {@link get})
  */
 export declare abstract class ReactiveContext<T> extends BASE_CTOR<T> {
     /** The actual {@link Context} that contains the reactive {@link Accessor} to the value */
@@ -224,7 +214,7 @@ export declare abstract class ReactiveContext<T> extends BASE_CTOR<T> {
      * Returns the {@link Accessor} for the value in the current {@link Owner}.
      * It's like calling {@link useContext}
      */
-    get read(): Accessor<T>;
+    get get(): Accessor<T>;
     /**
      * Component that sets the value of the current {@link Context} for its children.
      * If no value is provided then it will use the default value for {@link ctx}.
@@ -297,7 +287,8 @@ export declare namespace Slot {
 }
 
 /**
- * Executes {@link splitProps} and memoizes the first of the two returned objects using {@link memoProps}
+ * Executes {@link splitProps} and memoizes the first of the two returned objects using {@link memoProps}.
+ * Unlike {@link splitProps}, this doesn't support multiple key-sets out of the box
  * @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
  * @param equals The comparator function to use on the newly created memos
@@ -307,7 +298,7 @@ export declare function splitAndMemoProps<T extends Record<any, any>, K extends
 /** Standard parameters to pass to an {@link Enfold} */
 declare type Standard<T> = ParentProps<{
     when: T;
-    unrecycled?: boolean;
+    recycled?: boolean;
 }>;
 
 /** Type of an element wrapping call-back which accepts an additional parameter */

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useContext, createMemo, createComponent, createContext, createRoot, getOwner, untrack, createEffect, on, createResource, splitProps, Show, onCleanup, For, mapArray, createSignal, onMount, Match, mergeProps, createRenderEffect, getListener } from "solid-js";
+import { useContext, createMemo, createComponent, createContext, createRoot, getOwner, untrack, createEffect, on, createResource, splitProps, Show, onCleanup, For, Match, mergeProps, createRenderEffect, getListener } from "solid-js";
 import { createMutable } from "solid-js/store";
 const BASE_CTOR = Function;
 class ReactiveContext extends BASE_CTOR {
@@ -7,7 +7,7 @@ class ReactiveContext extends BASE_CTOR {
    * Returns the {@link Accessor} for the value in the current {@link Owner}.
    * It's like calling {@link useContext}
    */
-  get read() {
+  get get() {
     return useContext(this.ctx);
   }
   /**
@@ -48,7 +48,7 @@ class ReactiveContext extends BASE_CTOR {
     const ctx2 = createContext(() => defaultValue, {
       name
     });
-    const f = () => out.read();
+    const f = () => out.get();
     f.ctx = ctx2;
     const out = Object.setPrototypeOf(f, ReactiveContext.prototype);
     return out;
@@ -67,6 +67,15 @@ function runWithContext(ctx2, value, f) {
 function untrackCall(f, ...args) {
   return untrack(() => f.apply(this, args));
 }
+function defineSignalProperty(obj, k, [get, set]) {
+  return Object.defineProperty(obj, k, {
+    get,
+    set,
+    enumerable: true,
+    writable: true,
+    configurable: true
+  });
+}
 function createReactiveResource(f) {
   var refetch;
   const memo = createMemo(f);
@@ -95,7 +104,7 @@ const HANDLER = new Proxy({}, {
 });
 function Enfold(props) {
   const f = () => props.children;
-  const children = unwrap(createMemo(() => props.unrecycled ? f : createMemo(f)));
+  const children = unwrap(createMemo(() => props.recycled ? createMemo(f) : f));
   return createComponent(Show, {
     get keyed() {
       return props.keyed;
@@ -217,30 +226,17 @@ function createInfo(props) {
     }
   };
 }
-function Nest(props) {
-  const memo = memoProps(props, ["template", "children"]);
-  const content = mapArray(() => props.each, (x, i) => {
-    const [get, set] = createSignal();
-    const out = createMemo(() => untrackCall(memo.template, get, x, i));
-    return (x2) => {
-      onMount(() => set(() => x2));
-      onCleanup(() => set(void 0));
-      return out;
-    };
-  });
-  return createMemo(() => content().reduceRight((a, b) => b(a), memo.children));
-}
 const ctx = ReactiveContext.create(void 0, "on-case");
 const On = ctx.Provider;
 function Case(props) {
   const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
   const {
-    read
+    get
   } = ctx;
   const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
   return createComponent(Match, mergeProps({
     get when() {
-      return pred(read());
+      return pred(get());
     }
   }, other));
 }
@@ -291,7 +287,6 @@ function SameContext(props) {
 export {
   Case,
   Enfold,
-  Nest,
   On,
   ReactiveContext,
   SameContext,
@@ -302,6 +297,7 @@ export {
   createExtractor,
   createReactiveResource,
   debug,
+  defineSignalProperty,
   memoProps,
   runWithContext,
   splitAndMemoProps,

package/dist/index.umd.js

@@ -9,7 +9,7 @@
      * Returns the {@link Accessor} for the value in the current {@link Owner}.
      * It's like calling {@link useContext}
      */
-    get read() {
+    get get() {
       return solidJs.useContext(this.ctx);
     }
     /**
@@ -50,7 +50,7 @@
       const ctx2 = solidJs.createContext(() => defaultValue, {
         name
       });
-      const f = () => out.read();
+      const f = () => out.get();
       f.ctx = ctx2;
       const out = Object.setPrototypeOf(f, ReactiveContext.prototype);
       return out;
@@ -69,6 +69,15 @@
   function untrackCall(f, ...args) {
     return solidJs.untrack(() => f.apply(this, args));
   }
+  function defineSignalProperty(obj, k, [get, set]) {
+    return Object.defineProperty(obj, k, {
+      get,
+      set,
+      enumerable: true,
+      writable: true,
+      configurable: true
+    });
+  }
   function createReactiveResource(f) {
     var refetch;
     const memo = solidJs.createMemo(f);
@@ -97,7 +106,7 @@
   });
   function Enfold(props) {
     const f = () => props.children;
-    const children = unwrap(solidJs.createMemo(() => props.unrecycled ? f : solidJs.createMemo(f)));
+    const children = unwrap(solidJs.createMemo(() => props.recycled ? solidJs.createMemo(f) : f));
     return solidJs.createComponent(solidJs.Show, {
       get keyed() {
         return props.keyed;
@@ -219,30 +228,17 @@
       }
     };
   }
-  function Nest(props) {
-    const memo = memoProps(props, ["template", "children"]);
-    const content = solidJs.mapArray(() => props.each, (x, i) => {
-      const [get, set] = solidJs.createSignal();
-      const out = solidJs.createMemo(() => untrackCall(memo.template, get, x, i));
-      return (x2) => {
-        solidJs.onMount(() => set(() => x2));
-        solidJs.onCleanup(() => set(void 0));
-        return out;
-      };
-    });
-    return solidJs.createMemo(() => content().reduceRight((a, b) => b(a), memo.children));
-  }
   const ctx = ReactiveContext.create(void 0, "on-case");
   const On = ctx.Provider;
   function Case(props) {
     const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
     const {
-      read
+      get
     } = ctx;
     const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
     return solidJs.createComponent(solidJs.Match, solidJs.mergeProps({
       get when() {
-        return pred(read());
+        return pred(get());
       }
     }, other));
   }
@@ -292,7 +288,6 @@
   }
   exports2.Case = Case;
   exports2.Enfold = Enfold;
-  exports2.Nest = Nest;
   exports2.On = On;
   exports2.ReactiveContext = ReactiveContext;
   exports2.SameContext = SameContext;
@@ -302,6 +297,7 @@
   exports2.createExtractor = createExtractor;
   exports2.createReactiveResource = createReactiveResource;
   exports2.debug = debug;
+  exports2.defineSignalProperty = defineSignalProperty;
   exports2.memoProps = memoProps;
   exports2.runWithContext = runWithContext;
   exports2.splitAndMemoProps = splitAndMemoProps;

package/package.json

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

package/readMe.md

@@ -39,38 +39,16 @@ And if `value` was falsish, it would have been equivalent to this
 ```tsx
 return <>CONTENT</>
 ```
-If you are wrapping the content with a context provider you need to set the `unrecycled` attribute to `true` to run again the whole content, otherwise the `Owner` of the content won't be child of the template one
+If you are NOT wrapping the content with a context provider you can set the `recycled` attribute to `true` in order to NOT run again the whole content each time its template gets added/removed, in this case the `Owner` of the content won't be child of the template one
 ```tsx
 return <>
-  <Enfold unrecycled when={value} template={c => <ctx.Provider value={2} children={c()} />}>
+  <Enfold recycled when={value} template={c => <ctx.Provider value={2} children={c()} />}>
+    {/* This won't be 2 */}
     {useContext(ctx)}
   </Enfold>
 </>
 ```
 
-### `Nest`
-Like a `For`, but instead of putting an element after another it nests them.
-The following code
-```tsx
-return <>
-  <Nest each={[ "red", "green", "blue" ]} template={(c, x) => <div style={{ background: x, padding: "1ch" }}>{c()}</div>}>
-    CONTENT
-  </Nest>
-</>
-```
-Is equivalent to this
-```tsx
-return <>
-  <div style={{ background: "red", padding: "1ch" }}>
-    <div style={{ background: "green", padding: "1ch" }}>
-      <div style={{ background: "blue", padding: "1ch" }}>
-        CONTENT
-      </div>
-    </div>
-  </div>
-</>
-```
-
 ### `On` - `Case`
 Allows you to not repeat the same condition across many `Match` components.
 The following code
@@ -210,7 +188,7 @@ Method that creates a reactive version of a solid `Context` with some additional
 ```ts
 const ctx = ReactiveContext.create("SOMETHING");
 const underlyingNormalContext = ctx.ctx;
-const valueAccessorForTheCurrentOwner = ctx.read;
+const valueAccessorForTheCurrentOwner = ctx.get;
 const value = ctx();
 ```
 
@@ -237,6 +215,9 @@ return <>
 ### `untrackCall()`
 Calls a function untracking what happens inside of it but not what gets passed as its argument
 
+### `defineSignalProperty()`
+Defines a reactive property on an object
+
 ### `createReactiveResource()`
 Like `createResource()` but the provided function will be reactive