sprae 5.0.2 → 5.0.4
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/package.json +1 -1
- package/sprae.auto.js +8 -8
- package/sprae.auto.min.js +1 -1
- package/sprae.js +8 -8
- package/sprae.min.js +1 -1
- package/src/core.js +3 -4
- package/src/directives.js +11 -8
- package/test/dom.js +24 -1
- package/test/index.html +3 -2
package/package.json
CHANGED
package/sprae.auto.js
CHANGED
|
@@ -272,6 +272,9 @@
|
|
|
272
272
|
}
|
|
273
273
|
};
|
|
274
274
|
};
|
|
275
|
+
primary["ref"] = (el, expr, state2) => {
|
|
276
|
+
state2[expr] = el;
|
|
277
|
+
};
|
|
275
278
|
function parseForExpression(expression) {
|
|
276
279
|
let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
|
|
277
280
|
let stripParensRE = /^\s*\(|\)\s*$/g;
|
|
@@ -298,9 +301,6 @@
|
|
|
298
301
|
el.replaceChildren(content);
|
|
299
302
|
sprae(el, state2);
|
|
300
303
|
};
|
|
301
|
-
secondary["ref"] = (el, expr, state2) => {
|
|
302
|
-
state2[expr] = el;
|
|
303
|
-
};
|
|
304
304
|
secondary["id"] = (el, expr) => {
|
|
305
305
|
let evaluate = parseExpr(el, expr, ":id");
|
|
306
306
|
const update = (v) => el.id = v || v === 0 ? v : "";
|
|
@@ -308,11 +308,11 @@
|
|
|
308
308
|
};
|
|
309
309
|
secondary["class"] = (el, expr) => {
|
|
310
310
|
let evaluate = parseExpr(el, expr, ":class");
|
|
311
|
-
let initClassName = el.
|
|
311
|
+
let initClassName = el.getAttribute("class");
|
|
312
312
|
return (state2) => {
|
|
313
313
|
let v = evaluate(state2);
|
|
314
314
|
let className = typeof v === "string" ? v : (Array.isArray(v) ? v : Object.entries(v).map(([k, v2]) => v2 ? k : "")).filter(Boolean).join(" ");
|
|
315
|
-
el.
|
|
315
|
+
el.setAttribute("class", [initClassName, className].filter(Boolean).join(" "));
|
|
316
316
|
};
|
|
317
317
|
};
|
|
318
318
|
secondary["style"] = (el, expr) => {
|
|
@@ -580,7 +580,9 @@ ${directive}=${expression ? `"${expression}"
|
|
|
580
580
|
let expr = el.getAttribute(attrName);
|
|
581
581
|
el.removeAttribute(attrName);
|
|
582
582
|
updates.push(primary[name](el, expr, state2, name));
|
|
583
|
-
if (memo.has(el)
|
|
583
|
+
if (memo.has(el))
|
|
584
|
+
return;
|
|
585
|
+
if (el.parentNode !== parent)
|
|
584
586
|
return false;
|
|
585
587
|
}
|
|
586
588
|
}
|
|
@@ -597,8 +599,6 @@ ${directive}=${expression ? `"${expression}"
|
|
|
597
599
|
for (let attrName of attrNames) {
|
|
598
600
|
let dir = secondary[attrName] || directives_default;
|
|
599
601
|
updates.push(dir(el, expr, state2, attrName));
|
|
600
|
-
if (memo.has(el) || el.parentNode !== parent)
|
|
601
|
-
return false;
|
|
602
602
|
}
|
|
603
603
|
}
|
|
604
604
|
}
|
package/sprae.auto.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var e,t,r=Promise.prototype.then.bind(Promise.resolve()),n=new WeakMap,l=class extends Map{#e=new FinalizationRegistry((e=>super.delete(e)));get size(){return[...this].length}constructor(e=[]){super();for(const[t,r]of e)this.set(t,r)}get(e){return super.get(e)?.deref()}set(e,t){let r=super.get(e);return r&&this.#e.unregister(r),r=(e=>n.get(e)||(e=>{const t=new WeakRef(e);return n.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},s=new Set,i=new WeakMap,o=new WeakMap,a=new WeakMap,u=Symbol("parent"),c={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console},f={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[u]?.[r];if(Array.isArray(t)&&r in Array.prototype)return t[r];if(r in Object.prototype)return t[r];let n=t[r];if(e){let n=i.get(t);n||i.set(t,n={}),n[r]?n[r].includes(e)||n[r].push(e):n[r]=[e]}if(n&&n.constructor===Object||Array.isArray(n)){let e=o.get(n);return e||o.set(n,e=new Proxy(n,f)),e}return n},set(e,t,r){if(!(t in e)&&e[u]&&t in e[u])return e[u][t]=r;if(Array.isArray(e)&&t in Array.prototype)return e[t]=r;const n=e[t];if(Object.is(n,r))return!0;e[t]=r;let l=i.get(e)?.[t];if(l)for(let e of l)s.add(e);return h(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},p=(e,t)=>{if(o.has(e))return o.get(e);if(a.has(e))return e;let r=new Proxy(e,f);return o.set(e,r),a.set(r,e),e[u]=t?p(t):c,r},y=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},h=()=>{t||(t=!0,r((()=>{for(let e of s)e.call();s.clear(),t=!1})))},g={},d={};g.if=(e,t)=>{let r=document.createTextNode(""),n=[
|
|
1
|
+
(()=>{var e,t,r=Promise.prototype.then.bind(Promise.resolve()),n=new WeakMap,l=class extends Map{#e=new FinalizationRegistry((e=>super.delete(e)));get size(){return[...this].length}constructor(e=[]){super();for(const[t,r]of e)this.set(t,r)}get(e){return super.get(e)?.deref()}set(e,t){let r=super.get(e);return r&&this.#e.unregister(r),r=(e=>n.get(e)||(e=>{const t=new WeakRef(e);return n.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},s=new Set,i=new WeakMap,o=new WeakMap,a=new WeakMap,u=Symbol("parent"),c={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console},f={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[u]?.[r];if(Array.isArray(t)&&r in Array.prototype)return t[r];if(r in Object.prototype)return t[r];let n=t[r];if(e){let n=i.get(t);n||i.set(t,n={}),n[r]?n[r].includes(e)||n[r].push(e):n[r]=[e]}if(n&&n.constructor===Object||Array.isArray(n)){let e=o.get(n);return e||o.set(n,e=new Proxy(n,f)),e}return n},set(e,t,r){if(!(t in e)&&e[u]&&t in e[u])return e[u][t]=r;if(Array.isArray(e)&&t in Array.prototype)return e[t]=r;const n=e[t];if(Object.is(n,r))return!0;e[t]=r;let l=i.get(e)?.[t];if(l)for(let e of l)s.add(e);return h(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},p=(e,t)=>{if(o.has(e))return o.get(e);if(a.has(e))return e;let r=new Proxy(e,f);return o.set(e,r),a.set(r,e),e[u]=t?p(t):c,r},y=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},h=()=>{t||(t=!0,r((()=>{for(let e of s)e.call();s.clear(),t=!1})))},g={},d={};g.if=(e,t)=>{let r=document.createTextNode(""),n=[E(e,t,":if")],l=[e],s=e;for(;(s=e.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(t=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),l.push(s),n.push(E(e,t,":else :if"))):(s.remove(),l.push(s),n.push((()=>1)));return e.replaceWith(s=r),e=>{let t=n.findIndex((t=>t(e)));l[t]!=s&&((s[m]||s).replaceWith(s=l[t]||r),$(s,e))}},g.with=(e,t,r)=>{const n=E(e,t,":with")(r);$(e,p(n,r))};var m=Symbol(":each");g.each=(e,t)=>{let r=function(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=e.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!r)return;let n=r[2].trim(),l=r[1].replace(/^\s*\(|\)\s*$/g,"").trim(),s=l.match(t);return s?[l.replace(t,"").trim(),s[1].trim(),n]:[l,"",n]}(t);if(!r)return N(new Error,e,t,":each");const n=e[m]=document.createTextNode("");e.replaceWith(n);const s=E(e,r[2],":each"),i=e.getAttribute(":key"),o=i?E(null,i,":each"):null;e.removeAttribute(":key");const a=e.getAttribute(":ref"),u=new l,c=new l;let f=[];return l=>{let i=s(l);i?"number"==typeof i?i=Array.from({length:i},((e,t)=>[t,t+1])):Array.isArray(i)?i=i.map(((e,t)=>[t+1,e])):"object"==typeof i?i=Object.entries(i):N(Error("Bad list value"),e,t,":each"):i=[];let y=[],h=[];for(let[t,n]of i){let s,i,f=o?.({[r[0]]:n,[r[1]]:t});null==f?s=e.cloneNode(!0):(s=c.get(f))||c.set(f,s=e.cloneNode(!0)),y.push(s),null!=f&&(i=u.get(f))?i[r[0]]=n:(i=p({[r[0]]:n,[a||""]:null,[r[1]]:t},l),null!=f&&u.set(f,i)),h.push(i)}!function(e,t,r,n){const l=new Map,s=new Map;let i,o;for(i=0;i<t.length;i++)l.set(t[i],i);for(i=0;i<r.length;i++)s.set(r[i],i);for(i=o=0;i!==t.length||o!==r.length;){var a=t[i],u=r[o];if(null===a)i++;else if(r.length<=o)e.removeChild(t[i]),i++;else if(t.length<=i)e.insertBefore(u,t[i]||n),o++;else if(a===u)i++,o++;else{var c=s.get(a),f=l.get(u);void 0===c?(e.removeChild(t[i]),i++):void 0===f?(e.insertBefore(u,t[i]||n),o++):(e.insertBefore(t[f],t[i]||n),t[f]=null,f>i+1&&i++,o++)}}}(n.parentNode,f,y,n),f=y;for(let e=0;e<y.length;e++)$(y[e],h[e])}},g.ref=(e,t,r)=>{r[t]=e},d.render=(e,t,r)=>{let n=E(e,t,":render")(r);n||N(new Error("Template not found"),e,t,":render");let l=n.content.cloneNode(!0);e.replaceChildren(l),$(e,r)},d.id=(e,t)=>{let r=E(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},d.class=(e,t)=>{let r=E(e,t,":class"),n=e.getAttribute("class");return t=>{let l=r(t),s="string"==typeof l?l:(Array.isArray(l)?l:Object.entries(l).map((([e,t])=>t?e:""))).filter(Boolean).join(" ");e.setAttribute("class",[n,s].filter(Boolean).join(" "))}},d.style=(e,t)=>{let r=E(e,t,":style"),n=e.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),t=>{let l=r(t);if("string"==typeof l)e.setAttribute("style",n+l);else{e.setAttribute("style",n);for(let t in l)e.style.setProperty(t,l[t])}}},d.text=(e,t)=>{let r=E(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},d[""]=(e,t)=>{let r=E(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)x(e,t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),n[t])}},d.value=(e,t)=>{let r,n,l=E(e,t,":value"),s="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(r=e.selectionStart,n=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),r&&e.setSelectionRange(r,n)):"checkbox"===e.type?t=>(e.value=t?"on":"",x(e,"checked",t)):"select-one"===e.type?t=>{for(let t in e.options)t.removeAttribute("selected");e.value=t,e.selectedOptions[0]?.setAttribute("selected","")}:t=>e.value=t;return e=>s(l(e))},d.on=(e,t)=>{let r=E(e,t,":on");return t=>{let n=r(t),l=[];for(let t in n)l.push(v(e,t,n[t]));return()=>{for(let e of l)e()}}};var b=(e,t,r,n)=>{let l=n.startsWith("on")&&n.slice(2),s=E(e,t,":"+n);if(s)return l?t=>{let r=s(t)||(()=>{});return v(e,l,r)}:t=>x(e,n,s(t))},v=(e,t,r)=>{if(!r)return;let n=t.split("..").map((t=>{let r={evt:"",target:e,test:()=>!0};return r.evt=(t.startsWith("on")?t.slice(2):t).replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,n="")=>(r.test=A[t]?.(r,...n.split("-"))||r.test,""))),r}));if(1==n.length)return i(r,n[0]);const l=(t,r=0)=>{let s;return s=i((i=>{r&&s();let o=t.call(e,i);"function"!=typeof o&&(o=()=>{}),r+1<n.length&&l(o,r?r+1:1)}),n[r])};let s=l(r);return()=>s();function i(e,{evt:t,target:r,test:n,defer:l,stop:s,prevent:i,...o}){l&&(e=l(e));let a=t=>n(t)&&(s&&t.stopPropagation(),i&&t.preventDefault(),e.call(r,t));return r.addEventListener(t,a,o),()=>r.removeEventListener(t,a,o)}},A={prevent(e){e.prevent=!0},stop(e){e.stop=!0},once(e){e.once=!0},passive(e){e.passive=!0},capture(e){e.capture=!0},window(e){e.target=window},document(e){e.target=document},toggle(e){e.defer=(t,r)=>n=>r?(r.call?.(e.target,n),r=null):r=t()},throttle(e,t){e.defer=e=>w(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>W(e,t?Number(t)||0:108)},outside:e=>t=>{let r=e.target;return!(r.contains(t.target)||!1===t.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:e=>t=>t.target===e.target,ctrl:(e,...t)=>e=>k.ctrl(e)&&t.every((t=>k[t]?k[t](e):e.key===t)),shift:(e,...t)=>e=>k.shift(e)&&t.every((t=>k[t]?k[t](e):e.key===t)),alt:(e,...t)=>e=>k.alt(e)&&t.every((t=>k[t]?k[t](e):e.key===t)),meta:(e,...t)=>e=>k.meta(e)&&t.every((t=>k[t]?k[t](e):e.key===t)),arrow:e=>k.arrow,enter:e=>k.enter,escape:e=>k.escape,tab:e=>k.tab,space:e=>k.space,backspace:e=>k.backspace,delete:e=>k.delete,digit:e=>k.digit,letter:e=>k.letter,character:e=>k.character},k={ctrl:e=>e.ctrlKey||"Control"===e.key||"Ctrl"===e.key,shift:e=>e.shiftKey||"Shift"===e.key,alt:e=>e.altKey||"Alt"===e.key,meta:e=>e.metaKey||"Meta"===e.key||"Command"===e.key,arrow:e=>e.key.startsWith("Arrow"),enter:e=>"Enter"===e.key,escape:e=>e.key.startsWith("Esc"),tab:e=>"Tab"===e.key,space:e=>" "===e.key||"Space"===e.key||" "===e.key,backspace:e=>"Backspace"===e.key,delete:e=>"Delete"===e.key,digit:e=>/^\d$/.test(e.key),letter:e=>/^[a-zA-Z]$/.test(e.key),character:e=>/^\S$/.test(e.key)},w=(e,t)=>{let r,n,l=s=>{r=!0,setTimeout((()=>{if(r=!1,n)return n=!1,l(s),e(s)}),t)};return t=>r?n=!0:(l(t),e(t))},W=(e,t)=>{let r;return n=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(n)}),t)}},x=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},S={};function E(e,t,r){let n=S[t];if(!n){let l=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=S[t]=new Function("__scope",`with (__scope) { return ${l.trim()} };`)}catch(n){return N(n,e,t,r)}}return l=>{let s;try{s=n.call(e,l)}catch(n){return N(n,e,t,r)}return s}}function N(e,t,n,l){Object.assign(e,{element:t,expression:n}),console.warn(`∴ ${e.message}\n\n${l}=${n?`"${n}"\n\n`:""}`,t),r((()=>{throw e}),0)}$.globals=c;var j=new WeakMap;function $(e,t){if(!e.children)return;if(j.has(e))return Object.assign(j.get(e),t);const r=p(t||{}),n=[],l=(e,t=e.parentNode)=>{for(let l in g){let s=":"+l;if(e.hasAttribute?.(s)){let i=e.getAttribute(s);if(e.removeAttribute(s),n.push(g[l](e,i,r,l)),j.has(e))return;if(e.parentNode!==t)return!1}}if(e.attributes)for(let t=0;t<e.attributes.length;){let l=e.attributes[t];if(":"!==l.name[0]){t++;continue}e.removeAttribute(l.name);let s=l.value,i=l.name.slice(1).split(":");for(let t of i){let l=d[t]||b;n.push(l(e,s,r,t))}}for(let t,r=0;t=e.children[r];r++)!1===l(t,e)&&r--};l(e);for(let e of n)if(e){let t;y((()=>{"function"==typeof t&&t(),t=e(r)}))}return j.set(e,r),r}document.currentScript&&$(document.documentElement)})();
|
package/sprae.js
CHANGED
|
@@ -271,6 +271,9 @@ primary["each"] = (tpl, expr) => {
|
|
|
271
271
|
}
|
|
272
272
|
};
|
|
273
273
|
};
|
|
274
|
+
primary["ref"] = (el, expr, state2) => {
|
|
275
|
+
state2[expr] = el;
|
|
276
|
+
};
|
|
274
277
|
function parseForExpression(expression) {
|
|
275
278
|
let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
|
|
276
279
|
let stripParensRE = /^\s*\(|\)\s*$/g;
|
|
@@ -297,9 +300,6 @@ secondary["render"] = (el, expr, state2) => {
|
|
|
297
300
|
el.replaceChildren(content);
|
|
298
301
|
sprae(el, state2);
|
|
299
302
|
};
|
|
300
|
-
secondary["ref"] = (el, expr, state2) => {
|
|
301
|
-
state2[expr] = el;
|
|
302
|
-
};
|
|
303
303
|
secondary["id"] = (el, expr) => {
|
|
304
304
|
let evaluate = parseExpr(el, expr, ":id");
|
|
305
305
|
const update = (v) => el.id = v || v === 0 ? v : "";
|
|
@@ -307,11 +307,11 @@ secondary["id"] = (el, expr) => {
|
|
|
307
307
|
};
|
|
308
308
|
secondary["class"] = (el, expr) => {
|
|
309
309
|
let evaluate = parseExpr(el, expr, ":class");
|
|
310
|
-
let initClassName = el.
|
|
310
|
+
let initClassName = el.getAttribute("class");
|
|
311
311
|
return (state2) => {
|
|
312
312
|
let v = evaluate(state2);
|
|
313
313
|
let className = typeof v === "string" ? v : (Array.isArray(v) ? v : Object.entries(v).map(([k, v2]) => v2 ? k : "")).filter(Boolean).join(" ");
|
|
314
|
-
el.
|
|
314
|
+
el.setAttribute("class", [initClassName, className].filter(Boolean).join(" "));
|
|
315
315
|
};
|
|
316
316
|
};
|
|
317
317
|
secondary["style"] = (el, expr) => {
|
|
@@ -579,7 +579,9 @@ function sprae(container, values) {
|
|
|
579
579
|
let expr = el.getAttribute(attrName);
|
|
580
580
|
el.removeAttribute(attrName);
|
|
581
581
|
updates.push(primary[name](el, expr, state2, name));
|
|
582
|
-
if (memo.has(el)
|
|
582
|
+
if (memo.has(el))
|
|
583
|
+
return;
|
|
584
|
+
if (el.parentNode !== parent)
|
|
583
585
|
return false;
|
|
584
586
|
}
|
|
585
587
|
}
|
|
@@ -596,8 +598,6 @@ function sprae(container, values) {
|
|
|
596
598
|
for (let attrName of attrNames) {
|
|
597
599
|
let dir = secondary[attrName] || directives_default;
|
|
598
600
|
updates.push(dir(el, expr, state2, attrName));
|
|
599
|
-
if (memo.has(el) || el.parentNode !== parent)
|
|
600
|
-
return false;
|
|
601
601
|
}
|
|
602
602
|
}
|
|
603
603
|
}
|
package/sprae.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e,t,r=Promise.prototype.then.bind(Promise.resolve()),n=new WeakMap,l=class extends Map{#e=new FinalizationRegistry((e=>super.delete(e)));get size(){return[...this].length}constructor(e=[]){super();for(const[t,r]of e)this.set(t,r)}get(e){return super.get(e)?.deref()}set(e,t){let r=super.get(e);return r&&this.#e.unregister(r),r=(e=>n.get(e)||(e=>{const t=new WeakRef(e);return n.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},s=new Set,i=new WeakMap,o=new WeakMap,a=new WeakMap,u=Symbol("parent"),c={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console},f={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[u]?.[r];if(Array.isArray(t)&&r in Array.prototype)return t[r];if(r in Object.prototype)return t[r];let n=t[r];if(e){let n=i.get(t);n||i.set(t,n={}),n[r]?n[r].includes(e)||n[r].push(e):n[r]=[e]}if(n&&n.constructor===Object||Array.isArray(n)){let e=o.get(n);return e||o.set(n,e=new Proxy(n,f)),e}return n},set(e,t,r){if(!(t in e)&&e[u]&&t in e[u])return e[u][t]=r;if(Array.isArray(e)&&t in Array.prototype)return e[t]=r;const n=e[t];if(Object.is(n,r))return!0;e[t]=r;let l=i.get(e)?.[t];if(l)for(let e of l)s.add(e);return h(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},p=(e,t)=>{if(o.has(e))return o.get(e);if(a.has(e))return e;let r=new Proxy(e,f);return o.set(e,r),a.set(r,e),e[u]=t?p(t):c,r},y=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},h=()=>{t||(t=!0,r((()=>{for(let e of s)e.call();s.clear(),t=!1})))},
|
|
1
|
+
var e,t,r=Promise.prototype.then.bind(Promise.resolve()),n=new WeakMap,l=class extends Map{#e=new FinalizationRegistry((e=>super.delete(e)));get size(){return[...this].length}constructor(e=[]){super();for(const[t,r]of e)this.set(t,r)}get(e){return super.get(e)?.deref()}set(e,t){let r=super.get(e);return r&&this.#e.unregister(r),r=(e=>n.get(e)||(e=>{const t=new WeakRef(e);return n.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},s=new Set,i=new WeakMap,o=new WeakMap,a=new WeakMap,u=Symbol("parent"),c={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console},f={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[u]?.[r];if(Array.isArray(t)&&r in Array.prototype)return t[r];if(r in Object.prototype)return t[r];let n=t[r];if(e){let n=i.get(t);n||i.set(t,n={}),n[r]?n[r].includes(e)||n[r].push(e):n[r]=[e]}if(n&&n.constructor===Object||Array.isArray(n)){let e=o.get(n);return e||o.set(n,e=new Proxy(n,f)),e}return n},set(e,t,r){if(!(t in e)&&e[u]&&t in e[u])return e[u][t]=r;if(Array.isArray(e)&&t in Array.prototype)return e[t]=r;const n=e[t];if(Object.is(n,r))return!0;e[t]=r;let l=i.get(e)?.[t];if(l)for(let e of l)s.add(e);return h(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},p=(e,t)=>{if(o.has(e))return o.get(e);if(a.has(e))return e;let r=new Proxy(e,f);return o.set(e,r),a.set(r,e),e[u]=t?p(t):c,r},y=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},h=()=>{t||(t=!0,r((()=>{for(let e of s)e.call();s.clear(),t=!1})))},g={},d={};g.if=(e,t)=>{let r=document.createTextNode(""),n=[E(e,t,":if")],l=[e],s=e;for(;(s=e.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(t=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),l.push(s),n.push(E(e,t,":else :if"))):(s.remove(),l.push(s),n.push((()=>1)));return e.replaceWith(s=r),e=>{let t=n.findIndex((t=>t(e)));l[t]!=s&&((s[m]||s).replaceWith(s=l[t]||r),$(s,e))}},g.with=(e,t,r)=>{const n=E(e,t,":with")(r);$(e,p(n,r))};var m=Symbol(":each");g.each=(e,t)=>{let r=function(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=e.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!r)return;let n=r[2].trim(),l=r[1].replace(/^\s*\(|\)\s*$/g,"").trim(),s=l.match(t);return s?[l.replace(t,"").trim(),s[1].trim(),n]:[l,"",n]}(t);if(!r)return N(new Error,e,t,":each");const n=e[m]=document.createTextNode("");e.replaceWith(n);const s=E(e,r[2],":each"),i=e.getAttribute(":key"),o=i?E(null,i,":each"):null;e.removeAttribute(":key");const a=e.getAttribute(":ref"),u=new l,c=new l;let f=[];return l=>{let i=s(l);i?"number"==typeof i?i=Array.from({length:i},((e,t)=>[t,t+1])):Array.isArray(i)?i=i.map(((e,t)=>[t+1,e])):"object"==typeof i?i=Object.entries(i):N(Error("Bad list value"),e,t,":each"):i=[];let y=[],h=[];for(let[t,n]of i){let s,i,f=o?.({[r[0]]:n,[r[1]]:t});null==f?s=e.cloneNode(!0):(s=c.get(f))||c.set(f,s=e.cloneNode(!0)),y.push(s),null!=f&&(i=u.get(f))?i[r[0]]=n:(i=p({[r[0]]:n,[a||""]:null,[r[1]]:t},l),null!=f&&u.set(f,i)),h.push(i)}!function(e,t,r,n){const l=new Map,s=new Map;let i,o;for(i=0;i<t.length;i++)l.set(t[i],i);for(i=0;i<r.length;i++)s.set(r[i],i);for(i=o=0;i!==t.length||o!==r.length;){var a=t[i],u=r[o];if(null===a)i++;else if(r.length<=o)e.removeChild(t[i]),i++;else if(t.length<=i)e.insertBefore(u,t[i]||n),o++;else if(a===u)i++,o++;else{var c=s.get(a),f=l.get(u);void 0===c?(e.removeChild(t[i]),i++):void 0===f?(e.insertBefore(u,t[i]||n),o++):(e.insertBefore(t[f],t[i]||n),t[f]=null,f>i+1&&i++,o++)}}}(n.parentNode,f,y,n),f=y;for(let e=0;e<y.length;e++)$(y[e],h[e])}},g.ref=(e,t,r)=>{r[t]=e},d.render=(e,t,r)=>{let n=E(e,t,":render")(r);n||N(new Error("Template not found"),e,t,":render");let l=n.content.cloneNode(!0);e.replaceChildren(l),$(e,r)},d.id=(e,t)=>{let r=E(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},d.class=(e,t)=>{let r=E(e,t,":class"),n=e.getAttribute("class");return t=>{let l=r(t),s="string"==typeof l?l:(Array.isArray(l)?l:Object.entries(l).map((([e,t])=>t?e:""))).filter(Boolean).join(" ");e.setAttribute("class",[n,s].filter(Boolean).join(" "))}},d.style=(e,t)=>{let r=E(e,t,":style"),n=e.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),t=>{let l=r(t);if("string"==typeof l)e.setAttribute("style",n+l);else{e.setAttribute("style",n);for(let t in l)e.style.setProperty(t,l[t])}}},d.text=(e,t)=>{let r=E(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},d[""]=(e,t)=>{let r=E(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)x(e,t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),n[t])}},d.value=(e,t)=>{let r,n,l=E(e,t,":value"),s="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(r=e.selectionStart,n=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),r&&e.setSelectionRange(r,n)):"checkbox"===e.type?t=>(e.value=t?"on":"",x(e,"checked",t)):"select-one"===e.type?t=>{for(let t in e.options)t.removeAttribute("selected");e.value=t,e.selectedOptions[0]?.setAttribute("selected","")}:t=>e.value=t;return e=>s(l(e))},d.on=(e,t)=>{let r=E(e,t,":on");return t=>{let n=r(t),l=[];for(let t in n)l.push(v(e,t,n[t]));return()=>{for(let e of l)e()}}};var b=(e,t,r,n)=>{let l=n.startsWith("on")&&n.slice(2),s=E(e,t,":"+n);if(s)return l?t=>{let r=s(t)||(()=>{});return v(e,l,r)}:t=>x(e,n,s(t))},v=(e,t,r)=>{if(!r)return;let n=t.split("..").map((t=>{let r={evt:"",target:e,test:()=>!0};return r.evt=(t.startsWith("on")?t.slice(2):t).replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,n="")=>(r.test=A[t]?.(r,...n.split("-"))||r.test,""))),r}));if(1==n.length)return i(r,n[0]);const l=(t,r=0)=>{let s;return s=i((i=>{r&&s();let o=t.call(e,i);"function"!=typeof o&&(o=()=>{}),r+1<n.length&&l(o,r?r+1:1)}),n[r])};let s=l(r);return()=>s();function i(e,{evt:t,target:r,test:n,defer:l,stop:s,prevent:i,...o}){l&&(e=l(e));let a=t=>n(t)&&(s&&t.stopPropagation(),i&&t.preventDefault(),e.call(r,t));return r.addEventListener(t,a,o),()=>r.removeEventListener(t,a,o)}},A={prevent(e){e.prevent=!0},stop(e){e.stop=!0},once(e){e.once=!0},passive(e){e.passive=!0},capture(e){e.capture=!0},window(e){e.target=window},document(e){e.target=document},toggle(e){e.defer=(t,r)=>n=>r?(r.call?.(e.target,n),r=null):r=t()},throttle(e,t){e.defer=e=>w(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>W(e,t?Number(t)||0:108)},outside:e=>t=>{let r=e.target;return!(r.contains(t.target)||!1===t.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:e=>t=>t.target===e.target,ctrl:(e,...t)=>e=>k.ctrl(e)&&t.every((t=>k[t]?k[t](e):e.key===t)),shift:(e,...t)=>e=>k.shift(e)&&t.every((t=>k[t]?k[t](e):e.key===t)),alt:(e,...t)=>e=>k.alt(e)&&t.every((t=>k[t]?k[t](e):e.key===t)),meta:(e,...t)=>e=>k.meta(e)&&t.every((t=>k[t]?k[t](e):e.key===t)),arrow:e=>k.arrow,enter:e=>k.enter,escape:e=>k.escape,tab:e=>k.tab,space:e=>k.space,backspace:e=>k.backspace,delete:e=>k.delete,digit:e=>k.digit,letter:e=>k.letter,character:e=>k.character},k={ctrl:e=>e.ctrlKey||"Control"===e.key||"Ctrl"===e.key,shift:e=>e.shiftKey||"Shift"===e.key,alt:e=>e.altKey||"Alt"===e.key,meta:e=>e.metaKey||"Meta"===e.key||"Command"===e.key,arrow:e=>e.key.startsWith("Arrow"),enter:e=>"Enter"===e.key,escape:e=>e.key.startsWith("Esc"),tab:e=>"Tab"===e.key,space:e=>" "===e.key||"Space"===e.key||" "===e.key,backspace:e=>"Backspace"===e.key,delete:e=>"Delete"===e.key,digit:e=>/^\d$/.test(e.key),letter:e=>/^[a-zA-Z]$/.test(e.key),character:e=>/^\S$/.test(e.key)},w=(e,t)=>{let r,n,l=s=>{r=!0,setTimeout((()=>{if(r=!1,n)return n=!1,l(s),e(s)}),t)};return t=>r?n=!0:(l(t),e(t))},W=(e,t)=>{let r;return n=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(n)}),t)}},x=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},S={};function E(e,t,r){let n=S[t];if(!n){let l=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=S[t]=new Function("__scope",`with (__scope) { return ${l.trim()} };`)}catch(n){return N(n,e,t,r)}}return l=>{let s;try{s=n.call(e,l)}catch(n){return N(n,e,t,r)}return s}}function N(e,t,n,l){Object.assign(e,{element:t,expression:n}),console.warn(`∴ ${e.message}\n\n${l}=${n?`"${n}"\n\n`:""}`,t),r((()=>{throw e}),0)}$.globals=c;var j=new WeakMap;function $(e,t){if(!e.children)return;if(j.has(e))return Object.assign(j.get(e),t);const r=p(t||{}),n=[],l=(e,t=e.parentNode)=>{for(let l in g){let s=":"+l;if(e.hasAttribute?.(s)){let i=e.getAttribute(s);if(e.removeAttribute(s),n.push(g[l](e,i,r,l)),j.has(e))return;if(e.parentNode!==t)return!1}}if(e.attributes)for(let t=0;t<e.attributes.length;){let l=e.attributes[t];if(":"!==l.name[0]){t++;continue}e.removeAttribute(l.name);let s=l.value,i=l.name.slice(1).split(":");for(let t of i){let l=d[t]||b;n.push(l(e,s,r,t))}}for(let t,r=0;t=e.children[r];r++)!1===l(t,e)&&r--};l(e);for(let e of n)if(e){let t;y((()=>{"function"==typeof t&&t(),t=e(r)}))}return j.set(e,r),r}var C=$;document.currentScript&&$(document.documentElement);export{C as default};
|
package/src/core.js
CHANGED
|
@@ -31,7 +31,8 @@ export default function sprae(container, values) {
|
|
|
31
31
|
updates.push(primary[name](el, expr, state, name))
|
|
32
32
|
|
|
33
33
|
// stop if element was spraed by directive or skipped (detached)
|
|
34
|
-
if (memo.has(el)
|
|
34
|
+
if (memo.has(el)) return
|
|
35
|
+
if (el.parentNode !== parent) return false
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
38
|
|
|
@@ -48,9 +49,7 @@ export default function sprae(container, values) {
|
|
|
48
49
|
for (let attrName of attrNames) {
|
|
49
50
|
let dir = secondary[attrName] || defaultDirective;
|
|
50
51
|
updates.push(dir(el, expr, state, attrName));
|
|
51
|
-
|
|
52
|
-
// stop if element was spraed by directive or skipped (detached)
|
|
53
|
-
if (memo.has(el) || el.parentNode !== parent) return false
|
|
52
|
+
// NOTE: secondary directives don't stop flow nor extend state, so no need to check
|
|
54
53
|
}
|
|
55
54
|
}
|
|
56
55
|
}
|
package/src/directives.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// directives & parsing
|
|
2
2
|
import sprae from './core.js'
|
|
3
3
|
import swap from './domdiff.js'
|
|
4
|
+
// import swap from 'swapdom'
|
|
4
5
|
import { state as createState} from './state.js'
|
|
5
6
|
import { queueMicrotask, WeakishMap } from './util.js'
|
|
6
7
|
|
|
@@ -120,6 +121,14 @@ primary['each'] = (tpl, expr) => {
|
|
|
120
121
|
}
|
|
121
122
|
}
|
|
122
123
|
|
|
124
|
+
// ref must be last within primaries, since that must be skipped by :each, but before secondaries
|
|
125
|
+
primary['ref'] = (el, expr, state) => {
|
|
126
|
+
// FIXME: wait for complex ref use-case
|
|
127
|
+
// parseExpr(el, `__scope[${expr}]=this`, ':ref')(values)
|
|
128
|
+
state[expr] = el;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
|
|
123
132
|
// This was taken AlpineJS, former VueJS 2.* core. Thanks Alpine & Vue!
|
|
124
133
|
function parseForExpression(expression) {
|
|
125
134
|
let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
|
|
@@ -153,12 +162,6 @@ secondary['render'] = (el, expr, state) => {
|
|
|
153
162
|
sprae(el, state)
|
|
154
163
|
}
|
|
155
164
|
|
|
156
|
-
secondary['ref'] = (el, expr, state) => {
|
|
157
|
-
// FIXME: wait for complex ref use-case
|
|
158
|
-
// parseExpr(el, `__scope[${expr}]=this`, ':ref')(values)
|
|
159
|
-
state[expr] = el;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
165
|
secondary['id'] = (el, expr) => {
|
|
163
166
|
let evaluate = parseExpr(el, expr, ':id')
|
|
164
167
|
const update = v => el.id = v || v === 0 ? v : ''
|
|
@@ -167,11 +170,11 @@ secondary['id'] = (el, expr) => {
|
|
|
167
170
|
|
|
168
171
|
secondary['class'] = (el, expr) => {
|
|
169
172
|
let evaluate = parseExpr(el, expr, ':class')
|
|
170
|
-
let initClassName = el.
|
|
173
|
+
let initClassName = el.getAttribute('class')
|
|
171
174
|
return (state) => {
|
|
172
175
|
let v = evaluate(state)
|
|
173
176
|
let className = typeof v === 'string' ? v : (Array.isArray(v) ? v : Object.entries(v).map(([k,v])=>v?k:'')).filter(Boolean).join(' ')
|
|
174
|
-
el.
|
|
177
|
+
el.setAttribute('class',[initClassName, className].filter(Boolean).join(' '));
|
|
175
178
|
}
|
|
176
179
|
}
|
|
177
180
|
|
package/test/dom.js
CHANGED
|
@@ -109,6 +109,18 @@ test('class', async () => {
|
|
|
109
109
|
// is(el.outerHTML, `<x class="base x"></x><y class="y w"></y><z class="b c"></z>`);
|
|
110
110
|
})
|
|
111
111
|
|
|
112
|
+
test('class: old svg fun', async () => {
|
|
113
|
+
// raw html creates svganimatedstring
|
|
114
|
+
let el = document.createElement('div')
|
|
115
|
+
el.innerHTML = `<svg class="foo" :class="a ? 'x' : 'y'"></svg>`
|
|
116
|
+
|
|
117
|
+
let s = sprae(el, {a:true})
|
|
118
|
+
is(el.innerHTML, `<svg class="foo x"></svg>`)
|
|
119
|
+
s.a = false
|
|
120
|
+
await tick()
|
|
121
|
+
is(el.innerHTML, `<svg class="foo y"></svg>`)
|
|
122
|
+
})
|
|
123
|
+
|
|
112
124
|
test('props: base', async () => {
|
|
113
125
|
let el = h`<input :id="0" :="{for:1, title:2, help:3, type:4, placeholder: 5, value: 6, aB: 8}" :value="7"/>`
|
|
114
126
|
let params = sprae(el)
|
|
@@ -915,6 +927,11 @@ test('with: writes to state', async () => {
|
|
|
915
927
|
await tick()
|
|
916
928
|
is(a.innerHTML, `<y>3</y>`)
|
|
917
929
|
})
|
|
930
|
+
test('with: one of children (internal number of iterations, cant see the result here)', async () => {
|
|
931
|
+
let a = h `<div><x :text="x"></x><x :with={x:2} :text="x"></x><x :text="y">3</x></div>`
|
|
932
|
+
sprae(a, {x:1,y:3})
|
|
933
|
+
is(a.innerHTML,`<x>1</x><x>2</x><x>3</x>`)
|
|
934
|
+
})
|
|
918
935
|
|
|
919
936
|
test(':render by ref', async () => {
|
|
920
937
|
let a = h`<template :ref="abc"><div :text="123"></div></template><x :render="abc">456</x>`
|
|
@@ -937,12 +954,18 @@ test(':render :with', async () => {
|
|
|
937
954
|
is(a.outerHTML, `<template><div :text="text"></div></template><x><div>abc</div></x>`)
|
|
938
955
|
})
|
|
939
956
|
|
|
940
|
-
test(':render
|
|
957
|
+
test(':render nested items', async () => {
|
|
941
958
|
let el = h`<template :ref="tpl"><div :each="item in items" :text="item.id"></div></template><x :render="tpl" :with="{items:[{id:'a'},{id:'b'}]}" />`
|
|
942
959
|
let state = sprae(el)
|
|
943
960
|
is(el.outerHTML, `<template><div :each="item in items" :text="item.id"></div></template><x><div>a</div><div>b</div></x>`)
|
|
944
961
|
})
|
|
945
962
|
|
|
963
|
+
test.todo(':render template after use', async () => {
|
|
964
|
+
let a = h`<x :render="tpl" :with="{text:'abc'}" /><template :ref="tpl"><div :text="text"></div></template>`
|
|
965
|
+
let state = sprae(a)
|
|
966
|
+
is(a.outerHTML, `<x><div>abc</div></x><template><div :text="text"></div></template>`)
|
|
967
|
+
})
|
|
968
|
+
|
|
946
969
|
|
|
947
970
|
test('ref: base', async () => {
|
|
948
971
|
let a = h`<a :ref="a" :init="log.push(a), null" :text="b"></a>`
|
package/test/index.html
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<title>Test</title>
|
|
4
4
|
|
|
5
5
|
<script defer src="../sprae.auto.js"></script>
|
|
6
|
-
<div :with="{data:
|
|
7
|
-
<span :text="data"
|
|
6
|
+
<div :with="{data:'autoinit works'}">
|
|
7
|
+
<span :text="data">autoinit is broken</span>
|
|
8
8
|
</div>
|
|
9
9
|
|
|
10
10
|
<script async src="../node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
|
@@ -33,3 +33,4 @@
|
|
|
33
33
|
</script>
|
|
34
34
|
|
|
35
35
|
<script src="./test.js" type="module"></script>
|
|
36
|
+
|