@webjsdev/server 0.8.2 → 0.8.4

package/package.json

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

package/src/check.js

@@ -957,6 +957,17 @@ export async function checkConventions(appDir, opts) {
     const hasGitignore = await pathExists(join(appDir, '.gitignore'));
     if (hasGit && hasGitignore) {
       const { spawnSync } = await import('node:child_process');
+      // Strip inherited git env vars so `cwd` is the sole authority on
+      // which repo `git check-ignore` consults. Git exports GIT_DIR /
+      // GIT_WORK_TREE / GIT_INDEX_FILE / GIT_PREFIX into hook processes
+      // (notably a pre-commit hook run from a linked worktree exports
+      // GIT_WORK_TREE), and those OVERRIDE cwd-based discovery, so
+      // without this the probe would consult the outer repo instead of
+      // `appDir`. See the gitignore-vendor-not-ignored regression test.
+      const {
+        GIT_DIR: _gd, GIT_WORK_TREE: _gwt, GIT_INDEX_FILE: _gif, GIT_PREFIX: _gp,
+        ...gitEnv
+      } = process.env;
       // Check two representative paths: the pin manifest AND a sample
       // downloaded bundle. A `.gitignore` that allows the manifest
       // but blocks bundles (e.g. `*.js` higher up) would still break
@@ -970,6 +981,7 @@ export async function checkConventions(appDir, opts) {
         const result = spawnSync('git', ['check-ignore', '-q', probe], {
           cwd: appDir,
           stdio: 'pipe',
+          env: gitEnv,
         });
         if (result.status === 0) {
           violations.push({

package/src/component-elision.js

@@ -132,6 +132,21 @@ const CLIENT_ROUTER_IMPORTS = ['navigate', 'enableClientRouter', 'disableClientR
 
 /** Identifiers that only exist in a browser; their presence means client work. */
 const CLIENT_GLOBAL_RE = /\b(?:window|document|navigator|localStorage|sessionStorage|customElements|matchMedia|addEventListener)\b/;
+
+/**
+ * Cross-module observation of a component's registration. A module that
+ * observes another component's tag forces that component to register on the
+ * client, so the observed component cannot be elided even when its own render
+ * is display-only (eliding it drops its `customElements.define`, after which
+ * the observation silently fails). These scan for the three statically visible
+ * forms; the captured group is the observed tag (or class) name.
+ * - `customElements.whenDefined('my-tag')` / `whenDefined("my-tag")`
+ * - a CSS `my-tag:defined { … }` selector
+ * - `x instanceof MyClass` (mapped back to a tag via the component's className)
+ */
+const WHEN_DEFINED_RE = /\bwhenDefined\s*\(\s*['"`]([a-z][a-z0-9]*-[a-z0-9-]*)['"`]/g;
+const TAG_DEFINED_RE = /\b([a-z][a-z0-9]*-[a-z0-9-]*):defined\b/g;
+const INSTANCEOF_RE = /\binstanceof\s+([A-Z][A-Za-z0-9_$]*)/g;
 /** Same, for component source, minus `customElements` (the registration call
  * `customElements.define(...)` legitimately uses it and must not force ship). */
 const COMPONENT_CLIENT_GLOBAL_RE = /\b(?:window|document|navigator|localStorage|sessionStorage|matchMedia|addEventListener)\b/;
@@ -598,9 +613,12 @@ export async function analyzeElision(components, routeModules, moduleGraph, read
   const componentFiles = new Set();
   /** @type {Map<string, string>} */
   const tagToFile = new Map();
+  /** @type {Map<string, string>} className -> file, for instanceof observation */
+  const classToFile = new Map();
   for (const c of components) {
     componentFiles.add(c.file);
     tagToFile.set(c.tag, c.file);
+    if (c.className) classToFile.set(c.className, c.file);
   }
 
   /** @type {Set<string>} */
@@ -615,6 +633,9 @@ export async function analyzeElision(components, routeModules, moduleGraph, read
   const clientGlobalOrBareFiles = new Set();
   /** @type {Set<string>} */
   const serverFiles = new Set();
+  /** @type {Set<string>} component files forced to ship because some module
+   * observes their registration (whenDefined / :defined / instanceof). */
+  const observedComponentFiles = new Set();
 
   /** @type {Set<string>} */
   const allFiles = new Set(componentFiles);
@@ -646,8 +667,29 @@ export async function analyzeElision(components, routeModules, moduleGraph, read
     if (componentFiles.has(file) && analyzeComponentSource(src).interactive) {
       mustShip.add(file);
     }
+    // Cross-module registration observation (#169): if THIS module observes
+    // another component's tag, that component must register client-side, so
+    // it cannot be elided. Map each observed tag/class back to its component
+    // file. Resolution against tagToFile / classToFile happens after the loop
+    // (all components are known up front, but we collect here while we hold
+    // each source). Verdict-safe: only ever forces MORE components to ship.
+    for (const m of src.matchAll(WHEN_DEFINED_RE)) {
+      const f = tagToFile.get(m[1]); if (f) observedComponentFiles.add(f);
+    }
+    for (const m of src.matchAll(TAG_DEFINED_RE)) {
+      const f = tagToFile.get(m[1]); if (f) observedComponentFiles.add(f);
+    }
+    for (const m of src.matchAll(INSTANCEOF_RE)) {
+      const f = classToFile.get(m[1]); if (f) observedComponentFiles.add(f);
+    }
   }
 
+  // Force every observed component to ship before the fixpoint runs, so the
+  // render/import rules propagate from it too. Dynamic tag strings and external
+  // (non graph-reachable) stylesheets remain an author-facing caveat, since
+  // static analysis cannot see them.
+  for (const f of observedComponentFiles) mustShip.add(f);
+
   // Reverse import edges (who imports each file), built once from the graph.
   // Drives both the closure-client-work reachability below and the fixpoint's
   // import rule, each in O(N+E) rather than a per-component closure walk.

package/src/module-graph.js

@@ -14,6 +14,7 @@
 import { readFile, readdir, stat } from 'node:fs/promises';
 import { existsSync } from 'node:fs';
 import { join, resolve, dirname, extname, sep } from 'node:path';
+import { redactStringsAndTemplates } from './js-scan.js';
 
 /** @type {RegExp} match static `import … from '…'` and `import '…'` */
 const IMPORT_RE = /\bimport\s+(?:(?:[\w*{}\s,]+)\s+from\s+)?['"]([^'"]+)['"]/g;
@@ -104,6 +105,17 @@ export function transitiveDeps(graph, entryFiles, appDir, skip) {
       if (dep.startsWith(appDir)) {
         result.push(dep);
       }
+      // Stop at server-file boundaries, exactly like reachableFromEntries
+      // (the authorization gate). The browser fetches a `.server.*` URL as
+      // an RPC or throw-at-load stub, never its source, so the server
+      // file's own imports are never fetched. Following them would emit
+      // modulepreload hints for server-only modules that the gate then
+      // 404s (a preload set wider than the servable set). The `.server.*`
+      // file itself stays in the result; the preload emitter filters it via
+      // the server-file index. A file imported through BOTH a server file
+      // and a real client path is still reached via the client path, so it
+      // is not wrongly dropped.
+      if (SERVER_FILE_RE.test(dep)) continue;
       queue.push(dep);
     }
   }
@@ -247,9 +259,23 @@ async function parseFile(file, appDir, graph, seen) {
   try { src = await readFile(file, 'utf8'); }
   catch { return; }
 
+  // Mask of `src` with all string / template-literal / comment / regex
+  // CONTENT blanked to spaces (positions preserved). Used to reject an
+  // `import '…'` / `export … from '…'` that appears as TEXT inside a
+  // template literal (e.g. example code shown in a `<pre>` inside an
+  // `html\`\`` template, as the docs site does) rather than as a real
+  // statement. We still read the specifier from the RAW `src` (the
+  // specifier is itself a string, blanked in the mask), and only consult
+  // the mask to confirm the `import` / `export` KEYWORD survived
+  // redaction, i.e. sits in code position and not inside a literal.
+  const masked = redactStringsAndTemplates(src);
   const deps = new Set();
   for (const re of [IMPORT_RE, EXPORT_FROM_RE]) {
     for (const m of src.matchAll(re)) {
+      // m.index is the keyword start (`\bimport` / `\bexport`). If that
+      // position is blanked in the mask, the match lives inside a literal
+      // and is not a real import edge.
+      if (masked[m.index] === ' ') continue;
       const spec = m[1];
       // Only resolve relative imports within the project.
       if (!spec.startsWith('.') && !spec.startsWith('/')) continue;