@dxos/app-framework 0.3.11-main.bd26370 → 0.3.11-main.c86e105

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>;
 
   /**

package/src/plugins/common/layout.ts

@@ -65,6 +65,7 @@ export enum LayoutAction {
   OPEN_POPOVER = `${LAYOUT_ACTION}/open-popover`,
   CLOSE_POPOVER = `${LAYOUT_ACTION}/close-popover`,
   ACTIVATE = `${LAYOUT_ACTION}/activate`,
+  FOCUS = `${LAYOUT_ACTION}/focus`,
 }
 
 /**

package/dist/lib/browser/chunk-C2K6M6WC.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/plugins/IntentPlugin/provides.ts", "../../../src/plugins/IntentPlugin/IntentContext.tsx", "../../../src/plugins/IntentPlugin/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type IntentContext } from './IntentContext';\nimport { type Intent } from './intent';\nimport { type Plugin } from '../PluginHost';\n\nexport type IntentResolverProvides = {\n  intent: {\n    resolver: (intent: Intent, plugins: Plugin[]) => any;\n  };\n};\n\nexport type IntentPluginProvides = {\n  intent: IntentContext;\n};\n\nexport const parseIntentPlugin = (plugin: Plugin) =>\n  (plugin.provides as any).intent?.dispatch ? (plugin as Plugin<IntentPluginProvides>) : undefined;\n\nexport const parseIntentResolverPlugin = (plugin: Plugin) =>\n  (plugin.provides as any).intent?.resolver ? (plugin as Plugin<IntentResolverProvides>) : undefined;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Context, createContext, useContext, type Provider } from 'react';\n\nimport { type DispatchIntent } from './intent';\n\nexport type IntentContext = {\n  dispatch: DispatchIntent;\n};\n\nconst IntentContext: Context<IntentContext> = createContext<IntentContext>({ dispatch: async () => {} });\n\nexport const useIntent = () => useContext(IntentContext);\n\nexport const IntentProvider: Provider<IntentContext> = IntentContext.Provider;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nconst IntentMeta = {\n  id: 'dxos.org/plugin/intent',\n};\n\nexport default IntentMeta;\n"],
-  "mappings": ";AAkBO,IAAMA,oBAAoB,CAACC,WAC/BA,OAAOC,SAAiBC,QAAQC,WAAYH,SAA0CI;AAElF,IAAMC,4BAA4B,CAACL,WACvCA,OAAOC,SAAiBC,QAAQI,WAAYN,SAA4CI;;;AClB3F,SAAuBG,eAAeC,kBAAiC;AAQvE,IAAMC,gBAAwCC,8BAA6B;EAAEC,UAAU,YAAA;EAAa;AAAE,CAAA;AAE/F,IAAMC,YAAY,MAAMC,WAAWJ,aAAAA;AAEnC,IAAMK,iBAA0CL,cAAcM;;;ACZrE,IAAMC,aAAa;EACjBC,IAAI;AACN;AAEA,IAAA,eAAeD;",
-  "names": ["parseIntentPlugin", "plugin", "provides", "intent", "dispatch", "undefined", "parseIntentResolverPlugin", "resolver", "createContext", "useContext", "IntentContext", "createContext", "dispatch", "useIntent", "useContext", "IntentProvider", "Provider", "IntentMeta", "id"]
-}

package/dist/lib/browser/plugin-CBPJO5NB.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/plugins/IntentPlugin/plugin.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { deepSignal } from 'deepsignal/react';\nimport React from 'react';\n\nimport { type IntentContext, IntentProvider } from './IntentContext';\nimport type { Intent } from './intent';\nimport IntentMeta from './meta';\nimport { type IntentPluginProvides, type IntentResolverProvides, parseIntentResolverPlugin } from './provides';\nimport type { PluginDefinition } from '../PluginHost';\nimport { filterPlugins, findPlugin } from '../helpers';\n\n/**\n * Allows plugins to register intent handlers and routes sent intents to the appropriate plugin.\n * Inspired by https://developer.android.com/reference/android/content/Intent.\n */\nconst IntentPlugin = (): PluginDefinition<IntentPluginProvides> => {\n  const state = deepSignal<IntentContext>({ dispatch: async () => {} });\n\n  return {\n    meta: IntentMeta,\n    ready: async (plugins) => {\n      // Dispatch intent to associated plugin.\n      const dispatch = async (intent: Intent) => {\n        if (intent.plugin) {\n          const plugin = findPlugin<IntentResolverProvides>(plugins, intent.plugin);\n          return plugin?.provides.intent.resolver(intent, plugins);\n        }\n\n        // Return resolved value from first plugin that handles the intent.\n        for (const plugin of filterPlugins(plugins, parseIntentResolverPlugin)) {\n          const result = await plugin.provides.intent.resolver(intent, plugins);\n          if (result) {\n            return result;\n          }\n        }\n      };\n\n      // Sequentially dispatch array of invents.\n      state.dispatch = async (intentOrArray) => {\n        let result: any = null;\n        for (const intent of Array.isArray(intentOrArray) ? intentOrArray : [intentOrArray]) {\n          const data = intent.data ? { ...result, ...intent.data } : result;\n          result = await dispatch({ ...intent, data });\n        }\n        return result;\n      };\n    },\n    provides: {\n      intent: state,\n      context: ({ children }) => <IntentProvider value={state}>{children}</IntentProvider>,\n    },\n  };\n};\n\nexport default IntentPlugin;\n"],
-  "mappings": ";;;;;;;;;;;AAIA,SAASA,kBAAkB;AAC3B,OAAOC,WAAW;AAalB,IAAMC,eAAe,MAAA;AACnB,QAAMC,QAAQC,WAA0B;IAAEC,UAAU,YAAA;IAAa;EAAE,CAAA;AAEnE,SAAO;IACLC,MAAMC;IACNC,OAAO,OAAOC,YAAAA;AAEZ,YAAMJ,WAAW,OAAOK,WAAAA;AACtB,YAAIA,OAAOC,QAAQ;AACjB,gBAAMA,SAASC,WAAmCH,SAASC,OAAOC,MAAM;AACxE,iBAAOA,QAAQE,SAASH,OAAOI,SAASJ,QAAQD,OAAAA;QAClD;AAGA,mBAAWE,UAAUI,cAAcN,SAASO,yBAAAA,GAA4B;AACtE,gBAAMC,SAAS,MAAMN,OAAOE,SAASH,OAAOI,SAASJ,QAAQD,OAAAA;AAC7D,cAAIQ,QAAQ;AACV,mBAAOA;UACT;QACF;MACF;AAGAd,YAAME,WAAW,OAAOa,kBAAAA;AACtB,YAAID,SAAc;AAClB,mBAAWP,UAAUS,MAAMC,QAAQF,aAAAA,IAAiBA,gBAAgB;UAACA;WAAgB;AACnF,gBAAMG,OAAOX,OAAOW,OAAO;YAAE,GAAGJ;YAAQ,GAAGP,OAAOW;UAAK,IAAIJ;AAC3DA,mBAAS,MAAMZ,SAAS;YAAE,GAAGK;YAAQW;UAAK,CAAA;QAC5C;AACA,eAAOJ;MACT;IACF;IACAJ,UAAU;MACRH,QAAQP;MACRmB,SAAS,CAAC,EAAEC,SAAQ,MAAO,sBAAA,cAACC,gBAAAA;QAAeC,OAAOtB;SAAQoB,QAAAA;IAC5D;EACF;AACF;AAEA,IAAA,iBAAerB;",
-  "names": ["deepSignal", "React", "IntentPlugin", "state", "deepSignal", "dispatch", "meta", "IntentMeta", "ready", "plugins", "intent", "plugin", "findPlugin", "provides", "resolver", "filterPlugins", "parseIntentResolverPlugin", "result", "intentOrArray", "Array", "isArray", "data", "context", "children", "IntentProvider", "value"]
-}

package/dist/lib/node/chunk-BOQBLWMX.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/plugins/IntentPlugin/provides.ts", "../../../src/plugins/IntentPlugin/IntentContext.tsx", "../../../src/plugins/IntentPlugin/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type IntentContext } from './IntentContext';\nimport { type Intent } from './intent';\nimport { type Plugin } from '../PluginHost';\n\nexport type IntentResolverProvides = {\n  intent: {\n    resolver: (intent: Intent, plugins: Plugin[]) => any;\n  };\n};\n\nexport type IntentPluginProvides = {\n  intent: IntentContext;\n};\n\nexport const parseIntentPlugin = (plugin: Plugin) =>\n  (plugin.provides as any).intent?.dispatch ? (plugin as Plugin<IntentPluginProvides>) : undefined;\n\nexport const parseIntentResolverPlugin = (plugin: Plugin) =>\n  (plugin.provides as any).intent?.resolver ? (plugin as Plugin<IntentResolverProvides>) : undefined;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Context, createContext, useContext, type Provider } from 'react';\n\nimport { type DispatchIntent } from './intent';\n\nexport type IntentContext = {\n  dispatch: DispatchIntent;\n};\n\nconst IntentContext: Context<IntentContext> = createContext<IntentContext>({ dispatch: async () => {} });\n\nexport const useIntent = () => useContext(IntentContext);\n\nexport const IntentProvider: Provider<IntentContext> = IntentContext.Provider;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nconst IntentMeta = {\n  id: 'dxos.org/plugin/intent',\n};\n\nexport default IntentMeta;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;ACIA,mBAAuE;ADchE,IAAMA,oBAAoB,CAACC,WAC/BA,OAAOC,SAAiBC,QAAQC,WAAYH,SAA0CI;AAElF,IAAMC,4BAA4B,CAACL,WACvCA,OAAOC,SAAiBC,QAAQI,WAAYN,SAA4CI;ACV3F,IAAMG,gBAAwCC,gDAA6B;EAAEL,UAAU,YAAA;EAAa;AAAE,CAAA;AAE/F,IAAMM,YAAY,UAAMC,yBAAWH,aAAAA;AAEnC,IAAMI,iBAA0CJ,cAAcK;ACZrE,IAAMC,aAAa;EACjBC,IAAI;AACN;AAEA,IAAA,eAAeD;",
-  "names": ["parseIntentPlugin", "plugin", "provides", "intent", "dispatch", "undefined", "parseIntentResolverPlugin", "resolver", "IntentContext", "createContext", "useIntent", "useContext", "IntentProvider", "Provider", "IntentMeta", "id"]
-}

