applesauce-react 0.6.0 → 0.7.0

package/dist/helpers/build-link-renderer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+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

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

package/dist/hooks/index.js

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

package/dist/hooks/use-observable.js

@@ -2,16 +2,37 @@ 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);
+    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);
     useEffect(() => {
-        if (!observable)
-            return;
-        const s = observable.subscribe((v) => {
-            update(v);
-            forceUpdate(Math.random());
+        const sub = observable?.subscribe((v) => {
+            setValue(v);
+            update((c) => c + 1);
         });
-        return () => s.unsubscribe();
+        return () => sub?.unsubscribe();
     }, [observable]);
     return value;
 }

package/dist/hooks/use-render-nast.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+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,18 @@
+/// <reference types="react" />
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "applesauce-react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "React hooks for applesauce",
   "type": "module",
   "main": "dist/index.js",
@@ -26,10 +26,15 @@
     "./hooks/*": {
       "import": "./dist/hooks/*.js",
       "types": "./dist/hooks/*.d.ts"
+    },
+    "./helpers": {
+      "import": "./dist/helpers/index.js",
+      "types": "./dist/helpers/index.d.ts"
     }
   },
   "dependencies": {
-    "applesauce-core": "^0.6.0",
+    "applesauce-content": "^0.7.0",
+    "applesauce-core": "^0.7.0",
     "nostr-tools": "^2.7.2",
     "react": "^18.3.1",
     "zen-observable": "^0.10.0"