Bundle headless plugins

Summary: Current temporary limitations: all headless plugins are bundled with Flipper.

Reviewed By: antonk52

Differential Revision: D36098168

fbshipit-source-id: c58abe41776157258a5c39a80a5c1a33cf3f42c5

desktop/babel-transformer/src/__tests__/plugin-flipper-requires.node.tsx

@@ -18,10 +18,16 @@ const babelOptions = {
   filename: 'index.js',
 };
 
+const babelOptionsPlugin = {
+  ...babelOptions,
+  root: 'plugins/randomPlugin/',
+  filename: 'plugins/randomPlugin/index.js',
+};
+
 test('transform react requires to global object', () => {
   const src = 'require("react")';
   const ast = parse(src);
-  const transformed = transformFromAstSync(ast, src, babelOptions)!.ast;
+  const transformed = transformFromAstSync(ast, src, babelOptionsPlugin)!.ast;
   const {code} = generate(transformed!);
   expect(code).toBe('global.React;');
 });
@@ -29,7 +35,7 @@ test('transform react requires to global object', () => {
 test('transform react-dom requires to global object', () => {
   const src = 'require("react-dom")';
   const ast = parse(src);
-  const transformed = transformFromAstSync(ast, src, babelOptions)!.ast;
+  const transformed = transformFromAstSync(ast, src, babelOptionsPlugin)!.ast;
   const {code} = generate(transformed!);
   expect(code).toBe('global.ReactDOM;');
 });
@@ -37,7 +43,7 @@ test('transform react-dom requires to global object', () => {
 test('transform react-dom/client requires to global object', () => {
   const src = 'require("react-dom/client")';
   const ast = parse(src);
-  const transformed = transformFromAstSync(ast, src, babelOptions)!.ast;
+  const transformed = transformFromAstSync(ast, src, babelOptionsPlugin)!.ast;
   const {code} = generate(transformed!);
   expect(code).toBe('global.ReactDOMClient;');
 });
@@ -45,19 +51,35 @@ test('transform react-dom/client requires to global object', () => {
 test('transform flipper requires to global object', () => {
   const src = 'require("flipper")';
   const ast = parse(src);
-  const transformed = transformFromAstSync(ast, src, babelOptions)!.ast;
+  const transformed = transformFromAstSync(ast, src, babelOptionsPlugin)!.ast;
   const {code} = generate(transformed!);
   expect(code).toBe('global.Flipper;');
 });
 
+test('do NOT transform flipper requires outside of plugins folder', () => {
+  const src = 'require("flipper");';
+  const ast = parse(src);
+  const transformed = transformFromAstSync(ast, src, babelOptions)!.ast;
+  const {code} = generate(transformed!);
+  expect(code).toBe('require("flipper");');
+});
+
 test('transform React identifier to global.React', () => {
   const src = 'React;';
   const ast = parse(src);
-  const transformed = transformFromAstSync(ast, src, babelOptions)!.ast;
+  const transformed = transformFromAstSync(ast, src, babelOptionsPlugin)!.ast;
   const {code} = generate(transformed!);
   expect(code).toBe('global.React;');
 });
 
+test('do NOT transform React identifier to global.React outside of plugins folder', () => {
+  const src = 'React;';
+  const ast = parse(src);
+  const transformed = transformFromAstSync(ast, src, babelOptions)!.ast;
+  const {code} = generate(transformed!);
+  expect(code).toBe('React;');
+});
+
 test('do NOT transform local React namespace import to global.React', () => {
   const src = `import * as React from 'react';`;
   const ast = parse(src, {sourceType: 'module'});
@@ -70,7 +92,7 @@ test('throw error when requiring outside the plugin', () => {
   const src = 'require("../test.js")';
   const ast = parse(src);
   expect(() => {
-    transformFromAstSync(ast, src, babelOptions);
+    transformFromAstSync(ast, src, babelOptionsPlugin);
   }).toThrow();
 });
 

desktop/babel-transformer/src/plugin-flipper-requires.tsx

@@ -16,9 +16,16 @@ import {
   tryReplaceGlobalReactUsage,
 } from './replace-flipper-requires';
 
+const sourceRootDir = resolve(__dirname, '../..');
+const pluginRootDir = resolve(__dirname, '../../plugin');
+
 // do not apply this transform for these paths
 const EXCLUDE_PATHS = ['relay-devtools/DevtoolsUI'];
 function isExcludedPath(path: string) {
+  // Replace requires and React for plugins, but not for the Flipper core code which can access bundled React and other Flipper packages
+  if (path.startsWith(sourceRootDir) && !path.startsWith(pluginRootDir)) {
+    return true;
+  }
   for (const epath of EXCLUDE_PATHS) {
     if (path.indexOf(epath) > -1) {
       return true;

desktop/babel-transformer/src/replace-flipper-requires.tsx

@@ -51,6 +51,7 @@ export function tryReplaceGlobalReactUsage(path: NodePath<Identifier>) {
   if (
     path.node.name === 'React' &&
     (path.parentPath.node as any).id !== path.node &&
+    path.parent.type !== 'ObjectProperty' &&
     !isReactImportIdentifier(path)
   ) {
     path.replaceWith(identifier('global.React'));

desktop/babel-transformer/src/transform-server-dev.tsx

@@ -11,6 +11,7 @@ import {default as doTransform} from './transform';
 import {default as getCacheKey} from './get-cache-key';
 
 const presets = [
+  '@babel/preset-react',
   [
     '@babel/preset-env',
     {

desktop/babel-transformer/src/transform-server-prod.tsx

@@ -11,6 +11,7 @@ import {default as doTransform} from './transform';
 import {default as getCacheKey} from './get-cache-key';
 
 const presets = [
+  '@babel/preset-react',
   [
     '@babel/preset-env',
     {