zebflow 0.11.14

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

export const page = {
  head: {
    title: "State Sharing Tree",
  },
  navigation: "history",
};

export const app = (() => {
const seed = Number(((input || {}).shared || {}).seed || 0);

  function setValue(ctx, next, label) {
    ctx.set("shared.value", Number(next));
    ctx.set("shared.lastAction", String(label || "unknown"));
    return "shared.value";
  }

  return {
    state: {
      shared: {
        seed,
        value: seed,
        lastAction: "init",
        double: seed * 2
      }
    },
    actions: {
      "tree.c.inc": (ctx) => setValue(ctx, Number(ctx.get("shared.value") || 0) + 1, "inc"),
      "tree.c.dec": (ctx) => setValue(ctx, Number(ctx.get("shared.value") || 0) - 1, "dec"),
      "tree.f.reset": (ctx) => setValue(ctx, Number(ctx.get("shared.seed") || 0), "reset")
    },
    memo: {
      "shared.double.memo": (ctx) => Number(ctx.get("shared.value") || 0) * 2
    },
    effect: {
      "shared.double.sync": {
        deps: ["shared.value"],
        immediate: true,
        run: (ctx) => {
          ctx.set("shared.double", Number(ctx.get("shared.value") || 0) * 2);
        }
      }
    }
  };
})();

export default function Page(input) {
  return (
<Page>
    <main>
      <h1>Shared Root State Across Components</h1>
      <p>SSR seed value: {input.shared.seed}</p>
      <TreeA />
    </main>
</Page>
  );
}