further split

forman · forman · commit cab2a9aaa3e7 · 2024-12-05T15:47:55.000+01:00
diff --git a/chartlets.js/package.json b/chartlets.js/package.json
@@ -28,12 +28,18 @@
   "license": "MIT",
   "types": "./dist/index.d.ts",
   "module": "./dist/chartlets.js",
-  "main": "./dist/chartlets.umd.cjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "module": "./dist/chartlets.js",
-      "require": "./dist/chartlets.umd.cjs"
+      "module": "./dist/chartlets.js"
+    },
+    "./plugins/mui": {
+      "types": "./dist/mui-plugin.d.ts",
+      "module": "./dist/mui-plugin.js"
+    },
+    "./plugins/vega": {
+      "types": "./dist/vega-plugin.d.ts",
+      "module": "./dist/vega-plugin.js"
     }
   },
   "scripts": {
@@ -53,6 +59,7 @@
     "react": ">=18",
     "react-dom": ">=18",
     "react-vega": "^7.6.0",
+    "vega-themes": "^2.15.0",
     "zustand": "^5.0.0"
   },
   "peerDependencies": {
diff --git a/chartlets.js/src/demo/App.tsx b/chartlets.js/src/demo/App.tsx
@@ -12,7 +12,7 @@ import PanelsControl from "./components/PanelsControl";
 import PanelsRow from "./components/PanelsRow";
 
 initializeContributions({
-  plugins: [mui, vega],
+  plugins: [mui(), vega()],
   hostStore: {
     // Let Chartlets listen to changes in application state.
     subscribe: (listener: () => void) => appStore.subscribe(listener),
diff --git a/chartlets.js/src/lib/actions/configureFramework.ts b/chartlets.js/src/lib/actions/configureFramework.ts
@@ -1,7 +1,15 @@
 import { store } from "@/lib/store";
-import type { FrameworkOptions } from "@/lib/types/state/options";
-import { configureLogging } from "@/lib/actions/helpers/configureLogging";
+import type {
+  ComponentRegistration,
+  FrameworkOptions,
+  PluginLike,
+} from "@/lib/types/state/options";
+import { registry } from "@/lib/component/Registry";
+import { isPromise } from "@/lib/utils/isPromise";
+import { isFunction } from "@/lib/utils/isFunction";
+import { isObject } from "@/lib/utils/isObject";
 import { handleHostStoreChange } from "./handleHostStoreChange";
+import { configureLogging } from "./helpers/configureLogging";
 
 export function configureFramework(options: FrameworkOptions) {
   if (options.logging) {
@@ -14,8 +22,20 @@ export function configureFramework(options: FrameworkOptions) {
     configuration: { ...options } as FrameworkOptions,
   });
   if (options.plugins) {
-    options.plugins.forEach((initializePlugin) => {
-      initializePlugin();
-    });
+    options.plugins.forEach(resolvePlugin);
+  }
+}
+
+function resolvePlugin(plugin: PluginLike) {
+  if (isPromise<PluginLike>(plugin)) {
+    plugin.then(resolvePlugin);
+  } else if (isFunction(plugin)) {
+    resolvePlugin(plugin());
+  } else if (isObject(plugin) && plugin.components) {
+    (plugin.components as ComponentRegistration[]).forEach(
+      ([name, component]) => {
+        registry.register(name, component);
+      },
+    );
   }
 }
diff --git a/chartlets.js/src/lib/component/Registry.ts b/chartlets.js/src/lib/component/Registry.ts
@@ -1,4 +1,5 @@
-import type { FC } from "react";
+import type { ComponentType } from "react";
+
 import type { ComponentProps } from "@/lib/component/Component";
 
 /**
@@ -22,14 +23,14 @@ export interface Registry {
    * @param type The Chartlets component's unique type name.
    * @param component A functional React component.
    */
-  register(type: string, component: FC<ComponentProps>): () => void;
+  register(type: string, component: ComponentType<ComponentProps>): () => void;
 
   /**
    * Lookup the component of the provided type.
    *
    * @param type The Chartlets component's type name.
    */
-  lookup(type: string): FC<ComponentProps> | undefined;
+  lookup(type: string): ComponentType<ComponentProps> | undefined;
 
   /**
    * Get the type names of all registered components.
@@ -39,9 +40,9 @@ export interface Registry {
 
 // export for testing only
 export class RegistryImpl implements Registry {
-  private components = new Map<string, FC<ComponentProps>>();
+  private components = new Map<string, ComponentType<ComponentProps>>();
 
-  register(type: string, component: FC<ComponentProps>): () => void {
+  register(type: string, component: ComponentType<ComponentProps>): () => void {
     const oldComponent = this.components.get(type);
     this.components.set(type, component);
     return () => {
@@ -53,7 +54,7 @@ export class RegistryImpl implements Registry {
     };
   }
 
-  lookup(type: string): FC<ComponentProps> | undefined {
+  lookup(type: string): ComponentType<ComponentProps> | undefined {
     return this.components.get(type);
   }
 
@@ -63,7 +64,7 @@ export class RegistryImpl implements Registry {
 }
 
 /**
- * The Chartly component registry.
+ * The Chartlets component registry.
  *
  * Use `registry.register("C", C)` to register your own component `C`.
  *
diff --git a/chartlets.js/src/lib/index.ts b/chartlets.js/src/lib/index.ts
@@ -14,12 +14,9 @@ export { initializeContributions } from "@/lib/actions/initializeContributions";
 export { handleComponentChange } from "@/lib/actions/handleComponentChange";
 export { updateContributionContainer } from "@/lib/actions/updateContributionContainer";
 // Component registry
-export {
-  type Registry,
-  registry as componentRegistry,
-} from "@/lib/component/Registry";
+export type { Registry } from "@/lib/component/Registry";
 // React components
-export { Component } from "@/lib/component/Component";
+export { Component, type ComponentProps } from "@/lib/component/Component";
 export { Children } from "@/lib/component/Children";
 // React hooks
 export {
@@ -37,4 +34,8 @@ export type {
   HostStore,
   MutableHostStore,
   Plugin,
+  PluginLike,
 } from "@/lib/types/state/options";
+// Some common utilities
+export { isObject } from "@/lib/utils/isObject";
+export { isString } from "@/lib/utils/isString";
diff --git a/chartlets.js/src/lib/plugins/mui/Box.tsx b/chartlets.js/src/lib/plugins/mui/Box.tsx
@@ -1,9 +1,8 @@
+import type { ElementType } from "react";
 import MuiBox from "@mui/material/Box";
 
-import type { ElementType } from "react";
-import type { ComponentState } from "@/lib/types/state/component";
-import type { ComponentProps } from "@/lib/component/Component";
-import { Children } from "@/lib/component/Children";
+import type { ComponentState, ComponentProps } from "@/lib";
+import { Children } from "@/lib";
 
 interface BoxState extends ComponentState {
   component?: ElementType<Element>;
diff --git a/chartlets.js/src/lib/plugins/mui/Button.tsx b/chartlets.js/src/lib/plugins/mui/Button.tsx
@@ -2,8 +2,7 @@ import { type MouseEvent } from "react";
 import MuiButton from "@mui/material/Button";
 import MuiIcon from "@mui/material/Icon";
 
-import { type ComponentState } from "@/lib/types/state/component";
-import type { ComponentProps } from "@/lib/component/Component";
+import type { ComponentState, ComponentProps } from "@/lib";
 
 interface ButtonState extends ComponentState {
   text?: string;
diff --git a/chartlets.js/src/lib/plugins/mui/Checkbox.tsx b/chartlets.js/src/lib/plugins/mui/Checkbox.tsx
@@ -3,8 +3,7 @@ import MuiCheckbox from "@mui/material/Checkbox";
 import MuiFormControl from "@mui/material/FormControl";
 import MuiFormControlLabel from "@mui/material/FormControlLabel";
 
-import { type ComponentState } from "@/lib/types/state/component";
-import type { ComponentProps } from "@/lib/component/Component";
+import type { ComponentState, ComponentProps } from "@/lib";
 
 interface CheckboxState extends ComponentState {
   label?: string;
diff --git a/chartlets.js/src/lib/plugins/mui/CircularProgress.tsx b/chartlets.js/src/lib/plugins/mui/CircularProgress.tsx
@@ -1,7 +1,6 @@
 import MuiCircularProgress from "@mui/material/CircularProgress";
 
-import { type ComponentState } from "@/lib/types/state/component";
-import type { ComponentProps } from "@/lib/component/Component";
+import type { ComponentState, ComponentProps } from "@/lib";
 
 interface CircularProgressState extends ComponentState {
   size?: number | string;
diff --git a/chartlets.js/src/lib/plugins/mui/IconButton.tsx b/chartlets.js/src/lib/plugins/mui/IconButton.tsx
@@ -2,8 +2,7 @@ import { type MouseEvent } from "react";
 import MuiIconButton from "@mui/material/IconButton";
 import MuiIcon from "@mui/material/Icon";
 
-import { type ComponentState } from "@/lib/types/state/component";
-import type { ComponentProps } from "@/lib/component/Component";
+import type { ComponentState, ComponentProps } from "@/lib";
 
 interface IconButtonState extends ComponentState {
   icon?: string;
diff --git a/chartlets.js/src/lib/plugins/mui/Select.tsx b/chartlets.js/src/lib/plugins/mui/Select.tsx
@@ -3,9 +3,8 @@ import MuiInputLabel from "@mui/material/InputLabel";
 import MuiMenuItem from "@mui/material/MenuItem";
 import MuiSelect, { type SelectChangeEvent } from "@mui/material/Select";
 
-import { type ComponentState } from "@/lib/types/state/component";
-import type { ComponentProps } from "@/lib/component/Component";
-import { isString } from "@/lib/utils/isString";
+import type { ComponentState, ComponentProps } from "@/lib";
+import { isString } from "@/lib";
 
 export type SelectOption =
   | string
diff --git a/chartlets.js/src/lib/plugins/mui/Typography.tsx b/chartlets.js/src/lib/plugins/mui/Typography.tsx
@@ -1,9 +1,8 @@
 import MuiTypography from "@mui/material/Typography";
 import { type TypographyVariant } from "@mui/material";
 
-import type { ComponentState } from "@/lib/types/state/component";
-import type { ComponentProps } from "@/lib/component/Component";
-import { Children } from "@/lib/component/Children";
+import type { ComponentState, ComponentProps } from "@/lib";
+import { Children } from "@/lib";
 
 interface TypographyState extends ComponentState {
   align?: "right" | "left" | "center" | "inherit" | "justify";
diff --git a/chartlets.js/src/lib/plugins/mui/index.ts b/chartlets.js/src/lib/plugins/mui/index.ts
@@ -1,13 +1,22 @@
-import { componentRegistry as cr } from "@/lib";
+import type { Plugin } from "@/lib";
+import { Box } from "./Box";
+import { Button } from "./Button";
+import { Checkbox } from "./Checkbox";
+import { CircularProgress } from "./CircularProgress";
+import { IconButton } from "./IconButton";
+import { Select } from "./Select";
+import { Typography } from "./Typography";
 
-export default function initializePlugin() {
-  import("./Box").then((m) => cr.register("Box", m.Box));
-  import("./Button").then((m) => cr.register("Button", m.Button));
-  import("./Checkbox").then((m) => cr.register("Checkbox", m.Checkbox));
-  import("./CircularProgress").then((m) =>
-    cr.register("CircularProgress.ts", m.CircularProgress),
-  );
-  import("./IconButton").then((m) => cr.register("IconButton", m.IconButton));
-  import("./Select").then((m) => cr.register("Select", m.Select));
-  import("./Typography").then((m) => cr.register("Typography", m.Typography));
+export default function mui(): Plugin {
+  return {
+    components: [
+      ["Box", Box],
+      ["Button", Button],
+      ["Checkbox", Checkbox],
+      ["CircularProgress", CircularProgress],
+      ["IconButton", IconButton],
+      ["Select", Select],
+      ["Typography", Typography],
+    ],
+  };
 }
diff --git a/chartlets.js/src/lib/plugins/vega/VegaChart.tsx b/chartlets.js/src/lib/plugins/vega/VegaChart.tsx
@@ -1,10 +1,9 @@
 import { VegaLite } from "react-vega";
 import type { TopLevelSpec } from "vega-lite";
 
-import type { ComponentState } from "@/lib/types/state/component";
-import type { ComponentProps } from "@/lib/component/Component";
+import type { ComponentState, ComponentProps } from "@/lib";
 import { useSignalListeners } from "./hooks/useSignalListeners";
-import { useTheme, type VegaTheme } from "@/lib/plugins/vega/hooks/useTheme";
+import { useTheme, type VegaTheme } from "./hooks/useTheme";
 
 interface PlotState extends ComponentState {
   theme?: VegaTheme | "default" | "system";
diff --git a/chartlets.js/src/lib/plugins/vega/hooks/useSignalListeners.ts b/chartlets.js/src/lib/plugins/vega/hooks/useSignalListeners.ts
@@ -1,9 +1,7 @@
 import { useCallback, useMemo } from "react";
 import type { TopLevelSpec } from "vega-lite";
 
-import type { ComponentChangeHandler } from "@/lib/types/state/event";
-import { isObject } from "@/lib/utils/isObject";
-import { isString } from "@/lib/utils/isString";
+import { type ComponentChangeHandler, isObject, isString } from "@/lib";
 
 type SignalHandler = (signalName: string, signalValue: unknown) => void;
 
diff --git a/chartlets.js/src/lib/plugins/vega/index.ts b/chartlets.js/src/lib/plugins/vega/index.ts
@@ -1,5 +1,6 @@
-import { componentRegistry as cr } from "@/lib";
+import type { Plugin } from "@/lib";
+import { VegaChart } from "./VegaChart";
 
-export default function initializePlugin() {
-  import("./VegaChart").then((m) => cr.register("VegaChart", m.VegaChart));
+export default function vega(): Plugin {
+  return { components: [["VegaChart", VegaChart]] };
 }
diff --git a/chartlets.js/src/lib/types/state/options.ts b/chartlets.js/src/lib/types/state/options.ts
@@ -1,5 +1,8 @@
+import type { ComponentType } from "react";
+
 import type { ApiOptions } from "@/lib/types/api";
 import type { LoggingOptions } from "@/lib/actions/helpers/configureLogging";
+import type { ComponentProps } from "@/lib/component/Component";
 
 /**
  * The host store represents an interface to the state of
@@ -59,12 +62,17 @@ export function isMutableHostStore(
  * A framework plugin.
  * Plugins are no-arg functions that are called
  * after the framework's initialisation.
- * Most typically, a plugin registers new components
- * using the component registry, i.e.,
- * `import { componentRegistry } from "chartlets"` followed by
- * `componentRegistry.register("MyComponent", MyComponent)`.
+ * Most typically, a plugin wants to return new components
+ * in the `components` array:
+ * `{ components: [["MyComponent", MyComponent]] }`.
  */
-export type Plugin = () => void;
+export interface Plugin {
+  components?: ComponentRegistration[];
+}
+
+export type ComponentRegistration = [string, ComponentType<ComponentProps>];
+
+export type PluginLike = Plugin | (() => Plugin) | Promise<PluginLike>;
 
 /**
  * Chartlets options to be provided
@@ -75,7 +83,7 @@ export interface FrameworkOptions {
   api?: ApiOptions;
 
   /** Framework plugins. */
-  plugins?: Plugin[];
+  plugins?: PluginLike[];
 
   /** The host store. */
   hostStore?: HostStore;
diff --git a/chartlets.js/src/lib/utils/isFunction.ts b/chartlets.js/src/lib/utils/isFunction.ts
@@ -0,0 +1,5 @@
+export function isFunction(
+  value: unknown,
+): value is (...args: unknown[]) => unknown {
+  return typeof value === "function";
+}
diff --git a/chartlets.js/src/lib/utils/isPromise.ts b/chartlets.js/src/lib/utils/isPromise.ts
@@ -0,0 +1,7 @@
+export function isPromise<T>(value: unknown): value is Promise<T> {
+  return (
+    !!value &&
+    typeof value === "object" &&
+    typeof (value as Record<string, unknown>)["then"] === "function"
+  );
+}
diff --git a/chartlets.js/vite.config.ts b/chartlets.js/vite.config.ts
@@ -38,14 +38,22 @@ export default defineConfig({
   build: {
     sourcemap: true,
     lib: {
-      entry: resolve(__dirname, "src/lib/index.ts"),
-      name: "Chartlets",
-      // the proper extensions will be added
-      fileName: "chartlets",
+      entry: {
+        chartlets: resolve(__dirname, "src/lib/index.ts"),
+        "mui-plugin": resolve(__dirname, "src/lib/plugins/mui/index.ts"),
+        "vega-plugin": resolve(__dirname, "src/lib/plugins/vega/index.ts"),
+      },
+      formats: ["es"],
     },
     rollupOptions: {
       // externalize deps that shouldn't be bundled into the library
-      external: [/^@emotion/, /^@mui/, ...externalModules, ...externalFiles],
+      external: [
+        /^@emotion/,
+        /^@mui/,
+        /^react/,
+        ...externalModules,
+        ...externalFiles,
+      ],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps
