https://github.com/alextompkins/esbuild-plugin-jsximportsource
An esbuild plugin that allows use of the `@jsxImportSource` pragma.
https://github.com/alextompkins/esbuild-plugin-jsximportsource
esbuild esbuild-plugin jsx
Last synced: 9 days ago
JSON representation
An esbuild plugin that allows use of the `@jsxImportSource` pragma.
- Host: GitHub
- URL: https://github.com/alextompkins/esbuild-plugin-jsximportsource
- Owner: alextompkins
- Created: 2022-04-21T23:36:15.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-12T07:19:22.000Z (over 3 years ago)
- Last Synced: 2024-08-09T05:53:26.931Z (almost 2 years ago)
- Topics: esbuild, esbuild-plugin, jsx
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/esbuild-plugin-jsximportsource
- Size: 923 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# esbuild-plugin-jsximportsource
[](https://github.com/alextompkins/esbuild-plugin-jsximportsource/actions/workflows/test.yml)
An esbuild plugin to support the `@jsxImportSource` pragma.
**OBSOLETE**: I am retiring this plugin because [support for the automatic JSX runtime has landed in esbuild as of v0.14.51](https://github.com/evanw/esbuild/releases/tag/v0.14.51).
**BREAKING CHANGE**: v1 of this plugin exports only an ESM entrypoint.
This means it will only work using `import` syntax.
If you need to use this plugin from a CJS build script, you have two options:
1. Use a [dynamic import](https://nodejs.org/api/esm.html#import-expressions), which is supported by Node 12+.
2. Use v0, which exports a CJS entrypoint that you can `require()`.
## Install
```
npm i esbuild-plugin-jsximportsource
```
## Usage
Just add it to your esbuild plugins:
```js
import { jsxImportSourcePlugin } from 'esbuild-plugin-jsximportsource';
await esbuild.build({
...
plugins: [jsxImportSourcePlugin()]
});
```
This will replace `@jsxImportSource` with an import from the specified package and the `@jsx` pragma, which [esbuild supports natively](https://github.com/evanw/esbuild/issues/138).
By default, this will only transform `.jsx` or `.tsx` files. You can change this by specifying a custom filter:
```js
await esbuild.build({
...
plugins: [jsxImportSourcePlugin({ filter: /.(js|ts|jsx|tsx)/ })]
});
```
## Example
```tsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
export const Component = () => (
Hello!
);
```
becomes:
```tsx
/** @jsx jsx */
import { jsx } from '@emotion/react';
import { css } from '@emotion/react';
export const Component = () => (
Hello!
);
```
which gets transpiled to:
```js
import { jsx } from "@emotion/react";
import { css } from "@emotion/react";
export const Component = () => /* @__PURE__ */ jsx("div", {
css: css`
background-color: hotpink;
`
}, "Hello!");
```