tests/fixtures/todo-app/index.html


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

<html lang="en">
  <head>
    <title>Task destroyer</title>
    <meta charset="UTF-8" />
    <style>
      body {
        --cssx-children: form#task-input-form #task-list;
      }

      #task-input-form {
        /* prettier-ignore */
        --cssx-on-submit:
          prevent-default()
          add-children(
            task-list,
            instance(div#task-item, map(--text: attr(text-input, 'value')))
          );

        /* prettier-ignore */
        --cssx-children:
          input#text-input[data-testid=add-task-input]
          button#create-task-btn[type=submit][data-testid=add-task-btn]
        ;
      }

      #text-input {
      }
      #create-task-btn {
        --cssx-text: 'Submit';
      }

      [data-instance='task-item'] {
        --text: default text;
        --checked: false;

        --cssx-on-mount: set-attr('data-testid', attr(id));
        --cssx-on-click: update(--checked, if(var(--checked), false, true));
      }
      [data-instance='task-item']::after {
        content: var(--text);
      }
    </style>
  </head>
  <body></body>
</html>