applesauce-react 0.7.0 → 0.8.0

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./use-observable.js";
 export * from "./use-store-query.js";
 export * from "./use-render-nast.js";
+export * from "./use-query-store.js";
 export * from "./use-rendered-text-content.js";

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
 export * from "./use-observable.js";
 export * from "./use-store-query.js";
 export * from "./use-render-nast.js";
+export * from "./use-query-store.js";
 export * from "./use-rendered-text-content.js";

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

@@ -1,3 +1,4 @@
-import Observable from "zen-observable";
+import { type BehaviorSubject, type Observable } from "rxjs";
 /** Subscribe to the value of an observable */
+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,32 +1,7 @@
 import { useState, useEffect } from "react";
-import { isStateful } from "applesauce-core/observable";
-/** Subscribe to the value of an observable */
 export function useObservable(observable) {
     const [_count, update] = useState(0);
-    // const init = useRef(true);
-    // const value = useRef<T | undefined>(observable && isStateful(observable) ? observable.value : undefined);
-    // const prev = useRef(observable);
-    // const sub = useRef<ZenObservable.Subscription>();
-    // // This intentionally does not use useEffect
-    // // because we want the value to be returned on the first render
-    // if (!sub.current || prev.current !== observable) {
-    //   prev.current = observable;
-    //   if (sub.current) sub.current.unsubscribe();
-    //   sub.current = observable?.subscribe((v) => {
-    //     value.current = v;
-    //     // only explicitly update if its not the first render
-    //     if (!init.current) update(count + 1);
-    //   });
-    //   init.current = false;
-    // }
-    // // unsubscribe when unmount
-    // useEffect(() => {
-    //   return () => {
-    //     if (sub.current) sub.current.unsubscribe();
-    //   };
-    // }, []);
-    // return value.current;
-    const [value, setValue] = useState(observable && isStateful(observable) ? observable.value : undefined);
+    const [value, setValue] = useState(observable && Reflect.has(observable, "value") ? Reflect.get(observable, "value") : undefined);
     useEffect(() => {
         const sub = observable?.subscribe((v) => {
             setValue(v);

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

@@ -0,0 +1,5 @@
+/**
+ * Gets the QueryStore from a parent {@link QueryStoreProvider} component
+ * If there is none it throws an error
+ */
+export declare function useQueryStore(): import("applesauce-core").QueryStore;

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

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { QueryStoreContext } from "../provider.js";
+/**
+ * Gets the QueryStore from a parent {@link QueryStoreProvider} component
+ * If there is none it throws an error
+ */
+export function useQueryStore() {
+    const store = useContext(QueryStoreContext);
+    if (!store)
+        throw new Error("Missing QueryStoreProvider");
+    return store;
+}

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

@@ -1,3 +1,7 @@
 import { QueryConstructor } from "applesauce-core";
-/** Runs and subscribes to a query in the query store */
+/**
+ * Runs and subscribes to a query in the query store
+ * @example
+ * const events = useStoreQuery(TimelineQuery, [{kinds: [1]}])
+ */
 export declare function useStoreQuery<T extends unknown, Args extends Array<any>>(queryConstructor: QueryConstructor<T, Args>, args?: Args | null): T | undefined;

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

@@ -1,7 +1,11 @@
 import { useMemo } from "react";
 import { useObservable } from "./use-observable.js";
-import { useQueryStore } from "../provider.js";
-/** Runs and subscribes to a query in the query store */
+import { useQueryStore } from "./use-query-store.js";
+/**
+ * Runs and subscribes to a query in the query store
+ * @example
+ * const events = useStoreQuery(TimelineQuery, [{kinds: [1]}])
+ */
 export function useStoreQuery(queryConstructor, args) {
     const store = useQueryStore();
     const observable = useMemo(() => {

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./provider.js";
-export * from "./hooks/index.js";
+export * as Helpers from "./helpers/index.js";
+export * as Hooks from "./hooks/index.js";

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from "./provider.js";
-export * from "./hooks/index.js";
+export * as Helpers from "./helpers/index.js";
+export * as Hooks from "./hooks/index.js";

package/dist/provider.d.ts

@@ -1,6 +1,7 @@
 import { QueryStore } from "applesauce-core";
 import { PropsWithChildren } from "react";
-export declare function useQueryStore(): QueryStore;
+export declare const QueryStoreContext: import("react").Context<QueryStore | null>;
+/** Provides a QueryStore to the component tree */
 export declare function QueryStoreProvider({ store, children }: PropsWithChildren<{
     store: QueryStore;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/provider.js

@@ -1,12 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const QueryStoreContext = createContext(null);
-export function useQueryStore() {
-    const store = useContext(QueryStoreContext);
-    if (!store)
-        throw new Error("Missing QueryStoreProvider");
-    return store;
-}
+import { createContext } from "react";
+export const QueryStoreContext = createContext(null);
+/** Provides a QueryStore to the component tree */
 export function QueryStoreProvider({ store, children }) {
     return _jsx(QueryStoreContext.Provider, { value: store, children: children });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "applesauce-react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React hooks for applesauce",
   "type": "module",
   "main": "dist/index.js",
@@ -33,17 +33,16 @@
     }
   },
   "dependencies": {
-    "applesauce-content": "^0.7.0",
-    "applesauce-core": "^0.7.0",
+    "applesauce-content": "^0.8.0",
+    "applesauce-core": "^0.8.0",
     "nostr-tools": "^2.7.2",
     "react": "^18.3.1",
-    "zen-observable": "^0.10.0"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@types/jest": "^29.5.13",
     "@types/react": "^18.3.11",
-    "@types/zen-observable": "^0.8.7",
     "jest": "^29.7.0",
     "jest-extended": "^4.0.2"
   },