laaWebComponentLibrary/index.html at main · Laaouatni/laaWebComponentLibrary · 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="https://cdn.tailwindcss.com"></script>
  <script src="./laaWebComponentLibrary.js"></script>
  <script>
    let testArray = [1, 25, 3, 99, 5, 5];
    const globalState = new laaState({ d: 99, testArray: [1,2,5,78,99,18,66] });
    document.addEventListener("click", () => {
      globalState.state.testArray = [...globalState.state.testArray, Math.floor(Math.random() * 100)];
    })
  </script>
</head>

<body class="grid gap-8 p-2">
  <laa-for thisArray="globalState.state.testArray" thisValue="thisValue" thisIndex="thisIndex" class="grid gap-4">
    <div class="outline rounded-lg">
      <laa-parent class="p-2">
        <div class="!flex">thisValue: <span data-var="thisComponent.state.thisIndex"></span></div>
      </laa-parent>
      <div class="p-2">
        <div>thisValue: <span data-var="thisComponent.state.thisValue"></span></div>
      </div>
    </div>
    <laa-a class="p-2"></laa-a>
  </laa-for>

  <template id="laa-a">
    span: <span data-var="thisComponent.state.a"></span>
    <slot></slot>
    <script>
      (() => {
        let thisComponent = document.currentScript.parentElement;
        thisComponent.state['a'] = 0;
        thisComponent.addEventListener('click', (e) => {
          e.stopPropagation();
          thisComponent.state['a']++
        });
      })()
    </script>
  </template>

  <template id="laa-parent" class="{thisComponent.state.a>3?'bg-green-500':'bg-slate-500'}">
    <div>
      a: <span data-var="thisComponent.state.a"></span>
      + b: <span data-var="thisComponent.state.b"></span>
      = c: <span data-var="thisComponent.state.c"></span>
      ....
      d: <span data-var="thisComponent.state.d"></span>
    </div>
    <slot></slot>
    <script>
        (() => {
          let thisComponent = document.currentScript.parentElement;

          thisComponent.state['a'] = 0;
          thisComponent.state['b'] = 0;

          thisComponent.state['d'] = globalState.state.d;
          globalState.listenToVariableChange('d', (value) => {
            thisComponent.state['d'] = value;
          });

          thisComponent.state['c'] = () => thisComponent.state['a'] + thisComponent.state['b'] + globalState.state.d;

          thisComponent.addEventListener('click', (e) => {
            e.stopPropagation();
            thisComponent.state['a']++
            globalState.state.d++;
          });
        })();
    </script>
  </template>
</body>

</html>