jsxtra - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/jsxtra.es.js

@@ -22,5 +22,4 @@ var __defProp = Object.defineProperty;
 import { createBrowserHistory } from "history";
+import htm from "htm";
 import { v4 } from "uuid";
-import htm from "htm";
-const getKey = () => v4();
 let globalState = {};
@@ -46,2 +45,3 @@ const clearGlobalState = () => {
 };
+const getKey = () => v4();
 const getReference = (componentInfo, key) => {
@@ -56,20 +56,2 @@ const thisComponent = webComponentInfo[key].thisReference;
 };
-const buildOnSubmit = (key) => (selector, callback, persist = false) => {
-  const target = getReference(webComponentInfo, key);
-  target.addEventListener("submit", (event) => {
-    if (event.target.matches(`${selector}`)) {
-      event.preventDefault();
-      callback();
-    }
-  }, { once: !persist });
-};
-const buildOnClick = (key) => (selector, callback, persist = false) => {
-  const buildClickEvent = (selector2, callback2) => (event) => {
-    if (event.target.matches(`${selector2}`)) {
-      callback2();
-    }
-  };
-  const target = getReference(webComponentInfo, key);
-  target.addEventListener("click", buildClickEvent(selector, callback), { once: !persist });
-};
 const Fragment = ({ children }) => h(null, null, ...children);
@@ -132,4 +114,2 @@ const sanitized = {};
       $: build$(key),
-      onSubmit: buildOnSubmit(key),
-      onClick: buildOnClick(key),
       getState: buildGetState(key),
@@ -141,5 +121,6 @@ store,
     attrs.children = stack.reverse();
+    const scoped = !(attrs.SCOPED === false);
     webComponentInfo[key] = {};
     webComponentInfo[key].rerender = () => name(__spreadProps(__spreadValues({}, attrs), { HELPERS: helpers }));
