feature #1142 Add support for pnpm and Yarn PnP (Kocal)

This PR was squashed before being merged into the main branch.

Discussion
----------

Add support for pnpm and Yarn PnP

For Yarn PnP and pnpm support, Encore needs to configure `peerDependenciesMeta` as explained in #655.

I've configured **every** packages listed in `lib/features.js` as **optional** peerDependencies, and `webpack` as a **required** peer dependency.

I'm not sure of how we can write tests for that, any idea `@weaverryan`? Maybe an E2E test with a real app/dedicated CI workflow?
**EDIT:** implemented E2E tests for Yarn PnP and pnpm.

Thanks!

Commits
-------

dbf3db4 Add support for pnpm and Yarn PnP

Author: weaverryan

.github/workflows/testing_apps.yml

@@ -0,0 +1,58 @@
+name: Testing apps
+on: [push, pull_request]
+
+jobs:
+  testing_app:
+    strategy:
+      fail-fast: false
+      matrix:
+        test_app:
+          - name: npm
+            working_directory: test_apps/npm
+            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: |
+              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
+            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 }}
+    runs-on: ubuntu-latest
+
+    steps:
+      -   name: Checkout
+          uses: actions/[email protected]
+
+      -   name: Node ${{matrix.node-versions}}
+          uses: actions/setup-node@v2
+          with:
+            node-version: '14'
+
+      -   if: matrix.test_app.name == 'pnpm'
+          name: Install pnpm
+          uses: pnpm/action-setup@v2
+          with:
+            version: latest
+
+      -   name: Packing Encore
+          run: yarn pack --filename webpack-encore.tgz
+
+      -   name: Running script
+          working-directory: ${{ matrix.test_app.working_directory }}
+          run: ${{ matrix.test_app.script }}

lib/WebpackConfig.js

@@ -36,44 +36,14 @@ function validateRuntimeConfig(runtimeConfig) {
     }
 }
 
