jmm / babel-plugin-jsx-pragmatic

Companion to custom JSX pragma, to automatically import the referenced module.

About

babel-plugin-transform-react-jsx 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.

From v1.0.0 this works with the Babel v6 plugin API, not v5.

Example:

Given this file:

<Some jsx="element" />

babel would normally transform the JSX to:

React.createElement(Some, { jsx: "element" });

By setting the pragma option like this:

babel.transform(code, {
  plugins: [
    ["babel-plugin-transform-react-jsx", {
      pragma: "whatever",
    }],
  ]
})

It would instead transform it to:

whatever(Some, { jsx: "element" });

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

import whatever from "whatever";
// or
var whatever = require("whatever");

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

babel.transform(code, {
  plugins: [
    ["babel-plugin-transform-react-jsx", {
      pragma: "whatever",
    }],

    ["babel-plugin-jsx-pragmatic", {
      module: "/something/whatever",
      import: "whatever"
    }],
  ]
})

Results in:

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:

{
  plugins: [
    ["babel-plugin-transform-react-jsx", {
      pragma: "x",
    }],

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

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

    ["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:

// 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.