-
Notifications
You must be signed in to change notification settings - Fork 178
Auto import fbt in babel plugin #194
Comments
Since we've got code to detect the lack of We might have to give new configuration options in babel-plugin-fbt to let people customize how to actually do that import if their setup is not standard though. |
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 }
}
]
]
} |
Nice! |
So a rule to disallow having an |
I've published the code as |
🚀 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
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
The text was updated successfully, but these errors were encountered: