tagu-tagu 1.0.3 → 1.0.5

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