applesauce-react 0.10.0 → 0.12.0

package/README.md

@@ -1,6 +1,12 @@
 # applesauce-react
 
-React hooks for applesauce
+React hooks and providers for applesauce
+
+## Installation
+
+```bash
+npm install applesauce-react
+```
 
 ## Example
 
@@ -9,8 +15,8 @@ import { EventStore, QueryStore, Queries } from "applesauce-core";
 import { QueryStoreProvider } from "applesauce-react/providers";
 import { useStoreQuery } from "applesauce-react/hooks";
 
-const events = new EventStore();
-const store = new QueryStore(events);
+const eventStore = new EventStore();
+const queryStore = new QueryStore(eventStore);
 
 function UserName({ pubkey }) {
   const profile = useStoreQuery(Queries.ProfileQuery, [pubkey]);
@@ -20,7 +26,7 @@ function UserName({ pubkey }) {
 
 function App() {
   return (
-    <QueryStoreProvider store={store}>
+    <QueryStoreProvider queryStore={queryStore}>
       <h1>App</h1>
 
       <UserName pubkey="82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2" />

package/dist/hooks/index.d.ts

@@ -1,4 +1,10 @@
+export * from "./use-account-manager.js";
+export * from "./use-accounts.js";
+export * from "./use-action-hub.js";
+export * from "./use-action.js";
+export * from "./use-active-account.js";
 export * from "./use-event-factory.js";
+export * from "./use-event-store.js";
 export * from "./use-observable.js";
 export * from "./use-query-store.js";
 export * from "./use-render-nast.js";

package/dist/hooks/index.js

@@ -1,4 +1,10 @@
+export * from "./use-account-manager.js";
+export * from "./use-accounts.js";
+export * from "./use-action-hub.js";
+export * from "./use-action.js";
+export * from "./use-active-account.js";
 export * from "./use-event-factory.js";
+export * from "./use-event-store.js";
 export * from "./use-observable.js";
 export * from "./use-query-store.js";
 export * from "./use-render-nast.js";

package/dist/hooks/use-account-manager.d.ts

@@ -0,0 +1,4 @@
+import { AccountManager } from "applesauce-accounts";
+export declare function useAccountManager(): AccountManager;
+export declare function useAccountManager(require: false): AccountManager | undefined;
+export declare function useAccountManager(require: true): AccountManager;

package/dist/hooks/use-account-manager.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { AccountsContext } from "../providers/accounts-provider.js";
+export function useAccountManager(require = true) {
+    const manager = useContext(AccountsContext);
+    if (!manager && require)
+        throw new Error("Missing AccountsProvider");
+    return manager;
+}

package/dist/hooks/use-accounts.d.ts

@@ -0,0 +1,2 @@
+import { IAccount } from "applesauce-accounts";
+export declare function useAccounts(): IAccount[];

package/dist/hooks/use-accounts.js

@@ -0,0 +1,6 @@
+import { useObservableEagerState } from "observable-hooks";
+import { useAccountManager } from "./use-account-manager.js";
+export function useAccounts() {
+    const manager = useAccountManager();
+    return useObservableEagerState(manager.accounts$);
+}

package/dist/hooks/use-action-hub.d.ts

@@ -0,0 +1 @@
+export declare function useActionHub(): import("applesauce-actions").ActionHub;

package/dist/hooks/use-action-hub.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ActionsContext } from "../providers/actions-provider.js";
+export function useActionHub() {
+    const hub = useContext(ActionsContext);
+    if (!hub)
+        throw new Error("Missing ActionsProvider");
+    return hub;
+}

package/dist/hooks/use-action.d.ts

@@ -0,0 +1,6 @@
+import { ActionConstructor } from "applesauce-actions";
+export declare function useAction<Args extends Array<any>>(Action: ActionConstructor<Args>, args: Args | undefined): {
+    loading: boolean;
+    run: () => Promise<void>;
+    exec: () => import("rxjs").Observable<import("nostr-tools").Event> | undefined;
+};

package/dist/hooks/use-action.js

@@ -0,0 +1,37 @@
+import { useCallback, useRef, useState } from "react";
+import { finalize } from "rxjs";
+import { useActionHub } from "./use-action-hub.js";
+export function useAction(Action, args) {
+    const [loading, setLoading] = useState(false);
+    const ref = useRef(args);
+    ref.current = args;
+    const hub = useActionHub();
+    const run = useCallback(async () => {
+        if (args === undefined)
+            return;
+        setLoading(true);
+        try {
+            await hub.run(Action, ...args);
+            setLoading(false);
+        }
+        catch (error) {
+            setLoading(false);
+            throw error;
+        }
+    }, [Action]);
+    const exec = useCallback(() => {
+        if (args === undefined)
+            return;
+        setLoading(true);
+        try {
+            return hub.exec(Action, ...args).pipe(finalize(() => {
+                setLoading(false);
+            }));
+        }
+        catch (error) {
+            setLoading(false);
+            throw error;
+        }
+    }, [Action]);
+    return { loading, run, exec };
+}

package/dist/hooks/use-active-account.d.ts

@@ -0,0 +1,2 @@
+import { IAccount } from "applesauce-accounts";
+export declare function useActiveAccount(): IAccount | undefined;

package/dist/hooks/use-active-account.js

@@ -0,0 +1,6 @@
+import { useObservableEagerState } from "observable-hooks";
+import { useAccountManager } from "./use-account-manager.js";
+export function useActiveAccount() {
+    const manager = useAccountManager();
+    return useObservableEagerState(manager.active$);
+}

package/dist/hooks/use-event-store.d.ts

@@ -1,5 +1,6 @@
+import { IEventStore } from "applesauce-core/event-store";
 /**
  * Gets the EventStore from a parent {@link EventStoreProvider} component
  * If there is none it throws an error
  */
-export declare function useEventStore(): import("applesauce-core").EventStore;
+export declare function useEventStore(): IEventStore;

package/dist/hooks/use-observable.d.ts

@@ -1,6 +1,4 @@
 import { type BehaviorSubject, type Observable } from "rxjs";
-export declare function getCurrentValue<T extends unknown>(observable: BehaviorSubject<T>): T;
-export declare function getCurrentValue<T extends unknown>(observable: Observable<T>): T | undefined;
-/** Subscribe to the value of an observable */
+/** A thing wrapper around useObservableState that allows undefined */
 export declare function useObservable<T extends unknown>(observable?: BehaviorSubject<T>): T;
 export declare function useObservable<T extends unknown>(observable?: Observable<T>): T | undefined;

package/dist/hooks/use-observable.js

@@ -1,21 +1,5 @@
-import { useState, useEffect } from "react";
-export function getCurrentValue(observable) {
-    if (Reflect.has(observable, "value"))
-        return Reflect.get(observable, "value");
-    return undefined;
-}
+import { useObservableState } from "observable-hooks";
+import { EMPTY } from "rxjs";
 export function useObservable(observable) {
-    const current = observable && getCurrentValue(observable);
-    const [_count, setCount] = useState(0);
-    const [value, setValue] = useState(current);
-    useEffect(() => {
-        // Reset the state, the method passed to subscribe will NOT always be called
-        setValue(observable && getCurrentValue(observable));
-        const sub = observable?.subscribe((v) => {
-            setValue(v);
-            setCount((c) => c + 1);
-        });
-        return () => sub?.unsubscribe();
-    }, [observable, setValue, setCount]);
-    return current || value;
+    return useObservableState(observable ?? EMPTY);
 }

package/dist/hooks/use-store-query.js

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
-import { useObservable } from "./use-observable.js";
+import { of } from "rxjs";
+import { useObservableEagerState } from "observable-hooks";
 import { useQueryStore } from "./use-query-store.js";
 /**
  * Runs and subscribes to a query in the query store
@@ -12,7 +13,7 @@ export function useStoreQuery(queryConstructor, args) {
         if (args)
             return store.createQuery(queryConstructor, ...args);
         else
-            return undefined;
+            return of(undefined);
     }, [args, store]);
-    return useObservable(observable);
+    return useObservableEagerState(observable);
 }

package/dist/providers/accounts-provider.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+import { AccountManager } from "applesauce-accounts";
+export declare const AccountsContext: import("react").Context<AccountManager<any> | undefined>;
+/** Provides an AccountManager to the component tree */
+export declare function AccountsProvider({ manager, children }: PropsWithChildren<{
+    manager?: AccountManager;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/providers/accounts-provider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+export const AccountsContext = createContext(undefined);
+/** Provides an AccountManager to the component tree */
+export function AccountsProvider({ manager, children }) {
+    return _jsx(AccountsContext.Provider, { value: manager, children: children });
+}

package/dist/providers/actions-provider.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+import { ActionHub } from "applesauce-actions";
+export declare const ActionsContext: import("react").Context<ActionHub | undefined>;
+/** Provides an ActionHub to the component tree */
+export declare function ActionsProvider({ actionHub, children }: PropsWithChildren<{
+    actionHub?: ActionHub;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/providers/actions-provider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+export const ActionsContext = createContext(undefined);
+/** Provides an ActionHub to the component tree */
+export function ActionsProvider({ actionHub, children }) {
+    return _jsx(ActionsContext.Provider, { value: actionHub, children: children });
+}

package/dist/providers/factory-provider.d.ts

@@ -1,7 +1,7 @@
 import { EventFactory } from "applesauce-factory";
 import { PropsWithChildren } from "react";
 export declare const FactoryContext: import("react").Context<EventFactory | undefined>;
-/** Provides an EventFactory to the component tree */
+/** Provides an {@link EventFactory} to the component tree */
 export declare function FactoryProvider({ factory, children }: PropsWithChildren<{
     factory?: EventFactory;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/providers/factory-provider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext } from "react";
 export const FactoryContext = createContext(undefined);
-/** Provides an EventFactory to the component tree */
+/** Provides an {@link EventFactory} to the component tree */
 export function FactoryProvider({ factory, children }) {
     return _jsx(FactoryContext.Provider, { value: factory, children: children });
 }

package/dist/providers/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./factory-provider.js";
 export * from "./store-provider.js";
+export * from "./accounts-provider.js";
+export * from "./actions-provider.js";

package/dist/providers/index.js

@@ -1,2 +1,4 @@
 export * from "./factory-provider.js";
 export * from "./store-provider.js";
+export * from "./accounts-provider.js";
+export * from "./actions-provider.js";

package/dist/providers/store-provider.d.ts

@@ -1,10 +1,10 @@
-import { EventStore, QueryStore } from "applesauce-core";
 import { PropsWithChildren } from "react";
+import { IEventStore, QueryStore } from "applesauce-core";
 export declare const QueryStoreContext: import("react").Context<QueryStore | null>;
-export declare const EventStoreContext: import("react").Context<EventStore | null>;
+export declare const EventStoreContext: import("react").Context<IEventStore | null>;
 /** Provides a EventStore to the component tree */
 export declare function EventStoreProvider({ eventStore, children }: PropsWithChildren<{
-    eventStore: EventStore;
+    eventStore: IEventStore;
 }>): import("react/jsx-runtime").JSX.Element;
 /** Provides a QueryStore and EventStore to the component tree */
 export declare function QueryStoreProvider({ queryStore, children }: PropsWithChildren<{

package/package.json

@@ -1,57 +1,68 @@
 {
   "name": "applesauce-react",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "React hooks for applesauce",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "keywords": [
     "nostr",
-    "react"
+    "react",
+    "applesauce"
   ],
   "author": "hzrd149",
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "applesauce"
   ],
   "exports": {
     ".": {
       "import": "./dist/index.js",
+      "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
     "./hooks": {
       "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.js",
       "types": "./dist/hooks/index.d.ts"
     },
     "./hooks/*": {
       "import": "./dist/hooks/*.js",
+      "require": "./dist/hooks/*.js",
       "types": "./dist/hooks/*.d.ts"
     },
     "./providers": {
       "import": "./dist/providers/index.js",
+      "require": "./dist/providers/index.js",
       "types": "./dist/providers/index.d.ts"
     },
     "./providers/*": {
       "import": "./dist/providers/*.js",
+      "require": "./dist/providers/*.js",
       "types": "./dist/providers/*.d.ts"
     },
     "./helpers": {
       "import": "./dist/helpers/index.js",
+      "require": "./dist/helpers/index.js",
       "types": "./dist/helpers/index.d.ts"
     }
   },
   "dependencies": {
-    "applesauce-content": "^0.10.0",
-    "applesauce-core": "^0.10.0",
-    "applesauce-factory": "^0.10.0",
-    "nostr-tools": "^2.10.3",
+    "applesauce-accounts": "^0.12.0",
+    "applesauce-actions": "^0.12.0",
+    "applesauce-content": "^0.12.0",
+    "applesauce-core": "^0.12.0",
+    "applesauce-factory": "^0.12.0",
+    "nostr-tools": "^2.10.4",
+    "observable-hooks": "^4.2.4",
     "react": "^18.3.1",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.11",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.8"
+    "@types/react": "^18.3.18",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5"
   },
   "funding": {
     "type": "lightning",