@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,497 @@
+import { debounceByArgs, IPackage, IPeersPackageUIs, IPeersUI, IPeersUIRoute, newid, Packages, rpcServerCalls, toJSON, 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 
+            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, any>;
+}
+
+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, any> }) => {
+  const { props, peersUIId } = args;
+  const [lastReloadTime] = useObservable(packageReloaded);
+  args.props.__lastPackageReload = lastReloadTime;
+  // check if peersUIId maps to an in-memory react component
+  const peersUI = peersUIs[peersUIId];
+  if (peersUI?.content) {
+    const parseResult = peersUI.propsSchema.safeParse(props);
+    if (!parseResult.success) {
+      console.error('props did not match schema', { props, schema: peersUI.propsSchema, errors: parseResult.error });
+      return (
+        <div>
+          <pre>
+            Peers UI could not be loaded <br />
+            peersUIId: {peersUI.peersUIId} <br />
+            Component name: {peersUI.content?.name} <br />
+            Props did not match schema <br />
+            Errors: {JSON.stringify(parseResult.error, null, 2)} <br /><br />
+            Props {JSON.stringify(toJSON(props), null, 2)}<br />
+          </pre>
+        </div>
+      );
+    }
+    const Component = peersUI.content as React.ComponentType<any>;
+    return (
+      <UIErrorBoundary 
+        peersUIId={peersUIId}
+        componentName={peersUI.content?.name}
+      >
+        <Component {...args.props} />
+      </UIErrorBoundary>
+    );
+  }
+
+  return <UIAsyncLoader {...args} />;
+}
+
+const uiLoadingPromises: Record<string, Promise<any>> = {};
+function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
+  // Dynamically import the bundle
+  let importPromise: Promise<any> = uiLoadingPromises[pkg.packageId];
+  if (!importPromise || forceRefresh) {
+    console.log(`loading ui bundle for ${pkg.name}`);
+    importPromise = new Promise<void>(async (resolve, reject) => {
+      try {
+        let bundleCode = '';
+        if (pkg.uiBundleFileId) {
+          bundleCode = await rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+        }
+        if (bundleCode) {
+          const exportUIs = (peerUIs: IPeersPackageUIs) => {
+            // TODO maybe add packageId that this came from
+            peerUIs?.uis?.forEach(ui => {
+              peersUIs[ui.peersUIId] = ui;
+            });
+          }
+          const bundleFunction = new Function('exportUIs', bundleCode);
+          await bundleFunction(exportUIs);          
+        }
+        resolve();
+      } catch (err) {
+        console.error(`Error while loading ui module for ${pkg.name}`, err);
+        reject(err);
+      }
+    });
+    uiLoadingPromises[pkg.packageId] = importPromise;
+  }
+  return importPromise;
+}
+
+const UIAsyncLoader = (props: { peersUIId: string, props: Record<string, any> }) => {
+  const { peersUIId } = props;
+  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) return;
+    setLoadError(null);
+    loadUIBundle(pkg)
+      .then(() => setLoaded(true))
+      .catch((error) => {
+        console.error(`Failed to load UI bundle for package ${pkg.name}:`, error);
+        setLoadError(error);
+      });
+  }, [pkg?.packageId]);
+
+  if (!pkg) {
+    return <div>Could not find package that owns peersUIId {peersUIId}</div>;
+  }
+
+  if (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 
+          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 (!loaded) {
+    return (<LoadingIndicator />);
+  }
+
+  const peersUI = peersUIs[peersUIId];
+  if (peersUI?.content) {
+    const _props = { ...props, uiVar: undefined };
+    try {
+      peersUI.propsSchema.parse(_props);
+      const Component = peersUI.content as React.ComponentType<any>;
+      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>;
+  }
+}
+
+let _window: {
+  registerPeersUIRoute: (route: IPeersUIRoute) => Promise<void>,
+  getPeersUIRoutes: () => IPeersUIRoute[],
+  UIRouter: typeof UIRouter,
+  UILoader: typeof UILoader,
+};
+
+if (typeof window !== 'undefined') {
+  _window = window as any;
+  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
+    });
+  }
+}
+
+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);
+
+Packages().dataChanged.subscribe(async evt => {
+  const pkg = evt.dataObject;
+  const loadingPromise = uiLoadingPromises[pkg.packageId];
+  if (!loadingPromise) return;
+  reloadPackage(pkg.packageId);
+})
+
+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: React.ComponentType<any>,
+  propsSchema?: any,
+  routes?: Omit<IPeersUIRoute, 'peersUIId' | 'packageId'>[];
+  peersUIId?: string;
+}) {
+  while (!(window as any).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,
+      });
+    });
+  }
+}