@webjsdev/server 0.8.31 → 0.8.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/server",
-  "version": "0.8.31",
+  "version": "0.8.32",
   "type": "module",
   "description": "webjs dev/prod server: SSR, router, API, server actions, live reload",
   "main": "index.js",

package/src/check.js

@@ -74,9 +74,14 @@ export const RULES = [
       'A custom-element tag name must be registered exactly once across the app. Two `Class.register(\'tag\')` / `customElements.define(\'tag\', …)` calls for the SAME tag resolve INCONSISTENTLY at runtime: SSR overwrites the registry (last registration wins) while the browser keeps the first native upgrade, so the rendered element and the webjs registry disagree. Rename one tag.',
   },
   {
-    name: 'reactive-props-use-declare',
+    name: 'no-static-properties',
     description:
-      'Reactive properties listed in `static properties = { … }` must be typed with `declare propName: Type` (no value), and have their default set in `constructor()`. Plain class-field initializers (`prop = value` or `prop: Type = value`) compile to Object.defineProperty *after* super() under modern class-field semantics, clobbering the framework\'s reactive accessor and silently breaking re-renders.',
+      'Reactive properties must be declared via the `extends WebComponent({ … })` factory, never a hand-written `static properties = { … }` field in the class body. The factory types each field for you (no `declare` needed) and the runtime throws on a direct `static properties`. Migrate `class X extends WebComponent { static properties = { count: { type: Number } } }` to `class X extends WebComponent({ count: Number })`; use the `prop()` helper for options (`prop(Number, { reflect: true })`) and set defaults via the `default` option or in the constructor.',
+  },
+  {
+    name: 'reactive-props-no-class-field',
+    description:
+      'A reactive property declared via the `extends WebComponent({ … })` factory must NOT also have a plain class-field initializer (`count = 0` or `count: number = 0`) in the class body. Under modern class-field semantics that initializer runs Object.defineProperty *after* super(), clobbering the framework\'s reactive accessor and silently breaking re-renders. Set the default via the `default` property option (`prop(Number, { default: 0 })`) or by assigning in the constructor after super().',
   },
   {
     name: 'shell-in-non-root-layout',
@@ -166,58 +171,6 @@ function isComponentFile(relPath) {
   return segments.includes('components');
 }
 
-/**
- * Find every `<key>:` entry inside the first `static properties = { … }`
- * literal in `classBody`. Returns the bare property names: the keys
- * we'll then look up as class fields.
- *
- * @param {string} classBody
- * @returns {Set<string>}
- */
-function extractStaticPropertyNames(classBody) {
-  /** @type {Set<string>} */
-  const names = new Set();
-  const m = /static\s+properties\s*=\s*\{/.exec(classBody);
-  if (!m) return names;
-  const objStart = m.index + m[0].length;
-  const objEnd = matchClosingBrace(classBody, objStart);
-  if (objEnd === -1) return names;
-  const obj = classBody.slice(objStart, objEnd);
-  // Match keys at the top level of the object literal. A nested `{ … }`
-  // (the per-property declaration) is skipped via brace counting.
-  let i = 0;
-  while (i < obj.length) {
-    // Skip whitespace and commas.
-    while (i < obj.length && /[\s,]/.test(obj[i])) i++;
-    if (i >= obj.length) break;
-    // Read the identifier or string-literal key.
-    let key = '';
-    if (obj[i] === '"' || obj[i] === "'") {
-      const quote = obj[i++];
-      while (i < obj.length && obj[i] !== quote) { key += obj[i++]; }
-      i++; // closing quote
-    } else {
-      while (i < obj.length && /[A-Za-z0-9_$]/.test(obj[i])) key += obj[i++];
-    }
-    // Skip whitespace, then expect `:`.
-    while (i < obj.length && /\s/.test(obj[i])) i++;
-    if (obj[i] !== ':') break;
-    i++;
-    // Skip whitespace, then skip the value (either a `{ … }` literal or
-    // a single token like `String`).
-    while (i < obj.length && /\s/.test(obj[i])) i++;
-    if (obj[i] === '{') {
-      const valEnd = matchClosingBrace(obj, i + 1);
-      if (valEnd === -1) break;
-      i = valEnd + 1;
-    } else {
-      while (i < obj.length && obj[i] !== ',' && obj[i] !== '}') i++;
-    }
-    if (key) names.add(key);
-  }
-  return names;
-}
-
 /**
  * Scan a class body for class-field initializers naming any of `props`.
  * "Class-field" means: at the top of the class body (brace depth 0
@@ -440,23 +393,47 @@ export async function checkConventions(appDir) {
     }
   }
 
-  // --- Rule: reactive-props-use-declare ---
+  // --- Rule: no-static-properties ---
+  // A hand-written `static properties = { … }` in a WebComponent class body is
+  // no longer supported: reactive properties are declared via the
+  // `extends WebComponent({ … })` factory (the runtime throws on a direct
+  // `static properties`). Flag it statically so the editor catches it before
+  // the page 500s.
   {
     for (const { rel, scan } of files) {
-      // Use redacted source so test-fixture-style strings like
-      // `class X extends WebComponent { x = 0 }` inside template
-      // literals don't trip the rule. Real declarations live at
+      // Use redacted source so fixture-style strings like
+      // `class X extends WebComponent { static properties = {…} }` inside
+      // template literals don't trip the rule. Real declarations live at
       // top-level code where the redactor leaves them alone.
       if (!/class\s+\w+\s+extends\s+WebComponent/.test(scan)) continue;
-      for (const body of extractWebComponentClassBodies(scan)) {
-        const propNames = extractStaticPropertyNames(body);
-        if (propNames.size === 0) continue;
-        for (const bad of findFieldInitializers(body, propNames)) {
+      for (const { body } of extractWebComponentClassBodies(scan)) {
+        if (!/static\s+properties\s*=\s*\{/.test(body)) continue;
+        violations.push({
+          rule: 'no-static-properties',
+          file: rel,
+          message:
+            '`static properties = { … }` is no longer supported; declare reactive properties via the `extends WebComponent({ … })` factory instead.',
+          fix: 'Move the properties into the factory call: `class X extends WebComponent({ count: Number })`. Use `prop(Number, { reflect: true })` for options and set defaults via the `default` option or the constructor. Delete the `static properties` block and any `declare` fields for those props.',
+        });
+      }
+    }
+  }
+
+  // --- Rule: reactive-props-no-class-field ---
+  // A reactive property declared via the factory must not also carry a plain
+  // class-field initializer: it runs Object.defineProperty after super() and
+  // clobbers the framework's reactive accessor (silent broken re-renders).
+  {
+    for (const { rel, scan } of files) {
+      if (!/class\s+\w+\s+extends\s+WebComponent/.test(scan)) continue;
+      for (const { body, factoryProps } of extractWebComponentClassBodies(scan)) {
+        if (factoryProps.size === 0) continue;
+        for (const bad of findFieldInitializers(body, factoryProps)) {
           violations.push({
-            rule: 'reactive-props-use-declare',
+            rule: 'reactive-props-no-class-field',
             file: rel,
             message: `Reactive prop \`${bad}\` uses a class-field initializer; this clobbers the framework's reactive accessor under modern class-field semantics.`,
-            fix: `Replace with \`declare ${bad}: <Type>;\` and set the default inside \`constructor()\` after \`super()\`.`,
+            fix: `Remove the class-field initializer and set the default via the \`default\` option (\`prop(<Type>, { default: <value> })\`) or by assigning \`this.${bad} = <value>\` inside \`constructor()\` after \`super()\`.`,
           });
         }
       }
@@ -473,7 +450,7 @@ export async function checkConventions(appDir) {
   {
     for (const { rel, scan } of files) {
       if (!/class\s+\w+\s+extends\s+WebComponent/.test(scan)) continue;
-      for (const body of extractWebComponentClassBodies(scan)) {
+      for (const { body } of extractWebComponentClassBodies(scan)) {
         for (const method of ['constructor', 'willUpdate', 'render']) {
           const code = methodBodyOf(body, method);
           if (!code) continue;
@@ -661,7 +638,7 @@ export async function checkConventions(appDir) {
         // modifiers immediately followed by an identifier inside the
         // constructor's parameter list.
         regex: /constructor[ \t]*\([^)]*\b(?:public|private|protected|readonly)[ \t]+\w+/,
-        fix: 'Replace `constructor(public x: number)` with `x: number; constructor(x: number) { this.x = x; }`. The reactive-props-use-declare rule has the framework-specific shape: `declare x: number;` (no value) plus the assignment in the constructor body.',
+        fix: 'Replace `constructor(public x: number)` with `x: number; constructor(x: number) { this.x = x; }`.',
       },
       {
         name: 'import = require',

package/src/component-elision.js

@@ -416,7 +416,7 @@ export function analyzeComponentSource(src) {
     return { interactive: true, reason: 'no parseable WebComponent class body' };
   }
 
-  for (const body of bodies) {
+  for (const { body, factoryArg } of bodies) {
     // Shadow DOM always ships (#474). Declarative Shadow DOM attaches ONLY
     // during HTML parsing; an elided component that arrives via a client DOM
     // insertion (a soft-nav swap, a streamed <webjs-suspense> boundary's
@@ -447,7 +447,7 @@ export function analyzeComponentSource(src) {
         return { interactive: true, reason: `calls '${call}'` };
       }
     }
-    if (hasNonStateReactiveProperty(body)) {
+    if (hasNonStateReactiveProperty(body) || hasNonStateFactoryProperty(factoryArg)) {
       return {
         interactive: true,
         reason: 'declares a reactive property that is not { state: true }',
@@ -571,6 +571,36 @@ function hasNonStateReactiveProperty(classBody) {
   return false;
 }
 
+/**
+ * True if the class factory argument declares any property that is NOT
+ * marked `{ state: true }`.
+ *
+ * @param {string} factoryArg
+ * @returns {boolean}
+ */
+function hasNonStateFactoryProperty(factoryArg) {
+  if (!factoryArg) return false;
+  const objStart = factoryArg.indexOf('{');
+  if (objStart === -1) return false;
+  const objEnd = matchClosingBrace(factoryArg, objStart);
+  if (objEnd === -1) return true;
+  const obj = factoryArg.slice(objStart + 1, objEnd);
+  if (/\.\.\./.test(obj)) return true; // spread
+  for (const entry of topLevelPropertyValues(obj)) {
+    if (entry.startsWith('{')) {
+      const code = entry
+        .replace(/'[^'\n]*'/g, "''")
+        .replace(/"[^"\n]*"/g, '""')
+        .replace(/`[^`]*`/g, '``');
+      if (!/\bstate\s*:\s*true\b/.test(code)) return true;
+    } else {
+      // Shorthand like `count: Number` rides an attribute, not state
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Yield the trimmed VALUE text of each top-level `key: value` entry in a
  * properties object body, splitting on depth-0 commas and respecting

package/src/js-scan.js

@@ -347,16 +347,127 @@ export function maskComments(src) {
  */
 export function extractWebComponentClassBodies(content) {
   const bodies = [];
-  const re = /class\s+\w+\s+extends\s+WebComponent\s*\{/g;
+  const re = /class\s+\w+\s+extends\s+WebComponent/g;
   let m;
   while ((m = re.exec(content)) !== null) {
-    const bodyStart = m.index + m[0].length;
-    const end = matchClosingBrace(content, bodyStart);
-    if (end !== -1) bodies.push(content.slice(bodyStart, end));
+    let i = m.index + m[0].length;
+    while (i < content.length && /\s/.test(content[i])) i++;
+    if (i >= content.length) continue;
+    
+    let factoryArg = '';
+    const factoryProps = new Set();
+    if (content[i] === '(') {
+      const closeParen = matchClosingParenthesis(content, i + 1);
+      if (closeParen === -1) continue;
+      factoryArg = content.slice(i + 1, closeParen);
+      
+      const objStart = factoryArg.indexOf('{');
+      if (objStart !== -1) {
+        const objEnd = matchClosingBrace(factoryArg, objStart + 1);
+        if (objEnd !== -1) {
+          const objContent = factoryArg.slice(objStart + 1, objEnd);
+          parsePropsFromObjectLiteral(objContent, factoryProps);
+        }
+      }
+      i = closeParen + 1;
+      while (i < content.length && /\s/.test(content[i])) i++;
+    }
+    if (content[i] === '{') {
+      const bodyStart = i + 1;
+      const end = matchClosingBrace(content, bodyStart);
+      if (end !== -1) {
+        bodies.push({
+          body: content.slice(bodyStart, end),
+          factoryProps,
+          factoryArg
+        });
+      }
+    }
   }
   return bodies;
 }
 
+/**
+ * Extract properties from an object literal block.
+ *
+ * @param {string} obj
+ * @param {Set<string>} names
+ */
+export function parsePropsFromObjectLiteral(obj, names) {
+  let i = 0;
+  while (i < obj.length) {
+    while (i < obj.length && /[\s,]/.test(obj[i])) i++;
+    if (i >= obj.length) break;
+    let key = '';
+    if (obj[i] === '"' || obj[i] === "'") {
+      const quote = obj[i++];
+      while (i < obj.length && obj[i] !== quote) { key += obj[i++]; }
+      i++; // closing quote
+    } else {
+      while (i < obj.length && /[A-Za-z0-9_$]/.test(obj[i])) key += obj[i++];
+    }
+    while (i < obj.length && /\s/.test(obj[i])) i++;
+    if (obj[i] !== ':') break;
+    i++;
+    while (i < obj.length && /\s/.test(obj[i])) i++;
+    if (obj[i] === '{') {
+      const valEnd = matchClosingBrace(obj, i + 1);
+      if (valEnd === -1) break;
+      i = valEnd + 1;
+    } else {
+      while (i < obj.length && obj[i] !== ',' && obj[i] !== '}') i++;
+    }
+    if (key) names.add(key);
+  }
+}
+
+
+/**
+ * Walk forward from `start` (just after an opening `(`) and return the
+ * index of the matching `)`. Tracks string/template-literal state so
+ * `)` inside strings or templates does not decrement depth.
+ * Returns -1 if no balanced parenthesis is found.
+ *
+ * @param {string} s
+ * @param {number} start
+ */
+export function matchClosingParenthesis(s, start) {
+  let depth = 1;
+  let i = start;
+  let str = ''; // '', "'", '"', or backtick
+  while (i < s.length) {
+    const c = s[i];
+    if (str) {
+      if (c === '\\') { i += 2; continue; }
+      if (c === str) str = '';
+      else if (str === '`' && c === '$' && s[i + 1] === '{') {
+        const closeBrace = matchClosingBrace(s, i + 2);
+        if (closeBrace === -1) return -1;
+        i = closeBrace + 1;
+        continue;
+      }
+      i++;
+      continue;
+    }
+    if (c === "'" || c === '"' || c === '`') { str = c; i++; continue; }
+    if (c === '/' && s[i + 1] === '/') { // line comment
+      while (i < s.length && s[i] !== '\n') i++;
+      continue;
+    }
+    if (c === '/' && s[i + 1] === '*') { // block comment
+      i += 2;
+      while (i < s.length && !(s[i] === '*' && s[i + 1] === '/')) i++;
+      i += 2;
+      continue;
+    }
+    if (c === '(') depth++;
+    else if (c === ')') { depth--; if (depth === 0) return i; }
+    i++;
+  }
+  return -1;
+}
+
+
 /**
  * Walk forward from `start` (just after an opening `{`) and return the
  * index of the matching `}`. Tracks string/template-literal state so