# @emotion/babel-plugin-jsx-pragmatic

> Insert code to load a module corresponding to JSX pragma.

Latest version **0.3.0** (published 2024-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @emotion/babel-plugin-jsx-pragmatic
pnpm add @emotion/babel-plugin-jsx-pragmatic
yarn add @emotion/babel-plugin-jsx-pragmatic
bun add @emotion/babel-plugin-jsx-pragmatic
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; popular repo.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2024-07-19 |
| First published | 2019-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18020 |
| Maintainers | emmatown, tkh44, emotion-release-bot, andarist |

## Links

- npm: https://www.npmjs.com/package/@emotion/babel-plugin-jsx-pragmatic
- Repository: https://github.com/emotion-js/emotion.git#main
- Homepage: https://github.com/emotion-js/emotion/tree/main#readme
- Issues: https://github.com/emotion-js/emotion/issues
- npm.io page: https://npm.io/package/@emotion/babel-plugin-jsx-pragmatic

## Dependencies (1)

- [@babel/plugin-syntax-jsx](https://npm.io/package/@babel/plugin-syntax-jsx.md) ^7.17.12

## Recent versions

- 0.3.0 (latest) — 2024-07-19
- 0.2.1 — 2023-05-06
- 0.2.0 — 2022-07-31
- 0.1.5 — 2019-12-22
- 0.1.4 — 2019-10-29
- 0.1.3 — 2019-06-25
- 0.1.2 — 2019-03-11
- 0.1.1 — 2019-03-11
- 0.1.0 — 2019-02-04

## README

# @emotion/babel-plugin-jsx-pragmatic

This package is a fork of [babel-plugin-jsx-pragmatic](https://github.com/jmm/babel-plugin-jsx-pragmatic) to support React Fragments.

The original README of babel-plugin-jsx-pragmatic with some modifications is shown below.

---

[@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx.html) has a `pragma` option that's used when transforming JSX to function calls instead of the default function `React.createElement`.

This Babel plugin is a companion to that feature that allows you to dynamically load a module associated with the `pragma` value.

Example:

Given this file:

```js
<Some jsx="element" />
```

babel would normally transform the JSX to:

```js
React.createElement(Some, { jsx: 'element' })
```

By setting the `pragma` option like this:

```js
babel.transformSync(code, {
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        pragma: 'whatever'
      }
    ]
  ]
})
```

It would instead transform it to:

```js
whatever(Some, { jsx: 'element' })
```

However, you might need to load a module corresponding to `whatever` in each module containing JSX:

```js
import whatever from 'whatever'
// or
var whatever = require('whatever')
```

This plugin allows you to make that part dynamic as well:

```js
babel.transformSync(code, {
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        pragma: 'whatever'
      }
    ],

    [
      '@emotion/babel-plugin-jsx-pragmatic',
      {
        module: '/something/whatever',
        import: 'whatever'
      }
    ]
  ]
})
```

Results in:

```js
import { default as whatever } from '/something/whatever'
```

## Options

### `module`

String. Module ID or pathname. The value of the `ModuleSpecifier` of an import. Required.

### `import`

String. The identifier that you want to import the `module` with. This should correspond to the root identifier of the `pragma` value. Required. Examples:

```js
{
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        pragma: 'x'
      }
    ],

    [
      '@emotion/babel-plugin-jsx-pragmatic',
      {
        module: '/something/whatever',
        import: 'x'
      }
    ]
  ]
}

{
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        pragma: 'x.y'
      }
    ],

    [
      '@emotion/babel-plugin-jsx-pragmatic',
      {
        module: '/something/whatever',
        import: 'x'
      }
    ]
  ]
}
```

### `export`

String. The export that you want to import as `import` from `module`. Default value is `default` (the default export). Examples:

```js
// Will import the default export (`default`)
{
  module: "whatever",
  import: "x"
}
// import {default as x} from "whatever"


// Will import the default export (`default`)
{
  module: "whatever",
  import: "x",
  export: "default",
}
// import {default as x} from "whatever"


// Will import the export named `something`
{
  module: "whatever",
  import: "x",
  export: "something",
}
// import {something as x} from "whatever"
```

# Known Issues

- Doesn't do anything special in the case that the file being transformed
  already imports or declares an identifier with the same name as `import`.

- Doesn't take into account when a file actually contains a JSX pragma comment.

---
_Source: https://npm.io/package/@emotion/babel-plugin-jsx-pragmatic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._