feat(babel-plugin-fbt): enable writing Flow types in source code and …

…publish to dist folder

Reviewed By: jrwats

Differential Revision: D25121590

fbshipit-source-id: d305bdb45f7d8af55655cc80555d1d89abcc1b9c

.flowconfig

@@ -2,6 +2,7 @@
 <PROJECT_ROOT>/packages/fbt/lib/.*
 <PROJECT_ROOT>/packages/fbt/dist/.*
 .*/@babel/types/lib/index.js.flow
+.*/packages/babel-plugin-fbt/dist/.*
 
 [include]
 node_modules

.gitignore

@@ -2,6 +2,8 @@
 node_modules
 yarn-error.log
 .flow-results
+# file checksums used by gulp-once
+.checksums
 
 # MacOS
 .DS_Store

CHANGELOG.md

@@ -112,6 +112,7 @@ List of changes for each released npm package version.
       Unreleased changes that have landed in master. Click to see more.
     </summary>
 
+  - [minor] Add ability to write Flow annotations in JS code directly. Npm packages will contain both ES5 and Flow JS file versions.
   - [chore] Adding @noflow annotations
   - [fix] Fix issue where the value of the `human` option of `fbt:pronoun` was processed incorrectly. Before, `human=true` used to behave as if `human=false`, and vice versa.
       Also, when `fbt:pronoun` is used without an explicit `human=false` option, we'll now generate the `NOT_A_PERSON` gender-case.

babelPlugins.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @noflow
+ */
+
+'use strict';
+
+// TODO T40028530: Remove this when we can convert to fbjs
+// Depends on https://github.com/facebook/fbt/issues/40
+module.exports = {
+  PLUGINS: [
+    require('@babel/plugin-proposal-optional-catch-binding'),
+    require('@babel/plugin-syntax-class-properties'),
+    require('@babel/plugin-syntax-flow'),
+    require('babel-plugin-syntax-trailing-function-commas'),
+    require('@babel/plugin-syntax-object-rest-spread'),
+    require('babel-preset-fbjs/plugins/dev-expression'),
+    require('@babel/plugin-transform-template-literals'),
+    require('@babel/plugin-transform-literals'),
+    require('@babel/plugin-transform-function-name'),
+    require('@babel/plugin-transform-arrow-functions'),
+    require('@babel/plugin-transform-block-scoped-functions'),
+    require('@babel/plugin-proposal-class-properties'),
+    require('@babel/plugin-proposal-nullish-coalescing-operator'),
+    require('@babel/plugin-proposal-optional-chaining'),
+    [require('@babel/plugin-transform-classes'), {loose: true}],
+    require('@babel/plugin-transform-object-super'),
+    require('@babel/plugin-transform-shorthand-properties'),
+    require('@babel/plugin-transform-computed-properties'),
+    require('@babel/plugin-transform-flow-strip-types'),
+    require('@babel/plugin-transform-for-of'),
+    [require('@babel/plugin-transform-spread'), {loose: true}],
+    require('@babel/plugin-transform-parameters'),
+    [require('@babel/plugin-transform-destructuring'), {loose: true}],
+    require('@babel/plugin-transform-block-scoping'),
+    require('@babel/plugin-transform-modules-commonjs'),
+    require('@babel/plugin-transform-member-expression-literals'),
+    require('@babel/plugin-transform-property-literals'),
+    require('@babel/plugin-proposal-object-rest-spread'),
+    require('@babel/plugin-transform-react-display-name'),
+    require('babel-preset-fbjs/plugins/object-assign'),
+  ],
+};

demo-app/package.json

@@ -13,6 +13,7 @@
     "clean-fbts": "rm .enum_manifest.json .src_manifest.json .source_strings.json src/translatedFbts.json .test_*.json 2&> /dev/null || exit 0",
     "collect-fbts": "fbt-collect --pretty --manifest < .src_manifest.json > .source_strings.json",
     "manifest": "fbt-manifest --src src",
+    "preinstall": "yarn workspace babel-plugin-fbt prepack",
     "postinstall": "yarn all",
     "start": "webpack-dev-server --open",
     "test-collect-fbts": "fbt-collect --pretty --manifest < .src_manifest.json > .test_source_strings.json",

gulpfile.js

@@ -10,8 +10,9 @@
 
 'use strict';
 
-const babelPresets = require('./babelPresets');
+const {PLUGINS} = require('./babelPlugins');
 const moduleMap = require('./moduleMap');
+const babelPluginFbtGulp = require('./packages/babel-plugin-fbt/gulpfile');
 const {version} = require('./packages/fbt/package.json');
 const del = require('del');
 const gulp = require('gulp');
@@ -22,6 +23,7 @@ const derequire = require('gulp-derequire');
 const flatten = require('gulp-flatten');
 const header = require('gulp-header');
 const gulpif = require('gulp-if');
+const once = require('gulp-once');
 const rename = require('gulp-rename');
 const rewriteModules = require('gulp-rewrite-flowtyped-modules');
 const gulpUtil = require('gulp-util');
@@ -41,10 +43,6 @@ const paths = {
   css: ['runtime/**/*.css'],
 };
 
