sprae 5.0.1 → 5.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/package.json +1 -1
- package/sprae.auto.js +8 -6
- package/sprae.auto.min.js +1 -1
- package/sprae.js +8 -6
- package/sprae.min.js +1 -1
- package/src/core.js +3 -4
- package/src/directives.js +8 -6
- package/src/state.js +3 -1
- package/test/dom.js +25 -1
package/package.json
CHANGED
package/sprae.auto.js
CHANGED
|
@@ -59,6 +59,8 @@
|
|
|
59
59
|
return target[_parent]?.[prop];
|
|
60
60
|
if (Array.isArray(target) && prop in Array.prototype)
|
|
61
61
|
return target[prop];
|
|
62
|
+
if (prop in Object.prototype)
|
|
63
|
+
return target[prop];
|
|
62
64
|
let value = target[prop];
|
|
63
65
|
if (currentFx) {
|
|
64
66
|
let propFxs = targetFxs.get(target);
|
|
@@ -270,6 +272,9 @@
|
|
|
270
272
|
}
|
|
271
273
|
};
|
|
272
274
|
};
|
|
275
|
+
primary["ref"] = (el, expr, state2) => {
|
|
276
|
+
state2[expr] = el;
|
|
277
|
+
};
|
|
273
278
|
function parseForExpression(expression) {
|
|
274
279
|
let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
|
|
275
280
|
let stripParensRE = /^\s*\(|\)\s*$/g;
|
|
@@ -296,9 +301,6 @@
|
|
|
296
301
|
el.replaceChildren(content);
|
|
297
302
|
sprae(el, state2);
|
|
298
303
|
};
|
|
299
|
-
secondary["ref"] = (el, expr, state2) => {
|
|
300
|
-
state2[expr] = el;
|
|
301
|
-
};
|
|
302
304
|
secondary["id"] = (el, expr) => {
|
|
303
305
|
let evaluate = parseExpr(el, expr, ":id");
|
|
304
306
|
const update = (v) => el.id = v || v === 0 ? v : "";
|
|
@@ -578,7 +580,9 @@ ${directive}=${expression ? `"${expression}"
|
|
|
578
580
|
let expr = el.getAttribute(attrName);
|
|
579
581
|
el.removeAttribute(attrName);
|
|
580
582
|
updates.push(primary[name](el, expr, state2, name));
|
|
581
|
-
if (memo.has(el)
|
|
583
|
+
if (memo.has(el))
|
|
584
|
+
return;
|
|
585
|
+
if (el.parentNode !== parent)
|
|
582
586
|
return false;
|
|
583
587
|
}
|
|
584
588
|
}
|
|
@@ -595,8 +599,6 @@ ${directive}=${expression ? `"${expression}"
|
|
|
595
599
|
for (let attrName of attrNames) {
|
|
596
600
|
let dir = secondary[attrName] || directives_default;
|
|
597
601
|
updates.push(dir(el, expr, state2, attrName));
|
|
598
|
-
if (memo.has(el) || el.parentNode !== parent)
|
|
599
|
-
return false;
|
|
600
602
|
}
|
|
601
603
|
}
|
|
602
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];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=[S(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(S(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=S(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 E(new Error,e,t,":each");const n=e[m]=document.createTextNode("");e.replaceWith(n);const s=S(e,r[2],":each"),i=e.getAttribute(":key"),o=i?S(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):E(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])}},d.render=(e,t,r)=>{let n=S(e,t,":render")(r);n||E(new Error("Template not found"),e,t,":render");let l=n.content.cloneNode(!0);e.replaceChildren(l),$(e,r)},d.
|
|
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=[S(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(S(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=S(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 E(new Error,e,t,":each");const n=e[m]=document.createTextNode("");e.replaceWith(n);const s=S(e,r[2],":each"),i=e.getAttribute(":key"),o=i?S(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):E(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=S(e,t,":render")(r);n||E(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=S(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},d.class=(e,t)=>{let r=S(e,t,":class"),n=e.className;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.className=[n,s].filter(Boolean).join(" ")}},d.style=(e,t)=>{let r=S(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=S(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},d[""]=(e,t)=>{let r=S(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)N(e,t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),n[t])}},d.value=(e,t)=>{let r,n,l=S(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":"",N(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=S(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=S(e,t,":"+n);if(s)return l?t=>{let r=s(t)||(()=>{});return v(e,l,r)}:t=>N(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)}},N=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},x={};function S(e,t,r){let n=x[t];if(!n){let l=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=x[t]=new Function("__scope",`with (__scope) { return ${l.trim()} };`)}catch(n){return E(n,e,t,r)}}return l=>{let s;try{s=n.call(e,l)}catch(n){return E(n,e,t,r)}return s}}function E(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
|
@@ -58,6 +58,8 @@ var handler = {
|
|
|
58
58
|
return target[_parent]?.[prop];
|
|
59
59
|
if (Array.isArray(target) && prop in Array.prototype)
|
|
60
60
|
return target[prop];
|
|
61
|
+
if (prop in Object.prototype)
|
|
62
|
+
return target[prop];
|
|
61
63
|
let value = target[prop];
|
|
62
64
|
if (currentFx) {
|
|
63
65
|
let propFxs = targetFxs.get(target);
|
|
@@ -269,6 +271,9 @@ primary["each"] = (tpl, expr) => {
|
|
|
269
271
|
}
|
|
270
272
|
};
|
|
271
273
|
};
|
|
274
|
+
primary["ref"] = (el, expr, state2) => {
|
|
275
|
+
state2[expr] = el;
|
|
276
|
+
};
|
|
272
277
|
function parseForExpression(expression) {
|
|
273
278
|
let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
|
|
274
279
|
let stripParensRE = /^\s*\(|\)\s*$/g;
|
|
@@ -295,9 +300,6 @@ secondary["render"] = (el, expr, state2) => {
|
|
|
295
300
|
el.replaceChildren(content);
|
|
296
301
|
sprae(el, state2);
|
|
297
302
|
};
|
|
298
|
-
secondary["ref"] = (el, expr, state2) => {
|
|
299
|
-
state2[expr] = el;
|
|
300
|
-
};
|
|
301
303
|
secondary["id"] = (el, expr) => {
|
|
302
304
|
let evaluate = parseExpr(el, expr, ":id");
|
|
303
305
|
const update = (v) => el.id = v || v === 0 ? v : "";
|
|
@@ -577,7 +579,9 @@ function sprae(container, values) {
|
|
|
577
579
|
let expr = el.getAttribute(attrName);
|
|
578
580
|
el.removeAttribute(attrName);
|
|
579
581
|
updates.push(primary[name](el, expr, state2, name));
|
|
580
|
-
if (memo.has(el)
|
|
582
|
+
if (memo.has(el))
|
|
583
|
+
return;
|
|
584
|
+
if (el.parentNode !== parent)
|
|
581
585
|
return false;
|
|
582
586
|
}
|
|
583
587
|
}
|
|
@@ -594,8 +598,6 @@ function sprae(container, values) {
|
|
|
594
598
|
for (let attrName of attrNames) {
|
|
595
599
|
let dir = secondary[attrName] || directives_default;
|
|
596
600
|
updates.push(dir(el, expr, state2, attrName));
|
|
597
|
-
if (memo.has(el) || el.parentNode !== parent)
|
|
598
|
-
return false;
|
|
599
601
|
}
|
|
600
602
|
}
|
|
601
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];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=[S(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(S(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=S(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 E(new Error,e,t,":each");const n=e[m]=document.createTextNode("");e.replaceWith(n);const s=S(e,r[2],":each"),i=e.getAttribute(":key"),o=i?S(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):E(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=S(e,t,":render")(r);n||E(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=S(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},d.class=(e,t)=>{let r=S(e,t,":class"),n=e.className;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.className=[n,s].filter(Boolean).join(" ")}},d.style=(e,t)=>{let r=S(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=S(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},d[""]=(e,t)=>{let r=S(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=S(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=S(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=S(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:"")},N={};function S(e,t,r){let n=N[t];if(!n){let l=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=N[t]=new Function("__scope",`with (__scope) { return ${l.trim()} };`)}catch(n){return E(n,e,t,r)}}return l=>{let s;try{s=n.call(e,l)}catch(n){return E(n,e,t,r)}return s}}function E(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
|
@@ -120,6 +120,14 @@ primary['each'] = (tpl, expr) => {
|
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
+
// ref must be last within primaries, since that must be skipped by :each, but before secondaries
|
|
124
|
+
primary['ref'] = (el, expr, state) => {
|
|
125
|
+
// FIXME: wait for complex ref use-case
|
|
126
|
+
// parseExpr(el, `__scope[${expr}]=this`, ':ref')(values)
|
|
127
|
+
state[expr] = el;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
|
|
123
131
|
// This was taken AlpineJS, former VueJS 2.* core. Thanks Alpine & Vue!
|
|
124
132
|
function parseForExpression(expression) {
|
|
125
133
|
let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
|
|
@@ -153,12 +161,6 @@ secondary['render'] = (el, expr, state) => {
|
|
|
153
161
|
sprae(el, state)
|
|
154
162
|
}
|
|
155
163
|
|
|
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
164
|
secondary['id'] = (el, expr) => {
|
|
163
165
|
let evaluate = parseExpr(el, expr, ':id')
|
|
164
166
|
const update = v => el.id = v || v === 0 ? v : ''
|
package/src/state.js
CHANGED
|
@@ -24,8 +24,10 @@ const handler = {
|
|
|
24
24
|
if (typeof prop === 'symbol') return target[prop]
|
|
25
25
|
if (!(prop in target)) return target[_parent]?.[prop]
|
|
26
26
|
if (Array.isArray(target) && prop in Array.prototype) return target[prop];
|
|
27
|
-
|
|
27
|
+
// .constructor etc
|
|
28
|
+
if (prop in Object.prototype) return target[prop];
|
|
28
29
|
|
|
30
|
+
let value = target[prop]
|
|
29
31
|
if (currentFx) {
|
|
30
32
|
// get actual target from prototype chain
|
|
31
33
|
// while (!target.hasOwnProperty(prop)) target = Object.getPrototypeOf(target)
|
package/test/dom.js
CHANGED
|
@@ -915,6 +915,11 @@ test('with: writes to state', async () => {
|
|
|
915
915
|
await tick()
|
|
916
916
|
is(a.innerHTML, `<y>3</y>`)
|
|
917
917
|
})
|
|
918
|
+
test('with: one of children (internal number of iterations, cant see the result here)', async () => {
|
|
919
|
+
let a = h `<div><x :text="x"></x><x :with={x:2} :text="x"></x><x :text="y">3</x></div>`
|
|
920
|
+
sprae(a, {x:1,y:3})
|
|
921
|
+
is(a.innerHTML,`<x>1</x><x>2</x><x>3</x>`)
|
|
922
|
+
})
|
|
918
923
|
|
|
919
924
|
test(':render by ref', async () => {
|
|
920
925
|
let a = h`<template :ref="abc"><div :text="123"></div></template><x :render="abc">456</x>`
|
|
@@ -922,7 +927,7 @@ test(':render by ref', async () => {
|
|
|
922
927
|
is(a.outerHTML, `<template><div :text="123"></div></template><x><div>123</div></x>`)
|
|
923
928
|
})
|
|
924
929
|
|
|
925
|
-
test(':render
|
|
930
|
+
test(':render state', async () => {
|
|
926
931
|
let a = h`<template :ref="abc"><div :text="text"></div></template><x :render="abc" />`
|
|
927
932
|
let state = sprae(a, {text:'abc'})
|
|
928
933
|
is(a.outerHTML, `<template><div :text="text"></div></template><x><div>abc</div></x>`)
|
|
@@ -931,6 +936,25 @@ test(':render :with', async () => {
|
|
|
931
936
|
is(a.outerHTML, `<template><div :text="text"></div></template><x><div>def</div></x>`)
|
|
932
937
|
})
|
|
933
938
|
|
|
939
|
+
test(':render :with', async () => {
|
|
940
|
+
let a = h`<template :ref="tpl"><div :text="text"></div></template><x :render="tpl" :with="{text:'abc'}" />`
|
|
941
|
+
let state = sprae(a)
|
|
942
|
+
is(a.outerHTML, `<template><div :text="text"></div></template><x><div>abc</div></x>`)
|
|
943
|
+
})
|
|
944
|
+
|
|
945
|
+
test(':render nested items', async () => {
|
|
946
|
+
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'}]}" />`
|
|
947
|
+
let state = sprae(el)
|
|
948
|
+
is(el.outerHTML, `<template><div :each="item in items" :text="item.id"></div></template><x><div>a</div><div>b</div></x>`)
|
|
949
|
+
})
|
|
950
|
+
|
|
951
|
+
test.todo(':render template after use', async () => {
|
|
952
|
+
let a = h`<x :render="tpl" :with="{text:'abc'}" /><template :ref="tpl"><div :text="text"></div></template>`
|
|
953
|
+
let state = sprae(a)
|
|
954
|
+
is(a.outerHTML, `<x><div>abc</div></x><template><div :text="text"></div></template>`)
|
|
955
|
+
})
|
|
956
|
+
|
|
957
|
+
|
|
934
958
|
test('ref: base', async () => {
|
|
935
959
|
let a = h`<a :ref="a" :init="log.push(a), null" :text="b"></a>`
|
|
936
960
|
let state = sprae(a, {log:[], b:1})
|