Configure babel to ignore babelrc and use babel-preset-yoshi (#917)

argshook · Jan 30, 2019 · c474044 · c474044
1 parent a344295
commit c474044
Show file tree

Hide file tree

Showing 37 changed files with 135 additions and 288 deletions.
diff --git a/docs/api/cli.md b/docs/api/cli.md
@@ -108,7 +108,7 @@ Explictly emit bundle source maps.
 
 This task will perform the following:
 
-1. Compile using `TypeScript` (`*.ts`) or `babel` (`*.js`) files into `dist/`. In case you do not want to transpile server (node), you can remove `.babelrc`/`babel.config.js`/`tsconfig`/package json's `babel` key. If you still need those (for transpiling client code), please use `yoshi.runIndividualTranspiler`.
+1. Compile using `TypeScript` (`*.ts`) or `babel` (`*.js`) files into `dist/`.
 2. Copy assets to `dist` folder (ejs/html/images...).
 
 You can specify multiple entry points in your `package.json` file. This gives the ability build multiple bundles at once. More info about Webpack entries can be found [here](http://webpack.github.io/docs/configuration.html#entry).

diff --git a/docs/api/configuration.md b/docs/api/configuration.md
@@ -178,10 +178,6 @@ For example:
 }
 ```
 
-## runIndividualTranspiler
-
-In case you don't want to transpile your server (node) code, and you still need `.babelrc`/`tsconfig`, you can add `runIndividualTranspiler` flag to skip server transpiling.
-
 ## transpileTests
 
 An option to not transpile tests with Babel (via `@babel/register`). Defaults to `true`.

diff --git a/docs/guides/babel-setup.md b/docs/guides/babel-setup.md
@@ -6,27 +6,9 @@ sidebar_label: Babel Setup
 
 ## Introduction
 
-Yoshi provides its own preset for full-stack, client or Node.js projects. It is pre-configured, maintained and tuned for the current state of Yoshi.
+Yoshi comes with its own preset for full-stack, client or Node.js projects. It is pre-configured, maintained and tuned for the current state of Yoshi.
 
-## Usages in Yoshi projects
-
-Configure `yoshi` to use its built-in preset by adding the following to your `package.json` or with separate `babelrc`/`babel.config.js` config:
-
-```json
-{
-  "babel": {
-    "presets": ["yoshi"]
-  }
-}
-```
-
-## Configuration options
-
-- `targets`: Avoid redundant transformations if specified targets already support some of ESNext features. [Read more](https://babeljs.io/docs/plugins/preset-env/#targets).
-  By default, if no `targets` provided, it will compile for **all** targets (`node` on test environment).
-- `modules` (defaults to `"commonjs"` in `test` environment and to false in `production` and `development` ): Enable transformation of ES6 module syntax to another module type. [Read more](https://babeljs.io/docs/plugins/preset-env/#modules). Set `false` to ignore module transforms.
-- `ignoreReact` (default: `false`): Ignores plugins and presets related to React.
-- `debug` (default: `false`): Outputs the targets/plugins used according to specified targets. [Read more](https://babeljs.io/docs/plugins/preset-env/#debug).
+**Note:** There is no need to configure Babel with `.babelrc` or `babel.config.js`.
 
 ## Modes
 
@@ -49,14 +31,17 @@ The preset behaves differently according to the environment. The environment is
 ### Environment specific plugins:
 
 #### `test`
-  - [dynamic-import-node](https://github.com/airbnb/babel-plugin-dynamic-import-node) - Babel plugin to transpile import() to a deferred require(), for node.
-  - [syntax-object-rest-spread](https://babeljs.io/docs/plugins/syntax-object-rest-spread) Allow the syntax of Object `{ ...rest, ...spread }`
+
+- [dynamic-import-node](https://github.com/airbnb/babel-plugin-dynamic-import-node) - Babel plugin to transpile import() to a deferred require(), for node.
+- [syntax-object-rest-spread](https://babeljs.io/docs/plugins/syntax-object-rest-spread) Allow the syntax of Object `{ ...rest, ...spread }`
 
 #### `development`
-  - [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import) - Allow the syntax of dynamic imports since all transformations done by webpack.
-  - [syntax-object-rest-spread](https://babeljs.io/docs/plugins/syntax-object-rest-spread) Allow the syntax of Object `{ ...rest, ...spread }`
+
+- [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import) - Allow the syntax of dynamic imports since all transformations done by webpack.
+- [syntax-object-rest-spread](https://babeljs.io/docs/plugins/syntax-object-rest-spread) Allow the syntax of Object `{ ...rest, ...spread }`
 
 #### `production`
-  - [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import) - Allow the syntax of dynamic imports since all transformations done by webpack.
-  - [remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) only for production builds.
-  - [proposal-object-rest-spread](https://babeljs.io/docs/plugins/transform-object-rest-spread) - Transform Object `{ ...rest, ...spread }`
+
+- [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import) - Allow the syntax of dynamic imports since all transformations done by webpack.
+- [remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) only for production builds.
+- [proposal-object-rest-spread](https://babeljs.io/docs/plugins/transform-object-rest-spread) - Transform Object `{ ...rest, ...spread }`
diff --git a/docs/guides/export-es-modules.md b/docs/guides/export-es-modules.md
@@ -8,7 +8,7 @@ sidebar_label: Export ES Modules
 
 ### TL;DR
 
-Add `module: 'path/to/entry.js'` in your `package.json` and make sure you are **not** using[`babel-plugin-transform-es2015-modules-commonjs`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-modules-commonjs) in `.babelrc`. Similarly, for typescript project, make sure you have `{"module": "es6"}` in `tsconfig.json`.
+Add `module: 'path/to/entry.js'` in your `package.json`. For typescript project, make sure you have `{"module": "es6"}` in `tsconfig.json`.
 
 ### Why
 
@@ -21,20 +21,12 @@ Add `module: 'path/to/entry.js'` in your `package.json` and make sure you are **
 
 ### How
 
-1. Don't include `babel-plugin-transform-es2015-modules-commonjs` to your `.babelrc`.
-   - If you are using `babel-preset-env`, `babel-preset-es2015` or other preset which includes this plugin under the hood, use `{ modules: false }` to configure it.
-   - If you are using `babel-preset-yoshi` there is nothing special you need to do in babel config.
-2. For typescript project, no special `tsconfig.json` change is needed.
-3. Specify path to your entry file with `module: 'dist/es/src/entry.js'`. Please note that Yoshi will create `es` directory with untranspiled modules near your usual transformation output (`dist/src` and `dist/es/src`).
+1. Specify path to your entry file with `module: 'dist/es/src/entry.js'`. Please note that Yoshi will create `es` directory with untranspiled modules near your usual transformation output (`dist/src` and `dist/es/src`).
 
 _package.json_
 
 ```json
-"module": "dist/es/src/entry.js",
-"babel": {
-  "presets": [
-    "yoshi"
-  ]
+"module": "dist/es/src/entry.js"
 },
 "yoshi": {
   "entry": "./entry.js"

diff --git a/packages/babel-preset-yoshi/package.json b/packages/babel-preset-yoshi/package.json
@@ -13,9 +13,11 @@
   "peerDependencies": {
     "@babel/core": "^7.1.2"
   },
+  "devDependencies": {
+    "@babel/core": "^7.1.2"
+  },
   "dependencies": {
     "babel-plugin-dynamic-import-node": "^2.2.0",
-    "@babel/helper-plugin-test-runner": "7.1.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.1.0",

diff --git a/packages/create-yoshi-app/templates/business-manager-module/{%packagejson%} b/packages/create-yoshi-app/templates/business-manager-module/{%packagejson%}
@@ -63,11 +63,6 @@
       "react-module-container": "reactModuleContainer"
     }
   },
-  "babel": {
-    "presets": [
-      "yoshi"
-    ]
-  },
   "eslintConfig": {
     "extends": "yoshi",
     "globals": {

diff --git a/packages/create-yoshi-app/templates/client/{%packagejson%} b/packages/create-yoshi-app/templates/client/{%packagejson%}
@@ -50,11 +50,6 @@
   "jest": {
     "preset": "jest-yoshi-preset"
   },
-  "babel": {
-    "presets": [
-      "yoshi"
-    ]
-  },
   "eslintConfig": {
     "extends": "yoshi"
   },

diff --git a/packages/create-yoshi-app/templates/component-library/{%packagejson%} b/packages/create-yoshi-app/templates/component-library/{%packagejson%}
@@ -55,11 +55,6 @@
     "hmr": "auto"
   },
   "module": "dist/es/src/index.js",
-  "babel": {
-    "presets": [
-      "yoshi"
-    ]
-  },
   "eslintConfig": {
     "extends": "yoshi"
   },

diff --git a/packages/create-yoshi-app/templates/fullstack/{%packagejson%} b/packages/create-yoshi-app/templates/fullstack/{%packagejson%}
@@ -57,11 +57,6 @@
     },
     "hmr": "auto"
   },
