feat(babel): add performant destructuring

Per CRA, we add transform-destructuring with loose set to false.
However, for hooks, we turn selectiveLoose.

Author: swashata

packages/babel-preset-base/__tests__/preset.spec.ts

@@ -73,7 +73,7 @@ describe('preset in module', () => {
 			noJsonStrings: true,
 			noRuntime: true,
 		});
-		expect(plugins).toHaveLength(0);
+		expect(plugins).toHaveLength(1);
 	});
 
 	describe('for @babel/preset-env', () => {

packages/babel-preset-base/package.json

@@ -22,6 +22,7 @@
     "@babel/plugin-proposal-json-strings": "^7.2.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
+    "@babel/plugin-transform-destructuring": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",

packages/babel-preset-base/src/preset.ts

@@ -101,6 +101,30 @@ export const preset = (opts: PresetOptions | null = {}) => {
 		}
 	});
 
+	// Necessary to include regardless of the environment because
+	// in practice some other transforms (such as object-rest-spread)
+	// don't work without it: https://github.com/babel/babel/issues/7215
+	plugins.push([
+		'@babel/plugin-transform-destructuring',
+		{
+			// Use loose mode for performance:
+			// https://github.com/facebook/create-react-app/issues/5602
+			loose: false,
+			selectiveLoose: [
+				'useState',
+				'useEffect',
+				'useContext',
+				'useReducer',
+				'useCallback',
+				'useMemo',
+				'useRef',
+				'useImperativeHandle',
+				'useLayoutEffect',
+				'useDebugValue',
+			],
+		},
+	]);
+
 	// Return the preset and some of stage-3 plugins
 	// We will remove them, once it becomes stage-4, i.e included in preset-env
 	return {