we now have plugins, however, we still have one large JS chunk

Author: forman

chartlets.js/CHANGES.md

@@ -8,20 +8,27 @@
     - `chartlets-demo` Chartlets demo which uses the above  
   - Allow for different component implementation bases, therefore
     make corresponding dependencies optional and dynamically check at runtime
-    whether they are available. We may also think of going further by
-    using dedicated implementation packages:
-    - `chartlets.py.vega` Defines the `VegaChart` component
-    - `chartlets.js.mui` Registers MUI impls. of the standard components
-    - `chartlets.js.vega` Registers Vega React impl. of the `VegaChart` component
+    whether they are available.
 
 ## Version 0.0.30 (in development)
 
-* Allow for different chart providers:
-  - Renamed `Plot` into `VegaChart`.
-  - `VegaChart` is defined only if `vega-altair` is installed.
-
-* The `Plot` component now respects a `theme` property. If not given,
-  it will respect the current MUI theme mode `"dark"`. 
+* Chartlets now allows for different component providers.
+  Therefore, Vega-based `Plot` and MUI components have been made optional.
+  To activate, use the new `plugins: Plugin[]` option of `FrameworkOptions`.
+  ```TypeScript
+  import { initializeContributions } from "chartlets";
+  import mui from "chartlets/plugins/mui";
+  import vega from "chartlets/plugins/vega";
+  
+  initializeContributions({ plugins: [mui, vega], ... })   
+  ```
+  In addition:
+  - Renamed `Plot` into `VegaChart` and moved to `src/plugins/vega`.
+  - Moved other MUI components into `src/plugins/mui`.
+
+* The new `VegaChart` component respects a `theme` property. If not given,
+  it will respect the current theme mode `"dark"` otherwise fallback to the
+  Vega default theme. 
 
 ## Version 0.0.29 (from 2024/11/26)
 

chartlets.js/package-lock.json

@@ -50,8 +50,8 @@
     "@fontsource/roboto": "^5.1.0",
     "@mui/material": "^6.1.5",
     "microdiff": "^1.4.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": ">=18",
+    "react-dom": ">=18",
     "react-vega": "^7.6.0",
     "zustand": "^5.0.0"
   },

chartlets.js/package.json

@@ -2,22 +2,28 @@ import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
 import Typography from "@mui/material/Typography";
 
 import { initializeContributions } from "@/lib";
+import mui from "@/lib/plugins/mui";
+import vega from "@/lib/plugins/vega";
+
+import { type AppState, appStore } from "@/demo/store";
 import ExtensionsInfo from "./components/ExtensionInfo";
-import ControlBar from "@/demo/components/ControlBar";
+import ControlBar from "./components/ControlBar";
 import PanelsControl from "./components/PanelsControl";
 import PanelsRow from "./components/PanelsRow";
-import { appStore } from "@/demo/store";
-import { getValue, setValue } from "@/lib/utils/objPath";
 
 initializeContributions({
+  plugins: [mui, vega],
   hostStore: {
     // Let Chartlets listen to changes in application state.
     subscribe: (listener: () => void) => appStore.subscribe(listener),
     // Compute a property value and return it. We simply use getValue() here.
-    get: (property: string): unknown => getValue(appStore.getState(), property),
+    get: (property: string): unknown => {
+      return appStore.getState()[property as keyof AppState];
+    },
     // Set a property value in the application state.
-    set: (property: string, value: unknown) =>
-      void appStore.setState(setValue(appStore.getState(), property, value)),
+    set: (property: string, value: unknown) => {
+      appStore.setState({ [property as keyof AppState]: value });
+    },
   },
   logging: { enabled: true },
 });

chartlets.js/src/demo/App.tsx

@@ -13,4 +13,7 @@ export function configureFramework(options: FrameworkOptions) {
   store.setState({
     configuration: { ...options } as FrameworkOptions,
   });
+  if (options.plugins) {
+    options.plugins.forEach((plugin) => plugin());
+  }
 }

chartlets.js/src/lib/actions/configureFramework.ts

@@ -1,23 +1,23 @@
-/////////////////////////////////////////////////////////////////////
-// The Chartlets TypeScript API
-
 // Types
-export { type Contribution } from "@/lib/types/model/contribution";
-export { type ContributionState } from "@/lib/types/state/contribution";
+export type { Contribution } from "@/lib/types/model/contribution";
+export type { ContributionState } from "@/lib/types/state/contribution";
 export type {
   ComponentState,
   ContainerState,
 } from "@/lib/types/state/component";
-export {
-  type ComponentChangeEvent,
-  type ComponentChangeHandler,
+export type {
+  ComponentChangeEvent,
+  ComponentChangeHandler,
 } from "@/lib/types/state/event";
 // Actions (store changes)
 export { initializeContributions } from "@/lib/actions/initializeContributions";
 export { handleComponentChange } from "@/lib/actions/handleComponentChange";
 export { updateContributionContainer } from "@/lib/actions/updateContributionContainer";
 // Component registry
-export { type Registry, registry } from "@/lib/component/Registry";
+export {
+  type Registry,
+  registry as componentRegistry,
+} from "@/lib/component/Registry";
 // React components
 export { Component } from "@/lib/component/Component";
 export { Children } from "@/lib/component/Children";
@@ -32,29 +32,9 @@ export {
   makeContributionsHook,
 } from "@/lib/hooks";
 // Application interface
-export { type HostStore } from "@/lib/types/state/options";
-
-/////////////////////////////////////////////////////////////////////
-// Register standard Chartlets components that can be rendered
-// by the Chartlets `Component` component.
-// Plugins may register their own components.
-
-import { registry } from "@/lib/component/Registry";
-
-import { Box } from "@/lib/components/Box";
-import { Button } from "@/lib/components/Button";
-import { Checkbox } from "@/lib/components/Checkbox";
-import { CircularProgress } from "@/lib/components/CircularProgress";
-import { IconButton } from "@/lib/components/IconButton";
-import { Plot } from "@/lib/components/Plot";
-import { Select } from "@/lib/components/Select";
-import { Typography } from "@/lib/components/Typography";
-
-registry.register("Box", Box);
-registry.register("Button", Button);
-registry.register("Checkbox", Checkbox);
-registry.register("CircularProgress", CircularProgress);
-registry.register("IconButton", IconButton);
-registry.register("Plot", Plot);
-registry.register("Select", Select);
-registry.register("Typography", Typography);
+export type {
+  FrameworkOptions,
+  HostStore,
+  MutableHostStore,
+  Plugin,
+} from "@/lib/types/state/options";