Files
react/scripts/rollup/bundles.js
Nicolas Gallagher 9ce8711d5a [react-events] Tap responder (#16628)
This is a partial replacement for the 'Press' responder:

1. `useTap` is scoped to pointers (no keyboard support). Our current thinking is
that "responders" should be limited to working with pointers, and that they can
be combined with 'useKeyboard' in user-space. For example, we might create a
'usePress' hook in user-space that combines 'useTap' with 'useKeyboard' to react
to both pointers and keyboard interactions.

2. `useTap` cancels the gesture once the pointer moves over an element that is
not within the responder target's subtree. This differs from `usePress` (and
React Native), where the gesture remains active after the pointer exits the
target's subtree and is restarted once the pointer reenters. One of the
drawbacks with the `usePress` behavior is that it requires repeatedly measuring
DOM elements (which can cause jank) to perform hit region tests. `useTap` avoids
doing this and relies on `document.elementFromPoint` only to support the
TouchEvent fallbacks.

3. `useTap` calls `onTapUpdate` when the active gesture's state changes,
`onTapEnd` when the gesture successfully completes. and `onTapCancel` when it
fails. There is no `onTap` callback. `usePress` did not explicitly report back
when the gesture failed, and product developers were confused about the
difference between `onPress` and `onPressEnd`.

4. `useTap` explicitly separates the PointerEvent implementation from the
MouseEvent/TouchEvent fallback.

5. `useTap` has better unit test coverage . All pointer types and the fallback
environment are tested. The shape of the gesture state object is also defined
and tested.
2019-09-04 17:09:33 -07:00

674 lines
15 KiB
JavaScript

