1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101

import { attr, el, on, series, signal } from "./ef.js";

import { fetchUserInfo } from "./api.js";

const $id = signal("alice");

// Changing this Signal value does not trigger re-render until the body of `series`
// callback evaluates `$retry.get()`.
const $retry = signal(0);

// This element would be reused
// You can test on browser devtool
const retryButton = el(
  "button",
  [
    on("click", () => {
      $retry.update((prev) => prev + 1);
    }),
  ],
  ["Retry (works only for error state)"],
);

document.body.appendChild(
  el(
    "div",
    [],
    [
      el(
        "select",
        [
          on("change", (ev) => {
            if (!(ev.currentTarget instanceof HTMLSelectElement)) {
              return;
            }

            $id.set(ev.currentTarget.value);
          }),
        ],
        [
          el("option", [attr("value", "alice")], ["Alice"]),
          el("option", [attr("value", "bob")], ["Bob"]),
          el("option", [attr("value", "carol")], ["Carol"]),
          el("option", [attr("value", "dave")], ["Dave (does not exist)"]),
        ],
      ),
      series(el("p", [], ["Loading..."]), async function* (ctx, s) {
        try {
          const url = new URL("https://example.com");

          // This `$id.get(ctx)` associates `$id` to the containing `series`.
          // Everytime `$id` updated, the `series` re-runs thanks to this.
          url.searchParams.set("id", $id.get(ctx));

          const user = await fetchUserInfo(new Request(url), s);

          yield el(
            "div",
            [],
            [
              el(
                "dl",
                [],
                [
                  el("dt", [], ["ID"]),
                  el("dd", [], [user.id]),
                  el("dt", [], ["Display Name"]),
                  el("dd", [], [user.displayName]),
                ],
              ),
              // This retry button do nothing because `$retry` is not associated to this `series`.
              retryButton,
            ],
          );

          $retry.set(0);
        } catch (error) {
          yield el(
            "div",
            [],
            [
              el(
                "p",
                [],
                [
                  "Failed to fetch users (retry=",
                  // This association occurs only control enters this `catch` branch.
                  // `ctx` is required here, otherwise calling `$retry.set` does not let
                  // this effect (`series`) to be re-run.
                  $retry.get(ctx).toString(10),
                  "): ",
                  String(error),
                ],
              ),
              retryButton,
            ],
          );
        }
      }),
    ],
  ),
);