Added hook to create stable CSHs

Author: forman

chartlets.js/src/demo/components/PanelsRow.tsx

@@ -1,20 +1,18 @@
-import { type ComponentChangeEvent, handleComponentChange } from "@/lib";
-import { usePanelStates } from "@/demo/hooks";
+import type { PanelState } from "@/demo/types";
+import { useComponentChangeHandlers, useContributions } from "@/lib/hooks";
 import Panel from "./Panel";
 
 function PanelsRow() {
-  const panelStates = usePanelStates();
+  const panelStates = useContributions<PanelState>("panels");
+  const panelChangeHandlers = useComponentChangeHandlers(
+    "panels",
+    panelStates?.length || 0,
+  );
   if (!panelStates) {
     // Ok, not ready yet
     return null;
   }
 
-  const handlePanelChange = (
-    panelIndex: number,
-    panelEvent: ComponentChangeEvent,
-  ) => {
-    handleComponentChange("panels", panelIndex, panelEvent);
-  };
   const panels = panelStates.map((panelState, panelIndex) => {
     const { container, component, componentResult } = panelState;
     return (
@@ -24,7 +22,7 @@ function PanelsRow() {
         componentProps={component}
         componentStatus={componentResult.status}
         componentError={componentResult.error}
-        onChange={(e) => handlePanelChange(panelIndex, e)}
+        onChange={panelChangeHandlers[panelIndex]}
       />
     );
   });

chartlets.js/src/demo/hooks.ts

@@ -2,6 +2,11 @@ import type { StoreState } from "@/lib/types/state/store";
 import { store } from "@/lib/store";
 import { useMemo } from "react";
 import type { ContributionState } from "@/lib/types/state/contribution";
+import type {
+  ComponentChangeEvent,
+  ComponentChangeHandler,
+} from "@/lib/types/state/event";
+import { handleComponentChange } from "@/lib/actions/handleComponentChange";
 
 const selectConfiguration = (state: StoreState) => state.configuration;
 
@@ -32,3 +37,44 @@ export function makeContributionsHook<S extends object = object>(
     }, [contributions]);
   };
 }
+
+/**
+ * A hook that retrieves the contributions for the given contribution
+ * point given by `contribPoint`.
+ *
+ * @param contribPoint Contribution point name.
+ * @typeParam S Type of the container state.
+ */
+export function useContributions<S extends object = object>(
+  contribPoint: string,
+): ContributionState<S>[] {
+  const contributionsRecord = useContributionsRecord();
+  return contributionsRecord[contribPoint] as ContributionState<S>[];
+}
+
+/**
+ * A hook that creates an array of length `numContribs` with stable
+ * component change handlers of type `ComponentChangeHandler` for
+ * the contribution point given by `contribPoint`.
+ *
+ * @param contribPoint Contribution point name.
+ * @param numContribs Number of contributions. This should be the length
+ *   of the array of contributions you get using the `useContributions` hook.
+ */
+export function useComponentChangeHandlers(
+  contribPoint: string,
+  numContribs: number,
+): ComponentChangeHandler[] {
+  return useMemo(
+    () =>
+      Array.from({ length: numContribs }).map(
+        (_, contribIndex) => (componentEvent: ComponentChangeEvent) =>
+          void handleComponentChange(
+            contribPoint,
+            contribIndex,
+            componentEvent,
+          ),
+      ),
+    [contribPoint, numContribs],
+  );
+}

chartlets.js/src/lib/hooks.ts

@@ -18,5 +18,7 @@ export {
   useExtensions,
   useContributionsResult,
   useContributionsRecord,
+  useContributions,
+  useComponentChangeHandlers,
   makeContributionsHook,
 } from "@/lib/hooks";