-  "babel": {
-    "presets": [
-      "yoshi"
-    ]
-  },
   "eslintConfig": {
     "extends": "yoshi",
     "globals": {

diff --git a/packages/create-yoshi-app/templates/node-library/{%packagejson%} b/packages/create-yoshi-app/templates/node-library/{%packagejson%}
@@ -35,11 +35,6 @@
     "hmr": "auto"
   },
   "module": "dist/es/src/index.js",
-  "babel": {
-    "presets": [
-      "yoshi"
-    ]
-  },
   "eslintConfig": {
     "extends": "yoshi"
   }

diff --git a/packages/create-yoshi-app/templates/platform-app/{%packagejson%} b/packages/create-yoshi-app/templates/platform-app/{%packagejson%}
@@ -52,18 +52,13 @@
       "app": "./src/components/App",
       "viewer": "./src/platform/viewerScript",
       "editor": "./src/platform/editorScript"
-    }
+    },
+    "exports": "{%projectName%}",
+    "umdNamedDefine": false
   },
   "jest": {
     "preset": "jest-yoshi-preset"
   },
-  "babel": {
-    "presets": [
-      "yoshi"
-    ],
-    "exports": "{%projectName%}",
-    "umdNamedDefine": false
-  },
   "eslintConfig": {
     "extends": "yoshi"
   }

