Replace snowpack by webpack

.gitignore

-.snowpack
-build
-node_modules/
-.pnpm-store
-coverage/
-.vscode/
+/dist
+/node_modules
+/.pnpm-store
+/coverage
+
+/.vscode

.gitlab-ci.yml

@@ -36,7 +36,7 @@ build:
     - npm run build
   artifacts:
     paths:
-      - build
+      - dist
 
 # Deploy main branch to contact.greenhost.net
 deploy-staging:
@@ -54,7 +54,7 @@ deploy-staging:
     DOMAIN_NAME: 'greenhost.net'
     SUBDOMAIN: 'contact'
     SUBFOLDER: '/staging'
-    BUILD_FOLDER: './build'
+    BUILD_FOLDER: './dist'
   before_script:
     - apt-get update
     - apt-get install -y rsync openssh-client

babel.config.js

+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};

integrate.md

@@ -21,8 +21,9 @@
     special urgent request submit button and text field. I checked, and the
     `setUrgentIntent` function does get called, so maybe the code that listens
     for that intent is not loaded for some reason?
+* Replace snowpack by webpack
+  * testing: http://www.thedreaming.org/2020/11/09/jest-for-web-projects/
 
 ## TODO
 
-* fix absolute URLs to /static so they can be in a /staging subdirectory
 * load fonts from website, or not at all

jest.config.js

-module.exports = {
-  ...require('@snowpack/app-scripts-react/jest.config.js')(),
-  moduleNameMapper: {
-    '\\.[as]?css$': 'identity-obj-proxy',
-  },
+module.exports = function () {
+  return {
+    moduleNameMapper: {
+      ".+\\.(css|sass|scss)$": `identity-obj-proxy`,
+    },
+    rootDir: '.',
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+    testMatch: [
+      '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+      '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+    ],
+    transform: {
+      '^.+\\.(js|jsx|ts|tsx)$': "babel-jest",
+    },
+    transformIgnorePatterns: ['node_modules'],
+  };
 };
-

package.json

@@ -4,8 +4,8 @@
   "description": "Webform for helping users check the status of their web services and get help if required.",
   "main": "index.js",
   "scripts": {
-    "start": "snowpack dev",
-    "build": "snowpack build",
+    "start": "webpack serve --open --host 0.0.0.0 --mode=development",
+    "build": "webpack --mode=production",
     "test": "jest --coverage --watchAll",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,yaml}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,yaml}\""
@@ -14,9 +14,11 @@
     "type": "git",
     "url": "https://open.greenhost.net/greenhost/outage-form"
   },
-  "author": "Mark Swillus, Tin Geber, Chris Snijder",
+  "author": "Tin Geber, Arie Peterson, Chris Snijder, Mark Swillus",
   "license": "Apache-2.0",
-  "browserslist": [ "defaults" ],
+  "browserslist": [
+    "defaults"
+  ],
   "dependencies": {
     "i18next": "^19.8.7",
     "js-yaml": "^4.0.0",
@@ -26,13 +28,7 @@
   },
   "devDependencies": {
     "@babel/preset-react": "^7.12.13",
-    "@snowpack/app-scripts-react": "^2.0.0",
-    "@snowpack/plugin-build-script": "^2.1.0",
-    "@snowpack/plugin-dotenv": "^2.0.5",
-    "@snowpack/plugin-react-refresh": "^2.4.0",
-    "@snowpack/plugin-sass": "^1.3.0",
-    "@snowpack/plugin-typescript": "^1.2.0",
-    "@snowpack/plugin-webpack": "^2.3.1",
+    "@babel/preset-typescript": "^7.13.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.0.0",
     "@testing-library/react-hooks": "^5.0.3",
@@ -41,24 +37,33 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-transition-group": "^4.4.0",
-    "@types/snowpack-env": "^2.3.2",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
+    "babel-jest": "^26.6.3",
     "babel-preset-react-app": "^10.0.0",
+    "copy-webpack-plugin": "^8.1.1",
     "core-js": "^3.11.3",
+    "css-loader": "^5.2.4",
     "eslint": "^7.20.0",
     "eslint-plugin-jest-dom": "^3.6.5",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-testing-library": "^3.10.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-cli": "^26.6.3",
+    "js-yaml-loader": "^1.2.2",
     "markdown-to-jsx": "^7.1.1",
+    "mini-css-extract-plugin": "^1.6.0",
     "prettier": "^2.0.5",
+    "react-test-renderer": "^17.0.2",
     "react-transition-group": "^4.4.1",
     "rxjs": "^6.6.3",
-    "sass": "^1.32.6",
-    "snowpack": "^3.0.11",
+    "sass": "^1.32.13",
+    "sass-loader": "^11.1.1",
+    "ts-loader": "^8.3.0",
     "ts-node": "^9.1.1",
-    "typescript": "^4.0.0"
+    "typescript": "^4.2.4",
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }

snowpack.config.js

-/** @type {import("snowpack").SnowpackUserConfig } */
-module.exports = {
-  mount: {
-    public: { url: '/', static: true },
-    src: { url: '/dist' },
-  },
-  plugins: [
-    '@snowpack/plugin-react-refresh',
-    '@snowpack/plugin-dotenv',
-    '@snowpack/plugin-typescript',
-    "@snowpack/plugin-sass",
-    ["@snowpack/plugin-build-script", { "cmd": "js-yaml", "input": [".yaml", ".yml"], "output": [".json"]}],
-    ["@snowpack/plugin-webpack", { outputPattern: { css: "[name].css", js: "[name].js"} }]
-    // ["@snowpack/plugin-optimize", { "preloadCSS": true }]
-  ],
-  routes: [
-    /* Enable an SPA Fallback in development: */
-    // {"match": "routes", "src": ".*", "dest": "/index.html"},
-  ],
-  // This uses the built-in snowpack bundler, but that creates inline styles
-  // that are not allowed under our CSP.
-  // optimize: {
-  //   bundle: true,
-  //   minify: true,
-  //   target: 'es2017'
-  // },
-  packageOptions: {
-    /* ... */
-  },
-  devOptions: {
-    /* ... */
-  },
-  buildOptions: {
-    /* ... */
-  },
-};

src/index.tsx

@@ -39,9 +39,3 @@ ReactDOM.render(
   </React.StrictMode>,
   root,
 );
-
-// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
-// Learn more: https://snowpack.dev/concepts/hot-module-replacement
-if (import.meta.hot) {
-  import.meta.hot.accept();
-}

tsconfig.json

@@ -4,17 +4,8 @@
     "module": "esnext",
     "target": "esnext",
     "moduleResolution": "node",
-    "jsx": "preserve",
+    "jsx": "react",
     "baseUrl": "./",
-    /* paths - import rewriting/resolving */
-    "paths": {
-      // If you configured any Snowpack aliases, add them here.
-      // Add this line to get types for streaming imports (packageOptions.source="remote"):
-      //     "*": [".snowpack/types/*"]
-      // More info: https://www.snowpack.dev/guides/streaming-imports
-    },
-    /* noEmit - Snowpack builds (emits) files, not tsc. */
-    "noEmit": true,
     /* Additional Options */
     "strict": true,
     "skipLibCheck": true,

webpack.config.js

+const CopyPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.tsx',
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+      ignoreOrder: false, // Enable to remove warnings about conflicting order
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: "public/style-copied-from-website.css" },
+      ],
+      options: {
+        concurrency: 100,
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.ya?ml$/,
+        use: 'js-yaml-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};