feat(): add support for context.set and state.set (like React setState)

Author: weareoutman

packages/runtime/src/internal/bindListeners.ts

@@ -223,6 +223,7 @@ export function listenerFactory(
           case "context.replace":
           case "context.refresh":
           case "context.load":
+          case "context.set":
             handleContextAction(
               event,
               method,
@@ -236,6 +237,7 @@ export function listenerFactory(
           case "state.update":
           case "state.refresh":
           case "state.load":
+          case "state.set":
             handleTplStateAction(
               event,
               method,
@@ -687,7 +689,7 @@ function batchUpdate(
 
 function handleContextAction(
   event: Event,
-  method: "assign" | "replace",
+  method: "assign" | "replace" | "refresh" | "load" | "set",
   args: unknown[] | undefined,
   batch: boolean,
   callback: BrickEventHandlerCallback | undefined,
@@ -717,7 +719,7 @@ function handleContextAction(
 
 function handleTplStateAction(
   event: Event,
-  method: "update" | "refresh" | "load",
+  method: "update" | "refresh" | "load" | "set",
   args: unknown[] | undefined,
   batch: boolean,
   callback: BrickEventHandlerCallback | undefined,

packages/runtime/src/internal/data/DataStore.spec.ts

@@ -378,6 +378,43 @@ describe("DataStore", () => {
     expect(mockCallRealTimeDataInspectHooks).toHaveBeenCalledTimes(2);
   });
 
+  test("context.set", async () => {
+    setRealTimeDataInspectRoot({});
+    const ctxStore = new DataStore("CTX");
+    const runtimeContext = {
+      ctxStore,
+    } as Partial<RuntimeContext> as RuntimeContext;
+    ctxStore.define(
+      [
+        {
+          name: "primitive",
+          value: "any",
+          onChange: {
+            action: "context.set",
+            args: ["count", "<% (count) => count + 1 %>"],
+          },
+        },
+        {
+          name: "count",
+          value: 0,
+        },
+      ],
+      runtimeContext
+    );
+    await ctxStore.waitForAll();
+    expect(ctxStore.getValue("primitive")).toEqual("any");
+    expect(ctxStore.getValue("count")).toBe(0);
+
+    const newValue = { amount: 42 };
+    ctxStore.updateValue("primitive", newValue, "set");
+    expect(ctxStore.getValue("primitive")).toEqual({ amount: 42 });
+    expect(ctxStore.getValue("count")).toBe(1);
+
+    ctxStore.updateValue("primitive", newValue, "set");
+    expect(ctxStore.getValue("primitive")).toEqual({ amount: 42 });
+    expect(ctxStore.getValue("count")).toBe(1);
+  });
+
   test("state and onChange", async () => {
     jest.useFakeTimers();
     const tplStateStoreId = "tpl-state-1";

packages/runtime/src/internal/data/DataStore.ts

@@ -193,7 +193,7 @@ export class DataStore<T extends DataStoreType = "CTX"> {
   updateValue(
     name: string,
     value: unknown,
-    method: "assign" | "replace" | "refresh" | "load",
+    method: "assign" | "replace" | "refresh" | "load" | "set",
     callback?: BrickEventHandlerCallback,
     callbackRuntimeContext?: RuntimeContext
   ): void {
@@ -276,7 +276,7 @@ export class DataStore<T extends DataStoreType = "CTX"> {
 
     if (method === "replace") {
       item.value = value;
-    } else {
+    } else if (method === "assign") {
       if (isObject(item.value)) {
         Object.assign(item.value, value);
       } else {
@@ -286,6 +286,19 @@ export class DataStore<T extends DataStoreType = "CTX"> {
         );
         item.value = value;
       }
+    } else {
+      // method === "set"
+      // `context.set` and `state.set` is similar to React's setState,
+      // which accepts either a value or an updater function.
+      // And if the new value is the same as the current one, do nothing.
+      let nextValue = value;
+      if (typeof value === "function") {
+        nextValue = (value as (prevState: unknown) => unknown)(item.value);
+      }
+      if (Object.is(item.value, nextValue)) {
+        return;
+      }
+      item.value = nextValue;
     }
 
     if (this.batchUpdate) return;

packages/types/src/manifest.ts

@@ -980,11 +980,13 @@ export interface BuiltinBrickEventHandler {
     | "context.replace"
     | "context.refresh"
     | "context.load"
+    | "context.set"
 
     // Update template state
     | "state.update"
     | "state.refresh"
     | "state.load"
+    | "state.set"
 
     // Find related tpl and dispatch event.
     | "tpl.dispatchEvent"