leanweb 3.0.8 → 3.10.0

package/commands/build.js

@@ -44,6 +44,13 @@ const buildModule = (projectPath) => {
     utils.writeIfChanged(`${utils.dirs.build}/${project.name}.js`, jsString);
   };
 
+  const buildGlobalStyles = () => {
+    const globalCssPath = `${utils.dirs.build}/global-styles.css`;
+    const globalCss = fs.existsSync(globalCssPath) ? fs.readFileSync(globalCssPath, 'utf8') : '';
+    const jsModule = `const sheet = new CSSStyleSheet();\nsheet.replaceSync(${JSON.stringify(globalCss)});\nexport default sheet;\n`;
+    utils.writeIfChanged(`${utils.dirs.build}/global-styles.js`, jsModule);
+  };
+
   const buildHTML = () => {
     try {
       project.components.forEach(cmp => {
@@ -53,7 +60,7 @@ const buildModule = (projectPath) => {
         if (htmlFileExists) {
           const cssFilename = `${utils.dirs.build}/components/${cmp}/${cmpName}.css`;
           const cssFileExists = fs.existsSync(cssFilename);
-          let cssString = `@import "global-styles.css";\n`;
+          let cssString = '';
           if (cssFileExists) {
             cssString += fs.readFileSync(cssFilename, 'utf8');
           }
@@ -82,6 +89,7 @@ const buildModule = (projectPath) => {
   copySrc();
   copyEnv();
   buildJS();
+  buildGlobalStyles();
   buildHTML();
 
   return project.name;

package/commands/dist.js

@@ -60,7 +60,6 @@ const appCSS = fs.readFileSync(`./${utils.dirs.build}/${project.name}.css`, 'utf
 fs.writeFileSync(`./${utils.dirs.dist}/${project.name}.css`, appCSS);
 
 fse.copySync(`./${utils.dirs.build}/favicon.svg`, `./${utils.dirs.dist}/favicon.svg`);
-fse.copySync(`./${utils.dirs.build}/global-styles.css`, `./${utils.dirs.dist}/global-styles.css`);
 project.resources?.forEach(resource => {
   const source = `./${utils.dirs.build}/${resource}`;
   if (fs.existsSync(source)) {

package/commands/init.js

@@ -23,7 +23,7 @@ import * as utils from './utils.js';
     return;
   }
 
-  const projectName = path.basename(path.resolve());
+  let projectName = path.basename(path.resolve());
 
   if (args.length >= 3) {
     projectName = args[2];

package/leanweb.js

@@ -42,7 +42,7 @@ import * as utils from './commands/utils.js';
     return;
   }
 
-  if (leanwebJSONExisted && target === 'version' || target === 'serve' || target === 'dist') {
+  if (leanwebJSONExisted && (target === 'version' || target === 'serve' || target === 'dist')) {
     const leanwebPackageJSON = require(`${__dirname}/package.json`);
     const projectLeanwebJSON = require(`${process.cwd()}/${utils.dirs.src}/leanweb.json`);
     const upgradeAvailable = semver.gt(leanwebPackageJSON.version, projectLeanwebJSON.version);

package/lib/lw-html-parser.js

@@ -6,7 +6,7 @@ let astKey = 0;
 const removeASTLocation = ast => {
   if (Array.isArray(ast)) {
     ast.forEach(a => removeASTLocation(a));
-  } else if (typeof ast === 'object') {
+  } else if (ast !== null && typeof ast === 'object') {
     delete ast['loc'];
     delete ast['start'];
     delete ast['end'];
@@ -77,7 +77,7 @@ const walkNode = (node, interpolation) => {
 
       if (attr.name === 'lw-bind:class') {
         const classAttr = node.attrs.find(a => a.name === 'class');
-        node.attrs.push({ name: 'lw-init-class', value: classAttr.value });
+        node.attrs.push({ name: 'lw-init-class', value: classAttr?.value ?? '' });
       }
 
       const ast = getAST(attr.value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leanweb",
-  "version": "3.0.8",
+  "version": "3.10.0",
   "description": "Builds framework agnostic web components.",
   "bin": {
     "leanweb": "leanweb.js",
@@ -20,15 +20,15 @@
   "author": "Qian Chen",
   "license": "MIT",
   "dependencies": {
-    "@babel/parser": "^7.28.4",
-    "esbuild": "^0.25.9",
-    "fs-extra": "^11.3.1",
-    "globby": "^14.1.0",
+    "@babel/parser": "^7.29.0",
+    "esbuild": "^0.27.3",
+    "fs-extra": "^11.3.4",
+    "globby": "^16.1.1",
     "html-minifier": "^4.0.0",
-    "isomorphic-git": "^1.33.1",
+    "isomorphic-git": "^1.37.2",
     "live-server": "^1.2.2",
     "node-watch": "^0.7.4",
     "parse5": "^8.0.0",
-    "semver": "^7.7.2"
+    "semver": "^7.7.4"
   }
 }

package/templates/lib/lw-element.js

@@ -1,5 +1,6 @@
 import * as parser from './lw-expr-parser.js';
 import LWEventBus from './lw-event-bus.js';
+import globalStyleSheet from '../global-styles.js';
 
 globalThis.leanweb = globalThis.leanweb ?? {
   componentsListeningOnUrlChanges: [],
@@ -106,8 +107,11 @@ export default class LWElement extends HTMLElement {
     leanweb.builderVersion = ast.builderVersion;
 
     const node = document.createElement('template');
-    node.innerHTML = `<style>${ast.css}</style>${ast.html}`;
+    const componentSheet = new CSSStyleSheet();
+    componentSheet.replaceSync(ast.css);
+    node.innerHTML = ast.html;
     this.attachShadow({ mode: 'open' }).appendChild(node.content);
+    this.shadowRoot.adoptedStyleSheets = [globalStyleSheet, componentSheet];
 
     this._bindMethods();
     setTimeout(() => {
@@ -322,7 +326,7 @@ export default class LWElement extends HTMLElement {
   }
 
   updateModel(modelNode) {
-    if (modelNode.do_not_update && modelNode.type === 'number') {
+    if (modelNode.do_not_update && (modelNode.type === 'number' || modelNode.type === 'range')) {
       return;
     }
     const key = modelNode.getAttribute('lw-model');
@@ -388,7 +392,7 @@ export default class LWElement extends HTMLElement {
     const parsed = parser.evaluate(interpolation.ast, context, interpolation.loc);
 
     const hasLwFalse = ifNode.hasAttribute('lw-false');
-    if (parsed[0] !== false && parsed[0] !== undefined && parsed[0] !== null) {
+    if (parsed[0]) {
       hasLwFalse && ifNode.removeAttribute('lw-false');
       setTimeout(() => {
         ifNode.turnedOn?.call(ifNode);
@@ -438,12 +442,17 @@ export default class LWElement extends HTMLElement {
               if (cls) bindNode.classList.add(cls);
             });
           }
-          // Add or remove the dynamic class
+          // Remove previously applied dynamic class
+          const prevClass = bindNode['lw-prev-class-' + attrValue];
+          if (prevClass && prevClass !== dynamicClass) {
+            bindNode.classList.remove(prevClass);
+          }
+          // Add or record the dynamic class
           if (dynamicClass) {
             bindNode.classList.add(dynamicClass);
-          } else if (dynamicClass !== undefined) {
-            // Only remove if not undefined (so we don't remove all classes accidentally)
-            bindNode.classList.remove(dynamicClass);
+            bindNode['lw-prev-class-' + attrValue] = dynamicClass;
+          } else {
+            bindNode['lw-prev-class-' + attrValue] = null;
           }
         } else {
           if (parsed[0] !== false && parsed[0] !== undefined && parsed[0] !== null) {

package/templates/lib/lw-expr-parser.js

@@ -43,11 +43,6 @@ const assignmentOperations = {
   '^=': (c, a, b) => { c[a] ^= b; },
 };
 
-const logicalOperators = {
-  '||': (a, b) => a || b,
-  '&&': (a, b) => a && b,
-  '??': (a, b) => a ?? b,
-};
 
 const unaryOperators = {
   '-': a => -a,
@@ -110,7 +105,12 @@ const nodeHandlers = {
     }
     assignmentOperations[node.operator](obj, prop, evalNode(node.right, context));
   },
-  'LogicalExpression': (node, context) => logicalOperators[node.operator](evalNode(node.left, context), evalNode(node.right, context)),
+  'LogicalExpression': (node, context) => {
+    const left = evalNode(node.left, context);
+    if (node.operator === '&&') return left ? evalNode(node.right, context) : left;
+    if (node.operator === '||') return left ? left : evalNode(node.right, context);
+    if (node.operator === '??') return left ?? evalNode(node.right, context);
+  },
   'UnaryExpression': (node, context) => unaryOperators[node.operator](evalNode(node.argument, context)),
   'UpdateExpression': (node, context) => {
     // Support complex left-hand sides (e.g., ++obj.prop, ++obj[expr])
@@ -128,9 +128,7 @@ const nodeHandlers = {
   },
   'ConditionalExpression': (node, context) => {
     const test = evalNode(node.test, context);
-    const consequent = evalNode(node.consequent, context);
-    const alternate = evalNode(node.alternate, context);
-    return test ? consequent : alternate;
+    return test ? evalNode(node.consequent, context) : evalNode(node.alternate, context);
   },
   'MemberExpression': (node, context) => {
     const object = evalNode(node.object, context);
@@ -164,7 +162,7 @@ const nodeHandlers = {
     return arr;
   },
   'ObjectExpression': (node, context) => node.properties.reduce((acc, prop) => ({ ...acc, ...evalNode(prop, context) }), {}),
-  'ObjectProperty': (node, context) => ({ [evalNode(node.key, context)]: evalNode(node.value, context) }),
+  'ObjectProperty': (node, context) => ({ [node.computed ? evalNode(node.key, context) : (node.key.name ?? node.key.value)]: evalNode(node.value, context) }),
   'SpreadElement': (node, context) => evalNode(node.argument, context),
 
   'Identifier': (node, context) => {
@@ -181,7 +179,18 @@ const nodeHandlers = {
 
   'CallExpression': (node, context) => callFunction(node, context),
   'OptionalCallExpression': (node, context) => callFunction(node, context),
-  'NewExpression': (node, context) => callFunction(node, context),
+  'NewExpression': (node, context) => {
+    const callee = evalNode(node.callee, context);
+    const args = [];
+    node.arguments.map(argument => {
+      if (argument.type === 'SpreadElement') {
+        args.push(...evalNode(argument, context));
+      } else {
+        args.push(evalNode(argument, context));
+      }
+    });
+    return new callee(...args);
+  },
 
   'Directive': (node, context) => evalNode(node.value, context),
   'DirectiveLiteral': (node, context) => node.value,