-const babelOptsJS = {
-  presets: [babelPresets()],
-};
-
 const COPYRIGHT = 'Copyright (c) Facebook, Inc. and its affiliates.';
 
 const COPYRIGHT_HEADER = `/**
@@ -103,9 +101,28 @@ function flatLib(job) {
 
 gulp.task(
   'modules',
-  gulp.series(() =>
-    flatLib(gulp.src(paths.runtime, {follow: true}).pipe(babel(babelOptsJS))),
-  ),
+  gulp.series(babelPluginFbtGulp.build, function buildModules() {
+    return flatLib(
+      gulp
+        .src(paths.runtime, {follow: true})
+        .pipe(once())
+        .pipe(
+          babel({
+            plugins: [
+              ...PLUGINS,
+              require('@babel/plugin-syntax-jsx'),
+              require('babel-plugin-fbt'),
+              require('babel-plugin-fbt-runtime'),
+              [
+                require('babel-preset-fbjs/plugins/rewrite-modules'),
+                {map: moduleMap},
+              ],
+              require('@babel/plugin-transform-react-jsx'),
+            ],
+          }),
+        ),
+    );
+  }),
 );
 
 // Copy raw source with rewritten modules to *.js.flow
@@ -168,13 +185,14 @@ gulp.task(
 
 gulp.task(
   'clean',
-  gulp.series(function () {
-    return del([
+  gulp.parallel(babelPluginFbtGulp.clean, () =>
+    del([
+      '.checksums',
       paths.published + '/*',
       '!' + paths.published + '/package.json',
       '!' + paths.published + '/README.md',
-    ]);
-  }),
+    ]),
+  ),
 );
 
 gulp.task(

jest-preprocessor.js

@@ -12,7 +12,17 @@ const cacheKeyPackages = [
   'babel-preset-fbjs',
   'babel-plugin-fbt',
   'babel-plugin-fbt-runtime',
-].map(name => path.join(path.dirname(require.resolve(name)), 'package.json'));
+].map(name =>
+  path.join(
+    path.dirname(
+      // Find the actual module root from the package.json file,
+      // otherwise, the result may be incorrect if a custom "main" path was set.
+      // See https://stackoverflow.com/a/49455609/104598
+      require.resolve(path.join(name, 'package.json')),
+    ),
+    'package.json',
+  ),
+);
 
 // This is basically fbjs-scripts/jest/preprocessor, but with the
 // ability to specify additional plugins
@@ -25,7 +35,7 @@ function createTransformer(opts /*: Object */ = {}) {
           require('babel-preset-fbjs'),
         ],
         plugins: opts.plugins || [],
-        filename: filename,
+        filename,
         retainLines: true,
       };
 

jest.config.js

@@ -31,6 +31,7 @@ module.exports = {
     {
       displayName: 'babel-plugin-fbt',
       roots: [fs.realpathSync(path.resolve('packages', 'babel-plugin-fbt'))],
+      testPathIgnorePatterns: ['packages/babel-plugin-fbt/dist/'],
     },
     {
       displayName: 'babel-plugin-fbt-runtime',

package.json

@@ -37,6 +37,7 @@
     "gulp-flatten": "^0.4.0",
     "gulp-header": "^2.0.9",
     "gulp-if": "^2.0.2",
+    "gulp-once": "^2.1.1",
     "gulp-rename": "^1.4.0",
     "gulp-rewrite-flowtyped-modules": "^0.0.8",
     "gulp-util": "^3.0.8",
@@ -66,6 +67,9 @@
     "flow:check": "flow check --show-all-errors",
     "flow:watch": "yarn watch 'yarn flow stop && yarn flow check --show-all-errors 2>&1 | tee .flow-results' . --ignoreDotFiles",
     "postinstall": "yarn build-runtime",
+    "//": "Needed because the yarn+workspace `install` process creates the bin scripts' symbolic links ONLY BEFORE running the install steps",
+    "create_dummy_bin_scripts_for_yarn_install": "mkdir -p packages/babel-plugin-fbt/dist/bin 2> /dev/null ; cp packages/babel-plugin-fbt/bin/*.bin.js packages/babel-plugin-fbt/dist/bin",
+    "preinstall": "yarn create_dummy_bin_scripts_for_yarn_install",
     "test:watch": "jest --watch",
     "test": "jest"
   },
@@ -76,8 +80,8 @@
   },
   "workspaces": [
     "demo-app",
-    "packages/babel-plugin-fbt",
     "packages/babel-plugin-fbt-runtime",
+    "packages/babel-plugin-fbt",
     "packages/fb-babel-plugin-utils",
     "packages/fb-tiger-hash",
     "packages/fbt"

packages/babel-plugin-fbt/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+yarn.lock
+
+# file checksums used by gulp-once
+.checksums

packages/babel-plugin-fbt/.npmignore

@@ -1,8 +1,9 @@
 # Since .gitignore is not considered when .npmignore is present
 node_modules
 
-translate/__tests__
-bin/__fixtures__
-bin/__tests__
-__mocks__
-__tests__
+# Example of expected npm output files: P150537602
+**
+!dist/**
+**/__tests__
+**/__fixtures__
+**/__mocks__

packages/babel-plugin-fbt/bin/__tests__/collectFBT-test.js

@@ -14,8 +14,16 @@ const commonPath = path.resolve(__dirname, 'FbtCommonForTests.json');
 
 describe('collectFBT', () => {
   function collect(source, options = {}) {
-    var collectOptions = [
-      require.resolve('../collectFBT'),
+    const scriptPath = path.join(
+      // Find the actual module root path
+      // It's dependent on the "main" path set in package.json
+      // See https://stackoverflow.com/a/49455609/104598
+      path.dirname(require.resolve('babel-plugin-fbt')),
+      'bin',
+      'collectFBT',
+    );
+    const collectOptions = [
+      scriptPath,
       '--packager=none',
       '--fbt-common-path=' + commonPath,
     ];