Update Vite to 3.0

- Replaces `sanitize-html` with `xss` due to Node core modules
  dependencies
- Remove empty style tag from SeedDropdown
- Update devServer ports
- Replace vite-plugin-rewrite-all
- Add node events polyfill

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

package.json

@@ -18,10 +18,12 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/vite-dev-server": "^2.2.2",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/svelte": "^3.1.0",
     "@tsconfig/svelte": "^1.0.13",
+    "@types/connect-history-api-fallback": "^1.3.5",
+    "@types/express-serve-static-core": "^4.17.30",
     "@types/sanitize-html": "^2.6.2",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
@@ -30,12 +32,11 @@
     "eslint-plugin-radicle": "^0.2.0",
     "eslint-plugin-svelte3": "^3.2.0",
     "happy-dom": "^2.50.0",
-    "svelte-check": "^2.7.1",
-    "typescript": "^4.6.4",
-    "vite": "^2.7.13",
-    "vite-plugin-istanbul": "^2.5.1",
-    "vite-plugin-rewrite-all": "^0.1.2",
-    "vitest": "^0.6.3"
+    "svelte-check": "^2.8.0",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.3",
+    "vite-plugin-istanbul": "^2.9.0",
+    "vitest": "^0.19.1"
   },
   "dependencies": {
     "@datamodels/identity-profile-basic": "^0.1.2",
@@ -54,19 +55,21 @@
     "@walletconnect/utils": "^1.7.8",
     "buffer": "^6.0.3",
     "caip": "^0.9.2",
+    "connect-history-api-fallback": "^2.0.0",
     "eip1193-provider": "1.0.1",
     "ethereum-blockies": "^0.1.1",
     "ethers": "^5.5.0",
     "eventemitter3": "4.0.7",
+    "events": "^3.3.0",
     "marked": "^4.0.12",
     "md5": "^2.3.0",
     "multibase": "^4.0.4",
     "multihashes": "^4.0.2",
     "pure-svg-code": "^1.0.6",
-    "sanitize-html": "^2.6.1",
     "siwe": "^1.1.6",
-    "svelte": "^3.46.3",
-    "svelte-preprocess": "^4.7.2",
-    "svelte-routing": "^1.6.0"
+    "svelte": "^3.49.0",
+    "svelte-preprocess": "^4.10.7",
+    "svelte-routing": "^1.6.0",
+    "xss": "^1.0.13"
   }
 }

src/Markdown.svelte

@@ -4,7 +4,7 @@
   import matter from "@radicle/gray-matter";
   import type * as proj from "@app/project";
   import { getImageMime } from "@app/utils";
-  import sanitizeHtml from "sanitize-html";
+  import xss, { getDefaultWhiteList } from "xss";
 
   export let content: string;
   export let getImage: (path: string) => Promise<proj.Blob>;
@@ -15,18 +15,14 @@
   let container: HTMLElement;
 
   const render = (content: string): string => {
-    return sanitizeHtml(marked.parse(content), {
-      allowedTags: sanitizeHtml.defaults.allowedTags.concat([
-        "img",
-        "audio",
-        "video",
-      ]),
-      allowedAttributes: {
-        ...sanitizeHtml.defaults.allowedAttributes,
-        video: ["src"],
+    return xss(marked.parse(content), {
+      whiteList: {
+        ...getDefaultWhiteList(),
+        img: ["src"],
         audio: ["src"],
+        video: ["src"]
       },
-      disallowedTagsMode: "escape",
+      stripIgnoreTag: false,
     });
   };
 

src/SeedDropdown.svelte

@@ -20,9 +20,6 @@
   };
 </script>
 
-<style>
-</style>
-
 {#await formatSeeds() then items}
   <Dropdown
     {items}

src/polyfills/events.ts

@@ -0,0 +1,5 @@
+// This shim is used as a stand-in for the node "events" library, used by
+// the "keccack" package depended on by @gnosis.pm/safe-core-sdk.
+import events from 'events';
+
+export default events;

vite.config.ts

@@ -2,8 +2,10 @@
 import path from 'path';
 import { UserConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
-import rewriteAll from 'vite-plugin-rewrite-all';
+import { ViteDevServer } from "vite";
 import IstanbulPlugin from 'vite-plugin-istanbul';
+import history from "connect-history-api-fallback";
+import type { Request, Response } from "express-serve-static-core";
 
 const config: UserConfig = {
   optimizeDeps: {
@@ -41,6 +43,9 @@ const config: UserConfig = {
       cypress: true
     })
   ],
+  server: {
+    port: 3000
+  },
   resolve: {
     alias: {
       // This is needed for vite not to choke.
@@ -71,3 +76,21 @@ if (process.env.VITEST || process.env.Cypress) {
 }
 
 export default config;
+
+function rewriteAll() {
+  return {
+    name: 'rewrite-all',
+    configureServer(server: ViteDevServer) {
+      return () => {
+        const handler = history({
+          disableDotRule: true,
+          rewrites: [{ from: /\/$/, to: () => "/index.html" }]
+        });
+
+        server.middlewares.use((req, res, next) => {
+          handler(req as Request, res as Response, next);
+        });
+      };
+    }
+  };
+}