Merge remote-tracking branch 'js_packages_webpack-config/REWRITE'

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

@@ -0,0 +1,13 @@
+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/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "printWidth": 150,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

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

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

js-packages/webpack-config/LICENSE

@@ -0,0 +1,23 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-2021 Stichting Flarum (Flarum Foundation)
+Copyright (c) 2014-2019 Toby Zerner (toby.zerner@gmail.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

js-packages/webpack-config/README.md

@@ -0,0 +1,57 @@
+# Webpack config for Flarum JS/TS compilation
+
+This package generates a [Webpack](https://webpack.js.org) config object that will compile JavaScript for use in Flarum.
+
+## Usage
+
+**webpack.config.js**
+
+```js
+var config = require('flarum-webpack-config');
+
+module.exports = config(options);
+```
+
+To merge in custom Webpack config options, use [webpack-merge](https://www.npmjs.com/package/webpack-merge).
+
+### Webpack Bundle Analyzer
+
+You can view a visual representation of your JS Bundle by building with Webpack Bundle Analyzer.
+
+Add another build script to your `package.json` like the one below:
+
+```json
+{
+  "analyze": "npx cross-env ANALYZER=true npm run build"
+}
+```
+
+## Typescript
+
+You'll need to configure a `tsconfig.json` file to ensure your IDE sets up Typescript support correctly.
+
+For details about this, see the [`flarum/flarum-tsconfig` repository](https://github.com/flarum/flarum-tsconfig)
+
+## Options
+
+### `useExtensions`
+
+`Array<string>`, defaults to `[]`.
+
+An array of extensions whose modules should be made available. This is a shortcut to add [`externals`](https://webpack.js.org/configuration/externals/) configuration for extension modules. Imported extension modules will not be bundled, but will instead refer to the extension's exports included in the Flarum runtime (ie. `flarum.extensions["vendor/package"]`).
+
+For example, to access the Tags extension module within your extension:
+
+**forum.js**
+
+```js
+import { Tag } from '@flarum/tags/forum';
+```
+
+**webpack.config.js**
+
+```js
+module.exports = config({
+  useExtensions: ['flarum/tags'],
+});
+```

js-packages/webpack-config/index.js

@@ -0,0 +1,148 @@
+const fs = require('fs');
+const path = require('path');
+const { NormalModuleReplacementPlugin } = require('webpack');
+
+const entryPointNames = ['forum', 'admin'];
+const entryPointExts = ['js', 'ts'];
+
+function getEntryPoints() {
+  const entries = {};
+
+  appLoop: for (const app of entryPointNames) {
+    for (const ext of entryPointExts) {
+      const file = path.resolve(process.cwd(), `${app}.${ext}`);
+
+      if (fs.existsSync(file)) {
+        entries[app] = file;
+        continue appLoop;
+      }
+    }
+  }
+
+  if (Object.keys(entries).length === 0) {
+    console.error('ERROR: No JS entrypoints could be found.');
+  }
+
+  return entries;
+}
+
+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)());
+}
+
+module.exports = function (options = {}) {
+  return {
+    // Set up entry points for each of the forum + admin apps, but only
+    // if they exist.
+    entry: getEntryPoints(),
+
+    plugins,
+
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+    },
+
+    module: {
+      rules: [
+        {
+          // Matches .js, .jsx, .ts, .tsx
+          // See: https://regexr.com/5snjd
+          test: /\.(j|t)sx?$/,
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [
+              require.resolve('@babel/preset-react'),
+              require.resolve('@babel/preset-typescript'),
+              [
+                require.resolve('@babel/preset-env'),
+                {
+                  modules: false,
+                  loose: true,
+                },
+              ],
+            ],
+            plugins: [
+              [require.resolve('@babel/plugin-transform-runtime'), { useESModules: true }],
+              [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+              [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
+              [
+                require.resolve('@babel/plugin-transform-react-jsx'),
+                {
+                  pragma: 'm',
+                  pragmaFrag: "'['",
+                  useBuiltIns: true,
+                },
+              ],
+            ],
+          },
+        },
+      ],
+    },
+
+    output: {
+      path: path.resolve(process.cwd(), 'dist'),
+      library: 'module.exports',
+      libraryTarget: 'assign',
+      devtoolNamespace: require(path.resolve(process.cwd(), 'package.json')).name,
+    },
+
+    externals: [
+      {
+        '@flarum/core/forum': 'flarum.core',
+        '@flarum/core/admin': 'flarum.core',
+        jquery: 'jQuery',
+      },
+
+      (function () {
+        const externals = {};
+
+        if (options.useExtensions) {
+          for (const extension of options.useExtensions) {
+            externals['@' + extension] =
+              externals['@' + extension + '/forum'] =
+              externals['@' + extension + '/admin'] =
+                "flarum.extensions['" + extension + "']";
+          }
+        }
+
+        return externals;
+      })(),
+
+      // Support importing old-style core modules.
+      function ({ request }, callback) {
+        let matches;
+        if ((matches = /^flarum\/(.+)$/.exec(request))) {
+          return callback(null, "root flarum.core.compat['" + matches[1] + "']");
+        }
+        callback();
+      },
+    ],
+
+    devtool: 'source-map',
+  };
+};

js-packages/webpack-config/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "flarum-webpack-config",
+  "version": "2.0.0",
+  "description": "Webpack config for Flarum JS and TS transpilation.",
+  "main": "index.js",
+  "author": "Flarum Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "webpack": "^5.0.0"
+  },
+  "dependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-proposal-private-methods": "^7.16.0",
+    "@babel/plugin-transform-object-assign": "^7.16.0",
+    "@babel/plugin-transform-react-jsx": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@babel/runtime": "^7.16.0",
+    "babel-loader": "^8.2.3",
+    "typescript": "^4.4.4",
+    "webpack": "^5.0.0",
+    "webpack-bundle-analyzer": "^4.5.0"
+  },
+  "devDependencies": {
+    "prettier": "^2.4.1"
+  },
+  "packageManager": "yarn@3.1.0"
+}