fix: ignore WRN component examples in import validation

bun.lock

@@ -268,7 +268,7 @@
     },
     "packages/cli": {
       "name": "@wrnexus/cli",
-      "version": "0.8.18",
+      "version": "0.8.19",
       "bin": {
         "wrnexus": "src/index.ts",
       },
@@ -332,7 +332,7 @@
     },
     "packages/dev-server": {
       "name": "@wrnexus/dev-server",
-      "version": "0.8.17",
+      "version": "0.8.18",
       "dependencies": {
         "@wrnexus/authz": "workspace:*",
         "@wrnexus/cache": "workspace:*",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.8.18",
+  "version": "0.8.19",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.8.17",
+  "version": "0.8.18",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/dev-server/src/pipeline.ts

@@ -21,6 +21,7 @@ import {
   generateTargets,
   resolveWrnImports,
   type PageAst,
+  type ViewNode,
 } from "@wrnexus/compiler";
 import type { Context, Middleware } from "@wrnexus/core";
 
@@ -342,14 +343,27 @@ function importedValueBindings(ast: PageAst): Set<string> {
   return names;
 }
 
-function validateConfiguredImports(source: string, ast: PageAst, file: string): void {
+function viewComponentNames(nodes: ViewNode[], names = new Set<string>()): Set<string> {
+  for (const node of nodes) {
+    if (node.type === "element") {
+      if (/^[A-Z]/.test(node.tag)) names.add(node.tag);
+      viewComponentNames(node.children, names);
+    } else if (node.type === "each") {
+      viewComponentNames(node.body, names);
+      viewComponentNames(node.empty, names);
+    } else if (node.type === "if") {
+      for (const branch of node.branches) viewComponentNames(branch.body, names);
+    }
+  }
+  return names;
+}
+
+function validateConfiguredImports(_source: string, ast: PageAst, file: string): void {
   const root = projectRootForFile(file);
   const options = compileImportOptions.get(resolve(root));
   if (!options || options.mode === "legacy") return;
   const imported = importedValueBindings(ast);
-  const usedComponents = new Set(
-    Array.from(source.matchAll(/<([A-Z][A-Za-z0-9_$]*)\b/g), (match) => match[1]!),
-  );
+  const usedComponents = viewComponentNames(ast.view);
   const compilerBuiltins = new Set([
     "Async",
     "Component",

packages/dev-server/test/import-modes-v060.test.ts

@@ -70,3 +70,14 @@ test("compiler-native reactive elements do not require application imports", ()
   setCompileImportOptions(root, { mode: "explicit" });
   expect(() => compileWrnArtifacts(page, 5)).not.toThrow();
 });
+
+test("component examples in comments do not require imports", () => {
+  const { root, page } = fixture();
+  writeFileSync(
+    page,
+    `// Usage: <Home title="Example" />
+page Home { view { <main>Home</main> } }`,
+  );
+  setCompileImportOptions(root, { mode: "explicit" });
+  expect(() => compileWrnArtifacts(page, 6)).not.toThrow();
+});