@dxos/app-framework 0.6.12 → 0.6.13-main.548ca8d

package/src/plugins/PluginHost/PluginHost.tsx

@@ -2,19 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type JSX, type FC, type PropsWithChildren, type ReactNode, useEffect, useState } from 'react';
+import React, { type ReactNode } from 'react';
 
 import { LocalStorageStore } from '@dxos/local-storage';
-import { log } from '@dxos/log';
 
+import { PluginContainer } from './PluginContainer';
 import { type PluginContext, PluginProvider } from './PluginContext';
-import { type Plugin, type PluginDefinition, type PluginProvides } from './plugin';
+import { type Plugin, type PluginDefinition, type PluginMeta } from './plugin';
 import { ErrorBoundary } from '../SurfacePlugin';
 
 export type BootstrapPluginsParams = {
-  order: PluginDefinition['meta'][];
   plugins: Record<string, () => Promise<PluginDefinition>>;
-  core?: string[];
+  // Ordered list of plugins.
+  meta: PluginMeta[];
+  core: string[];
   defaults?: string[];
   fallback?: ErrorBoundary['props']['fallback'];
   placeholder?: ReactNode;
@@ -33,9 +34,9 @@ const PLUGIN_HOST = 'dxos.org/plugin/host';
  * Bootstraps an application by initializing plugins and rendering root components.
  */
 export const PluginHost = ({
-  order,
-  plugins: definitions,
-  core = [],
+  plugins,
+  meta,
+  core,
   defaults = [],
   fallback = DefaultFallback,
   placeholder = null,
@@ -45,7 +46,7 @@ export const PluginHost = ({
     core,
     enabled: [...defaults],
     plugins: [],
-    available: order.filter(({ id }) => !core.includes(id)),
+    available: meta.filter(({ id }) => !core.includes(id)),
     setPlugin: (id: string, enabled: boolean) => {
       if (enabled) {
         state.values.enabled.push(id);
@@ -56,6 +57,7 @@ export const PluginHost = ({
     },
   });
 
+  // Register and load values.
   state.prop({ key: 'enabled', type: LocalStorageStore.json<string[]>() });
 
   return {
@@ -65,11 +67,13 @@ export const PluginHost = ({
     },
     provides: {
       plugins: state.values,
-      context: ({ children }) => <PluginProvider value={state.values}>{children}</PluginProvider>,
+      context: ({ children }) => {
+        return <PluginProvider value={state.values}>{children}</PluginProvider>;
+      },
       root: () => {
         return (
           <ErrorBoundary fallback={fallback}>
-            <Root order={order} core={core} definitions={definitions} state={state.values} placeholder={placeholder} />
+            <PluginContainer plugins={plugins} core={core} state={state.values} placeholder={placeholder} />
           </ErrorBoundary>
         );
       },
@@ -77,6 +81,9 @@ export const PluginHost = ({
   };
 };
 
+/**
+ * Fallback does not use tailwind or theme.
+ */
 const DefaultFallback = ({ error }: { error: Error }) => {
   return (
     <div style={{ padding: '1rem' }}>
@@ -86,113 +93,3 @@ const DefaultFallback = ({ error }: { error: Error }) => {
     </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) => {
-              log.error('Failed to initialize plugin:', { id: 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 = 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`.
- */
-export const initializePlugin = async <T, U>(pluginDefinition: PluginDefinition<T, U>): Promise<Plugin<T & U>> => {
-  const provides = await pluginDefinition.initialize?.();
-  return {
-    ...pluginDefinition,
-    provides: {
-      ...pluginDefinition.provides,
-      ...provides,
-    } as PluginProvides<T & U>,
-  };
-};
-
-const rootComponents = (plugins: Plugin[]) => {
-  return plugins
-    .map((plugin) => {
-      const Component = plugin.provides.root;
-      if (Component) {
-        return <Component key={plugin.meta.id} />;
-      } else {
-        return null;
-      }
-    })
-    .filter((node): node is JSX.Element => Boolean(node));
-};
-
-const composeContext = (plugins: Plugin[]) => {
-  return compose(plugins.map((p) => p.provides.context!).filter(Boolean));
-};
-
-const compose = (contexts: FC<PropsWithChildren>[]) => {
-  return [...contexts].reduce((Acc, Next) => ({ children }) => (
-    <Acc>
-      <Next>{children}</Next>
-    </Acc>
-  ));
-};

package/src/plugins/PluginHost/plugin.test.ts

@@ -2,11 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { expect } from 'chai';
 import { type FC } from 'react';
+import { describe, expect, test } from 'vitest';
 
 import { log } from '@dxos/log';
-import { describe, test } from '@dxos/test';
 
 import { type Plugin } from './plugin';
 

package/src/plugins/PluginHost/plugin.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import type { IconProps } from '@phosphor-icons/react';
 import type { FC, PropsWithChildren } from 'react';
 
 /**
@@ -21,60 +20,56 @@ export type PluginProvides<TProvides> = TProvides & {
   root?: FC<PropsWithChildren>;
 };
 
+export type PluginMeta = {
+  /**
+   * Globally unique ID.
+   *
+   * Expected to be in the form of a valid URL.
+   *
+   * @example dxos.org/plugin/example
+   */
+  id: string;
+
+  /**
+   * Short ID for use in URLs.
+   *
+   * NOTE: This is especially experimental and likely to change.
+   */
+  // TODO(wittjosiah): How should these be managed?
+  shortId?: string;
+
+  /**
+   * Human-readable name.
+   */
+  name?: string;
+
+  /**
+   * Short description of plugin functionality.
+   */
+  description?: string;
+
+  /**
+   * URL of home page.
+   */
+  homePage?: string;
+
+  /**
+   * Tags to help categorize the plugin.
+   */
+  tags?: string[];
+
+  /**
+   * A grep-able symbol string which can be resolved to an icon asset by @ch-ui/icons, via @ch-ui/vite-plugin-icons.
+   */
+  icon?: string;
+};
+
 /**
  * A unit of containment of modular functionality that can be provided to an application.
  * Plugins provide things like components, state, actions, etc. to the application.
  */
 export type Plugin<TProvides = {}> = {
-  meta: {
-    /**
-     * Globally unique ID.
-     *
-     * Expected to be in the form of a valid URL.
-     *
-     * @example dxos.org/plugin/example
-     */
-    id: string;
-
-    /**
-     * Short ID for use in URLs.
-     *
-     * NOTE: This is especially experimental and likely to change.
-     */
-    // TODO(wittjosiah): How should these be managed?
-    shortId?: string;
-
-    /**
-     * Human-readable name.
-     */
-    name?: string;
-
-    /**
-     * Short description of plugin functionality.
-     */
-    description?: string;
-
-    /**
-     * URL of home page.
-     */
-    homePage?: string;
-
-    /**
-     * Tags to help categorize the plugin.
-     */
-    tags?: string[];
-
-    /**
-     * Component to render icon for the plugin when displayed in a list.
-     * @deprecated
-     */
-    iconComponent?: FC<IconProps>;
-
-    /**
-     * A grep-able symbol string which can be resolved to an icon asset by @ch-ui/icons, via @ch-ui/vite-plugin-icons.
-     */
-    iconSymbol?: string;
-  };
+  meta: PluginMeta;
 
   /**
    * Capabilities provided by the plugin.
@@ -114,8 +109,6 @@ export type PluginDefinition<TProvides = {}, TInitializeProvides = {}> = Omit<Pl
   unload?: () => Promise<void>;
 };
 
-export const pluginMeta = (meta: Plugin['meta']) => meta;
-
 type LazyPlugin<T> = () => Promise<{ default: (props: T) => PluginDefinition }>;
 
 export namespace Plugin {

package/src/plugins/common/navigation.ts

@@ -2,10 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema as S } from '@effect/schema';
 import { z } from 'zod';
 
-import { S } from '@dxos/echo-schema';
-
 import type { IntentData } from '../IntentPlugin';
 import type { Plugin } from '../PluginHost';
 
@@ -19,7 +18,6 @@ export const SLUG_COLLECTION_INDICATOR = '';
 const LayoutEntrySchema = S.mutable(S.Struct({ id: S.String, path: S.optional(S.String) }));
 export type LayoutEntry = S.Schema.Type<typeof LayoutEntrySchema>;
 
-// TODO(Zan): Consider making solo it's own part. It's not really a function of the 'main' part?
 // TODO(Zan): Consider renaming the 'main' part to 'deck' part now that we are throwing out the old layout plugin.
 // TODO(Zan): Extend to all strings?
 const LayoutPartSchema = S.Union(
@@ -31,7 +29,9 @@ const LayoutPartSchema = S.Union(
 );
 export type LayoutPart = S.Schema.Type<typeof LayoutPartSchema>;
 
-const LayoutPartsSchema = S.partial(S.mutable(S.Record(LayoutPartSchema, S.mutable(S.Array(LayoutEntrySchema)))));
+const LayoutPartsSchema = S.partial(
+  S.mutable(S.Record({ key: LayoutPartSchema, value: S.mutable(S.Array(LayoutEntrySchema)) })),
+);
 export type LayoutParts = S.Schema.Type<typeof LayoutPartsSchema>;
 
 const LayoutCoordinateSchema = S.mutable(S.Struct({ part: LayoutPartSchema, entryId: S.String }));
@@ -52,14 +52,6 @@ export type ActiveParts = z.infer<typeof ActiveParts>;
 // TODO(burdon): Where should this go?
 export type LayoutContainerProps<T> = T & { role?: string; coordinate?: LayoutCoordinate };
 
-/**
- * Basic state provided by a navigation plugin.
- */
-export const Attention = z.object({
-  attended: z.set(z.string()).optional().describe('Ids of items which have focus.'),
-});
-export type Attention = z.infer<typeof Attention>;
-
 /**
  * Provides for a plugin that can manage the app navigation.
  */

package/tsconfig.json

@@ -16,35 +16,7 @@
   "include": [
     "src"
   ],
-  "references": [
-    {
-      "path": "../../common/async"
-    },
-    {
-      "path": "../../common/debug"
-    },
-    {
-      "path": "../../common/invariant"
-    },
-    {
-      "path": "../../common/local-storage"
-    },
-    {
-      "path": "../../common/log"
-    },
-    {
-      "path": "../../common/util"
-    },
-    {
-      "path": "../../core/echo/echo-schema"
-    },
-    {
-      "path": "../app-graph"
-    },
-    {
-      "path": "../client-protocol"
-    }
-  ],
+  "references": [],
   "ts-node": {
     "compilerOptions": {
       "module": "CommonJS"

package/vitest.config.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { defineConfig, mergeConfig } from 'vitest/config';
+
+import { baseConfig } from '../../../vitest.shared';
+
+export default mergeConfig(baseConfig({ cwd: __dirname }), defineConfig({}));