[react-a11y] Add react-ui/accessibility to bundle build (#16804)

Author: trueadm

packages/react-ui/accessibility/focus-table.js

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/FocusTable');

packages/react-ui/accessibility/src/ReactFocusTable.js renamed to packages/react-ui/accessibility/src/FocusTable.js

@@ -11,7 +11,7 @@ import type {ReactScopeMethods} from 'shared/ReactTypes';
 import type {KeyboardEvent} from 'react-ui/events/keyboard';
 
 import React from 'react';
-import {tabFocusableImpl} from './TabbableScope';
+import {tabFocusableImpl} from 'react-ui/accessibility/tabbable-scope';
 import {useKeyboard} from 'react-ui/events/keyboard';
 
 type FocusCellProps = {

packages/react-ui/accessibility/src/ReactTabFocus.js renamed to packages/react-ui/accessibility/src/TabFocus.js

@@ -11,7 +11,7 @@ import type {ReactScopeMethods} from 'shared/ReactTypes';
 import type {KeyboardEvent} from 'react-ui/events/keyboard';
 
 import React from 'react';
-import {TabbableScope} from './TabbableScope';
+import {TabbableScope} from 'react-ui/accessibility/tabbable-scope';
 import {useKeyboard} from 'react-ui/events/keyboard';
 
 type TabFocusControllerProps = {

packages/react-ui/accessibility/src/__tests__/ReactFocusTable-test.internal.js renamed to packages/react-ui/accessibility/src/__tests__/FocusTable-test.internal.js

@@ -19,7 +19,7 @@ describe('ReactFocusTable', () => {
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableScopeAPI = true;
     ReactFeatureFlags.enableFlareAPI = true;
-    createFocusTable = require('../ReactFocusTable').createFocusTable;
+    createFocusTable = require('../FocusTable').createFocusTable;
     React = require('react');
   });
 

packages/react-ui/accessibility/src/__tests__/TabFocusController-test.internal.js renamed to packages/react-ui/accessibility/src/__tests__/TabFocus-test.internal.js

@@ -20,7 +20,7 @@ describe('TabFocusController', () => {
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableScopeAPI = true;
     ReactFeatureFlags.enableFlareAPI = true;
-    ReactTabFocus = require('../ReactTabFocus');
+    ReactTabFocus = require('../TabFocus');
     TabFocusController = ReactTabFocus.TabFocusController;
     React = require('react');
   });

packages/react-ui/accessibility/tab-focus.js

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/TabFocus');

packages/react-ui/accessibility/tabbable-scope.js

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/TabbableScope');

scripts/rollup/build.js

@@ -338,6 +338,8 @@ function getPlugins(
     useForks(forks),
     // Ensure we don't try to bundle any fbjs modules.
     forbidFBJSImports(),
+    // Replace any externals with their valid internal FB mappings
+    isFBBundle && replace(Bundles.fbBundleExternalsMap),
     // Use Node resolution mechanism.
     resolve({
       skip: externals,
@@ -452,11 +454,11 @@ async function createBundle(bundle, bundleType) {
   const packageName = Packaging.getPackageName(bundle.entry);
 
   let resolvedEntry = require.resolve(bundle.entry);
-  if (
+  const isFBBundle =
     bundleType === FB_WWW_DEV ||
     bundleType === FB_WWW_PROD ||
-    bundleType === FB_WWW_PROFILING
-  ) {
+    bundleType === FB_WWW_PROFILING;
+  if (isFBBundle) {
     const resolvedFBEntry = resolvedEntry.replace('.js', '.fb.js');
     if (fs.existsSync(resolvedFBEntry)) {
       resolvedEntry = resolvedFBEntry;
@@ -473,6 +475,10 @@ async function createBundle(bundle, bundleType) {
     const deps = Modules.getDependencies(bundleType, bundle.entry);
     externals = externals.concat(deps);
   }
+  if (isFBBundle) {
+    // Add any mapped fb bundle externals
+    externals = externals.concat(Object.values(Bundles.fbBundleExternalsMap));
+  }
 
   const importSideEffects = Modules.getImportSideEffects();
   const pureExternalModules = Object.keys(importSideEffects).filter(

scripts/rollup/bundles.js

@@ -659,8 +659,48 @@ const bundles = [
     global: 'ReactEventsTap',
     externals: ['react'],
   },
+
+  // React UI - Accessibility
+
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: NON_FIBER_RENDERER,
+    entry: 'react-ui/accessibility/focus-table',
+    global: 'ReactFocusTable',
+    externals: [
+      'react',
+      'react-ui/events/keyboard',
+      'react-ui/accessibility/tabbable-scope',
+    ],
+  },
+
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: NON_FIBER_RENDERER,
+    entry: 'react-ui/accessibility/tab-focus',
+    global: 'TabFocus',
+    externals: [
+      'react',
+      'react-ui/events/keyboard',
+      'react-ui/accessibility/tabbable-scope',
+    ],
+  },
+
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: NON_FIBER_RENDERER,
+    entry: 'react-ui/accessibility/tabbable-scope',
+    global: 'ReactTabbableScope',
+    externals: ['react'],
+  },
 ];
 
+const fbBundleExternalsMap = {
+  'react-ui/events/keyboard': 'ReactEventsKeyboard',
+  'react-ui/events/tap': 'ReactEventsTap',
+  'react-ui/accessibility/tabbable-scope': 'ReactTabbableScope',
+};
+
 // Based on deep-freeze by substack (public domain)
 function deepFreeze(o) {
   Object.freeze(o);
@@ -682,6 +722,7 @@ deepFreeze(bundleTypes);
 deepFreeze(moduleTypes);
 
 module.exports = {
+  fbBundleExternalsMap,
   bundleTypes,
   moduleTypes,
   bundles,