sig-nal/to-do-app.html at main · cloudspeech/sig-nal · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To-Do App</title>
    <script type="module" src="./src/index.js"></script>
  </head>
  <body>
    <h1>To-Do App</h1>
    <input id="newtask" placeholder="New task" />
    <button id="addtask">Add Task</button>
    <ul id="list">
      <template id="item">
        <li>${text}</li>
      </template>
    </ul>
    <!-- prettier-ignore -->
    <sig-nal new="todos" hydrate>
      { "addtask": {"@click": ({signal, nodes:{newtask, item}}) => {
                              signal.value = ['beforeend', html(item, {text: sane(newtask.value)})];
                              newtask.value = ''; }
                   },
        "list":    {":insertAdjacentHTML": rerender}
     }
    </sig-nal>
  </body>
</html>
<!-- COMPARES *VERY* FAVOURABLY TO ALPINE.JS:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do App</title>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>
</head>
<body x-data="{ tasks: [], newTask: '' }">
    <h1>To-Do App</h1>
    <input x-model="newTask" placeholder="New task" />
    <button @click="tasks.push(newTask); newTask = ''">Add Task</button>
    <ul>
        <template x-for="(task, index) in tasks" :key="index">
            <li @click="tasks.splice(index, 1)" x-text="task"></li>
        </template>
    </ul>
</body>
</html>
-->