Merge pull request #26 from bcdev/forman-21-support_contrib_state

Support contrib state

Author: forman

dashi/package-lock.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/package.json

@@ -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/hidePanel.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/actions/showPanel.ts

@@ -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/Panel.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/PanelsControl.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/demo/components/PanelsRow.tsx

@@ -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/configureFramework.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/handleComponentChange.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("."),
               });
             }
           }),