tagu-tagu 1.0.1 → 1.0.2

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 (4) hide show
  1. package/README.md +93 -5
  2. package/package.json +1 -1
  3. package/src/data/index.ts +2 -0
  4. package/src/index.ts +9 -8
package/README.md CHANGED
@@ -6,17 +6,20 @@ A lightweight helper for vanilla `HTMLElement`. No config, no jsx — only clean
6
6
 
7
7
  just a helper for `HTMLElement`:
8
8
 
9
- ```javascript
10
- import {button} from "tagu-tagu";
9
+ ```html
10
+ <script type="module">
11
+ import {button} from "https://cdn.jsdelivr.net/npm/tagu-tagu@1.0.1/dist/bundle.min.js";
11
12
 
12
- const myButton = button("Click Me!"); // `HTMLButtonElement`
13
+ const myButton = button("Hello!");// `HTMLButtonElement`
13
14
  document.body.appendChild(myButton);
15
+ </script>
14
16
  ```
15
17
 
16
18
  with reactivity!
17
19
 
18
- ```javascript
19
- import {button, span, Modify, useState} from "tagu-tagu";
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
23
 
21
24
  const count = useState(4);
22
25
 
@@ -32,4 +35,89 @@ Modify(document.body, [
32
35
  span(count),// `HTMLSpanElement`
33
36
  button("+", { on: { click: incrementCount } }),// `HTMLButtonElement`
34
37
  ]);
38
+ </script>
39
+ ```
40
+
41
+ No need to compile. But typescript is supported.
42
+
43
+ ## Features
44
+
45
+ ### `If`
46
+
47
+ ```typescript
48
+ import { div, If, input, Modify, span, useState } from "tagu-tagu";
49
+
50
+ const isVisible = useState(false);
51
+
52
+ function toggle() {
53
+ isVisible.set(!isVisible.get());
54
+ }
55
+
56
+ Modify(document.body, [
57
+ input({
58
+ attr: { type: "checkbox", checked: isVisible },
59
+ on: { click: toggle },
60
+ }),
61
+ If(isVisible, () =>
62
+ div({
63
+ css: { background: "blue", width: "300px", height: "300px" },
64
+ }),
65
+ ),
66
+ span("Check to show rectangle"),
67
+ ]);
68
+ ```
69
+
70
+ ### `Switch`
71
+
72
+ ```typescript
73
+ import { button, div, Modify, Switch, useState } from "tagu-tagu";
74
+
75
+ const state = useState(
76
+ "triangle" as "triangle" | "rectangle" | "circle" | "pentagon",
77
+ );
78
+
79
+ Modify(document.body, [
80
+ button("Triangle", { on: { click: () => state.set("triangle") } }),
81
+ button("Rectangle", { on: { click: () => state.set("rectangle") } }),
82
+ button("Circle", { on: { click: () => state.set("circle") } }),
83
+ button("Pentagon", { on: { click: () => state.set("pentagon") } }),
84
+ Switch(
85
+ state,
86
+ [
87
+ { case: "triangle", show: () => div("▲") },
88
+ { case: "rectangle", show: () => div("■") },
89
+ { case: "circle", show: () => div("●") },
90
+ ],
91
+ () => div("?"),
92
+ ),
93
+ ]);
94
+
95
+ ```
96
+
97
+ ### `For`
98
+
99
+ ```typescript
100
+ import { button, div, For, Modify, useState } from "tagu-tagu";
101
+
102
+ const numbers = useState([1, 2, 3].map((n) => ({ n })));
103
+
104
+ function addNumber() {
105
+ const newNumber = numbers.get().length + 1;
106
+ numbers.set([...numbers.get(), { n: newNumber }]);
107
+ }
108
+ function removeNumber(n: number) {
109
+ numbers.set(numbers.get().filter((value) => value.n !== n));
110
+ }
111
+
112
+ Modify(document.body [
113
+ div([
114
+ For(numbers, (n) =>
115
+ button(`${n.n}`, {
116
+ on: { click: () => removeNumber(n.n) },
117
+ }),
118
+ ),
119
+ ]),
120
+ button("+", { on: { click: addNumber } }),
121
+ ]);
122
+
35
123
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tagu-tagu",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "A lightweight helper for vanilla `HTMLElement`.",
5
5
  "keywords": [
6
6
  "vanilla"
package/src/data/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { findData } from "./data";
2
+ export { useBinding } from "./useBinding";
package/src/index.ts CHANGED
@@ -1,8 +1,9 @@
1
- export * from './Elements';
2
- export * from './flow/For';
3
- export * from './flow/If';
4
- export * from './flow/Switch';
5
- export * from './flow/SwitchBlockState';
6
- export * from './Modify';
7
- export * from './State';
8
- export * from './Tag';
1
+ export * from "./data/index";
2
+ export * from "./Elements";
3
+ export * from "./flow/For";
4
+ export * from "./flow/If";
5
+ export * from "./flow/Switch";
6
+ export * from "./flow/SwitchBlockState";
7
+ export * from "./Modify";
8
+ export * from "./State";
9
+ export * from "./Tag";