@peers-app/peers-ui 0.26.5 → 0.27.0

package/src/utils.ts

@@ -1,12 +1,13 @@
 import DOMPurify from "dompurify";
 import _ from "lodash";
 
+/** Plain text content of an HTML string (parsed with `DOMParser`, so browser-only). */
 export function htmlToText(html: string): string {
   const doc = new DOMParser().parseFromString(html, "text/html");
   return doc.body.textContent || "";
 }
 
-// Strip mention formatting and clean text for display
+/** Replaces `<@type:name:id>` / `<$type:name:id>` mentions with the readable name, underscores as spaces. */
 export function stripMentions(text: string): string {
   // Replace <type:name:id> with just the readable name part
   // Convert underscores to spaces for better readability
@@ -15,6 +16,7 @@ export function stripMentions(text: string): string {
   });
 }
 
+/** Sanitizes HTML with DOMPurify, collapses repeated blank paragraphs, and drops a trailing one. */
 export function trimAndSanitizeHtml(value: string) {
   let sanitizedValue: string = DOMPurify.sanitize(value);
   // removes empty paragraphs
@@ -35,34 +37,16 @@ export function trimAndSanitizeHtml(value: string) {
   return sanitizedValue;
 }
 
-export function isObject(x: any): x is Record<string, any> {
-  return _.isObject(x) && !_.isArray(x) && !_.isDate(x) && x !== null;
-}
-
-export function js(jsCode: string, externalReferences?: any) {
-  const hideGlobals = [
-    "process",
-    "global", //,'setTimeout','setInterval','setImmediate','clearImmediate','clearInterval','clearTimeout'
-  ];
-  const common = module.exports;
-  const refNames = ["console", "common"];
-  const refValues = [console, common];
-  _.keys(externalReferences).forEach((key) => {
-    refNames.push(key);
-    refValues.push(externalReferences[key]);
-  });
-  const compiledJs = Function.apply(null, [
-    ...refNames,
-    ...hideGlobals,
-    `"use strict";  ${jsCode.trim()}`,
-  ]);
-  return compiledJs.apply(null, refValues);
-}
-
 // must be done this way so TypeScript doesn't rewrite async keyword
 // export const AsyncFunction = eval('Object.getPrototypeOf(async function () { }).constructor');
+/** The `AsyncFunction` constructor, for compiling async code from a string. */
 export const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
 
+/**
+ * Compiles and runs `jsCode` as the body of a strict async function. `utils`, `Promise`,
+ * `console` and each key of `externalReferences` are in scope; `process` and `global` are hidden.
+ * Runs arbitrary code: never pass it untrusted input.
+ */
 export function jsAsync(jsCode: string, externalReferences: any = {}) {
   jsCode = String(jsCode).trim();
   const hideGlobals = [
@@ -84,148 +68,6 @@ export function jsAsync(jsCode: string, externalReferences: any = {}) {
   return compiledJs.apply(null, refValues);
 }
 
-export function toJSON(obj: any) {
-  //console.log('toJSON');
-  const knownObjs: any[] = [];
-  const objRefs: any[] = [];
-  const newObjs: any[] = [];
-  let refCount = 0;
-
-  function recurse(obj: any) {
-    // stringify values
-    if (Number.isNaN(obj)) return "NaN";
-    if (obj === undefined) return "undefined";
-    if (obj === Infinity) return "Infinity";
-    if (obj instanceof RegExp) return `__REGEXP ${obj.toString()}`;
-    //   if(isDate(obj))
-    //       return "__DATE " + obj.toISOString();
-    if (_.isDate(obj)) return obj.toISOString();
-    if (_.isFunction(obj)) return `__FUNCTION ${obj.toString()}`;
-    if (_.isElement(obj)) {
-      return `__HTML ${obj.outerHTML}`;
-    }
-    if (typeof window !== "undefined" && window && obj === window) {
-      return "__WINDOW";
-    }
-    if (_.isError(obj)) {
-      return `__ERROR ${obj.stack}`;
-    }
-
-    // non-objects can just be returned at this point
-    if (!(isObject(obj) || _.isArray(obj))) {
-      return obj;
-    }
-
-    // if we've found a duplicate reference, deal with it
-    var iObj = knownObjs.indexOf(obj);
-    if (iObj >= 0) {
-      var ref = objRefs[iObj];
-
-      var nObj = newObjs[iObj];
-      if (_.isArray(nObj) && (!_.isString(nObj[0]) || !nObj[0].match(/^__this_ref:/)))
-        nObj.unshift(`__this_ref:${ref}`);
-      else if (isObject(nObj) && !nObj.__this_ref) nObj.__this_ref = ref;
-      return ref;
-    }
-
-    // capture references in case we need them later
-    refCount++;
-    var newRef = `__duplicate_ref_${_.isArray(obj) ? "ary_" : "obj_"}${refCount}`;
-    var outObj: any[] | any = _.isArray(obj) ? [] : {};
-    knownObjs.push(obj);
-    objRefs.push(newRef);
-    newObjs.push(outObj);
-
-    // recurse on properties
-    if (_.isArray(obj))
-      for (var i = 0; i < obj.length; i++) outObj.push(recurse(obj[i])); // use push so offset from reference capture doesn't mess things up
-    else
-      for (var key in obj) {
-        if (!Object.hasOwn(obj as object, key)) continue;
-        var value = recurse(obj[key]);
-        if (key[0] === "$")
-          // escape leading dollar signs
-          key = `__DOLLAR_${key.substr(1)}`;
-        outObj[key] = value;
-      }
-    return outObj;
-  }
-  obj = recurse(obj);
-  return obj;
-}
-
-export function fromJSON(obj: any, externalReferences?: any) {
-  //console.log('fromJSON');
-  var dup_refs: any = {};
-
-  function recurse(obj: any) {
-    if (_.isString(obj)) {
-      // restore values
-      if (obj === "undefined") return undefined;
-      if (obj === "NaN") return NaN;
-      if (obj === "Infinity") return Infinity;
-      if (obj.match(/^__REGEXP /)) {
-        var m: any = obj.split("__REGEXP ")[1].match(/\/(.*)\/(.*)?/);
-        return new RegExp(m[1], m[2] || "");
-      }
-      if (obj.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/)) {
-        return new Date(obj);
-      }
-      if (obj.match(/^__FUNCTION /)) {
-        return js(obj.substring(11), externalReferences);
-      }
-      if (obj.match(/^__HTML /)) {
-        //@ts-expect-error
-        if (typeof $ !== "undefined") return $(obj.substring(7))[0];
-        else return obj;
-      }
-      if (obj.startsWith("__ERROR ")) {
-        const error = new Error();
-        error.stack = obj.substring(8);
-        return error;
-      }
-      if (obj === "__WINDOW") {
-        return window;
-      }
-
-      // deal with duplicate refs
-      if (obj.match(/^__duplicate_ref_/)) {
-        if (!dup_refs[obj]) dup_refs[obj] = obj.match(/_obj_/) ? {} : [];
-        return dup_refs[obj];
-      }
-    }
-
-    if (!(isObject(obj) || _.isArray(obj))) return obj;
-
-    // deal with objects that have duplicate refs
-    var dup_ref = null;
-    obj = _.clone(obj); // don't mess up the original JSON object
-    if (_.isArray(obj) && _.isString(obj[0]) && obj[0].match(/^__this_ref:/))
-      dup_ref = obj.shift().split(":")[1];
-    else if (obj.__this_ref) {
-      dup_ref = obj.__this_ref;
-      delete obj.__this_ref;
-    }
-
-    var mObj: any = _.isArray(obj) ? [] : {};
-    if (dup_ref)
-      if (!dup_refs[dup_ref]) dup_refs[dup_ref] = mObj;
-      else mObj = dup_refs[dup_ref];
-
-    // restore keys and recurse on objects
-    for (var key in obj) {
-      if (!Object.hasOwn(obj, key)) continue;
-
-      var value = recurse(obj[key]);
-      if (key.match(/^__DOLLAR_/)) key = `$${key.substr(9)}`;
-      mObj[key] = value;
-    }
-    return mObj;
-  }
-  obj = recurse(obj);
-  return obj;
-}
-
 // export type IObjectMatch<T> = {
 //   [key in keyof T]?: RegExp | string | number | boolean
 // }

package/dist/hooks.d.ts

@@ -1,36 +0,0 @@
-import { type Observable } from "@peers-app/peers-sdk";
-import type React from "react";
-/**
- * Use this to subscribe to an observable or computed in a functional component.
- * Uses useSyncExternalStore for proper React 18 concurrent rendering support.
- * @param sub the observable or computed to subscribe to
- * @param deps an array of dependencies that will cause re-subscription when changed
- * @returns the current value of the observable or computed and a function to set the value
- */
-export declare function useObservable<T>(sub: Observable<T> | T, deps?: React.DependencyList): [T, (value: T) => void];
-/**
- * Use this to easily wait for a promise in a functional component.
- * @param p The promise to wait for
- * @param initialValue the initial value to return before the promise resolves
- * @param deps the dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
- * @returns the initial value and the resolved value of the promise
- */
-export declare function usePromise<T>(p: Promise<T> | (() => Promise<T>), initialValue?: T, deps?: React.DependencyList): T | undefined;
-/**
- * Use this to create an observable in a functional component.
- * This automatically subscribes to the observable and triggers a re-render when the value changes.
- * @param initialValue This will be the initial value of the observable
- * @param doNotSubscribe If true, the observable will not be subscribed to automatically.
- * This is useful if you want to create an observable that persists between rerenders but doesn't cause rerenders itself.
- * @returns
- */
-export declare function useObservableState<T>(initialValue: T, doNotSubscribe?: boolean): Observable<T>;
-export declare function useObservableState<T = undefined>(initialValue?: T, doNotSubscribe?: boolean): Observable<T | undefined>;
-/**
- * Use this to register a handler for a knockout subscribable in a functional component.
- * The handler will be called immediately and whenever the subscribable changes.
- * @param subscribable The observable to subscribe to
- * @param onChange The function to call with the new value when the observable changes
- */
-export declare function useSubscription<T>(subscribable: Observable<T>, onChange: (value: T) => void, doNotCallOnChangeDuringSetup?: boolean): void;
-export declare function useOnScreen(ref: React.RefObject<Element | null>): boolean;

package/dist/hooks.js

@@ -1,108 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useObservable = useObservable;
-exports.usePromise = usePromise;
-exports.useObservableState = useObservableState;
-exports.useSubscription = useSubscription;
-exports.useOnScreen = useOnScreen;
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = require("react");
-/**
- * Use this to subscribe to an observable or computed in a functional component.
- * Uses useSyncExternalStore for proper React 18 concurrent rendering support.
- * @param sub the observable or computed to subscribe to
- * @param deps an array of dependencies that will cause re-subscription when changed
- * @returns the current value of the observable or computed and a function to set the value
- */
-function useObservable(sub, deps = []) {
-    // Create memoized subscribe function that adapts Observable's subscribe API to useSyncExternalStore's expected signature
-    const subscribe = (0, react_1.useCallback)((onStoreChange) => {
-        if (!(0, peers_sdk_1.isSubscribable)(sub)) {
-            // If not subscribable, return a no-op unsubscribe
-            return () => { };
-        }
-        const subscription = sub.subscribe(onStoreChange);
-        return () => subscription.dispose();
-    }, [sub, ...deps]);
-    // getSnapshot returns the current value from the observable
-    const getSnapshot = (0, react_1.useCallback)(() => {
-        return (0, peers_sdk_1.unwrapObservable)(sub);
-    }, [sub, ...deps]);
-    // Use useSyncExternalStore for concurrent-safe subscription
-    const data = (0, react_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-    // Create setter that updates both local understanding and the observable
-    const setter = (0, react_1.useCallback)((newData) => {
-        if ((0, peers_sdk_1.isSubscribable)(sub)) {
-            sub(newData);
-        }
-    }, [sub]);
-    return [data, setter];
-}
-/**
- * Use this to easily wait for a promise in a functional component.
- * @param p The promise to wait for
- * @param initialValue the initial value to return before the promise resolves
- * @param deps the dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
- * @returns the initial value and the resolved value of the promise
- */
-function usePromise(p, initialValue, deps = []) {
-    const [data, setData] = (0, react_1.useState)(initialValue);
-    // `deps` drives when the effect re-runs; callers include `p` when it changes. Omitting `p` avoids duplicate tracking with `[...deps]`.
-    (0, react_1.useEffect)(() => {
-        let disposed = false;
-        if (typeof p === "function") {
-            p = p();
-        }
-        p.then((newData) => {
-            // if (!_.isEqual(newData, data) && !disposed) {
-            if (!disposed) {
-                setData(newData);
-            }
-        });
-        return () => {
-            disposed = true;
-        };
-    }, [...deps]);
-    return data;
-}
-function useObservableState(initialValue, doNotSubscribe) {
-    const [obs] = (0, react_1.useState)(() => initialValue !== undefined ? (0, peers_sdk_1.observable)(initialValue) : (0, peers_sdk_1.observable)());
-    if (!doNotSubscribe) {
-        // biome-ignore lint/correctness/useHookAtTopLevel: when doNotSubscribe, caller keeps a stable observable without React-driven subscription (see docstring).
-        useObservable(obs);
-    }
-    return obs;
-}
-/**
- * Use this to register a handler for a knockout subscribable in a functional component.
- * The handler will be called immediately and whenever the subscribable changes.
- * @param subscribable The observable to subscribe to
- * @param onChange The function to call with the new value when the observable changes
- */
-function useSubscription(subscribable, onChange, doNotCallOnChangeDuringSetup) {
-    (0, react_1.useEffect)(() => {
-        if (!doNotCallOnChangeDuringSetup) {
-            onChange(subscribable());
-        }
-        const subscription = subscribable.subscribe(() => onChange(subscribable()));
-        return () => subscription.dispose();
-    }, [subscribable, onChange, doNotCallOnChangeDuringSetup]);
-}
-function useOnScreen(ref) {
-    const [isIntersecting, setIntersecting] = (0, react_1.useState)(false);
-    // Read ref.current once on mount (ref object identity is stable).
-    (0, react_1.useEffect)(() => {
-        const element = ref.current;
-        if (!element) {
-            return;
-        }
-        const observer = new IntersectionObserver(([entry]) => {
-            setIntersecting(entry.isIntersecting);
-        });
-        observer.observe(element);
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    return isIntersecting;
-}

package/src/hooks.ts

@@ -1,150 +0,0 @@
-import {
-  isSubscribable,
-  type Observable,
-  observable,
-  unwrapObservable,
-} from "@peers-app/peers-sdk";
-import type React from "react";
-import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
-
-/**
- * Use this to subscribe to an observable or computed in a functional component.
- * Uses useSyncExternalStore for proper React 18 concurrent rendering support.
- * @param sub the observable or computed to subscribe to
- * @param deps an array of dependencies that will cause re-subscription when changed
- * @returns the current value of the observable or computed and a function to set the value
- */
-export function useObservable<T>(
-  sub: Observable<T> | T,
-  deps: React.DependencyList = [],
-): [T, (value: T) => void] {
-  // Create memoized subscribe function that adapts Observable's subscribe API to useSyncExternalStore's expected signature
-  const subscribe = useCallback(
-    (onStoreChange: () => void) => {
-      if (!isSubscribable(sub)) {
-        // If not subscribable, return a no-op unsubscribe
-        return () => {};
-      }
-      const subscription = sub.subscribe(onStoreChange);
-      return () => subscription.dispose();
-    },
-    [sub, ...deps],
-  );
-
-  // getSnapshot returns the current value from the observable
-  const getSnapshot = useCallback(() => {
-    return unwrapObservable(sub);
-  }, [sub, ...deps]);
-
-  // Use useSyncExternalStore for concurrent-safe subscription
-  const data = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-
-  // Create setter that updates both local understanding and the observable
-  const setter = useCallback(
-    (newData: T) => {
-      if (isSubscribable(sub)) {
-        sub(newData);
-      }
-    },
-    [sub],
-  );
-
-  return [data, setter];
-}
-
-/**
- * Use this to easily wait for a promise in a functional component.
- * @param p The promise to wait for
- * @param initialValue the initial value to return before the promise resolves
- * @param deps the dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
- * @returns the initial value and the resolved value of the promise
- */
-export function usePromise<T>(
-  p: Promise<T> | (() => Promise<T>),
-  initialValue?: T,
-  deps: React.DependencyList = [],
-): T | undefined {
-  const [data, setData] = useState(initialValue);
-  // `deps` drives when the effect re-runs; callers include `p` when it changes. Omitting `p` avoids duplicate tracking with `[...deps]`.
-  useEffect(() => {
-    let disposed = false;
-    if (typeof p === "function") {
-      p = p();
-    }
-    p.then((newData) => {
-      // if (!_.isEqual(newData, data) && !disposed) {
-      if (!disposed) {
-        setData(newData);
-      }
-    });
-    return () => {
-      disposed = true;
-    };
-  }, [...deps]);
-  return data;
-}
-
-/**
- * Use this to create an observable in a functional component.
- * This automatically subscribes to the observable and triggers a re-render when the value changes.
- * @param initialValue This will be the initial value of the observable
- * @param doNotSubscribe If true, the observable will not be subscribed to automatically.
- * This is useful if you want to create an observable that persists between rerenders but doesn't cause rerenders itself.
- * @returns
- */
-export function useObservableState<T>(initialValue: T, doNotSubscribe?: boolean): Observable<T>;
-export function useObservableState<T = undefined>(
-  initialValue?: T,
-  doNotSubscribe?: boolean,
-): Observable<T | undefined>;
-export function useObservableState<T>(initialValue?: T, doNotSubscribe?: boolean) {
-  const [obs] = useState(() =>
-    initialValue !== undefined ? observable<T>(initialValue) : observable<T | undefined>(),
-  );
-  if (!doNotSubscribe) {
-    // biome-ignore lint/correctness/useHookAtTopLevel: when doNotSubscribe, caller keeps a stable observable without React-driven subscription (see docstring).
-    useObservable(obs);
-  }
-  return obs;
-}
-
-/**
- * Use this to register a handler for a knockout subscribable in a functional component.
- * The handler will be called immediately and whenever the subscribable changes.
- * @param subscribable The observable to subscribe to
- * @param onChange The function to call with the new value when the observable changes
- */
-export function useSubscription<T>(
-  subscribable: Observable<T>,
-  onChange: (value: T) => void,
-  doNotCallOnChangeDuringSetup?: boolean,
-): void {
-  useEffect(() => {
-    if (!doNotCallOnChangeDuringSetup) {
-      onChange(subscribable());
-    }
-    const subscription = subscribable.subscribe(() => onChange(subscribable()));
-    return () => subscription.dispose();
-  }, [subscribable, onChange, doNotCallOnChangeDuringSetup]);
-}
-
-export function useOnScreen(ref: React.RefObject<Element | null>) {
-  const [isIntersecting, setIntersecting] = useState(false);
-
-  // Read ref.current once on mount (ref object identity is stable).
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      setIntersecting(entry.isIntersecting);
-    });
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  return isIntersecting;
-}