feat: add support for Plug'n'Play package managers (#14)

* chore: use yarn berry with pnp

* feat: add plug'n'play support

* chore: add yarn gitattributes

* typo: fix comment

js-packages/webpack-config/.gitattributes

@@ -0,0 +1,3 @@
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

js-packages/webpack-config/.gitignore

@@ -2,3 +2,12 @@ node_modules
 .DS_Store
 Thumbs.db
 .vscode
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

js-packages/webpack-config/.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-3.1.0.cjs

js-packages/webpack-config/index.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const { NormalModuleReplacementPlugin } = require('webpack');
 
 const entryPointNames = ['forum', 'admin'];
 const entryPointExts = ['js', 'ts'];
@@ -28,6 +29,28 @@ function getEntryPoints() {
 const useBundleAnalyzer = process.env.ANALYZER === 'true';
 const plugins = [];
 
+/**
+ * Yarn Plug'n'Play means that dependency hoisting doesn't work like it normally
+ * would with the standard `node_modules` configuration. This is by design, as
+ * hoisting is unpredictable.
+ *
+ * This plugin works around this by ensuring references to `@babel/runtime` (which
+ * is required at build-time from an extension/core's scope) are redirected to the
+ * copy of `@babel/runtime` which is a dependency of this package.
+ *
+ * This removes the need for hoisting, and allows for Plyug'n'Play compatibility.
+ *
+ * Thanks goes to Yarn's lead maintainer @arcanis for helping me get to this
+ * solution.
+ */
+plugins.push(
+  new NormalModuleReplacementPlugin(/^@babel\/runtime(.*)/, (resource) => {
+    const path = resource.request.split('@babel/runtime')[1];
+
+    resource.request = require.resolve(`@babel/runtime${path}`);
+  })
+);
+
 if (useBundleAnalyzer) {
   plugins.push(new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)());
 }
@@ -50,13 +73,13 @@ module.exports = function (options = {}) {
           // Matches .js, .jsx, .ts, .tsx
           // See: https://regexr.com/5snjd
           test: /\.(j|t)sx?$/,
-          loader: 'babel-loader',
+          loader: require.resolve('babel-loader'),
           options: {
             presets: [
-              '@babel/preset-react',
+              require.resolve('@babel/preset-react'),
-              '@babel/preset-typescript',
+              require.resolve('@babel/preset-typescript'),
               [
-                '@babel/preset-env',
+                require.resolve('@babel/preset-env'),
                 {
                   modules: false,
                   loose: true,
@@ -64,11 +87,11 @@ module.exports = function (options = {}) {
               ],
             ],
             plugins: [
-              ['@babel/plugin-transform-runtime', { useESModules: true }],
+              [require.resolve('@babel/plugin-transform-runtime'), { useESModules: true }],
-              ['@babel/plugin-proposal-class-properties', { loose: true }],
+              [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
-              ['@babel/plugin-proposal-private-methods', { loose: true }],
+              [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
               [
-                '@babel/plugin-transform-react-jsx',
+                require.resolve('@babel/plugin-transform-react-jsx'),
                 {
                   pragma: 'm',
                   pragmaFrag: "'['",
@@ -111,7 +134,7 @@ module.exports = function (options = {}) {
       })(),
 
       // Support importing old-style core modules.
-      function ({request}, callback) {
+      function ({ request }, callback) {
         let matches;
         if ((matches = /^flarum\/(.+)$/.exec(request))) {
           return callback(null, "root flarum.core.compat['" + matches[1] + "']");

js-packages/webpack-config/package.json

@@ -6,24 +6,26 @@
   "author": "Flarum Team",
   "license": "MIT",
   "peerDependencies": {
-    "webpack": "^5.60.0"
+    "webpack": "^5.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.14.3",
+    "@babel/core": "^7.16.0",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/plugin-proposal-private-methods": "^7.13.0",
+    "@babel/plugin-proposal-private-methods": "^7.16.0",
-    "@babel/plugin-transform-object-assign": "^7.12.13",
+    "@babel/plugin-transform-object-assign": "^7.16.0",
-    "@babel/plugin-transform-react-jsx": "^7.14.3",
+    "@babel/plugin-transform-react-jsx": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/plugin-transform-runtime": "^7.16.0",
-    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-env": "^7.16.0",
-    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/preset-typescript": "^7.16.0",
-    "@babel/runtime": "^7.14.0",
+    "@babel/runtime": "^7.16.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
-    "typescript": "^4.3.2",
+    "typescript": "^4.4.4",
-    "webpack-bundle-analyzer": "^4.4.2"
+    "webpack": "^5.0.0",
+    "webpack-bundle-analyzer": "^4.5.0"
   },
   "devDependencies": {
-    "prettier": "^2.3.0"
+    "prettier": "^2.4.1"
-  }
+  },
+  "packageManager": "yarn@3.1.0"
 }