0.0.21

Author: forman

chartlets.js/CHANGES.md

@@ -1,3 +1,17 @@
+## Version 0.0.21 (from 2024/11/19)
+
+* `Component` children can now also be text nodes (of type `string`).
+
+* `Typography` component has children instead of `text`.
+
+* A component's `children` property can now be changed, even from a
+  scalar.
+
+* Renamed `Dropdown` component into `Select`
+  (to refer to MUI component with same name).
+
+* `Select` component has more flexible options.
+
 ## Version 0.0.20 (from 2024/11/19)
 
 * Using `FrameworkOptions.getDerivedHostState` also in

chartlets.js/src/lib/actions/helpers/applyStateChangeRequests.test.ts

@@ -15,14 +15,14 @@ import {
 const componentTree: ComponentState = {
   type: "Box",
   id: "b1",
-  components: [
+  children: [
     { type: "Plot", id: "p1", chart: null } as PlotState,
     {
       type: "Box",
       id: "b2",
-      components: [
+      children: [
         { type: "Checkbox", id: "cb1", value: true },
-        { type: "Dropdown", id: "dd1", value: 13 },
+        { type: "Select", id: "dd1", value: 13 },
       ],
     },
   ],
@@ -73,7 +73,10 @@ describe("Test that applyContributionChangeRequests()", () => {
     ]);
     expect(newState).not.toBe(contributionsRecord);
     expect(
-      newState["panels"][0].component!.components![1].components![1].value,
+      (
+        (newState["panels"][0].component!.children![1] as ComponentState)
+          .children![1] as ComponentState
+      ).value,
     ).toEqual(14);
   });
 
@@ -94,7 +97,10 @@ describe("Test that applyComponentStateChange()", () => {
       value: false,
     });
     expect(newState).not.toBe(componentTree);
-    expect(newState.components![1].components![0].value).toEqual(false);
+    expect(
+      ((newState.children![1] as ComponentState).children![0] as ComponentState)
+        .value,
+    ).toEqual(false);
   });
 
   it("doesn't change the state if value stays the same", () => {

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

@@ -3,15 +3,16 @@ import type {
   StateChangeRequest,
 } from "@/lib/types/model/callback";
 import { store } from "@/lib/store";
-import type {
-  ComponentState,
-  ContainerState,
+import {
+  type ComponentState,
+  type ContainerState,
+  isComponentState,
+  isContainerState,
 } from "@/lib/types/state/component";
 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";
+import { getValue, normalizeObjPath, setValue } from "@/lib/utils/objPath";
 
 export function applyStateChangeRequests(
   stateChangeRequests: StateChangeRequest[],
@@ -106,26 +107,37 @@ export function applyComponentStateChange(
   stateChange: StateChange,
 ): ComponentState {
   if (component.id === stateChange.id) {
-    const property = stateChange.property;
+    const property = normalizeObjPath(stateChange.property);
     const valueOld = getValue(component, property);
     const valueNew = stateChange.value;
-    if (valueOld !== valueNew) {
+    if (
+      property[property.length - 1] === "children" &&
+      !Array.isArray(valueNew) &&
+      valueNew !== null &&
+      valueNew !== undefined
+    ) {
+      // Special case if the value of "children" is changed:
+      // convert scalar valueNew into one-element array
+      return setValue(component, property, [valueNew]);
+    } else if (valueOld !== valueNew) {
       return setValue(component, property, valueNew);
     }
   } else if (isContainerState(component)) {
     const containerOld: ContainerState = component;
     let containerNew: ContainerState = containerOld;
-    for (let i = 0; i < containerOld.components.length; i++) {
-      const itemOld = containerOld.components[i];
-      const itemNew = applyComponentStateChange(itemOld, stateChange);
-      if (itemNew !== itemOld) {
-        if (containerNew === containerOld) {
-          containerNew = {
-            ...containerOld,
-            components: [...containerOld.components],
-          };
+    for (let i = 0; i < containerOld.children.length; i++) {
+      const itemOld = containerOld.children[i];
+      if (isComponentState(itemOld)) {
+        const itemNew = applyComponentStateChange(itemOld, stateChange);
+        if (itemNew !== itemOld) {
+          if (containerNew === containerOld) {
+            containerNew = {
+              ...containerOld,
+              children: [...containerOld.children],
+            };
+          }
+          containerNew.children[i] = itemNew;
         }
-        containerNew.components[i] = itemNew;
       }
     }
     return containerNew;

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

@@ -9,14 +9,14 @@ import {
 const componentState: ComponentState = {
   type: "Box",
   id: "b1",
-  components: [
+  children: [
     { type: "Plot", id: "p1", chart: null } as PlotState,
     {
       type: "Box",
       id: "b2",
-      components: [
+      children: [
         { type: "Checkbox", id: "cb1", value: true },
-        { type: "Dropdown", id: "dd1", value: 13 },
+        { type: "Select", id: "dd1", value: 13 },
       ],
     },
   ],
@@ -119,15 +119,18 @@ describe("Test that getInputValueFromState()", () => {
 
   it("works with derived state", () => {
     const state = { x: { y: [4, 5, 6] } };
-    const getDerivedState = (_state: object, name: string): number | undefined =>
-        name === "x.ySum"
+    const getDerivedState = (
+      _state: object,
+      name: string,
+    ): number | undefined =>
+      name === "x.ySum"
         ? state.x.y[0] + state.x.y[1] + state.x.y[2]
         : undefined;
     expect(
       getInputValueFromState(
-          { link: "container", property: "x.ySum" },
-          state,
-          getDerivedState,
+        { link: "container", property: "x.ySum" },
+        state,
+        getDerivedState,
       ),
     ).toEqual(4 + 5 + 6);
   });

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

@@ -1,7 +1,10 @@
 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 {
+  type ComponentState,
+  isComponentState,
+  isContainerState,
+} from "@/lib/types/state/component";
 import { formatObjPath, getValue, normalizeObjPath } from "@/lib/utils/objPath";
 import { isObject } from "@/lib/utils/isObject";
 import type { GetDerivedState } from "@/lib/types/state/store";
@@ -56,11 +59,13 @@ export function getInputValueFromComponent(
   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];
-      const itemValue = getInputValueFromComponent(input, item);
-      if (itemValue !== noValue) {
-        return itemValue;
+    for (let i = 0; i < componentState.children.length; i++) {
+      const item = componentState.children[i];
+      if (isComponentState(item)) {
+        const itemValue = getInputValueFromComponent(input, item);
+        if (itemValue !== noValue) {
+          return itemValue;
+        }
       }
     }
   }

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

@@ -1,10 +0,0 @@
-import {
-  type ComponentState,
-  type ContainerState,
-} from "@/lib/types/state/component";
-
-export function isContainerState(
-  component: ComponentState,
-): component is ContainerState {
-  return !!component.components;
-}

chartlets.js/src/lib/components/Box.tsx

@@ -8,7 +8,7 @@ export interface BoxProps extends Omit<BoxState, "type"> {
   onChange: ComponentChangeHandler;
 }
 
-export function Box({ id, style, components, onChange }: BoxProps) {
+export function Box({ id, style, children: components, onChange }: BoxProps) {
   return (
     <MuiBox id={id} style={style}>
       <ComponentChildren components={components} onChange={onChange} />

chartlets.js/src/lib/components/Component.tsx

@@ -3,7 +3,7 @@ import { type ComponentChangeHandler } from "@/lib/types/state/event";
 import { Button, type ButtonProps } from "./Button";
 import { Box, type BoxProps } from "./Box";
 import { Checkbox, type CheckboxProps } from "./Checkbox";
-import { Dropdown, type DropdownProps } from "./Dropdown";
+import { Select, type SelectProps } from "./Select";
 import { Plot, type PlotProps } from "./Plot";
 import { Typography, type TypographyProps } from "@/lib/components/Typography";
 
@@ -12,16 +12,16 @@ export interface ComponentProps extends ComponentState {
 }
 
 export function Component({ type, ...props }: ComponentProps) {
-  // TODO: allow for registering components via their types
+  // TODO: allow for registering children via their types
   //   and make following code generic.
   //
   // const DashiComp = Registry.getComponent(link);
   // return return <DashiComp {...props} />;
   //
   if (type === "Plot") {
     return <Plot {...(props as PlotProps)} />;
-  } else if (type === "Dropdown") {
-    return <Dropdown {...(props as DropdownProps)} />;
+  } else if (type === "Select") {
+    return <Select {...(props as SelectProps)} />;
   } else if (type === "Button") {
     return <Button {...(props as ButtonProps)} />;
   } else if (type === "Box") {

chartlets.js/src/lib/components/ComponentChildren.tsx

@@ -1,9 +1,12 @@
 import { type ComponentChangeHandler } from "@/lib/types/state/event";
-import { type ComponentState } from "@/lib/types/state/component";
+import {
+  type ComponentItem,
+  isComponentState,
+} from "@/lib/types/state/component";
 import { Component } from "./Component";
 
 export interface ComponentChildrenProps {
-  components?: ComponentState[];
+  components?: ComponentItem[];
   onChange: ComponentChangeHandler;
 }
 
@@ -16,9 +19,13 @@ export function ComponentChildren({
   }
   return (
     <>
-      {components.map((component, index) => {
-        const key = component.id || index;
-        return <Component key={key} {...component} onChange={onChange} />;
+      {components.map((item, index) => {
+        if (isComponentState(item)) {
+          const key = item.id || index;
+          return <Component key={key} {...item} onChange={onChange} />;
+        } else {
+          return item;
+        }
       })}
     </>
   );