leanweb 3.10.2 → 3.10.4

package/commands/build.js

@@ -48,13 +48,14 @@ const buildModule = (projectPath) => {
     const globalCssPath = `${utils.dirs.build}/global-styles.css`;
     const globalCss = fs.existsSync(globalCssPath) ? fs.readFileSync(globalCssPath, 'utf8') : '';
 
-    // Extract @import statements and create a JS module that sets up the global styles, including the inline styles and the imports, and write it to global-styles.js
+    // Strip CSS comments, then extract @import statements and create a JS module that sets up the global styles
     const imports = [];
-    const inlineCss = globalCss.replace(/@import\s+(?:url\()?['"]?([^'"\)]+)['"]?\)?[^;]*;/g, (_, url) => {
+    const uncommented = globalCss.replace(/\/\*[\s\S]*?\*\//g, '');
+    const inlineCss = uncommented.replace(/@import\s+(?:url\()?['"]?([^'"\)]+)['"]?\)?[^;]*;/g, (_, url) => {
       imports.push(url);
       return '';
     });
-    const jsModule = `globalThis.leanweb = globalThis.leanweb ?? {};\nconst sheet = new CSSStyleSheet();\nsheet.replaceSync(${JSON.stringify(inlineCss)});\nglobalThis.leanweb.__lw_globalStyleSheet = sheet;\nglobalThis.leanweb.__lw_globalStyleImports = ${JSON.stringify(imports)};\n`;
+    const jsModule = `globalThis.leanweb ??= {};\nconst sheet = new CSSStyleSheet();\nsheet.replaceSync(${JSON.stringify(inlineCss)});\nglobalThis.leanweb.__lw_globalStyleSheet = sheet;\nglobalThis.leanweb.__lw_globalStyleImports = ${JSON.stringify(imports)};\n`;
     utils.writeIfChanged(`${utils.dirs.build}/global-styles.js`, jsModule);
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leanweb",
-  "version": "3.10.2",
+  "version": "3.10.4",
   "description": "Builds framework agnostic web components.",
   "bin": {
     "leanweb": "leanweb.js",
@@ -18,14 +18,17 @@
     "web components"
   ],
   "author": "Qian Chen",
+  "scripts": {
+    "test": "node --test test/*.test.js"
+  },
   "license": "MIT",
   "dependencies": {
-    "@babel/parser": "^7.29.0",
-    "esbuild": "^0.27.3",
+    "@babel/parser": "^7.29.2",
+    "esbuild": "^0.27.4",
     "fs-extra": "^11.3.4",
     "globby": "^16.1.1",
     "html-minifier": "^4.0.0",
-    "isomorphic-git": "^1.37.2",
+    "isomorphic-git": "^1.37.4",
     "live-server": "^1.2.2",
     "node-watch": "^0.7.4",
     "parse5": "^8.0.0",

package/templates/lib/lw-element.js

@@ -1,77 +1,74 @@
 import * as parser from './lw-expr-parser.js';
 import LWEventBus from './lw-event-bus.js';
 
-globalThis.leanweb = globalThis.leanweb ?? {
-  componentsListeningOnUrlChanges: [],
-  eventBus: new LWEventBus(),
-  updateComponents(...tagNames) {
-    if (tagNames?.length) {
-      tagNames.forEach(tagName => {
-        leanweb.eventBus.dispatchEvent(tagName);
-      });
-    } else {
-      leanweb.eventBus.dispatchEvent('update');
-    }
-  },
-
-  set urlHash(hash) {
-    location.hash = hash;
-  },
-
-  get urlHash() {
-    return location.hash;
-  },
-
-  set urlHashPath(hashPath) {
-    const s = this.urlHash.split('?');
-    if (s.length === 1) {
-      this.urlHash = hashPath;
-    } else if (s.length > 1) {
-      this.urlHash = hashPath + '?' + s[1];
-    }
-  },
+globalThis.leanweb ??= {};
+
+leanweb.componentsListeningOnUrlChanges = [];
+leanweb.eventBus = new LWEventBus();
+leanweb.updateComponents = function (...tagNames) {
+  if (tagNames?.length) {
+    tagNames.forEach(tagName => {
+      leanweb.eventBus.dispatchEvent(tagName);
+    });
+  } else {
+    leanweb.eventBus.dispatchEvent('update');
+  }
+};
 
-  get urlHashPath() {
-    return this.urlHash.split('?')[0];
+Object.defineProperties(leanweb, {
+  urlHash: {
+    set(hash) { location.hash = hash; },
+    get() { return location.hash; }
   },
-
-  set urlHashParams(hashParams) {
-    if (!hashParams) {
-      return;
-    }
-
-    const paramArray = [];
-    Object.keys(hashParams).forEach(key => {
-      const value = hashParams[key];
-      if (Array.isArray(value)) {
-        value.forEach(v => {
-          paramArray.push(key + '=' + encodeURIComponent(v));
-        });
-      } else {
-        paramArray.push(key + '=' + encodeURIComponent(value));
+  urlHashPath: {
+    set(hashPath) {
+      const s = this.urlHash.split('?');
+      if (s.length === 1) {
+        this.urlHash = hashPath;
+      } else if (s.length > 1) {
+        this.urlHash = hashPath + '?' + s[1];
       }
-    });
-    this.urlHash = this.urlHashPath + '?' + paramArray.join('&');
+    },
+    get() { return this.urlHash.split('?')[0]; }
   },
+  urlHashParams: {
+    set(hashParams) {
+      if (!hashParams) {
+        return;
+      }
 
-  get urlHashParams() {
-    const ret = {};
-    const s = this.urlHash.split('?');
-    if (s.length > 1) {
-      const p = new URLSearchParams(s[1]);
-      p.forEach((v, k) => {
-        if (ret[k] === undefined) {
-          ret[k] = v;
-        } else if (Array.isArray(ret[k])) {
-          ret[k].push(v);
+      const paramArray = [];
+      Object.keys(hashParams).forEach(key => {
+        const value = hashParams[key];
+        if (Array.isArray(value)) {
+          value.forEach(v => {
+            paramArray.push(key + '=' + encodeURIComponent(v));
+          });
         } else {
-          ret[k] = [ret[k], v];
+          paramArray.push(key + '=' + encodeURIComponent(value));
         }
       });
+      this.urlHash = this.urlHashPath + '?' + paramArray.join('&');
+    },
+    get() {
+      const ret = {};
+      const s = this.urlHash.split('?');
+      if (s.length > 1) {
+        const p = new URLSearchParams(s[1]);
+        p.forEach((v, k) => {
+          if (ret[k] === undefined) {
+            ret[k] = v;
+          } else if (Array.isArray(ret[k])) {
+            ret[k].push(v);
+          } else {
+            ret[k] = [ret[k], v];
+          }
+        });
+      }
+      return ret;
     }
-    return ret;
   }
-};
+});
 
 globalThis.addEventListener('hashchange', () => {
   leanweb.componentsListeningOnUrlChanges.forEach(component => {
@@ -110,7 +107,7 @@ export default class LWElement extends HTMLElement {
     componentSheet.replaceSync(ast.css);
     node.innerHTML = ast.html;
     this.attachShadow({ mode: 'open' }).appendChild(node.content);
-    this.shadowRoot.adoptedStyleSheets = [globalThis.leanweb.__lw_globalStyleSheet, componentSheet];
+    this.shadowRoot.adoptedStyleSheets = [globalThis.leanweb.__lw_globalStyleSheet, componentSheet].filter(Boolean);
     globalThis.leanweb.__lw_globalStyleImports?.forEach(url => {
       const link = document.createElement('link');
       link.rel = 'stylesheet';

package/test/lw-event-bus.test.js

@@ -0,0 +1,104 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import LWEventBus from '../templates/lib/lw-event-bus.js';
+
+describe('LWEventBus', () => {
+  it('should create an instance with empty listeners', () => {
+    const bus = new LWEventBus();
+    assert.deepEqual(bus.listeners, {});
+  });
+
+  describe('addEventListener', () => {
+    it('should register a listener and return it', () => {
+      const bus = new LWEventBus();
+      const callback = () => {};
+      const listener = bus.addEventListener('test', callback);
+      assert.equal(listener.eventName, 'test');
+      assert.equal(listener.callback, callback);
+      assert.ok(listener.key);
+    });
+
+    it('should register multiple listeners for same event', () => {
+      const bus = new LWEventBus();
+      bus.addEventListener('test', () => {});
+      bus.addEventListener('test', () => {});
+      assert.equal(Object.keys(bus.listeners['test']).length, 2);
+    });
+
+    it('should register listeners for different events', () => {
+      const bus = new LWEventBus();
+      bus.addEventListener('event1', () => {});
+      bus.addEventListener('event2', () => {});
+      assert.ok(bus.listeners['event1']);
+      assert.ok(bus.listeners['event2']);
+    });
+  });
+
+  describe('removeEventListener', () => {
+    it('should remove a registered listener', () => {
+      const bus = new LWEventBus();
+      const listener = bus.addEventListener('test', () => {});
+      bus.removeEventListener(listener);
+      assert.equal(Object.keys(bus.listeners['test']).length, 0);
+    });
+
+    it('should not throw when removing from non-existent event', () => {
+      const bus = new LWEventBus();
+      assert.doesNotThrow(() => {
+        bus.removeEventListener({ eventName: 'nonexistent', key: 999 });
+      });
+    });
+
+    it('should only remove the specified listener', () => {
+      const bus = new LWEventBus();
+      const listener1 = bus.addEventListener('test', () => {});
+      bus.addEventListener('test', () => {});
+      bus.removeEventListener(listener1);
+      assert.equal(Object.keys(bus.listeners['test']).length, 1);
+    });
+  });
+
+  describe('dispatchEvent', () => {
+    it('should call listener callback with event data', async () => {
+      const bus = new LWEventBus();
+      let receivedEvent = null;
+      bus.addEventListener('test', event => {
+        receivedEvent = event;
+      });
+      bus.dispatchEvent('test', { message: 'hello' });
+      // dispatchEvent uses setTimeout, so we need to wait
+      await new Promise(r => setTimeout(r, 50));
+      assert.ok(receivedEvent);
+      assert.equal(receivedEvent.eventName, 'test');
+      assert.deepEqual(receivedEvent.data, { message: 'hello' });
+    });
+
+    it('should call all listeners for the event', async () => {
+      const bus = new LWEventBus();
+      let count = 0;
+      bus.addEventListener('test', () => count++);
+      bus.addEventListener('test', () => count++);
+      bus.dispatchEvent('test');
+      await new Promise(r => setTimeout(r, 50));
+      assert.equal(count, 2);
+    });
+
+    it('should not throw when dispatching event with no listeners', () => {
+      const bus = new LWEventBus();
+      assert.doesNotThrow(() => {
+        bus.dispatchEvent('nonexistent', { data: 'test' });
+      });
+    });
+
+    it('should default data to null', async () => {
+      const bus = new LWEventBus();
+      let receivedEvent = null;
+      bus.addEventListener('test', event => {
+        receivedEvent = event;
+      });
+      bus.dispatchEvent('test');
+      await new Promise(r => setTimeout(r, 50));
+      assert.equal(receivedEvent.data, null);
+    });
+  });
+});

package/test/lw-expr-parser.test.js

@@ -0,0 +1,303 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import * as parser from '@babel/parser';
+import { evaluate } from '../templates/lib/lw-expr-parser.js';
+
+const getAST = expr => {
+  const parsedProgram = parser.parse(expr).program;
+  if (parsedProgram.directives.length > 0 && parsedProgram.body.length === 0) {
+    return parsedProgram.directives;
+  }
+  return parsedProgram.body;
+};
+
+const eval1 = (expr, context = {}) => evaluate(getAST(expr), context)[0];
+
+describe('lw-expr-parser', () => {
+  describe('literals', () => {
+    it('should evaluate numeric literals', () => {
+      assert.equal(eval1('42'), 42);
+      assert.equal(eval1('3.14'), 3.14);
+    });
+
+    it('should evaluate string literals', () => {
+      assert.equal(eval1('"hello"'), 'hello');
+      assert.equal(eval1("'world'"), 'world');
+    });
+
+    it('should evaluate boolean literals', () => {
+      assert.equal(eval1('true'), true);
+      assert.equal(eval1('false'), false);
+    });
+
+    it('should evaluate null literal', () => {
+      assert.equal(eval1('null'), null);
+    });
+
+    it('should evaluate regex literals', () => {
+      const result = eval1('/abc/gi');
+      assert.ok(result instanceof RegExp);
+      assert.equal(result.source, 'abc');
+      assert.equal(result.flags, 'gi');
+    });
+  });
+
+  describe('binary operations', () => {
+    it('should handle arithmetic', () => {
+      assert.equal(eval1('2 + 3'), 5);
+      assert.equal(eval1('10 - 4'), 6);
+      assert.equal(eval1('3 * 4'), 12);
+      assert.equal(eval1('15 / 3'), 5);
+      assert.equal(eval1('10 % 3'), 1);
+      assert.equal(eval1('2 ** 3'), 8);
+    });
+
+    it('should handle comparison operators', () => {
+      assert.equal(eval1('1 == 1'), true);
+      assert.equal(eval1('1 === 1'), true);
+      assert.equal(eval1('1 != 2'), true);
+      assert.equal(eval1('1 !== 2'), true);
+      assert.equal(eval1('1 < 2'), true);
+      assert.equal(eval1('2 <= 2'), true);
+      assert.equal(eval1('3 > 2'), true);
+      assert.equal(eval1('3 >= 3'), true);
+    });
+
+    it('should handle bitwise operators', () => {
+      assert.equal(eval1('5 & 3'), 1);
+      assert.equal(eval1('5 | 3'), 7);
+      assert.equal(eval1('5 ^ 3'), 6);
+      assert.equal(eval1('1 << 2'), 4);
+      assert.equal(eval1('8 >> 2'), 2);
+    });
+
+    it('should handle string concatenation', () => {
+      assert.equal(eval1('"hello" + " " + "world"'), 'hello world');
+    });
+  });
+
+  describe('unary operations', () => {
+    it('should handle negation', () => {
+      assert.equal(eval1('-5'), -5);
+    });
+
+    it('should handle logical not', () => {
+      assert.equal(eval1('!true'), false);
+      assert.equal(eval1('!false'), true);
+    });
+
+    it('should handle typeof', () => {
+      assert.equal(eval1('typeof 42'), 'number');
+      assert.equal(eval1('typeof "hi"'), 'string');
+    });
+
+    it('should handle void', () => {
+      assert.equal(eval1('void 0'), undefined);
+    });
+
+    it('should handle unary plus', () => {
+      assert.equal(eval1('+"5"'), 5);
+    });
+
+    it('should handle bitwise NOT', () => {
+      assert.equal(eval1('~0'), -1);
+    });
+  });
+
+  describe('logical operations', () => {
+    it('should handle && operator', () => {
+      assert.equal(eval1('true && "yes"'), 'yes');
+      assert.equal(eval1('false && "yes"'), false);
+    });
+
+    it('should handle || operator', () => {
+      assert.equal(eval1('false || "fallback"'), 'fallback');
+      assert.equal(eval1('"first" || "second"'), 'first');
+    });
+
+    it('should handle ?? operator', () => {
+      assert.equal(eval1('null ?? "default"'), 'default');
+      assert.equal(eval1('0 ?? "default"'), 0);
+    });
+  });
+
+  describe('conditional (ternary) expression', () => {
+    it('should return consequent when true', () => {
+      assert.equal(eval1('true ? "yes" : "no"'), 'yes');
+    });
+
+    it('should return alternate when false', () => {
+      assert.equal(eval1('false ? "yes" : "no"'), 'no');
+    });
+  });
+
+  describe('identifiers and context', () => {
+    it('should resolve identifiers from context object', () => {
+      assert.equal(eval1('name', { name: 'Alice' }), 'Alice');
+    });
+
+    it('should resolve identifiers from context array', () => {
+      assert.equal(eval1('x', [{ x: 10 }, { y: 20 }]), 10);
+    });
+
+    it('should return undefined for missing identifiers', () => {
+      assert.equal(eval1('missing', {}), undefined);
+    });
+
+    it('should resolve from first matching context in array', () => {
+      assert.equal(eval1('x', [{ x: 'first' }, { x: 'second' }]), 'first');
+    });
+  });
+
+  describe('member expressions', () => {
+    it('should access object properties', () => {
+      assert.equal(eval1('obj.name', { obj: { name: 'test' } }), 'test');
+    });
+
+    it('should access computed properties', () => {
+      assert.equal(eval1('obj["key"]', { obj: { key: 'value' } }), 'value');
+    });
+
+    it('should access nested properties', () => {
+      assert.equal(eval1('a.b.c', { a: { b: { c: 42 } } }), 42);
+    });
+
+    it('should bind functions to their object', () => {
+      const result = eval1('arr.join', { arr: [1, 2, 3] });
+      assert.equal(typeof result, 'function');
+    });
+  });
+
+  describe('optional member expressions', () => {
+    it('should return undefined for null object', () => {
+      assert.equal(eval1('obj?.name', { obj: null }), undefined);
+    });
+
+    it('should return undefined for undefined object', () => {
+      assert.equal(eval1('obj?.name', {}), undefined);
+    });
+
+    it('should return value when object exists', () => {
+      assert.equal(eval1('obj?.name', { obj: { name: 'test' } }), 'test');
+    });
+  });
+
+  describe('function calls', () => {
+    it('should call functions', () => {
+      const ctx = { greet: name => `Hello ${name}` };
+      assert.equal(eval1('greet("World")', ctx), 'Hello World');
+    });
+
+    it('should call method on object', () => {
+      assert.equal(eval1('arr.join(",")', { arr: [1, 2, 3] }), '1,2,3');
+    });
+
+    it('should handle spread arguments', () => {
+      const ctx = { sum: (...args) => args.reduce((a, b) => a + b, 0), nums: [1, 2, 3] };
+      assert.equal(eval1('sum(...nums)', ctx), 6);
+    });
+
+    it('should call string methods', () => {
+      assert.equal(eval1('name.toUpperCase()', { name: 'hello' }), 'HELLO');
+    });
+  });
+
+  describe('assignment operations', () => {
+    it('should handle simple assignment', () => {
+      const ctx = { x: 0 };
+      eval1('x = 5', ctx);
+      assert.equal(ctx.x, 5);
+    });
+
+    it('should handle += assignment', () => {
+      const ctx = { x: 10 };
+      eval1('x += 5', ctx);
+      assert.equal(ctx.x, 15);
+    });
+
+    it('should handle -= assignment', () => {
+      const ctx = { x: 10 };
+      eval1('x -= 3', ctx);
+      assert.equal(ctx.x, 7);
+    });
+
+    it('should handle member expression assignment', () => {
+      const ctx = { obj: { val: 0 } };
+      eval1('obj.val = 42', ctx);
+      assert.equal(ctx.obj.val, 42);
+    });
+  });
+
+  describe('update operations', () => {
+    it('should handle prefix increment', () => {
+      const ctx = { x: 5 };
+      const result = eval1('++x', ctx);
+      assert.equal(result, 6);
+      assert.equal(ctx.x, 6);
+    });
+
+    it('should handle postfix increment', () => {
+      const ctx = { x: 5 };
+      const result = eval1('x++', ctx);
+      assert.equal(result, 5);
+      assert.equal(ctx.x, 6);
+    });
+
+    it('should handle prefix decrement', () => {
+      const ctx = { x: 5 };
+      const result = eval1('--x', ctx);
+      assert.equal(result, 4);
+      assert.equal(ctx.x, 4);
+    });
+
+    it('should handle postfix decrement', () => {
+      const ctx = { x: 5 };
+      const result = eval1('x--', ctx);
+      assert.equal(result, 5);
+      assert.equal(ctx.x, 4);
+    });
+  });
+
+  describe('array expressions', () => {
+    it('should create arrays', () => {
+      assert.deepEqual(eval1('[1, 2, 3]'), [1, 2, 3]);
+    });
+
+    it('should handle spread in arrays', () => {
+      assert.deepEqual(eval1('[...arr, 4]', { arr: [1, 2, 3] }), [1, 2, 3, 4]);
+    });
+  });
+
+  describe('object expressions', () => {
+    it('should create objects', () => {
+      assert.deepEqual(eval1('({ a: 1, b: 2 })'), { a: 1, b: 2 });
+    });
+
+    it('should handle computed keys', () => {
+      assert.deepEqual(eval1('({ [key]: "value" })', { key: 'dynamic' }), { dynamic: 'value' });
+    });
+  });
+
+  describe('new expressions', () => {
+    it('should create new instances', () => {
+      const result = eval1('new Date(2024, 0, 1)', { Date });
+      assert.ok(result instanceof Date);
+    });
+  });
+
+  describe('this expression', () => {
+    it('should resolve this from context', () => {
+      const self = { name: 'component' };
+      assert.equal(eval1('this.name', [{ this: self }]), 'component');
+    });
+  });
+
+  describe('error handling', () => {
+    it('should throw with location info on error', () => {
+      const loc = { startLine: 1, endLine: 1 };
+      assert.throws(() => {
+        evaluate(getAST('nonexistent()'), {}, loc);
+      });
+    });
+  });
+});

package/test/lw-html-parser.test.js

@@ -0,0 +1,151 @@
+import { describe, it, beforeEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { parse } from '../lib/lw-html-parser.js';
+
+describe('lw-html-parser', () => {
+  describe('parse', () => {
+    it('should return an object with html property', () => {
+      const result = parse('<div>hello</div>');
+      assert.ok(result.html);
+      assert.equal(typeof result.html, 'string');
+    });
+
+    it('should pass through plain HTML unchanged', () => {
+      const result = parse('<div>hello</div>');
+      assert.equal(result.html, '<div>hello</div>');
+      // Only the html key, no interpolation keys
+      assert.deepEqual(Object.keys(result), ['html']);
+    });
+
+    it('should handle lw text interpolation', () => {
+      const result = parse('<span lw>name</span>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+
+      const interp = result[keys[0]];
+      assert.ok(interp.ast);
+      assert.ok(interp.loc);
+      // The content should be cleared from the HTML
+      assert.ok(!result.html.includes('>name<'));
+    });
+
+    it('should handle lw with empty content', () => {
+      const result = parse('<span lw></span>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+    });
+
+    it('should handle lw with complex expressions', () => {
+      const result = parse('<span lw>1 + 2 + 3</span>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+
+      const interp = result[keys[0]];
+      assert.ok(interp.ast.length > 0);
+    });
+
+    it('should handle lw-on:click event binding', () => {
+      const result = parse('<button lw-on:click="handleClick()">Click</button>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+
+      const interp = result[keys[0]];
+      assert.equal(interp.lwType, 'lw-on');
+      assert.equal(interp.lwValue, 'click');
+    });
+
+    it('should handle lw-class binding', () => {
+      const result = parse('<div lw-class:active="isActive"></div>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+
+      const interp = result[keys[0]];
+      assert.equal(interp.lwType, 'lw-class');
+      assert.equal(interp.lwValue, 'active');
+    });
+
+    it('should handle lw-bind binding', () => {
+      const result = parse('<input lw-bind:value="name">');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+
+      const interp = result[keys[0]];
+      assert.equal(interp.lwType, 'lw-bind');
+      assert.equal(interp.lwValue, 'value');
+    });
+
+    it('should handle lw-bind:class with existing class attr', () => {
+      const result = parse('<div class="base" lw-bind:class="dynamicClass"></div>');
+      assert.ok(result.html.includes('lw-init-class'));
+    });
+
+    it('should handle lw-model binding', () => {
+      const result = parse('<input lw-model="username">');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+
+      // lw-model adds both lw-elem-bind and lw-elem
+      assert.ok(result.html.includes('lw-elem-bind'));
+      assert.ok(result.html.includes('lw-elem'));
+    });
+
+    it('should handle lw-for loop', () => {
+      const result = parse('<li lw-for="item in items">text</li>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+
+      const interp = result[keys[0]];
+      assert.equal(interp.itemExpr, 'item');
+      assert.equal(interp.itemsExpr, 'items');
+      assert.ok(interp.astItems);
+    });
+
+    it('should handle lw-for with index', () => {
+      const result = parse('<li lw-for="item, index in items">text</li>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      const interp = result[keys[0]];
+      assert.equal(interp.itemExpr, 'item');
+      assert.equal(interp.indexExpr, 'index');
+      assert.equal(interp.itemsExpr, 'items');
+    });
+
+    it('should handle lw-input binding', () => {
+      const result = parse('<input lw-input:change="onInputChange()">');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+
+      // lw-input adds lw-elem-bind
+      assert.ok(result.html.includes('lw-elem-bind'));
+    });
+
+    it('should handle multiple lw attributes on different elements', () => {
+      const result = parse('<div><span lw>a</span><span lw>b</span></div>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 2);
+    });
+
+    it('should handle nested elements with lw attributes', () => {
+      const result = parse('<div lw-on:click="handler()"><span lw>text</span></div>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 2);
+    });
+
+    it('should strip AST location info', () => {
+      const result = parse('<span lw>name</span>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      const interp = result[keys[0]];
+      const astStr = JSON.stringify(interp.ast);
+      // Should not contain loc, start, end from babel
+      assert.ok(!astStr.includes('"loc"'));
+      assert.ok(!astStr.includes('"start"'));
+      assert.ok(!astStr.includes('"end"'));
+    });
+
+    it('should handle generic lw- prefixed attributes', () => {
+      const result = parse('<div lw-if="visible"></div>');
+      const keys = Object.keys(result).filter(k => k !== 'html');
+      assert.equal(keys.length, 1);
+      assert.ok(result.html.includes('lw-elem'));
+    });
+  });
+});

package/test/utils.test.js

@@ -0,0 +1,94 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { getComponentName, getComponentPath, getPathLevels, throttle, portInUse } from '../commands/utils.js';
+
+describe('utils', () => {
+  describe('getComponentName', () => {
+    it('should return the component name after last slash', () => {
+      assert.equal(getComponentName('path/to/my-component'), 'my-component');
+    });
+
+    it('should return the full string when no slash', () => {
+      assert.equal(getComponentName('my-component'), 'my-component');
+    });
+
+    it('should handle multiple slashes', () => {
+      assert.equal(getComponentName('a/b/c/deep-component'), 'deep-component');
+    });
+
+    it('should handle trailing component after single slash', () => {
+      assert.equal(getComponentName('dir/comp'), 'comp');
+    });
+  });
+
+  describe('getComponentPath', () => {
+    it('should return the path before last slash', () => {
+      assert.equal(getComponentPath('path/to/my-component'), 'path/to');
+    });
+
+    it('should return empty string when no slash', () => {
+      assert.equal(getComponentPath('my-component'), '');
+    });
+
+    it('should handle single directory', () => {
+      assert.equal(getComponentPath('dir/comp'), 'dir');
+    });
+  });
+
+  describe('getPathLevels', () => {
+    it('should return empty string for file without directory', () => {
+      assert.equal(getPathLevels('file.html'), '');
+    });
+
+    it('should return ../ for one level deep', () => {
+      assert.equal(getPathLevels('dir/file.html'), '../');
+    });
+
+    it('should return ../../ for two levels deep', () => {
+      assert.equal(getPathLevels('a/b/file.html'), '../../');
+    });
+
+    it('should handle deeper paths', () => {
+      assert.equal(getPathLevels('a/b/c/file.html'), '../../../');
+    });
+  });
+
+  describe('throttle', () => {
+    it('should call function after delay', async () => {
+      let called = false;
+      const fn = throttle(() => { called = true; }, 50);
+      fn();
+      assert.equal(called, false); // not called immediately
+      await new Promise(r => setTimeout(r, 100));
+      assert.equal(called, true);
+    });
+
+    it('should not call function again within the limit', async () => {
+      let callCount = 0;
+      const fn = throttle(() => { callCount++; }, 50);
+      fn();
+      fn();
+      fn();
+      await new Promise(r => setTimeout(r, 100));
+      assert.equal(callCount, 1);
+    });
+
+    it('should allow call again after limit expires', async () => {
+      let callCount = 0;
+      const fn = throttle(() => { callCount++; }, 30);
+      fn();
+      await new Promise(r => setTimeout(r, 50));
+      assert.equal(callCount, 1);
+      fn();
+      await new Promise(r => setTimeout(r, 50));
+      assert.equal(callCount, 2);
+    });
+  });
+
+  describe('portInUse', () => {
+    it('should return false for an available port', async () => {
+      const result = await portInUse(0);
+      assert.equal(result, false);
+    });
+  });
+});