solid-ctrl-flow 1.0.18 → 1.0.20

package/dist/index.d.ts

@@ -1,6 +1,31 @@
 import { Accessor } from 'solid-js';
 import { Context } from 'solid-js';
 import { JSX } 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 +62,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.
@@ -77,24 +105,33 @@ export declare function createExtractor(name?: string): {
 
 /**
  * Creates a context with a reactive value.
- * It returns the provider directly
+ * Returns a provider with additional fields:
+ * - The `read` getter, which returns an {@link Accessor} to the value
+ * - The `runWith()` method, which executes {@link runWithContext} on the option
  * @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: T, def?: T, name?: string): ((props: {
-    value?: T;
-    children: JSX.Element;
-}) => JSX.Element) & {
+export declare function createOption<T>(init: T, def?: T, name?: string): {
+    (props: {
+        value?: T;
+        children: JSX.Element;
+    }): JSX.Element;
+    /** Executes {@link runWithContext} on the provided option */
+    runWith<V extends T, R>(x: V, f: (x: V) => R): R;
+} & {
     /** Returns the {@link Accessor} for the value in the current context */
     read: Accessor<T>;
 };
 
 /** 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) & {
+export declare const Debug: {
+    (props: {
+        value?: boolean | undefined;
+        children: JSX.Element;
+    }): JSX.Element;
+    runWith<V extends boolean, R>(x: V, f: (x: V) => R): R;
+} & {
     read: Accessor<boolean>;
 };
 
@@ -129,6 +166,20 @@ export declare function runWithContext<T, R>(ctx: Context<T>, value: T, f: (x: T
  */
 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, createContext, createRoot, getOwner, createComponent, useContext, createEffect, on, onCleanup, Match, mergeProps, For, Show } from "solid-js";
 import { createMutable } from "solid-js/store";
 function untrackCall(f, ...args) {
   return untrack(() => f.apply(this, args));
@@ -31,6 +31,7 @@ function createOption(init, def = init, name) {
   Object.defineProperty(provider, prop, {
     get: () => useContext(ctx2)
   });
+  provider.runWith = (x, f) => runWithContext(ctx2, () => x, () => f(x));
   return provider;
 }
 function runWithContext(ctx2, value, f) {
@@ -48,6 +49,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"
 });
@@ -148,10 +169,14 @@ export {
   Case,
   Debug,
   When,
+  bind,
+  bindTwoWay,
   createExtractor,
   createOption,
   memoProps,
   runWithContext,
   splitAndMemoProps,
+  toSetter,
+  toSignal,
   untrackCall
 };

package/dist/index.umd.js

@@ -33,6 +33,7 @@
     Object.defineProperty(provider, prop, {
       get: () => solidJs.useContext(ctx2)
     });
+    provider.runWith = (x, f) => runWithContext(ctx2, () => x, () => f(x));
     return provider;
   }
   function runWithContext(ctx2, value, f) {
@@ -50,6 +51,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"
   });
@@ -149,11 +170,15 @@
   exports2.Case = Case;
   exports2.Debug = Debug;
   exports2.When = When;
+  exports2.bind = bind;
+  exports2.bindTwoWay = bindTwoWay;
   exports2.createExtractor = createExtractor;
   exports2.createOption = createOption;
   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.18",
+  "version": "1.0.20",
   "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