From bc3d210d371b6887753914aab6c9cb5999f51505 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3bert=20Papp?= <papp.robert.s@gmail.com>
Date: Sun, 12 Sep 2021 13:45:12 +0100
Subject: [PATCH] Upgrade frontend dependencies (#71)

* Prevent Angular FOUC because bundle may be included with defer.
* Add fake startup
* Don't downgrade Node, use latest.
---
 .github/workflows/Heroku.yml                 |   9 +-
 Heroku/frontend/package.json                 |  57 +++++------
 Heroku/frontend/src/planner/pages/index.html |  31 +++++-
 Heroku/frontend/webpack.common.js            |  90 -----------------
 Heroku/frontend/webpack.config.js            | 100 +++++++++++++++++++
 Heroku/frontend/webpack.dev.js               |   7 --
 Heroku/frontend/webpack.prod.js              |  12 ---
 Heroku/package.json                          |   2 +
 8 files changed, 159 insertions(+), 149 deletions(-)
 delete mode 100644 Heroku/frontend/webpack.common.js
 create mode 100644 Heroku/frontend/webpack.config.js
 delete mode 100644 Heroku/frontend/webpack.dev.js
 delete mode 100644 Heroku/frontend/webpack.prod.js

diff --git a/.github/workflows/Heroku.yml b/.github/workflows/Heroku.yml
index 4be707f7c..b7b499fc2 100644
--- a/.github/workflows/Heroku.yml
+++ b/.github/workflows/Heroku.yml
@@ -135,11 +135,6 @@ jobs:
       - name: Checkout ${{ github.ref }} branch in ${{ github.repository }} repository.
         uses: actions/checkout@v2
 
-      - name: Downgrade node from v14.17.6/6.14.15 to v8.17.0/6.13.4.
-        uses: actions/setup-node@v2
-        with:
-          node-version: '8'
-
       # Set the time zone, otherwise 5 Performances display > shows performances tests fail
       # > - Expected By(css selector, .performance) to have text 12:00 but was 11:00
       - uses: szenius/set-timezone@v1.0
@@ -177,12 +172,12 @@ jobs:
         working-directory: Heroku
         run: |
           npm run test
-          cd frontend && npm run build-prod
+          cd frontend && npm run build:prod
 
       # Pre-build artifacts for more immediate and deterministic startup.
       - name: Build Frontend
         working-directory: Heroku/frontend
-        run: npm run build-dev
+        run: npm run build:dev
 
       - name: Build Sync & Backend
         working-directory: Heroku
diff --git a/Heroku/frontend/package.json b/Heroku/frontend/package.json
index b1e2ad4e3..c5bc52cca 100644
--- a/Heroku/frontend/package.json
+++ b/Heroku/frontend/package.json
@@ -6,42 +6,39 @@
 	"scripts": {
 		"preinstall": "echo Installing Frontend dependencies",
 		"postinstall": "echo Installed Frontend dependencies",
-		"build": "npm run build-prod",
-		"build-prod": "webpack --config webpack.prod.js --progress",
-		"build-dev": "webpack --config webpack.dev.js --progress",
-		"start": "webpack --config webpack.dev.js --watch",
-		"dev-server": "webpack-dev-server --config webpack.dev.js --progress --colors --port 2992 --inline --content-base ../deploy/static",
+		"build": "npm run build:prod",
+		"build:prod": "webpack --config webpack.config.js --mode=production --progress",
+		"build:dev": "webpack --config webpack.config.js --mode=development --progress",
+		"start": "webpack --config webpack.config.js --mode=development --watch",
+		"dev-server": "webpack-dev-server --config webpack.config.js --mode=development --progress --colors --port 2992 --inline --content-base ../deploy/static",
 		"test": "npm run test:jshint",
 		"test:jshint": "jshint --verbose --show-non-errors src/planner/scripts"
 	},
 	"dependencies": {
-		"lodash": "4.17.4",
-		"bootstrap": "3.3.7",
-		"jquery": "1.12.4",
-		"angular": "1.6.6",
-		"angular-resource": "1.6.6",
-		"angular-animate": "1.6.6",
+		"lodash": "4.17.21",
+		"bootstrap": "3.4.1",
+		"angular": "1.8.2",
+		"angular-resource": "1.8.2",
+		"angular-animate": "1.8.2",
 		"angular-ui-bootstrap": "2.5.6",
-		"moment": "2.19.3",
-		"moment-timezone": "0.5.14",
-		"moment-range": "3.0.3"
+		"moment": "2.29.1",
+		"moment-timezone": "0.5.33",
+		"moment-range": "4.0.2"
 	},
 	"devDependencies": {
-		"webpack": "3.10.0",
-		"webpack-dev-server": "2.9.7",
-		"webpack-merge": "4.1.1",
-		"uglifyjs-webpack-plugin": "1.1.4",
-		"html-webpack-plugin": "2.30.1",
-		"copy-webpack-plugin": "4.3.1",
-		"extract-text-webpack-plugin": "3.0.2",
-		"raw-loader": "0.5.1",
-		"css-loader": "0.28.7",
-		"sass-loader": "6.0.6",
-		"style-loader": "0.19.1",
-		"url-loader": "0.6.2",
-		"file-loader": "1.1.6",
-
-		"jshint": "2.9.5",
-		"node-sass": "4.7.2"
+		"webpack": "5.52.1",
+		"webpack-cli": "4.8.0",
+		"webpack-dev-server": "4.2.0",
+		"html-webpack-plugin": "5.3.2",
+		"copy-webpack-plugin": "9.0.1",
+		"mini-css-extract-plugin": "2.3.0",
+		"raw-loader": "4.0.2",
+		"css-loader": "6.2.0",
+		"sass-loader": "12.1.0",
+		"style-loader": "3.2.1",
+		"url-loader": "4.1.1",
+		"file-loader": "6.2.0",
+		"jshint": "2.13.1",
+		"node-sass": "6.0.1"
 	}
 }
