Switch build system to Vite (#1444)

Switch Parcel to Vite

frontend/.gitignore

@@ -1,6 +1,4 @@
 node_modules/
 wasm/pkg/
 public/build/
-dist/**
-!dist/.git-keep-directory
-.parcel-cache
+dist/

frontend/.parcelrc

@@ -1,21 +0,0 @@
-{
-	"extends": "@parcel/config-default",
-	"transformers": {
-		"*.svelte": [
-			"parcel-transformer-svelte3-plus"
-		],
-		"*.svg": [
-			"...",
-			"@parcel/transformer-inline-string"
-		],
-		"*.png, *.jpg": [
-			"...",
-			"@parcel/transformer-inline-string"
-		]
-	},
-	"optimizers": {
-		"*.png, *.jpg": [
-			"@parcel/optimizer-data-url"
-		]
-	}
-}

frontend/index.html

@@ -4,11 +4,11 @@
 	<meta charset="utf-8">
 	<title>Graphite</title>
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Inconsolata:wght@400;700">
-	<link rel="apple-touch-icon" sizes="180x180" href="public/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="public/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="public/favicon-16x16.png">
-	<link rel="manifest" href="/public/site.webmanifest">
-	<link rel="mask-icon" href="/public/safari-pinned-tab.svg" color="#473a3a">
+	<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">
+	<link rel="mask-icon" href="safari-pinned-tab.svg" color="#473a3a">
 	<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
 	<meta name="apple-mobile-web-app-title" content="Graphite">
 	<meta name="application-name" content="Graphite">

frontend/package.json

@@ -5,18 +5,12 @@
 	"author": "Graphite Authors <contact@graphite.rs>",
 	"browserslist": "> 1.5%, last 2 versions, not dead, not ie 11, not op_mini all, not ios_saf < 13",
 	"type": "module",
-	"alias": {
-		"@graphite-frontend/*": "~/$1",
-		"@graphite/../assets/*": "~/assets/$1",
-		"@graphite/../public/*": "~/public/$1",
-		"@graphite/*": "~/src/$1"
-	},
 	"scripts": {
-		"start": "npm run build-wasm && concurrently -k \"parcel serve --no-cache index.html --port 8080\" \"npm run watch:wasm\" || (npm run print-building-help && exit 1)",
-		"start-profiling": "npm run build-wasm-profiling && concurrently -k \"parcel serve --no-cache index.html --port 8080\" \"npm run watch:wasm-profiling\" || (npm run print-building-help && exit 1)",
-		"build": "npm run build-wasm-prod && npm run build-licenses && parcel build index.html || (npm run print-building-help && exit 1)",
+		"start": "npm run build-wasm && concurrently -k vite \"npm run watch:wasm\" || (npm run print-building-help && exit 1)",
+		"start-profiling": "npm run build-wasm-profiling && concurrently -k vite \"npm run watch:wasm-profiling\" || (npm run print-building-help && exit 1)",
+		"build": "npm run build-wasm-prod && vite build && npm run build-licenses || (npm run print-building-help && exit 1)",
 		"build-licenses": "webpack build",
-		"tauri:dev": "echo 'Make sure you build the wasm binary for tauri using `npm run tauri:build-wasm`' && parcel serve --no-cache index.html --port 8080",
+		"tauri:dev": "echo 'Make sure you build the wasm binary for tauri using `npm run tauri:build-wasm`' && vite",
 		"build-wasm": "wasm-pack build ./wasm --dev --target=web",
 		"build-wasm-profiling": "wasm-pack build ./wasm --profiling --target=web",
 		"build-wasm-prod": "wasm-pack build ./wasm --release --target=web",
@@ -34,19 +28,13 @@
 		"reflect-metadata": "^0.1.13"
 	},
 	"devDependencies": {
-		"@parcel/config-default": "^2.9.3",
-		"@parcel/packager-raw-url": "^2.9.3",
-		"@parcel/optimizer-data-url": "^2.9.3",
-		"@parcel/transformer-inline-string": "^2.9.3",
-		"@parcel/transformer-webmanifest": "^2.9.3",
+		"@sveltejs/vite-plugin-svelte": "^2.4.2",
 		"@types/license-checker-webpack-plugin": "^0.2.1",
 		"@types/node": "^18.16.2",
 		"@types/webpack": "^5.28.1",
 		"buffer": "^5.7.1",
 		"concurrently": "^8.0.1",
 		"license-checker-webpack-plugin": "^0.2.1",
-		"parcel": "^2.9.3",
-		"parcel-transformer-svelte3-plus": "^0.2.9",
 		"postcss": "^8.4.23",
 		"process": "^0.11.10",
 		"sass": "^1.62.1",
@@ -54,6 +42,7 @@
 		"svelte-preprocess": "^5.0.3",
 		"ts-node": "^10.9.1",
 		"typescript": "^5.0.4",
+		"vite": "^4.4.5",
 		"webpack": "^5.81.0",
 		"webpack-cli": "^5.0.2"
 	},

frontend/src/components/widgets/labels/ImageLabel.svelte

@@ -22,7 +22,7 @@
 		width: auto;
 		height: auto;
 
-		+ .image-label {
+		+ .image-label.image-label {
 			margin-left: 8px;
 		}
 	}

frontend/src/io-managers/clipboard.ts

@@ -1,6 +1,6 @@
 import { type Editor } from "@graphite/wasm-communication/editor";
 import { TriggerTextCopy } from "@graphite/wasm-communication/messages";
-import { imageToPNG } from "~src/utility-functions/rasterization";
+import { imageToPNG } from "@graphite/utility-functions/rasterization";
 
 export function createClipboardManager(editor: Editor): void {
 	// Subscribe to process backend event

frontend/src/state-providers/portfolio.ts

@@ -20,7 +20,7 @@ import {
 	UpdateImageData,
 	UpdateOpenDocumentsList,
 } from "@graphite/wasm-communication/messages";
-import { copyToClipboardFileURL } from "~src/io-managers/clipboard";
+import { copyToClipboardFileURL } from "@graphite/io-managers/clipboard";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createPortfolioState(editor: Editor) {
@@ -52,7 +52,7 @@ export function createPortfolioState(editor: Editor) {
 
 			const filename = url.pathname.split("/").pop() || "Untitled";
 			const content = await data.text();
-			
+
 			editor.instance.openDocumentFile(filename, content);
 		} catch {
 			editor.instance.errorDialog("Failed to open document", "The file could not be reached over the internet. You may be offline, or it may be missing.");

frontend/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

frontend/tsconfig.json

@@ -14,7 +14,6 @@
 		"types": ["node", "svelte", "svelte/store", "svelte/motion", "svelte/transition", "svelte/animate", "svelte/easing"],
 		"baseUrl": ".",
 		"paths": {
-			"~*": ["./*"],
 			"/*": ["./*"],
 			"@graphite-frontend/*": ["./*"],
 			"@graphite/*": ["src/*"]

frontend/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { resolve } from "path";
+import { sveltePreprocess } from "svelte-preprocess/dist/autoProcess";
+
+const projectRootDir = resolve(__dirname);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		svelte({
+			preprocess: [sveltePreprocess()],
+			onwarn(warning, defaultHandler) {
+				const suppressed = ["vite-plugin-svelte-css-no-scopable-elements"];
+				if (suppressed.includes(warning.code)) return;
+
+				defaultHandler(warning);
+			}
+		}),
+	],
+	resolve: {
+		alias: [
+			{ find: /@graphite-frontend\/(.*\.svg)/, replacement: resolve(projectRootDir, "$1?raw") },
+			{ find: "@graphite-frontend", replacement: projectRootDir },
+			{ find: "@graphite/../assets", replacement: resolve(projectRootDir, "assets") },
+			{ find: "@graphite/../public", replacement: resolve(projectRootDir, "public") },
+			{ find: "@graphite", replacement: resolve(projectRootDir, "src") },
+		]
+	},
+	server: {
+		port: 8080,
+	},
+});

frontend/webpack.config.ts

@@ -1,3 +1,5 @@
+// TODO: Investigate replacing this with https://github.com/vitejs/vite/discussions/7722#discussioncomment-4007436
+
 import * as path from "path";
 import fs from "fs";
 import { spawnSync } from "child_process";
@@ -33,7 +35,7 @@ const config: webpack.Configuration = {
 		new LicenseCheckerWebpackPlugin({
 			allow: "(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR 0BSD)",
 			emitError: true,
-			outputFilename: "third-party-licenses.txt",
+			outputFilename: "../dist/third-party-licenses.txt",
 			outputWriter: formatThirdPartyLicenses,
 			// Workaround for failure caused in WebPack 5: https://github.com/microsoft/license-checker-webpack-plugin/issues/25#issuecomment-833325799
 			filter: /(^.*[/\\]node_modules[/\\]((?:@[^/\\]+[/\\])?(?:[^@/\\][^/\\]*)))/,