0.0.20

Author: forman

chartlets.js/CHANGES.md

@@ -0,0 +1,30 @@
+## Version 0.0.20 (from 2024/11/19)
+
+* Using `FrameworkOptions.getDerivedHostState` also in
+  `handleHostStoreChange()`.
+
+* Actions `handleComponentChange()` and `handleHostStoreChange()`
+  now exit immediately, if no extensions are configured yet.
+
+* Module `utils.objPath`: Renamed `toObjPath` into `normalizeObjPath`, 
+  added `formatObjPath`.
+
+## Version 0.0.19 (from 2024/11/18)
+
+* Fixed TypeScript typing issues with `configureFramework<S>()` and
+  `FrameworkOptions`.
+  
+## Version 0.0.18 (from 2024/11/18)
+
+* Fixed TypeScript typing issues with `configureFramework<S>()` and 
+  `FrameworkOptions`. 
+
+## Version 0.0.17 (from 2024/11/18)
+
+* Enhanced interface `FrameworkOptions` by property `getDerivedHostState`,
+  which is a user-supplied function that can compute derived
+  host state property. 
+  
+## Version 0.0.16 (from 2024/11/12)
+
+Initial, still experimental version. 

chartlets.js/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [
@@ -18,10 +18,10 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/bcdev/charlet.git"
+    "url": "https://github.com/bcdev/chartlets.git"
   },
   "bugs": {
-    "url": "https://github.com/bcdev/charlet/issues"
+    "url": "https://github.com/bcdev/chartlets/issues"
   },
   "homepage": "https://github.com/bcdev/charlet/blob/main/chartlets/README.md",
   "author": "Brockmann Consult GmbH",

chartlets.js/package.json

