Skip to content

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

License

Notifications You must be signed in to change notification settings

jmm/babel-plugin-jsx-pragmatic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published