@dcoder-x/plugin-shared 0.1.11 → 0.1.13

package/dist/extractors/ComponentExtractor.js

@@ -19,13 +19,39 @@ class ComponentExtractor {
     }
     async extract() {
         const elements = [];
+        // Build a direct filePath → route.path index so that files which are
+        // themselves route entries get their own route, not whichever layout or
+        // parent route happened to import them first.
+        const fileRouteIndex = new Map();
         for (const route of this.routes) {
-            const moduleFiles = this.getModuleFilesForRoute(route.filePath);
+            fileRouteIndex.set(route.filePath, route.path);
+            fileRouteIndex.set(route.filePath.replace(/\\/g, '/'), route.path);
+        }
+        // Stop the module walk at other route entry files — they will be
+        // processed in their own iteration with the correct route assigned.
+        const allRouteFiles = new Set();
+        for (const route of this.routes) {
+            allRouteFiles.add(route.filePath);
+            allRouteFiles.add(route.filePath.replace(/\\/g, '/'));
+        }
+        const seen = new Set(); // deduplicate across routes
+        for (const route of this.routes) {
+            // The stop boundary excludes the current entry file itself (we need to visit it).
+            const stopAt = new Set([...allRouteFiles].filter((f) => f !== route.filePath && f !== route.filePath.replace(/\\/g, '/')));
+            const moduleFiles = this.getModuleFilesForRoute(route.filePath, stopAt);
             for (const filePath of moduleFiles) {
+                if (seen.has(filePath))
+                    continue;
+                seen.add(filePath);
                 const source = this.readSource(filePath);
                 if (!source)
                     continue;
-                elements.push(...this.extractFromSource(source, filePath, route.path));
+                // Prefer the route this file is directly registered as; fall back to
+                // the route whose module graph we're walking (the layout/parent route).
+                const assignedRoute = fileRouteIndex.get(filePath) ??
+                    fileRouteIndex.get(filePath.replace(/\\/g, '/')) ??
+                    route.path;
+                elements.push(...this.extractFromSource(source, filePath, assignedRoute));
             }
         }
         return elements;
@@ -38,12 +64,30 @@ class ComponentExtractor {
         const components = [];
         const contextResolver = new ComponentContextResolver_1.ComponentContextResolver();
         const graphExtractor = new InteractionGraphExtractor_1.InteractionGraphExtractor();
+        const fileRouteIndex = new Map();
+        for (const route of this.routes) {
+            fileRouteIndex.set(route.filePath, route.path);
+            fileRouteIndex.set(route.filePath.replace(/\\/g, '/'), route.path);
+        }
+        const allRouteFiles = new Set();
+        for (const route of this.routes) {
+            allRouteFiles.add(route.filePath);
+            allRouteFiles.add(route.filePath.replace(/\\/g, '/'));
+        }
+        const seen = new Set();
         for (const route of this.routes) {
-            const moduleFiles = this.getModuleFilesForRoute(route.filePath);
+            const stopAt = new Set([...allRouteFiles].filter((f) => f !== route.filePath && f !== route.filePath.replace(/\\/g, '/')));
+            const moduleFiles = this.getModuleFilesForRoute(route.filePath, stopAt);
             for (const filePath of moduleFiles) {
+                if (seen.has(filePath))
+                    continue;
+                seen.add(filePath);
                 const source = this.readSource(filePath);
                 if (!source)
                     continue;
+                const assignedRoute = fileRouteIndex.get(filePath) ??
+                    fileRouteIndex.get(filePath.replace(/\\/g, '/')) ??
+                    route.path;
                 let ast;
                 try {
                     ast = (0, parser_1.parse)(source, { sourceType: 'module', plugins: ['typescript', 'jsx'] });
@@ -61,7 +105,7 @@ class ComponentExtractor {
                             components.push({
                                 name: componentName,
                                 filePath,
-                                route: route.path,
+                                route: assignedRoute,
                                 stateVariables: context.stateVariables,
                                 interactions,
                             });
@@ -79,7 +123,7 @@ class ComponentExtractor {
                             components.push({
                                 name: componentName,
                                 filePath,
-                                route: route.path,
+                                route: assignedRoute,
                                 stateVariables: context.stateVariables,
                                 interactions,
                             });
@@ -90,15 +134,13 @@ class ComponentExtractor {
         }
         return components;
     }
-    getModuleFilesForRoute(entryFilePath) {
+    getModuleFilesForRoute(entryFilePath, stopAt) {
         if (this.source.type === 'webpack') {
-            return this.walkWebpackGraph(entryFilePath, this.source.compilation);
+            return this.walkWebpackGraph(entryFilePath, this.source.compilation, stopAt);
         }
-        return this.walkRollupGraph(entryFilePath, this.source.moduleGraph);
+        return this.walkRollupGraph(entryFilePath, this.source.moduleGraph, stopAt);
     }
-    walkWebpackGraph(entryFilePath, compilation) {
-        // Normalise to relative forward-slash paths so visited keys and injectedMap
-        // keys are consistent across macOS and Windows.
+    walkWebpackGraph(entryFilePath, compilation, stopAt) {
         const toRelFwd = (p) => path_1.default.isAbsolute(p)
             ? path_1.default.relative(process.cwd(), p).replace(/\\/g, '/')
             : p.replace(/\\/g, '/');
@@ -108,6 +150,9 @@ class ComponentExtractor {
             const current = queue.shift();
             if (visited.has(current))
                 continue;
+            // Stop recursing into other route entry files — they own their own walk.
+            if (stopAt && current !== toRelFwd(entryFilePath) && (stopAt.has(current) || stopAt.has(path_1.default.resolve(process.cwd(), current))))
+                continue;
             visited.add(current);
             const mod = this.findWebpackModule(compilation, current);
             let queuedFromWebpackGraph = false;
@@ -119,10 +164,7 @@ class ComponentExtractor {
                     }
                 }
             }
-            // Fallback for webpack variants where moduleGraph helpers are unavailable.
             if (!queuedFromWebpackGraph) {
-                // getFileImportPaths resolves to absolute paths via resolveImportFile;
-                // normalise them before queuing.
                 for (const depPath of this.getFileImportPaths(current)) {
                     if (depPath && !depPath.includes('node_modules')) {
                         queue.push(toRelFwd(depPath));
@@ -235,24 +277,25 @@ class ComponentExtractor {
         }
         return resolved;
     }
-    walkRollupGraph(entryFilePath, graph) {
-        // Normalise the entry to a relative forward-slash path so it matches the
-        // keys stored by ClippyVitePlugin (which also normalises to relative).
+    walkRollupGraph(entryFilePath, graph, stopAt) {
         const toRelFwd = (p) => path_1.default.isAbsolute(p)
             ? path_1.default.relative(process.cwd(), p).replace(/\\/g, '/')
             : p.replace(/\\/g, '/');
+        const entryKey = toRelFwd(entryFilePath);
         const visited = new Set();
-        const queue = [toRelFwd(entryFilePath)];
+        const queue = [entryKey];
         while (queue.length > 0) {
             const current = queue.shift();
             if (visited.has(current))
                 continue;
+            // Stop recursing into other route entry files — they own their own walk.
+            if (stopAt && current !== entryKey && (stopAt.has(current) || stopAt.has(path_1.default.resolve(process.cwd(), current))))
+                continue;
             visited.add(current);
             const mod = graph.get(current);
             if (!mod)
                 continue;
             for (const importId of mod.importedIds) {
-                // importedIds are already relative keys after the vite plugin normalised them
                 if (importId && !importId.includes('node_modules')) {
                     queue.push(toRelFwd(importId));
                 }
@@ -416,8 +459,39 @@ function deriveLabel(tag, props, nearbyText) {
         return props['placeholder'];
     if (props['name'])
         return props['name'];
+    // Last resort: extract meaningful words from className for icon-only elements
+    // (e.g. password-toggle, close-modal buttons that contain only an SVG).
+    const className = props['className'] || props['class'] || '';
+    if (className) {
+        const meaningful = classNameToLabel(className);
+        if (meaningful)
+            return meaningful;
+    }
     return null;
 }
+// Utility tokens that describe layout/spacing/color but not element purpose.
+const TAILWIND_NOISE = new Set([
+    'flex', 'grid', 'block', 'inline', 'hidden', 'relative', 'absolute', 'fixed', 'sticky',
+    'items', 'justify', 'content', 'self', 'grow', 'shrink', 'order',
+    'inset', 'top', 'right', 'bottom', 'left', 'z',
+    'w', 'h', 'min', 'max', 'p', 'px', 'py', 'pt', 'pb', 'pl', 'pr', 'm', 'mx', 'my', 'mt', 'mb', 'ml', 'mr',
+    'gap', 'space', 'divide', 'overflow', 'truncate', 'whitespace', 'break',
+    'text', 'font', 'leading', 'tracking', 'uppercase', 'lowercase', 'capitalize', 'normal',
+    'bg', 'border', 'rounded', 'shadow', 'ring', 'outline', 'opacity', 'transition', 'duration',
+    'hover', 'focus', 'active', 'disabled', 'group', 'peer', 'placeholder',
+    'sr', 'not', 'dark', 'sm', 'md', 'lg', 'xl', '2xl',
+]);
+function classNameToLabel(className) {
+    const words = className
+        .split(/[\s\-_/]+/)
+        .map((w) => w.replace(/[^a-zA-Z]/g, '').toLowerCase())
+        .filter((w) => w.length > 2 && !TAILWIND_NOISE.has(w));
+    if (words.length === 0)
+        return null;
+    // Deduplicate, keep first 3 meaningful words
+    const unique = [...new Set(words)].slice(0, 3);
+    return unique.join(' ');
+}
 function inferSemanticRole(tag, props, nearbyText) {
     const label = props['aria-label'] || props['placeholder'] || nearbyText[0] || '';
     return `${label} ${tag}`.trim().toLowerCase();

package/dist/extractors/RouteExtractor.js

@@ -194,16 +194,32 @@ class RouteExtractor {
         const expr = elementAttr.value?.expression;
         if (!expr)
             return null;
-        // Try each JSX component name in document order; first match in the import map wins.
-        // Wrapper components like <Can> or <RouteGuard> won't be in the map, so we fall
-        // through to the actual page component nested inside them.
+        // Collect all JSX component names in document order (outermost first, then
+        // children). For each, resolve via the import map, then pick the best candidate:
+        // a file under pages/ beats a wrapper/provider/layout/guard/context.
         const componentNames = this.collectJSXComponentNames(expr);
+        const candidates = [];
         for (const componentName of componentNames) {
             const resolved = importMap.get(componentName);
             if (resolved)
-                return resolved;
+                candidates.push(resolved);
         }
-        return null;
+        if (candidates.length === 0)
+            return null;
+        // Score: page files rank highest, known non-page patterns rank lowest.
+        const score = (filePath) => {
+            const p = filePath.replace(/\\/g, '/').toLowerCase();
+            if (p.includes('/pages/'))
+                return 3;
+            if (p.includes('/views/') || p.includes('/screens/'))
+                return 2;
+            // Wrappers, providers, guards, layouts, contexts are structural — not page components
+            if (/\/(contexts?|providers?|guards?|layouts?|wrappers?|hoc|utils?|helpers?)\//.test(p) ||
+                /(provider|context|guard|layout|redirect|catchall|catch-all)/.test(p))
+                return 0;
+            return 1;
+        };
+        return candidates.reduce((best, c) => (score(c) >= score(best) ? c : best));
     }
     collectJSXComponentNames(node) {
         if (!node)

package/dist/types.d.ts

@@ -96,6 +96,7 @@ export interface PolicySelectorEntry {
     tag: string;
     component: string;
     label?: string;
+    nearbyText?: string[];
     route: string;
     filePath: string;
     attributes: Array<{
@@ -142,6 +143,7 @@ export interface SelectorManifestEntry {
     component: string;
     tag: string;
     label?: string;
+    nearbyText?: string[];
     routes: string[];
 }
 export interface SelectorManifest {

package/dist/upload/PackageBuilder.js

@@ -83,6 +83,7 @@ class PackageBuilder {
                     component: entry.component,
                     tag: entry.tag,
                     label: entry.label,
+                    nearbyText: entry.nearbyText,
                     routes: [entry.route],
                 });
             }
@@ -180,6 +181,7 @@ class PackageBuilder {
                 tag: element.tag,
                 component,
                 label: element.label,
+                nearbyText: element.nearbyText?.length ? element.nearbyText : undefined,
                 route: element.route,
                 filePath: projectRoot
                     ? this.normalizePath(element.filePath, projectRoot)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcoder-x/plugin-shared",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",