solid-ctrl-flow 1.0.56 → 1.0.58

package/dist/index.d.ts

@@ -1,44 +1,54 @@
 import { Accessor } from 'solid-js';
 import { Context } from 'solid-js';
-import { EffectFunction } from 'solid-js';
 import { JSX } from 'solid-js';
 import { MemoOptions } from 'solid-js';
 import { Owner } from 'solid-js';
 import { ParentProps } from 'solid-js';
-import { Resource } from 'solid-js';
-import { Setter } from 'solid-js';
 import { Signal } from 'solid-js';
 
+/** Reactive atomic value without the inconveniences of {@link Signal} */
+export declare class Atom<T> {
+    get: Accessor<T>;
+    set: (x: T) => void;
+    get value(): T;
+    set value(v: T);
+    constructor(get: Accessor<T>, set: (x: T) => void);
+    /**
+     * Allows you to set the current {@link Atom} based on its current value.
+     * The current value gets read through {@link untrack} to mimic the {@link Setter} behaviour
+     * @param f Function that creates a new value based on the current one
+     */
+    update<V extends T>(f: (prev: T) => V): V;
+    /**
+     * Creates an {@link Atom} that forwards an {@link Accessor} to another {@link Atom}
+     * @param f The reactive {@link Accessor} to the {@link Atom} to forward
+     */
+    static unwrap<T>(f: Accessor<Atom<T>>): Atom<T>;
+    /**
+     * Creates an {@link Atom} based on a {@link Signal}
+     * @param param0 The {@link Signal} to forward
+     */
+    static from<T>([get, set]: Signal<T>): Atom<T>;
+    /**
+     * Creates a new {@link Atom} that applies a conversion to another {@link Atom}
+     * @param atom The {@link Atom} to which to apply the conversion
+     * @param to Conversion function from {@link S} to {@link D}
+     * @param from Conversion function from {@link D} to {@link S}
+     */
+    static convert<S, D>(atom: Atom<S>, to: (x: S) => D, from: (x: D) => S): Atom<D>;
+    /**
+     * Creates a bindable data source.
+     * If {@link bind} returns an {@link Atom} it gets wrapped, otherwise it creates a {@link Signal} using {@link f} and uses it to store the value until {@link bind}'s value changes
+     * @param bind The bound {@link Atom}
+     * @param f The function that will create the actual {@link Signal} that will store the {@link Atom}'s data in case that {@link bind} doesn't return anything
+     */
+    static source<T>(bind: Accessor<Atom<T> | undefined>): Atom<T | undefined>;
+    static source<T>(bind: Accessor<Atom<T> | undefined>, f: Accessor<Signal<T>>): Atom<T>;
+}
+
 /** Type hack for making {@link ReactiveContext} implement {@link Accessor} */
 declare const BASE_CTOR: new <T>() => Accessor<T>;
 
