fix(babel): move Babel dependencies to (optional) peerDependencies

Author: Kocal

.github/workflows/testing_apps.yml

@@ -1,12 +1,12 @@
-name: Testing apps
+name: Testing in real apps
 on: [push, pull_request]
 
 jobs:
   testing_app:
     strategy:
       fail-fast: false
       matrix:
-        test_app:
+        app:
           - name: npm
             working_directory: test_apps/npm
             script: |
@@ -15,6 +15,22 @@ jobs:
               npm run encore dev
               npm run encore production
 
+          - name: npm (with Babel)
+            working_directory: test_apps/npm-with-babel
+            script: |
+              npm install --ci
+              npm add --save-dev ../../webpack-encore.tgz
+              npm run encore dev
+              npm run encore production
+
+          - name: npm (with external Babel configuration file)
+            working_directory: test_apps/npm-with-external-babel-config
+            script: |
+              npm install --ci
+              npm add --save-dev ../../webpack-encore.tgz
+              npm run encore dev
+              npm run encore production
+
           - name: pnpm
             working_directory: test_apps/pnpm
             script: |
@@ -23,16 +39,50 @@ jobs:
               pnpm run encore dev
               pnpm run encore production
 
+          - name: pnpm (with Babel)
+            working_directory: test_apps/pnpm-with-babel
+            script: |
+              pnpm install --frozen-lockfile
+              pnpm add --save-dev ../../webpack-encore.tgz
+              pnpm run encore dev
+              pnpm run encore production
+
+          - name: pnpm (with external Babel configuration file)
+            working_directory: test_apps/pnpm-with-external-babel-config
+            script: |
+              pnpm install --frozen-lockfile
+              pnpm add --save-dev ../../webpack-encore.tgz
+              pnpm run encore dev
+              pnpm run encore production
+
           - name: Yarn Plug'n'Play
-            working_directory: test_apps/yarn_pnp
+            working_directory: test_apps/yarn-pnp
+            script: |
+              yarn set version berry
+              yarn install --frozen-lockfile
+              yarn add --dev ../../webpack-encore.tgz
+              yarn run encore dev
+              yarn run encore production
+
+          - name: Yarn Plug'n'Play (with Babel)
+            working_directory: test_apps/yarn-pnp-with-babel
+            script: |
+              yarn set version berry
+              yarn install --frozen-lockfile
+              yarn add --dev ../../webpack-encore.tgz
+              yarn run encore dev
+              yarn run encore production
+
+          - name: Yarn Plug'n'Play (with external Babel configuration file)
+            working_directory: test_apps/yarn-pnp-with-external-babel-config
             script: |
               yarn set version berry
               yarn install --frozen-lockfile
               yarn add --dev ../../webpack-encore.tgz
               yarn run encore dev
               yarn run encore production
 
-    name: ${{ matrix.test_app.name }}
+    name: ${{ matrix.app.name }}
     runs-on: ubuntu-latest
 
     steps:
@@ -44,7 +94,7 @@ jobs:
           with:
             node-version: '14'
 
-      -   if: matrix.test_app.name == 'pnpm'
+      -   if: ${{ contains(matrix.app.name, 'pnpm') }}
           name: Install pnpm
           uses: pnpm/action-setup@v2
           with:
@@ -54,5 +104,5 @@ jobs:
           run: yarn pack --filename webpack-encore.tgz
 
       -   name: Running script
-          working-directory: ${{ matrix.test_app.working_directory }}
-          run: ${{ matrix.test_app.script }}
+          working-directory: ${{ matrix.app.working_directory }}
+          run: ${{ matrix.app.script }}

lib/features.js

@@ -82,7 +82,6 @@ const features = {
         packages: [
             { name: 'typescript' },
             { name: '@babel/preset-typescript', enforce_version: true },
-            { name: '@babel/plugin-proposal-class-properties', enforce_version: true },
         ],
         description: 'process TypeScript files with Babel'
     },

lib/loaders/babel.js

