solid-ctrl-flow 1.0.19 → 1.0.21

package/dist/index.d.ts

@@ -1,6 +1,33 @@
 import { Accessor } from 'solid-js';
 import { Context } from 'solid-js';
+import { EffectFunction } from 'solid-js';
 import { JSX } from 'solid-js';
+import { Resource } from 'solid-js';
+import { Setter } from 'solid-js';
+import { Signal } from 'solid-js';
+
+/**
+ * Creates a one-way binding between two {@link Signal}s
+ * @param source The source of the binding
+ * @param dest The destination of the binding
+ * @param to Conversion function from {@link S} to {@link D}
+ * @returns A function that disposes the binding
+ */
+export declare function bind<S>(source: Signal<S>, dest: Signal<S>): () => void;
+
+export declare function bind<S, D>(source: Signal<S>, dest: Signal<D>, to: Convert<S, D>): () => void;
+
+/**
+ * Creates a two-way binding between two {@link Signal}s
+ * @param source The source of the binding
+ * @param dest The destination of the binding
+ * @param to Conversion function from {@link S} to {@link D}
+ * @param from Conversion function from {@link D} to {@link S}
+ * @returns A function that disposes the binding
+ */
+export declare function bindTwoWay<S>(source: Signal<S>, dest: Signal<S>): () => void;
+
+export declare function bindTwoWay<S, D>(source: Signal<S>, dest: Signal<D>, to: Convert<S, D>, from: Convert<D, S>): () => void;
 
 /**
  * Allows the use of {@link When}s inside of {@link Switch}es.
@@ -37,6 +64,9 @@ export declare function Case(props: {
     children: JSX.Element;
 }): JSX.Element;
 
+/** Conversion function for bindings */
+export declare type Convert<S, D> = (x: S, prev: D) => D;
+
 /**
  * Creates a slot that allows you to show a component outside of its parent.
  * It works with arbitrary nesting.
@@ -96,6 +126,13 @@ export declare function createOption<T>(init: T, def?: T, name?: string): {
     read: Accessor<T>;
 };
 
+/**
+ * Creates a {@link Resource} from the function {@link f}.
+ * The resource will be refetched each time one of the dependencies of {@link f} changes
+ * @param f A reactive resource fetcher
+ */
+export declare function createReactiveResource<R>(f: EffectFunction<R | undefined, R>): Resource<Awaited<R>>;
+
 /** 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: {
@@ -132,12 +169,26 @@ export declare function memoProps<T, K extends readonly (keyof T)[] = (keyof T)[
 export declare function runWithContext<T, R>(ctx: Context<T>, value: T, f: (x: T) => R): R;
 
 /**
- * Esecutes {@link splitProps} and memoizes the first of the two returned objects
+ * Executes {@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): [Pick<T, Extract<K, readonly (keyof T)[]>[number]>, Omit<T, K[number]>];
 
+/**
+ * Creates a full-fledged solid {@link Setter} from a normal one
+ * @param get The getter of the {@link Signal}; It's needed when a function gets passed to the new setter
+ * @param set The simple setter to which to add functionalities
+ */
+export declare function toSetter<T>(get: Accessor<T>, set: (x: T) => void): Setter<T>;
+
+/**
+ * Creates a {@link Signal} from a property access
+ * @param obj The object from which to get the property
+ * @param k The key of the property
+ */
+export declare function toSignal<T, K extends keyof T>(obj: T, k: K): Signal<T[K]>;
+
 /**
  * Executes {@link f} untracking it.
  * Due to the fact that the function is passed as input, it does not untrack its changes (It's intentional)

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { untrack, createMemo, splitProps, createContext, createRoot, getOwner, createComponent, useContext, Match, mergeProps, onCleanup, For, Show } from "solid-js";
+import { untrack, createMemo, splitProps, createResource, createEffect, on, createContext, createRoot, getOwner, createComponent, useContext, onCleanup, Match, mergeProps, For, Show } from "solid-js";
 import { createMutable } from "solid-js/store";
 function untrackCall(f, ...args) {
   return untrack(() => f.apply(this, args));
@@ -17,6 +17,14 @@ function splitAndMemoProps(obj, keys) {
   out[0] = memoProps(out[0], keys);
   return out;
 }
+function createReactiveResource(f) {
+  const memo = createMemo(f);
+  const [get, {
+    refetch
+  }] = createResource(memo);
+  createEffect(on(memo, (_x, _prev, ok) => (ok && refetch(), true)));
+  return get;
+}
 function createOption(init, def = init, name) {
   const prop = "read";
   const ctx2 = createContext(() => init, {
@@ -49,6 +57,26 @@ function runWithContext(ctx2, value, f) {
     }
   });
 }
+const IDENTITY = (x) => x;
+function toSetter(get, set) {
+  return (x) => {
+    const out = typeof x === "function" ? x(untrack(get)) : x;
+    return set(out), out;
+  };
+}
+function toSignal(obj, k) {
+  const get = () => obj[k];
+  return [get, toSetter(get, (v) => obj[k] = v)];
+}
+function bind(source, dest, to = IDENTITY) {
+  const d = createRoot((d2) => (createEffect(on(source[0], (x) => dest[1]((prev) => to(x, prev)))), d2));
+  return onCleanup(d), d;
+}
+function bindTwoWay(source, dest, to = IDENTITY, from = IDENTITY) {
+  const a = bind(source, dest, to);
+  const b = bind(dest, source, from);
+  return () => (a(), b());
+}
 const ctx = createContext(() => void 0, {
   name: "case-when"
 });
@@ -149,10 +177,15 @@ export {
   Case,
   Debug,
   When,
+  bind,
+  bindTwoWay,
   createExtractor,
   createOption,
+  createReactiveResource,
   memoProps,
   runWithContext,
   splitAndMemoProps,
+  toSetter,
+  toSignal,
   untrackCall
 };

package/dist/index.umd.js

@@ -19,6 +19,14 @@
     out[0] = memoProps(out[0], keys);
     return out;
   }
+  function createReactiveResource(f) {
+    const memo = solidJs.createMemo(f);
+    const [get, {
+      refetch
+    }] = solidJs.createResource(memo);
+    solidJs.createEffect(solidJs.on(memo, (_x, _prev, ok) => (ok && refetch(), true)));
+    return get;
+  }
   function createOption(init, def = init, name) {
     const prop = "read";
     const ctx2 = solidJs.createContext(() => init, {
@@ -51,6 +59,26 @@
       }
     });
   }
+  const IDENTITY = (x) => x;
+  function toSetter(get, set) {
+    return (x) => {
+      const out = typeof x === "function" ? x(solidJs.untrack(get)) : x;
+      return set(out), out;
+    };
+  }
+  function toSignal(obj, k) {
+    const get = () => obj[k];
+    return [get, toSetter(get, (v) => obj[k] = v)];
+  }
+  function bind(source, dest, to = IDENTITY) {
+    const d = solidJs.createRoot((d2) => (solidJs.createEffect(solidJs.on(source[0], (x) => dest[1]((prev) => to(x, prev)))), d2));
+    return solidJs.onCleanup(d), d;
+  }
+  function bindTwoWay(source, dest, to = IDENTITY, from = IDENTITY) {
+    const a = bind(source, dest, to);
+    const b = bind(dest, source, from);
+    return () => (a(), b());
+  }
   const ctx = solidJs.createContext(() => void 0, {
     name: "case-when"
   });
@@ -150,11 +178,16 @@
   exports2.Case = Case;
   exports2.Debug = Debug;
   exports2.When = When;
+  exports2.bind = bind;
+  exports2.bindTwoWay = bindTwoWay;
   exports2.createExtractor = createExtractor;
   exports2.createOption = createOption;
+  exports2.createReactiveResource = createReactiveResource;
   exports2.memoProps = memoProps;
   exports2.runWithContext = runWithContext;
   exports2.splitAndMemoProps = splitAndMemoProps;
+  exports2.toSetter = toSetter;
+  exports2.toSignal = toSignal;
   exports2.untrackCall = untrackCall;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/package.json

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

package/readMe.md

@@ -121,6 +121,22 @@ Notice that you can use a `Source` component without adding it to the DOM:
 return <>Something else</>
 ```
 
+## Bindings
+Functions that create bindings between `Signal`s
+
+### `toSetter()`
+Creates a full-fledged solid `Setter` from a normal one
+
+### `toSignal()`
+Creates a `Signal` from a property of an object
+
+### `bind()`
+Creates a one-way binding between two `Signal`s
+
+### `bindTwoWay()`
+Creates a two-way binding between two `Signal`s
+
+
 ## Utility functions
 Utility functions needed for the components above
 
@@ -133,6 +149,9 @@ Creates a partial version of an object with memoized remaining properties
 ### `splitAndMemoProps()`
 Like `splitProps()` but memoizes the whole local part
 
+### `createReactiveResource()`
+Like `createResource()` but the provided function will be reactive
+
 ### `createOption()`
 Allows you to create simple reactive contexts; For example `Debug` is made with it