tagu-tagu 1.0.5 → 1.0.7
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 +11 -13
- package/dist/bundle.min.js +1 -1
- package/package.json +3 -2
- package/src/flow/index.ts +1 -1
package/README.md
CHANGED
|
@@ -6,13 +6,11 @@ A lightweight helper for vanilla `HTMLElement`, with reactivity. No config, no j
|
|
|
6
6
|
|
|
7
7
|
just a helper for `HTMLElement`:
|
|
8
8
|
|
|
9
|
-
```
|
|
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!
|
|
@@ -20,7 +18,7 @@ with reactivity!
|
|
|
20
18
|
```javascript
|
|
21
19
|
import {button, span, div, useState} from "https://cdn.jsdelivr.net/npm/tagu-tagu@1.0.4/dist/bundle.min.js";
|
|
22
20
|
|
|
23
|
-
function
|
|
21
|
+
function CounterExample(){
|
|
24
22
|
const count = useState(4);
|
|
25
23
|
|
|
26
24
|
function decrementCount() {
|
|
@@ -37,7 +35,7 @@ function CounterDemo(){
|
|
|
37
35
|
])
|
|
38
36
|
}
|
|
39
37
|
|
|
40
|
-
document.body.appendChild(
|
|
38
|
+
document.body.appendChild(CounterExample());
|
|
41
39
|
```
|
|
42
40
|
|
|
43
41
|
No need to compile. But typescript is supported.
|
|
@@ -59,7 +57,7 @@ button({css: {background: "blue"}}, "Hello!");
|
|
|
59
57
|
```typescript
|
|
60
58
|
import { div, If, input, span, useState } from "tagu-tagu";
|
|
61
59
|
|
|
62
|
-
function
|
|
60
|
+
function IfExample() {
|
|
63
61
|
const isVisible = useState(false);
|
|
64
62
|
|
|
65
63
|
function toggle() {
|
|
@@ -80,7 +78,7 @@ function IfDemo() {
|
|
|
80
78
|
]);
|
|
81
79
|
}
|
|
82
80
|
|
|
83
|
-
document.body.appendChild(
|
|
81
|
+
document.body.appendChild(IfExample());
|
|
84
82
|
|
|
85
83
|
```
|
|
86
84
|
|
|
@@ -89,7 +87,7 @@ document.body.appendChild(IfDemo());
|
|
|
89
87
|
```typescript
|
|
90
88
|
import { button, div, Switch, useState } from "tagu-tagu";
|
|
91
89
|
|
|
92
|
-
function
|
|
90
|
+
function SwitchExample() {
|
|
93
91
|
const state = useState("triangle");
|
|
94
92
|
|
|
95
93
|
return div([
|
|
@@ -109,7 +107,7 @@ function SwitchDemo() {
|
|
|
109
107
|
]);
|
|
110
108
|
}
|
|
111
109
|
|
|
112
|
-
document.body.appendChild(
|
|
110
|
+
document.body.appendChild(SwitchExample());
|
|
113
111
|
|
|
114
112
|
```
|
|
115
113
|
|
|
@@ -118,7 +116,7 @@ document.body.appendChild(SwitchDemo());
|
|
|
118
116
|
```typescript
|
|
119
117
|
import { button, div, For, useState } from "tagu-tagu";
|
|
120
118
|
|
|
121
|
-
function
|
|
119
|
+
function ForExample() {
|
|
122
120
|
const numbers = useState([1, 2, 3].map((n) => ({ n })));
|
|
123
121
|
let id = numbers.get().length;
|
|
124
122
|
|
|
@@ -142,7 +140,7 @@ function ForDemo() {
|
|
|
142
140
|
]);
|
|
143
141
|
}
|
|
144
142
|
|
|
145
|
-
document.body.appendChild(
|
|
143
|
+
document.body.appendChild(ForExample());
|
|
146
144
|
|
|
147
145
|
```
|
|
148
146
|
|
|
@@ -162,7 +160,7 @@ function Sky() {
|
|
|
162
160
|
});
|
|
163
161
|
}
|
|
164
162
|
|
|
165
|
-
function
|
|
163
|
+
function DataBindingExample() {
|
|
166
164
|
const theme = useState("dark" as "dark" | "light");
|
|
167
165
|
|
|
168
166
|
return div({ data: { theme } }, [
|
|
@@ -172,7 +170,7 @@ function DataBindingDemo() {
|
|
|
172
170
|
]);
|
|
173
171
|
}
|
|
174
172
|
|
|
175
|
-
document.body.appendChild(
|
|
173
|
+
document.body.appendChild(DataBindingExample());
|
|
176
174
|
|
|
177
175
|
```
|
|
178
176
|
|
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);
|
|
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);w(o,n);let i=this.node2Data.get(t);k(o,i)}setDataRecord(t,n){n&&this.node2Data.set(t,n)}resolveCallbacks(t,n){let o=(a,f)=>{if(k(f,this.node2Data.get(a)),!!Object.keys(f).length){if(!a.parentElement){this.node2DescendantCallbacks.has(a)||this.node2DescendantCallbacks.set(a,{});let m=this.node2DescendantCallbacks.get(a);m&&w(m,f);return}o(a.parentElement,f)}},i=this.node2DescendantCallbacks.get(n);i&&o(t,i)}node2DescendantCallbacks=new WeakMap};function k(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 a=e[i];t(a)&&(o[i]=n(a))}if(Object.keys(o).length)return o}function w(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 re(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=j(t);K(n);for(let o of n)V(e,o)}function V(e,t){t instanceof c?t.run(e):(s.resolveCallbacks(e,t),e.appendChild(t))}function j(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 K(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 a=o instanceof p?R([o],()=>t.map(o.get())):t.map(o);y(a,n)}}):y(t,n)}function q(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 P(e,t){let n=e.style;if(n instanceof CSSStyleDeclaration)for(let o in t){let i=t[o];x(e,i,a=>n.setProperty(o,a))}}function G(e,t){for(let n in t){let o=t[n];x(e,o,i=>{i?e.setAttribute(n,i):e.removeAttribute(n)})}}function U(e,t){for(let n in t){let o=t[n];x(e,o,i=>{e[n]=i})}}function W(e,t){for(let n in t){let o=e.querySelector(n);o&&C(o,t[n])}}function Q(e,t){for(let n in t){let o=e.querySelectorAll(n);for(let i of o)C(i,t[n])}}function J(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):(q(e,t.html),F(e,t.text),G(e,t.attr),U(e,t.prop),P(e,t.css),W(e,t.$),Q(e,t.$$),J(e,t.on),b(e,t.data)))}function v(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 v(n,...t)}function r(e,...t){let n=document.createElement(e);return v(n,...t),n}function ve(e,...t){let n=L({html:e}).children[0];return v(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 Ie(...e){return r("h5",...e)}function Ne(...e){return r("h6",...e)}function ke(...e){return r("p",...e)}function we(...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 X(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,a=()=>{let f=[];for(let l of this.list.get())o.has(l)||f.push(l);let m=[],d=new Set(this.list.get());for(let l of i.keys()){let u=i.get(l);u&&!d.has(u)&&m.push(l)}for(let l of f){let u=this.map(l),h=typeof u=="string"?document.createTextNode(u):u;s.resolveCallbacks(n,h),i.set(h,l),o.set(l,h)}for(let l of m){l.parentNode?.removeChild(l);let u=i.get(l);i.delete(l),u&&o.delete(u)}for(let l of[...i.keys()])l.parentElement?.removeChild(l);let E=T(this);for(let l of this.list.get())n.insertBefore(o.get(l),E);this.firstNode=o.get(this.list.get()[0])??null};a(),this.list.on("change",()=>{a()})}};function Y(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,o,i=()=>{let a=T(this);this.#e.get()?(n||(n=this.#n()),s.resolveCallbacks(t,n),this.firstNode=n,o?.remove(),t.insertBefore(n,a)):(o||(o=this.#t?.()),o&&s.resolveCallbacks(t,o),this.firstNode=o??null,n?.remove(),o&&t.insertBefore(o,a))};i(),this.#e.on("change",i)}};function Z(e,t,n){return new N(e,t,n)}var N=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,a,f=d=>{let E=o.get(d);if(E){if(!n.has(d)){let l=E.show();n.set(d,l)}return n.get(d)}return this.#t&&!a&&(a=this.#t()),a},m=()=>{let d=this.#e.get(),E=T(this),l=f(d);l&&s.resolveCallbacks(t,l),i?.remove(),l&&t.insertBefore(l,E),i=l};m(),this.#e.on("change",m)}};export{c as ControlFlow,ze as FlexDiv,X as For,R as FromStates,r as Html,Y as If,v as Modify,p as State,ye as Svg,Z as Switch,ve 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,Ie as h5,Ne 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,ke as p,we 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,re as useState,Xe as video};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tagu-tagu",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vanilla",
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
],
|
|
24
24
|
"scripts": {
|
|
25
25
|
"test:browser": "vitest",
|
|
26
|
-
"build": "tsx scripts/build.ts"
|
|
26
|
+
"build": "tsx scripts/build.ts",
|
|
27
|
+
"typecheck:watch": "tsc -p tsconfig.check.json --watch"
|
|
27
28
|
},
|
|
28
29
|
"devDependencies": {
|
|
29
30
|
"@biomejs/biome": "2.3.8",
|
package/src/flow/index.ts
CHANGED