Handling imports with multiple plugins

[hmak-dev]

There are cases that we need multiple plugins to handle some import statements. For example, an alias plugin that resolves the paths to the alias imports. The result of this plugin has to be visible to all other plugins that have a similar filter RegExp. The following build script describes the situation:

Build Script:

await esbuild.build({
    entryPoints: await fastGlob('src/**/*.(js|ts)'),
    external: [...Object.keys(pkg.dependencies || {})],
    outbase: 'src',
    outdir: 'lib',
    platform: 'node',
    bundle: true,
    keepNames: true,
    plugins: [
        wildcardImport(),
        aliasImport({
            src: './src',
        }),
        graphqlImport(),
        makeExternal(),
    ],
});

Description:

1. The first plugin will be responsible for wildcard imports and adds an import statement for every possible file matching the wildcard pattern.
2. The second plugin will resolve the absolute path of the import statements that started with the src alias.
3. The third plugin will load .gql and .graphql files.
4. The last plugin does what you said earlier. It will mark all files that are loaded from the src directory as external modules to prevent them from bundling. It also provides a relative path to the imported module calculated from the location of the importer module.

Problem:
The aliasImport plugin does its job pretty well, but it will end just right there. The modules processed in this plugin, will not be visible for the next plugins. They won't be passed to graphqlImport and makeExternal plugins.

I think there must be a way to let other plugins access the previously processed files.

[unlocomqx]

Similar to #501?

[hmak-dev]

Similar to #501?

I was following the discussions on that issue. But, rebuilding the project again is not a clean and proper solution to this kind of problem. As a webpack user, I expected all of my plugins to be executed in the order of their placement in the build script one after another. I think there must be a better solution to achieve this without building the project again.

@evanw If you think it can't be done with the current version of esbuild, I would love to participate and make a pull request.

[henrhie]

@hmak-me how far with this issue. stuck on the same problem

[rauschma]

My use case (not currently possible – right?):

• Use CSS from TypeScript for server-side rendering.
• Thus, this is related to CSS modules but it must work with TypeScript and Node.js (in addition to during bundling).
• CSS names (of IDs and classes) should be checked statically.

I’m still in the process of thinking this fully through. Thus, it’s possible I made mistakes somewhere.

Example – files

component.tsx
component.css.json
component.css

What an esbuild plugin would have to do

The plugin would have to forward component.css.json to two loaders:

• json: Treat it like a normal JSON import so that we have access to CSS IDs and classes at runtime (in the browser).
• css: Bundle all the CSS fragments into a single CSS file.

Benefits of this approach

• Node.js is fine with the JSON imports – in contrast to importing CSS, which doesn’t work for this use case.
• TypeScript warns us during editing if we get CSS names wrong.

Example repository

https://github.com/rauschma/server-side-rendered-css