@@ -12,6 +12,10 @@ export function handleComponentChange(
   contribIndex: number,
   changeEvent: ComponentChangeEvent,
 ) {
+  if (store.getState().extensions.length === 0) {
+    // Exit immediately if there are no extensions (yet)
+    return;
+  }
   // Apply actual component state change immediately
   applyStateChangeRequests([
     {

chartlets.js/src/lib/actions/handleComponentChange.ts

@@ -7,9 +7,15 @@ 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 ObjPath, toObjPath } from "@/lib/utils/objPath";
+import {
+  getValue,
+  type ObjPath,
+  normalizeObjPath,
+  formatObjPath,
+} from "@/lib/utils/objPath";
 import { invokeCallbacks } from "@/lib/actions/helpers/invokeCallbacks";
 import type { ContributionState } from "@/lib/types/state/contribution";
+import type { GetDerivedState } from "@/lib/types/state/store";
 
 /**
  * A reference to a property of an input of a callback of a contribution.
@@ -23,11 +29,17 @@ export function handleHostStoreChange<S extends object = object>(
   currState: S,
   prevState: S,
 ) {
-  const { contributionsRecord } = store.getState();
+  if (store.getState().extensions.length === 0) {
+    // Exit immediately if there are no extensions (yet)
+    return;
+  }
+  const { configuration, contributionsRecord } = store.getState();
+  const { getDerivedHostState } = configuration;
   const callbackRequests = getCallbackRequests(
     contributionsRecord,
     currState,
     prevState,
+    getDerivedHostState,
   );
   invokeCallbacks(callbackRequests);
 }
@@ -36,10 +48,16 @@ function getCallbackRequests<S extends object = object>(
   contributionsRecord: Record<string, ContributionState[]>,
   hostState: S,
   prevHostState: S,
+  getDerivedHostState: GetDerivedState<S> | undefined,
 ): CallbackRequest[] {
   return getHostStorePropertyRefs()
     .filter((propertyRef) =>
-      hasPropertyChanged(propertyRef.propertyPath, hostState, prevHostState),
+      hasPropertyChanged(
+        propertyRef.propertyPath,
+        hostState,
+        prevHostState,
+        getDerivedHostState,
+      ),
     )
     .map((propertyRef) => {
       const contributions = contributionsRecord[propertyRef.contribPoint];
@@ -49,6 +67,7 @@ function getCallbackRequests<S extends object = object>(
         callback.inputs!,
         contribution,
         hostState,
+        getDerivedHostState as GetDerivedState,
       );
       return { ...propertyRef, inputValues };
     });
@@ -74,7 +93,7 @@ function getHostStorePropertyRefs(): PropertyRef[] {
                 contribIndex,
                 callbackIndex,
                 inputIndex,
-                propertyPath: toObjPath(input.property!),
+                propertyPath: normalizeObjPath(input.property!),
               });
             }
           }),
@@ -89,8 +108,20 @@ function hasPropertyChanged<S extends object = object>(
   propertyPath: ObjPath,
   currState: S,
   prevState: S,
+  getDerivedHostState: GetDerivedState<S> | undefined,
 ): boolean {
   const currValue = getValue(currState, propertyPath);
   const prevValue = getValue(prevState, propertyPath);
+  if (
+    currValue === undefined &&
+    prevValue === undefined &&
+    getDerivedHostState !== undefined
+  ) {
+    const propertyName = formatObjPath(propertyPath);
+    return !Object.is(
+      getDerivedHostState(currState, propertyName),
+      getDerivedHostState(prevState, propertyName),
+    );
+  }
   return !Object.is(currValue, prevValue);
 }

chartlets.js/src/lib/actions/handleHostStoreChange.ts

@@ -2,14 +2,15 @@ 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 { isContainerState } from "@/lib/actions/helpers/isContainerState";
-import { getValue, toObjPath } from '@/lib/utils/objPath';
+import { formatObjPath, getValue, normalizeObjPath } from "@/lib/utils/objPath";
 import { isObject } from "@/lib/utils/isObject";
+import type { GetDerivedState } from "@/lib/types/state/store";
 
 export function getInputValues<S extends object = object>(
   inputs: Input[],
   contributionState: ContributionState,
   hostState?: S | undefined,
-  getDerivedHostState?: (hostState: object, property: string) => unknown,
+  getDerivedHostState?: GetDerivedState,
 ): unknown[] {
   return inputs.map((input) =>
     getInputValue(input, contributionState, hostState, getDerivedHostState),
@@ -22,7 +23,7 @@ export function getInputValue<S extends object = object>(
   input: Input,
   contributionState: ContributionState,
   hostState?: S,
-  getDerivedHostState?: (hostState: object, propertyName: string) => unknown,
+  getDerivedHostState?: GetDerivedState<S>,
 ): unknown {
   let inputValue: unknown = undefined;
   const dataSource = input.link || "component";
@@ -31,7 +32,11 @@ export function getInputValue<S extends object = object>(
   } else if (dataSource === "container" && contributionState.container) {
     inputValue = getInputValueFromState(input, contributionState.container);
   } else if (dataSource === "app" && hostState) {
-    inputValue = getInputValueFromState(input, hostState, getDerivedHostState);
+    inputValue = getInputValueFromState(
+      input,
+      hostState,
+      getDerivedHostState as GetDerivedState,
+    );
   } else {
     console.warn(`input with unknown data source:`, input);
   }
@@ -66,19 +71,18 @@ export function getInputValueFromComponent(
 export function getInputValueFromState(
   input: Input,
   state: object | undefined,
-  getDerivedState?: (state: object, propertyName: string) => unknown,
+  getDerivedState?: GetDerivedState,
 ): unknown {
   let inputValue: unknown = state;
   if (input.id && isObject(inputValue)) {
     inputValue = inputValue[input.id];
   }
   if (isObject(inputValue)) {
     const state = inputValue;
-    const property = toObjPath(input.property);
+    const property = normalizeObjPath(input.property);
     inputValue = getValue(state, property);
     if (inputValue === undefined && getDerivedState !== undefined) {
-      const propertyName = property.map(v => typeof v === "number" ? v.toString() : v).join(".");
-      inputValue = getDerivedState(state, propertyName);
+      inputValue = getDerivedState(state, formatObjPath(input.property));
     }
   }
   return inputValue;

chartlets.js/src/lib/actions/helpers/getInputValues.ts

@@ -1,6 +1,6 @@
 import { type Contributions } from "@/lib/types/model/extension";
 import { type Callback } from "@/lib/types/model/callback";
-import { toObjPath } from "@/lib/utils/objPath";
+import { normalizeObjPath } from "@/lib/utils/objPath";
 import { mapObject } from "@/lib/utils/mapObject";
 import type { Contribution } from "@/lib/types/model/contribution";
 import type { Channel } from "@/lib/types/model/channel";
@@ -61,6 +61,6 @@ function normalizeChannels<S extends Channel>(channels: S[]): S[] {
 function normalizeChannel<S extends Channel>(channel: S): S {
   return {
     ...channel,
-    property: toObjPath(channel.property),
+    property: normalizeObjPath(channel.property),
   };
 }

chartlets.js/src/lib/api/fetchContributions.ts

@@ -9,11 +9,16 @@ import type { ContributionState } from "@/lib/types/state/contribution";
 import type { ApiOptions, ApiResult } from "@/lib/types/api";
 import type { LoggingOptions } from "@/lib/actions/helpers/configureLogging";
 
+export type GetDerivedState<S extends object = object> = (
+  hostState: S,
+  propertyName: string,
+) => unknown;
+
 export interface FrameworkOptions<S extends object = object> {
   /** The host applications state management store. */
   hostStore?: StoreApi<S>;
   /** Get a derived state from given host state. */
-  getDerivedHostState?: (hostState: S, propertyName: string) => unknown;
+  getDerivedHostState?: GetDerivedState<S>;
   /** API options to configure backend. */
   api?: ApiOptions;
   /** Logging options. */

chartlets.js/src/lib/types/state/store.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 
-import { equalObjPaths, getValue, setValue, toObjPath } from "./objPath";
+import { equalObjPaths, getValue, setValue, normalizeObjPath } from "./objPath";
 
 describe("Test that getValue()", () => {
   it("works on 0th level", () => {
@@ -72,30 +72,30 @@ describe("Test that setValue()", () => {
   });
 });
 
-describe("Test that toObjPath()", () => {
+describe("Test that normalizeObjPath()", () => {
   it("does not convert arrays", () => {
     const value = [1, 2, 3];
-    expect(toObjPath(value)).toBe(value);
-    expect(toObjPath(value)).toEqual([1, 2, 3]);
+    expect(normalizeObjPath(value)).toBe(value);
+    expect(normalizeObjPath(value)).toEqual([1, 2, 3]);
   });
 
   it("converts undefined", () => {
-    expect(toObjPath(undefined)).toEqual([]);
+    expect(normalizeObjPath(undefined)).toEqual([]);
   });
 
   it("converts null", () => {
-    expect(toObjPath(null)).toEqual([]);
+    expect(normalizeObjPath(null)).toEqual([]);
   });
 
   it("converts numbers", () => {
-    expect(toObjPath(3)).toEqual([3]);
+    expect(normalizeObjPath(3)).toEqual([3]);
   });
 
   it("converts strings", () => {
-    expect(toObjPath("")).toEqual([]);
-    expect(toObjPath("colors")).toEqual(["colors"]);
-    expect(toObjPath("colors.6")).toEqual(["colors", 6]);
-    expect(toObjPath("colors.6.red")).toEqual(["colors", 6, "red"]);
+    expect(normalizeObjPath("")).toEqual([]);
+    expect(normalizeObjPath("colors")).toEqual(["colors"]);
+    expect(normalizeObjPath("colors.6")).toEqual(["colors", 6]);
+    expect(normalizeObjPath("colors.6.red")).toEqual(["colors", 6, "red"]);
   });
 });
 

chartlets.js/src/lib/utils/objPath.test.ts

@@ -6,7 +6,7 @@ export type ObjPathLike = ObjPath | string | number | undefined | null;
 type Obj = Record<string | number, unknown>;
 
 export function getValue(obj: object | undefined, path: ObjPathLike): unknown {
-  path = toObjPath(path);
+  path = normalizeObjPath(path);
   let value: unknown = obj;
   for (const key of path) {
     if (isObject(value)) {
@@ -23,7 +23,7 @@ export function setValue<S extends object | undefined>(
   path: ObjPathLike,
   value: unknown,
 ): S {
-  return _setValue(obj, toObjPath(path), value);
+  return _setValue(obj, normalizeObjPath(path), value);
 }
 
 function _setValue<S extends object | undefined>(
@@ -63,7 +63,7 @@ function _setValue<S extends object | undefined>(
   return obj;
 }
 
-export function toObjPath(pathLike: ObjPathLike): ObjPath {
+export function normalizeObjPath(pathLike: ObjPathLike): ObjPath {
   if (Array.isArray(pathLike)) {
     return pathLike as ObjPath;
   } else if (!pathLike || pathLike === "") {
@@ -82,12 +82,25 @@ export function toObjPath(pathLike: ObjPathLike): ObjPath {
   }
 }
 
+export function formatObjPath(objPath: ObjPathLike): string {
+  if (typeof objPath === "string") {
+    return objPath;
+  } else if (Array.isArray(objPath)) {
+    return objPath
+      .map((key) => (typeof key === "number" ? key.toString() : key))
+      .join(".");
+  } else if (typeof objPath === "number") {
+    return objPath.toString();
+  }
+  return "";
+}
+
 export function equalObjPaths(pathLike1: ObjPathLike, pathLike2: ObjPathLike) {
   if (pathLike1 === pathLike2) {
     return true;
   }
-  const path1 = toObjPath(pathLike1);
-  const path2 = toObjPath(pathLike2);
+  const path1 = normalizeObjPath(pathLike1);
+  const path2 = normalizeObjPath(pathLike2);
   return (
     path1.length === path2.length &&
     path1.every((item, index) => item === path2[index])