@dcoder-x/plugin-shared 0.1.7 → 0.1.9

package/dist/extractors/RouteExtractor.d.ts

@@ -7,6 +7,10 @@ export declare class RouteExtractor {
     private walkPagesDir;
     private walkTanStackDir;
     private extractReactRouterRoutes;
+    private buildImportMap;
+    private resolveRouteComponentFile;
+    private collectJSXComponentNames;
+    private resolveImportToFile;
     private findFilesContaining;
     private extractParams;
     private findNearestLayout;

package/dist/extractors/RouteExtractor.js

@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RouteExtractor = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
+const parser_1 = require("@babel/parser");
+const traverse_1 = __importDefault(require("@babel/traverse"));
+// @babel/traverse ships as CJS but may be loaded by an ESM host (e.g. Vite).
+// The CJS-in-ESM import wraps exports in a namespace object, so `.default`
+// may be the module object rather than the function. This guard handles both.
+const traverse = typeof traverse_1.default === 'function' ? traverse_1.default : traverse_1.default.default;
 class RouteExtractor {
     constructor(dir) {
         this.dir = dir;
@@ -114,42 +120,121 @@ class RouteExtractor {
     async extractReactRouterRoutes(srcDir) {
         if (!fs_1.default.existsSync(srcDir))
             return [];
-        const { parse } = await import('@babel/parser');
-        const traverse = (await import('@babel/traverse')).default;
         const results = [];
         const routerFiles = this.findFilesContaining(srcDir, /createBrowserRouter|<Route/);
         for (const filePath of routerFiles) {
             const source = fs_1.default.readFileSync(filePath, 'utf-8');
             let ast;
             try {
-                ast = parse(source, { sourceType: 'module', plugins: ['typescript', 'jsx'] });
+                ast = (0, parser_1.parse)(source, { sourceType: 'module', plugins: ['typescript', 'jsx'] });
             }
             catch {
                 continue;
             }
+            const importMap = this.buildImportMap(ast, filePath);
             traverse(ast, {
-                JSXOpeningElement(nodePath) {
+                JSXOpeningElement: (nodePath) => {
                     const name = nodePath.node.name?.name;
                     if (name !== 'Route')
                         return;
                     const pathAttr = nodePath.node.attributes.find((a) => a.name?.name === 'path');
                     const routePath = pathAttr?.value?.value;
-                    if (routePath) {
-                        results.push({
-                            path: routePath,
-                            filePath,
-                            isDynamic: routePath.includes(':'),
-                            params: (routePath.match(/:(\w+)/g) || []).map((p) => p.slice(1)),
-                            layout: null,
-                            routerType: 'react-router',
-                            semantic: this.deriveSemanticMeaning(routePath),
-                        });
-                    }
+                    if (!routePath)
+                        return;
+                    const resolvedFilePath = this.resolveRouteComponentFile(nodePath, importMap) ?? filePath;
+                    results.push({
+                        path: routePath,
+                        filePath: resolvedFilePath,
+                        isDynamic: routePath.includes(':'),
+                        params: (routePath.match(/:(\w+)/g) || []).map((p) => p.slice(1)),
+                        layout: null,
+                        routerType: 'react-router',
+                        semantic: this.deriveSemanticMeaning(routePath),
+                    });
                 },
             });
         }
         return results;
     }
+    buildImportMap(ast, fromFile) {
+        const map = new Map();
+        for (const node of ast.program.body) {
+            if (node.type !== 'ImportDeclaration')
+                continue;
+            const importSource = node.source?.value;
+            if (!importSource)
+                continue;
+            const resolved = this.resolveImportToFile(importSource, fromFile);
+            if (!resolved)
+                continue;
+            for (const specifier of node.specifiers ?? []) {
+                if (specifier.type === 'ImportDefaultSpecifier' ||
+                    specifier.type === 'ImportSpecifier') {
+                    const localName = specifier.local?.name;
+                    if (localName)
+                        map.set(localName, resolved);
+                }
+            }
+        }
+        return map;
+    }
+    resolveRouteComponentFile(routeOpeningPath, importMap) {
+        const elementAttr = routeOpeningPath.node.attributes.find((a) => a.name?.name === 'element');
+        if (!elementAttr)
+            return null;
+        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.
+        const componentNames = this.collectJSXComponentNames(expr);
+        for (const componentName of componentNames) {
+            const resolved = importMap.get(componentName);
+            if (resolved)
+                return resolved;
+        }
+        return null;
+    }
+    collectJSXComponentNames(node) {
+        if (!node)
+            return [];
+        if (node.type === 'JSXElement') {
+            const tagName = node.openingElement?.name?.name ?? '';
+            const names = [];
+            if (tagName && /^[A-Z]/.test(tagName))
+                names.push(tagName);
+            for (const child of node.children ?? []) {
+                names.push(...this.collectJSXComponentNames(child));
+            }
+            return names;
+        }
+        return [];
+    }
+    resolveImportToFile(importSource, fromFile) {
+        if (!importSource.startsWith('.') && !importSource.startsWith('/'))
+            return null;
+        const base = importSource.startsWith('/')
+            ? path_1.default.normalize(importSource)
+            : path_1.default.resolve(path_1.default.dirname(fromFile), importSource);
+        const candidates = [
+            base,
+            `${base}.ts`,
+            `${base}.tsx`,
+            `${base}.js`,
+            `${base}.jsx`,
+            path_1.default.join(base, 'index.ts'),
+            path_1.default.join(base, 'index.tsx'),
+            path_1.default.join(base, 'index.js'),
+            path_1.default.join(base, 'index.jsx'),
+        ];
+        for (const candidate of candidates) {
+            if (fs_1.default.existsSync(candidate) && fs_1.default.statSync(candidate).isFile()) {
+                return path_1.default.normalize(candidate);
+            }
+        }
+        return null;
+    }
     findFilesContaining(dir, pattern) {
         const results = [];
         const entries = fs_1.default.readdirSync(dir, { withFileTypes: true });

package/dist/injection/ClippyIdInjector.js

@@ -157,10 +157,10 @@ function findAttributeInsertIndex(source, range) {
     if (!range)
         return null;
     const end = range[1];
-    const closeCharIndex = source.lastIndexOf('>', end - 1);
-    if (closeCharIndex === -1)
-        return null;
-    return closeCharIndex;
+    // Avoid searching backwards with lastIndexOf('>') — it hits '>' inside JSX expression
+    // containers (e.g. onClick={() => navigate('/')}). Use the AST range end directly.
+    const isSelfClosing = source[end - 2] === '/';
+    return isSelfClosing ? end - 2 : end - 1;
 }
 function applyEdits(source, edits) {
     const sorted = edits.slice().sort((a, b) => b.index - a.index);

package/package.json

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