parsed AST does not contain JSXElement nodes

[steinarb]

@babel/parser 7.26.9
@babel/traverse 7.26.9
@babel/types 7.26.9

I am trying to write a vite plugin that walks the source files of the project and find all JSX elements and collect the path attribute of that element and at the end of the walk writes out a txt files with one path on each line.

I am trying to use babel to do so but it doesn't work because the parsed AST doesn't contain nodes with type JSXElement.

I am hoping someone here can tell me what I need to do to get JSX* nodes in the parsed AST?

The file that contains the stuff I'm interested is, is this one: https://github.com/steinarb/sampleapp/blob/master/sampleapp.web.frontend/src/main/frontend/src/App.js

The JSON-ified version of the AST for App.js (as logged in the code below), looks like this: https://gist.github.com/steinarb/e3d8b0a5c2bd64378250a985f3de2852

For the time being I have just put the vite plugin into the vite.config.js file (the transform() function is invoked once per file with full path file name in id and the content of the file in src):

import { defineConfig } from 'vite';
import eslintPlugin from "@nabla/vite-plugin-eslint";
import path from 'path';
import fs from 'fs';
import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import * as t from "@babel/types";

export default defineConfig({
    plugins: [eslintPlugin(), exportRoutesPlugin()],
    build: {
        minify: false,
        sourcemap: true,
        manifest: true,
        rollupOptions: {
            // overwrite default .html entry
            input: 'src/index.js',
            output: {
                entryFileNames: `assets/[name].js`,
                chunkFileNames: `assets/[name].js`,
                assetFileNames: `assets/[name].[ext]`
            }
        },
        // Relative to the root
        outDir: '../../../target/classes',
    },
    // Treat .js files as jsx
    esbuild: {
        include: /\.js$/,
        exclude: [],
        loader: 'jsx',
    },
});

function exportRoutesPlugin() {
    const routePaths = new Set();

    return {
        name: 'export-routes',

        async transform(src, id) {
            if (!id.includes('node_modules') && id.includes('.js')) {
                console.log(id);
                const ast = parse(src, {
                    sourceType: 'module',
                    plugins: ['jsx'],
                });

                console.log(JSON.stringify(ast, null, 2));
                traverse(ast, {
                    enter(path) {
                        if (t.isJSXElement(path)) {
                            console.log('JSXElement');
                        }
                    }
                });
            }
        },

        generateBundle(options, bundle) {
            const outputDirectory = options.dir || 'dist';
            const assetsDirectory = path.join(outputDirectory, 'assets');
            const filePath = path.join(assetsDirectory, 'routes.txt');
            const fileContent = Array.from(routePaths).join('\n');
            fs.writeFileSync(filePath, fileContent);
        },
    };
};

(not sure if transform() is the function that should be used since it sounds like it tries to transform something, but for now I'm just trying to find the Route elements and their attributes...)

[steinarb]

package-lock.json
package.json

I've added package.json and package-lock.json for the project.

[liuxingbaoyu]

You are writing a rollup plugin which runs after esbuild .
So JSX has been converted to JS.
As a workaround, you can try to read the original file from id or write an esbuild plugin.

[steinarb]

Ah! Thanks!

[steinarb]

vite.config.js with a working version of the plugin:

import { defineConfig } from 'vite';
import eslintPlugin from "@nabla/vite-plugin-eslint";
import path from 'path';
import fs from 'fs';
import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import * as t from "@babel/types";

export default defineConfig({
    plugins: [eslintPlugin(), exportRoutesPlugin()],
    build: {
        minify: false,
        sourcemap: true,
        manifest: true,
        rollupOptions: {
            // overwrite default .html entry
            input: 'src/index.js',
            output: {
                entryFileNames: `assets/[name].js`,
                chunkFileNames: `assets/[name].js`,
                assetFileNames: `assets/[name].[ext]`
            }
        },
        // Relative to the root
        outDir: '../../../target/classes',
    },
    // Treat .js files as jsx
    esbuild: {
        include: /\.js$/,
        exclude: [],
        loader: 'jsx',
    },
});

function exportRoutesPlugin() {
    const routePaths = new Set();

    return {
        name: 'export-routes',

        async transform(src, id) {
            if (!id.includes('node_modules') && !id.includes('commonjsHelpers') && id.includes('.js')) {
                fs.readFile(id, 'utf-8', (err, data) => {
                    const ast = parse(data, {
                        sourceType: 'module',
                        plugins: ['jsx'],
                    });

                    traverse(ast, {
                        enter(path) {
                            if (t.isJSXElement(path.node)) {
                                const elementName = path.node.openingElement.name.name;
                                if (elementName === 'Route') {
                                    path.node.openingElement.attributes.forEach((attribute) => {
                                        if (attribute.name.name === 'path') {
                                            routePaths.add( attribute.value.value);
                                        }
                                    });
                                }
                            }
                        }
                    });
                });
            }
        },

        generateBundle(options, bundle) {
            const outputDirectory = options.dir || 'dist';
            const assetsDirectory = path.join(outputDirectory, 'assets');
            const filePath = path.join(assetsDirectory, 'routes.txt');
            const fileContent = Array.from(routePaths).join('\n');
            fs.writeFileSync(filePath, fileContent);
        },
    };
};