@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/ui-router/ui-loader.tsx

@@ -1,606 +0,0 @@
-import {
-  debounceByArgs,
-  getUserContext,
-  type IPackage,
-  type IPeersPackageUIs,
-  type IPeersUI,
-  type IPeersUIRoute,
-  newid,
-  Packages,
-  PackageVersions,
-  packagePrefsVar,
-  rpcServerCalls,
-  toJSON,
-  type UIContext,
-  zodAnyObject,
-} from "@peers-app/peers-sdk";
-import { orderBy } from "lodash";
-import React, { Component, useEffect } from "react";
-import { LoadingIndicator } from "../components/loading-indicator";
-import { mainContentPath, packageReloaded } from "../globals";
-import { useObservable } from "../hooks";
-import "../ui-defaults";
-import { allPackages } from "./routes-loader";
-
-const peersUIs: { [key: string]: IPeersUI } = {};
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-  errorInfo: React.ErrorInfo | null;
-}
-
-interface ErrorBoundaryProps {
-  peersUIId?: string;
-  packageName?: string;
-  componentName?: string;
-  children: React.ReactNode;
-}
-
-class UIErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null, errorInfo: null };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error, errorInfo: null };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error("UIErrorBoundary caught an error:", error, errorInfo);
-    this.setState({
-      error,
-      errorInfo,
-    });
-  }
-
-  render() {
-    if (this.state.hasError) {
-      const { peersUIId, packageName, componentName } = this.props;
-      const { error, errorInfo } = this.state;
-
-      return (
-        <div
-          style={{
-            padding: "20px",
-            border: "2px solid #ff6b6b",
-            borderRadius: "8px",
-            backgroundColor: "#fff5f5",
-            color: "#721c24",
-            fontFamily: "monospace",
-            margin: "10px 0",
-          }}
-        >
-          <h3 style={{ color: "#c53030", marginTop: 0 }}>UI Component Error</h3>
-          <div style={{ marginBottom: "15px" }}>
-            {peersUIId && (
-              <div>
-                <strong>Peers UI ID:</strong> {peersUIId}
-              </div>
-            )}
-            {packageName && (
-              <div>
-                <strong>Package:</strong> {packageName}
-              </div>
-            )}
-            {componentName && (
-              <div>
-                <strong>Component:</strong> {componentName}
-              </div>
-            )}
-          </div>
-
-          <details style={{ marginBottom: "15px" }}>
-            <summary style={{ cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }}>
-              Error Details
-            </summary>
-            <div
-              style={{
-                backgroundColor: "#fed7d7",
-                padding: "10px",
-                borderRadius: "4px",
-                whiteSpace: "pre-wrap",
-                overflow: "auto",
-                maxHeight: "200px",
-              }}
-            >
-              <strong>Error:</strong> {error?.message || "Unknown error"}
-              {error?.stack && (
-                <>
-                  <br />
-                  <br />
-                  <strong>Stack Trace:</strong>
-                  <br />
-                  {error.stack}
-                </>
-              )}
-            </div>
-          </details>
-
-          {errorInfo && (
-            <details>
-              <summary style={{ cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }}>
-                Component Stack
-              </summary>
-              <div
-                style={{
-                  backgroundColor: "#fed7d7",
-                  padding: "10px",
-                  borderRadius: "4px",
-                  whiteSpace: "pre-wrap",
-                  overflow: "auto",
-                  maxHeight: "200px",
-                }}
-              >
-                {errorInfo.componentStack}
-              </div>
-            </details>
-          )}
-
-          <button
-            type="button"
-            onClick={() => this.setState({ hasError: false, error: null, errorInfo: null })}
-            style={{
-              marginTop: "15px",
-              padding: "8px 16px",
-              backgroundColor: "#c53030",
-              color: "white",
-              border: "none",
-              borderRadius: "4px",
-              cursor: "pointer",
-            }}
-          >
-            Try Again
-          </button>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-interface IProps extends UIContext {
-  props: Record<string, unknown>;
-}
-
-/**
- * Pick a registered route for the current screen context and render its component.
- *
- * @param props - Screen context, including the route props to validate.
- */
-export const UIRouter = (props: IProps) => {
-  let matchingRoute: IPeersUIRoute | undefined;
-  const allRoutes = _window.getPeersUIRoutes() as IPeersUIRoute[];
-  const filteredRoutes = allRoutes.filter((r) => {
-    if (
-      props.uiEditMode &&
-      props.uiEditMode !== "*" &&
-      r.uiEditMode !== "*" &&
-      r.uiEditMode !== props.uiEditMode
-    )
-      return false;
-    if (
-      props.uiCategory &&
-      props.uiCategory !== "*" &&
-      r.uiCategory !== "*" &&
-      r.uiCategory !== props.uiCategory
-    )
-      return false;
-    if (
-      props.uiSubcategory &&
-      props.uiSubcategory !== "*" &&
-      r.uiSubcategory !== "*" &&
-      r.uiSubcategory !== props.uiSubcategory
-    )
-      return false;
-    return true;
-  });
-
-  const context: UIContext & { path: string } = {
-    ...props,
-    path: props.path || mainContentPath(),
-  };
-  for (const route of filteredRoutes) {
-    // if (route.path && !context.path.startsWith(route.path)) continue;
-
-    // <todo> test this
-    if (route.path) {
-      // since `isMatch` can already be used to match the path, this might be overkill
-      // but if you just need a simple regex match this makes it nice instead of having to declare a whole function
-      const match = route.path.match(/^\/(.+)\/([gimsuy]{0,6})$/);
-      if (match) {
-        const [, pattern, flags] = match;
-        try {
-          const regex = new RegExp(pattern, flags);
-          if (!regex.test(context.path)) continue;
-        } catch {
-          // Invalid regex → treat as plain prefix
-          if (!context.path.startsWith(route.path)) continue;
-        }
-      } else {
-        // TODO treating path as a prefix is confusing.
-        //      Now that we have regex matching, we should treat it as exact match if it's not a regex
-        if (!context.path.startsWith(route.path)) continue;
-      }
-    }
-    // </todo>
-
-    if (!route.propsSchema || route.propsSchema.safeParse(props.props).success) {
-      if (!route.isMatch || route.isMatch(props.props, context)) {
-        matchingRoute = route;
-        break;
-      }
-    }
-  }
-
-  if (!matchingRoute) {
-    return undefined;
-  }
-
-  return <UILoader peersUIId={matchingRoute.peersUIId} props={props.props} />;
-};
-
-const UILoader = (args: { peersUIId: string; props?: Record<string, unknown> }) => {
-  if (!args.props) {
-    args.props = {};
-  }
-  const { props, peersUIId } = args;
-  const [lastReloadTime] = useObservable(packageReloaded);
-  props.__lastPackageReload = lastReloadTime;
-  // Keep the same loader ancestor after the bundle enters the cache. Replacing it
-  // on a path change would unmount the screen before its navigation guard can run.
-  return <UIAsyncLoader key={peersUIId} peersUIId={peersUIId} props={props} />;
-};
-
-const uiLoadingPromises: Record<string, Promise<void>> = {};
-
-async function resolveUiBundleFileId(pkg: IPackage): Promise<string | undefined> {
-  let pvId = pkg.activePackageVersionId;
-  try {
-    const pvar = packagePrefsVar(pkg.packageId);
-    await pvar.loadingPromise;
-    pvId = pvar()?.activePackageVersionId ?? pvId;
-  } catch {
-    /* use group default */
-  }
-  if (!pvId) return undefined;
-  try {
-    const pv = await PackageVersions().get(pvId);
-    return pv?.uiBundleFileId;
-  } catch {
-    return undefined;
-  }
-}
-
-function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
-  let importPromise: Promise<void> = uiLoadingPromises[pkg.packageId];
-  if (!importPromise || forceRefresh) {
-    const sTime = Date.now();
-    console.log(`loading ui bundle for ${pkg.name}`);
-    importPromise = (async () => {
-      const uiBundleFileId = await resolveUiBundleFileId(pkg);
-      if (!uiBundleFileId) {
-        return;
-      }
-
-      const bundleCode = await rpcServerCalls.getFileContents(uiBundleFileId);
-      if (bundleCode) {
-        const exportUIs = (peerUIs: IPeersPackageUIs) => {
-          peerUIs?.uis?.forEach((ui) => {
-            peersUIs[ui.peersUIId] = ui;
-          });
-        };
-        const bundleFunction = new Function("exportUIs", bundleCode);
-        await bundleFunction(exportUIs);
-      }
-      console.log(
-        `finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${bundleCode ? (bundleCode.length / 1000).toFixed(0) : "0"} KB`,
-      );
-    })().catch((err: unknown) => {
-      console.error(`Error while loading ui module for ${pkg.name}`, err);
-      throw err;
-    });
-    uiLoadingPromises[pkg.packageId] = importPromise;
-  }
-  return importPromise;
-}
-
-const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown> }) => {
-  const { peersUIId } = props;
-  const peersUI = peersUIs[peersUIId];
-  const [loaded, setLoaded] = React.useState(false);
-  const [loadError, setLoadError] = React.useState<Error | null>(null);
-
-  const allRoutes = _window.getPeersUIRoutes() as IPeersUIRoute[];
-  const uiPackageId = allRoutes.find((r) => r.peersUIId === peersUIId)?.packageId;
-
-  useObservable(allPackages);
-  const pkg = allPackages().find((p) => p.packageId === uiPackageId);
-
-  useEffect(() => {
-    if (!pkg || peersUIs[peersUIId]?.content) return;
-    const pkgRef = pkg;
-    setLoadError(null);
-    loadUIBundle(pkgRef)
-      .then(() => setLoaded(true))
-      .catch((error) => {
-        console.error(`Failed to load UI bundle for package ${pkgRef.name}:`, error);
-        setLoadError(error);
-      });
-  }, [peersUIId, pkg?.packageId, pkg?.name, pkg]);
-
-  if (!peersUI?.content && !pkg) {
-    return <div>Could not find package that owns peersUIId {peersUIId}</div>;
-  }
-
-  if (!peersUI?.content && loadError) {
-    return (
-      <div
-        style={{
-          padding: "20px",
-          border: "2px solid #ff6b6b",
-          borderRadius: "8px",
-          backgroundColor: "#fff5f5",
-          color: "#721c24",
-          fontFamily: "monospace",
-          margin: "10px 0",
-        }}
-      >
-        <h3 style={{ color: "#c53030", marginTop: 0 }}>Bundle Loading Error</h3>
-        <div style={{ marginBottom: "15px" }}>
-          <div>
-            <strong>Peers UI ID:</strong> {peersUIId}
-          </div>
-          <div>
-            <strong>Package:</strong> {pkg?.name}
-          </div>
-          <div>
-            <strong>Package ID:</strong> {pkg?.packageId}
-          </div>
-        </div>
-
-        <details style={{ marginBottom: "15px" }}>
-          <summary style={{ cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }}>
-            Error Details
-          </summary>
-          <div
-            style={{
-              backgroundColor: "#fed7d7",
-              padding: "10px",
-              borderRadius: "4px",
-              whiteSpace: "pre-wrap",
-              overflow: "auto",
-              maxHeight: "200px",
-            }}
-          >
-            <strong>Error:</strong> {loadError.message || "Unknown error"}
-            {loadError.stack && (
-              <>
-                <br />
-                <br />
-                <strong>Stack Trace:</strong>
-                <br />
-                {loadError.stack}
-              </>
-            )}
-          </div>
-        </details>
-
-        <button
-          type="button"
-          onClick={() => {
-            setLoadError(null);
-            setLoaded(false);
-            if (pkg) {
-              loadUIBundle(pkg, true)
-                .then(() => setLoaded(true))
-                .catch(setLoadError);
-            }
-          }}
-          style={{
-            marginTop: "15px",
-            padding: "8px 16px",
-            backgroundColor: "#c53030",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
-          }}
-        >
-          Retry Loading
-        </button>
-      </div>
-    );
-  }
-
-  if (!peersUI?.content && !loaded) {
-    return <LoadingIndicator />;
-  }
-
-  if (peersUI?.content) {
-    const _props = props.props;
-    try {
-      peersUI.propsSchema.parse(_props);
-      const Component = peersUI.content as React.ComponentType<Record<string, unknown>>;
-      return (
-        <UIErrorBoundary
-          peersUIId={peersUIId}
-          packageName={pkg?.name}
-          componentName={peersUI.content?.name}
-        >
-          <Component {..._props} />
-        </UIErrorBoundary>
-      );
-    } catch (parseError) {
-      return (
-        <div
-          style={{
-            padding: "20px",
-            border: "2px solid #ff6b6b",
-            borderRadius: "8px",
-            backgroundColor: "#fff5f5",
-            color: "#721c24",
-            fontFamily: "monospace",
-            margin: "10px 0",
-          }}
-        >
-          <h3 style={{ color: "#c53030", marginTop: 0 }}>Props Validation Error</h3>
-          <div style={{ marginBottom: "15px" }}>
-            <div>
-              <strong>Peers UI ID:</strong> {peersUIId}
-            </div>
-            <div>
-              <strong>Package:</strong> {pkg?.name}
-            </div>
-            <div>
-              <strong>Component:</strong> {peersUI.content?.name}
-            </div>
-          </div>
-
-          <div
-            style={{
-              backgroundColor: "#fed7d7",
-              padding: "10px",
-              borderRadius: "4px",
-              whiteSpace: "pre-wrap",
-              overflow: "auto",
-              maxHeight: "200px",
-              marginBottom: "15px",
-            }}
-          >
-            <strong>Error:</strong> Props did not match schema
-            <br />
-            <strong>Validation Error:</strong> {JSON.stringify(parseError, null, 2)}
-            <br />
-            <br />
-            <strong>Props:</strong> {JSON.stringify(toJSON(_props), null, 2)}
-          </div>
-        </div>
-      );
-    }
-  } else {
-    return <div>Component not found</div>;
-  }
-};
-
-type PeersRuntimeWindow = Window & {
-  registerPeersUIRoute: (route: IPeersUIRoute) => void;
-  getPeersUIRoutes: () => IPeersUIRoute[];
-  UIRouter: typeof UIRouter;
-  UILoader: typeof UILoader;
-};
-
-let _window: PeersRuntimeWindow;
-
-if (typeof window !== "undefined") {
-  _window = window as unknown as PeersRuntimeWindow;
-  if (!_window.registerPeersUIRoute) {
-    let uiRoutes: IPeersUIRoute[] = [];
-    Object.defineProperty(window, "registerPeersUIRoute", {
-      value: (route: IPeersUIRoute) => {
-        uiRoutes = uiRoutes.filter((r) => !(r.peersUIId === route.peersUIId));
-        uiRoutes.push(route);
-        uiRoutes = orderBy(uiRoutes, (r) => r.priority ?? 0, "desc");
-      },
-      writable: false,
-      configurable: false,
-    });
-    Object.defineProperty(window, "getPeersUIRoutes", {
-      value: () => {
-        return [...uiRoutes];
-      },
-      writable: false,
-      configurable: false,
-    });
-    Object.defineProperty(window, "UIRouter", {
-      value: UIRouter,
-      writable: false,
-      configurable: false,
-    });
-    Object.defineProperty(window, "UILoader", {
-      value: UILoader,
-      writable: false,
-      configurable: false,
-    });
-  }
-}
-
-/** Package id used when peers-ui registers its own built-in screens. */
-export const peersSystemPackageId = "000peers0system000package";
-
-/**
- * This is meant to make it easy to register components that are internal to peers
- */
-export async function registerInternalPeersUI(props: {
-  component: IPeersUI["content"];
-  /** Zod schemas may use a different zod instance than peers-sdk (duplicate resolution); keep loose. */
-  propsSchema?: any;
-  routes?: Omit<IPeersUIRoute, "peersUIId" | "packageId">[];
-  peersUIId?: string;
-}) {
-  const routeWin = window as Window & { registerPeersUIRoute?: (route: IPeersUIRoute) => void };
-  while (!routeWin.registerPeersUIRoute) {
-    console.log("Waiting for registerPeersUIRoute to be defined on the window object");
-    await new Promise((resolve) => setTimeout(resolve, 20));
-  }
-  const peersUIId = props.peersUIId || newid();
-
-  const peersUI: IPeersUI = {
-    peersUIId,
-    content: props.component,
-    propsSchema: props.propsSchema || zodAnyObject,
-  };
-  peersUIs[peersUIId] = peersUI;
-
-  if (props.routes?.length) {
-    props.routes.forEach((route) => {
-      _window.registerPeersUIRoute({
-        packageId: peersSystemPackageId,
-        peersUIId,
-        propsSchema: props.propsSchema,
-        ...route,
-      });
-    });
-  }
-}
-
-const reloadPackage = debounceByArgs(async (packageId: string) => {
-  const pkg = await Packages().get(packageId);
-  if (pkg) {
-    await loadUIBundle(pkg, true);
-    console.log(`reloaded UI bundle for ${pkg.name}`);
-    packageReloaded(Date.now());
-  }
-}, 200);
-
-const uiPrefsSubscribed = new Set<string>();
-
-function subscribeToPrefs(packageId: string) {
-  if (uiPrefsSubscribed.has(packageId)) return;
-  uiPrefsSubscribed.add(packageId);
-  const pvar = packagePrefsVar(packageId);
-  let lastPvId = pvar()?.activePackageVersionId;
-  pvar.subscribe((prefs) => {
-    const newPvId = prefs?.activePackageVersionId;
-    if (newPvId && newPvId !== lastPvId) {
-      lastPvId = newPvId;
-      reloadPackage(packageId);
-    }
-  });
-}
-
-getUserContext().then((_userContext) => {
-  for (const packageId of Object.keys(uiLoadingPromises)) {
-    subscribeToPrefs(packageId);
-  }
-
-  Packages().dataChanged.subscribe(async (evt) => {
-    const pkg = evt.dataObject;
-    const loadingPromise = uiLoadingPromises[pkg.packageId];
-    if (!loadingPromise) return;
-    subscribeToPrefs(pkg.packageId);
-    reloadPackage(pkg.packageId);
-  });
-});

