added __self to fbt ignored props (#137)

Summary: Recently, a bugfix went out for `babel-plugin-transform-react-jsx-self` that moves adding the `__self` JSX attribute before the arrow function transform. This has the side effect of adding the `__self` attribute before the fbt transform as well. This PR marks `__self` as a passed through but purposefully ignored attribute so that this change does not cause fbt to throw because of an unknown attribute Pull Request resolved: #137 Test Plan: I wrote a test to verify that the attribute is ignored. I also manually changed the code in the WWW repo and verified running the `self` transform in conjunction with this transform no longer throws an error. Reviewed By: kayhadrin Differential Revision: D20932477 Pulled By: lunaruan fbshipit-source-id: 9d29608fc392ef962749d292a74d0c660d72b310
facebook · Apr 9, 2020 · 8d997f6 · 8d997f6
1 parent 323c1cb
commit 8d997f6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/packages/babel-plugin-fbt/FbtConstants.js b/packages/babel-plugin-fbt/FbtConstants.js
@@ -91,6 +91,11 @@ const FbtRequiredAttributes = {
   desc: true,
 };
 
+const FbtIgnoredAttributes = {
+  __self: true,
+  ...FbtRequiredAttributes,
+};
+
 const PronounRequiredAttributes = {
   type: true,
   gender: true,
@@ -102,6 +107,11 @@ const RequiredParamOptions = {
   name: true,
 };
 
+const IgnoredParamOptions = {
+  __self: true,
+  ...RequiredParamOptions,
+};
+
 const ValidParamOptions = {
   number: true,
   gender: true,
@@ -130,8 +140,10 @@ module.exports = {
   FBT_ENUM_MODULE_SUFFIX,
   FbtBooleanOptions,
   FbtCallMustHaveAtLeastOneOfTheseAttributes,
+  FbtIgnoredAttributes,
   FbtRequiredAttributes,
   FbtType,
+  IgnoredParamOptions,
   JSModuleName,
   ModuleNameRegExp,
   PLURAL_PARAM_TOKEN,

diff --git a/packages/babel-plugin-fbt/__tests__/fbtJsx-test.js b/packages/babel-plugin-fbt/__tests__/fbtJsx-test.js
@@ -583,6 +583,25 @@ const testData = {
     ),
   },
 
+  'should not throw on attributes that are explictly ignored': {
+    input: withFbtRequireStatement(
+      `<fbt desc="some-desc" __self={this}>
+        <fbt:param name="foo" __self={this}>
+          !{foo}!
+        </fbt:param>
+      </fbt>`,
+    ),
+
+    output: withFbtRequireStatement(
+      `fbt._(
+        ${payload({
+          type: 'text',
+          jsfbt: '{foo}',
+          desc: 'some-desc',
+        })}, [fbt._param("foo", foo)]);`,
+    ),
+  },
+
   'should maintain order of params and enums': {
     input: withFbtRequireStatement(
       `<fbt desc="some-desc">

diff --git a/packages/babel-plugin-fbt/babel-processors/JSXFbtProcessor.js b/packages/babel-plugin-fbt/babel-processors/JSXFbtProcessor.js
@@ -31,7 +31,7 @@ const FbtAutoWrap = require('../FbtAutoWrap');
 const FbtCommon = require('../FbtCommon');
 const {
   FbtCallMustHaveAtLeastOneOfTheseAttributes,
-  FbtRequiredAttributes,
+  FbtIgnoredAttributes,
   ValidFbtOptions,
 } = require('../FbtConstants');
 const FbtNodeChecker = require('../FbtNodeChecker');
@@ -134,7 +134,7 @@ class JSXFbtProcessor {
         this.t,
         attrs,
         ValidFbtOptions,
-        FbtRequiredAttributes,
+        FbtIgnoredAttributes,
       )
       : null;
   }

diff --git a/packages/babel-plugin-fbt/getNamespacedArgs.js b/packages/babel-plugin-fbt/getNamespacedArgs.js
@@ -13,10 +13,10 @@
 
 const FbtAutoWrap = require('./FbtAutoWrap');
 const {
+  IgnoredParamOptions,
   PluralOptions,
   PluralRequiredAttributes,
   PronounRequiredAttributes,
-  RequiredParamOptions,
   ValidParamOptions,
   ValidPronounOptions,
   ValidPronounUsages,
@@ -51,7 +51,7 @@ const getNamespacedArgs = function(moduleName, t) {
         t,
         attributes,
         ValidParamOptions,
-        RequiredParamOptions,
+        IgnoredParamOptions,
       );
 
       let paramChildren = filterEmptyNodes(node.children).filter(function(