-/**
- * Creates a one-way binding between two {@link Signal}s.
- * The function uses {@link createComputed}, which means that:
- * - As soon as the function is done executing the two {@link Signal}s will have the same value
- * - If {@link source} changes, {@link dest} will be instantly updated
- * @param source The getter of the source of the binding
- * @param dest The setter of the destination of the binding
- * @param to Conversion function from {@link S} to {@link D}
- * @param skip If it is `true`, {@link dest} won't be executed until the next change
- * @returns A function that disposes the binding
- */
-export declare function bind<S>(source: Accessor<S>, dest: Setter<S>, to?: undefined, skip?: boolean): () => void;
-
-export declare function bind<S, D>(source: Accessor<S>, dest: Setter<D>, to: Convert<S, D>, skip?: boolean): () => void;
-
-/**
- * Creates a two-way binding between two {@link Signal}s calling {@link bind} two times
- * @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;
-
 /** Like a {@link Match} but gets the value from the closest {@link On} ancestor */
 export declare function Case(props: ParentProps<{
     value: unknown;
@@ -60,9 +70,6 @@ export declare function Case<T>(props: {
     children(x: NonNullable<T>): 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.
@@ -107,14 +114,6 @@ export declare function createExtractor(name?: string): {
     readonly extracting: () => number | null;
 };
 
-/**
- * Creates a {@link Resource} from the function {@link f}.
- * The resource will be refetched each time one of the dependencies of {@link f} changes.
- * The only dependant signals that will be tracked are the ones before the first `await`
- * @param f A reactive resource fetcher
- */
-export declare function createReactiveResource<R>(f: EffectFunction<R | undefined, R>): Resource<Awaited<R>>;
-
 /** Built-in {@link ReactiveContext} which allows you to display different things in debug mode */
 export declare const debug: ReactiveContext<boolean>;
 
@@ -133,13 +132,6 @@ export declare function Enfold<T>(props: Unkeyed<T>): JSX.Element;
 /** Handy type alias */
 declare type Equals = MemoOptions<unknown>["equals"];
 
-/**
- * Creates a {@link Signal} that behaves like the input one, with the only difference that each call to the setter will trigger the effects even if the value didn't change.
- * Can give reactivity to a fake {@link Signal}
- * @param param0 The {@link Signal} to force
- */
-export declare function forceSignal<T>([get, set]: Signal<T>): Signal<T>;
-
 /** Parameters to pass to a keyed {@link Enfold} */
 declare type Keyed<T> = Standard<T> & {
     keyed: true;
@@ -207,7 +199,7 @@ export declare abstract class ReactiveContext<T> extends BASE_CTOR<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}.
-     * The function is binded for the way solid compiles components inside other objects.
+     * The function is bound for the way solid compiles components inside other objects.
      * (The value is memoized)
      */
     get Provider(): (props: ParentProps<{
@@ -293,20 +285,6 @@ declare type Standard<T> = ParentProps<{
 /** Type of an element wrapping call-back which accepts an additional parameter */
 declare type Template<T> = (c: Accessor<JSX.Element>, x: T) => JSX.Element;
 
-/**
- * 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 {@link Accessor} to the object from which to get the property
- * @param k The {@link Accessor} to the key of the property
- */
-export declare function toSignal<T, K extends keyof T>(obj: Accessor<T>, k: Accessor<K>): Signal<T[K]>;
-
 /** Parameters to pass to an unkeyed {@link Enfold} */
 declare type Unkeyed<T> = Standard<T> & {
     keyed?: false;
@@ -331,18 +309,4 @@ export declare function untrackCall<F extends (...args: any[]) => unknown>(this:
  */
 export declare const unwrap: <T extends object>(f: Accessor<T>) => T;
 
-/**
- * Calls {@link f} maintaining its reactivity at 2 levels.
- * Unlike the normal {@link unwrap}, this maintains reactivity on the elements of the array too, which means that it can be destructured
- * ```ts
- * const first = unwrap(f);         // The value of `first` is reactive but CANNOT be destructured
- * const [ getFirst ] = first;      // The value of `getFirst()` is NOT reactive, it's the first element of the CURRENT signal returned by `f()`
- *
- * const second = unwrapSignal(f);  // The value of `second` is reactive and CAN be destructured
- * const [ getSecond ] = second;    // The value of `getSecond()` IS reactive, it's a function that calls `f()`, gets the first element and calls that too
- * ```
- * @param f An {@link Accessor} to a {@link Signal}
- */
-export declare function unwrapSignal<T>(f: Accessor<Signal<T>>): Signal<T>;
-
 export { }

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useContext, createMemo, createComponent, createContext, createRoot, getOwner, untrack, createEffect, on, createResource, splitProps, Show, onCleanup, For, Match, mergeProps, createComputed, createSignal } from "solid-js";
+import { useContext, createMemo, createComponent, createContext, createRoot, getOwner, untrack, splitProps, Show, onCleanup, For, Match, mergeProps, on, createSignal } from "solid-js";
 import { createMutable } from "solid-js/store";
 const BASE_CTOR = Function;
 class ReactiveContext extends BASE_CTOR {
@@ -13,7 +13,7 @@ class ReactiveContext extends BASE_CTOR {
   /**
    * 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}.
-   * The function is binded for the way solid compiles components inside other objects.
+   * The function is bound for the way solid compiles components inside other objects.
    * (The value is memoized)
    */
   get Provider() {
@@ -67,13 +67,6 @@ function runWithContext(ctx2, value, f) {
 function untrackCall(f, ...args) {
   return untrack(() => f.apply(this, args));
 }
-function createReactiveResource(f) {
-  var refetch;
-  const memo = createMemo(f);
-  createEffect(on(memo, () => refetch?.()));
-  const [get] = [, { refetch }] = createResource(memo);
-  return get;
-}
 function memoProps(obj, keys = Object.keys(obj), equals = false) {
   const out = {};
   for (const elm of keys)
@@ -231,38 +224,51 @@ function Case(props) {
     }
   }, other));
 }
-const IDENTITY = (x) => x;
-function bind(source, dest, to = IDENTITY, skip = false) {
-  const d = createRoot((d2) => (createComputed(on(source, (x) => skip ? skip = false : dest((prev) => to(x, prev)))), d2));
-  return onCleanup(d), d;
-}
-function bindTwoWay(source, dest, to, from) {
-  const a = bind(source[0], dest[1], to);
-  const b = bind(dest[0], source[1], from, true);
-  return () => (a(), b());
-}
-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 unwrapSignal(f) {
-  return [() => f()[0](), (x) => f()[1](x)];
-}
-function forceSignal([get, set]) {
-  const [track, update] = createSignal(void 0, { equals: false });
-  return [
-    () => (track(), get()),
-    (x) => {
-      const out = set(x);
-      return update(), out;
-    }
-  ];
+class Atom {
+  constructor(get, set) {
+    this.get = get;
+    this.set = set;
+  }
+  get value() {
+    return this.get();
+  }
+  set value(v) {
+    this.set(v);
+  }
+  /**
+      * Allows you to set the current {@link Atom} based on its current value.
+      * The current value gets read through {@link untrack} to mimic the {@link Setter} behaviour
+      * @param f Function that creates a new value based on the current one
+      */
+  update(f) {
+    return this.value = f(untrack(this.get));
+  }
+  /**
+   * Creates an {@link Atom} that forwards an {@link Accessor} to another {@link Atom}
+   * @param f The reactive {@link Accessor} to the {@link Atom} to forward
+   */
+  static unwrap(f) {
+    return new this(() => f().value, (x) => f().value = x);
+  }
+  /**
+   * Creates an {@link Atom} based on a {@link Signal}
+   * @param param0 The {@link Signal} to forward
+   */
+  static from([get, set]) {
+    return new this(get, (v) => set(() => v));
+  }
+  /**
+      * Creates a new {@link Atom} that applies a conversion to another {@link Atom}
+      * @param atom The {@link Atom} to which to apply the conversion
+      * @param to Conversion function from {@link S} to {@link D}
+      * @param from Conversion function from {@link D} to {@link S}
+      */
+  static convert(atom, to, from) {
+    return new this(() => to(atom.value), (x) => atom.value = from(x));
+  }
+  static source(bind, f = createSignal) {
+    return this.unwrap(createMemo(on(bind, (x) => x ?? Atom.from(f()))));
+  }
 }
 const debug = ReactiveContext.create(false, "debug-scope");
 function SameContext(props) {
@@ -272,24 +278,18 @@ function SameContext(props) {
   });
 }
 export {
+  Atom,
   Case,
   Enfold,
   On,
   ReactiveContext,
   SameContext,
   Slot,
-  bind,
-  bindTwoWay,
   createExtractor,
-  createReactiveResource,
   debug,
-  forceSignal,
   memoProps,
   runWithContext,
   splitAndMemoProps,
-  toSetter,
-  toSignal,
   untrackCall,
-  unwrap,
-  unwrapSignal
+  unwrap
 };

package/dist/index.umd.js

@@ -15,7 +15,7 @@
     /**
      * 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}.
-     * The function is binded for the way solid compiles components inside other objects.
+     * The function is bound for the way solid compiles components inside other objects.
      * (The value is memoized)
      */
     get Provider() {
@@ -69,13 +69,6 @@
   function untrackCall(f, ...args) {
     return solidJs.untrack(() => f.apply(this, args));
   }
-  function createReactiveResource(f) {
-    var refetch;
-    const memo = solidJs.createMemo(f);
-    solidJs.createEffect(solidJs.on(memo, () => refetch?.()));
-    const [get] = [, { refetch }] = solidJs.createResource(memo);
-    return get;
-  }
   function memoProps(obj, keys = Object.keys(obj), equals = false) {
     const out = {};
     for (const elm of keys)
@@ -233,38 +226,51 @@
       }
     }, other));
   }
-  const IDENTITY = (x) => x;
-  function bind(source, dest, to = IDENTITY, skip = false) {
-    const d = solidJs.createRoot((d2) => (solidJs.createComputed(solidJs.on(source, (x) => skip ? skip = false : dest((prev) => to(x, prev)))), d2));
-    return solidJs.onCleanup(d), d;
-  }
-  function bindTwoWay(source, dest, to, from) {
-    const a = bind(source[0], dest[1], to);
-    const b = bind(dest[0], source[1], from, true);
-    return () => (a(), b());
-  }
-  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 unwrapSignal(f) {
-    return [() => f()[0](), (x) => f()[1](x)];
-  }
-  function forceSignal([get, set]) {
-    const [track, update] = solidJs.createSignal(void 0, { equals: false });
-    return [
-      () => (track(), get()),
-      (x) => {
-        const out = set(x);
-        return update(), out;
-      }
-    ];
+  class Atom {
+    constructor(get, set) {
+      this.get = get;
+      this.set = set;
+    }
+    get value() {
+      return this.get();
+    }
+    set value(v) {
+      this.set(v);
+    }
+    /**
+        * Allows you to set the current {@link Atom} based on its current value.
+        * The current value gets read through {@link untrack} to mimic the {@link Setter} behaviour
+        * @param f Function that creates a new value based on the current one
+        */
+    update(f) {
+      return this.value = f(solidJs.untrack(this.get));
+    }
+    /**
+     * Creates an {@link Atom} that forwards an {@link Accessor} to another {@link Atom}
+     * @param f The reactive {@link Accessor} to the {@link Atom} to forward
+     */
+    static unwrap(f) {
+      return new this(() => f().value, (x) => f().value = x);
+    }
+    /**
+     * Creates an {@link Atom} based on a {@link Signal}
+     * @param param0 The {@link Signal} to forward
+     */
+    static from([get, set]) {
+      return new this(get, (v) => set(() => v));
+    }
+    /**
+        * Creates a new {@link Atom} that applies a conversion to another {@link Atom}
+        * @param atom The {@link Atom} to which to apply the conversion
+        * @param to Conversion function from {@link S} to {@link D}
+        * @param from Conversion function from {@link D} to {@link S}
+        */
+    static convert(atom, to, from) {
+      return new this(() => to(atom.value), (x) => atom.value = from(x));
+    }
+    static source(bind, f = solidJs.createSignal) {
+      return this.unwrap(solidJs.createMemo(solidJs.on(bind, (x) => x ?? Atom.from(f()))));
+    }
   }
   const debug = ReactiveContext.create(false, "debug-scope");
   function SameContext(props) {
@@ -273,24 +279,18 @@
       return props.children;
     });
   }
+  exports2.Atom = Atom;
   exports2.Case = Case;
   exports2.Enfold = Enfold;
   exports2.On = On;
   exports2.ReactiveContext = ReactiveContext;
   exports2.SameContext = SameContext;
-  exports2.bind = bind;
-  exports2.bindTwoWay = bindTwoWay;
   exports2.createExtractor = createExtractor;
-  exports2.createReactiveResource = createReactiveResource;
   exports2.debug = debug;
-  exports2.forceSignal = forceSignal;
   exports2.memoProps = memoProps;
   exports2.runWithContext = runWithContext;
   exports2.splitAndMemoProps = splitAndMemoProps;
-  exports2.toSetter = toSetter;
-  exports2.toSignal = toSignal;
   exports2.untrackCall = untrackCall;
   exports2.unwrap = unwrap;
-  exports2.unwrapSignal = unwrapSignal;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/package.json

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

package/readMe.md

@@ -162,26 +162,26 @@ return <>
 
 ## Utility
 
-### Bindings
-Functions that create bindings between `Signal`s
+### `Atom`s
+Customizable and simplified wrappers for reactive states
 
-> #### `bind()`
-> Creates a one-way binding between two `Signal`s
+> #### `new Atom()`
+> Creates an `Atom` with custom getter and setter
 > 
-> #### `bindTwoWay()`
-> Creates a two-way binding between two `Signal`s
+> #### `Atom.update()`
+> Like the `Setter` overload of a `Signal` that takes a function with the previous value
 > 
-> #### `toSetter()`
-> Creates a full-fledged solid `Setter` from a normal one
+> #### `Atom.unwrap()`
+> An `Atom`-specific (optimized) version of `unwrap()` that allows the destructuring of its result
 > 
-> #### `toSignal()`
-> Creates a `Signal` from a property of an object
+> #### `Atom.from()`
+> Creates an `Atom` from a `Signal`
 > 
-> #### `unwrapSignal()`
-> A `Signal`-specific version of `unwrap()` that allows the destructuring of its result
+> #### `Atom.convert()`
+> Creates a new `Atom` that applies a conversion to another `Atom`
 >
-> #### `forceSignal()`
-> Creates a `Signal` that behaves like the input one, with the only difference that each call to the setter will trigger the effects even if the value didn't change
+> #### `Atom.source()`
+> Similiar to `Atom.unwrap()`, but if the `Accessor` doesn't return anything it automatically creates an internal `Signal` in which to store the value
 
 ### `ReactiveContext.create()`
 Method that creates a reactive version of a solid `Context` with some additional built-in functionalities
@@ -215,9 +215,6 @@ return <>
 ### `untrackCall()`
 Calls a function untracking what happens inside of it but not what gets passed as its argument
 
-### `createReactiveResource()`
-Like `createResource()` but the provided function will be reactive
-
 ### `memoProps()`
 Creates a partial version of an object with memoized remaining properties
 

package/vite.config.mts

@@ -0,0 +1,22 @@
+
+import dtsPlugin from "vite-plugin-dts";
+import solidPlugin from "vite-plugin-solid";
+import { defineConfig } from "vite";
+import { join } from "path";
+
+export default defineConfig({
+    plugins: [ dtsPlugin({ rollupTypes: true }), solidPlugin() ],
+    build: {
+        minify: false,
+        target: "ESNext",
+        lib: {
+            entry: join(__dirname, "src/index.ts"),
+            fileName: "index",
+            name: "solidCtrlFlow"
+        },
+        rollupOptions: {
+            output: { globals: x => x.replace(/\W(\w)/g, (_, x) => x.toUpperCase()) },
+            external: [ "solid-js", "solid-js/store" ]
+        }
+    }
+});