lego-dom 1.0.0 → 1.3.4

package/main.js

@@ -5,10 +5,31 @@ const Lego = (() => {
 
   const sfcLogic = new Map();
   const sharedStates = new Map();
+  const expressionCache = new Map(); // Cache for compiled expressions
 
   const styleRegistry = new Map();
   let styleConfig = {};
 
+  const config = {
+    onError: (err, type, el) => {
+      console.error(`[Lego Error] [${type}]`, err, el);
+    },
+    metrics: {},   // Performance hooks
+    syntax: 'brackets' // 'brackets' ([[ ]]) or 'mustache' ({{ }})
+  };
+
+  const getDelimiters = () => {
+    return config.syntax === 'brackets' ? ['[[', ']]'] : ['{{', '}}'];
+  };
+
+  const createRegex = () => {
+    const [start, end] = getDelimiters();
+    // Escape special regex characters
+    const s = start.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const e = end.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return new RegExp(`${s}(.*?)${e}`, 'g');
+  };
+
   const routes = [];
 
   const escapeHTML = (str) => {
@@ -18,6 +39,21 @@ const Lego = (() => {
     }[m]));
   };
 
+  const deriveComponentName = (filename) => {
+    const basename = filename.split('/').pop().replace(/\.lego$/, '');
+    // 1. Convert snake_case to kebab-case
+    // 2. Convert PascalCase/camelCase to kebab-case
+    const name = basename
+      .replace(/_/g, '-')
+      .replace(/([a-z])([A-Z])/g, '$1-$2')
+      .toLowerCase();
+
+    if (!name.includes('-')) {
+      throw new Error(`[Lego] Invalid component definition: "${filename}". Component names must contain a hyphen (e.g. user-card.lego or UserCard.lego).`);
+    }
+    return name;
+  };
+
   /**
    * Enterprise Target Resolver
    * Resolves strings (#id, tag-name) or functions into DOM Elements.
@@ -168,20 +204,37 @@ const Lego = (() => {
     return undefined;
   };
 
-  const safeEval = (expr, context) => {
+  const safeEval = (expr, context, throwError = false) => {
+    // 1. Security: Block dangerous patterns
+    if (/\b(function|eval|import|class|module|deploy|constructor|__proto__)\b/.test(expr)) {
+      console.warn(`[Lego] Security Warning: Blocked dangerous expression "${expr}"`);
+      return undefined;
+    }
+
     try {
       const scope = context.state || {};
 
+      // 2. Performance: Check cache
+      // We purposefully cache based on the expression string alone.
+      // The 'helpers' and 'state' are passed dynamically to the cached function.
+      let func = expressionCache.get(expr);
+      if (!func) {
+        // Removed inner try-catch to allow error propagation to the caller
+        func = new Function('global', 'self', 'event', 'helpers', `
+          with(helpers) {
+            with(this) { 
+              return ${expr}
+            }
+          }
+        `);
+        expressionCache.set(expr, func);
+      }
+
       const helpers = {
         $ancestors: (tag) => findAncestorState(context.self, tag),
         $registry: (tag) => sharedStates.get(tag.toLowerCase()),
         $element: context.self,
         $route: Lego.globals.$route,
-        /**
-         * The $go helper for surgical routing
-         * @param {string} path - URL to navigate to
-         * @param {...(string|function)} targets - Specific components or IDs to swap
-         */
         $go: (path, ...targets) => _go(path, ...targets)(context.self),
         $emit: (name, detail) => {
           context.self.dispatchEvent(new CustomEvent(name, {
@@ -192,18 +245,12 @@ const Lego = (() => {
         }
       };
 
-      const func = new Function('global', 'self', 'event', 'helpers', `
-        with(helpers) {
-          with(this) { 
-            try { return ${expr} } catch(e) { return undefined; } 
-          }
-        }
-      `);
-
       const result = func.call(scope, context.global, context.self, context.event, helpers);
       if (typeof result === 'function') return result.call(scope, context.event);
       return result;
     } catch (e) {
+      if (throwError) throw e;
+      config.onError(e, 'render-error', context.self);
       return undefined;
     }
   };
@@ -219,51 +266,76 @@ const Lego = (() => {
 
   const bind = (container, componentRoot, loopCtx = null) => {
     const state = componentRoot._studs;
-    const elements = container instanceof Element ? [container, ...container.querySelectorAll('*')] : container.querySelectorAll('*');
 
-    elements.forEach(child => {
+    const bindNode = (child) => {
       const childData = getPrivateData(child);
       if (childData.bound) return;
 
-      [...child.attributes].forEach(attr => {
-        if (attr.name.startsWith('@')) {
-          const eventName = attr.name.slice(1);
-          child.addEventListener(eventName, (event) => {
-            let evalScope = state;
-            if (loopCtx) {
-              const list = safeEval(loopCtx.listName, { state, global: Lego.globals, self: componentRoot });
-              const item = list[loopCtx.index];
-              evalScope = Object.assign(Object.create(state), { [loopCtx.name]: item });
+      if (child.hasAttributes()) {
+        const attrs = child.attributes;
+        for (let i = 0; i < attrs.length; i++) {
+          const attr = attrs[i];
+          if (attr.name.startsWith('@')) {
+            const eventName = attr.name.slice(1);
+            child.addEventListener(eventName, (event) => {
+              try {
+                let evalScope = state;
+                if (loopCtx) {
+                  const list = safeEval(loopCtx.listName, { state, global: Lego.globals, self: componentRoot });
+                  const item = list[loopCtx.index];
+                  evalScope = Object.assign(Object.create(state), { [loopCtx.name]: item });
+                }
+                safeEval(attr.value, { state: evalScope, global: Lego.globals, self: child, event }, true);
+              } catch (err) {
+                config.onError(err, 'event-handler', child);
+              }
+            });
+          }
+        }
+
+        if (child.hasAttribute('b-sync')) {
+          const prop = child.getAttribute('b-sync');
+          const updateState = () => {
+            try {
+              let target, last;
+              if (loopCtx && prop.startsWith(loopCtx.name + '.')) {
+                const list = safeEval(loopCtx.listName, { state, global: Lego.globals, self: componentRoot });
+                const item = list[loopCtx.index];
+                if (!item) return;
+                const subPath = prop.split('.').slice(1);
+                last = subPath.pop();
+                target = subPath.reduce((o, k) => o[k], item);
+              } else {
+                const keys = prop.split('.');
+                last = keys.pop();
+                target = keys.reduce((o, k) => o[k], state);
+              }
+              const newVal = child.type === 'checkbox' ? child.checked : child.value;
+              if (target && target[last] !== newVal) target[last] = newVal;
+            } catch (err) {
+              config.onError(err, 'sync-update', child);
             }
-            safeEval(attr.value, { state: evalScope, global: Lego.globals, self: child, event });
-          });
+          };
+          child.addEventListener('input', updateState);
+          child.addEventListener('change', updateState);
         }
-      });
 
-      if (child.hasAttribute('b-sync')) {
-        const prop = child.getAttribute('b-sync');
-        const updateState = () => {
-          let target, last;
-          if (loopCtx && prop.startsWith(loopCtx.name + '.')) {
-            const list = safeEval(loopCtx.listName, { state, global: Lego.globals, self: componentRoot });
-            const item = list[loopCtx.index];
-            if (!item) return;
-            const subPath = prop.split('.').slice(1);
-            last = subPath.pop();
-            target = subPath.reduce((o, k) => o[k], item);
-          } else {
-            const keys = prop.split('.');
-            last = keys.pop();
-            target = keys.reduce((o, k) => o[k], state);
+        // b-var: Register element reference
+        if (child.hasAttribute('b-var')) {
+          const varName = child.getAttribute('b-var');
+          if (state.$vars) {
+            state.$vars[varName] = child;
           }
-          const newVal = child.type === 'checkbox' ? child.checked : child.value;
-          if (target && target[last] !== newVal) target[last] = newVal;
-        };
-        child.addEventListener('input', updateState);
-        child.addEventListener('change', updateState);
+        }
       }
       childData.bound = true;
-    });
+    };
+
+    if (container instanceof Element) bindNode(container);
+
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+    let child;
+    while (child = walker.nextNode()) bindNode(child);
   };
 
   const scanForBindings = (container) => {
@@ -307,7 +379,7 @@ const Lego = (() => {
           bindings.push({ type: 'b-show', node, expr });
         }
         if (node.hasAttribute('b-for')) {
-          const match = node.getAttribute('b-for').match(/^\s*(\w+)\s+in\s+(.+)\s*$/);
+          const match = node.getAttribute('b-for').match(/^\s*(\w+)\s+in\s+([\s\S]+?)\s*$/);
           if (match) {
             checkGlobal(match[2]);
             bindings.push({
@@ -315,22 +387,31 @@ const Lego = (() => {
               node,
               itemName: match[1],
               listName: match[2].trim(),
-              template: node.innerHTML
+              template: node.cloneNode(true)  // Store the whole node as template
             });
             node.innerHTML = '';
           }
         }
         if (node.hasAttribute('b-text')) bindings.push({ type: 'b-text', node, path: node.getAttribute('b-text') });
+        if (node.hasAttribute('b-html')) {
+          const expr = node.getAttribute('b-html');
+          checkGlobal(expr);
+          bindings.push({ type: 'b-html', node, expr });
+        }
         if (node.hasAttribute('b-sync')) bindings.push({ type: 'b-sync', node });
+        const [start] = getDelimiters();
         [...node.attributes].forEach(attr => {
-          if (attr.value.includes('{{')) {
+          if (attr.value.includes(start)) {
             checkGlobal(attr.value);
             bindings.push({ type: 'attr', node, attrName: attr.name, template: attr.value });
           }
         });
-      } else if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('{{')) {
-        checkGlobal(node.textContent);
-        bindings.push({ type: 'text', node, template: node.textContent });
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        const [start] = getDelimiters();
+        if (node.textContent.includes(start)) {
+          checkGlobal(node.textContent);
+          bindings.push({ type: 'text', node, template: node.textContent });
+        }
       }
     }
     return bindings;
@@ -340,13 +421,14 @@ const Lego = (() => {
     const processNode = (node) => {
       if (node.nodeType === Node.TEXT_NODE) {
         if (node._tpl === undefined) node._tpl = node.textContent;
-        const out = node._tpl.replace(/{{(.*?)}}/g, (_, k) => safeEval(k.trim(), { state: scope, global: Lego.globals, self: node }) ?? '');
+        const out = node._tpl.replace(createRegex(), (_, k) => safeEval(k.trim(), { state: scope, global: Lego.globals, self: node }) ?? '');
         if (node.textContent !== out) node.textContent = out;
       } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const [start] = getDelimiters();
         [...node.attributes].forEach(attr => {
           if (attr._tpl === undefined) attr._tpl = attr.value;
-          if (attr._tpl.includes('{{')) {
-            const out = attr._tpl.replace(/{{(.*?)}}/g, (_, k) => safeEval(k.trim(), { state: scope, global: Lego.globals, self: node }) ?? '');
+          if (attr._tpl.includes(start)) {
+            const out = attr._tpl.replace(createRegex(), (_, k) => safeEval(k.trim(), { state: scope, global: Lego.globals, self: node }) ?? '');
             if (attr.value !== out) {
               attr.value = out;
               if (attr.name === 'class') node.className = out;
@@ -367,6 +449,7 @@ const Lego = (() => {
     const data = getPrivateData(el);
     if (data.rendering) return;
     data.rendering = true;
+    if (config.metrics && config.metrics.onRenderStart) config.metrics.onRenderStart(el);
 
     try {
       // Use shadowRoot if it's a component, otherwise render the element itself (light DOM)
@@ -386,13 +469,14 @@ const Lego = (() => {
         }
         if (b.type === 'b-show') b.node.style.display = safeEval(b.expr, { state, global: Lego.globals, self: b.node }) ? '' : 'none';
         if (b.type === 'b-text') b.node.textContent = resolve(b.path, state);
+        if (b.type === 'b-html') b.node.innerHTML = safeEval(b.expr, { state, global: Lego.globals, self: b.node }) || '';
         if (b.type === 'b-sync') syncModelValue(b.node, resolve(b.node.getAttribute('b-sync'), state));
         if (b.type === 'text') {
-          const out = b.template.replace(/{{(.*?)}}/g, (_, k) => safeEval(k.trim(), { state, global: Lego.globals, self: b.node }) ?? '');
+          const out = b.template.replace(createRegex(), (_, k) => safeEval(k.trim(), { state, global: Lego.globals, self: b.node }) ?? '');
           if (b.node.textContent !== out) b.node.textContent = out;
         }
         if (b.type === 'attr') {
-          const out = b.template.replace(/{{(.*?)}}/g, (_, k) => safeEval(k.trim(), { state, global: Lego.globals, self: b.node }) ?? '');
+          const out = b.template.replace(createRegex(), (_, k) => safeEval(k.trim(), { state, global: Lego.globals, self: b.node }) ?? '');
           if (b.node.getAttribute(b.attrName) !== out) {
             b.node.setAttribute(b.attrName, out);
             if (b.attrName === 'class') b.node.className = out;
@@ -408,9 +492,8 @@ const Lego = (() => {
             currentKeys.add(key);
             let child = pool.get(key);
             if (!child) {
-              const temp = document.createElement('div');
-              temp.innerHTML = b.template;
-              child = temp.firstElementChild;
+              child = b.template.cloneNode(true);
+              child.removeAttribute('b-for');
               pool.set(key, child);
               bind(child, el, { name: b.itemName, listName: b.listName, index: i });
             }
@@ -438,7 +521,10 @@ const Lego = (() => {
           if (getPrivateData(comp).hasGlobalDependency) render(comp);
         });
       }
+    } catch (err) {
+      config.onError(err, 'render', el);
     } finally {
+      if (config.metrics && config.metrics.onRenderEnd) config.metrics.onRenderEnd(el);
       data.rendering = false;
     }
   };
@@ -469,11 +555,15 @@ const Lego = (() => {
       const templateLogic = parseJSObject(templateNode.getAttribute('b-data') || '{}');
       const instanceLogic = parseJSObject(el.getAttribute('b-data') || '{}');
 
-      // Priority: Script < Template < Instance
       el._studs = reactive({
         ...scriptLogic,
         ...templateLogic,
         ...instanceLogic,
+        $vars: {},
+        $element: el,
+        $emit: (name, detail) => {
+          el.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+        },
         get $route() { return Lego.globals.$route },
         get $go() { return Lego.globals.$go }
       }, el);
@@ -489,8 +579,10 @@ const Lego = (() => {
       activeComponents.add(el);
       render(el);
 
+      [...shadow.children].forEach(snap);
+
       if (typeof el._studs.mounted === 'function') {
-        try { el._studs.mounted.call(el._studs); } catch (e) { console.error(`[Lego] Error in mounted <${name}>:`, e); }
+        try { el._studs.mounted.call(el._studs); } catch (e) { config.onError(e, 'mounted', el); }
       }
     }
 
@@ -505,6 +597,11 @@ const Lego = (() => {
     if (el._studs && typeof el._studs.unmounted === 'function') {
       try { el._studs.unmounted.call(el._studs); } catch (e) { console.error(`[Lego] Error in unmounted:`, e); }
     }
+
+    if (el.shadowRoot) {
+      [...el.shadowRoot.children].forEach(unsnap);
+    }
+
     activeComponents.delete(el);
     [...el.children].forEach(unsnap);
   };
@@ -551,14 +648,14 @@ const Lego = (() => {
     });
   };
 
-  return {
-    init: async (root = document.body, styles = {}) => {
-      // If called as an event listener or with invalid root, fail over to document.body
+  const publicAPI = {
+    init: async (root = document.body, options = {}) => {
       if (!root || typeof root.nodeType !== 'number') root = document.body;
-      styleConfig = styles;
+      styleConfig = options.styles || {};
+      config.loader = options.loader; // Register loader hook
 
       // Pre-load all defined style sets into Constructable Stylesheets
-      const loadPromises = Object.entries(styles).map(async ([key, urls]) => {
+      const loadPromises = Object.entries(styleConfig).map(async ([key, urls]) => {
         const sheets = await Promise.all(urls.map(async (url) => {
           try {
             const response = await fetch(url);
@@ -580,7 +677,26 @@ const Lego = (() => {
       });
 
       const observer = new MutationObserver(m => m.forEach(r => {
-        r.addedNodes.forEach(n => n.nodeType === Node.ELEMENT_NODE && snap(n));
+        r.addedNodes.forEach(n => {
+          if (n.nodeType === Node.ELEMENT_NODE) {
+            snap(n);
+            // Auto-Discovery: Check if tag is unknown and loader is configured
+            const tagName = n.tagName.toLowerCase();
+            if (tagName.includes('-') && !registry[tagName] && config.loader && !activeComponents.has(n)) {
+              const result = config.loader(tagName);
+              if (result) {
+                // Handle Promise (user does custom fetch) vs String (we fetch)
+                const promise = (typeof result === 'string')
+                  ? fetch(result).then(r => r.text())
+                  : result;
+
+                Promise.resolve(promise)
+                  .then(sfc => publicAPI.defineSFC(sfc, tagName + '.lego'))
+                  .catch(e => console.error(`[Lego] Failed to load ${tagName}:`, e));
+              }
+            }
+          }
+        });
         r.removedNodes.forEach(n => n.nodeType === Node.ELEMENT_NODE && unsnap(n));
       }));
       observer.observe(root, { childList: true, subtree: true });
@@ -628,6 +744,69 @@ const Lego = (() => {
       },
       $go: (path, ...targets) => _go(path, ...targets)(document.body)
     }, document.body),
+    defineSFC: (content, filename = 'component.lego') => {
+      let template = '';
+      let script = '{}';
+      let stylesAttr = '';
+      let style = '';
+
+      let remaining = content;
+      // Robust regex from parse-lego.js
+      const startTagRegex = /<(template|script|style)\b((?:\s+(?:[^>"']|"[^"]*"|'[^']*')*)*)>/i;
+
+      while (remaining) {
+        const match = remaining.match(startTagRegex);
+        if (!match) break;
+
+        const tagName = match[1].toLowerCase();
+        const attrs = match[2];
+        const fullMatch = match[0];
+        const startIndex = match.index;
+
+        const closeTag = `</${tagName}>`;
+        const contentStart = startIndex + fullMatch.length;
+        const contentEnd = remaining.indexOf(closeTag, contentStart);
+
+        if (contentEnd === -1) {
+          console.warn(`[Lego] Unclosed <${tagName}> tag in ${filename}`);
+          break;
+        }
+
+        const innerContent = remaining.slice(contentStart, contentEnd);
+
+        if (tagName === 'template') {
+          template = innerContent.trim();
+          const bStylesMatch = attrs.match(/b-styles=["']([^"']+)["']/);
+          if (bStylesMatch) stylesAttr = bStylesMatch[1];
+        } else if (tagName === 'script') {
+          // Extract logic from script
+          const logic = innerContent.trim();
+          const defaultExport = logic.match(/export\s+default\s+({[\s\S]*})/);
+          script = defaultExport ? defaultExport[1] : logic;
+        } else if (tagName === 'style') {
+          style = innerContent.trim();
+        }
+
+        remaining = remaining.slice(contentEnd + closeTag.length);
+      }
+
+      const name = deriveComponentName(filename);
+      // We must eval the script to get the object. 
+      // Safe-ish because it's coming from the "Server" (trusted source in this architecture)
+      const logicObj = new Function(`return ${script}`)();
+
+      if (style) {
+        template = `<style>${style}</style>` + template;
+      }
+
+      registry[name] = document.createElement('template');
+      registry[name].innerHTML = template;
+      registry[name].setAttribute('b-styles', stylesAttr);
+      sfcLogic.set(name, logicObj);
+
+      // Upgrade existing elements
+      document.querySelectorAll(name).forEach(el => !getPrivateData(el).snapped && snap(el));
+    },
     define: (tagName, templateHTML, logic = {}, styles = "") => {
       const t = document.createElement('template');
       t.setAttribute('b-id', tagName);
@@ -636,10 +815,18 @@ const Lego = (() => {
       registry[tagName] = t;
       sfcLogic.set(tagName, logic);
 
-      sharedStates.set(tagName.toLowerCase(), reactive({ ...logic }, document.body));
+      // Initialize shared state with try-catch safety
+      try {
+        sharedStates.set(tagName.toLowerCase(), reactive({ ...logic }, document.body));
+      } catch (e) {
+        config.onError(e, 'define', tagName);
+      }
 
       document.querySelectorAll(tagName).forEach(snap);
     },
+    // For specific test validation
+    getActiveComponentsCount: () => activeComponents.size,
+    config, // Expose config for customization
     route: (path, tagName, middleware = null) => {
       const paramNames = [];
       const regexPath = path.replace(/:([^\/]+)/g, (_, name) => {
@@ -649,6 +836,8 @@ const Lego = (() => {
       routes.push({ path, regex: new RegExp(`^${regexPath}$`), tagName, paramNames, middleware });
     }
   };
+
+  return publicAPI;
 })();
 
 if (typeof window !== 'undefined') {

package/main.min.js

@@ -0,0 +1,7 @@
+const Lego=(()=>{const w={},M=new WeakMap,k=new WeakMap,O=new WeakMap,$=new Set,P=new Map,B=new Map,H=new Map,q=new Map;let G={};const p={onError:(e,s,c)=>{console.error(`[Lego Error] [${s}]`,e,c)},metrics:{},syntax:"brackets"},_=()=>p.syntax==="brackets"?["[[","]]"]:["{{","}}"],L=()=>{const[e,s]=_(),c=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),o=s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return new RegExp(`${c}(.*?)${o}`,"g")},R=[],ee=e=>typeof e!="string"?e:e.replace(/[&<>"']/g,s=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[s]),K=e=>{const c=e.split("/").pop().replace(/\.lego$/,"").replace(/_/g,"-").replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();if(!c.includes("-"))throw new Error(`[Lego] Invalid component definition: "${e}". Component names must contain a hyphen (e.g. user-card.lego or UserCard.lego).`);return c},V=(e,s)=>{if(typeof e=="function"){const o=Array.from(document.querySelectorAll("*")).filter(t=>t.tagName.includes("-"));return[].concat(e(o))}if(e.startsWith("#")){const o=document.getElementById(e.slice(1));return o?[o]:[]}const c=s?.querySelectorAll(e)||[];return c.length>0?[...c]:[...document.querySelectorAll(e)]},j=(e,...s)=>c=>{const o=async(t,a=null,r=!0,n={})=>{if(r){const d={legoTargets:s.filter(i=>typeof i=="string"),method:t,body:a};history.pushState(d,"",e)}await F(s.length?s:null,c)};return{get:(t=!0,a={})=>o("GET",null,t,a),post:(t,a=!0,r={})=>o("POST",t,a,r),put:(t,a=!0,r={})=>o("PUT",t,a,r),patch:(t,a=!0,r={})=>o("PATCH",t,a,r),delete:(t=!0,a={})=>o("DELETE",null,t,a)}},J=(()=>{let e=!1;const s=new Set;let c=!1;return{add:o=>{!o||c||(s.add(o),!e&&(e=!0,requestAnimationFrame(()=>{c=!0;const t=Array.from(s);s.clear(),e=!1,t.forEach(a=>C(a)),setTimeout(()=>{t.forEach(a=>{const r=a._studs;if(r&&typeof r.updated=="function")try{r.updated.call(r)}catch(n){console.error("[Lego] Error in updated hook:",n)}}),c=!1},0)})))}}})(),S=(e,s,c=J)=>{if(e===null||typeof e!="object"||e instanceof Node)return e;if(M.has(e))return M.get(e);const o={get:(a,r)=>{const n=Reflect.get(a,r);return n!==null&&typeof n=="object"&&!(n instanceof Node)?S(n,s,c):n},set:(a,r,n)=>{const l=a[r],d=Reflect.set(a,r,n);return l!==n&&c.add(s),d},deleteProperty:(a,r)=>{const n=Reflect.deleteProperty(a,r);return c.add(s),n}},t=new Proxy(e,o);return M.set(e,t),t},I=e=>{try{return new Function(`return (${e})`)()}catch(s){return console.error("[Lego] Failed to parse b-data:",e,s),{}}},N=e=>(k.has(e)||k.set(e,{snapped:!1,bindings:null,bound:!1,rendering:!1,anchor:null,hasGlobalDependency:!1}),k.get(e)),D=(e,s)=>{if(!e)return"";const c=e.trim().split(".");let o=s;for(const t of c){if(o==null)return"";o=o[t]}return o??""},Z=(e,s)=>{let c=e.parentElement||e.getRootNode().host;for(;c;){if(c.tagName&&c.tagName.toLowerCase()===s.toLowerCase())return c._studs;c=c.parentElement||c.getRootNode&&c.getRootNode().host}},h=(e,s,c=!1)=>{if(/\b(function|eval|import|class|module|deploy|constructor|__proto__)\b/.test(e)){console.warn(`[Lego] Security Warning: Blocked dangerous expression "${e}"`);return}try{const o=s.state||{};let t=H.get(e);t||(t=new Function("global","self","event","helpers",`
+          with(helpers) {
+            with(this) { 
+              return ${e}
+            }
+          }
+        `),H.set(e,t));const a={$ancestors:n=>Z(s.self,n),$registry:n=>B.get(n.toLowerCase()),$element:s.self,$route:Lego.globals.$route,$go:(n,...l)=>j(n,...l)(s.self),$emit:(n,l)=>{s.self.dispatchEvent(new CustomEvent(n,{detail:l,bubbles:!0,composed:!0}))}},r=t.call(o,s.global,s.self,s.event,a);return typeof r=="function"?r.call(o,s.event):r}catch(o){if(c)throw o;p.onError(o,"render-error",s.self);return}},z=(e,s)=>{if(e.type==="checkbox")e.checked!==!!s&&(e.checked=!!s);else{const c=s==null?"":String(s);e.value!==c&&(e.value=c)}},x=(e,s,c=null)=>{const o=s._studs,t=n=>{const l=N(n);if(!l.bound){if(n.hasAttributes()){const d=n.attributes;for(let i=0;i<d.length;i++){const u=d[i];if(u.name.startsWith("@")){const f=u.name.slice(1);n.addEventListener(f,g=>{try{let m=o;if(c){const y=h(c.listName,{state:o,global:Lego.globals,self:s})[c.index];m=Object.assign(Object.create(o),{[c.name]:y})}h(u.value,{state:m,global:Lego.globals,self:n,event:g},!0)}catch(m){p.onError(m,"event-handler",n)}})}}if(n.hasAttribute("b-sync")){const i=n.getAttribute("b-sync"),u=()=>{try{let f,g;if(c&&i.startsWith(c.name+".")){const y=h(c.listName,{state:o,global:Lego.globals,self:s})[c.index];if(!y)return;const E=i.split(".").slice(1);g=E.pop(),f=E.reduce((T,A)=>T[A],y)}else{const b=i.split(".");g=b.pop(),f=b.reduce((y,E)=>y[E],o)}const m=n.type==="checkbox"?n.checked:n.value;f&&f[g]!==m&&(f[g]=m)}catch(f){p.onError(f,"sync-update",n)}};n.addEventListener("input",u),n.addEventListener("change",u)}if(n.hasAttribute("b-var")){const i=n.getAttribute("b-var");o.$vars&&(o.$vars[i]=n)}}l.bound=!0}};e instanceof Element&&t(e);const a=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);let r;for(;r=a.nextNode();)t(r)},Y=e=>{const s=[],c=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT);let o;for(;o=c.nextNode();){if((r=>{let n=r.parentNode;for(;n&&n!==e;){if(n.hasAttribute&&n.hasAttribute("b-for"))return!0;n=n.parentNode}return!1})(o))continue;const a=r=>{if(/\bglobal\b/.test(r)){const n=e.host||e;N(n).hasGlobalDependency=!0}};if(o.nodeType===Node.ELEMENT_NODE){if(o.hasAttribute("b-if")){const n=o.getAttribute("b-if");a(n);const l=document.createComment(`b-if: ${n}`),d=N(o);d.anchor=l,s.push({type:"b-if",node:o,anchor:l,expr:n})}if(o.hasAttribute("b-show")){const n=o.getAttribute("b-show");a(n),s.push({type:"b-show",node:o,expr:n})}if(o.hasAttribute("b-for")){const n=o.getAttribute("b-for").match(/^\s*(\w+)\s+in\s+([\s\S]+?)\s*$/);n&&(a(n[2]),s.push({type:"b-for",node:o,itemName:n[1],listName:n[2].trim(),template:o.cloneNode(!0)}),o.innerHTML="")}if(o.hasAttribute("b-text")&&s.push({type:"b-text",node:o,path:o.getAttribute("b-text")}),o.hasAttribute("b-html")){const n=o.getAttribute("b-html");a(n),s.push({type:"b-html",node:o,expr:n})}o.hasAttribute("b-sync")&&s.push({type:"b-sync",node:o});const[r]=_();[...o.attributes].forEach(n=>{n.value.includes(r)&&(a(n.value),s.push({type:"attr",node:o,attrName:n.name,template:n.value}))})}else if(o.nodeType===Node.TEXT_NODE){const[r]=_();o.textContent.includes(r)&&(a(o.textContent),s.push({type:"text",node:o,template:o.textContent}))}}return s},Q=(e,s)=>{const c=a=>{if(a.nodeType===Node.TEXT_NODE){a._tpl===void 0&&(a._tpl=a.textContent);const r=a._tpl.replace(L(),(n,l)=>h(l.trim(),{state:s,global:Lego.globals,self:a})??"");a.textContent!==r&&(a.textContent=r)}else if(a.nodeType===Node.ELEMENT_NODE){const[r]=_();[...a.attributes].forEach(n=>{if(n._tpl===void 0&&(n._tpl=n.value),n._tpl.includes(r)){const l=n._tpl.replace(L(),(d,i)=>h(i.trim(),{state:s,global:Lego.globals,self:a})??"");n.value!==l&&(n.value=l,n.name==="class"&&(a.className=l))}})}};c(e);const o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT);let t;for(;t=o.nextNode();)c(t)},C=e=>{const s=e._studs;if(!s)return;const c=N(e);if(!c.rendering){c.rendering=!0,p.metrics&&p.metrics.onRenderStart&&p.metrics.onRenderStart(e);try{const o=e.shadowRoot||e;c.bindings||(c.bindings=Y(o)),c.bindings.forEach(t=>{if(t.type==="b-if"){const a=!!h(t.expr,{state:s,global:Lego.globals,self:t.node}),r=!!t.node.parentNode;a&&!r?t.anchor.parentNode&&t.anchor.parentNode.replaceChild(t.node,t.anchor):!a&&r&&t.node.parentNode.replaceChild(t.anchor,t.node)}if(t.type==="b-show"&&(t.node.style.display=h(t.expr,{state:s,global:Lego.globals,self:t.node})?"":"none"),t.type==="b-text"&&(t.node.textContent=D(t.path,s)),t.type==="b-html"&&(t.node.innerHTML=h(t.expr,{state:s,global:Lego.globals,self:t.node})||""),t.type==="b-sync"&&z(t.node,D(t.node.getAttribute("b-sync"),s)),t.type==="text"){const a=t.template.replace(L(),(r,n)=>h(n.trim(),{state:s,global:Lego.globals,self:t.node})??"");t.node.textContent!==a&&(t.node.textContent=a)}if(t.type==="attr"){const a=t.template.replace(L(),(r,n)=>h(n.trim(),{state:s,global:Lego.globals,self:t.node})??"");t.node.getAttribute(t.attrName)!==a&&(t.node.setAttribute(t.attrName,a),t.attrName==="class"&&(t.node.className=a))}if(t.type==="b-for"){const a=h(t.listName,{state:s,global:Lego.globals,self:e})||[];O.has(t.node)||O.set(t.node,new Map);const r=O.get(t.node),n=new Set;a.forEach((l,d)=>{const i=l&&typeof l=="object"?l.__id||(l.__id=Math.random()):`${d}-${l}`;n.add(i);let u=r.get(i);u||(u=t.template.cloneNode(!0),u.removeAttribute("b-for"),r.set(i,u),x(u,e,{name:t.itemName,listName:t.listName,index:d}));const f=Object.assign(Object.create(s),{[t.itemName]:l});Q(u,f),u.querySelectorAll("[b-sync]").forEach(g=>{const m=g.getAttribute("b-sync");if(m.startsWith(t.itemName+".")){const b=h(t.listName,{state:s,global:Lego.globals,self:e});z(g,D(m.split(".").slice(1).join("."),b[d]))}}),t.node.children[d]!==u&&t.node.insertBefore(u,t.node.children[d]||null)});for(const[l,d]of r.entries())n.has(l)||(d.remove(),r.delete(l))}}),s===Lego.globals&&$.forEach(t=>{N(t).hasGlobalDependency&&C(t)})}catch(o){p.onError(o,"render",e)}finally{p.metrics&&p.metrics.onRenderEnd&&p.metrics.onRenderEnd(e),c.rendering=!1}}},v=e=>{if(!e||e.nodeType!==Node.ELEMENT_NODE)return;const s=N(e),c=e.tagName.toLowerCase(),o=w[c];if(o&&!s.snapped){s.snapped=!0;const a=o.content.cloneNode(!0),r=e.attachShadow({mode:"open"}),n=(o.getAttribute("b-styles")||"").split(/\s+/).filter(Boolean);if(n.length>0){const f=n.flatMap(g=>q.get(g)||[]);f.length>0&&(r.adoptedStyleSheets=[...f])}const l=P.get(c)||{},d=I(o.getAttribute("b-data")||"{}"),i=I(e.getAttribute("b-data")||"{}");e._studs=S({...l,...d,...i,$vars:{},$element:e,$emit:(f,g)=>{e.dispatchEvent(new CustomEvent(f,{detail:g,bubbles:!0,composed:!0}))},get $route(){return Lego.globals.$route},get $go(){return Lego.globals.$go}},e),r.appendChild(a);const u=r.querySelector("style");if(u&&(u.textContent=u.textContent.replace(/\bself\b/g,":host")),x(r,e),$.add(e),C(e),[...r.children].forEach(v),typeof e._studs.mounted=="function")try{e._studs.mounted.call(e._studs)}catch(f){p.onError(f,"mounted",e)}}let t=e.parentElement;for(;t&&!t._studs;)t=t.parentElement;t&&t._studs&&x(e,t),[...e.children].forEach(v)},W=e=>{if(e._studs&&typeof e._studs.unmounted=="function")try{e._studs.unmounted.call(e._studs)}catch(s){console.error("[Lego] Error in unmounted:",s)}e.shadowRoot&&[...e.shadowRoot.children].forEach(W),$.delete(e),[...e.children].forEach(W)},F=async(e=null,s=null)=>{const c=window.location.pathname,o=window.location.search,t=R.find(d=>d.regex.test(c));if(!t)return;let a=[];if(e)a=e.flatMap(d=>V(d,s));else{const d=document.querySelector("lego-router");d&&(a=[d])}if(a.length===0)return;const r=c.match(t.regex).slice(1),n=Object.fromEntries(t.paramNames.map((d,i)=>[d,r[i]])),l=Object.fromEntries(new URLSearchParams(o));t.middleware&&!await t.middleware(n,Lego.globals)||(Lego.globals.$route.url=c+o,Lego.globals.$route.route=t.path,Lego.globals.$route.params=n,Lego.globals.$route.query=l,Lego.globals.$route.method=history.state?.method||"GET",Lego.globals.$route.body=history.state?.body||null,a.forEach(d=>{if(d){const i=document.createElement(t.tagName);d.replaceChildren(i)}}))},U={init:async(e=document.body,s={})=>{(!e||typeof e.nodeType!="number")&&(e=document.body),G=s.styles||{},p.loader=s.loader;const c=Object.entries(G).map(async([t,a])=>{const r=await Promise.all(a.map(async n=>{try{const d=await(await fetch(n)).text(),i=new CSSStyleSheet;return await i.replace(d),i}catch(l){return console.error(`[Lego] Failed to load stylesheet: ${n}`,l),null}}));q.set(t,r.filter(n=>n!==null))});await Promise.all(c),document.querySelectorAll("template[b-id]").forEach(t=>{w[t.getAttribute("b-id")]=t}),new MutationObserver(t=>t.forEach(a=>{a.addedNodes.forEach(r=>{if(r.nodeType===Node.ELEMENT_NODE){v(r);const n=r.tagName.toLowerCase();if(n.includes("-")&&!w[n]&&p.loader&&!$.has(r)){const l=p.loader(n);if(l){const d=typeof l=="string"?fetch(l).then(i=>i.text()):l;Promise.resolve(d).then(i=>U.defineSFC(i,n+".lego")).catch(i=>console.error(`[Lego] Failed to load ${n}:`,i))}}}}),a.removedNodes.forEach(r=>r.nodeType===Node.ELEMENT_NODE&&W(r))})).observe(e,{childList:!0,subtree:!0}),e._studs=Lego.globals,v(e),x(e,e),C(e),R.length>0&&(window.addEventListener("popstate",t=>{const a=t.state?.legoTargets||null;F(a)}),document.addEventListener("submit",t=>{t.preventDefault()}),document.addEventListener("click",t=>{const r=t.composedPath().find(n=>n.tagName==="A"&&(n.hasAttribute("b-target")||n.hasAttribute("b-link")));if(r){t.preventDefault();const n=r.getAttribute("href"),l=r.getAttribute("b-target"),d=l?l.split(/\s+/).filter(Boolean):[],i=r.getAttribute("b-link")!=="false";Lego.globals.$go(n,...d).get(i)}}),F())},globals:S({$route:{url:window.location.pathname,route:"",params:{},query:{},method:"GET",body:null},$go:(e,...s)=>j(e,...s)(document.body)},document.body),defineSFC:(e,s="component.lego")=>{let c="",o="{}",t="",a="",r=e;const n=/<(template|script|style)\b((?:\s+(?:[^>"']|"[^"]*"|'[^']*')*)*)>/i;for(;r;){const i=r.match(n);if(!i)break;const u=i[1].toLowerCase(),f=i[2],g=i[0],m=i.index,b=`</${u}>`,y=m+g.length,E=r.indexOf(b,y);if(E===-1){console.warn(`[Lego] Unclosed <${u}> tag in ${s}`);break}const T=r.slice(y,E);if(u==="template"){c=T.trim();const A=f.match(/b-styles=["']([^"']+)["']/);A&&(t=A[1])}else if(u==="script"){const A=T.trim(),X=A.match(/export\s+default\s+({[\s\S]*})/);o=X?X[1]:A}else u==="style"&&(a=T.trim());r=r.slice(E+b.length)}const l=K(s),d=new Function(`return ${o}`)();a&&(c=`<style>${a}</style>`+c),w[l]=document.createElement("template"),w[l].innerHTML=c,w[l].setAttribute("b-styles",t),P.set(l,d),document.querySelectorAll(l).forEach(i=>!N(i).snapped&&v(i))},define:(e,s,c={},o="")=>{const t=document.createElement("template");t.setAttribute("b-id",e),t.setAttribute("b-styles",o),t.innerHTML=s,w[e]=t,P.set(e,c);try{B.set(e.toLowerCase(),S({...c},document.body))}catch(a){p.onError(a,"define",e)}document.querySelectorAll(e).forEach(v)},getActiveComponentsCount:()=>$.size,config:p,route:(e,s,c=null)=>{const o=[],t=e.replace(/:([^\/]+)/g,(a,r)=>(o.push(r),"([^/]+)"));R.push({path:e,regex:new RegExp(`^${t}$`),tagName:s,paramNames:o,middleware:c})}};return U})();typeof window<"u"&&(window.Lego=Lego);

package/monitoring-plugin.js

@@ -0,0 +1,111 @@
+/**
+ * LegoDOM Monitoring Plugin
+ * Tracks render performance and errors.
+ */
+
+export const Monitoring = {
+  // Metrics storage
+  metrics: {
+    renders: 0,
+    errors: 0,
+    slowRenders: 0,
+    components: new Map(), // tagName -> { count, avgTime }
+  },
+
+  // Configuration options
+  options: {
+    slowRenderThreshold: 16, // ms (target 60fps)
+    reportToConsole: false,
+    reportUrl: null // Endpoint to send metrics to
+  },
+
+  /**
+   * Install the plugin
+   * @param {object} Lego - The global Lego object
+   * @param {object} opts - Configuration options
+   */
+  install(Lego, opts = {}) {
+    Object.assign(this.options, opts);
+
+    // Prevent double installation
+    if (Lego.metrics) {
+      // Just reset metrics if re-installing
+      if (Lego.metrics.reset) Lego.metrics.reset();
+      return;
+    }
+
+    // Ensure metrics object exists on config if not already
+    if (!Lego.config.metrics) Lego.config.metrics = {};
+
+    // 1. Hook into Render Cycle
+    Lego.config.metrics.onRenderStart = (el) => {
+      if (!el.__perfId) el.__perfId = Math.random().toString(36).substr(2, 9);
+      performance.mark(`lego-render-start-${el.__perfId}`);
+    };
+
+    Lego.config.metrics.onRenderEnd = (el) => {
+      const id = el.__perfId;
+      const startMark = `lego-render-start-${id}`;
+      const measureName = `lego-render-${el.tagName}-${id}`;
+
+      try {
+        performance.measure(measureName, startMark);
+        const entry = performance.getEntriesByName(measureName).pop();
+        if (entry) {
+          this.recordMetric(el.tagName.toLowerCase(), entry.duration);
+          performance.clearMarks(startMark);
+          performance.clearMeasures(measureName);
+        }
+      } catch (e) {
+        // Fallback or ignore if performance API fails
+      }
+    };
+
+    // 2. Hook into Error Handler
+    const originalOnError = Lego.config.onError;
+    Lego.config.onError = (err, type, context) => {
+      this.metrics.errors++;
+      if (this.options.reportToConsole) {
+        console.groupCollapsed(`[Lego Monitoring] Error in ${type}`);
+        console.error(err);
+        console.log('Context:', context);
+        console.groupEnd();
+      }
+
+      // Call original handler if it exists
+      if (originalOnError) originalOnError(err, type, context);
+    };
+
+    // Expose metrics API
+    Lego.metrics = {
+      get: () => this.metrics,
+      reset: () => {
+        this.metrics.renders = 0;
+        this.metrics.errors = 0;
+        this.metrics.slowRenders = 0;
+        this.metrics.components.clear();
+      }
+    };
+
+    console.log('[Lego] Monitoring Plugin Installed');
+  },
+
+  recordMetric(tagName, duration) {
+    this.metrics.renders++;
+    if (duration > this.options.slowRenderThreshold) {
+      this.metrics.slowRenders++;
+      if (this.options.reportToConsole) {
+        console.warn(`[Lego Slow Render] <${tagName}> took ${duration.toFixed(2)}ms`);
+      }
+    }
+
+    if (!this.metrics.components.has(tagName)) {
+      this.metrics.components.set(tagName, { count: 0, totalTime: 0, avg: 0 });
+    }
+
+    const stats = this.metrics.components.get(tagName);
+    stats.count++;
+    stats.totalTime += duration;
+    stats.avg = stats.totalTime / stats.count;
+  }
+};