Merge pull request #28 from bcdev/forman-25-property_path

`property` of inputs and outputs can be a path

Author: forman

dashi/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dashipopashi",
-  "version": "0.0.11",
+  "version": "0.0.15",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [
@@ -49,7 +49,6 @@
     "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.1.0",
     "@mui/material": "^6.1.5",
-    "memoize-one": "^6.0.0",
     "microdiff": "^1.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

dashi/package.json

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

dashi/src/demo/actions/hidePanel.ts

@@ -1,26 +1,28 @@
 import { store } from "@/lib/store";
 import { type ContribPoint } from "@/lib/types/model/extension";
 import { type CallbackRequest } from "@/lib/types/model/callback";
-import { type ComponentChangeEvent } from "@/lib/types/model/event";
+import { type ComponentChangeEvent } from "@/lib/types/state/event";
 import { getInputValues } from "@/lib/actions/helpers/getInputValues";
 import { applyStateChangeRequests } from "@/lib/actions/helpers/applyStateChangeRequests";
 import { invokeCallbacks } from "@/lib/actions/helpers/invokeCallbacks";
+import { equalObjPaths } from "@/lib/utils/objPath";
 
 export function handleComponentChange(
   contribPoint: ContribPoint,
   contribIndex: number,
   changeEvent: ComponentChangeEvent,
 ) {
+  // Apply actual component state change immediately
   applyStateChangeRequests([
     {
       contribPoint,
       contribIndex,
       stateChanges: [
         {
           link: "component",
-          id: changeEvent.componentId,
-          property: changeEvent.propertyName,
-          value: changeEvent.propertyValue,
+          id: changeEvent.id,
+          property: changeEvent.property,
+          value: changeEvent.value,
         },
       ],
     },
@@ -59,10 +61,11 @@ function getCallbackRequests(
         (input) =>
           !input.noTrigger &&
           (!input.link || input.link === "component") &&
-          input.id === changeEvent.componentId &&
-          input.property === changeEvent.propertyName,
+          input.id === changeEvent.id &&
+          equalObjPaths(input.property, changeEvent.property),
       );
       if (inputIndex >= 0) {
+        // Collect triggered callback
         callbackRequests.push({
           contribPoint,
           contribIndex,

dashi/src/lib/actions/handleComponentChange.ts

@@ -1,5 +1,3 @@
-import memoizeOne from "memoize-one";
-
 import { store } from "@/lib/store";
 import type {
   CallbackRef,
@@ -9,16 +7,16 @@ import type {
 } 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 { getValue, type ObjPath, toObjPath } from "@/lib/utils/objPath";
 import { invokeCallbacks } from "@/lib/actions/helpers/invokeCallbacks";
-import type { ContributionState } from "@/lib";
+import type { ContributionState } from "@/lib/types/state/contribution";
 
 /**
  * A reference to a property of an input of a callback of a contribution.
  */
 export interface PropertyRef extends ContribRef, CallbackRef, InputRef {
   /** The property name as path. */
-  propertyPath: PropertyPath;
+  propertyPath: ObjPath;
 }
 
 export function handleHostStoreChange<S extends object = object>(
@@ -39,30 +37,29 @@ function getCallbackRequests<S extends object = object>(
   hostState: S,
   prevHostState: S,
 ): CallbackRequest[] {
-  const propertyRefs = getHostStorePropertyRefs().filter((propertyRef) =>
-    hasPropertyChanged(propertyRef.propertyPath, hostState, prevHostState),
-  );
-  const callbackRequest: CallbackRequest[] = [];
-  propertyRefs.forEach((propertyRef) => {
-    const contributions = contributionsRecord[propertyRef.contribPoint];
-    const contribution = contributions[propertyRef.contribIndex];
-    const callback = contribution.callbacks![propertyRef.callbackIndex];
-    const inputValues = getInputValues(
-      callback.inputs!,
-      contribution,
-      hostState,
-    );
-    callbackRequest.push({ ...propertyRef, inputValues });
-  });
-  return callbackRequest;
+  return getHostStorePropertyRefs()
+    .filter((propertyRef) =>
+      hasPropertyChanged(propertyRef.propertyPath, hostState, prevHostState),
+    )
+    .map((propertyRef) => {
+      const contributions = contributionsRecord[propertyRef.contribPoint];
+      const contribution = contributions[propertyRef.contribIndex];
+      const callback = contribution.callbacks![propertyRef.callbackIndex];
+      const inputValues = getInputValues(
+        callback.inputs!,
+        contribution,
+        hostState,
+      );
+      return { ...propertyRef, inputValues };
+    });
 }
 
-const getHostStorePropertyRefs = memoizeOne(_getHostStorePropertyRefs);
+// const getHostStorePropertyRefs = memoizeOne(_getHostStorePropertyRefs);
 
 /**
  * Get the static list of host state property references for all contributions.
  */
-function _getHostStorePropertyRefs(): PropertyRef[] {
+function getHostStorePropertyRefs(): PropertyRef[] {
   const { contributionsRecord } = store.getState();
   const propertyRefs: PropertyRef[] = [];
   Object.getOwnPropertyNames(contributionsRecord).forEach((contribPoint) => {
@@ -77,7 +74,7 @@ function _getHostStorePropertyRefs(): PropertyRef[] {
                 contribIndex,
                 callbackIndex,
                 inputIndex,
-                propertyPath: input.property!.split("."),
+                propertyPath: toObjPath(input.property!),
               });
             }
           }),
@@ -89,7 +86,7 @@ function _getHostStorePropertyRefs(): PropertyRef[] {
 }
 
 function hasPropertyChanged<S extends object = object>(
-  propertyPath: PropertyPath,
+  propertyPath: ObjPath,
   currState: S,
   prevState: S,
 ): boolean {

dashi/src/lib/actions/handleHostStoreChange.ts

@@ -11,6 +11,7 @@ import type { ContribPoint } from "@/lib/types/model/extension";
 import type { ContributionState } from "@/lib";
 import { updateArray } from "@/lib/utils/updateArray";
 import { isContainerState } from "@/lib/actions/helpers/isContainerState";
+import { getValue, setValue } from "@/lib/utils/objPath";
 
 export function applyStateChangeRequests(
   stateChangeRequests: StateChangeRequest[],
@@ -106,12 +107,10 @@ export function applyComponentStateChange(
 ): ComponentState {
   if (component.id === stateChange.id) {
     const property = stateChange.property;
-    const valueOld = (component as unknown as Record<string, unknown>)[
-      property
-    ];
+    const valueOld = getValue(component, property);
     const valueNew = stateChange.value;
     if (valueOld !== valueNew) {
-      return { ...component, [property]: valueNew };
+      return setValue(component, property, valueNew);
     }
   } else if (isContainerState(component)) {
     const containerOld: ContainerState = component;
@@ -135,17 +134,13 @@ export function applyComponentStateChange(
 }
 
 // we export for testing only
-export function applyStateChanges<S extends object>(
-  state: S | undefined,
+export function applyStateChanges<S extends object | undefined>(
+  state: S,
   stateChanges: StateChange[],
-): S | undefined {
+): S {
   stateChanges.forEach((stateChange) => {
-    if (
-      !state ||
-      (state as unknown as Record<string, unknown>)[stateChange.property] !==
-        stateChange.value
-    ) {
-      state = { ...state, [stateChange.property]: stateChange.value } as S;
+    if (!state || getValue(state, stateChange.property) !== stateChange.value) {
+      state = setValue(state, stateChange.property, stateChange.value) as S;
     }
   });
   return state;

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

@@ -27,26 +27,26 @@ function logState(next: StoreState, prev: StoreState) {
   const delta = diff(prev, next);
   const nDiffs = delta.length;
   console.groupCollapsed(
-    `state changed (${nDiffs} difference${nDiffs === 1 ? "" : "s"})`,
+    `dashi: state changed (${nDiffs} difference${nDiffs === 1 ? "" : "s"})`,
   );
   delta.forEach(logDiff);
-  console.debug("Details:", { prev, next, delta });
+  console.debug("dashi: change details:", { prev, next, delta });
   console.groupEnd();
 }
 
 function logDiff(v: Difference, index: number) {
   const wherePart = `%c${index + 1} %c${v.type} %c${v.path.join(".")}`;
   if (v.type === "CREATE") {
-    console.log(wherePart, indexStyle, typeStyle, pathStyle, {
+    console.debug("dashi:", wherePart, indexStyle, typeStyle, pathStyle, {
       value: v.value,
     });
   } else if (v.type === "CHANGE") {
-    console.log(wherePart, indexStyle, typeStyle, pathStyle, {
+    console.debug("dashi:", wherePart, indexStyle, typeStyle, pathStyle, {
       value: v.value,
       oldValue: v.oldValue,
     });
   } else if (v.type === "REMOVE") {
-    console.log(wherePart, indexStyle, typeStyle, pathStyle, {
+    console.debug("dashi:", wherePart, indexStyle, typeStyle, pathStyle, {
       oldValue: v.oldValue,
     });
   }

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

@@ -1,9 +1,9 @@
 import type { Input } from "@/lib/types/model/channel";
 import type { ContributionState } from "@/lib/types/state/contribution";
 import type { ComponentState } from "@/lib/types/state/component";
-import { isSubscriptable } from "@/lib/utils/isSubscriptable";
 import { isContainerState } from "@/lib/actions/helpers/isContainerState";
-import { getValue } from "@/lib/utils/getValue";
+import { getValue } from "@/lib/utils/objPath";
+import { isObject } from "@/lib/utils/isObject";
 
 export function getInputValues<S extends object = object>(
   inputs: Input[],
@@ -47,10 +47,8 @@ export function getInputValueFromComponent(
   input: Input,
   componentState: ComponentState,
 ): unknown {
-  if (componentState.id === input.id && input.property) {
-    return (componentState as unknown as Record<string, unknown>)[
-      input.property
-    ];
+  if (componentState.id === input.id) {
+    return getValue(componentState, input.property);
   } else if (isContainerState(componentState)) {
     for (let i = 0; i < componentState.components.length; i++) {
       const item = componentState.components[i];
@@ -69,20 +67,11 @@ export function getInputValueFromState(
   state: unknown,
 ): unknown | undefined {
   let inputValue: unknown = state;
-  if (input.id && isSubscriptable(inputValue)) {
+  if (input.id && isObject(inputValue)) {
     inputValue = inputValue[input.id];
   }
-  if (isSubscriptable(inputValue)) {
-    const property = input.property;
-    // TODO: The Input.property should be normalized to be a path
-    //   and have type string[].
-    //   See also interface Input in types/model/channel.ts
-    if (property.includes(".")) {
-      const path = property.split(".");
-      inputValue = getValue(inputValue, path);
-    } else {
-      inputValue = inputValue[property];
-    }
+  if (isObject(inputValue)) {
+    inputValue = getValue(inputValue, input.property);
   }
   return inputValue;
 }

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

@@ -1,25 +1,30 @@
 import { store } from "@/lib/store";
 import type { CallbackRequest } from "@/lib/types/model/callback";
-import { fetchApiResult } from "@/lib/utils/fetchApiResult";
-import { fetchStateChangeRequests } from "@/lib/api";
+import { fetchCallback } from "@/lib/api/fetchCallback";
 import { applyStateChangeRequests } from "@/lib/actions/helpers/applyStateChangeRequests";
 
 export function invokeCallbacks(callbackRequests: CallbackRequest[]) {
   const { configuration } = store.getState();
-  const invocationId = getInvocationId();
-  if (import.meta.env.DEV) {
-    console.debug(`invokeCallbacks (${invocationId})-->`, callbackRequests);
+  const shouldLog = configuration.logging?.enabled;
+  if (!callbackRequests.length) {
+    if (shouldLog) {
+      console.info(`dashi: invokeCallbacks - no requests`, callbackRequests);
+    }
+    return;
   }
-  if (callbackRequests.length) {
-    fetchApiResult(
-      fetchStateChangeRequests,
+  const invocationId = getInvocationId();
+  if (shouldLog) {
+    console.info(
+      `dashi: invokeCallbacks (${invocationId})-->`,
       callbackRequests,
-      configuration.api,
-    ).then((changeRequestsResult) => {
+    );
+  }
+  fetchCallback(callbackRequests, configuration.api).then(
+    (changeRequestsResult) => {
       if (changeRequestsResult.data) {
-        if (import.meta.env.DEV) {
-          console.debug(
-            `invokeCallbacks <--(${invocationId})`,
+        if (shouldLog) {
+          console.info(
+            `dashi: invokeCallbacks <--(${invocationId})`,
             changeRequestsResult.data,
           );
         }
@@ -32,8 +37,8 @@ export function invokeCallbacks(callbackRequests: CallbackRequest[]) {
           callbackRequests,
         );
       }
-    });
-  }
+    },
+  );
 }
 
 let invocationCounter = 0;