tagu-tagu 1.0.1 → 1.0.3
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.
- package/README.md +132 -6
- package/dist/bundle.min.js +1 -1
- package/package.json +2 -2
- package/src/data/index.ts +2 -0
- package/src/flow/index.ts +5 -0
- package/src/index.ts +6 -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
|
-
```
|
|
10
|
-
|
|
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("
|
|
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
|
-
```
|
|
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
23
|
|
|
21
24
|
const count = useState(4);
|
|
22
25
|
|
|
@@ -32,4 +35,127 @@ Modify(document.body, [
|
|
|
32
35
|
span(count),// `HTMLSpanElement`
|
|
33
36
|
button("+", { on: { click: incrementCount } }),// `HTMLButtonElement`
|
|
34
37
|
]);
|
|
35
|
-
|
|
38
|
+
</script>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
No need to compile. But typescript is supported.
|
|
42
|
+
|
|
43
|
+
## Features
|
|
44
|
+
|
|
45
|
+
### Initializers
|
|
46
|
+
`tagu-tagu` uses rest parameters. Arguments can be any order.
|
|
47
|
+
```typescript
|
|
48
|
+
button("Hello!", {css: {background: "blue"}});
|
|
49
|
+
button({css: {background: "blue"}}, "Hello!");
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### `If`
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
import { div, If, input, Modify, span, useState } from "tagu-tagu";
|
|
56
|
+
|
|
57
|
+
const isVisible = useState(false);
|
|
58
|
+
|
|
59
|
+
function toggle() {
|
|
60
|
+
isVisible.set(!isVisible.get());
|
|
61
|
+
}
|
|
62
|
+
|
|
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" },
|
|
71
|
+
}),
|
|
72
|
+
),
|
|
73
|
+
span("Check to show rectangle"),
|
|
74
|
+
]);
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### `Switch`
|
|
78
|
+
|
|
79
|
+
```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
|
+
]);
|
|
101
|
+
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### `For`
|
|
105
|
+
|
|
106
|
+
```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
|
+
}
|
|
118
|
+
|
|
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
|
+
]);
|
|
129
|
+
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Data binding
|
|
133
|
+
You can use data of ancestors.
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
import { button, div, Modify, useBinding, useState } from "tagu-tagu";
|
|
137
|
+
|
|
138
|
+
function Sky() {
|
|
139
|
+
return div("Sky", {
|
|
140
|
+
css: {
|
|
141
|
+
background: useBinding("theme", (theme) =>
|
|
142
|
+
theme === "dark" ? "darkblue" : "skyblue",
|
|
143
|
+
),
|
|
144
|
+
},
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
const theme = useState("dark" as "dark" | "light");
|
|
149
|
+
|
|
150
|
+
Modify(document.body, [
|
|
151
|
+
div({ data: { theme } }, [
|
|
152
|
+
Sky(),
|
|
153
|
+
button("dark", { on: { click: () => theme.set("dark") } }),
|
|
154
|
+
button("light", { on: { click: () => theme.set("light") } }),
|
|
155
|
+
]),
|
|
156
|
+
]);
|
|
157
|
+
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## Seamless migration
|
|
161
|
+
Since `tagu-tagu` is just a helper, you can migrate from anywhere.
|
package/dist/bundle.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var S=class{node2Data=new WeakMap;addCallbacks(t,n){if(!n)return;this.node2DescendantCallbacks.has(t)||this.node2DescendantCallbacks.set(t,{});let o=this.node2DescendantCallbacks.get(t);k(o,n);let i=this.node2Data.get(t);
|
|
1
|
+
var S=class{node2Data=new WeakMap;addCallbacks(t,n){if(!n)return;this.node2DescendantCallbacks.has(t)||this.node2DescendantCallbacks.set(t,{});let o=this.node2DescendantCallbacks.get(t);k(o,n);let i=this.node2Data.get(t);N(o,i)}setDataRecord(t,n){n&&this.node2Data.set(t,n)}resolveCallbacks(t,n){let o=(l,f)=>{if(N(f,this.node2Data.get(l)),!!Object.keys(f).length){if(!l.parentElement){this.node2DescendantCallbacks.has(l)||this.node2DescendantCallbacks.set(l,{});let m=this.node2DescendantCallbacks.get(l);m&&k(m,f);return}o(l.parentElement,f)}},i=this.node2DescendantCallbacks.get(n);i&&o(t,i)}node2DescendantCallbacks=new WeakMap};function N(e,t){for(let n in t)if(n in e){for(let o of e[n])o(t[n]);delete e[n]}}var s=new S;function b(e,t){s.addCallbacks(e,$(t)),s.setDataRecord(e,A(t))}function $(e){return H(e,t=>typeof t=="function",t=>[t])}function A(e){return H(e,t=>typeof t!="function")}function H(e,t,n=o=>o){if(!e)return;let o={};for(let i in e){let l=e[i];t(l)&&(o[i]=n(l))}if(Object.keys(o).length)return o}function k(e,t){for(let n in t)e[n]||(e[n]=[]),e[n].push(...t[n])}function D(e,t){if(!e)return;let n=s.node2Data.get(e);return n&&t in n?n[t]:D(e.parentElement,t)}function O(e,t){return new g(e,t)}var g=class{constructor(t,n){this.key=t;this.map=n}};var c=class{next=null;firstNode=null};var p=class{#e;constructor(t){this.#e=t}get=()=>this.#e;set(t){this.#e=t,this.#n("change")}#n(t){this.#t.dispatchEvent(new Event(t))}#t=new EventTarget;on(t,n){this.#t.addEventListener(t,n)}};function V(e){return new p(e)}function R(e,t){let n=new p(t()),o=()=>{n.set(t())};for(let i of e)i.on("change",o);return n}function z(e,t){let n=K(t);q(n);for(let o of n)j(e,o)}function j(e,t){t instanceof c?t.run(e):(s.resolveCallbacks(e,t),e.appendChild(t))}function K(e){return e.map(t=>{if(typeof t=="string"||t instanceof p){let n=document.createTextNode("");return y(t,o=>{n.textContent=o}),n}return t})}function q(e){for(let t=0;t<e.length;t++){let n=e[t];n instanceof c&&(n.next=e[t+1]??null)}}function B(e){let t=e.next;return t===null?null:t instanceof Node?t:t.firstNode?t.firstNode:B(t)}function T(e){let t=B(e);return t?.parentElement?t:null}function y(e,t){if(typeof e=="string")t(e);else{let n=()=>{t(e.get())};n(),e.on("change",n)}}function x(e,t,n){t instanceof g?b(e,{[t.key]:o=>{let l=o instanceof p?R([o],()=>t.map(o.get())):t.map(o);y(l,n)}}):y(t,n)}function P(e,t){t!==void 0&&x(e,t,n=>{e.innerHTML=n})}function F(e,t){t!==void 0&&x(e,t,n=>{e.textContent=n})}function G(e,t){let n=e.style;if(n instanceof CSSStyleDeclaration)for(let o in t){let i=t[o];x(e,i,l=>n.setProperty(o,l))}}function U(e,t){for(let n in t){let o=t[n];x(e,o,i=>{i?e.setAttribute(n,i):e.removeAttribute(n)})}}function W(e,t){for(let n in t){let o=t[n];x(e,o,i=>{e[n]=i})}}function Q(e,t){for(let n in t){let o=e.querySelector(n);o&&C(o,t[n])}}function J(e,t){for(let n in t){let o=e.querySelectorAll(n);for(let i of o)C(i,t[n])}}function X(e,t){for(let n in t){let i=t[n];i&&(typeof i=="function"?e.addEventListener(n,i):e.addEventListener(n,i.listener,i.options))}}function C(e,t){e&&(typeof t=="string"||t instanceof p?F(e,t):Array.isArray(t)?z(e,t):typeof t=="function"?t(e):(P(e,t.html),F(e,t.text),U(e,t.attr),W(e,t.prop),G(e,t.css),Q(e,t.$),J(e,t.$$),X(e,t.on),b(e,t.data)))}function h(e,...t){let n=typeof e=="string"?document.querySelector(e):e;for(let o of t)C(n,o);return n}function ye(e,...t){let n=document.createElementNS("http://www.w3.org/2000/svg",e);return h(n,...t)}function r(e,...t){let n=document.createElement(e);return h(n,...t),n}function he(e,...t){let n=L({html:e}).children[0];return h(n,...t)}function be(...e){return r("h1",...e)}function Ce(...e){return r("h2",...e)}function Le(...e){return r("h3",...e)}function Me(...e){return r("h4",...e)}function we(...e){return r("h5",...e)}function Ie(...e){return r("h6",...e)}function Ne(...e){return r("p",...e)}function ke(...e){return r("section",...e)}function He(...e){return r("button",...e)}function De(...e){return r("span",...e)}function Re(e){function t(n,o){return`${n} {${Object.keys(o).map(i=>`${i}: ${o[i]};`).join("")}}`}return r("style",[Object.keys(e).map(n=>t(n,e[n])).join("")])}function L(...e){return r("div",...e)}function ze(...e){return L({css:{display:"flex"}},...e)}function Be(...e){return r("input",...e)}function Fe(...e){return r("textarea",...e)}function $e(...e){return r("select",...e)}function Ae(...e){return r("option",...e)}function Oe(...e){return r("br",...e)}function Ve(...e){return r("tr",...e)}function je(...e){return r("td",...e)}function Ke(...e){return r("b",...e)}function qe(...e){return r("label",...e)}function Pe(...e){return r("a",...e)}function Ge(...e){return r("blockquote",...e)}function Ue(...e){return r("li",...e)}function We(...e){return r("ol",...e)}function Qe(...e){return r("ul",...e)}function Je(...e){return r("audio",...e)}function Xe(...e){return r("video",...e)}function Ye(...e){return r("img",...e)}function Ze(...e){return r("canvas",...e)}function _e(...e){return r("iframe",...e)}function et(...e){return r("form",...e)}function tt(...e){return r("table",...e)}function nt(...e){return r("tbody",...e)}function ot(...e){return r("hr",...e)}function Y(e,t){return new M(e,t)}var M=class extends c{constructor(n,o){super();this.list=n;this.map=o}run(n){let o=new Map,i=new Map,l=()=>{let f=[];for(let a of this.list.get())o.has(a)||f.push(a);let m=[],d=new Set(this.list.get());for(let a of i.keys()){let u=i.get(a);u&&!d.has(u)&&m.push(a)}for(let a of f){let u=this.map(a),v=typeof u=="string"?document.createTextNode(u):u;s.resolveCallbacks(n,v),i.set(v,a),o.set(a,v)}for(let a of m){a.parentNode?.removeChild(a);let u=i.get(a);i.delete(a),u&&o.delete(u)}for(let a of[...i.keys()])a.parentElement?.removeChild(a);let E=T(this);for(let a of this.list.get())n.insertBefore(o.get(a),E);this.firstNode=o.get(this.list.get()[0])??null};l(),this.list.on("change",()=>{l()})}};function Z(e,t,n){return new w(e,t,n)}var w=class extends c{#e;#n;#t;constructor(t,n,o){super(),this.#e=t,this.#n=n,this.#t=o}run(t){let n,o,i=()=>{let l=T(this);this.#e.get()?(n||(n=this.#n()),s.resolveCallbacks(t,n),this.firstNode=n,o?.remove(),t.insertBefore(n,l)):(o||(o=this.#t?.()),o&&s.resolveCallbacks(t,o),this.firstNode=o??null,n?.remove(),o&&t.insertBefore(o,l))};i(),this.#e.on("change",i)}};function _(e,t,n){return new I(e,t,n)}var I=class extends c{#e;#n;#t;constructor(t,n,o){super(),this.#e=t,this.#n=n,this.#t=o}run(t){let n=new Map,o=new Map;for(let d of this.#n)o.set(d.case,d);let i,l,f=d=>{let E=o.get(d);if(E){if(!n.has(d)){let a=E.show();n.set(d,a)}return n.get(d)}return this.#t&&!l&&(l=this.#t()),l},m=()=>{let d=this.#e.get(),E=T(this),a=f(d);a&&s.resolveCallbacks(t,a),i?.remove(),a&&t.insertBefore(a,E),i=a};m(),this.#e.on("change",m)}};export{c as ControlFlow,ze as FlexDiv,Y as For,R as FromStates,r as Html,Z as If,h as Modify,p as State,ye as Svg,_ as Switch,he as Tag,Pe as a,y as applyStringOrState,Je as audio,Ke as b,Ge as blockquote,Oe as br,He as button,Ze as canvas,L as div,D as findData,et as form,be as h1,Ce as h2,Le as h3,Me as h4,we as h5,Ie as h6,ot as hr,_e as iframe,Ye as img,Be as input,qe as label,Ue as li,We as ol,Ae as option,Ne as p,ke as section,$e as select,De as span,Re as style,tt as table,nt as tbody,je as td,Fe as textarea,Ve as tr,Qe as ul,O as useBinding,V as useState,Xe as video};
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from './State';
|
|
8
|
-
export * from './Tag';
|
|
1
|
+
export * from "./data/index";
|
|
2
|
+
export * from "./Elements";
|
|
3
|
+
export * from "./flow/index";
|
|
4
|
+
export * from "./Modify";
|
|
5
|
+
export * from "./State";
|
|
6
|
+
export * from "./Tag";
|