lego-dom 0.0.9 → 1.0.0

package/main.js

@@ -1,9 +1,14 @@
 const Lego = (() => {
   const registry = {}, proxyCache = new WeakMap(), privateData = new WeakMap();
   const forPools = new WeakMap();
+  const activeComponents = new Set();
 
   const sfcLogic = new Map();
-  const sharedStates = new Map(); // Track singleton states for $registry
+  const sharedStates = new Map();
+
+  const styleRegistry = new Map();
+  let styleConfig = {};
+
   const routes = [];
 
   const escapeHTML = (str) => {
@@ -13,6 +18,48 @@ const Lego = (() => {
     }[m]));
   };
 
+  /**
+   * Enterprise Target Resolver
+   * Resolves strings (#id, tag-name) or functions into DOM Elements.
+   * This is crucial for the $go router helper to know where to inject content
+   */
+  const resolveTargets = (query, contextEl) => {
+    if (typeof query === 'function') {
+      const all = Array.from(document.querySelectorAll('*')).filter(n => n.tagName.includes('-'));
+      return [].concat(query(all));
+    }
+    if (query.startsWith('#')) {
+      const el = document.getElementById(query.slice(1));
+      return el ? [el] : [];
+    }
+    // Scoped search first (within the calling component), then global fallback
+    const scoped = contextEl?.querySelectorAll(query) || [];
+    return scoped.length > 0 ? [...scoped] : [...document.querySelectorAll(query)];
+  };
+
+  /**
+   * Universal Routing Helper
+   * Shared between Lego.globals.$go and template helpers
+   */
+  const _go = (path, ...targets) => (contextEl) => {
+    const execute = async (method, body = null, pushState = true, options = {}) => {
+      if (pushState) {
+        const serializedTargets = targets.filter(t => typeof t === 'string');
+        const state = { legoTargets: serializedTargets, method, body };
+        history.pushState(state, '', path);
+      }
+      await _matchRoute(targets.length ? targets : null, contextEl);
+    };
+
+    return {
+      get: (push = true, opt = {}) => execute('GET', null, push, opt),
+      post: (data, push = true, opt = {}) => execute('POST', data, push, opt),
+      put: (data, push = true, opt = {}) => execute('PUT', data, push, opt),
+      patch: (data, push = true, opt = {}) => execute('PATCH', data, push, opt),
+      delete: (push = true, opt = {}) => execute('DELETE', null, push, opt)
+    };
+  };
+
   const createBatcher = () => {
     let queued = false;
     const componentsToUpdate = new Set();
@@ -94,7 +141,7 @@ const Lego = (() => {
 
   const getPrivateData = (el) => {
     if (!privateData.has(el)) {
-      privateData.set(el, { snapped: false, bindings: null, bound: false, rendering: false });
+      privateData.set(el, { snapped: false, bindings: null, bound: false, rendering: false, anchor: null, hasGlobalDependency: false });
     }
     return privateData.get(el);
   };
@@ -127,9 +174,15 @@ const Lego = (() => {
 
       const helpers = {
         $ancestors: (tag) => findAncestorState(context.self, tag),
-        // Helper to access shared state by tag name
         $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, {
             detail,
@@ -178,7 +231,7 @@ const Lego = (() => {
           child.addEventListener(eventName, (event) => {
             let evalScope = state;
             if (loopCtx) {
-              const list = resolve(loopCtx.listName, state);
+              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 });
             }
@@ -192,7 +245,7 @@ const Lego = (() => {
         const updateState = () => {
           let target, last;
           if (loopCtx && prop.startsWith(loopCtx.name + '.')) {
-            const list = resolve(loopCtx.listName, state);
+            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);
@@ -218,22 +271,45 @@ const Lego = (() => {
     const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
     let node;
     while (node = walker.nextNode()) {
-      const isInsideBFor = (n) => {
+      const isInsideBoundary = (n) => {
         let curr = n.parentNode;
         while (curr && curr !== container) {
           if (curr.hasAttribute && curr.hasAttribute('b-for')) return true;
-          if (curr.tagName && curr.tagName.includes('-') && registry[curr.tagName.toLowerCase()]) return true;
+          // Only stop at Shadow Roots or explicit boundaries, NOT component tags in Light DOM
+          // The parent MUST be able to bind data to the slots of its children.
           curr = curr.parentNode;
         }
         return false;
       };
-      if (isInsideBFor(node)) continue;
+      if (isInsideBoundary(node)) continue;
+
+      const checkGlobal = (str) => {
+        if (/\bglobal\b/.test(str)) {
+          const target = container.host || container;
+          getPrivateData(target).hasGlobalDependency = true;
+        }
+      };
+
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (node.hasAttribute('b-if')) {
+          const expr = node.getAttribute('b-if');
+          checkGlobal(expr);
+          // Create an anchor point to keep track of where the element belongs in the DOM
+          const anchor = document.createComment(`b-if: ${expr}`);
+          const data = getPrivateData(node);
+          data.anchor = anchor;
+          bindings.push({ type: 'b-if', node, anchor, expr });
+        }
 
-      if (node.nodeType === 1) {
-        if (node.hasAttribute('b-if')) bindings.push({ type: 'b-if', node, expr: node.getAttribute('b-if') });
+        if (node.hasAttribute('b-show')) {
+          const expr = node.getAttribute('b-show');
+          checkGlobal(expr);
+          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*$/);
           if (match) {
+            checkGlobal(match[2]);
             bindings.push({
               type: 'b-for',
               node,
@@ -247,9 +323,13 @@ const Lego = (() => {
         if (node.hasAttribute('b-text')) bindings.push({ type: 'b-text', node, path: node.getAttribute('b-text') });
         if (node.hasAttribute('b-sync')) bindings.push({ type: 'b-sync', node });
         [...node.attributes].forEach(attr => {
-          if (attr.value.includes('{{')) bindings.push({ type: 'attr', node, attrName: attr.name, template: attr.value });
+          if (attr.value.includes('{{')) {
+            checkGlobal(attr.value);
+            bindings.push({ type: 'attr', node, attrName: attr.name, template: attr.value });
+          }
         });
-      } else if (node.nodeType === 3 && node.textContent.includes('{{')) {
+      } else if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('{{')) {
+        checkGlobal(node.textContent);
         bindings.push({ type: 'text', node, template: node.textContent });
       }
     }
@@ -258,15 +338,15 @@ const Lego = (() => {
 
   const updateNodeBindings = (root, scope) => {
     const processNode = (node) => {
-      if (node.nodeType === 3) {
+      if (node.nodeType === Node.TEXT_NODE) {
         if (node._tpl === undefined) node._tpl = node.textContent;
-        const out = node._tpl.replace(/{{(.*?)}}/g, (_, k) => escapeHTML(safeEval(k.trim(), { state: scope, self: node }) ?? ''));
+        const out = node._tpl.replace(/{{(.*?)}}/g, (_, k) => safeEval(k.trim(), { state: scope, global: Lego.globals, self: node }) ?? '');
         if (node.textContent !== out) node.textContent = out;
-      } else if (node.nodeType === 1) {
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
         [...node.attributes].forEach(attr => {
           if (attr._tpl === undefined) attr._tpl = attr.value;
           if (attr._tpl.includes('{{')) {
-            const out = attr._tpl.replace(/{{(.*?)}}/g, (_, k) => escapeHTML(safeEval(k.trim(), { state: scope, self: node }) ?? ''));
+            const out = attr._tpl.replace(/{{(.*?)}}/g, (_, 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;
@@ -289,27 +369,37 @@ const Lego = (() => {
     data.rendering = true;
 
     try {
-      const shadow = el.shadowRoot;
-      if (!shadow) return;
-      if (!data.bindings) data.bindings = scanForBindings(shadow);
+      // Use shadowRoot if it's a component, otherwise render the element itself (light DOM)
+      const target = el.shadowRoot || el;
+      if (!data.bindings) data.bindings = scanForBindings(target);
 
       data.bindings.forEach(b => {
-        if (b.type === 'b-if') b.node.style.display = safeEval(b.expr, { state, self: b.node }) ? '' : 'none';
-        if (b.type === 'b-text') b.node.textContent = escapeHTML(resolve(b.path, state));
+        // ... (binding logic remains same, just uses b.node which is relative to target)
+        if (b.type === 'b-if') {
+          const condition = !!safeEval(b.expr, { state, global: Lego.globals, self: b.node });
+          const isAttached = !!b.node.parentNode;
+          if (condition && !isAttached) {
+            if (b.anchor.parentNode) b.anchor.parentNode.replaceChild(b.node, b.anchor);
+          } else if (!condition && isAttached) {
+            b.node.parentNode.replaceChild(b.anchor, b.node);
+          }
+        }
+        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-sync') syncModelValue(b.node, resolve(b.node.getAttribute('b-sync'), state));
         if (b.type === 'text') {
-          const out = b.template.replace(/{{(.*?)}}/g, (_, k) => escapeHTML(safeEval(k.trim(), { state, self: b.node }) ?? ''));
+          const out = b.template.replace(/{{(.*?)}}/g, (_, 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) => escapeHTML(safeEval(k.trim(), { state, self: b.node }) ?? ''));
+          const out = b.template.replace(/{{(.*?)}}/g, (_, 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;
           }
         }
         if (b.type === 'b-for') {
-          const list = resolve(b.listName, state) || [];
+          const list = safeEval(b.listName, { state, global: Lego.globals, self: el }) || [];
           if (!forPools.has(b.node)) forPools.set(b.node, new Map());
           const pool = forPools.get(b.node);
           const currentKeys = new Set();
@@ -330,7 +420,8 @@ const Lego = (() => {
             child.querySelectorAll('[b-sync]').forEach(input => {
               const path = input.getAttribute('b-sync');
               if (path.startsWith(b.itemName + '.')) {
-                syncModelValue(input, resolve(path.split('.').slice(1).join('.'), item));
+                const list = safeEval(b.listName, { state, global: Lego.globals, self: el });
+                syncModelValue(input, resolve(path.split('.').slice(1).join('.'), list[i]));
               }
             });
             if (b.node.children[i] !== child) b.node.insertBefore(child, b.node.children[i] || null);
@@ -340,24 +431,52 @@ const Lego = (() => {
           }
         }
       });
+
+      // Global Broadcast: Only notify components that depend on globals
+      if (state === Lego.globals) {
+        activeComponents.forEach(comp => {
+          if (getPrivateData(comp).hasGlobalDependency) render(comp);
+        });
+      }
     } finally {
       data.rendering = false;
     }
   };
 
   const snap = (el) => {
-    if (!el || el.nodeType !== 1) return;
+    if (!el || el.nodeType !== Node.ELEMENT_NODE) return;
     const data = getPrivateData(el);
     const name = el.tagName.toLowerCase();
+    const templateNode = registry[name];
 
-    if (registry[name] && !data.snapped) {
+    if (templateNode && !data.snapped) {
       data.snapped = true;
-      const tpl = registry[name].content.cloneNode(true);
+      const tpl = templateNode.content.cloneNode(true);
       const shadow = el.attachShadow({ mode: 'open' });
 
-      const defaultLogic = sfcLogic.get(name) || {};
-      const attrLogic = parseJSObject(el.getAttribute('b-data') || '{}');
-      el._studs = reactive({ ...defaultLogic, ...attrLogic }, el);
+      const styleKeys = (templateNode.getAttribute('b-styles') || "").split(/\s+/).filter(Boolean);
+      if (styleKeys.length > 0) {
+        const sheetsToApply = styleKeys.flatMap(key => styleRegistry.get(key) || []);
+        if (sheetsToApply.length > 0) {
+          shadow.adoptedStyleSheets = [...sheetsToApply];
+        }
+      }
+
+      // TIER 1: Logic from Lego.define (SFC)
+      // TIER 2: Logic from the <template b-data="..."> attribute
+      // TIER 3: Logic from the <my-comp b-data="..."> tag
+      const scriptLogic = sfcLogic.get(name) || {};
+      const templateLogic = parseJSObject(templateNode.getAttribute('b-data') || '{}');
+      const instanceLogic = parseJSObject(el.getAttribute('b-data') || '{}');
+
+      // Priority: Script < Template < Instance
+      el._studs = reactive({
+        ...scriptLogic,
+        ...templateLogic,
+        ...instanceLogic,
+        get $route() { return Lego.globals.$route },
+        get $go() { return Lego.globals.$go }
+      }, el);
 
       shadow.appendChild(tpl);
 
@@ -367,6 +486,7 @@ const Lego = (() => {
       }
 
       bind(shadow, el);
+      activeComponents.add(el);
       render(el);
 
       if (typeof el._studs.mounted === 'function') {
@@ -385,65 +505,137 @@ 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); }
     }
+    activeComponents.delete(el);
     [...el.children].forEach(unsnap);
   };
 
-  const _matchRoute = async () => {
+  const _matchRoute = async (targetQueries = null, contextEl = null) => {
     const path = window.location.pathname;
+    const search = window.location.search;
     const match = routes.find(r => r.regex.test(path));
-    const outlet = document.querySelector('lego-router');
-    if (!outlet || !match) return;
+    if (!match) return;
+
+    // Resolve targets: Functional selectors > List of queries > History State > Default lego-router
+    let resolvedElements = [];
+    if (targetQueries) {
+      resolvedElements = targetQueries.flatMap(query => resolveTargets(query, contextEl));
+    } else {
+      const defaultOutlet = document.querySelector('lego-router');
+      if (defaultOutlet) resolvedElements = [defaultOutlet];
+    }
+
+    if (resolvedElements.length === 0) return;
 
     const values = path.match(match.regex).slice(1);
     const params = Object.fromEntries(match.paramNames.map((n, i) => [n, values[i]]));
+    const query = Object.fromEntries(new URLSearchParams(search));
 
     if (match.middleware) {
       const allowed = await match.middleware(params, Lego.globals);
       if (!allowed) return;
     }
 
-    Lego.globals.params = params;
-    outlet.innerHTML = `<${match.tagName}></${match.tagName}>`;
+    Lego.globals.$route.url = path + search;
+    Lego.globals.$route.route = match.path;
+    Lego.globals.$route.params = params;
+    Lego.globals.$route.query = query;
+    Lego.globals.$route.method = history.state?.method || 'GET';
+    Lego.globals.$route.body = history.state?.body || null;
+
+    resolvedElements.forEach(el => {
+      if (el) {
+        const component = document.createElement(match.tagName);
+        // Atomic swap: MutationObserver in init() will pick this up
+        el.replaceChildren(component);
+      }
+    });
   };
 
   return {
-    init: () => {
-      document.querySelectorAll('template[b-id]').forEach(t => registry[t.getAttribute('b-id')] = t);
+    init: async (root = document.body, styles = {}) => {
+      // If called as an event listener or with invalid root, fail over to document.body
+      if (!root || typeof root.nodeType !== 'number') root = document.body;
+      styleConfig = styles;
+
+      // Pre-load all defined style sets into Constructable Stylesheets
+      const loadPromises = Object.entries(styles).map(async ([key, urls]) => {
+        const sheets = await Promise.all(urls.map(async (url) => {
+          try {
+            const response = await fetch(url);
+            const cssText = await response.text();
+            const sheet = new CSSStyleSheet();
+            await sheet.replace(cssText);
+            return sheet;
+          } catch (e) {
+            console.error(`[Lego] Failed to load stylesheet: ${url}`, e);
+            return null;
+          }
+        }));
+        styleRegistry.set(key, sheets.filter(s => s !== null));
+      });
+      await Promise.all(loadPromises);
+
+      document.querySelectorAll('template[b-id]').forEach(t => {
+        registry[t.getAttribute('b-id')] = t;
+      });
+
       const observer = new MutationObserver(m => m.forEach(r => {
-        r.addedNodes.forEach(n => n.nodeType === 1 && snap(n));
-        r.removedNodes.forEach(n => n.nodeType === 1 && unsnap(n));
+        r.addedNodes.forEach(n => n.nodeType === Node.ELEMENT_NODE && snap(n));
+        r.removedNodes.forEach(n => n.nodeType === Node.ELEMENT_NODE && unsnap(n));
       }));
-      observer.observe(document.body, { childList: true, subtree: true });
-
-      // Also snap the root element (body) to catch attributes like @event
-      snap(document.body);
+      observer.observe(root, { childList: true, subtree: true });
 
-      // Bind body specifically to catch global listeners like @todo-added in go.html
-      // We pass a mock componentRoot that points to Lego.globals
-      bind(document.body, { _studs: Lego.globals, _data: { bound: false } });
+      root._studs = Lego.globals;
+      snap(root);
+      bind(root, root);
+      render(root);
 
       if (routes.length > 0) {
-        window.addEventListener('popstate', _matchRoute);
+        // Smart History: Restore surgical targets on Back button
+        window.addEventListener('popstate', (event) => {
+          const targets = event.state?.legoTargets || null;
+          _matchRoute(targets);
+        });
+
+        document.addEventListener('submit', e => {
+          e.preventDefault();
+        })
+
         document.addEventListener('click', e => {
-          const link = e.target.closest('a[b-link]');
+          const path = e.composedPath();
+          const link = path.find(el => el.tagName === 'A' && (el.hasAttribute('b-target') || el.hasAttribute('b-link')));
           if (link) {
             e.preventDefault();
-            history.pushState({}, '', link.getAttribute('href'));
-            _matchRoute();
+            const href = link.getAttribute('href');
+            const targetAttr = link.getAttribute('b-target');
+            const targets = targetAttr ? targetAttr.split(/\s+/).filter(Boolean) : [];
+
+            const shouldPush = link.getAttribute('b-link') !== 'false';
+            Lego.globals.$go(href, ...targets).get(shouldPush);
           }
         });
         _matchRoute();
       }
     },
-    globals: reactive({}, document.body),
-    define: (tagName, templateHTML, logic = {}) => {
+    globals: reactive({
+      $route: {
+        url: window.location.pathname,
+        route: '',
+        params: {},
+        query: {},
+        method: 'GET',
+        body: null
+      },
+      $go: (path, ...targets) => _go(path, ...targets)(document.body)
+    }, document.body),
+    define: (tagName, templateHTML, logic = {}, styles = "") => {
       const t = document.createElement('template');
       t.setAttribute('b-id', tagName);
+      t.setAttribute('b-styles', styles);
       t.innerHTML = templateHTML;
       registry[tagName] = t;
       sfcLogic.set(tagName, logic);
 
-      // Initialize shared state for $registry singleton
       sharedStates.set(tagName.toLowerCase(), reactive({ ...logic }, document.body));
 
       document.querySelectorAll(tagName).forEach(snap);
@@ -454,12 +646,11 @@ const Lego = (() => {
         paramNames.push(name);
         return '([^/]+)';
       });
-      routes.push({ regex: new RegExp(`^${regexPath}$`), tagName, paramNames, middleware });
+      routes.push({ path, regex: new RegExp(`^${regexPath}$`), tagName, paramNames, middleware });
     }
   };
 })();
 
 if (typeof window !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', Lego.init);
   window.Lego = Lego;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lego-dom",
-  "version": "0.0.9",
+  "version": "1.0.0",
   "license": "MIT",
   "description": "A feature-rich web components + SFC frontend framework",
   "main": "main.js",

package/parse-lego.js

@@ -7,20 +7,28 @@
  * Parse a .lego file content into structured sections
  * @param {string} content - Raw .lego file content
  * @param {string} filename - Filename for error reporting
- * @returns {{template: string, script: string, style: string, componentName: string}}
+ * @returns {{template: string, script: string, style: string, stylesAttr: string, componentName: string}}
  */
 export function parseLego(content, filename = 'component.lego') {
   const result = {
     template: '',
     script: '',
     style: '',
+    stylesAttr: '', // Stores the value of the b-styles attribute
     componentName: deriveComponentName(filename)
   };
 
-  // Extract template section
-  const templateMatch = content.match(/<template>([\s\S]*?)<\/template>/);
+  // Updated to capture attributes on the template tag (like b-styles)
+  const templateMatch = content.match(/<template([\s\S]*?)>([\s\S]*?)<\/template>/);
   if (templateMatch) {
-    result.template = templateMatch[1].trim();
+    const attrs = templateMatch[1];
+    result.template = templateMatch[2].trim();
+
+    // Extract b-styles value from the attributes string
+    const bStylesMatch = attrs.match(/b-styles=["']([^"']+)["']/);
+    if (bStylesMatch) {
+      result.stylesAttr = bStylesMatch[1];
+    }
   }
 
   // Extract script section
@@ -51,11 +59,12 @@ export function deriveComponentName(filename) {
 
 /**
  * Generate Lego.define() code from parsed .lego file
+ * Updated to include the 4th argument for styles
  * @param {object} parsed - Parsed .lego file object
  * @returns {string} - JavaScript code string
  */
 export function generateDefineCall(parsed) {
-  const { componentName, template, script, style } = parsed;
+  const { componentName, template, script, style, stylesAttr } = parsed;
 
   // Build template HTML
   let templateHTML = '';
@@ -79,8 +88,8 @@ export function generateDefineCall(parsed) {
     }
   }
 
-  // Generate the Lego.define call
-  return `Lego.define('${componentName}', \`${escapeTemplate(templateHTML)}\`, ${logicCode});`;
+  // Generate the Lego.define call with the new 4th argument (stylesAttr)
+  return `Lego.define('${componentName}', \`${escapeTemplate(templateHTML)}\`, ${logicCode}, '${stylesAttr}');`;
 }
 
 /**
@@ -116,4 +125,4 @@ export function validateLego(parsed) {
     valid: errors.length === 0,
     errors
   };
-}
+}

package/{main.test.js → tests/main.test.js}

@@ -11,23 +11,41 @@ const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
 
 global.window = dom.window;
 global.document = dom.window.document;
-global.navigator = dom.window.navigator;
+
+// Use defineProperty for navigator as it might be read-only in some environments
+Object.defineProperty(global, 'navigator', {
+  value: dom.window.navigator,
+  writable: true,
+  configurable: true
+});
 global.HTMLElement = dom.window.HTMLElement;
 global.customElements = dom.window.customElements;
 global.MutationObserver = dom.window.MutationObserver;
 global.Node = dom.window.Node;
 global.NodeFilter = dom.window.NodeFilter;
+global.Element = dom.window.Element;
+global.Event = dom.window.Event;
+global.FormData = dom.window.FormData;
+
+// Mock CSSStyleSheet for JSDOM
+global.CSSStyleSheet = class {
+  constructor() { this.cssRules = []; }
+  replace(content) { this.cssText = content; return Promise.resolve(this); }
+};
+
 global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
 
 // 2. Load the library code
 // We read it as a string to execute it in our shimmed global environment
-const libCode = fs.readFileSync(path.resolve(__dirname, './main.js'), 'utf8');
-eval(libCode); 
+const libCode = fs.readFileSync(path.resolve(__dirname, '../main.js'), 'utf8');
+eval(libCode);
 
 describe('Lego JS Node Environment Tests', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     document.body.innerHTML = '';
-    // Reset registry if necessary between tests
+    window.clicked = false;
+    // Initializing the library manually for the test environment
+    await window.Lego.init(document.body);
   });
 
   it('should initialize the Lego global object', () => {
@@ -38,45 +56,44 @@ describe('Lego JS Node Environment Tests', () => {
   it('should reactively update text content', async () => {
     window.Lego.define('test-comp', '<span>{{msg}}</span>');
     const el = document.createElement('test-comp');
-    el.setAttribute('l-studs', "{ msg: 'hello' }");
+    el.setAttribute('b-data', "{ msg: 'hello' }");
     document.body.appendChild(el);
 
-    // Wait for Lego.init / MutationObserver to fire
-    await new Promise(r => setTimeout(r, 50));
+    // Wait for MutationObserver / snap to fire
+    await new Promise(r => setTimeout(r, 100));
 
     const span = el.shadowRoot.querySelector('span');
     expect(span.textContent).toBe('hello');
 
     // Test reactivity
     el._studs.msg = 'world';
-    
+
     // Wait for batcher (requestAnimationFrame shim)
-    await new Promise(r => setTimeout(r, 50));
+    await new Promise(r => setTimeout(r, 100));
     expect(span.textContent).toBe('world');
   });
 
   it('should prevent XSS via auto-escaping', async () => {
     window.Lego.define('xss-comp', '<div>{{code}}</div>');
     const el = document.createElement('xss-comp');
-    el.setAttribute('l-studs', "{ code: '<script>alert(1)</script>' }");
+    el.setAttribute('b-data', "{ code: '<script>alert(1)</script>' }");
     document.body.appendChild(el);
 
-    await new Promise(r => setTimeout(r, 50));
-    
+    await new Promise(r => setTimeout(r, 100));
+
     const div = el.shadowRoot.querySelector('div');
     // It should be escaped, not raw HTML
     expect(div.innerHTML).toContain('&lt;script&gt;');
   });
 
   it('should handle @events using the universal binder', async () => {
-    const clickSpy = vi.fn();
     window.Lego.define('event-comp', '<button @click="handleClick">Click Me</button>');
-    
+
     const el = document.createElement('event-comp');
-    el.setAttribute('l-studs', `{ handleClick: () => { window.clicked = true; } }`);
+    el.setAttribute('b-data', `{ handleClick: () => { window.clicked = true; } }`);
     document.body.appendChild(el);
 
-    await new Promise(r => setTimeout(r, 50));
+    await new Promise(r => setTimeout(r, 100));
 
     const btn = el.shadowRoot.querySelector('button');
     btn.click();