allow VegaChart to know current theme mode

Author: forman

chartlets.js/package-lock.json

@@ -29,7 +29,6 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@fontsource/roboto": "^5.1.0",
     "@mui/material": "^6.1.5",
     "chartlets": "file:../lib",
     "react": "^18.3.1",

chartlets.js/packages/demo/package.json

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import {
   CssBaseline,
   ThemeProvider,
@@ -10,12 +10,12 @@ import { initializeContributions } from "chartlets";
 import mui from "chartlets/plugins/mui";
 import vega from "chartlets/plugins/vega";
 
-import { type AppState, appStore } from "@/store";
-import ExtensionsInfo from "./components/ExtensionInfo";
+import { type AppState, appStore, useAppStore } from "@/store";
 import ControlBar from "./components/ControlBar";
+import ExtensionsInfo from "./components/ExtensionInfo";
+import Header from "./components/Header";
 import PanelsControl from "./components/PanelsControl";
 import PanelsRow from "./components/PanelsRow";
-import Header, { type Mode } from "./components/Header";
 
 initializeContributions({
   plugins: [mui(), vega()],
@@ -39,13 +39,14 @@ const fontFamily = "Roboto, Arial, sans-serif";
 
 function App() {
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const systemMode = prefersDarkMode ? "dark" : "light";
-  const [mode, setMode] = useState<Mode>(systemMode);
+  const systemThemeMode = prefersDarkMode ? "dark" : "light";
+  const themeMode = useAppStore((state) => state.themeMode);
+
   const theme = useMemo(
     () =>
       createTheme({
         palette: {
-          mode: mode === "system" ? systemMode : mode,
+          mode: themeMode === "system" ? systemThemeMode : themeMode,
         },
         typography: { fontFamily },
         components: {
@@ -56,13 +57,13 @@ function App() {
           },
         },
       }),
-    [mode, systemMode],
+    [themeMode, systemThemeMode],
   );
 
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Header mode={mode} setMode={setMode} />
+      <Header />
       <ExtensionsInfo />
       <ControlBar />
       <PanelsControl />

chartlets.js/packages/demo/src/App.tsx

@@ -2,32 +2,32 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 
-export type Mode = "dark" | "light" | "system";
-const modes: Mode[] = ["dark", "light", "system"];
+import { type ThemeMode, themeModes, useAppStore } from "@/store";
 
-interface HeaderProps {
-  mode: Mode;
-  setMode: (mode: Mode) => void;
-}
-
-function Header({ mode, setMode }: HeaderProps) {
+function Header() {
+  const { themeMode, setThemeMode } = useAppStore();
   return (
     <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
       <Typography fontSize="3em" fontWeight="bold">
         Chartlets Demo
       </Typography>
       <Button
         onClick={() => {
-          const nextMode = modes[(modes.findIndex((m) => m === mode) + 1) % 3];
-          setMode(nextMode);
+          setThemeMode(getNextThemeMode(themeMode));
         }}
         variant="contained"
         size="small"
       >
-        {mode}
+        {themeMode}
       </Button>
     </Box>
   );
 }
 
 export default Header;
+
+const getNextThemeMode = (themeMode: ThemeMode) => {
+  return themeModes[
+    (themeModes.findIndex((m) => m === themeMode) + 1) % themeModes.length
+  ];
+};

chartlets.js/packages/demo/src/components/Header.tsx

@@ -5,10 +5,15 @@ export interface Dataset {
   title: string;
 }
 
+export type ThemeMode = "dark" | "light" | "system";
+export const themeModes: ThemeMode[] = ["dark", "light", "system"];
+
 export interface AppState {
   datasets: Dataset[];
   selectedDatasetId: string | null;
   setSelectedDatasetId(setSelectedDatasetId: string | null): void;
+  themeMode: ThemeMode;
+  setThemeMode(themeMode: ThemeMode): void;
 }
 
 export const appStore = create<AppState>((set, get) => ({
@@ -23,6 +28,10 @@ export const appStore = create<AppState>((set, get) => ({
       set({ selectedDatasetId });
     }
   },
+  themeMode: "system",
+  setThemeMode: (themeMode: "dark" | "light" | "system") => {
+    set({ themeMode });
+  },
 }));
 
 export const useAppStore = appStore;

chartlets.js/packages/demo/src/store.ts

@@ -28,6 +28,7 @@ export function handleHostStoreChange() {
     // there are no extensions (yet)
     return;
   }
+  synchronizeThemeMode(hostStore);
   const propertyRefs = getHostStorePropertyRefs();
   if (!propertyRefs || propertyRefs.length === 0) {
     // Exit if there are is nothing to be changed
@@ -95,3 +96,16 @@ function getHostStorePropertyRefs(): PropertyRef[] {
   });
   return propertyRefs;
 }
+
+function synchronizeThemeMode(hostStore: HostStore) {
+  const newThemeMode = hostStore.get("themeMode");
+  const oldThemeMode = store.getState().themeMode;
+  if (
+    (newThemeMode === "dark" ||
+      newThemeMode === "light" ||
+      newThemeMode === "system") &&
+    newThemeMode !== oldThemeMode
+  ) {
+    store.setState({ themeMode: newThemeMode });
+  }
+}

chartlets.js/packages/lib/src/actions/handleHostStoreChange.ts

@@ -18,12 +18,15 @@ const selectContributionsResult = (state: StoreState) =>
 const selectContributionsRecord = (state: StoreState) =>
   state.contributionsRecord;
 
+const selectThemeMode = (state: StoreState) => state.themeMode;
+
 const useStore = store;
 
 export const useConfiguration = () => useStore(selectConfiguration);
 export const useExtensions = () => useStore(selectExtensions);
 export const useContributionsResult = () => useStore(selectContributionsResult);
 export const useContributionsRecord = () => useStore(selectContributionsRecord);
+export const useThemeMode = () => useStore(selectThemeMode);
 
 export function makeContributionsHook<S extends object = object>(
   contribPoint: string,

chartlets.js/packages/lib/src/hooks.ts

@@ -6,15 +6,20 @@ export type {
   ComponentChangeEvent,
   ComponentChangeHandler,
 } from "@/types/state/event";
+export type { ThemeMode } from "@/types/state/store";
+
 // Actions (store changes)
 export { initializeContributions } from "@/actions/initializeContributions";
 export { handleComponentChange } from "@/actions/handleComponentChange";
 export { updateContributionContainer } from "@/actions/updateContributionContainer";
+
 // Component registry
 export type { Registry } from "@/component/Registry";
+
 // React components
 export { Component, type ComponentProps } from "@/component/Component";
 export { Children } from "@/component/Children";
+
 // React hooks
 export {
   useConfiguration,
@@ -24,7 +29,9 @@ export {
   useContributions,
   useComponentChangeHandlers,
   makeContributionsHook,
+  useThemeMode,
 } from "@/hooks";
+
 // Application interface
 export type {
   FrameworkOptions,
@@ -33,6 +40,3 @@ export type {
   Plugin,
   PluginLike,
 } from "@/types/state/options";
-// Some common utilities
-export { isObject } from "@/utils/isObject";
-export { isString } from "@/utils/isString";

chartlets.js/packages/lib/src/index.ts

@@ -4,7 +4,7 @@ import MuiMenuItem from "@mui/material/MenuItem";
 import MuiSelect, { type SelectChangeEvent } from "@mui/material/Select";
 
 import type { ComponentState, ComponentProps } from "@/index";
-import { isString } from "@/index";
+import { isString } from "@/utils/isString";
 
 export type SelectOption =
   | string

chartlets.js/packages/lib/src/plugins/mui/Select.tsx

@@ -3,16 +3,16 @@ import type { TopLevelSpec } from "vega-lite";
 
 import type { ComponentState, ComponentProps } from "@/index";
 import { useSignalListeners } from "./hooks/useSignalListeners";
-import { useTheme, type VegaTheme } from "./hooks/useTheme";
+import { useVegaTheme, type VegaTheme } from "./hooks/useVegaTheme";
 
-interface PlotState extends ComponentState {
+interface VegaChartState extends ComponentState {
   theme?: VegaTheme | "default" | "system";
   chart?:
     | TopLevelSpec // This is the vega-lite specification type
     | null;
 }
 
-interface PlotProps extends ComponentProps, PlotState {}
+interface VegaChartProps extends ComponentProps, VegaChartState {}
 
 export function VegaChart({
   type,
@@ -21,9 +21,10 @@ export function VegaChart({
   theme,
   chart,
   onChange,
-}: PlotProps) {
+}: VegaChartProps) {
   const signalListeners = useSignalListeners(chart, type, id, onChange);
-  const vegaTheme = useTheme(theme);
+  const vegaTheme = useVegaTheme(theme);
+  console.info("---> vegaTheme:", vegaTheme);
   if (chart) {
     return (
       <VegaLite