Migrate build system from Webpack to Parcel (#1102)

* Migrate webpack to parcel

* Always colour shell output

* Fix typos

* Fix updateImage function having undefined editorInstance

* Readd webpack for deployment builds (licence checker)

* Only use webpack for license generation

* Re add typscript support

* Fix cloudlare deploy

* Bump wasm-pack version

* Update ci script

* Print versions in ci script

* Use optional-dependencies for wasm-pack

* Execute wget after rust install

* Finding wasm-opt version

* Print wasm-opt version

* Revert test?

* Try to revert

* Deploy cloudflare via github actions

* Fix indentation in ci script

* Change project to graphite-dev

* Trigger ci

* Parcel ci (#1152)

* CI Test

* Add write permissions for pr

* Manually add cloudflare ci comment to prs

* Unskip cargo about

* Make compile on new versions of npm

* Add deployment script to rebuild editor.graphite.rs on tag creation

* Remove deploy script

* Comment out unused Svelte props causing warnings

* Many small fixes, including fixing @ imports

---------

Co-authored-by: hypercube <0hypercube@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/webpack.config.ts

@@ -1,20 +1,14 @@
 import * as path from "path";
 import fs from "fs";
 import { spawnSync } from "child_process";
-import WasmPackPlugin from "@wasm-tool/wasm-pack-plugin";
-import SvelteCheckPlugin from "svelte-check-plugin";
-import SveltePreprocess from "svelte-preprocess";
 import * as webpack from "webpack";
-import "webpack-dev-server";
 const LicenseCheckerWebpackPlugin = require("license-checker-webpack-plugin");
 
-const mode = process.env.NODE_ENV === "production" ? "production" : "development";
-
 const config: webpack.Configuration = {
-	mode,
 	entry: {
-		bundle: ["./src/main.ts"]
+		bundle: ["./src/main-webpack-licenses.ts"]
 	},
+	mode: "production",
 	resolve: {
 		alias: {
 			// Note: Later in this config file, we'll automatically add paths from `tsconfig.compilerOptions.paths`
@@ -24,105 +18,15 @@ const config: webpack.Configuration = {
 		mainFields: ["svelte", "browser", "module", "main"]
 	},
 	output: {
-		path: path.resolve(__dirname, "public/build"),
-		publicPath: "/build/",
+		path: path.resolve(__dirname, "dist"),
+		publicPath: "/dist/",
 		filename: "[name].js",
 		chunkFilename: "[name].[id].js"
 	},
 	module: {
-		rules: [
-			// Rule: Svelte
-			{
-				test: /\.svelte$/,
-				use: {
-					loader: "svelte-loader",
-					options: {
-						compilerOptions: {
-							// Dev mode must be enabled for HMR to work!
-							dev: mode === "development"
-						},
-						// TODO: Reenable in prod, see: https://github.com/sveltejs/rollup-plugin-svelte#extracting-css
-						// emitCss: mode === "production",
-						emitCss: false,
-						hotReload: mode === "development",
-						hotOptions: {
-							// List of options and defaults: https://www.npmjs.com/package/svelte-loader-hot#usage
-							noPreserveState: false,
-							optimistic: true,
-						},
-						preprocess: SveltePreprocess({
-							scss: true,
-							sass: true,
-						}),
-						onwarn(warning: { code: string; }, handler: (warn: any) => any) {
-							const suppress = [
-								"css-unused-selector",
-								"unused-export-let",
-								"a11y-no-noninteractive-tabindex",
-							];
-							if (suppress.includes(warning.code)) return;
-
-							handler(warning);
-						},
-					}
-				},
-			},
-
-			// Required to prevent errors from Svelte on Webpack 5+
-			// https://github.com/sveltejs/svelte-loader#usage
-			{
-				test: /node_modules\/svelte\/.*\.mjs$/,
-				resolve: {
-					fullySpecified: false
-				}
-			},
-
-			// Rule: SASS
-			{
-				test: /\.(scss|sass)$/,
-				use: [
-					"css-loader",
-					"sass-loader"
-				]
-			},
-
-			// Rule: CSS
-			{
-				test: /\.css$/,
-				use: [
-					"css-loader",
-				]
-			},
-
-			// Rule: TypeScript
-			{
-				test: /\.ts$/,
-				use: "ts-loader",
-				exclude: /node_modules/
-			},
-
-			// Rule: SVG
-			{
-				test: /\.svg$/,
-				type: "asset/source",
-			},
-		]
-	},
-	devServer: {
-		hot: true,
+		rules: []
 	},
 	plugins: [
-		// WASM Pack Plugin integrates compiled Rust code (.wasm) and generated wasm-bindgen code (.js) with the webpack bundle
-		// Use this JS to import the bundled Rust entry points: const wasm = import("@graphite/../wasm/pkg").then(panicProxy);
-		// Then call WASM functions with: (await wasm).functionName()
-		// https://github.com/wasm-tool/wasm-pack-plugin
-		new WasmPackPlugin({
-			crateDirectory: path.resolve(__dirname, "wasm"),
-			// Remove when this issue is resolved: https://github.com/wasm-tool/wasm-pack-plugin/issues/93
-			outDir: path.resolve(__dirname, "wasm/pkg"),
-			watchDirectories: ["../editor", "../document-legacy", "../proc-macros", "../node-graph"].map((folder) => path.resolve(__dirname, folder)),
-		}),
-
 		// License Checker Webpack Plugin validates the license compatibility of all dependencies which are compiled into the webpack bundle
 		// It also writes the third-party license notices to a file which is displayed in the application
 		// https://github.com/microsoft/license-checker-webpack-plugin
@@ -137,7 +41,6 @@ const config: webpack.Configuration = {
 
 		// new SvelteCheckPlugin(),
 	],
-	devtool: mode === "development" ? "source-map" : false,
 	experiments: {
 		asyncWebAssembly: true,
 	},
@@ -189,7 +92,7 @@ interface Dependency extends PackageInfo {
 
 function formatThirdPartyLicenses(jsLicenses: {dependencies: Dependency[]}): string {
 	let rustLicenses: LicenseInfo[] | undefined;
-	if (process.env.NODE_ENV === "production" && process.env.SKIP_CARGO_ABOUT === undefined) {
+	if (process.env.SKIP_CARGO_ABOUT === undefined) {
 		try {
 			rustLicenses = generateRustLicenses();
 		} catch (err) {
@@ -335,10 +238,10 @@ function htmlDecode(input: string): string {
 		quot: `"`,
 	};
 
-	return input.replace(/&([^;]+);/g, (entity, entityCode: string) => {
+	return input.replace(/&([^;]+);/g, (entity: string, entityCode: string) => {
 		let match;
 
-		const maybeEntity = Object.entries(htmlEntities).find((entry) => entry[1] === entityCode);
+		const maybeEntity = Object.entries(htmlEntities).find(([key, _]) => key === entityCode);
 		if (maybeEntity) {
 			return maybeEntity[1];
 		}