From 7c802de797262dba582c8bf99e3793be75b5b73b Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 17 Sep 2019 20:22:09 +0200 Subject: [PATCH] [react-a11y] Add react-ui/accessibility to bundle build (#16804) --- .../react-ui/accessibility/focus-table.js | 12 ++++++ .../src/{ReactFocusTable.js => FocusTable.js} | 2 +- .../src/{ReactTabFocus.js => TabFocus.js} | 2 +- ...nternal.js => FocusTable-test.internal.js} | 2 +- ....internal.js => TabFocus-test.internal.js} | 2 +- packages/react-ui/accessibility/tab-focus.js | 12 ++++++ .../react-ui/accessibility/tabbable-scope.js | 12 ++++++ scripts/rollup/build.js | 12 ++++-- scripts/rollup/bundles.js | 41 +++++++++++++++++++ 9 files changed, 90 insertions(+), 7 deletions(-) create mode 100644 packages/react-ui/accessibility/focus-table.js rename packages/react-ui/accessibility/src/{ReactFocusTable.js => FocusTable.js} (98%) rename packages/react-ui/accessibility/src/{ReactTabFocus.js => TabFocus.js} (98%) rename packages/react-ui/accessibility/src/__tests__/{ReactFocusTable-test.internal.js => FocusTable-test.internal.js} (99%) rename packages/react-ui/accessibility/src/__tests__/{TabFocusController-test.internal.js => TabFocus-test.internal.js} (99%) create mode 100644 packages/react-ui/accessibility/tab-focus.js create mode 100644 packages/react-ui/accessibility/tabbable-scope.js diff --git a/packages/react-ui/accessibility/focus-table.js b/packages/react-ui/accessibility/focus-table.js new file mode 100644 index 0000000000000..bdd6c08fe9b4a --- /dev/null +++ b/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'); diff --git a/packages/react-ui/accessibility/src/ReactFocusTable.js b/packages/react-ui/accessibility/src/FocusTable.js similarity index 98% rename from packages/react-ui/accessibility/src/ReactFocusTable.js rename to packages/react-ui/accessibility/src/FocusTable.js index e0ab4e7640da1..30741fd876bd8 100644 --- a/packages/react-ui/accessibility/src/ReactFocusTable.js +++ b/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 = { diff --git a/packages/react-ui/accessibility/src/ReactTabFocus.js b/packages/react-ui/accessibility/src/TabFocus.js similarity index 98% rename from packages/react-ui/accessibility/src/ReactTabFocus.js rename to packages/react-ui/accessibility/src/TabFocus.js index d09808ea3732f..8183072a8c112 100644 --- a/packages/react-ui/accessibility/src/ReactTabFocus.js +++ b/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 = { diff --git a/packages/react-ui/accessibility/src/__tests__/ReactFocusTable-test.internal.js b/packages/react-ui/accessibility/src/__tests__/FocusTable-test.internal.js similarity index 99% rename from packages/react-ui/accessibility/src/__tests__/ReactFocusTable-test.internal.js rename to packages/react-ui/accessibility/src/__tests__/FocusTable-test.internal.js index f096366087f1e..28e011fbd2ecf 100644 --- a/packages/react-ui/accessibility/src/__tests__/ReactFocusTable-test.internal.js +++ b/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'); }); diff --git a/packages/react-ui/accessibility/src/__tests__/TabFocusController-test.internal.js b/packages/react-ui/accessibility/src/__tests__/TabFocus-test.internal.js similarity index 99% rename from packages/react-ui/accessibility/src/__tests__/TabFocusController-test.internal.js rename to packages/react-ui/accessibility/src/__tests__/TabFocus-test.internal.js index 6edc23c634e87..db1491ca0e6e3 100644 --- a/packages/react-ui/accessibility/src/__tests__/TabFocusController-test.internal.js +++ b/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'); }); diff --git a/packages/react-ui/accessibility/tab-focus.js b/packages/react-ui/accessibility/tab-focus.js new file mode 100644 index 0000000000000..493333ccad3f6 --- /dev/null +++ b/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'); diff --git a/packages/react-ui/accessibility/tabbable-scope.js b/packages/react-ui/accessibility/tabbable-scope.js new file mode 100644 index 0000000000000..a54d81210f893 --- /dev/null +++ b/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'); diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js index af98240c927d7..92f1f3a754648 100644 --- a/scripts/rollup/build.js +++ b/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( diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 4e4e4a4cbe01b..b30648c810e68 100644 --- a/scripts/rollup/bundles.js +++ b/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,