tagu-tagu 3.2.1 → 3.2.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 +20 -0
- package/dist/bundle.min.js +1 -1
- package/package.json +5 -5
- package/src/Modify.ts +3 -1
package/README.md
CHANGED
|
@@ -52,6 +52,26 @@ button("Hello!", {css: {background: "blue"}});
|
|
|
52
52
|
button({css: {background: "blue"}}, "Hello!");
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
+
#### Modify existing element
|
|
56
|
+
You can use initializers for existing element.
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
import { Modify } from "tagu-tagu";
|
|
60
|
+
|
|
61
|
+
Modify(document.body, {
|
|
62
|
+
text: "💣",
|
|
63
|
+
css: {
|
|
64
|
+
background: "skyblue",
|
|
65
|
+
},
|
|
66
|
+
on: {
|
|
67
|
+
click: () => {
|
|
68
|
+
document.body.textContent = "💥";
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
|
|
55
75
|
### `If`
|
|
56
76
|
|
|
57
77
|
```typescript
|
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);H(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=(l,
|
|
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);H(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=(l,f)=>{if(k(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&&H(m,f);return}o(l.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 D(e,t){s.setDataRecord(e,t)}function A(e){if(!e)return;let t={};for(let n in e){let o=e[n];t[n]=[o]}if(Object.keys(t).length)return t}function H(e,t){for(let n in t)e[n]||(e[n]=[]),e[n].push(...t[n])}function b(e,t){if(!e)return;let n=s.node2Data.get(e);return n&&t in n?n[t]:b(e.parentElement,t)}function C(e,t){if(typeof t=="string")return O(e,t);s.addCallbacks(e,A(t))}function O(e,t){return new Promise(n=>{let o=b(e,t);o!==void 0?n(o):s.addCallbacks(e,{[t]:[n]})})}function P(e,t=n=>n){return new T(e,t)}var T=class{constructor(t,n){this.key=t;this.map=n}};var c=class{next=null;firstNode=null};var u=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 R(e,t){return typeof t=="function"?j(e,t):new u(e)}function j(e,t){let n=new u(t()),o=()=>{n.set(t())};for(let i of e)i.on("change",o);return n}function z(e,t){let n=q(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 q(e){return e.map(t=>{if(typeof t=="string"||t instanceof u){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 g(e){let t=B(e);return t?.parentElement?t:null}function y(e,t){if(typeof e=="string")t(e);else if(e instanceof u){let n=()=>{t(e.get())};n(),e.on("change",n)}else t(e)}function x(e,t,n){t instanceof T?C(e,{[t.key]:o=>{let l=o instanceof u?R([o],()=>t.map(o.get())):t.map(o);y(l,n)}}):y(t,n)}function G(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 U(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 W(e,t){for(let n in t){let o=t[n];x(e,o,i=>{i?e.setAttribute(n,i):e.removeAttribute(n)})}}function Q(e,t){for(let n in t){let o=t[n];x(e,o,i=>{e[n]=i})}}function _(e,t){for(let n in t){let o=e.querySelector(n);o&&w(o,t[n])}}function J(e,t){for(let n in t){let o=e.querySelectorAll(n);for(let i of o)w(i,t[n])}}function X(e,t){for(let n in t){let i=t[n];i&&(typeof i=="function"?e.addEventListener(n,i):i instanceof T?C(e,{[i.key]:l=>{let f=i.map(l);e.addEventListener(n,f)}}):e.addEventListener(n,i.listener,i.options))}}function w(e,t){e&&(typeof t=="string"||t instanceof u?F(e,t):Array.isArray(t)?z(e,t):typeof t=="function"?t(e):(G(e,t.html),F(e,t.text),W(e,t.attr),Q(e,t.prop),U(e,t.css),_(e,t.$),J(e,t.$$),X(e,t.on),D(e,t.data)))}function h(e,...t){let n=typeof e=="string"?document.querySelector(e):e;for(let o of t)w(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 we(...e){return r("h3",...e)}function Le(...e){return r("h4",...e)}function Ne(...e){return r("h5",...e)}function Me(...e){return r("h6",...e)}function Ie(...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 Pe(...e){return r("tr",...e)}function je(...e){return r("td",...e)}function Ve(...e){return r("b",...e)}function qe(...e){return r("label",...e)}function Ke(...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 _e(...e){return r("audio",...e)}function Je(...e){return r("video",...e)}function Xe(...e){return r("img",...e)}function Ye(...e){return r("canvas",...e)}function Ze(...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 N(e,t)}var N=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 p=i.get(a);p&&!d.has(p)&&m.push(a)}for(let a of f){let p=this.map(a),v=typeof p=="string"?document.createTextNode(p):p;s.resolveCallbacks(n,v),i.set(v,a),o.set(a,v)}for(let a of m){a.parentNode?.removeChild(a);let p=i.get(a);i.delete(a),p&&o.delete(p)}for(let a of[...i.keys()])a.parentElement?.removeChild(a);let E=g(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 M(e,t,n)}var M=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=g(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 Array.isArray(t)?new I(e,t,n):$(e,Object.keys(t).map(o=>({case:o,show:t[o]})),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=g(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 Html,Z as If,h as Modify,u as State,ye as Svg,$ as Switch,he as Tag,Ke as a,y as applyStringOrState,_e as audio,Ve as b,Ge as blockquote,Oe as br,He as button,Ye as canvas,L as div,b as findData,et as form,be as h1,Ce as h2,we as h3,Le as h4,Ne as h5,Me as h6,ot as hr,Ze as iframe,Xe as img,Be as input,qe as label,Ue as li,We as ol,Ae as option,Ie 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,Pe as tr,Qe as ul,P as useBinding,R as useState,Je as video};
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tagu-tagu",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.3",
|
|
4
4
|
"description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
|
|
5
5
|
"keywords": [
|
|
6
|
-
"vanilla",
|
|
7
|
-
"reactive",
|
|
8
6
|
"front-end",
|
|
9
|
-
"
|
|
10
|
-
"
|
|
7
|
+
"reactive",
|
|
8
|
+
"vanilla",
|
|
9
|
+
"element",
|
|
10
|
+
"framework"
|
|
11
11
|
],
|
|
12
12
|
"homepage": "https://github.com/DoTheSimplest/tagu-tagu#readme",
|
|
13
13
|
"bugs": {
|
package/src/Modify.ts
CHANGED
|
@@ -51,12 +51,14 @@ export function applyStringOrState(
|
|
|
51
51
|
) {
|
|
52
52
|
if (typeof value === "string") {
|
|
53
53
|
initialize(value);
|
|
54
|
-
} else {
|
|
54
|
+
} else if (value instanceof State) {
|
|
55
55
|
const update = () => {
|
|
56
56
|
initialize(value.get());
|
|
57
57
|
};
|
|
58
58
|
update();
|
|
59
59
|
value.on("change", update);
|
|
60
|
+
} else {
|
|
61
|
+
initialize(value);
|
|
60
62
|
}
|
|
61
63
|
}
|
|
62
64
|
|