Merge branch 'refs/heads/main' into yogesh-41-skeleton

# Conflicts:
#	chartlets.js/packages/lib/src/actions/handleHostStoreChange.ts
#	chartlets.js/packages/lib/src/store.ts
#	chartlets.js/packages/lib/src/types/state/store.ts

Author: b-yogesh

chartlets.js/CHANGES.md

@@ -3,6 +3,8 @@
 * Add `multiple` property for `Select` component to enable the selection
   of multiple elements. The `default` mode is supported at the moment.
 
+* Callbacks will now only be invoked when there’s an actual change in state, 
+  reducing unnecessary processing and improving performance. (#112)
 
 ## Version 0.1.4 (from 2025/03/06)
 

chartlets.js/package-lock.json

@@ -1,6 +1,12 @@
-import { describe, it, expect, beforeEach } from "vitest";
+import { beforeEach, describe, expect, it } from "vitest";
 import { store } from "@/store";
-import { handleHostStoreChange } from "./handleHostStoreChange";
+import {
+  getCallbackRequests,
+  handleHostStoreChange,
+  type PropertyRef,
+} from "./handleHostStoreChange";
+import type { ContribPoint } from "@/types/model/extension";
+import type { ContributionState } from "@/types/state/contribution";
 
 describe("handleHostStoreChange", () => {
   let listeners: (() => void)[] = [];
@@ -15,10 +21,12 @@ describe("handleHostStoreChange", () => {
       listeners.push(_l);
     },
   };
+  let lastCallbackInputValues: Record<string, unknown[]> = {};
 
   beforeEach(() => {
     listeners = [];
     hostState = {};
+    lastCallbackInputValues = {};
   });
 
   it("should do nothing without host store", () => {
@@ -78,8 +86,137 @@ describe("handleHostStoreChange", () => {
           },
         },
       },
+      contributionsRecord: {
+        panel: [
+          {
+            name: "p0",
+            container: { title: "Panel A" },
+            extension: "e0",
+            componentResult: {},
+            initialState: {},
+            callbacks: [
+              {
+                function: {
+                  name: "callback",
+                  parameters: [],
+                  return: {},
+                },
+                inputs: [{ id: "@app", property: "variableName" }],
+                outputs: [{ id: "select", property: "value" }],
+              },
+            ],
+          },
+        ],
+      },
     });
     hostStore.set("variableName", "CHL");
     handleHostStoreChange();
+
+    // calling it second time for coverage. No state change changes the
+    // control flow
+    handleHostStoreChange();
+    //   TODO: Update this test to assert the generated callback request
+  });
+
+  it("should memoize second call with same arguments", () => {
+    const extensions = [{ name: "ext", version: "0", contributes: ["panels"] }];
+    store.setState({
+      configuration: { hostStore, logging: { enabled: false } },
+      extensions,
+      contributionsResult: {
+        status: "ok",
+        data: {
+          extensions,
+          contributions: {
+            panels: [
+              {
+                name: "ext.p1",
+                extension: "ext",
+                layout: {
+                  function: {
+                    name: "layout",
+                    parameters: [],
+                    return: {},
+                  },
+                  inputs: [],
+                  outputs: [],
+                },
+                callbacks: [
+                  {
+                    function: {
+                      name: "callback",
+                      parameters: [],
+                      return: {},
+                    },
+                    inputs: [{ id: "@app", property: "variableName" }],
+                  },
+                ],
+                initialState: {},
+              },
+            ],
+          },
+        },
+      },
+      lastCallbackInputValues: lastCallbackInputValues,
+    });
+    const propertyRefs: PropertyRef[] = [
+      {
+        contribPoint: "panel",
+        contribIndex: 0,
+        callbackIndex: 0,
+        property: "value",
+        inputIndex: 0,
+      },
+    ];
+    const contributionsRecord: Record<ContribPoint, ContributionState[]> = {
+      panel: [
+        {
+          name: "ext.p1",
+          container: { title: "Panel A" },
+          extension: "ext",
+          componentResult: {},
+          initialState: { title: "Panel A" },
+          callbacks: [
+            {
+              function: {
+                name: "callback",
+                parameters: [{ name: "param1" }],
+                return: {},
+              },
+              inputs: [{ id: "@app", property: "variableName" }],
+            },
+          ],
+        },
+      ],
+    };
+
+    hostStore.set("variableName", "CHL");
+
+    // first call -> should create callback request
+    let result = getCallbackRequests(
+      propertyRefs,
+      contributionsRecord,
+      hostStore,
+    );
+    expect(result[0]).toEqual({
+      ...propertyRefs[0],
+      inputValues: ["CHL"],
+    });
+
+    // second call -> memoized -> should not create callback request
+    result = getCallbackRequests(propertyRefs, contributionsRecord, hostStore);
+    expect(result).toEqual([undefined]);
+
+    // Third call - change state -> should create callback request
+    hostStore.set("variableName", "TMP");
+    result = getCallbackRequests(propertyRefs, contributionsRecord, hostStore);
+    expect(result[0]).toEqual({
+      ...propertyRefs[0],
+      inputValues: ["TMP"],
+    });
+
+    // fourth call -> memoized -> should not invoke callback
+    result = getCallbackRequests(propertyRefs, contributionsRecord, hostStore);
+    expect(result).toEqual([undefined]);
   });
 });

chartlets.js/packages/lib/src/actions/handleHostStoreChanges.test.tsx

@@ -26,7 +26,7 @@ export function getInputValues(
 
 const noValue = {};
 
-export function getInputValue(
+function getInputValue(
   input: Input,
   contributionState: ContributionState,
   hostStore?: HostStore,