package/dist/lib/node/plugin-WDNRX2SR.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/plugins/IntentPlugin/plugin.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { deepSignal } from 'deepsignal/react';\nimport React from 'react';\n\nimport { type IntentContext, IntentProvider } from './IntentContext';\nimport type { Intent } from './intent';\nimport IntentMeta from './meta';\nimport { type IntentPluginProvides, type IntentResolverProvides, parseIntentResolverPlugin } from './provides';\nimport type { PluginDefinition } from '../PluginHost';\nimport { filterPlugins, findPlugin } from '../helpers';\n\n/**\n * Allows plugins to register intent handlers and routes sent intents to the appropriate plugin.\n * Inspired by https://developer.android.com/reference/android/content/Intent.\n */\nconst IntentPlugin = (): PluginDefinition<IntentPluginProvides> => {\n  const state = deepSignal<IntentContext>({ dispatch: async () => {} });\n\n  return {\n    meta: IntentMeta,\n    ready: async (plugins) => {\n      // Dispatch intent to associated plugin.\n      const dispatch = async (intent: Intent) => {\n        if (intent.plugin) {\n          const plugin = findPlugin<IntentResolverProvides>(plugins, intent.plugin);\n          return plugin?.provides.intent.resolver(intent, plugins);\n        }\n\n        // Return resolved value from first plugin that handles the intent.\n        for (const plugin of filterPlugins(plugins, parseIntentResolverPlugin)) {\n          const result = await plugin.provides.intent.resolver(intent, plugins);\n          if (result) {\n            return result;\n          }\n        }\n      };\n\n      // Sequentially dispatch array of invents.\n      state.dispatch = async (intentOrArray) => {\n        let result: any = null;\n        for (const intent of Array.isArray(intentOrArray) ? intentOrArray : [intentOrArray]) {\n          const data = intent.data ? { ...result, ...intent.data } : result;\n          result = await dispatch({ ...intent, data });\n        }\n        return result;\n      };\n    },\n    provides: {\n      intent: state,\n      context: ({ children }) => <IntentProvider value={state}>{children}</IntentProvider>,\n    },\n  };\n};\n\nexport default IntentPlugin;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mBAA2B;AAC3B,IAAAA,gBAAkB;AAalB,IAAMC,eAAe,MAAA;AACnB,QAAMC,YAAQC,yBAA0B;IAAEC,UAAU,YAAA;IAAa;EAAE,CAAA;AAEnE,SAAO;IACLC,MAAMC;IACNC,OAAO,OAAOC,YAAAA;AAEZ,YAAMJ,WAAW,OAAOK,WAAAA;AACtB,YAAIA,OAAOC,QAAQ;AACjB,gBAAMA,aAASC,kCAAmCH,SAASC,OAAOC,MAAM;AACxE,iBAAOA,QAAQE,SAASH,OAAOI,SAASJ,QAAQD,OAAAA;QAClD;AAGA,mBAAWE,cAAUI,qCAAcN,SAASO,+CAAAA,GAA4B;AACtE,gBAAMC,SAAS,MAAMN,OAAOE,SAASH,OAAOI,SAASJ,QAAQD,OAAAA;AAC7D,cAAIQ,QAAQ;AACV,mBAAOA;UACT;QACF;MACF;AAGAd,YAAME,WAAW,OAAOa,kBAAAA;AACtB,YAAID,SAAc;AAClB,mBAAWP,UAAUS,MAAMC,QAAQF,aAAAA,IAAiBA,gBAAgB;UAACA;WAAgB;AACnF,gBAAMG,OAAOX,OAAOW,OAAO;YAAE,GAAGJ;YAAQ,GAAGP,OAAOW;UAAK,IAAIJ;AAC3DA,mBAAS,MAAMZ,SAAS;YAAE,GAAGK;YAAQW;UAAK,CAAA;QAC5C;AACA,eAAOJ;MACT;IACF;IACAJ,UAAU;MACRH,QAAQP;MACRmB,SAAS,CAAC,EAAEC,SAAQ,MAAO,8BAAAC,QAAA,cAACC,sCAAAA;QAAeC,OAAOvB;SAAQoB,QAAAA;IAC5D;EACF;AACF;AAEA,IAAA,iBAAerB;",
-  "names": ["import_react", "IntentPlugin", "state", "deepSignal", "dispatch", "meta", "IntentMeta", "ready", "plugins", "intent", "plugin", "findPlugin", "provides", "resolver", "filterPlugins", "parseIntentResolverPlugin", "result", "intentOrArray", "Array", "isArray", "data", "context", "children", "React", "IntentProvider", "value"]
-}