Skip to content

fix: false positives in component scanner and elision analyzer due to string/template literals in code samples #634

@vivek7405

Description

@vivek7405

Description

The component scanner and component elision analyzer currently suffer from false positives when analyzing modules that contain code samples (e.g. landing pages or documentation pages). This prevents page/layout modules from being elided even when they are completely inert.

Root Causes

  1. Component Scanner matches Code Snippets:
    The component scanner (scanComponents) runs extractComponents on raw source without comment or string masking. It detects component registration calls like ClassName.register('tag-name') or customElements.define('tag-name', ClassName) inside string/template literals used for code examples. Consequently:

    • The route module is incorrectly identified as a component file.
    • During elision analysis, the module is run through analyzeComponentSource. Since there are 0 real WebComponent class bodies declared in actual code (they are redacted/ignored by the body parser), the analyzer conservatively marks the module as interactive/must-ship, which prevents elision.
  2. Elision Scanners match inside String/Template Literals:

    • importsReactivePrimitive is run on comment-masked source where string/template literal contents are not redacted. As a result, code samples that demo reactive imports (e.g. import { signal } from '@webjsdev/core') are matched, falsely flagging the page module as importing reactive primitives.
    • EVENT_BINDING_RE and CLIENT_GLOBAL_RE checks can match inside plain string/template literal code samples (e.g. @click=${...}) because redactStringsAndTemplates preserves plain single-line string/template literals verbatim.

Proposed Fix

Introduce a token-based placeholder replacement helper in js-scan.js (e.g., redactToPlaceholders(src)) that masks all comments with spaces and replaces all single/double-quoted string and template literal bodies with unique placeholders like __STR_${index}__ (preserving quotes/delimiters).

Modify:

  1. extractComponents to run on the redacted code, and when a registration pattern matches a placeholder, look up the original string content to extract the correct tag name.
  2. component-elision.js scanners (such as importsReactivePrimitive, importsClientRouter, hasModuleScopeSideEffect) to run on placeholder-redacted source to prevent false matches inside literal code samples.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type
No fields configured for issues without a type.

Projects

Status
In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions