valdres-vue 0.1.0-beta.0

package/dist/index.js

@@ -0,0 +1,177 @@
+// src/useAtom.ts
+import { customRef, onScopeDispose } from "vue";
+import { isPromiseLike } from "valdres";
+
+// src/useStore.ts
+import { inject } from "vue";
+
+// src/lib/storeKey.ts
+var ValdresKey = Symbol("valdres");
+
+// src/useStore.ts
+var useStore = (id) => {
+  const ctx = inject(ValdresKey);
+  if (!ctx)
+    throw new Error("No valdres store provided. Install createValdres() as a plugin or wrap in a ValdresScope.");
+  if (id) {
+    const store = ctx.stores[id];
+    if (!store)
+      throw new Error(`No store with id "${id}" found in ancestor chain`);
+    return store;
+  }
+  return ctx.current;
+};
+
+// src/useAtom.ts
+var useAtom = (atom, store) => {
+  const currentStore = store || useStore();
+  const initial = currentStore.get(atom);
+  if (isPromiseLike(initial)) {
+    throw initial;
+  }
+  let triggerRef;
+  const ref = customRef((track, trigger) => {
+    triggerRef = trigger;
+    return {
+      get() {
+        track();
+        return currentStore.get(atom);
+      },
+      set(value) {
+        currentStore.set(atom, value);
+      }
+    };
+  });
+  const unsub = currentStore.sub(atom, () => {
+    triggerRef();
+  }, false);
+  onScopeDispose(() => {
+    unsub();
+  });
+  return ref;
+};
+// src/useResetAtom.ts
+var useResetAtom = (atom, store) => {
+  const selectedStore = store || useStore();
+  return () => selectedStore.reset(atom);
+};
+// src/useSetAtom.ts
+var useSetAtom = (atom, store) => {
+  const selectedStore = store || useStore();
+  return (value) => selectedStore.set(atom, value);
+};
+// src/useTransaction.ts
+var useTransaction = (store) => {
+  const selectedStore = store || useStore();
+  return (callback) => selectedStore.txn(callback);
+};
+// src/useValue.ts
+import { shallowRef, onScopeDispose as onScopeDispose2 } from "vue";
+import { isPromiseLike as isPromiseLike2 } from "valdres";
+var useValue = (state, store) => {
+  const currentStore = store || useStore();
+  const initial = currentStore.get(state);
+  if (isPromiseLike2(initial)) {
+    throw initial;
+  }
+  const value = shallowRef(initial);
+  const unsub = currentStore.sub(state, () => {
+    const newValue = currentStore.get(state);
+    if (!isPromiseLike2(newValue)) {
+      value.value = newValue;
+    }
+  }, false);
+  onScopeDispose2(() => {
+    unsub();
+  });
+  return value;
+};
+// src/ValdresPlugin.ts
+import { store as createStore } from "valdres";
+
+// src/lib/hydrate.ts
+var hydrate = (set, state) => {
+  for (const [atom, value] of state) {
+    set(atom, value);
+  }
+};
+
+// src/ValdresPlugin.ts
+var createValdres = (options = {}) => ({
+  install(app) {
+    let store = options.store;
+    if (store) {
+      if (!store.data.batchUpdates) {
+        console.warn("valdres-vue: The store passed to createValdres() was not created " + "with { batchUpdates: true }. Sequential store.set() calls " + "will trigger intermediate selector evaluations. Consider " + "using store({ batchUpdates: true }) for optimal performance.");
+      }
+    } else {
+      store = createStore({ batchUpdates: true });
+    }
+    if (options.initialize) {
+      store.txn((txn) => {
+        const pairs = options.initialize(txn);
+        if (pairs) {
+          hydrate(txn.set, pairs);
+        }
+      });
+    }
+    app.provide(ValdresKey, {
+      current: store,
+      stores: { [store.data.id]: store }
+    });
+  }
+});
+// src/ValdresScope.ts
+import { defineComponent, inject as inject2, provide, onScopeDispose as onScopeDispose3 } from "vue";
+var generateId = () => (Math.random() + 1).toString(36).substring(7);
+var ValdresScope = defineComponent({
+  name: "ValdresScope",
+  props: {
+    scopeId: {
+      type: String,
+      default: () => generateId()
+    },
+    initialize: {
+      type: Function
+    }
+  },
+  setup(props, { slots }) {
+    const parentCtx = inject2(ValdresKey);
+    if (!parentCtx) {
+      throw new Error("No valdres store provided. ValdresScope must be nested under createValdres() or another ValdresScope.");
+    }
+    const scopeCreated = !parentCtx.current.data.scopes?.has(props.scopeId);
+    const scopedStore = parentCtx.current.scope(props.scopeId);
+    if (props.initialize) {
+      scopedStore.txn((txn) => {
+        const pairs = props.initialize(txn);
+        if (pairs) {
+          hydrate(txn.set, pairs);
+        }
+      });
+    }
+    provide(ValdresKey, {
+      current: scopedStore,
+      stores: {
+        ...parentCtx.stores,
+        [parentCtx.current.data.id]: parentCtx.current,
+        [scopedStore.data.id]: scopedStore
+      }
+    });
+    onScopeDispose3(() => {
+      scopedStore?.detach?.(scopeCreated);
+    });
+    return () => slots.default?.();
+  }
+});
+export {
+  useValue,
+  useTransaction,
+  useStore,
+  useSetAtom,
+  useResetAtom,
+  useAtom,
+  createValdres,
+  ValdresScope,
+  ValdresKey
+};

