Remove WebPack and let Vue CLI handle WASM. Project restructuring fixes. Add Vue SVG Loader. Fixes #29.

2021-03-23 01:09:29 -07:00 · 2021-03-23 01:09:29 -07:00 · fb5ce7e388
parent 76043cebcb
commit fb5ce7e388
26 changed files with 314 additions and 649 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@ -18,10 +18,6 @@ version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"

-[[package]]
-name = "cli"
-version = "0.1.0"
-
 [[package]]
 name = "console_error_panic_hook"
 version = "0.1.6"
@ -33,12 +29,24 @@ dependencies = [
 ]

 [[package]]
-name = "graphite-editor"
+name = "graphite-cli"
+version = "0.1.0"
+
+[[package]]
+name = "graphite-document-core"
+version = "0.1.0"
+
+[[package]]
+name = "graphite-editor-core"
 version = "0.1.0"
 dependencies = [
 "log",
 ]

+[[package]]
+name = "graphite-renderer-core"
+version = "0.1.0"
+
 [[package]]
 name = "js-sys"
 version = "0.3.49"
@ -81,10 +89,6 @@ dependencies = [
 "proc-macro2",
 ]

-[[package]]
-name = "render-engine"
-version = "0.1.0"
-
 [[package]]
 name = "scoped-tls"
 version = "1.0.0"
@ -203,7 +207,7 @@ name = "wasm-wrapper"
 version = "0.1.0"
 dependencies = [
 "console_error_panic_hook",
- "graphite-editor",
+ "graphite-editor-core",
 "wasm-bindgen",
 "wasm-bindgen-test",
 ]
--- a/README.md
+++ b/README.md
@ -66,27 +66,35 @@ We are also focusing initial feature development on a destructive SVG vector edi

 ## Running the code

