Draft: Support npm: specifiers in @jsxImportSource pragma #58
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently if you try to use a JSX component from a JSR package in Deno+Vite, you will get an error:
Uncaught TypeError: jsx is not a function
This fixes the ability to import JSX components from JSR and use them with Vite. Currently JSR does not transpile JSX components and instead inserts pragma directives like
/** @jsxImportSource npm:preact */
, which Vite cannot resolve.See: jsr-io/jsr#24 (comment)
I did a lot of experimentation, and found that when you have a pragma like this:
/** @jsxImportSource npm:preact@^10.24.0 */
it is never intercepted by the Vite plugin system. It's never passed to
resolveId
. The only way to make it work is to modify the source code file before Vite's JSX loader transforms it.So I did a simple regex replace to just strip the
npm:
identifier and@
version because Vite doesn't utilize it anyway. It doesn't seem worth doing full module resolution here because Vite expects a plain npm package name (I'm not 100% sure about that, but I couldn't get it to work with an absolute path in my tests). So just stripping it seems like the best workaround for now.