Auto import fbt in babel plugin

🚀 Feature Proposal

Add support to auto import fbt in the babel plugin. Similar to how the new react automatic runtime feature in @babel/plugin-transform-react-jsx

Motivation

Personally I often forget to import fbt until the compilation fails, making this automatic would improve the DX for at least me.

This would also fix use with “organize imports” in VS Code, where it removed the fbt import since it can’t see it’s being used.

Example

// input

function App() {
  return (
    <fbt desc="lorem text">Lorem ipsum dolor</fbt>
  )
}

// output

import fbt from 'fbt'

function App() {
  return (
    <fbt desc="lorem text">Lorem ipsum dolor</fbt>
  )
}

Pitch

It makes sense for this feature to be in the core babel plugin, I guess it’s possible to create a custom plugin but then you need to be careful about ordering etc

[alexandernanberg]

Created a stand-alone plugin for now, if it works out well I might create a PR sometime in the future

module.exports = function fbtImportPlugin({ types: t }) {
  let root;

  return {
    visitor: {
      Program(path) {
        root = path;
      },
      JSXElement(path) {
        const hasFbtImport = !path.context.scope.getBinding('fbt');

        if (path.node.openingElement.name.name === 'fbt' && hasFbtImport) {
          const importDeclaration = t.importDeclaration(
            [t.importDefaultSpecifier(t.identifier('fbt'))],
            t.stringLiteral('fbt')
          );
          const [importPath] = root.unshiftContainer('body', importDeclaration);
          // Babel doesn't automatically update the bindings when we insert the
          // import statement, so manually update the binding here.
          root.scope.registerBinding('module', importPath);
        }
      },
    },
  };
};

// .babelrc
{
  "plugins": [
    "./babel-plugin-fbt-import", // need to be before the other fbt plugins
    "babel-plugin-fbt-runtime",
    [
      "babel-plugin-fbt",
      {
        "extraOptions": { "__self": true, "__source": true }
      }
    ]
  ]
}

[alexandernanberg]

I’ve published the code as babel-plugin-fbt-import on npm now, and code can be found here https://github.com/alexandernanberg/babel-plugin-fbt-import