diff --git a/Heroku/frontend/src/planner/pages/index.html b/Heroku/frontend/src/planner/pages/index.html
index fcf81763f..907f830c0 100644
--- a/Heroku/frontend/src/planner/pages/index.html
+++ b/Heroku/frontend/src/planner/pages/index.html
@@ -17,14 +17,39 @@
 		};
 	</script>
 
+	<!-- Copied from Heroku/frontend/node_modules/angular/angular-csp.css -->
+	<style>
+		[ng\:cloak],
+		[ng-cloak],
+		[data-ng-cloak],
+		[x-ng-cloak],
+		.ng-cloak,
+		.x-ng-cloak,
+		.ng-hide:not(.ng-hide-animate) {
+			display: none !important;
+		}
+
+		ng\:form {
+			display: block;
+		}
+
+		.ng-animate-shim {
+			visibility:hidden;
+		}
+
+		.ng-anchor {
+			position:absolute;
+		}
+	</style>
+
 	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 	<!--[if lt IE 9]>
-		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-		<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
 	<![endif]-->
 </head>
-<body ng-controller="AppController">
+<body ng-controller="AppController" ng-cloak>
 	<section id="main">
 		<header id="date" ng-controller="DateController">
 			<form name="cineworldDateForm" class="form-inline" role="form">
