Support contrib state

dashi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dashipopashi",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [

dashi/src/demo/actions/hidePanel.ts

@@ -1,6 +1,8 @@
-import { updateContributionState } from "@/lib";
+import { updateContributionContainer } from "@/lib";
 import type { PanelState } from "@/demo/types";
 
 export function hidePanel(panelIndex: number) {
-  updateContributionState<PanelState>("panels", panelIndex, { visible: false });
+  updateContributionContainer<PanelState>("panels", panelIndex, {
+    visible: false,
+  });
 }

dashi/src/demo/actions/showPanel.ts

@@ -1,6 +1,8 @@
-import { updateContributionState } from "@/lib";
+import { updateContributionContainer } from "@/lib";
 import type { PanelState } from "@/demo/types";
 
 export function showPanel(panelIndex: number) {
-  updateContributionState<PanelState>("panels", panelIndex, { visible: true });
+  updateContributionContainer<PanelState>("panels", panelIndex, {
+    visible: true,
+  });
 }

dashi/src/demo/components/Panel.tsx

@@ -1,11 +1,7 @@
 import type { CSSProperties, ReactElement } from "react";
 import CircularProgress from "@mui/material/CircularProgress";
-
-import {
-  type ComponentChangeHandler,
-  type ContributionState,
-  Component,
-} from "@/lib";
+import { Component } from "@/lib";
+import type { ComponentState, ComponentChangeHandler } from "@/lib";
 import type { PanelState } from "@/demo/types";
 
 const panelContainerStyle: CSSProperties = {
@@ -32,39 +28,43 @@ const panelContentStyle: CSSProperties = {
   padding: 2,
 };
 
-interface PanelProps extends ContributionState<PanelState> {
+interface PanelProps extends PanelState {
+  componentProps?: ComponentState;
+  componentStatus?: string;
+  componentError?: { message: string };
   onChange: ComponentChangeHandler;
 }
 
 function Panel({
-  name,
-  state,
-  component,
-  componentResult,
+  title,
+  visible,
+  componentProps,
+  componentStatus,
+  componentError,
   onChange,
 }: PanelProps) {
-  if (!state.visible) {
+  if (!visible) {
     return null;
   }
   let panelElement: ReactElement | null = null;
-  if (component) {
-    panelElement = <Component {...component} onChange={onChange} />;
-  } else if (componentResult.error) {
+  if (componentProps) {
+    panelElement = <Component {...componentProps} onChange={onChange} />;
+  } else if (componentError) {
     panelElement = (
       <span>
-        Error loading {name}: {componentResult.error.message}
+        Error loading panel {title}: {componentError.message}
       </span>
     );
-  } else if (componentResult.status === "pending") {
+  } else if (componentStatus === "pending") {
     panelElement = (
       <span>
-        <CircularProgress size={30} color="secondary" /> Loading {name}...
+        <CircularProgress size={30} color="secondary" /> Loading {title}...
       </span>
     );
   }
   return (
     <div style={panelContainerStyle}>
-      <div style={panelHeaderStyle}>{state.title}</div>
+      <div style={panelHeaderStyle}>{title}</div>
       <div style={panelContentStyle}>{panelElement}</div>
     </div>
   );

dashi/src/demo/components/PanelsControl.tsx

@@ -17,15 +17,16 @@ function PanelsControl() {
     <FormGroup sx={{ display: "flex", flexDirection: "row" }}>
       {panelStates.map((panelState, panelIndex) => {
         const id = `panels.${panelIndex}`;
+        const { title, visible } = panelState.container;
         return (
           <FormControlLabel
             key={panelIndex}
-            label={panelState.state.title}
+            label={title}
             control={
               <Checkbox
                 color="secondary"
                 id={id}
-                checked={panelState.state.visible || false}
+                checked={visible || false}
                 value={panelIndex}
                 onChange={(e) => {
                   if (e.currentTarget.checked) {

dashi/src/demo/components/PanelsRow.tsx

@@ -1,5 +1,3 @@
-import type { JSX } from "react";
-
 import { type ComponentChangeEvent, handleComponentChange } from "@/lib";
 import { usePanelStates } from "@/demo/hooks";
 import Panel from "./Panel";
@@ -17,23 +15,21 @@ function PanelsRow() {
   ) => {
     handleComponentChange("panels", panelIndex, panelEvent);
   };
-  const visiblePanels: JSX.Element[] = [];
-  panelStates.forEach((panelState, panelIndex) => {
-    if (panelState.state.visible) {
-      visiblePanels.push(
-        <Panel
-          key={panelIndex}
-          {...panelState}
-          onChange={(e) => handlePanelChange(panelIndex, e)}
-        />,
-      );
-    }
+  const panels = panelStates.map((panelState, panelIndex) => {
+    const { container, component, componentResult } = panelState;
+    return (
+      <Panel
+        key={panelIndex}
+        {...container}
+        componentProps={component}
+        componentStatus={componentResult.status}
+        componentError={componentResult.error}
+        onChange={(e) => handlePanelChange(panelIndex, e)}
+      />
+    );
   });
-  const panelElements = <>{visiblePanels}</>;
   return (
-    <div style={{ display: "flex", gap: 5, paddingTop: 10 }}>
-      {panelElements}
-    </div>
+    <div style={{ display: "flex", gap: 5, paddingTop: 10 }}>{panels}</div>
   );
 }
 

dashi/src/lib/actions/configureFramework.ts

@@ -1,6 +1,6 @@
 import { store } from "@/lib/store";
 import type { FrameworkOptions } from "@/lib/types/state/store";
-import { configureLogging } from "@/lib/utils/configureLogging";
+import { configureLogging } from "@/lib/actions/helpers/configureLogging";
 import { handleHostStoreChange } from "./handleHostStoreChange";
 
 export function configureFramework<S extends object = object>(

dashi/src/lib/actions/handleComponentChange.ts

@@ -17,7 +17,7 @@ export function handleComponentChange(
       contribIndex,
       stateChanges: [
         {
-          kind: "Component",
+          link: "component",
           id: changeEvent.componentId,
           property: changeEvent.propertyName,
           value: changeEvent.propertyValue,
@@ -57,7 +57,8 @@ function getCallbackRequests(
       const inputs = callback.inputs;
       const inputIndex = inputs.findIndex(
         (input) =>
-          (!input.kind || input.kind === "Component") &&
+          !input.noTrigger &&
+          (!input.link || input.link === "component") &&
           input.id === changeEvent.componentId &&
           input.property === changeEvent.propertyName,
       );

dashi/src/lib/actions/handleHostStoreChange.ts

@@ -5,9 +5,9 @@ import type {
   CallbackRef,
   CallbackRequest,
   ContribRef,
-  Input,
   InputRef,
 } from "@/lib/types/model/callback";
+import type { Input } from "@/lib/types/model/channel";
 import { getInputValues } from "@/lib/actions/helpers/getInputValues";
 import { getValue, type PropertyPath } from "@/lib/utils/getValue";
 import { invokeCallbacks } from "@/lib/actions/helpers/invokeCallbacks";
@@ -59,6 +59,9 @@ function getCallbackRequests<S extends object = object>(
 
 const getHostStorePropertyRefs = memoizeOne(_getHostStorePropertyRefs);
 
+/**
+ * Get the static list of host state property references for all contributions.
+ */
 function _getHostStorePropertyRefs(): PropertyRef[] {
   const { contributionsRecord } = store.getState();
   const propertyRefs: PropertyRef[] = [];
@@ -68,13 +71,13 @@ function _getHostStorePropertyRefs(): PropertyRef[] {
       (contribution.callbacks || []).forEach(
         (callback, callbackIndex) =>
           (callback.inputs || []).forEach((input, inputIndex) => {
-            if (input.kind === "AppState") {
+            if (!input.noTrigger && input.link === "app") {
               propertyRefs.push({
                 contribPoint,
                 contribIndex,
                 callbackIndex,
                 inputIndex,
-                propertyPath: input.property.split("."),
+                propertyPath: input.property!.split("."),
               });
             }
           }),

dashi/src/lib/actions/helpers/applyStateChangeRequests.test.ts

@@ -35,7 +35,7 @@ describe("Test that applyContributionChangeRequests()", () => {
         name: "",
         extension: "",
         componentResult: { status: "ok" },
-        state: { visible: true },
+        container: { visible: true },
         component: componentTree,
       },
     ],
@@ -46,7 +46,7 @@ describe("Test that applyContributionChangeRequests()", () => {
     contribIndex: 0,
     stateChanges: [
       {
-        kind: "Component",
+        link: "component",
         id: "dd1",
         property: "value",
         value: 14,
@@ -59,7 +59,7 @@ describe("Test that applyContributionChangeRequests()", () => {
     contribIndex: 0,
     stateChanges: [
       {
-        kind: "Component",
+        link: "component",
         id: "dd1",
         property: "value",
         value: 13,
@@ -88,7 +88,7 @@ describe("Test that applyContributionChangeRequests()", () => {
 describe("Test that applyComponentStateChange()", () => {
   it("changes state if values are different", () => {
     const newState = applyComponentStateChange(componentTree, {
-      kind: "Component",
+      link: "component",
       id: "cb1",
       property: "value",
       value: false,
@@ -99,7 +99,7 @@ describe("Test that applyComponentStateChange()", () => {
 
   it("doesn't change the state if value stays the same", () => {
     const newState = applyComponentStateChange(componentTree, {
-      kind: "Component",
+      link: "component",
       id: "cb1",
       property: "value",
       value: true,

dashi/src/lib/actions/helpers/applyStateChangeRequests.ts

@@ -10,7 +10,7 @@ import type {
 import type { ContribPoint } from "@/lib/types/model/extension";
 import type { ContributionState } from "@/lib";
 import { updateArray } from "@/lib/utils/updateArray";
-import { isContainerState } from "@/lib/utils/isContainerState";
+import { isContainerState } from "@/lib/actions/helpers/isContainerState";
 
 export function applyStateChangeRequests(
   stateChangeRequests: StateChangeRequest[],
@@ -37,8 +37,9 @@ function applyHostStateChanges(stateChangeRequests: StateChangeRequest[]) {
     stateChangeRequests.forEach((stateChangeRequest) => {
       hostState = applyStateChanges(
         hostState,
-        stateChangeRequest.stateChanges,
-        "AppState",
+        stateChangeRequest.stateChanges.filter(
+          (stateChange) => stateChange.link === "app",
+        ),
       );
     });
     if (hostState !== hostStateOld) {
@@ -53,13 +54,9 @@ function applyComponentStateChanges(
 ) {
   let component = componentOld;
   if (component) {
-    stateChanges
-      .filter(
-        (stateChange) => !stateChange.kind || stateChange.kind === "Component",
-      )
-      .forEach((stateChange) => {
-        component = applyComponentStateChange(component!, stateChange);
-      });
+    stateChanges.forEach((stateChange) => {
+      component = applyComponentStateChange(component!, stateChange);
+    });
   }
   return component;
 }
@@ -72,25 +69,27 @@ export function applyContributionChangeRequests(
   stateChangeRequests.forEach(
     ({ contribPoint, contribIndex, stateChanges }) => {
       const contribution = contributionsRecord[contribPoint][contribIndex];
-      const state = applyStateChanges(
-        contribution.state,
-        stateChanges,
-        "State",
+      const container = applyStateChanges(
+        contribution.container,
+        stateChanges.filter((stateChange) => stateChange.link === "container"),
       );
       const component = applyComponentStateChanges(
         contribution.component,
-        stateChanges,
+        stateChanges.filter(
+          (stateChange) =>
+            !stateChange.link || stateChange.link === "component",
+        ),
       );
       if (
-        state !== contribution.state ||
+        container !== contribution.container ||
         component !== contribution.component
       ) {
         contributionsRecord = {
           ...contributionsRecord,
           [contribPoint]: updateArray<ContributionState>(
             contributionsRecord[contribPoint],
             contribIndex,
-            { ...contribution, state, component },
+            { ...contribution, container, component },
           ),
         };
       }
@@ -139,14 +138,12 @@ export function applyComponentStateChange(
 export function applyStateChanges<S extends object>(
   state: S | undefined,
   stateChanges: StateChange[],
-  kind: "State" | "AppState",
 ): S | undefined {
   stateChanges.forEach((stateChange) => {
     if (
-      stateChange.kind === kind &&
-      (!state ||
-        (state as unknown as Record<string, unknown>)[stateChange.property] !==
-          stateChange.value)
+      !state ||
+      (state as unknown as Record<string, unknown>)[stateChange.property] !==
+        stateChange.value
     ) {
       state = { ...state, [stateChange.property]: stateChange.value } as S;
     }