-    webComponentInfo[key].hasShadowDom = componentName && componentName !== "Loader";
+    webComponentInfo[key].hasShadowDom = componentName && componentName !== "Loader" && scoped;
     class jsxtraComponent extends HTMLElement {
@@ -172,2 +153,3 @@ constructor() {
     };
+    const inlineEvents = ["onClick", "onSubmit"];
     const tagAttributes = () => {
@@ -177,4 +159,19 @@ let tags = "";
         for (let i in attrs2) {
-          if (attrs2[i] !== false && attrs2[i] != null) {
-            tags += ` ${DOMAttributeNames[i] ? DOMAttributeNames[i] : esc(i)}="${esc(attrs2[i])}"`;
+          if (inlineEvents.includes(i)) {
+            const functionKey = `jsxtra${getKey().replaceAll("-", "_")}`;
+            if (!window.jsxtraEvents) {
+              window.jsxtraEvents = {};
+            }
+            window.jsxtraEvents[functionKey] = attrs2[i];
+            switch (i) {
+              case "onClick":
+                tags += `onclick='window.jsxtraEvents.${functionKey}()'`;
+                break;
+              case "onSubmit":
+                tags += `onsubmit='window.jsxtraEvents.${functionKey}(event)'`;
+            }
+          } else {
+            if (attrs2[i] !== false && attrs2[i] != null) {
+              tags += ` ${DOMAttributeNames[i] ? DOMAttributeNames[i] : esc(i)}="${esc(attrs2[i])}"`;
+            }
           }
@@ -222,3 +219,3 @@ }
   if (!arrayOfStores) {
-    console.warn("No store initialised");
+    console.warn("JSXTRA: No store initialised");
     return;
@@ -225,0 +222,0 @@ }

dist/jsxtra.umd.js

@@ -1,1 +0,1 @@
-var te=Object.defineProperty,ne=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var oe=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;var D=(o,i,f)=>i in o?te(o,i,{enumerable:!0,configurable:!0,writable:!0,value:f}):o[i]=f,$=(o,i)=>{for(var f in i||(i={}))oe.call(i,f)&&D(o,f,i[f]);if(N)for(var f of N(i))se.call(i,f)&&D(o,f,i[f]);return o},R=(o,i)=>ne(o,re(i));(function(o,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("universal-router"),require("history"),require("uuid"),require("htm")):typeof define=="function"&&define.amd?define(["exports","universal-router","history","uuid","htm"],i):(o=typeof globalThis!="undefined"?globalThis:o||self,i(o.jsxtra={},o["universal-router"],o.history,o.uuid,o.htm))})(this,function(o,i,f,_,q){"use strict";function j(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var F=j(i),O=j(q);const x=()=>_.v4();let k={};const W=()=>{k={}},G=e=>t=>{const n={set(s,c,d){return s[c]=d,M(e),!0},get(s,c){return s[c]}};return k[e]||(k[e]=new Proxy($({},t),n)),k[e]},H=(e,t)=>{const n=a[t].thisReference;return n.shadowRoot||n},U=e=>t=>H(a,e).querySelector(t),z=e=>(t,n,s=!1)=>{H(a,e).addEventListener("submit",d=>{d.target.matches(`${t}`)&&(d.preventDefault(),n())},{once:!s})},B=e=>(t,n,s=!1)=>{const c=(p,h)=>w=>{w.target.matches(`${p}`)&&h()};H(a,e).addEventListener("click",c(t,n),{once:!s})},v=({children:e})=>y(null,null,...e),I={},C={},a={},M=e=>{if(!a[e].thisReference)return;const t=a[e].thisReference,n=t.shadowRoot||t;n.innerHTML=a[e].rerender()};function y(e,t){const n=typeof e=="function",c=!["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"].includes(e),d={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},p=u=>String(u).replace(/[&<>"']/g,r=>`&${d[r]};`);t=t||{};let h=[];for(let u=arguments.length;u-- >2;)h.push(arguments[u]);if(n){const u=O.default.bind(y),r=t.key||x(),l=e.name;if(t=$({},t),t.children=h.reverse(),e.name==="Fragment")return u`${e(t)}`;if(t.WATCH)for(const m of t.WATCH)C[m]=C[m]?[...C[m],r]:[r];const E={key:r,$:U(r),onSubmit:z(r),onClick:B(r),getState:G(r),store:S,getKey:x};t=R($({},t),{HELPERS:E}),t.children=h.reverse(),a[r]={},a[r].rerender=()=>e(R($({},t),{HELPERS:E})),a[r].hasShadowDom=l&&l!=="Loader";class L extends HTMLElement{constructor(){super();if(this.key=this.getAttribute("key"),this.info=a[this.key],a[this.key].thisReference=this,this.info.hasShadowDom){const ee=this.attachShadow({mode:"open"});ee.innerHTML=a[this.key].rerender()}else this.innerHTML=a[this.key].rerender()}}return customElements.get("jsxtra-wc")===void 0&&customElements.define("jsxtra-wc",L),u`<${"jsxtra-wc"} component-name=${l} key=${r}></${"jsxtra-wc"}>`}const w=(u,r)=>{if(!u)return"";let l={className:"class",htmlFor:"for"};return`<${u} ${(()=>{let L="";if(r)for(let m in r)r[m]!==!1&&r[m]!=null&&(L+=` ${l[m]?l[m]:p(m)}="${p(r[m])}"`);return L})()}>`},T=()=>{let u="";if(c)for(;h.length;){let r=h.pop();if(r)if(r.pop)for(let l=r.length;l--;)h.push(r[l]);else u+=I[r]===!0?r:p(r)}return u},g=u=>c&&u?`</${u}>`:"",b=`${w(e,t)}${T()}${g(e)}`;return I[b]=!0,b}y.Fragment=v;const P={routerInfo:{enabled:!1,currentPath:null}},J=e=>{if(!e){console.warn("No store initialised");return}for(const t of e){const{name:n,store:s}=t;P[n]=s}},K=(e,t,n)=>{const s=t[e];if(s)for(const c of s)M(c)},A=e=>({set(t,n,s){t[n]=s;const c=[...e,n].join(".");return K(c,C),!0},get(t,n){return typeof t[n]=="object"&&t[n]!==null?new Proxy(t[n],A(e?[...e,n]:[n])):t[n]}}),S=new Proxy(P,A()),Q=e=>/^https?:\/\//.test(e),V=(e,t)=>{console.log("initialising router");const{routerContainer:n,routes:s,persistState:c=!1}=e,d=f.createBrowserHistory();S.routerInfo.history=d,t.addEventListener("click",g=>{const b=g.composedPath()[0],r=(l=>l.tagName==="A"?l.getAttribute("href"):l.closest("a")?l.closest("a").getAttribute("href"):null)(b);!r||Q(r)||(g.preventDefault(),d.push(r))}),S.routerInfo.enabled=!0;const p=new F.default(s),h=n(),w=g=>p.resolve(g).then(b=>{S.routerInfo.currentPath=g,h.innerHTML=b,h.dataset.route=g}),T=d.location;h.dataset.route=T.pathname,T.pathname!=="/"&&w(T.pathname),d.listen(({location:g,action:b})=>{c||W(),w(g.pathname)})},X=({onLoad:e,children:t})=>(e&&e(),y(v,null,t)),Y=(e,t)=>()=>y(X,{onLoad:t},e),Z=e=>{const{stores:t,appContainer:n,baseComponent:s,router:c}=e;J(t),n.innerHTML=s(),c&&V(c,n)};o.Fragment=v,o.h=y,o.jsxtraInit=Z,o.store=S,o.wrapper=Y,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});
+var ee=Object.defineProperty,te=Object.defineProperties;var ne=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var oe=Object.prototype.hasOwnProperty,re=Object.prototype.propertyIsEnumerable;var D=(r,s,f)=>s in r?ee(r,s,{enumerable:!0,configurable:!0,writable:!0,value:f}):r[s]=f,k=(r,s)=>{for(var f in s||(s={}))oe.call(s,f)&&D(r,f,s[f]);if(_)for(var f of _(s))re.call(s,f)&&D(r,f,s[f]);return r},H=(r,s)=>te(r,ne(s));(function(r,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("universal-router"),require("history"),require("htm"),require("uuid")):typeof define=="function"&&define.amd?define(["exports","universal-router","history","htm","uuid"],s):(r=typeof globalThis!="undefined"?globalThis:r||self,s(r.jsxtra={},r["universal-router"],r.history,r.htm,r.uuid))})(this,function(r,s,f,q,F){"use strict";function R(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var O=R(s),W=R(q);let v={};const G=()=>{v={}},U=e=>t=>{const o={set(c,u,g){return c[u]=g,A(e),!0},get(c,u){return c[u]}};return v[e]||(v[e]=new Proxy(k({},t),o)),v[e]},E=()=>F.v4(),z=(e,t)=>{const o=d[t].thisReference;return o.shadowRoot||o},B=e=>t=>z(d,e).querySelector(t),L=({children:e})=>w(null,null,...e),P={},C={},d={},A=e=>{if(!d[e].thisReference)return;const t=d[e].thisReference,o=t.shadowRoot||t;o.innerHTML=d[e].rerender()};function w(e,t){const o=typeof e=="function",u=!["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"].includes(e),g={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},b=i=>String(i).replace(/[&<>"']/g,n=>`&${g[n]};`);t=t||{};let h=[];for(let i=arguments.length;i-- >2;)h.push(arguments[i]);if(o){const i=W.default.bind(w),n=t.key||E(),a=e.name;if(t=k({},t),t.children=h.reverse(),e.name==="Fragment")return i`${e(t)}`;if(t.WATCH)for(const l of t.WATCH)C[l]=C[l]?[...C[l],n]:[n];const x={key:n,$:B(n),getState:U(n),store:S,getKey:E};t=H(k({},t),{HELPERS:x}),t.children=h.reverse();const N=t.SCOPED!==!1;d[n]={},d[n].rerender=()=>e(H(k({},t),{HELPERS:x})),d[n].hasShadowDom=a&&a!=="Loader"&&N;class y extends HTMLElement{constructor(){super();if(this.key=this.getAttribute("key"),this.info=d[this.key],d[this.key].thisReference=this,this.info.hasShadowDom){const $=this.attachShadow({mode:"open"});$.innerHTML=d[this.key].rerender()}else this.innerHTML=d[this.key].rerender()}}return customElements.get("jsxtra-wc")===void 0&&customElements.define("jsxtra-wc",y),i`<${"jsxtra-wc"} component-name=${a} key=${n}></${"jsxtra-wc"}>`}const j=(i,n)=>{if(!i)return"";let a={className:"class",htmlFor:"for"};const x=["onClick","onSubmit"];return`<${i} ${(()=>{let y="";if(n)for(let l in n)if(x.includes(l)){const $=`jsxtra${E().replaceAll("-","_")}`;switch(window.jsxtraEvents||(window.jsxtraEvents={}),window.jsxtraEvents[$]=n[l],l){case"onClick":y+=`onclick='window.jsxtraEvents.${$}()'`;break;case"onSubmit":y+=`onsubmit='window.jsxtraEvents.${$}(event)'`}}else n[l]!==!1&&n[l]!=null&&(y+=` ${a[l]?a[l]:b(l)}="${b(n[l])}"`);return y})()}>`},T=()=>{let i="";if(u)for(;h.length;){let n=h.pop();if(n)if(n.pop)for(let a=n.length;a--;)h.push(n[a]);else i+=P[n]===!0?n:b(n)}return i},m=i=>u&&i?`</${i}>`:"",p=`${j(e,t)}${T()}${m(e)}`;return P[p]=!0,p}w.Fragment=L;const I={routerInfo:{enabled:!1,currentPath:null}},J=e=>{if(!e){console.warn("JSXTRA: No store initialised");return}for(const t of e){const{name:o,store:c}=t;I[o]=c}},K=(e,t,o)=>{const c=t[e];if(c)for(const u of c)A(u)},M=e=>({set(t,o,c){t[o]=c;const u=[...e,o].join(".");return K(u,C),!0},get(t,o){return typeof t[o]=="object"&&t[o]!==null?new Proxy(t[o],M(e?[...e,o]:[o])):t[o]}}),S=new Proxy(I,M()),X=e=>/^https?:\/\//.test(e),Q=(e,t)=>{console.log("initialising router");const{routerContainer:o,routes:c,persistState:u=!1}=e,g=f.createBrowserHistory();S.routerInfo.history=g,t.addEventListener("click",m=>{const p=m.composedPath()[0],n=(a=>a.tagName==="A"?a.getAttribute("href"):a.closest("a")?a.closest("a").getAttribute("href"):null)(p);!n||X(n)||(m.preventDefault(),g.push(n))}),S.routerInfo.enabled=!0;const b=new O.default(c),h=o(),j=m=>b.resolve(m).then(p=>{S.routerInfo.currentPath=m,h.innerHTML=p,h.dataset.route=m}),T=g.location;h.dataset.route=T.pathname,T.pathname!=="/"&&j(T.pathname),g.listen(({location:m,action:p})=>{u||G(),j(m.pathname)})},V=({onLoad:e,children:t})=>(e&&e(),w(L,null,t)),Y=(e,t)=>()=>w(V,{onLoad:t},e),Z=e=>{const{stores:t,appContainer:o,baseComponent:c,router:u}=e;J(t),o.innerHTML=c(),u&&Q(u,o)};r.Fragment=L,r.h=w,r.jsxtraInit=Z,r.store=S,r.wrapper=Y,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package.json

@@ -17,3 +17,3 @@ {
 	},
-	"version": "0.0.12",
+	"version": "0.0.13",
 	"scripts": {
@@ -20,0 +20,0 @@ "dev": "vite",

No alert changes

Improved metrics

Total package byte prevSize

14937

increased by0.13%

Worsened metrics

Lines of code

327

decreased by-0.91%

No dependency changes