feat(preset-optimise): add & rename options, better defaults

@packages/babel-preset-optimise/.verb.md

@@ -2,7 +2,7 @@
 
 ```js
 module.exports = {
-  presets: 'babel-preset-optimise',
+  presets: ['babel-preset-optimise'],
 };
 ```
 

@packages/babel-preset-optimise/README.md

@@ -90,7 +90,7 @@ $ yarn add babel-preset-optimise
 
 ```js
 module.exports = {
-  presets: 'babel-preset-optimise',
+  presets: ['babel-preset-optimise'],
 };
 ```
 
@@ -113,11 +113,16 @@ for best and small output.
 
 _Generated using [jest-runner-docs](https://ghub.now.sh/jest-runner-docs)._
 
-### [babelPresetOptimize](./src/index.js#L15)
+### [babelPresetOptimize](./src/index.js#L22)
 
 Be aware that when you use `minifyBuiltins: true` you _MAY_ get a bigger output,
 but that's not always guaranteed, just try for your case.
 
+If you want to use JSX (React) pass `options.jsx: true`. If you want to use JSX
+(React) + TypeScript pass both `{ jsx: true, typescript: true }`. If you wan to
+use Preact + TypeScript, `{ jsx: { pragma: 'h' }, typescript: true }`, if
+`options.jsx` is an object, it is directly passed to `preset-react`.
+
 <span id="babelpresetoptimize-signature"></span>
 
 #### Signature
@@ -131,12 +136,15 @@ function(api, options)
 #### Params
 
 - `options` **{object}** - optionally control what can be included
-- `options.react` **{boolean}** - default `false`, includes the React preset and
-  3 react plugins
-- `options.modules` **{boolean}** - default `false`, pass non-falsey value to
-  transform to CommonJS
+- `options.jsx` **{boolean}** - default `false`, pass `true` if you want
+  `react`; pass an object for more customization (passed to react preset)
+- `options.commonjs` **{boolean}** - default `false`, pass non-falsey value to
+  transform ESModules to CommonJS
 - `options.typescript` **{boolean}** - default `false`, includes the TypeScript
   preset
+- `options.development` **{boolean}** - default `false`, disables few plugins;
+  when it is `true` and `options.jsx` is enabled (true or object) we add
+  `options.jsx.development: true` too
 - `options.minifyBuiltins` **{boolean}** - default `false`, includes
   [babel-plugin-minify-builtins][]
 

@packages/babel-preset-optimise/docs/src/index.md

@@ -1,10 +1,15 @@
 _Generated using [jest-runner-docs](https://ghub.now.sh/jest-runner-docs)._
 
-### [babelPresetOptimize](./src/index.js#L15)
+### [babelPresetOptimize](./src/index.js#L22)
 
 Be aware that when you use `minifyBuiltins: true` you _MAY_ get a bigger output,
 but that's not always guaranteed, just try for your case.
 
+If you want to use JSX (React) pass `options.jsx: true`. If you want to use JSX
+(React) + TypeScript pass both `{ jsx: true, typescript: true }`. If you wan to
+use Preact + TypeScript, `{ jsx: { pragma: 'h' }, typescript: true }`, if
+`options.jsx` is an object, it is directly passed to `preset-react`.
+
 <span id="babelpresetoptimize-signature"></span>
 
 #### Signature
@@ -18,11 +23,14 @@ function(api, options)
 #### Params
 
 - `options` **{object}** - optionally control what can be included
-- `options.react` **{boolean}** - default `false`, includes the React preset and
-  3 react plugins
-- `options.modules` **{boolean}** - default `false`, pass non-falsey value to
-  transform to CommonJS
+- `options.jsx` **{boolean}** - default `false`, pass `true` if you want
+  `react`; pass an object for more customization (passed to react preset)
+- `options.commonjs` **{boolean}** - default `false`, pass non-falsey value to
+  transform ESModules to CommonJS
 - `options.typescript` **{boolean}** - default `false`, includes the TypeScript
   preset
+- `options.development` **{boolean}** - default `false`, disables few plugins;
+  when it is `true` and `options.jsx` is enabled (true or object) we add
+  `options.jsx.development: true` too
 - `options.minifyBuiltins` **{boolean}** - default `false`, includes
   [babel-plugin-minify-builtins][]

@packages/babel-preset-optimise/src/index.js

@@ -4,41 +4,63 @@
  * Be aware that when you use `minifyBuiltins: true` you _MAY_ get a bigger output,
  * but that's not always guaranteed, just try for your case.
  *
+ * If you want to use JSX (React) pass `options.jsx: true`.
+ * If you want to use JSX (React) + TypeScript pass both `{ jsx: true, typescript: true }`.
+ * If you wan to use Preact + TypeScript, `{ jsx: { pragma: 'h' }, typescript: true }`,
+ * if `options.jsx` is an object, it is directly passed to `preset-react`.
+ *
+ *
  * @name  babelPresetOptimize
  * @param {object} options - optionally control what can be included
- * @param {boolean} options.react - default `false`, includes the React preset and 3 react plugins
- * @param {boolean} options.modules - default `false`, pass non-falsey value to transform to CommonJS
+ * @param {boolean} options.jsx - default `false`, pass `true` if you want `react`; pass an object for more customization (passed to react preset)
+ * @param {boolean} options.commonjs - default `false`, pass non-falsey value to transform ESModules to CommonJS
  * @param {boolean} options.typescript - default `false`, includes the TypeScript preset
+ * @param {boolean} options.development - default `false`, disables few plugins; when it is `true` and `options.jsx` is enabled (true or object) we add `options.jsx.development: true` too
  * @param {boolean} options.minifyBuiltins - default `false`, includes [babel-plugin-minify-builtins][]
  * @public
  */
 module.exports = function babelPresetOptimize(api, options) {
   api.assertVersion(7);
 
   // NOTE: minifyBuiltins: true might output a bigger output - it depends, try your codebase.
-  const {
-    react = false,
-    typescript = false,
-    minifyBuiltins = false,
-    modules = false,
-  } = {
+  const opts = {
+    jsx: false,
+    commonjs: false,
+    typescript: false,
+    development: false,
+    minifyBuiltins: false,
     ...options,
   };
 
+  if (opts.development === true && opts.jsx) {
+    opts.jsx =
+      opts.jsx === true
+        ? { development: true }
+        : { ...opts.jsx, development: true };
+  }
+
+  const hasJsxOptions = opts.jsx && typeof opts.jsx === 'object';
+  const pragma = hasJsxOptions ? opts.jsx.pragma : undefined;
+  const jsxPreset = hasJsxOptions
+    ? ['@babel/preset-react', opts.jsx]
+    : undefined;
+
+  const react = opts.jsx === true ? '@babel/preset-react' : jsxPreset;
+
   return {
     presets: [
-      typescript && [
+      opts.typescript && [
         '@babel/preset-typescript',
-        { isTSX: react, allExtensions: true },
+        { jsxPragma: pragma, isTSX: true, allExtensions: true },
       ],
       '@babel/preset-modules',
-      react && '@babel/preset-react',
+      react,
     ].filter(Boolean),
     plugins: [
-      modules && '@babel/plugin-transform-modules-commonjs',
+      opts.commonjs && '@babel/plugin-transform-modules-commonjs',
       'babel-plugin-annotate-pure-calls',
       'babel-plugin-dev-expression',
-      minifyBuiltins && 'babel-plugin-minify-builtins',
+      opts.minifyBuiltins && 'babel-plugin-minify-builtins',
       'babel-plugin-minify-constant-folding',
       'babel-plugin-transform-node-env-inline',
       'babel-plugin-transform-inline-environment-variables',
@@ -47,7 +69,7 @@ module.exports = function babelPresetOptimize(api, options) {
       ['babel-plugin-transform-remove-console', { exclude: ['error', 'warn'] }],
       'babel-plugin-transform-remove-undefined',
       'babel-plugin-transform-undefined-to-void',
-      'babel-plugin-unassert',
+      opts.development !== true && 'babel-plugin-unassert',
 
       // ! enable when fix https://github.com/babel/minify/issues/973
       // ! use `terser` instead! through rollup for example.
@@ -56,10 +78,11 @@ module.exports = function babelPresetOptimize(api, options) {
 
       react && 'babel-plugin-transform-react-constant-elements',
       react && 'babel-plugin-transform-react-pure-class-to-function',
-      react && [
-        'babel-plugin-transform-react-remove-prop-types',
-        { removeImport: true },
-      ],
+      opts.development !== true &&
+        react && [
+          'babel-plugin-transform-react-remove-prop-types',
+          { removeImport: true },
+        ],
     ].filter(Boolean),
   };
 };

@packages/babel-preset-optimise/test/index.js

@@ -22,8 +22,8 @@ test('should preset return plugins and presets', () => {
   );
 });
 
-test('should include react presets', () => {
-  const config = preset({ assertVersion() {} }, { react: true });
+test('should include react presets & plugins', () => {
+  const config = preset({ assertVersion() {} }, { jsx: true });
 
   expect(config).toHaveProperty('plugins');
   expect(config).toHaveProperty('presets');
@@ -33,10 +33,21 @@ test('should include react presets', () => {
   );
 });
 
+test('should include transform-modules-commonjs when options.commonjs: true', () => {
+  const config = preset({ assertVersion() {} }, { commonjs: true });
+
+  expect(config).toHaveProperty('plugins');
+  expect(config).toHaveProperty('presets');
+  expect(config.presets.length).toBe(1);
+  expect(config.plugins).toEqual(
+    expect.arrayContaining(['@babel/plugin-transform-modules-commonjs']),
+  );
+});
+
 test('should include react and typescript presets', () => {
   const config = preset(
     { assertVersion() {} },
-    { typescript: true, react: true },
+    { typescript: true, jsx: true },
   );
 
   expect(config.presets.length).toBe(3);
@@ -49,6 +60,25 @@ test('should include react and typescript presets', () => {
   );
 });
 
+test('should allow JSX/react customization', () => {
+  const config = preset(
+    { assertVersion() {} },
+    { typescript: true, jsx: { pragma: 'h', useSpread: true } },
+  );
+
+  expect(config.presets.length).toBe(3);
+  expect(config.presets).toEqual(
+    expect.arrayContaining([
+      '@babel/preset-modules',
+      ['@babel/preset-react', { pragma: 'h', useSpread: true }],
+      [
+        '@babel/preset-typescript',
+        { jsxPragma: 'h', isTSX: true, allExtensions: true },
+      ],
+    ]),
+  );
+});
+
 test('should include minify-builtins plugin', () => {
   const config = preset({ assertVersion() {} }, { minifyBuiltins: true });
 
@@ -59,10 +89,20 @@ test('should include minify-builtins plugin', () => {
   );
 });
 
+test('should include all presets (3) and plugins (15)', () => {
+  const config = preset(
+    { assertVersion() {} },
+    { jsx: true, commonjs: true, typescript: true, minifyBuiltins: true },
+  );
+
+  expect(config.presets.length).toBe(3);
+  expect(config.plugins.length).toBe(15);
+});
+
 test('should add react plugins when react: true', () => {
   const config = preset(
     { assertVersion() {} },
-    { minifyBuiltins: true, react: true },
+    { minifyBuiltins: true, jsx: true },
   );
 
   expect(config.presets.length).toBe(2);