diff --git a/packages/create-yoshi-app/templates/server/{%packagejson%} b/packages/create-yoshi-app/templates/server/{%packagejson%}
@@ -40,11 +40,6 @@
   "yoshi": {
     "hmr": "auto"
   },
-  "babel": {
-    "presets": [
-      "yoshi"
-    ]
-  },
   "eslintConfig": {
     "extends": "yoshi"
   }

diff --git a/packages/create-yoshi-app/templates/universal/{%packagejson%} b/packages/create-yoshi-app/templates/universal/{%packagejson%}
@@ -60,11 +60,6 @@
     },
     "hmr": "auto"
   },
-  "babel": {
-    "presets": [
-      "yoshi"
-    ]
-  },
   "eslintConfig": {
     "extends": "yoshi"
   },

diff --git a/packages/jest-yoshi-preset/jest-preset.js b/packages/jest-yoshi-preset/jest-preset.js
@@ -60,7 +60,7 @@ module.exports = {
           transformIgnorePatterns: ['/node_modules/(?!(.*?\\.st\\.css$))'],
 
           transform: {
-            '^.+\\.jsx?$': require.resolve('babel-jest'),
+            '^.+\\.jsx?$': require.resolve('./transforms/babel'),
             '^.+\\.tsx?$': require.resolve('ts-jest'),
             '\\.st.css?$': require.resolve('@stylable/jest'),
             '\\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|otf|eot|wav|mp3)$': require.resolve(

diff --git a/packages/jest-yoshi-preset/package.json b/packages/jest-yoshi-preset/package.json
@@ -22,13 +22,15 @@
     "identity-obj-proxy": "^3.0.0",
     "jest-environment-yoshi-bootstrap": "3.26.0",
     "jest-environment-yoshi-puppeteer": "3.26.0",
-    "ts-jest": "^23.0.1"
+    "ts-jest": "^23.0.1",
+    "yoshi-helpers": "3.26.0"
   },
   "devDependencies": {
     "@stylable/core": "^1.0.0",
     "@stylable/jest": "^1.0.0",
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.1.2",
     "babel-core": "^7.0.0-bridge.0",
+    "babel-preset-yoshi": "4.0.0",
     "typescript": "^3.0.1"
   }
 }
diff --git a/packages/jest-yoshi-preset/transforms/babel.js b/packages/jest-yoshi-preset/transforms/babel.js
@@ -0,0 +1,6 @@
+const babelJest = require('babel-jest');
+const { createBabelConfig } = require('yoshi-helpers');
+
+const babelConfig = createBabelConfig();
+
+module.exports = babelJest.createTransformer(babelConfig);
diff --git a/packages/yoshi-config/index.js b/packages/yoshi-config/index.js
@@ -73,9 +73,7 @@ const loadConfig = () => {
     enhancedTpaStyle: getConfig('enhancedTpaStyle', false),
     features: getConfig('features', {}),
     externals: getConfig('externals', []),
-    babel: _.get(packagejson, 'babel'),
     transpileTests: getConfig('transpileTests', true),
-    runIndividualTranspiler: getConfig('runIndividualTranspiler', true),
     jestConfig: _.get(packagejson, 'jest', {}),
     petriSpecsConfig: getConfig('petriSpecs', {}),
     performanceBudget: getConfig('performance'),

diff --git a/packages/yoshi-config/schema/yoshi-config-schema.js b/packages/yoshi-config/schema/yoshi-config-schema.js
@@ -95,11 +95,6 @@ const schema = {
         },
       },
     },
