@dcoder-x/plugin-shared 0.1.10 → 0.1.12

package/dist/extractors/ComponentExtractor.js

@@ -19,13 +19,32 @@ 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 relFwd = route.filePath.replace(/\\/g, '/');
+            fileRouteIndex.set(relFwd, route.path);
+            // Also index by just the basename-less relative path variations
+            fileRouteIndex.set(route.filePath, route.path);
+        }
+        const seen = new Set(); // deduplicate across routes
         for (const route of this.routes) {
             const moduleFiles = this.getModuleFilesForRoute(route.filePath);
             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 +57,24 @@ 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 seen = new Set();
         for (const route of this.routes) {
             const moduleFiles = this.getModuleFilesForRoute(route.filePath);
             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 +92,7 @@ class ComponentExtractor {
                             components.push({
                                 name: componentName,
                                 filePath,
-                                route: route.path,
+                                route: assignedRoute,
                                 stateVariables: context.stateVariables,
                                 interactions,
                             });
@@ -79,7 +110,7 @@ class ComponentExtractor {
                             components.push({
                                 name: componentName,
                                 filePath,
-                                route: route.path,
+                                route: assignedRoute,
                                 stateVariables: context.stateVariables,
                                 interactions,
                             });
@@ -97,8 +128,13 @@ class ComponentExtractor {
         return this.walkRollupGraph(entryFilePath, this.source.moduleGraph);
     }
     walkWebpackGraph(entryFilePath, compilation) {
+        // Normalise to relative forward-slash paths so visited keys and injectedMap
+        // keys are consistent across macOS and Windows.
+        const toRelFwd = (p) => path_1.default.isAbsolute(p)
+            ? path_1.default.relative(process.cwd(), p).replace(/\\/g, '/')
+            : p.replace(/\\/g, '/');
         const visited = new Set();
-        const queue = [entryFilePath];
+        const queue = [toRelFwd(entryFilePath)];
         while (queue.length > 0) {
             const current = queue.shift();
             if (visited.has(current))
@@ -109,26 +145,31 @@ class ComponentExtractor {
             if (mod) {
                 for (const depPath of this.getWebpackDependencyPaths(compilation, mod)) {
                     if (depPath && !depPath.includes('node_modules')) {
-                        queue.push(depPath);
+                        queue.push(toRelFwd(depPath));
                         queuedFromWebpackGraph = true;
                     }
                 }
             }
             // 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(depPath);
+                        queue.push(toRelFwd(depPath));
                     }
                 }
             }
         }
         return Array.from(visited);
     }
-    findWebpackModule(compilation, filePath) {
+    findWebpackModule(compilation, relFilePath) {
+        // relFilePath is already a relative forward-slash path; convert to the
+        // absolute path that webpack stores so its graph lookup succeeds.
+        const absFilePath = path_1.default.resolve(process.cwd(), relFilePath);
         const graph = compilation?.moduleGraph;
         if (graph?.getModuleByIdentifier) {
-            const byIdentifier = graph.getModuleByIdentifier(filePath);
+            const byIdentifier = graph.getModuleByIdentifier(absFilePath);
             if (byIdentifier)
                 return byIdentifier;
         }
@@ -139,10 +180,10 @@ class ComponentExtractor {
                 : [];
         for (const mod of modules) {
             const resource = normalizeModulePath(mod?.resource || mod?.userRequest);
-            if (resource === filePath)
+            if (resource === absFilePath)
                 return mod;
             const id = normalizeModulePath(typeof mod?.identifier === 'function' ? mod.identifier() : mod?.id);
-            if (id === filePath)
+            if (id === absFilePath)
                 return mod;
         }
         return null;
@@ -226,8 +267,13 @@ 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).
+        const toRelFwd = (p) => path_1.default.isAbsolute(p)
+            ? path_1.default.relative(process.cwd(), p).replace(/\\/g, '/')
+            : p.replace(/\\/g, '/');
         const visited = new Set();
-        const queue = [entryFilePath];
+        const queue = [toRelFwd(entryFilePath)];
         while (queue.length > 0) {
             const current = queue.shift();
             if (visited.has(current))
@@ -237,9 +283,9 @@ class ComponentExtractor {
             if (!mod)
                 continue;
             for (const importId of mod.importedIds) {
-                const importPath = normalizeModulePath(importId, current);
-                if (importPath && !importPath.includes('node_modules')) {
-                    queue.push(importPath);
+                // importedIds are already relative keys after the vite plugin normalised them
+                if (importId && !importId.includes('node_modules')) {
+                    queue.push(toRelFwd(importId));
                 }
             }
         }
@@ -401,8 +447,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/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.10",
+  "version": "0.1.12",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",