@dxos/app-framework 0.3.11-main.d7d4c52 → 0.3.11-main.da09c3c

package/src/plugins/PluginHost/PluginHost.tsx

@@ -3,20 +3,22 @@
 //
 
 import { shallow } from 'deepsignal/react';
-import React, { useEffect, type FC, type PropsWithChildren, type ReactNode } from 'react';
+import React, { useEffect, type FC, type PropsWithChildren, type ReactNode, useState } from 'react';
 
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 
 import { type PluginContext, PluginProvider } from './PluginContext';
 import { type Plugin, type PluginDefinition, type PluginProvides } from './plugin';
+import { ErrorBoundary } from '../SurfacePlugin';
 
 export type BootstrapPluginsParams = {
   order: PluginDefinition['meta'][];
   plugins: Record<string, () => Promise<PluginDefinition>>;
   core?: string[];
   defaults?: string[];
-  fallback?: ReactNode;
+  fallback?: ErrorBoundary['props']['fallback'];
+  placeholder?: ReactNode;
 };
 
 export type PluginHostProvides = {
@@ -36,7 +38,8 @@ export const PluginHost = ({
   plugins: definitions,
   core = [],
   defaults = [],
-  fallback = null,
+  fallback = DefaultFallback,
+  placeholder = null,
 }: BootstrapPluginsParams): PluginDefinition<PluginHostProvides> => {
   const state = new LocalStorageStore<PluginContext>(PLUGIN_HOST, {
     ready: false,
@@ -63,65 +66,97 @@ export const PluginHost = ({
       plugins: state.values,
       context: ({ children }) => <PluginProvider value={state.values}>{children}</PluginProvider>,
       root: () => {
-        useEffect(() => {
-          log('initializing plugins', { enabled: state.values.enabled });
-          const timeout = setTimeout(async () => {
-            const enabledIds = [...core, ...state.values.enabled].sort((a, b) => {
-              const indexA = order.findIndex(({ id }) => id === a);
-              const indexB = order.findIndex(({ id }) => id === b);
-              return indexA - indexB;
-            });
-
-            const enabled = await Promise.all(
-              enabledIds
-                .map((id) => definitions[id])
-                // If local storage indicates a plugin is enabled, but it is not available, ignore it.
-                .filter((definition): definition is () => Promise<PluginDefinition> => Boolean(definition))
-                .map((definition) => definition()),
-            );
-
-            const plugins = await Promise.all(
-              enabled.map(async (definition) => {
-                const plugin = await initializePlugin(definition).catch((err) => {
-                  console.error('Failed to initialize plugin:', definition.meta.id, err);
-                  return undefined;
-                });
-                return plugin;
-              }),
-            ).then((plugins) => plugins.filter((plugin): plugin is Plugin => Boolean(plugin)));
-            log('plugins initialized', { plugins });
-
-            await Promise.all(
-              enabled.map(async (pluginDefinition) => {
-                await pluginDefinition.ready?.(plugins);
-              }),
-            );
-            log('plugins ready', { plugins });
-
-            state.values.plugins = shallow(plugins);
-            state.values.ready = true;
-          });
-
-          return () => {
-            clearTimeout(timeout);
-            state.values.ready = false;
-            // TODO(wittjosiah): Does this ever need to be called prior to having dynamic plugins?
-            // void Promise.all(enabled.map((definition) => definition.unload?.()));
-          };
-        }, []);
-
-        if (!state.values.ready) {
-          return <>{fallback}</>;
-        }
-
-        const ComposedContext = composeContext(state.values.plugins);
-
-        return <ComposedContext>{rootComponents(state.values.plugins)}</ComposedContext>;
+        return (
+          <ErrorBoundary fallback={fallback}>
+            <Root order={order} core={core} definitions={definitions} state={state.values} placeholder={placeholder} />
+          </ErrorBoundary>
+        );
       },
     },
   };
 };
 
+const DefaultFallback = ({ error }: { error: Error }) => {
+  return (
+    <div style={{ padding: '1rem' }}>
+      {/* TODO(wittjosiah): Link to docs for replacing default. */}
+      <h1 style={{ fontSize: '1.2rem', fontWeight: 700, margin: '0.5rem 0' }}>{error.message}</h1>
+      <pre>{error.stack}</pre>
+    </div>
+  );
+};
+
+type RootProps = {
+  order: PluginDefinition['meta'][];
+  state: PluginContext;
+  definitions: Record<string, () => Promise<PluginDefinition>>;
+  core: string[];
+  placeholder: ReactNode;
+};
+
+const Root = ({ order, core: corePluginIds, definitions, state, placeholder }: RootProps) => {
+  const [error, setError] = useState<unknown>();
+
+  useEffect(() => {
+    log('initializing plugins', { enabled: state.enabled });
+    const timeout = setTimeout(async () => {
+      try {
+        const enabledIds = [...corePluginIds, ...state.enabled].sort((a, b) => {
+          const indexA = order.findIndex(({ id }) => id === a);
+          const indexB = order.findIndex(({ id }) => id === b);
+          return indexA - indexB;
+        });
+
+        const enabled = await Promise.all(
+          enabledIds
+            .map((id) => definitions[id])
+            // If local storage indicates a plugin is enabled, but it is not available, ignore it.
+            .filter((definition): definition is () => Promise<PluginDefinition> => Boolean(definition))
+            .map((definition) => definition()),
+        );
+
+        const plugins = await Promise.all(
+          enabled.map(async (definition) => {
+            const plugin = await initializePlugin(definition).catch((err) => {
+              console.error('Failed to initialize plugin:', definition.meta.id, err);
+              return undefined;
+            });
+            return plugin;
+          }),
+        ).then((plugins) => plugins.filter((plugin): plugin is Plugin => Boolean(plugin)));
+        log('plugins initialized', { plugins });
+
+        await Promise.all(enabled.map((pluginDefinition) => pluginDefinition.ready?.(plugins)));
+        log('plugins ready', { plugins });
+
+        state.plugins = shallow(plugins);
+        state.ready = true;
+      } catch (err) {
+        setError(err);
+      }
+    });
+
+    return () => {
+      clearTimeout(timeout);
+      state.ready = false;
+      // TODO(wittjosiah): Does this ever need to be called prior to having dynamic plugins?
+      // void Promise.all(enabled.map((definition) => definition.unload?.()));
+    };
+  }, []);
+
+  if (error) {
+    throw error;
+  }
+
+  if (!state.ready) {
+    return <>{placeholder}</>;
+  }
+
+  const ComposedContext = composeContext(state.plugins);
+
+  return <ComposedContext>{rootComponents(state.plugins)}</ComposedContext>;
+};
+
 /**
  * Resolve a `PluginDefinition` into a fully initialized `Plugin`.
  */

package/src/plugins/PluginHost/plugin.ts

@@ -99,6 +99,7 @@ export type PluginDefinition<TProvides = {}, TInitializeProvides = {}> = Omit<Pl
    *
    * @param plugins All plugins which successfully initialized.
    */
+  // TODO(wittjosiah): Rename `ready` to a verb?
   ready?: (plugins: Plugin[]) => Promise<void>;
 
   /**