package/src/utils.ts

@@ -1,95 +0,0 @@
-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 || "";
-}
-
-/** 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
-  return text.replace(/<[@$]([^:]+):([^:]+):([^>]+)>/g, (_match, _type, name, _id) => {
-    return name.replace(/_/g, " ");
-  });
-}
-
-/** 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
-  // return sanitizedValue.replace(/\<p\>\<br\>\<\/p\>/ig, '').trim()
-
-  const singleBlankLine = "<p><br></p>";
-  const doubleBlankLine = singleBlankLine + singleBlankLine;
-
-  // collapse lots of blank lines into one
-  while (sanitizedValue.includes(doubleBlankLine)) {
-    sanitizedValue = sanitizedValue.replaceAll(doubleBlankLine, singleBlankLine);
-  }
-
-  // remove trailing blank line
-  if (sanitizedValue.endsWith(singleBlankLine)) {
-    sanitizedValue = sanitizedValue.substr(0, sanitizedValue.length - singleBlankLine.length);
-  }
-  return sanitizedValue;
-}
-
-// 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 = [
-    "process",
-    "global", //,'setTimeout','setInterval','setImmediate','clearImmediate','clearInterval','clearTimeout'
-  ];
-  const utils = module.exports;
-  const refNames = ["utils", "utils_1", "Promise", "console"];
-  const refValues = [utils, utils, Promise, console];
-  _.keys(externalReferences).forEach((key) => {
-    refNames.push(key);
-    refValues.push(externalReferences[key]);
-  });
-  const compiledJs = AsyncFunction.apply(null, [
-    ...refNames,
-    ...hideGlobals,
-    `"use strict";\n${jsCode}`,
-  ]);
-  return compiledJs.apply(null, refValues);
-}
-
-// export type IObjectMatch<T> = {
-//   [key in keyof T]?: RegExp | string | number | boolean
-// }
-
-// export function objectMatch<T>(value: T, match: IObjectMatch<T>): boolean {
-//   for (const [k, _m] of Object.entries(match)) {
-//     const m = _m as any;
-//     if (m === undefined) continue; // NOTE we are not trying to match undefined values
-//     // NOTE null will match null or undefined
-//     if (m === null && (value[k] === null || value[k] === undefined)) {
-//       return true
-//     }
-//     if (_.isRegExp(m)) {
-//       if (!String(value[k]).match(m)) {
-//         return false;
-//       }
-//     } else if (m != value[k]) {
-//       return false;
-//     }
-//   }
-//   return true;
-// }
-
-// @ts-expect-error
-if (typeof window !== "undefined") window.utils = module.exports;