Webpack 5 🏎

.bundlewatch.config.json

@@ -6,7 +6,7 @@
         },
         {
             "path": "./dist/webpack/js/owid.js",
-            "maxSize": "400 KB"
+            "maxSize": "450 KB"
         }
     ],
     "defaultCompression": "none"

adminSite/client/CountryStandardizerPage.tsx

@@ -8,7 +8,7 @@ import {
     reaction,
     IReactionDisposer,
 } from "mobx"
-import parse from "csv-parse"
+import { parse } from "papaparse"
 
 import unidecode from "unidecode"
 import FuzzySet from "fuzzyset"
@@ -93,7 +93,7 @@ class CSV {
     ) {
         this.filename = filename
         if (err) {
-            this.parseError = err.message
+            this.parseError = err[0].message
             this.rows = []
         } else {
             this.parseError = undefined
@@ -356,21 +356,15 @@ export class CountryStandardizerPage extends React.Component {
         const reader = new FileReader()
         reader.onload = (e) => {
             const csv = (e as any).target.result
-            parse(
-                csv,
-                {
-                    relax_column_count: true,
-                    skip_empty_lines: true,
-                    rtrim: true,
-                },
-                (err, rows) => {
-                    this.csv.onFileUpload(
-                        file.name,
-                        rows,
-                        err,
-                        this.shouldSaveSelection
-                    )
-                }
+            const parsed = parse<string[]>(csv, {
+                skipEmptyLines: true,
+            })
+
+            this.csv.onFileUpload(
+                file.name,
+                parsed.data,
+                parsed.errors,
+                this.shouldSaveSelection
             )
         }
         reader.readAsText(file)

adminSite/client/ImportPage.tsx

@@ -13,7 +13,7 @@ import {
 import { observer } from "mobx-react"
 import { Redirect } from "react-router-dom"
 
-import parse from "csv-parse"
+import { parse } from "papaparse"
 import { BindString, NumericSelectField, FieldsRow } from "./Forms"
 import { AdminLayout } from "./AdminLayout"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext"
@@ -428,26 +428,24 @@ class CSVSelector extends React.Component<{
         const reader = new FileReader()
         reader.onload = (e) => {
             const csv = (e as any).target.result
-            parse(
-                csv,
-                {
-                    relax_column_count: true,
-                    skip_empty_lines: true,
-                    rtrim: true,
-                },
-                (_, rows) => {
-                    // TODO error handling
-                    //console.log("Error?", err)
-                    if (rows[0][0].toLowerCase() === "year")
-                        rows = CSV.transformSingleLayout(rows, file.name)
-                    this.csv = new CSV({
-                        filename: file.name,
-                        rows,
-                        existingEntities,
-                    } as any)
-                    this.props.onCSV(this.csv as any)
-                }
-            )
+            const parsed = parse<string[]>(csv, {
+                skipEmptyLines: true,
+            })
+            {
+                // TODO error handling
+                //console.log("Error?", err)
+                if (parsed.data[0][0].toLowerCase() === "year")
+                    parsed.data = CSV.transformSingleLayout(
+                        parsed.data,
+                        file.name
+                    )
+                this.csv = new CSV({
+                    filename: file.name,
+                    rows: parsed.data,
+                    existingEntities,
+                } as any)
+                this.props.onCSV(this.csv as any)
+            }
         }
         reader.readAsText(file)
     }

adminSite/server/utils/gitDataExport.ts

@@ -1,11 +1,6 @@
 import * as path from "path"
 import * as fs from "fs-extra"
-import {
-    JsonError,
-    filenamify,
-    exec,
-    execFormatted,
-} from "utils/server/serverUtil"
+import { JsonError, execFormatted, filenamify } from "utils/server/serverUtil"
 import { Dataset } from "db/model/Dataset"
 import { Source } from "db/model/Source"
 import { GIT_DATASETS_DIR, TMP_DIR } from "serverSettings"

package.json

@@ -10,7 +10,7 @@
         "dev-admin": "yarn tsnd adminSite/server/app.tsx",
         "tsnd:inspect": "ts-node-dev --inspect --transpileOnly --respawn --no-notify --no-deps -r tsconfig-paths/register -r source-map-support/register -r dotenv/config",
         "dev-admin:inspect": "yarn tsnd:inspect adminSite/server/app.tsx",
-        "dev-webpack": "webpack-dev-server -d",
+        "dev-webpack": "webpack serve --mode development --devtool cheap-module-source-map",
         "dev": "npm-run-all --race --parallel dev-admin dev-webpack",
         "dev-tmux": "tmex dev \"yarn tsn adminSite/server/app.tsx\" \"yarn dev-webpack\"",
         "typeorm": "yarn tsn node_modules/.bin/typeorm",
@@ -23,7 +23,7 @@
         "prettify-all": "yarn prettier --write \"**/*.{tsx,ts,jsx,js,json,md,html,css,scss,yml,php}\"",
         "prettify-all:check": "yarn prettier --check \"**/*.{tsx,ts,jsx,js,json,md,html,css,scss,yml,php}\"",
         "typecheck": "tsc --noEmit",
-        "build": "rm -rf dist && ENV=production webpack -p --progress",
+        "build": "rm -rf dist && ENV=production webpack --mode production --progress",
         "test": "jest",
         "test-watch": "jest --watchAll",
         "test-single-process": "jest --maxWorkers=1",
@@ -41,8 +41,8 @@
         "deploy-queue": "yarn tsn deploy/watch.ts",
         "storybook": "start-storybook -p 6006",
         "build-storybook": "build-storybook -o .storybook/build",
-        "bundlewatch": "ENV=production webpack -p && bundlewatch --config .bundlewatch.config.json",
-        "bundlewatch-json": "ENV=production webpack -p --json > dist/webpack-bundle-stats.json && bundlewatch --config .bundlewatch.config.json",
+        "bundlewatch": "ENV=production webpack --mode production && bundlewatch --config .bundlewatch.config.json",
+        "bundlewatch-json": "ENV=production webpack --mode production --json > dist/webpack-bundle-stats.json && bundlewatch --config .bundlewatch.config.json",
         "live-commit": "yarn tsn deploy/liveCommit.ts"
     },
     "dependencies": {
@@ -83,6 +83,7 @@
         "@types/mousetrap": "^1.6.3",
         "@types/mysql": "^2.15.6",
         "@types/nodemailer": "^6.2.0",
+        "@types/papaparse": "^5.2.2",
         "@types/randomstring": "^1.1.6",
         "@types/react": "^16.9.49",
         "@types/react-color": "^3.0.2",
@@ -104,7 +105,7 @@
         "@types/url-parse": "^1.4.3",
         "algoliasearch": "^4.2.0",
         "asciify-string": "^0.1.1",
-        "autoprefixer": "^10.0.0",
+        "autoprefixer": "^10.0.1",
         "bcrypt": "^5.0.0",
         "body-parser": "^1.19.0",
         "bootstrap": "^4.3.1",
@@ -115,13 +116,13 @@
         "colorbrewer": "^1.3.0",
         "cookie-parser": "^1.4.4",
         "copy-to-clipboard": "^3.3.1",
-        "css-loader": "^4.2.2",
+        "css-loader": "^4.3.0",
         "csv-parse": "^4.4.3",
         "d3": "^6.1.1",
         "d3-geo-projection": "^3.0.0",
         "decko": "^1.2.0",
         "dotenv": "^8.2.0",
-        "dotenv-webpack": "^2.0.0",
+        "dotenv-webpack": "^3.0.0",
         "entities": "^2.0.3",
         "enzyme": "^3.10.0",
         "enzyme-adapter-react-16": "^1.15.1",
@@ -134,8 +135,8 @@
         "express-error-slack": "^2.0.0",
         "express-rate-limit": "^5.1.3",
         "fibers": "^5.0.0",
-        "file-loader": "^6.1.0",
-        "filenamify": "^4.1.0",
+        "file-loader": "^6.1.1",
+        "filenamify": "https://github.com/MarcelGerber/filenamify",
         "fs-extra": "^9.0.1",
         "fuzzyset": "^1.0.5",
         "fuzzysort": "^1.1.4",
@@ -151,7 +152,7 @@
         "lodash": "^4.17.20",
         "mathjax-full": "^3.1.0",
         "md5": "^2.2.1",
-        "mini-css-extract-plugin": "^0.11.0",
+        "mini-css-extract-plugin": "^1.0.0",
         "minimist": "^1.2.3",
         "mobx": "^5.13.0",
         "mobx-formatters": "^1.0.2",
@@ -165,8 +166,9 @@
         "nodemailer": "^6.2.1",
         "normalize.css": "^8.0.1",
         "optimize-css-assets-webpack-plugin": "^5.0.4",
-        "postcss": "^8.0.6",
-        "postcss-loader": "^4.0.2",
+        "papaparse": "^5.3.0",
+        "postcss": "^8.1.1",
+        "postcss-loader": "^4.0.4",
         "prettier": "^2.1.2",
         "prop-types": "^15.7.2",
         "randomstring": "^1.1.5",
@@ -181,8 +183,8 @@
         "react-tag-autocomplete": "https://github.com/mispy/react-tags",
         "react-zoom-pan-pinch": "https://github.com/mlbrgl/react-zoom-pan-pinch",
         "reflect-metadata": "^0.1.13",
-        "sass": "^1.26.10",
-        "sass-loader": "^10.0.2",
+        "sass": "^1.27.0",
+        "sass-loader": "^10.0.3",
         "sharp": "^0.23.0",
         "shell-quote": "^1.6.1",
         "shelljs": "^0.8.3",
@@ -197,21 +199,21 @@
         "timeago.js": "^4.0.2",
         "timezone-mock": "^1.0.18",
         "topojson-client": "^3.1.0",
-        "ts-loader": "^8.0.3",
+        "ts-loader": "^8.0.4",
         "ts-node": "^8.2.0",
         "tsconfig-paths": "^3.8.0",
         "tsconfig-paths-webpack-plugin": "^3.3.0",
         "typeorm": "^0.2.18",
         "typescript": "~4.0.2",
         "unidecode": "^0.1.8",
         "url-join": "^4.0.0",
-        "url-loader": "^4.1.0",
+        "url-loader": "^4.1.1",
         "url-parse": "^1.4.7",
         "url-slug": "^3.0.0-beta.1",
-        "webpack": "^4.44.1",
-        "webpack-cli": "^3.3.12",
+        "webpack": "5.0.0",
+        "webpack-cli": "4.0.0",
         "webpack-dev-server": "^3.11.0",
-        "webpack-manifest-plugin": "^2.2.0",
+        "webpack-manifest-plugin": "3.0.0-rc.0",
         "xlsx": "^0.14.3"
     },
     "devDependencies": {
@@ -246,4 +248,4 @@
         "Firefox ESR",
         "not dead"
     ]
-}
+}

webpack.config.js

@@ -10,11 +10,19 @@ const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
 module.exports = (env, argv) => {
     const isProduction = argv.mode === "production"
     return {
+        cache: {
+            type: "filesystem",
+            buildDependencies: {
+                config: [__filename],
+            },
+        },
+        mode: isProduction ? "production" : "development",
         context: __dirname,
         entry: {
             admin: "./adminSite/client/admin.entry.ts",
             owid: "./site/client/owid.entry.ts",
         },
+        target: "web",
         optimization: {
             splitChunks: {
                 cacheGroups: {
@@ -28,6 +36,9 @@ module.exports = (env, argv) => {
             minimize: isProduction,
             minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
         },
+        performance: {
+            hints: false,
+        },
         output: {
             path: path.join(__dirname, "dist/webpack"),
             filename: "js/[name].js",