@rnx-kit/babel-plugin-import-path-remapper

Babel plugin for remapping 'lib/' imports to 'src/'

Usage no npm install needed!

<script type="module">
  import rnxKitBabelPluginImportPathRemapper from 'https://cdn.skypack.dev/@rnx-kit/babel-plugin-import-path-remapper';
</script>

README

@rnx-kit/babel-plugin-import-path-remapper

Build npm version

@rnx-kit/babel-plugin-import-path-remapper remaps **/lib/** imports to **/src/**. This is useful for packages that are not correctly exporting everything via their index.ts, but you still want to consume the TypeScript files rather than the transpiled JavaScript.

Usage

Add @rnx-kit/babel-plugin-import-path-remapper to your babel.config.js under plugins. For example, to remap all paths under the @rnx-kit scope:

// babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  overrides: [
    {
      test: /\.tsx?$/,
      plugins: [
        // @babel/plugin-transform-typescript doesn't support `const enum`s.
        // See https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats
        // for more details.
        "const-enum",

        [
          "@rnx-kit/babel-plugin-import-path-remapper",
          { test: (source) => source.startsWith("@rnx-kit/") },
        ],
      ],
    },
  ],
};

Or, if you're using @rnx-kit/metro-config:

// babel.config.js
const { makeBabelConfig } = require("@rnx-kit/metro-config");
module.exports = makeBabelConfig([
  [
    "@rnx-kit/babel-plugin-import-path-remapper",
    { test: (source) => source.startsWith("@rnx-kit/") },
  ],
]);

Options

Option Type Description
test (source: string) => boolean [Required] A function returning whether the passed source should be redirected to another module.
remap (moduleName: string, path: string) => string [Optional] A function returning the module that should be used instead, e.g. contoso/index.js -> contoso/index.ts.