-The project is split between a Rust crates in `/packages` and web-based frontend in `/web-frontend` (this will be replaced by a native GUI system in the future in order to compile Graphite for Windows, Mac, and Linux). Currently the Vue.js frontend runs with the Vue CLI but the WASM bindings HTML/JS is built with WebPack (see [issue #29](https://github.com/GraphiteEditor/Graphite/issues/29)).
+The project is split clients and core libraries (which use the clients). Currently the only important client is the web frontend (`/client/web`). There's also a CLI client that may be useful for testing. The only core library so far is the Editor Core Library (`/core/editor`). The web client's Vue code lives in `/client/web/vue` and a Rust wrapper for the Editor Core Library (which exposes functions to JavaScript through bindings generated by wasm-bindgen) lives in `/client/web/wasm`.

-### Running the web frontend
+A good starting point for learning about the code structure and architecture is reading the [documentation](docs/index.md).
+
+### Web client
+
+This is the primary means of running and developing the project. You may need to download and install [Rust](https://www.rust-lang.org/), [Node.js](https://nodejs.org/) and [wasm-pack](https://rustwasm.github.io/wasm-pack/).

 ```
-cd web-frontend
+cd client
+cd web
 npm install
 npm run serve
 ```

-### Running the WASM binding generator
+### CLI client

-PREREQUISITE: [Download and install](https://rustwasm.github.io/wasm-pack/) wasm-pack first.
-```
-cd web-frontend
-npm install
-npm run webpack-start
-```
-
-### Running the Rust code
+This may be useful for testing at some point.

 ```
 cargo run
 ```
+
+### Editor core library
+
+This will be run and tested mainly through the web frontend, which builds the Rust code into WebAssembly automatically. But if you need to build the code on its own:
+
+```
+cd core
+cd editor
+cargo build
+```
--- a/client/web/.editorconfig
+++ b/client/web/.editorconfig
@ -1,6 +1,6 @@
 [*.{js,jsx,ts,tsx,vue}]
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
--- a/client/web/.eslintignore
+++ b/client/web/.eslintignore
@ -0,0 +1 @@
+wasm/pkg/*
--- a/client/web/assets/svg/16x16-bounds-12x12-icon/tab_close_x.svg
+++ b/client/web/assets/svg/16x16-bounds-12x12-icon/tab_close_x.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16">
+	<polygon points="12,5 11,4 8,7 5,4 4,5 7,8 4,11 5,12 8,9 11,12 12,11 9,8" />
+</svg>
--- a/client/web/assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg
+++ b/client/web/assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg
@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 24">
+	<circle cx="8" cy="8" r="1.5" />
+	<circle cx="8" cy="12" r="1.5" />
+	<circle cx="8" cy="16" r="1.5" />
+</svg>
--- a/client/web/main.js
+++ b/client/web/main.js
@ -1 +0,0 @@
-import("./pkg");
--- a/client/web/package-lock.json
+++ b/client/web/package-lock.json
@ -44,12 +44,6 @@
 				"to-fast-properties": "^2.0.0"
 			}
 		},
-		"@discoveryjs/json-ext": {
-			"version": "0.5.2",
-			"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz",
-			"integrity": "sha512-HyYEUDeIj5rRQU2Hk5HTB2uHsbRQpF70nvMhVzi+VJR0X+xNEhjPui4/kBf3VeH/wqD28PT4sVOm8qqLjBrSZg==",
-			"dev": true
-		},
 		"@hapi/address": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -297,12 +291,6 @@
 				"@types/node": "*"
 			}
 		},
-		"@types/html-minifier-terser": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
-			"integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==",
-			"dev": true
-		},
 		"@types/http-proxy": {
 			"version": "1.17.5",
 			"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.5.tgz",
@ -695,6 +683,16 @@
 					"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
 					"dev": true
 				},
+				"ansi-styles": {
+					"version": "4.3.0",
+					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"color-convert": "^2.0.1"
+					}
+				},
 				"big.js": {
 					"version": "3.2.0",
 					"resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
@ -727,6 +725,34 @@
 						"unique-filename": "^1.1.1"
 					}
 				},
+				"chalk": {
+					"version": "4.1.0",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+					"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"ansi-styles": "^4.1.0",
+						"supports-color": "^7.1.0"
+					}
+				},
+				"color-convert": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"color-name": "~1.1.4"
+					}
+				},
+				"color-name": {
+					"version": "1.1.4",
+					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+					"dev": true,
+					"optional": true
+				},
 				"emojis-list": {
 					"version": "2.1.0",
 					"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
@ -765,6 +791,13 @@
 						"universalify": "^0.1.0"
 					}
 				},
+				"has-flag": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+					"dev": true,
+					"optional": true
+				},
 				"html-webpack-plugin": {
 					"version": "3.2.0",
 					"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@ -885,6 +918,16 @@
 						"minipass": "^3.1.1"
 					}
 				},
+				"supports-color": {
+					"version": "7.2.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"has-flag": "^4.0.0"
+					}
+				},
 				"terser-webpack-plugin": {
 					"version": "2.3.8",
 					"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -918,6 +961,109 @@
 						"object.getownpropertydescriptors": "^2.0.3"
 					}
 				},
+				"vue-loader": {
+					"version": "15.9.6",
+					"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
+					"integrity": "sha512-j0cqiLzwbeImIC6nVIby2o/ABAWhlppyL/m5oJ67R5MloP0hj/DtFgb0Zmq3J9CG7AJ+AXIvHVnJAPBvrLyuDg==",
+					"dev": true,
+					"requires": {
+						"@vue/component-compiler-utils": "^3.1.0",
+						"hash-sum": "^1.0.2",
+						"loader-utils": "^1.1.0",
+						"vue-hot-reload-api": "^2.3.0",
+						"vue-style-loader": "^4.1.0"
+					},
+					"dependencies": {
+						"big.js": {
+							"version": "5.2.2",
+							"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+							"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+							"dev": true
+						},
+						"emojis-list": {
+							"version": "3.0.0",
+							"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+							"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+							"dev": true
+						},
+						"hash-sum": {
+							"version": "1.0.2",
+							"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+							"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
+							"dev": true
+						},
+						"json5": {
+							"version": "1.0.1",
+							"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+							"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+							"dev": true,
+							"requires": {
+								"minimist": "^1.2.0"
+							}
+						},
+						"loader-utils": {
+							"version": "1.4.0",
+							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+							"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+							"dev": true,
+							"requires": {
+								"big.js": "^5.2.2",
+								"emojis-list": "^3.0.0",
+								"json5": "^1.0.1"
+							}
+						}
+					}
+				},
+				"vue-loader-v16": {
+					"version": "npm:vue-loader@16.1.2",
+					"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+					"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"chalk": "^4.1.0",
+						"hash-sum": "^2.0.0",
+						"loader-utils": "^2.0.0"
+					},
+					"dependencies": {
+						"big.js": {
+							"version": "5.2.2",
+							"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+							"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+							"dev": true,
+							"optional": true
+						},
+						"emojis-list": {
+							"version": "3.0.0",
+							"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+							"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+							"dev": true,
+							"optional": true
+						},
+						"json5": {
+							"version": "2.2.0",
+							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+							"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+							"dev": true,
+							"optional": true,
+							"requires": {
+								"minimist": "^1.2.5"
+							}
+						},
+						"loader-utils": {
+							"version": "2.0.0",
+							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+							"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+							"dev": true,
+							"optional": true,
+							"requires": {
+								"big.js": "^5.2.2",
+								"emojis-list": "^3.0.0",
+								"json5": "^2.1.2"
+							}
+						}
+					}
+				},
 				"yallist": {
 					"version": "3.1.1",
 					"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@ -1174,9 +1320,8 @@
 			"dev": true
 		},
 		"@wasm-tool/wasm-pack-plugin": {
-			"version": "1.3.3",
-			"resolved": "https://registry.npmjs.org/@wasm-tool/wasm-pack-plugin/-/wasm-pack-plugin-1.3.3.tgz",
-			"integrity": "sha512-CJuluHW6JbUJoNfHj1VGZj11IS4mPK8gMmfW+/EPNViFnrzcHt6a9csG+BTyh0lw4gnzME4/nzAM7ZEiRYTUfw==",
+			"version": "github:wasm-tool/wasm-pack-plugin#f0cbb6dda359440374f54b5173077fd582162ad2",
+			"from": "github:wasm-tool/wasm-pack-plugin",
 			"dev": true,
 			"requires": {
 				"chalk": "^2.4.1",
@ -1371,27 +1516,6 @@
 				"@xtuc/long": "4.2.2"
 			}
 		},
-		"@webpack-cli/configtest": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.1.tgz",
-			"integrity": "sha512-B+4uBUYhpzDXmwuo3V9yBH6cISwxEI4J+NO5ggDaGEEHb0osY/R7MzeKc0bHURXQuZjMM4qD+bSJCKIuI3eNBQ==",
-			"dev": true
-		},
-		"@webpack-cli/info": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.2.2.tgz",
-			"integrity": "sha512-5U9kUJHnwU+FhKH4PWGZuBC1hTEPYyxGSL5jjoBI96Gx8qcYJGOikpiIpFoTq8mmgX3im2zAo2wanv/alD74KQ==",
-			"dev": true,
-			"requires": {
-				"envinfo": "^7.7.3"
-			}
-		},
-		"@webpack-cli/serve": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.3.0.tgz",
-			"integrity": "sha512-k2p2VrONcYVX1wRRrf0f3X2VGltLWcv+JzXRBDmvCxGlCeESx4OXw91TsWeKOkp784uNoVQo313vxJFHXPPwfw==",
-			"dev": true
-		},
 		"@xtuc/ieee754": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@ -1937,8 +2061,7 @@
 		"big.js": {
 			"version": "5.2.2",
 			"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-			"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-			"dev": true
+			"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
 		},
 		"binary-extensions": {
 			"version": "2.2.0",
@ -4017,43 +4140,6 @@
 				"domelementtype": "1"
 			}
 		},
-		"dot-case": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-			"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-			"dev": true,
-			"requires": {
-				"no-case": "^3.0.4",
-				"tslib": "^2.0.3"
-			},
-			"dependencies": {
-				"lower-case": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-					"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-					"dev": true,
-					"requires": {
-						"tslib": "^2.0.3"
-					}
-				},
-				"no-case": {
-					"version": "3.0.4",
-					"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-					"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-					"dev": true,
-					"requires": {
-						"lower-case": "^2.0.2",
-						"tslib": "^2.0.3"
-					}
-				},
-				"tslib": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-					"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
-					"dev": true
-				}
-			}
-		},
 		"dot-prop": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@ -4165,8 +4251,7 @@
 		"emojis-list": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-			"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-			"dev": true
+			"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
 		},
 		"encodeurl": {
 			"version": "1.0.2",
@ -4206,35 +4291,12 @@
 				}
 			}
 		},
-		"enquirer": {
-			"version": "2.3.6",
-			"resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-			"integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-			"dev": true,
-			"requires": {
-				"ansi-colors": "^4.1.1"
-			},
-			"dependencies": {
-				"ansi-colors": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-					"integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-					"dev": true
-				}
-			}
-		},
 		"entities": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
 			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
 			"dev": true
 		},
-		"envinfo": {
-			"version": "7.7.4",
-			"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz",
-			"integrity": "sha512-TQXTYFVVwwluWSFis6K2XKxgrD22jEv0FTuLCQI+OjH7rn93+iY0fSSFM5lrSxFY+H1+B0/cvvlamr3UsBivdQ==",
-			"dev": true
-		},
 		"errno": {
 			"version": "0.1.8",
 			"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@ -5091,12 +5153,6 @@
 			"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
 			"dev": true
 		},
-		"fastest-levenshtein": {
-			"version": "1.0.12",
-			"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-			"integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
-			"dev": true
-		},
 		"fastq": {
 			"version": "1.10.1",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.1.tgz",
@ -5792,8 +5848,7 @@
 		"hash-sum": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
-			"integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
-			"dev": true
+			"integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg=="
 		},
 		"hash.js": {
 			"version": "1.1.7",
@ -5905,84 +5960,6 @@
 				}
 			}
 		},
-		"html-minifier-terser": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
-			"integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
-			"dev": true,
-			"requires": {
-				"camel-case": "^4.1.1",
-				"clean-css": "^4.2.3",
-				"commander": "^4.1.1",
-				"he": "^1.2.0",
-				"param-case": "^3.0.3",
-				"relateurl": "^0.2.7",
-				"terser": "^4.6.3"
-			},
-			"dependencies": {
-				"camel-case": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-					"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-					"dev": true,
-					"requires": {
-						"pascal-case": "^3.1.2",
-						"tslib": "^2.0.3"
-					}
-				},
-				"commander": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-					"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-					"dev": true
-				},
-				"param-case": {
-					"version": "3.0.4",
-					"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-					"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-					"dev": true,
-					"requires": {
-						"dot-case": "^3.0.4",
-						"tslib": "^2.0.3"
-					}
-				},
-				"tslib": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-					"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
-					"dev": true
-				}
-			}
-		},
-		"html-webpack-plugin": {
-			"version": "4.5.2",
-			"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.2.tgz",
-			"integrity": "sha512-q5oYdzjKUIPQVjOosjgvCHQOv9Ett9CYYHlgvJeXG0qQvdSojnBq4vAdQBwn1+yGveAwHCoe/rMR86ozX3+c2A==",
-			"dev": true,
-			"requires": {
-				"@types/html-minifier-terser": "^5.0.0",
-				"@types/tapable": "^1.0.5",
-				"@types/webpack": "^4.41.8",
-				"html-minifier-terser": "^5.0.1",
-				"loader-utils": "^1.2.3",
-				"lodash": "^4.17.20",
-				"pretty-error": "^2.1.1",
-				"tapable": "^1.1.3",
-				"util.promisify": "1.0.0"
-			},
-			"dependencies": {
-				"util.promisify": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
-					"integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
-					"dev": true,
-					"requires": {
-						"define-properties": "^1.1.2",
-						"object.getownpropertydescriptors": "^2.0.3"
-					}
-				}
-			}
-		},
 		"htmlparser2": {
 			"version": "3.10.1",
 			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@ -7852,8 +7829,7 @@
 		"minimist": {
 			"version": "1.2.5",
 			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-			"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-			"dev": true
+			"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
 		},
 		"minipass": {
 			"version": "3.1.3",
@ -8576,43 +8552,6 @@
 			"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
 			"dev": true
 		},
-		"pascal-case": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-			"dev": true,
-			"requires": {
-				"no-case": "^3.0.4",
-				"tslib": "^2.0.3"
-			},
-			"dependencies": {
-				"lower-case": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-					"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-					"dev": true,
-					"requires": {
-						"tslib": "^2.0.3"
-					}
-				},
-				"no-case": {
-					"version": "3.0.4",
-					"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-					"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-					"dev": true,
-					"requires": {
-						"lower-case": "^2.0.2",
-						"tslib": "^2.0.3"
-					}
-				},
-				"tslib": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-					"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
-					"dev": true
-				}
-			}
-		},
 		"pascalcase": {
 			"version": "0.1.1",
 			"resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
@ -9809,15 +9748,6 @@
 				"picomatch": "^2.2.1"
 			}
 		},
-		"rechoir": {
-			"version": "0.7.0",
-			"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
-			"integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
-			"dev": true,
-			"requires": {
-				"resolve": "^1.9.0"
-			}
-		},
 		"regex-not": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@ -11017,15 +10947,6 @@
 				"has-flag": "^3.0.0"
 			}
 		},
-		"svg-to-vue": {
-			"version": "0.7.0",
-			"resolved": "https://registry.npmjs.org/svg-to-vue/-/svg-to-vue-0.7.0.tgz",
-			"integrity": "sha512-Tg2nMmf3BQorYCAjxbtTkYyWPVSeox5AZUFvfy4MoWK/5tuQlnA/h3LAlTjV3sEvOC5FtUNovRSj3p784l4KOA==",
-			"dev": true,
-			"requires": {
-				"svgo": "^1.3.2"
-			}
-		},
 		"svgo": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@ -11878,32 +11799,9 @@
 			"dev": true
 		},
 		"vue-loader": {
-			"version": "15.9.6",
-			"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
-			"integrity": "sha512-j0cqiLzwbeImIC6nVIby2o/ABAWhlppyL/m5oJ67R5MloP0hj/DtFgb0Zmq3J9CG7AJ+AXIvHVnJAPBvrLyuDg==",
-			"dev": true,
-			"requires": {
-				"@vue/component-compiler-utils": "^3.1.0",
-				"hash-sum": "^1.0.2",
-				"loader-utils": "^1.1.0",
-				"vue-hot-reload-api": "^2.3.0",
-				"vue-style-loader": "^4.1.0"
-			},
-			"dependencies": {
-				"hash-sum": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-					"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
-					"dev": true
-				}
-			}
-		},
-		"vue-loader-v16": {
-			"version": "npm:vue-loader@16.1.2",
+			"version": "16.1.2",
 			"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
 			"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-			"dev": true,
-			"optional": true,
 			"requires": {
 				"chalk": "^4.1.0",
 				"hash-sum": "^2.0.0",
@ -11914,8 +11812,6 @@
 					"version": "4.3.0",
 					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"optional": true,
 					"requires": {
 						"color-convert": "^2.0.1"
 					}
@ -11924,8 +11820,6 @@
 					"version": "4.1.0",
 					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
 					"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-					"dev": true,
-					"optional": true,
 					"requires": {
 						"ansi-styles": "^4.1.0",
 						"supports-color": "^7.1.0"
@ -11935,8 +11829,6 @@
 					"version": "2.0.1",
 					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"optional": true,
 					"requires": {
 						"color-name": "~1.1.4"
 					}
@ -11944,23 +11836,17 @@
 				"color-name": {
 					"version": "1.1.4",
 					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true,
-					"optional": true
+					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
 				},
 				"has-flag": {
 					"version": "4.0.0",
 					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true,
-					"optional": true
+					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
 				},
 				"json5": {
 					"version": "2.2.0",
 					"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
 					"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-					"dev": true,
-					"optional": true,
 					"requires": {
 						"minimist": "^1.2.5"
 					}
@ -11969,8 +11855,6 @@
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
 					"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-					"dev": true,
-					"optional": true,
 					"requires": {
 						"big.js": "^5.2.2",
 						"emojis-list": "^3.0.0",
@ -11981,8 +11865,6 @@
 					"version": "7.2.0",
 					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"optional": true,
 					"requires": {
 						"has-flag": "^4.0.0"
 					}
@ -12008,13 +11890,36 @@
 			}
 		},
 		"vue-svg-loader": {
-			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",
-			"integrity": "sha512-2RtFXlTCYWm8YAEO2qAOZ2SuIF2NvLutB5muc3KDYoZq5ZeCHf8ggzSan3ksbbca7CJ/Aw57ZnDF4B7W/AkGtw==",
+			"version": "0.17.0-beta.2",
+			"resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.17.0-beta.2.tgz",
+			"integrity": "sha512-iMUGJTKEcuNAG8VXOchjA8443IqEmEi2Aw6EVIHWma2cC4TUQ7Oet5Yry9IFfqXQXXvyzXz5EyttVvfRGTNH4Q==",
 			"dev": true,
 			"requires": {
-				"loader-utils": "^1.2.3",
-				"svg-to-vue": "^0.7.0"
+				"loader-utils": "^2.0.0",
+				"semver": "^7.3.2",
+				"svgo": "^1.3.2"
+			},
+			"dependencies": {
+				"json5": {
+					"version": "2.2.0",
+					"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+					"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+					"dev": true,
+					"requires": {
+						"minimist": "^1.2.5"
+					}
+				},
+				"loader-utils": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+					"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+					"dev": true,
+					"requires": {
+						"big.js": "^5.2.2",
+						"emojis-list": "^3.0.0",
+						"json5": "^2.1.2"
+					}
+				}
 			}
 		},
 		"vue-template-compiler": {
@ -12245,220 +12150,6 @@
 				}
 			}
 		},
-		"webpack-cli": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.5.0.tgz",
-			"integrity": "sha512-wXg/ef6Ibstl2f50mnkcHblRPN/P9J4Nlod5Hg9HGFgSeF8rsqDGHJeVe4aR26q9l62TUJi6vmvC2Qz96YJw1Q==",
-			"dev": true,
-			"requires": {
-				"@discoveryjs/json-ext": "^0.5.0",
-				"@webpack-cli/configtest": "^1.0.1",
-				"@webpack-cli/info": "^1.2.2",
-				"@webpack-cli/serve": "^1.3.0",
-				"colorette": "^1.2.1",
-				"commander": "^7.0.0",
-				"enquirer": "^2.3.6",
-				"execa": "^5.0.0",
-				"fastest-levenshtein": "^1.0.12",
-				"import-local": "^3.0.2",
-				"interpret": "^2.2.0",
-				"rechoir": "^0.7.0",
-				"v8-compile-cache": "^2.2.0",
-				"webpack-merge": "^5.7.3"
-			},
-			"dependencies": {
-				"commander": {
-					"version": "7.1.0",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-7.1.0.tgz",
-					"integrity": "sha512-pRxBna3MJe6HKnBGsDyMv8ETbptw3axEdYHoqNh7gu5oDcew8fs0xnivZGm06Ogk8zGAJ9VX+OPEr2GXEQK4dg==",
-					"dev": true
-				},
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"execa": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz",
-					"integrity": "sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^7.0.3",
-						"get-stream": "^6.0.0",
-						"human-signals": "^2.1.0",
-						"is-stream": "^2.0.0",
-						"merge-stream": "^2.0.0",
-						"npm-run-path": "^4.0.1",
-						"onetime": "^5.1.2",
-						"signal-exit": "^3.0.3",
-						"strip-final-newline": "^2.0.0"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz",
-					"integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==",
-					"dev": true
-				},
-				"human-signals": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-					"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-					"dev": true
-				},
-				"import-local": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
-					"integrity": "sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==",
-					"dev": true,
-					"requires": {
-						"pkg-dir": "^4.2.0",
-						"resolve-cwd": "^3.0.0"
-					}
-				},
-				"interpret": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
-					"integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
-					"dev": true
-				},
-				"is-stream": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-					"integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-					"dev": true
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					}
-				},
-				"resolve-cwd": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-					"integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-					"dev": true,
-					"requires": {
-						"resolve-from": "^5.0.0"
-					}
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"webpack-merge": {
-					"version": "5.7.3",
-					"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.7.3.tgz",
-					"integrity": "sha512-6/JUQv0ELQ1igjGDzHkXbVDRxkfA57Zw7PfiupdLFJYrgFqY5ZP8xxbpp2lU3EPwYx89ht5Z/aDkD40hFCm5AA==",
-					"dev": true,
-					"requires": {
-						"clone-deep": "^4.0.1",
-						"wildcard": "^2.0.0"
-					}
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
-			}
-		},
 		"webpack-dev-middleware": {
 			"version": "3.7.3",
 			"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz",
@ -12819,12 +12510,6 @@
 			"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
 			"dev": true
 		},
-		"wildcard": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-			"integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
-			"dev": true
-		},
 		"word-wrap": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
--- a/client/web/package.json
+++ b/client/web/package.json
@ -2,13 +2,10 @@
 	"name": "graphite-web-frontend",
 	"version": "0.1.0",
 	"description": "Graphite's web app frontend. Planned to be replaced by a Rust native GUI framework in the future.",
-	"main": "main.js",
 	"scripts": {
 		"serve": "vue-cli-service serve",
 		"build": "vue-cli-service build",
-		"lint": "vue-cli-service lint",
-		"webpack-build": "webpack",
-		"webpack-start": "webpack serve"
+		"lint": "vue-cli-service lint"
 	},
 	"repository": {
 		"type": "git",
@ -17,6 +14,11 @@
 	"author": "Graphite Authors <contact@graphite.design>",
 	"license": "Apache-2.0",
 	"homepage": "https://www.graphite.design",
+	"dependencies": {
+		"vue": "^3.0.7",
+		"vue-class-component": "^8.0.0-0",
+		"vue-loader": "^16.1.2"
+	},
 	"devDependencies": {
 		"@typescript-eslint/eslint-plugin": "^2.33.0",
 		"@typescript-eslint/parser": "^2.33.0",
@ -30,16 +32,12 @@
 		"eslint": "^6.7.2",
 		"eslint-plugin-import": "^2.20.2",
 		"eslint-plugin-vue": "^7.8.0",
-		"html-webpack-plugin": "^4.5.2",
 		"lint-staged": "^9.5.0",
 		"sass": "^1.32.8",
 		"sass-loader": "^8.0.2",
 		"typescript": "~3.9.3",
-		"vue-svg-loader": "^0.16.0",
-		"vue-template-compiler": "^2.6.12",
-		"webpack": "^4.45.0",
-		"webpack-cli": "^4.5.0",
-		"webpack-dev-server": "^3.11.2"
+		"vue-svg-loader": "^0.17.0-beta.2",
+		"vue-template-compiler": "^2.6.12"
 	},
 	"gitHooks": {
 		"pre-commit": "lint-staged"
@ -49,9 +47,5 @@
 			"vue-cli-service lint",
 			"git add"
 		]
-	},
-	"dependencies": {
-		"vue": "^3.0.7",
-		"vue-class-component": "^8.0.0-0"
 	}
 }
--- a/client/web/public/index.html
+++ b/client/web/public/index.html
@ -5,12 +5,12 @@
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<meta name="msapplication-TileColor" content="#da532c">
+	<meta name="theme-color" content="#ffffff">
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 	<link rel="manifest" href="/site.webmanifest">
-	<meta name="msapplication-TileColor" content="#da532c">
-	<meta name="theme-color" content="#ffffff">
 	<link rel="stylesheet"
 		href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&family=Inconsolata:wght@400;700">
 	<title>Graphite</title>
--- a/client/web/src/App.vue
+++ b/client/web/src/App.vue
@ -21,5 +21,15 @@ import MainWindow from "./components/window/MainWindow.vue";

 export default defineComponent({
 	components: { MainWindow },
+	created() {
+		this.greet();
+	},
+	methods: {
+		async greet() {
+			const wasm = import("../wasm/pkg");
+			const { greet } = await wasm;
+			console.log(greet("Graphite"));
+		},
+	},
 });
 </script>
--- a/client/web/src/components/panel-system/DockablePanel.vue
+++ b/client/web/src/components/panel-system/DockablePanel.vue
@ -5,18 +5,12 @@
 				<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
 					<span>{{tabLabel}}</span>
 					<button v-if="tabCloseButtons">
-						<svg width="16" height="16" viewBox="0 0 16 16">
-							<polygon points="12,5 11,4 8,7 5,4 4,5 7,8 4,11 5,12 8,9 11,12 12,11 9,8" />
-						</svg>
+						<CloseX />
 					</button>
 				</div>
 			</div>
 			<div class="panel-options-ellipsis">
-				<svg viewBox="0 0 16 24">
-					<circle cx="8" cy="8" r="1.5" />
-					<circle cx="8" cy="12" r="1.5" />
-					<circle cx="8" cy="16" r="1.5" />
-				</svg>
+				<VerticalEllipsis />
 			</div>
 		</div>
 		<div class="panel-content">
@ -176,6 +170,8 @@ import Viewport from "../panels/ViewportPanel.vue";
 import Properties from "../panels/PropertiesPanel.vue";
 import Layers from "../panels/LayersPanel.vue";
 import Minimap from "../panels/MinimapPanel.vue";
+import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/tab_close_x.svg";
+import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";

 export default defineComponent({
 	components: {
@ -183,6 +179,8 @@ export default defineComponent({
 		Properties,
 		Layers,
 		Minimap,
+		CloseX,
+		VerticalEllipsis,
 	},
 	props: {
 		tabMinWidths: { type: Boolean, default: false },
--- a/client/web/src/components/panels/LayersPanel.vue
+++ b/client/web/src/components/panels/LayersPanel.vue
@ -9,8 +9,6 @@

 <script lang="ts">
 import { defineComponent } from "vue";
-// import LayoutRow from "../layout/LayoutRow.vue";
-// import LayoutCol from "../layout/LayoutCol.vue";

 export default defineComponent({
 	components: {
--- a/client/web/src/components/panels/MinimapPanel.vue
+++ b/client/web/src/components/panels/MinimapPanel.vue
@ -9,8 +9,6 @@

 <script lang="ts">
 import { defineComponent } from "vue";
-// import LayoutRow from "../layout/LayoutRow.vue";
-// import LayoutCol from "../layout/LayoutCol.vue";

 export default defineComponent({
 	components: {
--- a/client/web/src/components/panels/PropertiesPanel.vue
+++ b/client/web/src/components/panels/PropertiesPanel.vue
@ -9,8 +9,6 @@

 <script lang="ts">
 import { defineComponent } from "vue";
-// import LayoutRow from "../layout/LayoutRow.vue";
-// import LayoutCol from "../layout/LayoutCol.vue";

 export default defineComponent({
 	components: {
--- a/client/web/src/shims-vue.d.ts
+++ b/client/web/src/shims-vue.d.ts
@ -1,6 +0,0 @@
-/* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
--- a/client/web/src/types.d.ts
+++ b/client/web/src/types.d.ts
@ -0,0 +1,11 @@
+declare module "*.vue" {
+	import type { DefineComponent } from "vue"
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
+
+declare module "*.svg" {
+	import type { DefineComponent } from "vue";
+	const component: DefineComponent;
+	export default component;
+}
--- a/client/web/tsconfig.json
+++ b/client/web/tsconfig.json
@ -12,12 +12,10 @@
 		"allowSyntheticDefaultImports": true,
 		"sourceMap": true,
 		"baseUrl": ".",
-		"types": [
-			"webpack-env"
-		],
+		"types": [],
 		"paths": {
 			"@/*": [
-				"src/*"
+				"vue/*"
 			]
 		},
 		"lib": [
@ -28,9 +26,10 @@
 		]
 	},
 	"include": [
-		"src/**/*.ts",
-		"src/**/*.tsx",
-		"src/**/*.vue",
+		"vue/**/*.ts",
+		"vue/**/*.d.ts",
+		"vue/**/*.tsx",
+		"vue/**/*.vue",
 		"tests/**/*.ts",
 		"tests/**/*.tsx"
 	],
--- a/client/web/vue.config.js
+++ b/client/web/vue.config.js
@ -1,30 +1,27 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
-const webpack = require("webpack");
 const path = require("path");

 module.exports = {
-  chainWebpack: config => {
-    // rust wasm bindgen https://github.com/rustwasm/wasm-bindgen
-    config
-      .plugin("wasm-pack")
-      .use(WasmPackPlugin)
-      .init(
-        Plugin =>
-          new Plugin({
-            crateDirectory: path.resolve(__dirname, "wasm")
-          })
-      )
-      .end()
-      //  needed for Edge browser https://rustwasm.github.io/docs/wasm-bindgen/examples/hello-world.html
-      .plugin("text-encoder")
-      .use(webpack.ProvidePlugin)
-      .init(
-        Plugin =>
-          new Plugin({
-            TextDecoder: ["text-encoding", "TextDecoder"],
-            TextEncoder: ["text-encoding", "TextEncoder"]
-          })
-      )
-      .end();
-  }
+	chainWebpack: (config) => {
+		// Rust wasm bindgen https://github.com/rustwasm/wasm-bindgen
+		config
+			.plugin("wasm-pack")
+			.use(WasmPackPlugin)
+			.init(
+				(Plugin) => new Plugin({
+					crateDirectory: path.resolve(__dirname, "wasm"),
+				}),
+			)
+			.end();
+
+		const svgRule = config.module.rule("svg");
+		svgRule.uses.clear();
+		svgRule
+			.use("vue-loader")
+			.loader("vue-loader")
+			.end()
+			.use("vue-svg-loader")
+			.loader("vue-svg-loader");
+	},
 };
--- a/client/web/wasm/Cargo.toml
+++ b/client/web/wasm/Cargo.toml
@ -13,7 +13,7 @@ default = ["console_error_panic_hook"]

 [dependencies]
 wasm-bindgen = "0.2.72"
-graphite-editor = { path = "../../packages/graphite-editor" }
+graphite-editor-core = { path = "../../../core/editor" }

 # The `console_error_panic_hook` crate provides better debugging of panics by
 # logging them with `console.error`. This is great for development, but requires
--- a/client/web/wasm/src/lib.rs
+++ b/client/web/wasm/src/lib.rs
@ -16,3 +16,8 @@ pub fn handle_event(event_name: String) {
 	// TODO: add payload
 	todo!()
 }
+
+#[wasm_bindgen]
+pub fn greet(name: &str) -> String {
+	format!("Hello, {}!", name)
+}
--- a/client/web/wasm/src/window.rs
+++ b/client/web/wasm/src/window.rs
@ -20,7 +20,7 @@ pub fn get_active_document() -> DocumentId {
 	todo!()
 }

-use graphite_editor::workspace::PanelId;
+use graphite_editor_core::workspace::PanelId;
 /// Notify the editor that the mouse hovers above a panel
 #[wasm_bindgen]
 pub fn panel_hover_enter(panel_id: PanelId) {
--- a/client/web/wasm/src/wrappers.rs
+++ b/client/web/wasm/src/wrappers.rs
@ -1,4 +1,4 @@
-use graphite_editor::Color as InnerColor;
+use graphite_editor_core::Color as InnerColor;
 use wasm_bindgen::prelude::*;

 #[wasm_bindgen]
--- a/client/web/webpack.config.js
+++ b/client/web/webpack.config.js
@ -1,23 +0,0 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
-
-module.exports = {
-	entry: "./main.js",
-	output: {
-		path: path.resolve(__dirname, "dist"),
-		filename: "main.js",
-	},
-	plugins: [
-		new HtmlWebpackPlugin({ title: "Graphite" }),
-		new WasmPackPlugin({
-			crateDirectory: path.resolve(__dirname, "wasm"),
-			outDir: path.resolve(__dirname, "pkg"),
-		}),
-	],
-	mode: "development",
-	devtool: "source-map",
-	// experiments: {
-	// 	syncWebAssembly: true,
-	// },
-};
--- a/docs/codebase/index.md
+++ b/docs/codebase/index.md
@ -18,7 +18,7 @@ The main modules of the project architecture are outlined below. Some parts desc

 - **Web frontend**: `/client/web/`  
  Initial GUI for Graphite that will eventually be replaced by a native GUI implementation
-	- **Vue web app**: `src/`  
+	- **Vue web app**: `vue/`  
 	  Imports the WASM code and uses Vue props to customize and reuse most GUI components
 	- **Rust WebAssembly wrapper**: `wasm/`  
 	  Wraps the Editor Core Library and provides an API for the web app to use unburdened by Rust's complex data types that are not supported by WASM
--- a/rustfmt.otml
+++ b/rustfmt.otml
@ -1,19 +0,0 @@
-edition = "2018"
-hard_tabs = true
-max_width = 180
-newline_style = "Unix"
-use_try_shorthand = true
-
-# Enable when 2.0 is released:
-# match_block_trailing_comma = true
-
-# Enable when control_brace_style becomes stable:
-# control_brace_style = "ClosingNextLine"
-
-# Maybe enable these in the future when they're stabilized
-# normalize_comments = true
-# normalize_doc_attributes = true
-# struct_lit_width = 35
-# where_single_line = true
-
-# For now run: cargo fmt -- --config match_block_trailing_comma=true --config control_brace_style=ClosingNextLine