applesauce-react 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 hzrd149
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# applesauce-react
+
+React hooks for applesauce
+
+## Example
+
+```jsx
+import { EventStore, QueryStore, Queries } from "applesauce-core";
+import { QueryStoreProvider, useStoreQuery } from "applesauce-react";
+
+const events = new EventStore();
+const store = new QueryStore(events);
+
+function UserName({ pubkey }) {
+  const profile = useStoreQuery(Queries.ProfileQuery, [pubkey]);
+
+  return <span>{profile.name || "loading..."}</span>;
+}
+
+function App() {
+  return (
+    <QueryStoreProvider store={store}>
+      <h1>App</h1>
+
+      <UserName pubkey="82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2" />
+    </QueryStoreProvider>
+  );
+}
+```

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./use-observable.js";
+export * from "./use-store-query.js";

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from "./use-observable.js";
+export * from "./use-store-query.js";

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

@@ -0,0 +1,3 @@
+import Observable from "zen-observable";
+/** Subscribe to the value of an observable */
+export declare function useObservable<T extends unknown>(observable?: Observable<T>): T | undefined;

package/dist/hooks/use-observable.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+import { isStateful } from "applesauce-core/observable";
+/** Subscribe to the value of an observable */
+export function useObservable(observable) {
+    const [_, forceUpdate] = useState(0);
+    const [value, update] = useState(observable && isStateful(observable) ? observable.value : undefined);
+    useEffect(() => {
+        if (!observable)
+            return;
+        const s = observable.subscribe((v) => {
+            update(v);
+            forceUpdate(Math.random());
+        });
+        return () => s.unsubscribe();
+    }, [observable]);
+    return value;
+}

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

@@ -0,0 +1,3 @@
+import { QueryConstructor } from "applesauce-core";
+/** Runs and subscribes to a query in the query store */
+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

@@ -0,0 +1,14 @@
+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 */
+export function useStoreQuery(queryConstructor, args) {
+    const store = useQueryStore();
+    const observable = useMemo(() => {
+        if (args)
+            return store.runQuery(queryConstructor)(...args);
+        else
+            return undefined;
+    }, [args, store]);
+    return useObservable(observable);
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./provider.js";
+export * from "./hooks/index.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./provider.js";
+export * from "./hooks/index.js";

package/dist/provider.d.ts

@@ -0,0 +1,6 @@
+import { QueryStore } from "applesauce-core";
+import { PropsWithChildren } from "react";
+export declare function useQueryStore(): QueryStore;
+export declare function QueryStoreProvider({ store, children }: PropsWithChildren<{
+    store: QueryStore;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/provider.js

@@ -0,0 +1,12 @@
+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;
+}
+export function QueryStoreProvider({ store, children }) {
+    return _jsx(QueryStoreContext.Provider, { value: store, children: children });
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "applesauce-react",
+  "version": "0.6.0",
+  "description": "React hooks for applesauce",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "nostr",
+    "react"
+  ],
+  "author": "hzrd149",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "types": "./dist/hooks/index.d.ts"
+    },
+    "./hooks/*": {
+      "import": "./dist/hooks/*.js",
+      "types": "./dist/hooks/*.d.ts"
+    }
+  },
+  "dependencies": {
+    "applesauce-core": "^0.6.0",
+    "nostr-tools": "^2.7.2",
+    "react": "^18.3.1",
+    "zen-observable": "^0.10.0"
+  },
+  "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"
+  },
+  "jest": {
+    "roots": [
+      "dist"
+    ],
+    "setupFilesAfterEnv": [
+      "jest-extended/all"
+    ]
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch:build": "tsc --watch > /dev/null",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --passWithNoTests",
+    "watch:test": "(trap 'kill 0' SIGINT; pnpm run build -w > /dev/null & pnpm run test --watch)"
+  }
+}