diff --git a/Heroku/frontend/webpack.common.js b/Heroku/frontend/webpack.common.js
deleted file mode 100644
index a7fc16913..000000000
--- a/Heroku/frontend/webpack.common.js
+++ /dev/null
@@ -1,90 +0,0 @@
-'use strict';
-const Webpack = require('webpack'); // https://github.com/webpack/webpack
-const HtmlWebpackPlugin = require('html-webpack-plugin'); // https://github.com/jantimon/html-webpack-plugin#configuration
-const CopyWebpackPlugin = require('copy-webpack-plugin'); // https://github.com/kevlened/copy-webpack-plugin
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-const Path = require('path');
-
-const dist = Path.resolve(__dirname, '..', 'deploy');
-module.exports = {
-	entry: {
-		'planner/index': './src/planner/scripts/index.js'
-	},
-	output: {
-		path: Path.join(dist, 'static'),
-		// don't set publicPath to an absolute path because it emits a <script> with that prefix
-		//publicPath: dist,
-		filename: '[name].js'
-	},
-	resolve: {
-		extensions: ['.js', '.json'/*, '.ts'*/]
-	},
-	module: {
-		// https://webpack.js.org/guides/migrating/#chaining-loaders
-		rules: [
-//			{
-//				test: /\.ts$/,
-//				use: ['ts-loader'],
-//				query: {
-//					ignoreDiagnostics: [
-//						2403, // 2403 -> Subsequent variable declarations
-//						2300, // 2300 -> Duplicate identifier
-//						2374, // 2374 -> Duplicate number index signature
-//						2375, // 2375 -> Duplicate string index signature
-//					]
-//				}
-//			},
-			{ test: /\.json$/, use: ['raw-loader'] },
-			{ test: /\.html$/, use: ['raw-loader'] },
-			{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
-			{
-				test: /\.(sass|scss)/,
-				use: [
-					{
-						loader: 'style-loader'
-					},
-					{
-						loader: 'css-loader',
-						options: {
-							sourceMap: true,
-						},
-					},
-					{
-						loader: 'sass-loader',
-						options: {
-							sourceMap: true,
-							outputStyle: 'expanded',
-						},
-					},
-				],
-			},
-			{ test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
-				loader: 'url-loader',
-				options: {
-					outputPath: 'planner/',
-					name: '[hash]_[name].[ext]',
-					limit: 1000,
-					useRelativePath: true
-				}
-			},
-		]
-	},
-	plugins: [
-		new CopyWebpackPlugin([
-			{ from: 'src/old', to: 'planner-old' }
-		]),
-		// FIXME new ExtractTextPlugin("styles.css"),
-		new HtmlWebpackPlugin({
-			chunks: [],
-			filename: 'index.html',
-			template: 'src/main/pages/index.html'
-		}),
-		new HtmlWebpackPlugin({
-			filename: 'planner/index.html',
-			chunks: ['planner/index'],
-			inject: 'head', // temporary workaround while all dependencies are migrated
-			template: 'src/planner/pages/index.html'
-		})
-//		new Webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.bundle.js' })
-	]
-};
diff --git a/Heroku/frontend/webpack.config.js b/Heroku/frontend/webpack.config.js
new file mode 100644
index 000000000..fc29d2ff0
--- /dev/null
+++ b/Heroku/frontend/webpack.config.js
@@ -0,0 +1,100 @@
+'use strict';
+const HtmlWebpackPlugin = require('html-webpack-plugin'); // https://github.com/jantimon/html-webpack-plugin#options
+const CopyWebpackPlugin = require('copy-webpack-plugin'); // https://github.com/webpack-contrib/copy-webpack-plugin
+const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // https://github.com/webpack-contrib/mini-css-extract-plugin
+const path = require('path');
+
+module.exports = (env, argv) => {
+	const dist = path.resolve(__dirname, '..', 'deploy');
+	console.log(`Running in mode: ${argv.mode}; deploying to ${dist}.`);
+	const devMode = argv.mode === 'development';
+	return {
+		entry: {
+			'planner/index': './src/planner/scripts/index.js',
+		},
+		output: {
+			path: path.join(dist, 'static'),
+			// don't set publicPath to an absolute path because it emits a <script> with that prefix
+			//publicPath: dist,
+			filename: '[name].bundle.js'
+		},
+		devtool: devMode
+				? 'inline-source-map'
+				: undefined,
+		plugins: [
+			new MiniCssExtractPlugin(),
+			new CopyWebpackPlugin({
+				patterns: [
+					{ from: 'src/old', to: 'planner-old' },
+				],
+			}),
+			new HtmlWebpackPlugin({
+				template: 'src/main/pages/index.html',
+				filename: 'index.html',
+				chunks: [],
+			}),
+			new HtmlWebpackPlugin({
+				template: 'src/planner/pages/index.html',
+				filename: 'planner/index.html',
+				chunks: ['planner/index'],
+			}),
+		],
+		module: {
+			// https://webpack.js.org/guides/migrating/#chaining-loaders
+			rules: [
+				{
+					test: /\.(html)$/,
+					// These templates/.html files are loaded into the $templateCache raw/as is.
+					include: [path.join(__dirname, 'src/planner/templates/')],
+					// When loaded with require() only asset/source gives contents.
+					// asset/resource gives url and asset/inline gives encoded data URI.
+					type: 'asset/source',
+				},
+				{
+					test: /\.(css)$/,
+					use: [
+						{
+							loader: MiniCssExtractPlugin.loader,
+						},
+						{
+							loader: 'css-loader',
+						},
+					],
+				},
+				{
+					test: /\.(sass|scss)/,
+					use: [
+						{
+							loader: MiniCssExtractPlugin.loader,
+						},
+						{
+							loader: 'css-loader',
+						},
+						{
+							loader: 'sass-loader',
+							options: {
+								sassOptions: {
+									outputStyle: 'expanded',
+								},
+							},
+						},
+					],
+				},
+				{
+					test: /\.(png|jpg|gif)$/,
+					type: 'asset/resource',
+					generator: {
+						filename: 'images/[name]-[hash][ext][query]',
+					},
+				},
+				{
+					test: /\.(svg|eot|ttf|woff|woff2)$/,
+					type: 'asset/resource',
+					generator: {
+						filename: 'fonts/[name]-[hash][ext][query]',
+					},
+				},
+			],
+		},
+	};
+};
diff --git a/Heroku/frontend/webpack.dev.js b/Heroku/frontend/webpack.dev.js
deleted file mode 100644
index 7a3203c23..000000000
--- a/Heroku/frontend/webpack.dev.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-	devtool: 'inline-source-map',
-});
diff --git a/Heroku/frontend/webpack.prod.js b/Heroku/frontend/webpack.prod.js
deleted file mode 100644
index 7db2c9573..000000000
--- a/Heroku/frontend/webpack.prod.js
+++ /dev/null
@@ -1,12 +0,0 @@
-'use strict';
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // needed to use plugin 1.x which uses UglifyES
-
-module.exports = merge(common, {
-	plugins: [
-		// equivalent of `--optimize-minimize`, but using specific version above
-		new UglifyJsPlugin(),
-	],
-});
diff --git a/Heroku/package.json b/Heroku/package.json
index fbaa5d7f1..e3de7b125 100644
--- a/Heroku/package.json
+++ b/Heroku/package.json
@@ -18,6 +18,8 @@
 	},
 	"scripts": {
 		"start": "gradlew :backend:endpoint:run",
+		"start:fake:documentation": "echo http://localhost:8080/planner?cineworldDate=&c=103&d=2017-07-14&f=160231&f=160454&f=184739&f=189108&f=223046",
+		"start:fake": "gradlew :backend:endpoint:run --args \"../../deploy/static ../../test/fake-data\"",
 		"updateFromCineworld": "npm run updateFromCineworldCinemas && npm run updateFromCineworldFilms",
 		"updateFromCineworldCinemas": "gradlew :backend:sync:run --args \"cinemas\"",
 		"updateFromCineworldFilms": "gradlew :backend:sync:run --args \"films\"",