Bundle using webpack plugin for snowpack

integrate.md

+* i18n: the form is already configured to use the `lang` tag of the mounting
+  dom element, so if we set that from the website, we should be fine.
+* only show the LocaleSwitcher in dev mode
+
+### bundling
+
+* The built-in bundler (esbuild) of snowpack creates inline style elements
+  dynamically, which the CSP doesn't allow. Better CSS support in esbuild is
+  underway but not finished.
+* There is a experimental @snowpack/plugin-optimize plugin which has a
+  preloadCSS option to gather all css into one file. That part works, but this
+  plugin doesn't allow bundling the javascript parts, and the unbundled script
+  files it outputs give errors in my browser.
+* The recommended (by snowpack authors) approach is to use
+  @snowpack/plugin-webpack, but webpack errors out on the current source code.
+  * https://github.com/snowpackjs/snowpack/discussions/2218 : add core-js as dev dependency
+  * add browserslist to package.json
+* After fixing above errors, with some effort I could load the contact form on the website.
+  * However, the "urgent request" button doesn't have the effect it should
+    have, of removing the regular submit button from the DOM, and creating the
+    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?
+
+## TODO
+
+* fix absolute URLs to /static so they can be in a /staging subdirectory
+* load fonts from website, or not at all

package.json

@@ -16,6 +16,7 @@
   },
   "author": "Mark Swillus, Tin Geber, Chris Snijder",
   "license": "Apache-2.0",
+  "browserslist": [ "defaults" ],
   "dependencies": {
     "i18next": "^19.8.7",
     "js-yaml": "^4.0.0",
@@ -31,6 +32,7 @@
     "@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",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.0.0",
     "@testing-library/react-hooks": "^5.0.3",
@@ -43,6 +45,7 @@
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
     "babel-preset-react-app": "^10.0.0",
+    "core-js": "^3.11.3",
     "eslint": "^7.20.0",
     "eslint-plugin-jest-dom": "^3.6.5",
     "eslint-plugin-react": "^7.22.0",

snowpack.config.js

@@ -9,17 +9,21 @@ module.exports = {
     '@snowpack/plugin-dotenv',
     '@snowpack/plugin-typescript',
     "@snowpack/plugin-sass",
-    ["@snowpack/plugin-build-script", { "cmd": "js-yaml", "input": [".yaml", ".yml"], "output": [".json"]}]
+    ["@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"},
   ],
-  optimize: {
-    bundle: true,
-    minify: true,
-    target: 'es2017'
-  },
+  // 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: {
     /* ... */
   },