From 6e2952901a54af981a256ac4bd4c976f1f34b972 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Wed, 16 Jun 2021 20:45:02 +0530
Subject: [PATCH] Updated Portal build script to use rewired webpack config

no issues

- updates Portal build script to use rewired react-scripts config
- updated config handles css embed as well as output location/name for portal bundle as part of cra build
- makes extra webpack bundling redundant for now
- updates dev mode to map the portal source map useful for testing build version locally
- updates custom webpack config with copy plugin for future use

refs -
https://github.com/facebook/create-react-app/issues/5306#issuecomment-603772477
https://gist.github.com/phdesign/3fd306db2bc53f6368e6f0f73bbeff19
---
 ghost/portal/package.json              |  8 +++++---
 ghost/portal/scripts/build-combined.js | 20 +++++++++++++++++++-
 ghost/portal/scripts/dev-mode.js       |  3 ++-
 ghost/portal/webpack.config.js         | 11 +++++++++--
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/ghost/portal/package.json b/ghost/portal/package.json
index fc295d771f..0e1e850b11 100644
--- a/ghost/portal/package.json
+++ b/ghost/portal/package.json
@@ -28,17 +28,18 @@
   "scripts": {
     "start": "react-scripts start",
     "start:dev": "node ./scripts/start-mode.js",
-    "build": "npm run build:combined && npm run build:bundle",
+    "dev": "node ./scripts/dev-mode.js",
+    "build": "npm run build:combined",
+    "build:original": "react-scripts build",
     "build:combined": "node ./scripts/build-combined.js",
     "build:bundle": "webpack --config webpack.config.js",
-    "dev": "node ./scripts/dev-mode.js",
     "test": "react-scripts test --env=jsdom-fourteen",
     "eject": "react-scripts eject",
     "lint": "eslint src --ext .js --cache",
     "preship": "yarn lint",
     "ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn publish && git push ${GHOST_UPSTREAM:-upstream} main --follow-tags; fi",
     "posttest": "yarn lint",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "analyze": "source-map-explorer 'umd/*.js'",
     "prepublishOnly": "yarn build"
   },
   "eslintConfig": {
@@ -65,6 +66,7 @@
   "devDependencies": {
     "chalk": "^4.1.1",
     "chokidar": "^3.5.1",
+    "copy-webpack-plugin": "^6.3.2",
     "eslint-plugin-ghost": "2.2.0",
     "minimist": "^1.2.5",
     "ora": "^5.4.0",
diff --git a/ghost/portal/scripts/build-combined.js b/ghost/portal/scripts/build-combined.js
index ecab498c90..ac52866af3 100644
--- a/ghost/portal/scripts/build-combined.js
+++ b/ghost/portal/scripts/build-combined.js
@@ -1,4 +1,5 @@
 const rewire = require('rewire');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const defaults = rewire('react-scripts/scripts/build.js');
 let config = defaults.__get__('config');
 
@@ -8,4 +9,21 @@ config.optimization.splitChunks = {
     }
 };
 
-config.optimization.runtimeChunk = false;
\ No newline at end of file
+config.optimization.runtimeChunk = false;
+
+// JS: Save built file in `/umd`
+config.output.filename = '../umd/portal.min.js';
+
+// CSS: Remove MiniCssPlugin from list of plugins
+config.plugins = config.plugins.filter(plugin => !(plugin instanceof MiniCssExtractPlugin));
+// CSS: replaces all MiniCssExtractPlugin.loader with style-loader to embed CSS in JS
+config.module.rules[1].oneOf = config.module.rules[1].oneOf.map((rule) => {
+    if (!Object.prototype.hasOwnProperty.call(rule, 'use')) {
+        return rule;
+    }
+    return Object.assign({}, rule, {
+        use: rule.use.map(options => (/mini-css-extract-plugin/.test(options.loader)
+            ? {loader: require.resolve('style-loader'), options: {}}
+            : options))
+    });
+});
diff --git a/ghost/portal/scripts/dev-mode.js b/ghost/portal/scripts/dev-mode.js
index 2cf6bace66..5b100ad881 100644
--- a/ghost/portal/scripts/dev-mode.js
+++ b/ghost/portal/scripts/dev-mode.js
@@ -51,7 +51,7 @@ function printBuildSuccessDetails() {
         return;
     }
     if ((stdOutChunks && stdOutChunks.length > 0)) {
-        const detail = Buffer.from(stdOutChunks[stdOutChunks.length - 1]).toString();
+        const detail = Buffer.concat(stdOutChunks.slice(4,7)).toString();
         log();
         log(chalk.dim(detail));
     }
@@ -192,6 +192,7 @@ function startDevServer() {
         return handler(request, response, {
             rewrites: [
                 {source: '/portal', destination: 'umd/portal.min.js'},
+                {source: '/portal.min.js.map', destination: 'umd/portal.min.js.map'}
             ],
             headers: [
                 {
diff --git a/ghost/portal/webpack.config.js b/ghost/portal/webpack.config.js
index 70fb647286..8258355fec 100644
--- a/ghost/portal/webpack.config.js
+++ b/ghost/portal/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const glob = require('glob');
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
     mode: 'production',
@@ -18,10 +19,16 @@ module.exports = {
             }
         ]
     },
-    plugins: [],
+    plugins: [
+        new CopyPlugin({
+            patterns: [
+                {from: './build/static/js/main.js.map', to: './umd/portal.min.js.map'}
+            ]
+        })
+    ],
     performance: {
         hints: false,
         maxEntrypointSize: 560,
         maxAssetSize: 5600
     }
-};
\ No newline at end of file
+};