applesauce-react 0.0.0-next-20241103143210

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/helpers/build-link-renderer.d.ts

@@ -0,0 +1,3 @@
+import { Link } from "applesauce-content/nast";
+export type LinkRenderer = (url: URL, node: Link) => JSX.Element | false | null;
+export declare function buildLinkRenderer(handlers: LinkRenderer[]): import("react").NamedExoticComponent<import("./nast.js").ExtraProps<Link>>;

package/dist/helpers/build-link-renderer.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+export function buildLinkRenderer(handlers) {
+    const LinkRenderer = ({ node }) => {
+        const content = useMemo(() => {
+            try {
+                const url = new URL(node.href);
+                for (const handler of handlers) {
+                    try {
+                        const content = handler(url, node);
+                        if (content)
+                            return content;
+                    }
+                    catch (e) { }
+                }
+            }
+            catch (error) { }
+            return null;
+        }, [node.href, node.value]);
+        return content || _jsx(_Fragment, { children: node.value });
+    };
+    return memo(LinkRenderer);
+}

package/dist/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./nast.js";
+export * from "./build-link-renderer.js";

package/dist/helpers/index.js

@@ -0,0 +1,2 @@
+export * from "./nast.js";
+export * from "./build-link-renderer.js";

package/dist/helpers/nast.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Content, ContentMap, Root } from "applesauce-content/nast";
+type Component<ComponentProps> = React.FunctionComponent<ComponentProps> | React.ComponentClass;
+export type ExtraProps<T extends Content> = {
+    node: T;
+};
+export type ComponentMap = Partial<{
+    [k in keyof ContentMap]: Component<ExtraProps<ContentMap[k]>>;
+}>;
+/** Render a nostr syntax tree to JSX components */
+export declare function renderNast(root: Root, components: ComponentMap): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helpers/nast.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/** Render a nostr syntax tree to JSX components */
+export function renderNast(root, components) {
+    const indexes = {};
+    return (_jsx(_Fragment, { children: root.children.map((node) => {
+            indexes[node.type] = indexes[node.type] ?? 0;
+            const index = indexes[node.type];
+            indexes[node.type]++;
+            const Component = components[node.type];
+            if (!Component)
+                return null;
+            // @ts-expect-error
+            return _jsx(Component, { node: node }, node.type + "-" + index);
+        }) }));
+}

package/dist/hooks/index.d.ts

@@ -0,0 +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

@@ -0,0 +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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,13 @@
+import { useState, useEffect } from "react";
+export function useObservable(observable) {
+    const [_count, update] = useState(0);
+    const [value, setValue] = useState(observable && Reflect.has(observable, "value") ? Reflect.get(observable, "value") : undefined);
+    useEffect(() => {
+        const sub = observable?.subscribe((v) => {
+            setValue(v);
+            update((c) => c + 1);
+        });
+        return () => sub?.unsubscribe();
+    }, [observable]);
+    return value;
+}

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-render-nast.d.ts

@@ -0,0 +1,5 @@
+import { Root } from "applesauce-content/nast";
+import { ComponentMap } from "../helpers/nast.js";
+export { ComponentMap };
+/** A hook to get the rendered output of a nostr syntax tree */
+export declare function useRenderNast(root: Root | undefined, components: ComponentMap): JSX.Element | null;

package/dist/hooks/use-render-nast.js

@@ -0,0 +1,6 @@
+import { useMemo } from "react";
+import { renderNast } from "../helpers/nast.js";
+/** A hook to get the rendered output of a nostr syntax tree */
+export function useRenderNast(root, components) {
+    return useMemo(() => (root ? renderNast(root, components) : null), [root, Object.keys(components).join("|")]);
+}

package/dist/hooks/use-rendered-text-content.d.ts

@@ -0,0 +1,17 @@
+import { getParsedTextContent } from "applesauce-content/text";
+import { EventTemplate, NostrEvent } from "nostr-tools";
+import { ComponentMap } from "../helpers/nast.js";
+import { LinkRenderer } from "../helpers/build-link-renderer.js";
+export { ComponentMap };
+type Options = {
+    /** Override transformers */
+    transformers?: Parameters<typeof getParsedTextContent>[2];
+    /** If set will use {@link buildLinkRenderer} to render links */
+    linkRenderers?: LinkRenderer[];
+    /** Override event content */
+    content?: string;
+    /** Maximum length */
+    maxLength?: number;
+};
+/** Returns the parsed and render text content for an event */
+export declare function useRenderedContent(event: NostrEvent | EventTemplate | string | undefined, components: ComponentMap, opts?: Options): JSX.Element | null;

package/dist/hooks/use-rendered-text-content.js

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+import { getParsedTextContent } from "applesauce-content/text";
+import { useRenderNast } from "./use-render-nast.js";
+import { buildLinkRenderer } from "../helpers/build-link-renderer.js";
+import { truncateContent } from "applesauce-content/nast";
+/** Returns the parsed and render text content for an event */
+export function useRenderedContent(event, components, opts) {
+    // if link renderers are set, override the link components
+    const _components = useMemo(() => (opts?.linkRenderers ? { ...components, link: buildLinkRenderer(opts.linkRenderers) } : components), [opts?.linkRenderers, components]);
+    // add additional transformers
+    const nast = useMemo(() => (event ? getParsedTextContent(event, opts?.content, opts?.transformers) : undefined), [event, opts?.content, opts?.transformers]);
+    let truncated = nast;
+    if (opts?.maxLength && nast)
+        truncated = truncateContent(nast, opts.maxLength);
+    return useRenderNast(truncated, _components);
+}

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

@@ -0,0 +1,7 @@
+import { QueryConstructor } from "applesauce-core";
+/**
+ * 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

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import { useObservable } from "./use-observable.js";
+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(() => {
+        if (args)
+            return store.runQuery(queryConstructor)(...args);
+        else
+            return undefined;
+    }, [args, store]);
+    return useObservable(observable);
+}

package/dist/hooks/use-text-content.d.ts

@@ -0,0 +1,6 @@
+import { ParseTextContentOptions } from "applesauce-content/text";
+import { EventTemplate, NostrEvent } from "nostr-tools";
+import { ComponentMap } from "../helpers/nast.js";
+export { ComponentMap };
+/** Returns the parsed and render text content for an event */
+export declare function useRenderedContent(event: NostrEvent | EventTemplate, components: ComponentMap, opts?: ParseTextContentOptions): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/use-text-content.js

@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { getParedTextContent } from "applesauce-content/text";
+import { useRenderNast } from "./use-render-nast.js";
+/** Returns the parsed and render text content for an event */
+export function useRenderedContent(event, components, opts) {
+    const nast = useMemo(() => getParedTextContent(event, opts), [event, opts?.overrideContent, opts?.transformers]);
+    return useRenderNast(nast, components);
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/provider.d.ts

@@ -0,0 +1,7 @@
+import { QueryStore } from "applesauce-core";
+import { PropsWithChildren } from "react";
+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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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

@@ -0,0 +1,63 @@
+{
+  "name": "applesauce-react",
+  "version": "0.0.0-next-20241103143210",
+  "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"
+    },
+    "./helpers": {
+      "import": "./dist/helpers/index.js",
+      "types": "./dist/helpers/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "applesauce-content": "0.0.0-next-20241103143210",
+    "applesauce-core": "0.0.0-next-20241103143210",
+    "nostr-tools": "^2.7.2",
+    "react": "^18.3.1",
+    "rxjs": "^7.8.1"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^18.3.11",
+    "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)"
+  }
+}