@@ -55,14 +55,13 @@ module.exports = {
                 presets: [
                     [require.resolve('@babel/preset-env'), presetEnvOptions]
                 ],
-                plugins: [require.resolve('@babel/plugin-syntax-dynamic-import')]
+                plugins: []
             });
 
             if (webpackConfig.useBabelTypeScriptPreset) {
                 loaderFeatures.ensurePackagesExistAndAreCorrectVersion('typescript-babel');
 
                 babelConfig.presets.push([require.resolve('@babel/preset-typescript'), webpackConfig.babelTypeScriptPresetOptions]);
-                babelConfig.plugins.push(require.resolve('@babel/plugin-proposal-class-properties'));
             }
 
             if (webpackConfig.useReact) {

package.json

@@ -27,9 +27,6 @@
   },
   "homepage": "https://github.com/symfony/webpack-encore",
   "dependencies": {
-    "@babel/core": "^7.17.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.0",
-    "@babel/preset-env": "^7.16.0",
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.1",
     "assets-webpack-plugin": "7.0.*",
     "babel-loader": "^8.2.5",
@@ -52,9 +49,10 @@
     "yargs-parser": "^21.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.0",
     "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-transform-react-jsx": "^7.12.11",
+    "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.0.0",
     "@hotwired/stimulus": "^3.0.0",
@@ -103,8 +101,9 @@
     "zombie": "^6.1.4"
   },
   "peerDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/core": "^7.17.0",
     "@babel/plugin-transform-react-jsx": "^7.12.11",
+    "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.0.0",
     "@symfony/stimulus-bridge": "^3.0.0",
@@ -135,12 +134,15 @@
     "webpack-notifier": "^1.15.0"
   },
   "peerDependenciesMeta": {
-    "@babel/plugin-proposal-class-properties": {
-      "optional": true
+    "@babel/core": {
+      "optional": false
     },
     "@babel/plugin-transform-react-jsx": {
       "optional": true
     },
+    "@babel/preset-env":  {
+      "optional": false
+    },
     "@babel/preset-react": {
       "optional": true
     },

test/functional.js

@@ -1858,7 +1858,6 @@ module.exports = {
                 corejs: 3,
         }]
     ],
-    plugins: ['@babel/plugin-syntax-dynamic-import']
 }                            `
             );
 
@@ -1950,9 +1949,6 @@ module.exports = {
             config.setPublicPath('/build');
             config.addEntry('main', './stimulus/assets/app.js');
             config.enableStimulusBridge(__dirname + '/../fixtures/stimulus/assets/controllers.json');
-            config.configureBabel(function(config) {
-                config.plugins.push('@babel/plugin-proposal-class-properties');
-            });
 
             testSetup.runWebpack(config, (webpackAssert) => {
                 expect(config.outputPath).to.be.a.directory().with.deep.files([

test/loaders/babel.js

@@ -91,7 +91,6 @@ describe('loaders/babel', () => {
         const actualLoaders = babelLoader.getLoaders(config);
 
         expect(actualLoaders[0].options.plugins).to.deep.include.members([
-            require.resolve('@babel/plugin-syntax-dynamic-import'),
             [require.resolve('@babel/plugin-transform-react-jsx'), { pragma: 'h' }],
             'foo'
         ]);
@@ -108,7 +107,6 @@ describe('loaders/babel', () => {
         const actualLoaders = babelLoader.getLoaders(config);
 
         expect(actualLoaders[0].options.plugins).to.deep.include.members([
-            require.resolve('@babel/plugin-syntax-dynamic-import'),
             [require.resolve('@babel/plugin-transform-react-jsx')],
             'foo'
         ]);
@@ -183,8 +181,6 @@ describe('loaders/babel', () => {
         expect(actualLoaders[0].options.presets[1][0]).to.equal(require.resolve('@babel/preset-typescript'));
         expect(actualLoaders[0].options.presets[1][1]).to.equal(presetTypeScriptOptions);
         expect(actualLoaders[0].options.plugins).to.deep.include.members([
-            require.resolve('@babel/plugin-syntax-dynamic-import'),
-            require.resolve('@babel/plugin-proposal-class-properties'),
             'foo'
         ]);
     });

test_apps/npm-with-babel/.gitignore

@@ -0,0 +1 @@
+public/build

test_apps/npm-with-babel/README.md

@@ -0,0 +1,18 @@
+# Testing app: npm (with Babel)
+
+This testing app is used to test how Encore installation and usage work when using the [**npm** package manager](https://docs.npmjs.com/cli/).
+
+## Installation
+
+```shell
+$ (cd ../..; yarn pack --filename webpack-encore.tgz)
+$ npm add --save-dev ../../webpack-encore.tgz
+$ npm install
+```
+
+## Usage
+
+```
+$ npm run encore dev
+$ npm run encore production
+```

test_apps/npm-with-babel/assets/app.js

@@ -0,0 +1,16 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+console.log('Hello world!');
+
+function add(x, y) { return x + y; }
+const addOne = add(1, ?);
+console.log(addOne(2))