@webjsdev/server 0.8.18 → 0.8.20

package/package.json

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

package/src/check.js

@@ -63,6 +63,11 @@ export const RULES = [
     description:
       'Static tag = \'...\' in component files must contain a hyphen (HTML custom element spec).',
   },
+  {
+    name: 'no-duplicate-tag',
+    description:
+      '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',
     description:
@@ -751,6 +756,62 @@ export async function checkConventions(appDir) {
     }
   }
 
+  // --- Rule: no-duplicate-tag ---
+  // Two registrations of the SAME tag string anywhere in the app resolve
+  // inconsistently at runtime (SSR last-wins, browser first-wins), so flag
+  // every colliding site naming the others. Scans EVERY source file, not just
+  // components/, because a duplicate is a runtime hazard regardless of where
+  // the register/define call lives (a page, a lib, a module can register a
+  // tag too); this keeps the rule in lockstep with the editor's 9004
+  // diagnostic, which is likewise project-wide. Reuses the same
+  // register/define extraction as tag-name-has-hyphen, over the redacted
+  // source so a tag in a docs-page tagged-template example does not count.
+  // Only hyphenated tags are considered (a non-hyphenated tag is already
+  // flagged by tag-name-has-hyphen / invariant 3), matching the 9004 filter.
+  {
+    // Generated / gitignored files (e.g. a `webjs ui add`-regenerated
+    // `components/` dir) are not committed source the rule should police;
+    // counting them would flag a collision between a hand-written component
+    // and its generated copy. Skip anything git reports as ignored.
+    // Best-effort: a non-git project (or absent git) scans everything.
+    const ignored = await gitIgnoredSet(appDir, files.map((f) => f.rel));
+    /** @type {Map<string, string[]>} tag -> rel files that register it (with repeats) */
+    const tagSites = new Map();
+    const patterns = [
+      /\b[A-Z][A-Za-z0-9_$]*\.register\s*\(\s*(['"`])([^'"`]+)\1/g,
+      /\bcustomElements\.define\s*\(\s*(['"`])([^'"`]+)\1/g,
+    ];
+    for (const { scan, rel } of files) {
+      if (ignored.has(rel)) continue;
+      for (const re of patterns) {
+        let match;
+        while ((match = re.exec(scan)) !== null) {
+          const tagName = match[2];
+          if (!tagName.includes('-')) continue;
+          const arr = tagSites.get(tagName) || [];
+          arr.push(rel);
+          tagSites.set(tagName, arr);
+        }
+      }
+    }
+    for (const [tagName, sites] of tagSites) {
+      if (sites.length < 2) continue;
+      // Report once per DISTINCT file, naming the others.
+      for (const file of new Set(sites)) {
+        const others = [...new Set(sites)].filter((f) => f !== file);
+        const where = others.length
+          ? `also registered in ${others.join(', ')}`
+          : 'registered more than once in this file';
+        violations.push({
+          rule: 'no-duplicate-tag',
+          file,
+          message: `Custom element tag "${tagName}" is registered more than once (${where}). A tag must be registered exactly once; the runtime resolves a duplicate inconsistently (SSR keeps the last registration, the browser keeps the first).`,
+          fix: `Rename one registration so each "${tagName}" is unique, e.g. "${tagName}-2".`,
+        });
+      }
+    }
+  }
+
   // --- Rule: gitignore-vendor-not-ignored ---
   // The .gitignore pattern for .webjs/vendor/ is subtle: `.webjs/`
   // alone excludes the directory entirely and git can't re-include
@@ -836,3 +897,49 @@ async function pathExists(p) {
     return false;
   }
 }
+
+/**
+ * The subset of `rels` (appDir-relative paths) that git reports as ignored,
+ * via a single batched `git check-ignore --stdin`. Best-effort: returns an
+ * empty Set when the directory is not a git repo, git is absent, or the
+ * spawn fails, so a non-git project scans every file as before. Runs with
+ * `cwd: appDir` and the inherited GIT_* env stripped so cwd is the sole
+ * authority on which repo + .gitignore stack is consulted (a pre-commit
+ * hook from a linked worktree exports GIT_WORK_TREE, which would otherwise
+ * override cwd-based discovery; same reason as gitignore-vendor-not-ignored).
+ * Works for an in-repo sub-package with no nested `.git` too: git walks up
+ * to the monorepo root and resolves the relative paths against cwd.
+ *
+ * @param {string} appDir absolute app directory
+ * @param {string[]} rels appDir-relative file paths
+ * @returns {Promise<Set<string>>}
+ */
+async function gitIgnoredSet(appDir, rels) {
+  /** @type {Set<string>} */
+  const out = new Set();
+  if (!rels.length) return out;
+  try {
+    const { spawnSync } = await import('node:child_process');
+    const {
+      GIT_DIR: _gd, GIT_WORK_TREE: _gwt, GIT_INDEX_FILE: _gif, GIT_PREFIX: _gp,
+      ...gitEnv
+    } = process.env;
+    // `git check-ignore --stdin` exits 0 when ≥1 path is ignored (those
+    // paths are echoed on stdout), 1 when none are ignored, >1 on error.
+    const res = spawnSync('git', ['check-ignore', '--stdin'], {
+      cwd: appDir,
+      input: rels.join('\n'),
+      encoding: 'utf8',
+      env: gitEnv,
+    });
+    if (res.status === 0 && typeof res.stdout === 'string') {
+      for (const line of res.stdout.split('\n')) {
+        const p = line.trim();
+        if (p) out.add(p);
+      }
+    }
+  } catch {
+    // git missing or spawn failure: scan everything (no filter).
+  }
+  return out;
+}

package/src/ssr.js

@@ -586,16 +586,9 @@ async function collectMetadata(route, ctx, dev) {
  * @returns {{ head: string, body: string }}
  */
 function hoistHeadTags(headHtml, bodyHtml) {
-  const hoisted = [];
-  // <script>…</script> and <style>…</style> are paired; <link …> is void.
-  const re = /^\s*(<script[\s>][\s\S]*?<\/script>|<style[\s>][\s\S]*?<\/style>|<link\b[^>]*>)/i;
-
-  let remaining = bodyHtml;
-  let m;
-  while ((m = re.exec(remaining)) !== null) {
-    hoisted.push(m[1]);
-    remaining = remaining.slice(m[0].length);
-  }
+  // Shares the leading-run scanner (comment-skipping included) with the
+  // streaming path so both hoist identically. See collectHoistedHeadTags.
+  const { tags: hoisted, body: remaining } = collectHoistedHeadTags(bodyHtml);
   if (!hoisted.length) return { head: headHtml, body: bodyHtml };
   const newHead = headHtml.replace('</head>', hoisted.join('\n') + '\n</head>');
   return { head: newHead, body: remaining };
@@ -744,14 +737,33 @@ function wrapInDocument(body, opts) {
  */
 function collectHoistedHeadTags(bodyHtml) {
   const tags = [];
-  const re = /^\s*(<script[\s>][\s\S]*?<\/script>|<style[\s>][\s\S]*?<\/style>|<link\b[^>]*>)/i;
+  // <script>…</script> and <style>…</style> are paired; <link …> is void.
+  // A plain HTML comment (<!-- … -->) is consumed but NOT hoisted, so a
+  // comment interleaved with head-bound tags (e.g. "<!-- Self-hosted fonts -->"
+  // between a favicon <link> and the stylesheet <link>) does not terminate
+  // the leading run and strand the stylesheet in <body>, which caused FOUC
+  // because a <link rel="stylesheet"> in <body> is not reliably
+  // render-blocking (#406). The `(?!/?wj:)` guard exempts client-router
+  // markers (<!--wj:children:…-->, <!--/wj:children-->) so a layout that
+  // renders children directly after its head tags still terminates the run
+  // there rather than swallowing the nesting marker.
+  const re =
+    /^\s*(<!--(?!\/?wj:)[\s\S]*?-->|<script[\s>][\s\S]*?<\/script>|<style[\s>][\s\S]*?<\/style>|<link\b[^>]*>)/i;
   let remaining = bodyHtml;
+  // `body` only advances to just-past the LAST hoisted head tag. Comments
+  // are scanned through (so they don't terminate the run) but a comment that
+  // trails the final head tag stays in the body rather than being dropped.
+  let body = bodyHtml;
   let m;
   while ((m = re.exec(remaining)) !== null) {
-    tags.push(m[1]);
+    const token = m[1];
     remaining = remaining.slice(m[0].length);
+    if (!token.startsWith('<!--')) {
+      tags.push(token);
+      body = remaining;
+    }
   }
-  return { tags, body: remaining };
+  return { tags, body };
 }
 
 /**