mausworks/tyin

Typesafe state management in React for less!

tyin's Issues

Feature request: Loaders

How about adding loaders? Something like this:

import { AnyState, StoreAPI } from "tyin/store";
import { Plugin } from "tyin/extend";

/** Options for the persist plugin. */
export type LoaderOptions = {
  defaultUrl: URL | string;
  autoload?: boolean;
};
export type LoaderAPI = {
  load: (overrideUrl?: URL | string) => Promise<void>;
};
export type LoaderPlugin<T extends AnyState> = Plugin<StoreAPI<T>, LoaderAPI>;

/**
 * A plugin that loads the state from an URL.
 * @param options Configure the plugin.
 * @template T The type of the state.
 * @example
 * ```ts
 * import storeHook from "tyin/hook";
 * import extend from "tyin/extend";
 * import jsonLoader from "tyin/plugin-jsonloader";
 *
 * const useExample = extend(storeHook(null))
 *   .with(jsonLoader({ url: "./example.json" })
 *   .seal();
 * ```
 */
export function jsonLoader<T extends AnyState>({
  defaultUrl,
  autoload = true,
}: LoaderOptions): LoaderPlugin<T> {
  return (store) => {
    const loader = async (overrideUrl?: URL | string) => {
      const response = await fetch(overrideUrl ?? defaultUrl);

      if (response.ok) store.set(await response.json());
    };

    if (autoload) {
      loader();
    }

    return {
      load: loader,
    };
  };
}

Which would be used like this:

const useUserState = objectStoreHook<User | null>(
  null,
  undefined,
  false
)
  .with(jsonLoader({ url: "/user_data.json" }))
  .seal();

// Load other data
await useUserState.load("/other_user_data.json")

or

const useUserState = objectStoreHook<User | null>(
  null,
  undefined,
  false
)
  .with(jsonLoader({ url: "/user_data.json", autoload: false }));

await useUserState.load()

Feature request: Pre-configured store hooks (object, array, etc …)

Hi there,

I will try this lib out on an internal tool. It is a bit verbose when it comes to creating and configuring stores, but that is fine, you can encapsulate the code.

Wouldn't it be nice though with some pre-configured store hooks with the most common usages? E.g.

import storeHook, { StateSelectorHook } from "tyin/hook";
import extend, { Extensible } from "tyin/extend";
import { StoreAPI, StoreOptions } from "tyin/store";
import objectAPI, { ObjectAPI, ObjectLike } from "tyin/plugin-object";

export function objectStoreHook<T extends ObjectLike | null>(
  initialState: T,
  options?: StoreOptions<T>,
  sealed?: true
): StateSelectorHook<T> & StoreAPI<T> & ObjectAPI<T>;
export function objectStoreHook<T extends ObjectLike | null>(
  initialState: T,
  options?: StoreOptions<T>,
  sealed?: false
): Extensible<StateSelectorHook<T> & StoreAPI<T> & ObjectAPI<T>>;
export function objectStoreHook<T extends ObjectLike | null>(
  initialState: T,
  options?: StoreOptions<T>,
  sealed: boolean = true
):
  | (StateSelectorHook<T> & StoreAPI<T> & ObjectAPI<T>)
  | Extensible<StateSelectorHook<T> & StoreAPI<T> & ObjectAPI<T>> {
  const hook = extend(storeHook(initialState, options)).with(objectAPI());
  if (sealed) return hook.seal();
  return hook;
}

(The extra function definitions is to handle if it is sealed or not, there is probably a better way to do it)

It would make it easy to use:

const useUserState = objectStoreHook<User | null>(null);

The same can be done for an array store hook.

Also, I noticed that the objectAPI doesn't allow undefined. Is that by design?