package/dist/types/ValdresPlugin.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from "vue";
+import { type Store } from "valdres";
+import type { InitializeCallback } from "./types/InitializeCallback";
+export interface ValdresPluginOptions {
+    store?: Store;
+    initialize?: InitializeCallback;
+}
+export declare const createValdres: (options?: ValdresPluginOptions) => Plugin;

package/dist/types/ValdresScope.d.ts

@@ -0,0 +1,23 @@
+import { type PropType } from "vue";
+import type { InitializeCallback } from "./types/InitializeCallback";
+export declare const ValdresScope: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    scopeId: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    initialize: {
+        type: PropType<InitializeCallback>;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    scopeId: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    initialize: {
+        type: PropType<InitializeCallback>;
+    };
+}>> & Readonly<{}>, {
+    scopeId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+export { useAtom } from "./useAtom";
+export { useResetAtom } from "./useResetAtom";
+export { useSetAtom } from "./useSetAtom";
+export { useStore } from "./useStore";
+export { useTransaction } from "./useTransaction";
+export { useValue } from "./useValue";
+export { createValdres } from "./ValdresPlugin";
+export type { ValdresPluginOptions } from "./ValdresPlugin";
+export { ValdresScope } from "./ValdresScope";
+export { ValdresKey } from "./lib/storeKey";
+export type { ValdresContext } from "./lib/storeKey";

package/dist/types/lib/hydrate.d.ts

@@ -0,0 +1,2 @@
+import type { Atom, SyncSetAtom } from "valdres";
+export declare const hydrate: (set: SyncSetAtom, state: [Atom, any][]) => void;

package/dist/types/lib/storeKey.d.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey } from "vue";
+import type { Store } from "valdres";
+export interface ValdresContext {
+    current: Store;
+    stores: Record<string, Store>;
+}
+export declare const ValdresKey: InjectionKey<ValdresContext>;

package/dist/types/types/InitializeCallback.d.ts

@@ -0,0 +1,4 @@
+import type { Atom, Transaction } from "valdres";
+type AtomPair = [Atom<any>, any];
+export type InitializeCallback = (txn: Transaction) => void | AtomPair[];
+export {};

package/dist/types/useAtom.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from "vue";
+import { type Atom, type Store } from "valdres";
+export declare const useAtom: <V>(atom: Atom<V>, store?: Store) => Ref<V>;

package/dist/types/useResetAtom.d.ts

@@ -0,0 +1,2 @@
+import type { Atom, Store } from "valdres";
+export declare const useResetAtom: <V>(atom: Atom<V>, store?: Store) => (() => void);

package/dist/types/useSetAtom.d.ts

@@ -0,0 +1,2 @@
+import type { Atom, SetAtomValue, Store } from "valdres";
+export declare const useSetAtom: <V>(atom: Atom<V>, store?: Store) => (value: SetAtomValue<V>) => void;

package/dist/types/useStore.d.ts

@@ -0,0 +1,2 @@
+import type { Store } from "valdres";
+export declare const useStore: (id?: string) => Store;

package/dist/types/useTransaction.d.ts

@@ -0,0 +1,2 @@
+import type { Store, Transaction } from "valdres";
+export declare const useTransaction: (store?: Store) => (callback: (state: Transaction) => any) => void;

package/dist/types/useValue.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from "vue";
+import { type Atom, type Selector, type Store } from "valdres";
+export declare const useValue: <Value extends any = any>(state: Atom<Value> | Selector<Value>, store?: Store) => Readonly<Ref<Value>>;

package/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "valdres-vue",
+    "version": "0.1.0-beta.0",
+    "license": "MIT",
+    "author": {
+        "name": "Eigil Sagafos"
+    },
+    "homepage": "https://valdres.dev",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/eigilsagafos/valdres.git"
+    },
+    "type": "module",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/types/index.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "peerDependencies": {
+        "valdres": "workspace:^",
+        "vue": ">=3.3"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    }
+}