tagu-tagu 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +98 -81
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -6,40 +6,43 @@ A lightweight helper for vanilla `HTMLElement`, with reactivity. No config, no j
6
6
 
7
7
  just a helper for `HTMLElement`:
8
8
 
9
- ```html
10
- <script type="module">
9
+ ```javascript
11
10
  import {button} from "https://cdn.jsdelivr.net/npm/tagu-tagu@1.0.1/dist/bundle.min.js";
12
11
 
13
12
  const myButton = button("Hello!");// `HTMLButtonElement`
14
13
  document.body.appendChild(myButton);
15
- </script>
16
14
  ```
17
15
 
18
16
  with reactivity!
19
17
 
20
- ```html
21
- <script type="module">
22
- import {button, span, Modify, useState} from "https://cdn.jsdelivr.net/npm/tagu-tagu@1.0.1/dist/bundle.min.js";
18
+ ```javascript
19
+ import {button, span, div, useState} from "https://cdn.jsdelivr.net/npm/tagu-tagu@1.0.4/dist/bundle.min.js";
23
20
 
24
- const count = useState(4);
21
+ function CounterExample(){
22
+ const count = useState(4);
25
23
 
26
- function decrementCount() {
27
- count.set(count.get() - 1);
28
- }
29
- function incrementCount() {
30
- count.set(count.get() + 1);
24
+ function decrementCount() {
25
+ count.set(count.get() - 1);
26
+ }
27
+ function incrementCount() {
28
+ count.set(count.get() + 1);
29
+ }
30
+
31
+ return div([
32
+ button("-", { on: { click: decrementCount } }),// `HTMLButtonElement`
33
+ span(count),// `HTMLSpanElement`
34
+ button("+", { on: { click: incrementCount } }),// `HTMLButtonElement`
35
+ ])
31
36
  }
32
37
 
33
- Modify(document.body, [
34
- button("-", { on: { click: decrementCount } }),// `HTMLButtonElement`
35
- span(count),// `HTMLSpanElement`
36
- button("+", { on: { click: incrementCount } }),// `HTMLButtonElement`
37
- ]);
38
- </script>
38
+ document.body.appendChild(CounterExample());
39
39
  ```
40
40
 
41
41
  No need to compile. But typescript is supported.
42
42
 
