Serve the demo artwork in each build (#1494)

* Serve local demo artwork

* Disable restricted import lint

* Revert

* Switch approach to vite-multiple-assets plugin

---------

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

editor/src/messages/dialog/simple_dialogs/demo_artwork_dialog.rs

@@ -4,17 +4,10 @@ use crate::messages::prelude::*;
 /// A dialog to let the user browse a gallery of demo artwork that can be opened.
 pub struct DemoArtworkDialog;
 
+/// `(name, thumbnail, filename)`
 const ARTWORK: [(&str, &str, &str); 2] = [
-	(
+	("Valley of Spires", "ThumbnailValleyOfSpires", "valley-of-spires-v2.graphite"),
-		"Valley of Spires",
+	("Just a Potted Cactus", "ThumbnailJustAPottedCactus", "just-a-potted-cactus-v2.graphite"),
-		"ThumbnailValleyOfSpires",
-		"https://raw.githubusercontent.com/GraphiteEditor/Graphite/master/demo-artwork/valley-of-spires-v2.graphite",
-	),
-	(
-		"Just a Potted Cactus",
-		"ThumbnailJustAPottedCactus",
-		"https://raw.githubusercontent.com/GraphiteEditor/Graphite/master/demo-artwork/just-a-potted-cactus-v2.graphite",
-	),
 ];
 
 impl DialogLayoutHolder for DemoArtworkDialog {
@@ -37,12 +30,16 @@ impl LayoutHolder for DemoArtworkDialog {
 
 		let buttons = ARTWORK
 			.into_iter()
-			.map(|(label, _, url)| {
+			.map(|(name, _, filename)| {
-				TextButton::new(label)
+				TextButton::new(name)
 					.min_width(256)
 					.on_update(|_| {
 						DialogMessage::CloseDialogAndThen {
-							followups: vec![FrontendMessage::TriggerFetchAndOpenDocument { url: url.to_string() }.into()],
+							followups: vec![FrontendMessage::TriggerFetchAndOpenDocument {
+								name: name.to_string(),
+								filename: filename.to_string(),
+							}
+							.into()],
 						}
 						.into()
 					})

editor/src/messages/frontend/frontend_message.rs

@@ -67,7 +67,8 @@ pub enum FrontendMessage {
 		name: String,
 	},
 	TriggerFetchAndOpenDocument {
-		url: String,
+		name: String,
+		filename: String,
 	},
 	TriggerFontLoad {
 		font: Font,

frontend/package-lock.json

@@ -34,7 +34,8 @@
 				"svelte-preprocess": "^5.0.3",
 				"ts-node": "^10.9.1",
 				"typescript": "^5.0.4",
-				"vite": "^4.4.5"
+				"vite": "^4.4.5",
+				"vite-multiple-assets": "^1.2.6"
 			},
 			"optionalDependencies": {
 				"wasm-pack": "0.12.1"
@@ -3898,6 +3899,29 @@
 				"node": ">=8.6"
 			}
 		},
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"dev": true,
+			"peer": true,
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dev": true,
+			"peer": true,
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/mimic-fn": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -5754,6 +5778,16 @@
 				}
 			}
 		},
+		"node_modules/vite-multiple-assets": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/vite-multiple-assets/-/vite-multiple-assets-1.2.6.tgz",
+			"integrity": "sha512-/ZQdpCqNWdqj/jO5wQHtvWaV1nYKbUH+e/1lDNy+OXiQot2YbWGoGDDFxAu8PI/k3nRpAXpPpmpv48CvhNlVWg==",
+			"dev": true,
+			"peerDependencies": {
+				"mime-types": "^2.1.35",
+				"vite": ">=2.9.6"
+			}
+		},
 		"node_modules/vitefu": {
 			"version": "0.2.5",
 			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
@@ -8448,6 +8482,23 @@
 				"picomatch": "^2.3.1"
 			}
 		},
+		"mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"dev": true,
+			"peer": true
+		},
+		"mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dev": true,
+			"peer": true,
+			"requires": {
+				"mime-db": "1.52.0"
+			}
+		},
 		"mimic-fn": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -9657,6 +9708,13 @@
 				"rollup": "^3.27.1"
 			}
 		},
+		"vite-multiple-assets": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/vite-multiple-assets/-/vite-multiple-assets-1.2.6.tgz",
+			"integrity": "sha512-/ZQdpCqNWdqj/jO5wQHtvWaV1nYKbUH+e/1lDNy+OXiQot2YbWGoGDDFxAu8PI/k3nRpAXpPpmpv48CvhNlVWg==",
+			"dev": true,
+			"requires": {}
+		},
 		"vitefu": {
 			"version": "0.2.5",
 			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",

frontend/package.json

@@ -52,7 +52,8 @@
 		"svelte-preprocess": "^5.0.3",
 		"ts-node": "^10.9.1",
 		"typescript": "^5.0.4",
-		"vite": "^4.4.5"
+		"vite": "^4.4.5",
+		"vite-multiple-assets": "^1.2.6"
 	},
 	"optionalDependencies": {
 		"wasm-pack": "0.12.1"

frontend/src/state-providers/portfolio.ts

@@ -47,15 +47,17 @@ export function createPortfolioState(editor: Editor) {
 	});
 	editor.subscriptions.subscribeJsMessage(TriggerFetchAndOpenDocument, async (triggerFetchAndOpenDocument) => {
 		try {
-			const url = new URL(triggerFetchAndOpenDocument.url);
+			const { name, filename } = triggerFetchAndOpenDocument;
+			const url = new URL(filename, document.location.href);
 			const data = await fetch(url);
-
-			const filename = url.pathname.split("/").pop() || "Untitled";
 			const content = await data.text();
 
-			editor.instance.openDocumentFile(filename, content);
+			editor.instance.openDocumentFile(name, 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.");
+			// Needs to be delayed until the end of the current call stack so the existing demo artwork dialog can be closed first, otherwise this dialog won't show
+			setTimeout(() => {
+				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.");
+			}, 0);
 		}
 	});
 	editor.subscriptions.subscribeJsMessage(TriggerOpenDocument, async () => {

frontend/src/wasm-communication/messages.ts

@@ -522,7 +522,9 @@ export class TriggerLoadAutoSaveDocuments extends JsMessage {}
 export class TriggerLoadPreferences extends JsMessage {}
 
 export class TriggerFetchAndOpenDocument extends JsMessage {
-	readonly url!: string;
+	readonly name!: string;
+
+	readonly filename!: string;
 }
 
 export class TriggerOpenDocument extends JsMessage {}

frontend/vite.config.ts

@@ -8,6 +8,7 @@ import { svelte } from "@sveltejs/vite-plugin-svelte";
 import rollupPluginLicense, { type Dependency } from "rollup-plugin-license";
 import { sveltePreprocess } from "svelte-preprocess/dist/autoProcess";
 import { defineConfig } from "vite";
+import { default as viteMultipleAssets } from "vite-multiple-assets";
 
 const projectRootDir = path.resolve(__dirname);
 
@@ -40,6 +41,7 @@ export default defineConfig({
 				defaultHandler?.(warning);
 			},
 		}),
+		viteMultipleAssets(["../demo-artwork"]),
 	],
 	resolve: {
 		alias: [