zdc-runtime 0.1.0

Embeds the ZDeceptron JavaScript runtime and evaluates it without an external toolchain.
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

// Hand-written stand-in for the output of `zdc build examples/counter.zd`.
//
// Source:
//
//   state count   is client Whole starting 0
//   state doubled is client Whole from count * 2
//
//   view
//       Column
//           Heading "Counter"
//           Text count
//           Text doubled
//           Row
//               Button "minus one"  on click: subtract 1 from count
//               Button "plus one"   on click: add 1 to count
//               Button "reset"      on click: set count to 0
//
// The point of this example is `doubled`. There is no dependency array.
// `derived` discovers that it reads `count` by running it and watching the
// read — so extracting `count() * 2` into a helper function could not break
// the reactivity, which is the failure mode Svelte documented when moving
// to runes.

import { signal, derived } from '../signal.js';
import { mount } from '../dom.js';
import { Column, Row, Heading, Text, Button } from '../elements.js';

// `starting` — a mutable source signal.
const [count, setCount] = signal(0);

// `from` — derived, recomputed when what it read changes.
const doubled = derived(() => count() * 2);

export function main(container) {
  return mount(
    Column(undefined, {}, [
      Heading(() => 'Counter'),
      Text(count),
      Text(doubled),
      Row(undefined, {}, [
        Button(() => 'minus one', { onClick: () => setCount(count() - 1) }),
        Button(() => 'plus one', { onClick: () => setCount(count() + 1) }),
        Button(() => 'reset', { onClick: () => setCount(0) }),
      ]),
    ]),
    container
  );
}