-    runIndividualTranspiler: {
-      description:
-        "In case you don't want to transpile your server (node) code, and you still need .babelrc/tsconfig, you can add runIndividualTranspiler flag to skip server transpiling.",
-      type: 'boolean',
-    },
     petriSpecs: {
       description: 'Configure options for the petriSpecs command',
       type: 'object',

diff --git a/packages/yoshi-helpers/package.json b/packages/yoshi-helpers/package.json
@@ -26,13 +26,14 @@
     "yoshi-config": "3.23.0"
   },
   "peerDependencies": {
-    "@babel/core": "7.1.2",
+    "@babel/core": "^7.1.2",
     "@babel/plugin-transform-modules-commonjs": "7.1.0",
     "typescript": "^2.0.0 || ^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.1.2",
+    "@babel/core": "^7.1.2",
     "@babel/plugin-transform-modules-commonjs": "7.1.0",
+    "babel-preset-yoshi": "4.0.0",
     "typescript": "^3.0.1"
   }
 }
diff --git a/packages/yoshi-helpers/queries.js b/packages/yoshi-helpers/queries.js
@@ -58,14 +58,6 @@ module.exports.shouldRunSass = () => {
 module.exports.isTypescriptProject = () =>
   fs.existsSync(path.resolve('tsconfig.json'));
 
-module.exports.isBabelProject = () => {
-  return (
-    !!glob.sync(path.resolve('.babelrc')).length ||
-    !!glob.sync(path.resolve('babel.config.js')).length ||
-    !!project.babel
-  );
-};
-
 module.exports.shouldExportModule = () => {
   const pkg = tryRequire(path.resolve('package.json'));
   return !!(pkg && pkg.module);

diff --git a/packages/yoshi-helpers/require-hooks/babel-register.js b/packages/yoshi-helpers/require-hooks/babel-register.js
@@ -1,6 +1,9 @@
 const { unprocessedModules } = require('yoshi-config');
+const { createBabelConfig } = require('../index');
+
+const babelConfig = createBabelConfig();
 
 require('@babel/register')({
   only: [unprocessedModules],
-  plugins: [require.resolve('@babel/plugin-transform-modules-commonjs')],
+  ...babelConfig,
 });
diff --git a/packages/yoshi-helpers/require-hooks/index.js b/packages/yoshi-helpers/require-hooks/index.js
@@ -1,12 +1,10 @@
-const { runIndividualTranspiler, transpileTests } = require('yoshi-config');
-const { isTypescriptProject, isBabelProject } = require('../queries');
+const { transpileTests } = require('yoshi-config');
+const { isTypescriptProject } = require('../queries');
 
 module.exports.setupRequireHooks = () => {
-  if (runIndividualTranspiler) {
-    if (isTypescriptProject()) {
-      require('./ts-node-register');
-    } else if (isBabelProject() && transpileTests) {
-      require('./babel-register');
-    }
+  if (isTypescriptProject()) {
+    require('./ts-node-register');
+  } else if (transpileTests) {
+    require('./babel-register');
   }
 };
diff --git a/packages/yoshi-helpers/utils.js b/packages/yoshi-helpers/utils.js
@@ -32,6 +32,14 @@ function logIfAny(log) {
   }
 }
 
+module.exports.createBabelConfig = (presetOptions = {}) => {
+  return {
+    presets: [[require.resolve('babel-preset-yoshi'), presetOptions]],
+    babelrc: false,
+    configFile: false,
+  };
+};
+
 module.exports.noop = () => {};
 
 module.exports.logIfAny = logIfAny;

diff --git a/packages/yoshi/config/jest-transformer.js b/packages/yoshi/config/jest-transformer.js
@@ -1,5 +1,6 @@
 const babelJest = require('babel-jest');
+const { createBabelConfig } = require('yoshi-helpers');
 
-module.exports = babelJest.createTransformer({
-  plugins: [require.resolve('@babel/plugin-transform-modules-commonjs')],
-});
+const babelConfig = createBabelConfig();
+
+module.exports = babelJest.createTransformer(babelConfig);