'use strict';
const bundleTypes = {
UMD_DEV: 'UMD_DEV',
UMD_PROD: 'UMD_PROD',
UMD_PROFILING: 'UMD_PROFILING',
NODE_DEV: 'NODE_DEV',
NODE_PROD: 'NODE_PROD',
NODE_PROFILING: 'NODE_PROFILING',
FB_WWW_DEV: 'FB_WWW_DEV',
FB_WWW_PROD: 'FB_WWW_PROD',
FB_WWW_PROFILING: 'FB_WWW_PROFILING',
RN_OSS_DEV: 'RN_OSS_DEV',
RN_OSS_PROD: 'RN_OSS_PROD',
RN_OSS_PROFILING: 'RN_OSS_PROFILING',
RN_FB_DEV: 'RN_FB_DEV',
RN_FB_PROD: 'RN_FB_PROD',
RN_FB_PROFILING: 'RN_FB_PROFILING',
};
const {
UMD_DEV,
UMD_PROD,
UMD_PROFILING,
NODE_DEV,
NODE_PROD,
NODE_PROFILING,
FB_WWW_DEV,
FB_WWW_PROD,
FB_WWW_PROFILING,
RN_OSS_DEV,
RN_OSS_PROD,
RN_OSS_PROFILING,
RN_FB_DEV,
RN_FB_PROD,
RN_FB_PROFILING,
} = bundleTypes;
const moduleTypes = {
// React
ISOMORPHIC: 'ISOMORPHIC',
// Individual renderers. They bundle the reconciler. (e.g. ReactDOM)
RENDERER: 'RENDERER',
// Helper packages that access specific renderer's internals. (e.g. TestUtils)
RENDERER_UTILS: 'RENDERER_UTILS',
// Standalone reconciler for third-party renderers.
RECONCILER: 'RECONCILER',
// Non-Fiber implementations like SSR and Shallow renderers.
NON_FIBER_RENDERER: 'NON_FIBER_RENDERER',
};
const {
ISOMORPHIC,
RENDERER,
RENDERER_UTILS,
RECONCILER,
NON_FIBER_RENDERER,
} = moduleTypes;
const bundles = [
/******* Isomorphic *******/
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
UMD_PROFILING,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
FB_WWW_PROFILING,
],
moduleType: ISOMORPHIC,
entry: 'react',
global: 'React',
externals: [],
},
/******* React DOM *******/
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
UMD_PROFILING,
NODE_DEV,
NODE_PROD,
NODE_PROFILING,
FB_WWW_DEV,
FB_WWW_PROD,
FB_WWW_PROFILING,
],
moduleType: RENDERER,
entry: 'react-dom',
global: 'ReactDOM',
externals: ['react'],
},
/******* Test Utils *******/
{
moduleType: RENDERER_UTILS,
bundleTypes: [FB_WWW_DEV, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
entry: 'react-dom/test-utils',
global: 'ReactTestUtils',
externals: ['react', 'react-dom'],
},
/* React DOM internals required for react-native-web (e.g., to shim native events from react-dom) */
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: RENDERER_UTILS,
entry: 'react-dom/unstable-native-dependencies',
global: 'ReactDOMUnstableNativeDependencies',
externals: ['react', 'react-dom'],
},
/******* React DOM Server *******/
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-dom/server.browser',
global: 'ReactDOMServer',
externals: ['react'],
babel: opts =>
Object.assign({}, opts, {
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: NON_FIBER_RENDERER,
entry: 'react-dom/server.node',
externals: ['react', 'stream'],
babel: opts =>
Object.assign({}, opts, {
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
/******* React DOM Fizz Server *******/
{
bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
moduleType: RENDERER,
entry: 'react-dom/unstable-fizz.browser',
global: 'ReactDOMFizzServer',
externals: ['react'],
},
{
bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
moduleType: RENDERER,
entry: 'react-dom/unstable-fizz.node',
global: 'ReactDOMFizzServer',
externals: ['react'],
},
/******* React ART *******/
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: RENDERER,
entry: 'react-art',
global: 'ReactART',
externals: ['react'],
babel: opts =>
Object.assign({}, opts, {
// Include JSX
presets: opts.presets.concat([
require.resolve('@babel/preset-react'),
require.resolve('@babel/preset-flow'),
]),
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
/******* React Native *******/
{
bundleTypes: [RN_FB_DEV, RN_FB_PROD, RN_FB_PROFILING],
moduleType: RENDERER,
entry: 'react-native-renderer',
global: 'ReactNativeRenderer',
externals: ['react-native'],
babel: opts =>
Object.assign({}, opts, {
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
{
bundleTypes: [RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING],
moduleType: RENDERER,
entry: 'react-native-renderer',
global: 'ReactNativeRenderer',
externals: ['react-native'],
babel: opts =>
Object.assign({}, opts, {
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
/******* React Native Fabric *******/
{
bundleTypes: [RN_FB_DEV, RN_FB_PROD, RN_FB_PROFILING],
moduleType: RENDERER,
entry: 'react-native-renderer/fabric',
global: 'ReactFabric',
externals: ['react-native'],
babel: opts =>
Object.assign({}, opts, {
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
{
bundleTypes: [RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING],
moduleType: RENDERER,
entry: 'react-native-renderer/fabric',
global: 'ReactFabric',
externals: ['react-native'],
babel: opts =>
Object.assign({}, opts, {
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
/******* React Test Renderer *******/
{
bundleTypes: [FB_WWW_DEV, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
moduleType: RENDERER,
entry: 'react-test-renderer',
global: 'ReactTestRenderer',
externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
babel: opts =>
Object.assign({}, opts, {
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
{
bundleTypes: [FB_WWW_DEV, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
moduleType: NON_FIBER_RENDERER,
entry: 'react-test-renderer/shallow',
global: 'ReactShallowRenderer',
externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
babel: opts =>
Object.assign({}, opts, {
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
/******* React Noop Renderer (used for tests) *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: RENDERER,
entry: 'react-noop-renderer',
global: 'ReactNoopRenderer',
externals: ['react', 'scheduler', 'scheduler/unstable_mock', 'expect'],
},
/******* React Noop Persistent Renderer (used for tests) *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: RENDERER,
entry: 'react-noop-renderer/persistent',
global: 'ReactNoopRendererPersistent',
externals: ['react', 'scheduler', 'expect'],
},
/******* React Noop Server Renderer (used for tests) *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: RENDERER,
entry: 'react-noop-renderer/server',
global: 'ReactNoopRendererServer',
externals: ['react', 'scheduler', 'expect'],
},
/******* React Reconciler *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: RECONCILER,
entry: 'react-reconciler',
global: 'ReactReconciler',
externals: ['react'],
},
/******* React Persistent Reconciler *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: RECONCILER,
entry: 'react-reconciler/persistent',
global: 'ReactPersistentReconciler',
externals: ['react'],
},
/******* React Stream *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: RECONCILER,
entry: 'react-stream',
global: 'ReactStream',
externals: ['react'],
},
/******* Reflection *******/
{
moduleType: RENDERER_UTILS,
bundleTypes: [NODE_DEV, NODE_PROD],
entry: 'react-reconciler/reflection',
global: 'ReactFiberTreeReflection',
externals: [],
},
/******* React Is *******/
{
bundleTypes: [
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
UMD_DEV,
UMD_PROD,
],
moduleType: ISOMORPHIC,
entry: 'react-is',
global: 'ReactIs',
externals: [],
},
/******* React Debug Tools *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: ISOMORPHIC,
entry: 'react-debug-tools',
global: 'ReactDebugTools',
externals: [],
},
/******* React Cache (experimental) *******/
{
bundleTypes: [
FB_WWW_DEV,
FB_WWW_PROD,
NODE_DEV,
NODE_PROD,
UMD_DEV,
UMD_PROD,
],
moduleType: ISOMORPHIC,
entry: 'react-cache',
global: 'ReactCache',
externals: ['react', 'scheduler'],
},
/******* createComponentWithSubscriptions *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: ISOMORPHIC,
entry: 'create-subscription',
global: 'createSubscription',
externals: ['react'],
babel: opts =>
Object.assign({}, opts, {
plugins: opts.plugins.concat([
[require.resolve('@babel/plugin-transform-classes'), {loose: true}],
]),
}),
},
/******* Hook for managing subscriptions safely *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: ISOMORPHIC,
entry: 'use-subscription',
global: 'useSubscription',
externals: ['react'],
},
/******* React Scheduler (experimental) *******/
{
bundleTypes: [
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
FB_WWW_PROFILING,
],
moduleType: ISOMORPHIC,
entry: 'scheduler',
global: 'Scheduler',
externals: [],
},
/******* React Scheduler Mock (experimental) *******/
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: ISOMORPHIC,
entry: 'scheduler/unstable_mock',
global: 'SchedulerMock',
externals: [],
},
/******* Jest React (experimental) *******/
{
bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
moduleType: ISOMORPHIC,
entry: 'jest-react',
global: 'JestReact',
externals: [],
},
/******* ESLint Plugin for Hooks (proposal) *******/
{
// TODO: it's awkward to create a bundle for this but if we don't, the package
// won't get copied. We also can't create just DEV bundle because it contains a
// NODE_ENV check inside. We should probably tweak our build process to allow
// "raw" packages that don't get bundled.
bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV],
moduleType: ISOMORPHIC,
entry: 'eslint-plugin-react-hooks',
global: 'ESLintPluginReactHooks',
externals: [],
},
/******* React Fresh *******/
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: ISOMORPHIC,
entry: 'react-refresh/babel',
global: 'ReactFreshBabelPlugin',
externals: [],
},
{
bundleTypes: [NODE_DEV, NODE_PROD],
moduleType: ISOMORPHIC,
entry: 'react-refresh/runtime',
global: 'ReactFreshRuntime',
externals: [],
},
{
bundleTypes: [
FB_WWW_DEV,
FB_WWW_PROD,
FB_WWW_PROFILING,
NODE_DEV,
NODE_PROD,
NODE_PROFILING,
],
moduleType: ISOMORPHIC,
entry: 'scheduler/tracing',
global: 'SchedulerTracing',
externals: [],
},
/******* React Events (experimental) *******/
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/context-menu',
global: 'ReactEventsContextMenu',
externals: ['react'],
},
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/drag',
global: 'ReactEventsDrag',
externals: ['react'],
},
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/focus',
global: 'ReactEventsFocus',
externals: ['react'],
},
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/hover',
global: 'ReactEventsHover',
externals: ['react'],
},
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/input',
global: 'ReactEventsInput',
externals: ['react'],
},
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/keyboard',
global: 'ReactEventsKeyboard',
externals: ['react'],
},
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/press',
global: 'ReactEventsPress',
externals: ['react'],
},
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/scroll',
global: 'ReactEventsScroll',
externals: ['react'],
},
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/swipe',
global: 'ReactEventsSwipe',
externals: ['react'],
},
{
bundleTypes: [
UMD_DEV,
UMD_PROD,
NODE_DEV,
NODE_PROD,
FB_WWW_DEV,
FB_WWW_PROD,
],
moduleType: NON_FIBER_RENDERER,
entry: 'react-events/tap',
global: 'ReactEventsTap',
externals: ['react'],
},
];
// Based on deep-freeze by substack (public domain)
function deepFreeze(o) {
Object.freeze(o);
Object.getOwnPropertyNames(o).forEach(function(prop) {
if (
o[prop] !== null &&
(typeof o[prop] === 'object' || typeof o[prop] === 'function') &&
!Object.isFrozen(o[prop])
) {
deepFreeze(o[prop]);
}
});
return o;
}
// Don't accidentally mutate config as part of the build
deepFreeze(bundles);
deepFreeze(bundleTypes);
deepFreeze(moduleTypes);
module.exports = {
bundleTypes,
moduleTypes,
bundles,
};