ladrillosjs 0.1.1 → 0.1.2
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 +114 -0
- package/dist/ladrillosjs.cjs.js +1 -1
- package/dist/ladrillosjs.es.js +1 -1
- package/dist/ladrillosjs.umd.js +1 -1
- package/dist/main-CLBumiAD.mjs +101 -0
- package/dist/main-DQ-yGgzS.js +1 -0
- package/dist/webcomponent-CUDuf8lm.js +1 -0
- package/dist/webcomponent-DytFVRp0.mjs +156 -0
- package/package.json +1 -1
- package/dist/main-Dju_Az3Y.js +0 -1
- package/dist/main-oMNAxRMg.mjs +0 -94
- package/dist/webcomponent-BsA_Nb1m.mjs +0 -107
- package/dist/webcomponent-Mp1_EAq9.js +0 -1
package/README.md
CHANGED
|
@@ -8,3 +8,117 @@ A lightweight, zero-dependency web component framework for building modular web
|
|
|
8
8
|
|
|
9
9
|
1. `npm install`
|
|
10
10
|
2. `npm run dev`
|
|
11
|
+
|
|
12
|
+
## Usage
|
|
13
|
+
|
|
14
|
+
### 1. Install & import
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install ladrillosjs
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
#### cdn
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/ladrillosjs@0.1.1"></script>
|
|
24
|
+
<script type="module">
|
|
25
|
+
ladrillosjs.ladrillos.registerComponent(
|
|
26
|
+
"alert-button",
|
|
27
|
+
"alert-button.html"
|
|
28
|
+
);
|
|
29
|
+
</script>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 2. Create index.html file
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<!DOCTYPE html>
|
|
36
|
+
<html lang="en">
|
|
37
|
+
<head>
|
|
38
|
+
<meta charset="UTF-8" />
|
|
39
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
40
|
+
<title>Hello World</title>
|
|
41
|
+
<style>
|
|
42
|
+
:root {
|
|
43
|
+
--btn-bg: #1a73e8;
|
|
44
|
+
--btn-color: #ffffff;
|
|
45
|
+
--btn-padding: 0.75rem 1.5rem;
|
|
46
|
+
--btn-radius: 0.375rem;
|
|
47
|
+
--btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
48
|
+
--btn-hover-bg: #1669c1;
|
|
49
|
+
--btn-transition: background-color 0.2s ease, transform 0.2s ease,
|
|
50
|
+
box-shadow 0.2s ease;
|
|
51
|
+
}
|
|
52
|
+
body {
|
|
53
|
+
display: flex;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
align-items: center;
|
|
56
|
+
height: 100vh;
|
|
57
|
+
margin: 0;
|
|
58
|
+
}
|
|
59
|
+
</style>
|
|
60
|
+
</head>
|
|
61
|
+
<body>
|
|
62
|
+
<!-- Add component -->
|
|
63
|
+
<alert-button></alert-button>
|
|
64
|
+
<script type="module">
|
|
65
|
+
// import framework
|
|
66
|
+
import { ladrillos } from "ladrillosjs";
|
|
67
|
+
// register component (name, location)
|
|
68
|
+
ladrillos.registerComponent("alert-button", "alert-button.html");
|
|
69
|
+
</script>
|
|
70
|
+
</body>
|
|
71
|
+
</html>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 3. Create a component
|
|
75
|
+
|
|
76
|
+
Create `alert-button.html`
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<style>
|
|
80
|
+
button {
|
|
81
|
+
background: var(--btn-bg);
|
|
82
|
+
color: var(--btn-color);
|
|
83
|
+
padding: var(--btn-padding);
|
|
84
|
+
border: none;
|
|
85
|
+
border-radius: var(--btn-radius);
|
|
86
|
+
box-shadow: var(--btn-shadow);
|
|
87
|
+
font-size: 1rem;
|
|
88
|
+
font-weight: 600;
|
|
89
|
+
letter-spacing: 0.5px;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
transition: var(--btn-transition);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
button:hover {
|
|
95
|
+
background: var(--btn-hover-bg);
|
|
96
|
+
transform: translateY(-1px);
|
|
97
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
button:active {
|
|
101
|
+
transform: translateY(0);
|
|
102
|
+
box-shadow: var(--btn-shadow);
|
|
103
|
+
opacity: 0.9;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
button:focus {
|
|
107
|
+
outline: none;
|
|
108
|
+
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4);
|
|
109
|
+
}
|
|
110
|
+
</style>
|
|
111
|
+
<button onclick="{increaseCount()}">Clicked: {count}</button>
|
|
112
|
+
|
|
113
|
+
<script>
|
|
114
|
+
const count = 0;
|
|
115
|
+
|
|
116
|
+
const increaseCount = () => {
|
|
117
|
+
count++;
|
|
118
|
+
|
|
119
|
+
if (count >= 10) {
|
|
120
|
+
alert("to many clicks");
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
</script>
|
|
124
|
+
```
|
package/dist/ladrillosjs.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./main-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./main-DQ-yGgzS.js");exports.ladrillos=e.ladrillos;
|
package/dist/ladrillosjs.es.js
CHANGED
package/dist/ladrillosjs.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(s,t){typeof exports=="object"&&typeof module!="undefined"?t(exports):typeof define=="function"&&define.amd?define(["exports"],t):(s=typeof globalThis!="undefined"?globalThis:s||self,t(s.ladrillosjs={}))})(this,function(s){"use strict";var W=Object.defineProperty;var B=s=>{throw TypeError(s)};var q=(s,t,i)=>t in s?W(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var C=(s,t,i)=>q(s,typeof t!="symbol"?t+"":t,i),O=(s,t,i)=>t.has(s)||B("Cannot "+i);var N=(s,t,i)=>(O(s,t,"read from private field"),i?i.call(s):t.get(s)),$=(s,t,i)=>t.has(s)?B("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(s):t.set(s,i);var A=(s,t,i)=>new Promise((E,b)=>{var v=r=>{try{g(i.next(r))}catch(a){b(a)}},T=r=>{try{g(i.throw(r))}catch(a){b(a)}},g=r=>r.done?E(r.value):Promise.resolve(r.value).then(v,T);g((i=i.apply(s,t)).next())});var g;const t={log(a,...c){},error(a,...c){console.error(a,...c)},warn(a,...c){}},r=class r{constructor(){$(this,g,new Map);this.components={}}registerComponent(c,h,d=!0){return A(this,null,function*(){if(this.components[c]){t.log(`Component ${c} already registered, skipping.`);return}try{let l=N(this,g).get(h);l||(l=yield(yield fetch(h)).text(),N(this,g).set(h,l));const _=l.replace(r._SCRIPT_ALL,"").replace(r._STYLE_ALL,""),y=document.createElement("template");y.innerHTML=_;const x=r._SCRIPT_ONE.exec(l),w=r._STYLE_ONE.exec(l);this.components[c]={tagName:c,template:y,script:(x==null?void 0:x[1].trim())||"",style:(w==null?void 0:w[1].trim())||""},this._defineWebComponent(c,d),t.log(`Component ${c} registered successfully`)}catch(l){t.error(`Failed to register component ${c}:`,l)}})}_defineWebComponent(c,h){return A(this,null,function*(){const{defineWebComponent:d}=yield Promise.resolve().then(()=>T);d(this.components[c],h)})}};g=new WeakMap,C(r,"_SCRIPT_ALL",/<script>([\s\S]*?)<\/script>/g),C(r,"_STYLE_ALL",/<style>([\s\S]*?)<\/style>/g),C(r,"_SCRIPT_ONE",/<script>([\s\S]*?)<\/script>/),C(r,"_STYLE_ONE",/<style>([\s\S]*?)<\/style>/);let i=r;const E=new i;function b(a,c={}){return new Proxy(c,{set(h,d,l){const _=h[d];return h[d]=l,_!==l&&!a._initializing&&(typeof a._updateBinding=="function"?a._updateBinding(d,l):a._update()),!0},get(h,d){return h[d]}})}const T=Object.freeze(Object.defineProperty({__proto__:null,defineWebComponent:(a,c)=>{if(!a){t.error("Component is not defined or invalid.");return}if(customElements.get(a.tagName)){t.warn(`Component ${a.tagName} is already defined.`);return}const{tagName:h,template:d,script:l,style:_}=a,x=(m=>{const e=/{(.*?)}/g,o=new Set;let n;for(;(n=e.exec(m.innerHTML))!==null;)o.add(n[1].trim().toLowerCase());return Array.from(o)})(d),w=l.replace(/\b(?:const|let|var)\s+([\w$]+)\s*=/g,"state.$1 =").replace(/function\s+([\w$]+)\s*\(/g,"state.$1 = function ("),R=l?new Function("state",`with(state){${w}}`):()=>{},S=[];d.content.querySelectorAll("*").forEach(m=>{Array.from(m.attributes).forEach(e=>{if(!e.name.startsWith("on"))return;const o=e.name.slice(2),n=e.value.match(/{\s*([\w$]+)\(\)\s*}/);if(!n)return;const u=n[1];m.dataset._evtIndex=S.length,S.push({evt:o,fnName:u}),m.removeAttribute(e.name)})});class M extends HTMLElement{constructor(){super(),c&&this.attachShadow({mode:"open"}),this.state={},this.styleElement=document.createElement("style"),this.styleElement.textContent=_||"",this._textBindings={},this._origText=new Map}connectedCallback(){this._textBindings={},this._origText=new Map;const e=d.content.cloneNode(!0);this.shadowRoot?(this.shadowRoot.appendChild(this.styleElement),this.shadowRoot.appendChild(e)):(this.appendChild(this.styleElement),this.appendChild(e)),this.state=b(this,{}),this._initializing=!0;try{R.call(this,this.state)}catch(n){console.error("Error initializing component script:",n)}finally{this._initializing=!1}const o=this.shadowRoot||this;this._processTemplate(o)}_processTemplate(e){this._getAllTextNodes(e).forEach(n=>{const u=n.textContent;u.includes("{")&&u.includes("}")&&(this._origText.set(n,u),n.textContent=u.replace(/{([^}]+)}/g,(p,f)=>(f=f.trim(),this._textBindings[f]=this._textBindings[f]||[],this._textBindings[f].push(n),this.hasAttribute(f)?this.getAttribute(f):this.state[f]!==void 0?this.state[f]:p)))}),S.forEach((n,u)=>{const p=e.querySelector(`[data-_evt-index="${u}"]`);p.removeAttribute("data-_evt-index"),p.addEventListener(n.evt,f=>{const L=this.state[n.fnName];typeof L=="function"&&L.call(p,f)})})}_getAllTextNodes(e){const o=[],n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT,null,!1);let u;for(;u=n.nextNode();)o.push(u);return o}_update(){const e=d.content.cloneNode(!0);this._processTemplate(e),this.shadowRoot?(this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this.styleElement),this.shadowRoot.appendChild(e)):(this.innerHTML="",this.appendChild(this.styleElement),this.appendChild(e))}_updateBinding(e){(this._textBindings[e]||[]).forEach(o=>{const n=this._origText.get(o)||"";o.textContent=n.replace(/{([^}]+)}/g,(u,p)=>(p=p.trim(),this.hasAttribute(p)?this.getAttribute(p):this.state[p]))})}disconnectedCallback(){t.log("disconnectedCallback",this)}static get observedAttributes(){return x}attributeChangedCallback(e,o,n){o!==n&&(this.state[e]=n)}emit(e,o){const n=o!=null?o:this.state;this.dispatchEvent(new CustomEvent(e,{detail:n,bubbles:!0}))}querySelector(e){return this.shadowRoot?this.shadowRoot.querySelector(e):super.querySelector(e)}querySelectorAll(e){return this.shadowRoot?this.shadowRoot.querySelectorAll(e):super.querySelectorAll(e)}}customElements.define(h,M),t.log(`Web component defined: <${h}></${h}>`)}},Symbol.toStringTag,{value:"Module"}));s.ladrillos=E,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
var h = Object.defineProperty;
|
|
2
|
+
var E = (t) => {
|
|
3
|
+
throw TypeError(t);
|
|
4
|
+
};
|
|
5
|
+
var C = (t, e, s) => e in t ? h(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
|
|
6
|
+
var a = (t, e, s) => C(t, typeof e != "symbol" ? e + "" : e, s), f = (t, e, s) => e.has(t) || E("Cannot " + s);
|
|
7
|
+
var S = (t, e, s) => (f(t, e, "read from private field"), s ? s.call(t) : e.get(t)), L = (t, e, s) => e.has(t) ? E("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s);
|
|
8
|
+
var T = (t, e, s) => new Promise((i, c) => {
|
|
9
|
+
var m = (r) => {
|
|
10
|
+
try {
|
|
11
|
+
n(s.next(r));
|
|
12
|
+
} catch (l) {
|
|
13
|
+
c(l);
|
|
14
|
+
}
|
|
15
|
+
}, g = (r) => {
|
|
16
|
+
try {
|
|
17
|
+
n(s.throw(r));
|
|
18
|
+
} catch (l) {
|
|
19
|
+
c(l);
|
|
20
|
+
}
|
|
21
|
+
}, n = (r) => r.done ? i(r.value) : Promise.resolve(r.value).then(m, g);
|
|
22
|
+
n((s = s.apply(t, e)).next());
|
|
23
|
+
});
|
|
24
|
+
const _ = {
|
|
25
|
+
/**
|
|
26
|
+
* Log a message only in development mode
|
|
27
|
+
* @param {string} message - The message to log
|
|
28
|
+
* @param {any[]} args - Additional arguments to log
|
|
29
|
+
*/
|
|
30
|
+
log(t, ...e) {
|
|
31
|
+
},
|
|
32
|
+
/**
|
|
33
|
+
* Log an error (always logs in both dev and production)
|
|
34
|
+
* @param {string} message - The error message
|
|
35
|
+
* @param {any[]} args - Additional arguments to log
|
|
36
|
+
*/
|
|
37
|
+
error(t, ...e) {
|
|
38
|
+
console.error(t, ...e);
|
|
39
|
+
},
|
|
40
|
+
/**
|
|
41
|
+
* Log a warning only in development mode
|
|
42
|
+
* @param {string} message - The warning message
|
|
43
|
+
* @param {any[]} args - Additional arguments to log
|
|
44
|
+
*/
|
|
45
|
+
warn(t, ...e) {
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
var p;
|
|
49
|
+
const o = class o {
|
|
50
|
+
constructor() {
|
|
51
|
+
L(this, p, /* @__PURE__ */ new Map());
|
|
52
|
+
this.components = {};
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* @param {string} name
|
|
56
|
+
* @param {string} path
|
|
57
|
+
* @param {boolean} [useShadowDOM=true]
|
|
58
|
+
* @returns {Promise<void>}
|
|
59
|
+
*/
|
|
60
|
+
registerComponent(e, s, i = !0) {
|
|
61
|
+
return T(this, null, function* () {
|
|
62
|
+
if (this.components[e]) {
|
|
63
|
+
_.log(`Component ${e} already registered, skipping.`);
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
try {
|
|
67
|
+
let c = S(this, p).get(s);
|
|
68
|
+
c || (c = yield (yield fetch(s)).text(), S(this, p).set(s, c));
|
|
69
|
+
const m = c.replace(o._SCRIPT_ALL, "").replace(o._STYLE_ALL, ""), g = document.createElement("template");
|
|
70
|
+
g.innerHTML = m;
|
|
71
|
+
const n = o._SCRIPT_ONE.exec(c), r = o._STYLE_ONE.exec(c);
|
|
72
|
+
this.components[e] = {
|
|
73
|
+
tagName: e,
|
|
74
|
+
template: g,
|
|
75
|
+
script: (n == null ? void 0 : n[1].trim()) || "",
|
|
76
|
+
style: (r == null ? void 0 : r[1].trim()) || ""
|
|
77
|
+
}, this._defineWebComponent(e, i), _.log(`Component ${e} registered successfully`);
|
|
78
|
+
} catch (c) {
|
|
79
|
+
_.error(`Failed to register component ${e}:`, c);
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* @private
|
|
85
|
+
* @param {string} name
|
|
86
|
+
* @param {boolean} useShadowDOM
|
|
87
|
+
*/
|
|
88
|
+
_defineWebComponent(e, s) {
|
|
89
|
+
return T(this, null, function* () {
|
|
90
|
+
const { defineWebComponent: i } = yield import("./webcomponent-DytFVRp0.mjs");
|
|
91
|
+
i(this.components[e], s);
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
p = new WeakMap(), a(o, "_SCRIPT_ALL", /<script>([\s\S]*?)<\/script>/g), a(o, "_STYLE_ALL", /<style>([\s\S]*?)<\/style>/g), a(o, "_SCRIPT_ONE", /<script>([\s\S]*?)<\/script>/), a(o, "_STYLE_ONE", /<style>([\s\S]*?)<\/style>/);
|
|
96
|
+
let y = o;
|
|
97
|
+
const w = new y();
|
|
98
|
+
export {
|
|
99
|
+
w as a,
|
|
100
|
+
_ as l
|
|
101
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var E=Object.defineProperty;var u=t=>{throw TypeError(t)};var L=(t,e,s)=>e in t?E(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var a=(t,e,s)=>L(t,typeof e!="symbol"?e+"":e,s),C=(t,e,s)=>e.has(t)||u("Cannot "+s);var T=(t,e,s)=>(C(t,e,"read from private field"),s?s.call(t):e.get(t)),y=(t,e,s)=>e.has(t)?u("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s);var _=(t,e,s)=>new Promise((i,r)=>{var S=c=>{try{n(s.next(c))}catch(l){r(l)}},p=c=>{try{n(s.throw(c))}catch(l){r(l)}},n=c=>c.done?i(c.value):Promise.resolve(c.value).then(S,p);n((s=s.apply(t,e)).next())});const m={log(t,...e){},error(t,...e){console.error(t,...e)},warn(t,...e){}};var g;const o=class o{constructor(){y(this,g,new Map);this.components={}}registerComponent(e,s,i=!0){return _(this,null,function*(){if(this.components[e]){m.log(`Component ${e} already registered, skipping.`);return}try{let r=T(this,g).get(s);r||(r=yield(yield fetch(s)).text(),T(this,g).set(s,r));const S=r.replace(o._SCRIPT_ALL,"").replace(o._STYLE_ALL,""),p=document.createElement("template");p.innerHTML=S;const n=o._SCRIPT_ONE.exec(r),c=o._STYLE_ONE.exec(r);this.components[e]={tagName:e,template:p,script:(n==null?void 0:n[1].trim())||"",style:(c==null?void 0:c[1].trim())||""},this._defineWebComponent(e,i),m.log(`Component ${e} registered successfully`)}catch(r){m.error(`Failed to register component ${e}:`,r)}})}_defineWebComponent(e,s){return _(this,null,function*(){const{defineWebComponent:i}=yield Promise.resolve().then(()=>require("./webcomponent-CUDuf8lm.js"));i(this.components[e],s)})}};g=new WeakMap,a(o,"_SCRIPT_ALL",/<script>([\s\S]*?)<\/script>/g),a(o,"_STYLE_ALL",/<style>([\s\S]*?)<\/style>/g),a(o,"_SCRIPT_ONE",/<script>([\s\S]*?)<\/script>/),a(o,"_STYLE_ONE",/<style>([\s\S]*?)<\/style>/);let h=o;const f=new h;exports.ladrillos=f;exports.logger=m;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./main-DQ-yGgzS.js");function C(a,u={}){return new Proxy(u,{set(l,r,h){const g=l[r];return l[r]=h,g!==h&&!a._initializing&&(typeof a._updateBinding=="function"?a._updateBinding(r,h):a._update()),!0},get(l,r){return l[r]}})}const b=(a,u)=>{if(!a){d.logger.error("Component is not defined or invalid.");return}if(customElements.get(a.tagName)){d.logger.warn(`Component ${a.tagName} is already defined.`);return}const{tagName:l,template:r,script:h,style:g}=a,f=(c=>{const t=/{(.*?)}/g,i=new Set;let e;for(;(e=t.exec(c.innerHTML))!==null;)i.add(e[1].trim().toLowerCase());return Array.from(i)})(r),x=h.replace(/\b(?:const|let|var)\s+([\w$]+)\s*=/g,"state.$1 =").replace(/function\s+([\w$]+)\s*\(/g,"state.$1 = function ("),w=h?new Function("state",`with(state){${x}}`):()=>{},p=[];r.content.querySelectorAll("*").forEach(c=>{Array.from(c.attributes).forEach(t=>{if(!t.name.startsWith("on"))return;const i=t.name.slice(2),e=t.value.match(/{\s*([\w$]+)\(\)\s*}/);if(!e)return;const n=e[1];c.dataset._evtIndex=p.length,p.push({evt:i,fnName:n}),c.removeAttribute(t.name)})});class _ extends HTMLElement{constructor(){super(),u&&this.attachShadow({mode:"open"}),this.state={},this.styleElement=document.createElement("style"),this.styleElement.textContent=g||"",this._textBindings={},this._origText=new Map}connectedCallback(){this._textBindings={},this._origText=new Map;const t=r.content.cloneNode(!0);this.shadowRoot?(this.shadowRoot.appendChild(this.styleElement),this.shadowRoot.appendChild(t)):(this.appendChild(this.styleElement),this.appendChild(t)),this.state=C(this,{}),this._initializing=!0;try{w.call(this,this.state)}catch(e){console.error("Error initializing component script:",e)}finally{this._initializing=!1}const i=this.shadowRoot||this;this._processTemplate(i)}_processTemplate(t){this._getAllTextNodes(t).forEach(e=>{const n=e.textContent;n.includes("{")&&n.includes("}")&&(this._origText.set(e,n),e.textContent=n.replace(/{([^}]+)}/g,(s,o)=>(o=o.trim(),this._textBindings[o]=this._textBindings[o]||[],this._textBindings[o].push(e),this.hasAttribute(o)?this.getAttribute(o):this.state[o]!==void 0?this.state[o]:s)))}),p.forEach((e,n)=>{const s=t.querySelector(`[data-_evt-index="${n}"]`);s.removeAttribute("data-_evt-index"),s.addEventListener(e.evt,o=>{const m=this.state[e.fnName];typeof m=="function"&&m.call(s,o)})})}_getAllTextNodes(t){const i=[],e=document.createTreeWalker(t,NodeFilter.SHOW_TEXT,null,!1);let n;for(;n=e.nextNode();)i.push(n);return i}_update(){const t=r.content.cloneNode(!0);this._processTemplate(t),this.shadowRoot?(this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this.styleElement),this.shadowRoot.appendChild(t)):(this.innerHTML="",this.appendChild(this.styleElement),this.appendChild(t))}_updateBinding(t){(this._textBindings[t]||[]).forEach(i=>{const e=this._origText.get(i)||"";i.textContent=e.replace(/{([^}]+)}/g,(n,s)=>(s=s.trim(),this.hasAttribute(s)?this.getAttribute(s):this.state[s]))})}disconnectedCallback(){d.logger.log("disconnectedCallback",this)}static get observedAttributes(){return f}attributeChangedCallback(t,i,e){i!==e&&(this.state[t]=e)}emit(t,i){const e=i!=null?i:this.state;this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0}))}querySelector(t){return this.shadowRoot?this.shadowRoot.querySelector(t):super.querySelector(t)}querySelectorAll(t){return this.shadowRoot?this.shadowRoot.querySelectorAll(t):super.querySelectorAll(t)}}customElements.define(l,_),d.logger.log(`Web component defined: <${l}></${l}>`)};exports.defineWebComponent=b;
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import { l as d } from "./main-CLBumiAD.mjs";
|
|
2
|
+
function C(a, u = {}) {
|
|
3
|
+
return new Proxy(u, {
|
|
4
|
+
set(l, r, h) {
|
|
5
|
+
const p = l[r];
|
|
6
|
+
return l[r] = h, p !== h && !a._initializing && (typeof a._updateBinding == "function" ? a._updateBinding(r, h) : a._update()), !0;
|
|
7
|
+
},
|
|
8
|
+
get(l, r) {
|
|
9
|
+
return l[r];
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
const T = (a, u) => {
|
|
14
|
+
if (!a) {
|
|
15
|
+
d.error("Component is not defined or invalid.");
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
if (customElements.get(a.tagName)) {
|
|
19
|
+
d.warn(`Component ${a.tagName} is already defined.`);
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
const { tagName: l, template: r, script: h, style: p } = a, g = ((c) => {
|
|
23
|
+
const t = /{(.*?)}/g, s = /* @__PURE__ */ new Set();
|
|
24
|
+
let e;
|
|
25
|
+
for (; (e = t.exec(c.innerHTML)) !== null; )
|
|
26
|
+
s.add(e[1].trim().toLowerCase());
|
|
27
|
+
return Array.from(s);
|
|
28
|
+
})(r), x = h.replace(/\b(?:const|let|var)\s+([\w$]+)\s*=/g, "state.$1 =").replace(/function\s+([\w$]+)\s*\(/g, "state.$1 = function ("), w = h ? new Function("state", `with(state){${x}}`) : () => {
|
|
29
|
+
}, m = [];
|
|
30
|
+
r.content.querySelectorAll("*").forEach((c) => {
|
|
31
|
+
Array.from(c.attributes).forEach((t) => {
|
|
32
|
+
if (!t.name.startsWith("on")) return;
|
|
33
|
+
const s = t.name.slice(2), e = t.value.match(/{\s*([\w$]+)\(\)\s*}/);
|
|
34
|
+
if (!e) return;
|
|
35
|
+
const i = e[1];
|
|
36
|
+
c.dataset._evtIndex = m.length, m.push({ evt: s, fnName: i }), c.removeAttribute(t.name);
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
class _ extends HTMLElement {
|
|
40
|
+
constructor() {
|
|
41
|
+
super(), u && this.attachShadow({ mode: "open" }), this.state = {}, this.styleElement = document.createElement("style"), this.styleElement.textContent = p || "", this._textBindings = {}, this._origText = /* @__PURE__ */ new Map();
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Called when element is inserted into the DOM.
|
|
45
|
+
* - Initializes reactive state
|
|
46
|
+
* - Runs user script to populate state
|
|
47
|
+
* - Processes template bindings
|
|
48
|
+
* - Appends style + content to (shadow) root
|
|
49
|
+
*/
|
|
50
|
+
connectedCallback() {
|
|
51
|
+
this._textBindings = {}, this._origText = /* @__PURE__ */ new Map();
|
|
52
|
+
const t = r.content.cloneNode(!0);
|
|
53
|
+
this.shadowRoot ? (this.shadowRoot.appendChild(this.styleElement), this.shadowRoot.appendChild(t)) : (this.appendChild(this.styleElement), this.appendChild(t)), this.state = C(this, {}), this._initializing = !0;
|
|
54
|
+
try {
|
|
55
|
+
w.call(this, this.state);
|
|
56
|
+
} catch (e) {
|
|
57
|
+
console.error("Error initializing component script:", e);
|
|
58
|
+
} finally {
|
|
59
|
+
this._initializing = !1;
|
|
60
|
+
}
|
|
61
|
+
const s = this.shadowRoot || this;
|
|
62
|
+
this._processTemplate(s);
|
|
63
|
+
}
|
|
64
|
+
_processTemplate(t) {
|
|
65
|
+
this._getAllTextNodes(t).forEach((e) => {
|
|
66
|
+
const i = e.textContent;
|
|
67
|
+
i.includes("{") && i.includes("}") && (this._origText.set(e, i), e.textContent = i.replace(/{([^}]+)}/g, (n, o) => (o = o.trim(), this._textBindings[o] = this._textBindings[o] || [], this._textBindings[o].push(e), this.hasAttribute(o) ? this.getAttribute(o) : this.state[o] !== void 0 ? this.state[o] : n)));
|
|
68
|
+
}), m.forEach((e, i) => {
|
|
69
|
+
const n = t.querySelector(`[data-_evt-index="${i}"]`);
|
|
70
|
+
n.removeAttribute("data-_evt-index"), n.addEventListener(e.evt, (o) => {
|
|
71
|
+
const f = this.state[e.fnName];
|
|
72
|
+
typeof f == "function" && f.call(n, o);
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Retrieve all text nodes under a given root node.
|
|
78
|
+
*
|
|
79
|
+
* @param {Node} node
|
|
80
|
+
* @returns {Text[]}
|
|
81
|
+
*/
|
|
82
|
+
_getAllTextNodes(t) {
|
|
83
|
+
const s = [], e = document.createTreeWalker(
|
|
84
|
+
t,
|
|
85
|
+
NodeFilter.SHOW_TEXT,
|
|
86
|
+
null,
|
|
87
|
+
!1
|
|
88
|
+
);
|
|
89
|
+
let i;
|
|
90
|
+
for (; i = e.nextNode(); )
|
|
91
|
+
s.push(i);
|
|
92
|
+
return s;
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* clears previous DOM, re-processes template and styles.
|
|
96
|
+
* Usually called by reactive state on mutation.
|
|
97
|
+
*/
|
|
98
|
+
_update() {
|
|
99
|
+
const t = r.content.cloneNode(!0);
|
|
100
|
+
this._processTemplate(t), this.shadowRoot ? (this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(this.styleElement), this.shadowRoot.appendChild(t)) : (this.innerHTML = "", this.appendChild(this.styleElement), this.appendChild(t));
|
|
101
|
+
}
|
|
102
|
+
// only update the nodes bound to a single key
|
|
103
|
+
_updateBinding(t) {
|
|
104
|
+
(this._textBindings[t] || []).forEach((s) => {
|
|
105
|
+
const e = this._origText.get(s) || "";
|
|
106
|
+
s.textContent = e.replace(/{([^}]+)}/g, (i, n) => (n = n.trim(), this.hasAttribute(n) ? this.getAttribute(n) : this.state[n]));
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Called when the element is removed from the DOM
|
|
111
|
+
*/
|
|
112
|
+
disconnectedCallback() {
|
|
113
|
+
d.log("disconnectedCallback", this);
|
|
114
|
+
}
|
|
115
|
+
// property
|
|
116
|
+
static get observedAttributes() {
|
|
117
|
+
return g;
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Called when one of the observed attributes changes.
|
|
121
|
+
* Updates state and triggers a re-render via the reactive proxy.
|
|
122
|
+
*
|
|
123
|
+
* @param {string} name
|
|
124
|
+
* @param {string} oldVal
|
|
125
|
+
* @param {string} newVal
|
|
126
|
+
*/
|
|
127
|
+
attributeChangedCallback(t, s, e) {
|
|
128
|
+
s !== e && (this.state[t] = e);
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Dispatch a custom event from the component.
|
|
132
|
+
*
|
|
133
|
+
* @param {string} name Event name
|
|
134
|
+
* @param {*} [detail] Payload; defaults to full component state
|
|
135
|
+
*/
|
|
136
|
+
emit(t, s) {
|
|
137
|
+
const e = s != null ? s : this.state;
|
|
138
|
+
this.dispatchEvent(
|
|
139
|
+
new CustomEvent(t, {
|
|
140
|
+
detail: e,
|
|
141
|
+
bubbles: !0
|
|
142
|
+
})
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
querySelector(t) {
|
|
146
|
+
return this.shadowRoot ? this.shadowRoot.querySelector(t) : super.querySelector(t);
|
|
147
|
+
}
|
|
148
|
+
querySelectorAll(t) {
|
|
149
|
+
return this.shadowRoot ? this.shadowRoot.querySelectorAll(t) : super.querySelectorAll(t);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
customElements.define(l, _), d.log(`Web component defined: <${l}></${l}>`);
|
|
153
|
+
};
|
|
154
|
+
export {
|
|
155
|
+
T as defineWebComponent
|
|
156
|
+
};
|
package/package.json
CHANGED
package/dist/main-Dju_Az3Y.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var S=Object.defineProperty;var T=(s,e,t)=>e in s?S(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var a=(s,e,t)=>T(s,typeof e!="symbol"?e+"":e,t);var _=(s,e,t)=>new Promise((i,c)=>{var m=r=>{try{n(t.next(r))}catch(p){c(p)}},g=r=>{try{n(t.throw(r))}catch(p){c(p)}},n=r=>r.done?i(r.value):Promise.resolve(r.value).then(m,g);n((t=t.apply(s,e)).next())});const l={log(s,...e){},error(s,...e){console.error(s,...e)},warn(s,...e){}},o=class o{constructor(){this.components={},this._cache=new Map}registerComponent(e,t,i=!0){return _(this,null,function*(){if(this.components[e]){l.log(`Component ${e} already registered, skipping.`);return}try{let c=this._cache.get(t);c||(c=yield(yield fetch(t)).text(),this._cache.set(t,c));const m=c.replace(o._SCRIPT_ALL,"").replace(o._STYLE_ALL,""),g=document.createElement("template");g.innerHTML=m;const n=o._SCRIPT_ONE.exec(c),r=o._STYLE_ONE.exec(c);this.components[e]={tagName:e,template:g,script:(n==null?void 0:n[1].trim())||"",style:(r==null?void 0:r[1].trim())||""},this._defineWebComponent(e,i),l.log(`Component ${e} registered successfully`)}catch(c){l.error(`Failed to register component ${e}:`,c)}})}_defineWebComponent(e,t){return _(this,null,function*(){const{defineWebComponent:i}=yield Promise.resolve().then(()=>require("./webcomponent-Mp1_EAq9.js"));i(this.components[e],t)})}};a(o,"_SCRIPT_ALL",/<script>([\s\S]*?)<\/script>/g),a(o,"_STYLE_ALL",/<style>([\s\S]*?)<\/style>/g),a(o,"_SCRIPT_ONE",/<script>([\s\S]*?)<\/script>/),a(o,"_STYLE_ONE",/<style>([\s\S]*?)<\/style>/);let h=o;const u=new h;exports.ladrillos=u;exports.logger=l;
|
package/dist/main-oMNAxRMg.mjs
DELETED
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
var h = Object.defineProperty;
|
|
2
|
-
var T = (s, e, t) => e in s ? h(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
|
|
3
|
-
var a = (s, e, t) => T(s, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
-
var m = (s, e, t) => new Promise((i, c) => {
|
|
5
|
-
var l = (r) => {
|
|
6
|
-
try {
|
|
7
|
-
n(t.next(r));
|
|
8
|
-
} catch (g) {
|
|
9
|
-
c(g);
|
|
10
|
-
}
|
|
11
|
-
}, p = (r) => {
|
|
12
|
-
try {
|
|
13
|
-
n(t.throw(r));
|
|
14
|
-
} catch (g) {
|
|
15
|
-
c(g);
|
|
16
|
-
}
|
|
17
|
-
}, n = (r) => r.done ? i(r.value) : Promise.resolve(r.value).then(l, p);
|
|
18
|
-
n((t = t.apply(s, e)).next());
|
|
19
|
-
});
|
|
20
|
-
const _ = {
|
|
21
|
-
/**
|
|
22
|
-
* Log a message only in development mode
|
|
23
|
-
* @param {string} message - The message to log
|
|
24
|
-
* @param {any[]} args - Additional arguments to log
|
|
25
|
-
*/
|
|
26
|
-
log(s, ...e) {
|
|
27
|
-
},
|
|
28
|
-
/**
|
|
29
|
-
* Log an error (always logs in both dev and production)
|
|
30
|
-
* @param {string} message - The error message
|
|
31
|
-
* @param {any[]} args - Additional arguments to log
|
|
32
|
-
*/
|
|
33
|
-
error(s, ...e) {
|
|
34
|
-
console.error(s, ...e);
|
|
35
|
-
},
|
|
36
|
-
/**
|
|
37
|
-
* Log a warning only in development mode
|
|
38
|
-
* @param {string} message - The warning message
|
|
39
|
-
* @param {any[]} args - Additional arguments to log
|
|
40
|
-
*/
|
|
41
|
-
warn(s, ...e) {
|
|
42
|
-
}
|
|
43
|
-
}, o = class o {
|
|
44
|
-
constructor() {
|
|
45
|
-
this.components = {}, this._cache = /* @__PURE__ */ new Map();
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* @param {string} name
|
|
49
|
-
* @param {string} path
|
|
50
|
-
* @param {boolean} [useShadowDOM=true]
|
|
51
|
-
* @returns {Promise<void>}
|
|
52
|
-
*/
|
|
53
|
-
registerComponent(e, t, i = !0) {
|
|
54
|
-
return m(this, null, function* () {
|
|
55
|
-
if (this.components[e]) {
|
|
56
|
-
_.log(`Component ${e} already registered, skipping.`);
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
try {
|
|
60
|
-
let c = this._cache.get(t);
|
|
61
|
-
c || (c = yield (yield fetch(t)).text(), this._cache.set(t, c));
|
|
62
|
-
const l = c.replace(o._SCRIPT_ALL, "").replace(o._STYLE_ALL, ""), p = document.createElement("template");
|
|
63
|
-
p.innerHTML = l;
|
|
64
|
-
const n = o._SCRIPT_ONE.exec(c), r = o._STYLE_ONE.exec(c);
|
|
65
|
-
this.components[e] = {
|
|
66
|
-
tagName: e,
|
|
67
|
-
template: p,
|
|
68
|
-
script: (n == null ? void 0 : n[1].trim()) || "",
|
|
69
|
-
style: (r == null ? void 0 : r[1].trim()) || ""
|
|
70
|
-
}, this._defineWebComponent(e, i), _.log(`Component ${e} registered successfully`);
|
|
71
|
-
} catch (c) {
|
|
72
|
-
_.error(`Failed to register component ${e}:`, c);
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
/**
|
|
77
|
-
* @private
|
|
78
|
-
* @param {string} name
|
|
79
|
-
* @param {boolean} useShadowDOM
|
|
80
|
-
*/
|
|
81
|
-
_defineWebComponent(e, t) {
|
|
82
|
-
return m(this, null, function* () {
|
|
83
|
-
const { defineWebComponent: i } = yield import("./webcomponent-BsA_Nb1m.mjs");
|
|
84
|
-
i(this.components[e], t);
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
a(o, "_SCRIPT_ALL", /<script>([\s\S]*?)<\/script>/g), a(o, "_STYLE_ALL", /<style>([\s\S]*?)<\/style>/g), a(o, "_SCRIPT_ONE", /<script>([\s\S]*?)<\/script>/), a(o, "_STYLE_ONE", /<style>([\s\S]*?)<\/style>/);
|
|
89
|
-
let S = o;
|
|
90
|
-
const E = new S();
|
|
91
|
-
export {
|
|
92
|
-
E as a,
|
|
93
|
-
_ as l
|
|
94
|
-
};
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { l as u } from "./main-oMNAxRMg.mjs";
|
|
2
|
-
function E(r, h = {}) {
|
|
3
|
-
return new Proxy(h, {
|
|
4
|
-
set(i, o, l) {
|
|
5
|
-
const d = i[o];
|
|
6
|
-
return i[o] = l, d !== l && !r._initializing && r._update(), !0;
|
|
7
|
-
},
|
|
8
|
-
get(i, o) {
|
|
9
|
-
return i[o];
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
const N = (r, h) => {
|
|
14
|
-
if (!r) {
|
|
15
|
-
u.error("Component is not defined or invalid.");
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
if (customElements.get(r.tagName)) {
|
|
19
|
-
u.warn(`Component ${r.tagName} is already defined.`);
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
const { tagName: i, template: o, script: l, style: d } = r, m = ((p) => {
|
|
23
|
-
const t = /{(.*?)}/g, n = /* @__PURE__ */ new Set();
|
|
24
|
-
let e;
|
|
25
|
-
for (; (e = t.exec(p.innerHTML)) !== null; )
|
|
26
|
-
n.add(e[1].trim().toLowerCase());
|
|
27
|
-
return Array.from(n);
|
|
28
|
-
})(o), f = l.replace(/\b(?:const|let|var)\s+([\w$]+)\s*=/g, "state.$1 =").replace(/function\s+([\w$]+)\s*\(/g, "state.$1 = function ("), g = l ? new Function("state", `with(state){${f}}`) : () => {
|
|
29
|
-
};
|
|
30
|
-
class C extends HTMLElement {
|
|
31
|
-
constructor() {
|
|
32
|
-
super(), h && this.attachShadow({ mode: "open" }), this.state = {}, this.styleElement = document.createElement("style"), this.styleElement.textContent = d || "";
|
|
33
|
-
}
|
|
34
|
-
// Called when the element is first added to the DOM
|
|
35
|
-
connectedCallback() {
|
|
36
|
-
const t = o.content.cloneNode(!0);
|
|
37
|
-
this.state = E(this, {}), this._initializing = !0;
|
|
38
|
-
try {
|
|
39
|
-
g.call(this, this.state);
|
|
40
|
-
} catch (n) {
|
|
41
|
-
console.error("Error initializing component script:", n);
|
|
42
|
-
} finally {
|
|
43
|
-
this._initializing = !1;
|
|
44
|
-
}
|
|
45
|
-
this._processTemplate(t), this.shadowRoot ? (this.shadowRoot.appendChild(this.styleElement), this.shadowRoot.appendChild(t)) : (this.appendChild(this.styleElement), this.appendChild(t));
|
|
46
|
-
}
|
|
47
|
-
_processTemplate(t) {
|
|
48
|
-
this._getAllTextNodes(t).forEach((e) => {
|
|
49
|
-
const s = e.textContent;
|
|
50
|
-
s.includes("{") && s.includes("}") && (e.textContent = s.replace(/{([^}]+)}/g, (c, a) => this.state[a] !== void 0 ? this.state[a] : this.hasAttribute(a) ? this.getAttribute(a) : c));
|
|
51
|
-
}), t.querySelectorAll("*[onclick]").forEach((e) => {
|
|
52
|
-
const s = e.getAttribute("onclick").match(/{\s*([\w$]+)\(\)\s*}/);
|
|
53
|
-
if (!s) return;
|
|
54
|
-
const c = s[1];
|
|
55
|
-
e.removeAttribute("onclick"), e.addEventListener("click", () => {
|
|
56
|
-
const a = this.state[c];
|
|
57
|
-
if (typeof a == "function")
|
|
58
|
-
try {
|
|
59
|
-
a();
|
|
60
|
-
} catch (w) {
|
|
61
|
-
console.error(`Error in handler ${c}:`, w);
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
_getAllTextNodes(t) {
|
|
67
|
-
const n = [], e = document.createTreeWalker(
|
|
68
|
-
t,
|
|
69
|
-
NodeFilter.SHOW_TEXT,
|
|
70
|
-
null,
|
|
71
|
-
!1
|
|
72
|
-
);
|
|
73
|
-
let s;
|
|
74
|
-
for (; s = e.nextNode(); )
|
|
75
|
-
n.push(s);
|
|
76
|
-
return n;
|
|
77
|
-
}
|
|
78
|
-
_update() {
|
|
79
|
-
const t = o.content.cloneNode(!0);
|
|
80
|
-
this._processTemplate(t), this.shadowRoot ? (this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(this.styleElement), this.shadowRoot.appendChild(t)) : (this.innerHTML = "", this.appendChild(this.styleElement), this.appendChild(t));
|
|
81
|
-
}
|
|
82
|
-
// Called when the element is removed from the DOM
|
|
83
|
-
// disconnectedCallback() {
|
|
84
|
-
// logger.log("disconnectedCallback", this);
|
|
85
|
-
// }
|
|
86
|
-
// property
|
|
87
|
-
static get observedAttributes() {
|
|
88
|
-
return m;
|
|
89
|
-
}
|
|
90
|
-
attributeChangedCallback(t, n, e) {
|
|
91
|
-
n !== e && (this.state[t] = e);
|
|
92
|
-
}
|
|
93
|
-
emit(t, n) {
|
|
94
|
-
const e = n != null ? n : this.state;
|
|
95
|
-
this.dispatchEvent(
|
|
96
|
-
new CustomEvent(t, {
|
|
97
|
-
detail: e,
|
|
98
|
-
bubbles: !0
|
|
99
|
-
})
|
|
100
|
-
);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
customElements.define(i, C), u.log(`Web component defined: <${i}></${i}>`);
|
|
104
|
-
};
|
|
105
|
-
export {
|
|
106
|
-
N as defineWebComponent
|
|
107
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./main-Dju_Az3Y.js");function E(r,d={}){return new Proxy(d,{set(i,o,l){const h=i[o];return i[o]=l,h!==l&&!r._initializing&&r._update(),!0},get(i,o){return i[o]}})}const b=(r,d)=>{if(!r){u.logger.error("Component is not defined or invalid.");return}if(customElements.get(r.tagName)){u.logger.warn(`Component ${r.tagName} is already defined.`);return}const{tagName:i,template:o,script:l,style:h}=r,m=(p=>{const t=/{(.*?)}/g,n=new Set;let e;for(;(e=t.exec(p.innerHTML))!==null;)n.add(e[1].trim().toLowerCase());return Array.from(n)})(o),f=l.replace(/\b(?:const|let|var)\s+([\w$]+)\s*=/g,"state.$1 =").replace(/function\s+([\w$]+)\s*\(/g,"state.$1 = function ("),g=l?new Function("state",`with(state){${f}}`):()=>{};class C extends HTMLElement{constructor(){super(),d&&this.attachShadow({mode:"open"}),this.state={},this.styleElement=document.createElement("style"),this.styleElement.textContent=h||""}connectedCallback(){const t=o.content.cloneNode(!0);this.state=E(this,{}),this._initializing=!0;try{g.call(this,this.state)}catch(n){console.error("Error initializing component script:",n)}finally{this._initializing=!1}this._processTemplate(t),this.shadowRoot?(this.shadowRoot.appendChild(this.styleElement),this.shadowRoot.appendChild(t)):(this.appendChild(this.styleElement),this.appendChild(t))}_processTemplate(t){this._getAllTextNodes(t).forEach(e=>{const s=e.textContent;s.includes("{")&&s.includes("}")&&(e.textContent=s.replace(/{([^}]+)}/g,(c,a)=>this.state[a]!==void 0?this.state[a]:this.hasAttribute(a)?this.getAttribute(a):c))}),t.querySelectorAll("*[onclick]").forEach(e=>{const s=e.getAttribute("onclick").match(/{\s*([\w$]+)\(\)\s*}/);if(!s)return;const c=s[1];e.removeAttribute("onclick"),e.addEventListener("click",()=>{const a=this.state[c];if(typeof a=="function")try{a()}catch(w){console.error(`Error in handler ${c}:`,w)}})})}_getAllTextNodes(t){const n=[],e=document.createTreeWalker(t,NodeFilter.SHOW_TEXT,null,!1);let s;for(;s=e.nextNode();)n.push(s);return n}_update(){const t=o.content.cloneNode(!0);this._processTemplate(t),this.shadowRoot?(this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this.styleElement),this.shadowRoot.appendChild(t)):(this.innerHTML="",this.appendChild(this.styleElement),this.appendChild(t))}static get observedAttributes(){return m}attributeChangedCallback(t,n,e){n!==e&&(this.state[t]=e)}emit(t,n){const e=n!=null?n:this.state;this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0}))}}customElements.define(i,C),u.logger.log(`Web component defined: <${i}></${i}>`)};exports.defineWebComponent=b;
|