-/**
- * @param {RuntimeConfig} runtimeConfig
- * @return {void}
- */
-function checkPackageJson(runtimeConfig) {
-    // Display a warning if webpack is listed as a [dev-]dependency
-    try {
-        const packageInfo = JSON.parse(
-            fs.readFileSync(path.resolve(runtimeConfig.context, 'package.json'), { encoding: 'utf-8' })
-        );
-
-        if (packageInfo) {
-            const dependencies = new Set([
-                ...(packageInfo.dependencies ? Object.keys(packageInfo.dependencies) : []),
-                ...(packageInfo.devDependencies ? Object.keys(packageInfo.devDependencies) : []),
-            ]);
-
-            if (dependencies.has('webpack')) {
-                logger.warning('Webpack is already provided by Webpack Encore, also adding it to your package.json file may cause issues.');
-            }
-        }
-    } catch (e) {
-        logger.warning('Could not read package.json file.');
-    }
-}
-
 class WebpackConfig {
-    constructor(runtimeConfig, enablePackageJsonCheck = false) {
+    constructor(runtimeConfig) {
         validateRuntimeConfig(runtimeConfig);
 
         if (runtimeConfig.verbose) {
             logger.verbose();
         }
 
-        if (enablePackageJsonCheck) {
-            checkPackageJson(runtimeConfig);
-        }
-
         this.runtimeConfig = runtimeConfig;
         this.entries = new Map();
         this.styleEntries = new Map();

lib/loaders/babel.js

@@ -53,22 +53,22 @@ module.exports = {
 
             Object.assign(babelConfig, {
                 presets: [
-                    ['@babel/preset-env', presetEnvOptions]
+                    [require.resolve('@babel/preset-env'), presetEnvOptions]
                 ],
-                plugins: ['@babel/plugin-syntax-dynamic-import']
+                plugins: [require.resolve('@babel/plugin-syntax-dynamic-import')]
             });
 
             if (webpackConfig.useBabelTypeScriptPreset) {
                 loaderFeatures.ensurePackagesExistAndAreCorrectVersion('typescript-babel');
 
-                babelConfig.presets.push(['@babel/preset-typescript', webpackConfig.babelTypeScriptPresetOptions]);
-                babelConfig.plugins.push('@babel/plugin-proposal-class-properties');
+                babelConfig.presets.push([require.resolve('@babel/preset-typescript'), webpackConfig.babelTypeScriptPresetOptions]);
+                babelConfig.plugins.push(require.resolve('@babel/plugin-proposal-class-properties'));
             }
 
             if (webpackConfig.useReact) {
                 loaderFeatures.ensurePackagesExistAndAreCorrectVersion('react');
 
-                babelConfig.presets.push('@babel/react');
+                babelConfig.presets.push(require.resolve('@babel/preset-react'));
             }
 
             if (webpackConfig.usePreact) {
@@ -77,20 +77,20 @@ module.exports = {
                 if (webpackConfig.preactOptions.preactCompat) {
                     // If preact-compat is enabled tell babel to
                     // transform JSX into React.createElement calls.
-                    babelConfig.plugins.push(['@babel/plugin-transform-react-jsx']);
+                    babelConfig.plugins.push([require.resolve('@babel/plugin-transform-react-jsx')]);
                 } else {
                     // If preact-compat is disabled tell babel to
                     // transform JSX into Preact h() calls.
                     babelConfig.plugins.push([
-                        '@babel/plugin-transform-react-jsx',
+                        require.resolve('@babel/plugin-transform-react-jsx'),
                         { 'pragma': 'h' }
                     ]);
                 }
             }
 
             if (webpackConfig.useVueLoader && webpackConfig.vueOptions.useJsx) {
                 loaderFeatures.ensurePackagesExistAndAreCorrectVersion('vue-jsx');
-                babelConfig.presets.push('@vue/babel-preset-jsx');
+                babelConfig.presets.push(require.resolve('@vue/babel-preset-jsx'));
             }
 
             babelConfig = applyOptionsCallback(webpackConfig.babelConfigurationCallback, babelConfig);

package.json

@@ -45,10 +45,9 @@
     "semver": "^7.3.2",
     "style-loader": "^3.3.0",
     "sync-rpc": "^1.3.6",
+    "tapable": "^2.2.1",
     "terser-webpack-plugin": "^5.3.0",
     "tmp": "^0.2.1",
-    "webpack": "^5.72",
-    "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.8.0",
     "yargs-parser": "^21.0.0"
   },
@@ -98,9 +97,135 @@
     "vue": "^3.2.14",
     "vue-loader": "^17.0.0",
     "vue-template-compiler": "^2.5",
+    "webpack": "^5.72",
+    "webpack-cli": "^4.9.1",
     "webpack-notifier": "^1.15.0",
     "zombie": "^6.1.4"
   },
+  "peerDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-transform-react-jsx": "^7.12.11",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.0.0",
+    "@symfony/stimulus-bridge": "^3.0.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "@vue/babel-preset-jsx": "^1.0.0",
+    "@vue/compiler-sfc": "^3.0.2",
+    "eslint": "^8.0.0",
+    "eslint-webpack-plugin": "^3.1.0",
+    "file-loader": "^6.0.0",
+    "fork-ts-checker-webpack-plugin": "^7.0.0",
+    "handlebars": "^4.7.7",
+    "handlebars-loader": "^1.7.0",
+    "less": "^4.0.0",
+    "less-loader": "^11.0.0",
+    "postcss": "^8.3.0",
+    "postcss-loader": "^7.0.0",
+    "sass": "^1.17.0",
+    "sass-loader": "^13.0.0",
+    "stylus": "^0.58.1",
+    "stylus-loader": "^7.0.0",
+    "ts-loader": "^9.0.0",
+    "typescript": "^4.2.2",
+    "vue": "^3.2.14",
+    "vue-loader": "^17.0.0",
+    "vue-template-compiler": "^2.5",
+    "webpack": "^5.72",
+    "webpack-cli": "^4.9.1",
+    "webpack-notifier": "^1.15.0"
+  },
+  "peerDependenciesMeta": {
+    "@babel/plugin-proposal-class-properties": {
+      "optional": true
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "optional": true
+    },
+    "@babel/preset-react": {
+      "optional": true
+    },
+    "@babel/preset-typescript": {
+      "optional": true
+    },
+    "@symfony/stimulus-bridge": {
+      "optional": true
+    },
+    "@vue/babel-helper-vue-jsx-merge-props": {
+      "optional": true
+    },
+    "@vue/babel-preset-jsx": {
+      "optional": true
+    },
+    "@vue/compiler-sfc": {
+      "optional": true
+    },
+    "eslint": {
+      "optional": true
+    },
+    "eslint-webpack-plugin": {
+      "optional": true
+    },
+    "file-loader": {
+      "optional": true
+    },
+    "fork-ts-checker-webpack-plugin": {
+      "optional": true
+    },
+    "handlebars": {
+      "optional": true
+    },
+    "handlebars-loader": {
+      "optional": true
+    },
+    "less": {
+      "optional": true
+    },
+    "less-loader": {
+      "optional": true
+    },
+    "postcss": {
+      "optional": true
+    },
+    "postcss-loader": {
+      "optional": true
+    },
+    "sass": {
+      "optional": true
+    },
+    "sass-loader": {
+      "optional": true
+    },
+    "stylus": {
+      "optional": true
+    },
+    "stylus-loader": {
+      "optional": true
+    },
+    "ts-loader": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "vue-loader": {
+      "optional": true
+    },
+    "vue-template-compiler": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": false
+    },
+    "webpack-cli": {
+      "optional": false
+    },
+    "webpack-notifier": {
+      "optional": true
+    }
+  },
   "files": [
     "lib/",
     "bin/",

test/bin/encore.js

@@ -56,7 +56,6 @@ module.exports = Encore.getWebpackConfig();
             }
 
             expect(stdout).to.contain('Compiled successfully');
-            expect(stdout).not.to.contain('Webpack is already provided by Webpack Encore');
 
             expect(stdout).not.to.contain('Hash: ');
             expect(stdout).not.to.contain('Version: ');
@@ -176,47 +175,6 @@ module.exports = Encore.getWebpackConfig();
         });
     });
 
