Is is possible to use custom syntax in TSX files with a custom plugin?

[kaleidawave]

Description

Attempting build a plugin. Need to do the following: https://stackblitz.com/edit/vitejs-vite-tsvarv?file=myPlugin.mjs,myFile.tsx,main.js,vite.config.js&terminal=dev

The problems:

• It throws an error about the syntax in the .tsx file. I think it eagerly parses it before transform. Disabling esbuild gives an output, but there is still an error in the logs about the syntax.
• Is there a way to disable this eager parse?
• Is there a way to prefix certain imported .tsx files to be processed by the transform-file transformer plugin?

Suggested solution

If a plugin needs to overwrite builtin syntax, maybe it could export overrideBuiltin(id): boolean ?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

The error is coming from the scanner that does a quick search to find dependencies. You can just ignore the error for now as it won't break anything.

I guess we can just change this error into a debug log.
@fi3ework @bluwy As you implemented/reviewed #11977, WDYT?

[kaleidawave]

Awesome, as long there is a way to not make it surface to the user. The plugin can find imports so it would be nice if there was a way to optionally to delegate this scanning to a plugin

[bluwy]

I don't think we should downgrade that to a debug. It's an error that would also cause stuff like unnecessary reloads otherwise, because the scanner didn't catch and crawl everything.

You can add an esbuild plugin to optimizeDeps.esbuildOptions.plugins to transform the custom syntax to something esbuild understands though.

If you only want to run the plugin for scanning (they're also used for prebundling by default), you can use the inverse of this hack.

[kaleidawave]

Interesting. Trying to integrate into my existing unbuild setup. If I create an esbuild plugin that maps the file, then add that esbuild plugin into vite. It doesn't seem like it transforms the content passed to Vite's transform?

Here's my reproduction for it: https://stackblitz.com/edit/vitejs-vite-tsvarv?file=myPlugin.mjs,myFile.tsx&terminal=dev

I want it build a file using a transform somewhere and still work when I uncomment the // some custom syntax here in myFile.tsx. If there is any way to do that it would be great!

[bluwy]

I don't quite understand what you're trying to do in the repro. But guessing the intention, you shouldn't share information between the esbuild plugin and the Vite plugin. The esbuild plugin (used for scanning and prebundling) is only used on cold starts (no cache at ./node_modules/.vite), it doesn't run on warm starts. Maybe you will see a more consisten behaviour when you run vite dev --force which purges the cache.

Usually you will have slightly duplicated code between esbuild and Vite's transform, but the esbuild version tends to be slimmer to only make scanning or prebundling work.

Note that scanning and prebundling works on different sets of files. "Scanning" walks through the user source code to find dependencies for prebundling. It never crawls into dependencies unless it's linked locally. "Prebundling" bundles the dependencies as a single file entrypoint each in /node_modules/.vite, touching library code only, which is usually plain JS.

[kaleidawave]

Okay, updated the link.

Ignore the previous result thing, I thought your method was to share output between plugins. Good to know not to do that.

I have added a plugin for esbuild, it definitely runs as I see "esbuild" logged. So the problem specifically is:

I get an esbuild error for the syntax still. The transform is run and valid code is returned, but for some reason esbuild really wants to parse the original

Because of the error vite.transform never runs :(

[bluwy]

That's because Vite's internal esbuild Vite plugin to handle JSX/TSX files by default runs before your plugin runs. You can make your plugin run earlier with enforce: 'pre' in the Vite plugin. That made the stackblitz repro run for me.

[kaleidawave]

Ah awesome. I think these two solved it: registering an esbuild plugin for import scanning and enforce: 'pre'.

I think that means it has to parse it twice at the start, not a big issue tho