43
+ ## Examples
44
+ See examples [here](https://dothesimplest.github.io/tagu-tagu/).
45
+
43
46
  ## Features
44
47
 
45
48
  ### Initializers
@@ -52,80 +55,92 @@ button({css: {background: "blue"}}, "Hello!");
52
55
  ### `If`
53
56
 
54
57
  ```typescript
55
- import { div, If, input, Modify, span, useState } from "tagu-tagu";
58
+ import { div, If, input, span, useState } from "tagu-tagu";
56
59
 
57
- const isVisible = useState(false);
60
+ function IfExample() {
61
+ const isVisible = useState(false);
58
62
 
59
- function toggle() {
60
- isVisible.set(!isVisible.get());
61
- }
63
+ function toggle() {
64
+ isVisible.set(!isVisible.get());
65
+ }
62
66
 
63
- Modify(document.body, [
64
- input({
65
- attr: { type: "checkbox", checked: isVisible },
66
- on: { click: toggle },
67
- }),
68
- If(isVisible, () =>
69
- div({
70
- css: { background: "blue", width: "300px", height: "300px" },
67
+ return div([
68
+ input({
69
+ attr: { type: "checkbox", checked: isVisible },
70
+ on: { click: toggle },
71
71
  }),
72
- ),
73
- span("Check to show rectangle"),
74
- ]);
72
+ If(isVisible, () =>
73
+ div({
74
+ css: { background: "blue", width: "300px", height: "300px" },
75
+ }),
76
+ ),
77
+ span("Check to show rectangle"),
78
+ ]);
79
+ }
80
+
81
+ document.body.appendChild(IfExample());
82
+
75
83
  ```
76
84
 
77
85
  ### `Switch`
78
86
 
79
87
  ```typescript
80
- import { button, div, Modify, Switch, useState } from "tagu-tagu";
81
-
82
- const state = useState(
83
- "triangle" as "triangle" | "rectangle" | "circle" | "pentagon",
84
- );
85
-
86
- Modify(document.body, [
87
- button("Triangle", { on: { click: () => state.set("triangle") } }),
88
- button("Rectangle", { on: { click: () => state.set("rectangle") } }),
89
- button("Circle", { on: { click: () => state.set("circle") } }),
90
- button("Pentagon", { on: { click: () => state.set("pentagon") } }),
91
- Switch(
92
- state,
93
- [
94
- { case: "triangle", show: () => div("▲") },
95
- { case: "rectangle", show: () => div("■") },
96
- { case: "circle", show: () => div("●") },
97
- ],
98
- () => div("?"),
99
- ),
100
- ]);
88
+ import { button, div, Switch, useState } from "tagu-tagu";
89
+
90
+ function SwitchExample() {
91
+ const state = useState("triangle");
92
+
93
+ return div([
94
+ button("Triangle", { on: { click: () => state.set("triangle") } }),
95
+ button("Rectangle", { on: { click: () => state.set("rectangle") } }),
96
+ button("Circle", { on: { click: () => state.set("circle") } }),
97
+ button("Pentagon", { on: { click: () => state.set("pentagon") } }),
98
+ Switch(
99
+ state,
100
+ [
101
+ { case: "triangle", show: () => div("▲") },
102
+ { case: "rectangle", show: () => div("■") },
103
+ { case: "circle", show: () => div("●") },
104
+ ],
105
+ () => div("?"),
106
+ ),
107
+ ]);
108
+ }
109
+
110
+ document.body.appendChild(SwitchExample());
101
111
 
102
112
  ```
103
113
 
104
114
  ### `For`
105
115
 
106
116
  ```typescript
107
- import { button, div, For, Modify, useState } from "tagu-tagu";
108
-
109
- const numbers = useState([1, 2, 3].map((n) => ({ n })));
110
-
111
- function addNumber() {
112
- const newNumber = numbers.get().length + 1;
113
- numbers.set([...numbers.get(), { n: newNumber }]);
114
- }
115
- function removeNumber(n: number) {
116
- numbers.set(numbers.get().filter((value) => value.n !== n));
117
+ import { button, div, For, useState } from "tagu-tagu";
118
+
119
+ function ForExample() {
120
+ const numbers = useState([1, 2, 3].map((n) => ({ n })));
121
+ let id = numbers.get().length;
122
+
123
+ function addNumber() {
124
+ id++;
125
+ numbers.set([...numbers.get(), { n: id }]);
126
+ }
127
+ function removeNumber(n: number) {
128
+ numbers.set(numbers.get().filter((value) => value.n !== n));
129
+ }
130
+
131
+ return div([
132
+ div([
133
+ For(numbers, (n) =>
134
+ button(`${n.n}`, {
135
+ on: { click: () => removeNumber(n.n) },
136
+ }),
137
+ ),
138
+ ]),
139
+ button("+", { on: { click: addNumber } }),
140
+ ]);
117
141
  }
118
142
 
119
- Modify(document.body [
120
- div([
121
- For(numbers, (n) =>
122
- button(`${n.n}`, {
123
- on: { click: () => removeNumber(n.n) },
124
- }),
125
- ),
126
- ]),
127
- button("+", { on: { click: addNumber } }),
128
- ]);
143
+ document.body.appendChild(ForExample());
129
144
 
130
145
  ```
131
146
 
@@ -133,7 +148,7 @@ Modify(document.body [
133
148
  You can use data of ancestors.
134
149
 
135
150
  ```typescript
136
- import { button, div, Modify, useBinding, useState } from "tagu-tagu";
151
+ import { button, div, useBinding, useState } from "tagu-tagu";
137
152
 
138
153
  function Sky() {
139
154
  return div("Sky", {
@@ -145,15 +160,17 @@ function Sky() {
145
160
  });
146
161
  }
147
162
 
148
- const theme = useState("dark" as "dark" | "light");
163
+ function DataBindingExample() {
164
+ const theme = useState("dark" as "dark" | "light");
149
165
 
150
- Modify(document.body, [
151
- div({ data: { theme } }, [
166
+ return div({ data: { theme } }, [
152
167
  Sky(),
153
168
  button("dark", { on: { click: () => theme.set("dark") } }),
154
169
  button("light", { on: { click: () => theme.set("light") } }),
155
- ]),
156
- ]);
170
+ ]);
171
+ }
172
+
173
+ document.body.appendChild(DataBindingExample());
157
174
 
158
175
  ```
159
176
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tagu-tagu",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
5
5
  "keywords": [
6
6
  "vanilla",