-    it('Display a warning message when webpack is also added to the package.json file', (done) => {
-        testSetup.emptyTmpDir();
-        const testDir = testSetup.createTestAppDir();
-
-        fs.writeFileSync(
-            path.join(testDir, 'package.json'),
-            `{
-                "devDependencies": {
-                    "@symfony/webpack-encore": "*",
-                    "webpack": "*"
-                }
-            }`
-        );
-
-        fs.writeFileSync(
-            path.join(testDir, 'webpack.config.js'),
-            `
-const Encore = require('../../index.js');
-Encore
-    .enableSingleRuntimeChunk()
-    .setOutputPath('build/')
-    .setPublicPath('/build')
-    .addEntry('main', './js/no_require')
-;
-
-module.exports = Encore.getWebpackConfig();
-            `
-        );
-
-        const binPath = path.resolve(__dirname, '../', '../', 'bin', 'encore.js');
-        exec(`node ${binPath} dev --context=${testDir}`, { cwd: testDir }, (err, stdout, stderr) => {
-            if (err) {
-                throw new Error(`Error executing encore: ${err} ${stderr} ${stdout}`);
-            }
-
-            expect(stdout).to.contain('Webpack is already provided by Webpack Encore');
-
-            done();
-        });
-    });
-
     it('Display an error when calling an unknown method', (done) => {
         testSetup.emptyTmpDir();
         const testDir = testSetup.createTestAppDir();