From 12adbb2476f98429b06cb8956ba3e61509f8edfc Mon Sep 17 00:00:00 2001
From: Timon Schelling <me@timon.zip>
Date: Tue, 30 Sep 2025 16:49:04 +0000
Subject: [PATCH] extract icons to separate js file on desktop

---
 frontend/package.json                         |  10 +-
 frontend/src/components/views/Graph.svelte    |   2 +-
 .../widgets/buttons/IconButton.svelte         |   2 +-
 .../widgets/buttons/PopoverButton.svelte      |   3 +-
 .../widgets/buttons/TextButton.svelte         |   3 +-
 .../widgets/inputs/CheckboxInput.svelte       |   2 +-
 .../widgets/labels/IconLabel.svelte           |   2 +-
 .../widgets/labels/UserInputLabel.svelte      |   3 +-
 frontend/src/{utility-functions => }/icons.ts |   0
 frontend/src/messages.ts                      |   3 +-
 frontend/src/state-providers/dialog.ts        |   2 +-
 frontend/vite.config.ts                       | 149 ++++++++++++++----
 package.json                                  |   6 +-
 13 files changed, 137 insertions(+), 50 deletions(-)
 rename frontend/src/{utility-functions => }/icons.ts (100%)

diff --git a/frontend/package.json b/frontend/package.json
index 6c65a88fea..c69addbc2c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,16 +13,18 @@
 		"---------- BUILDS ----------": "",
 		"build": "npm run wasm:build-production && vite build",
 		"build-dev": "npm run wasm:build-dev && vite build",
-		"build-native": "npm run native:build-production && vite build",
-		"build-native-dev": "npm run native:build-dev && vite build",
 		"build-profiling": "npm run wasm:build-profiling && vite build",
+		"build-desktop": "npm run desktop:build-production && vite build --mode desktop && vite build --mode icons",
+		"build-desktop-placeholder-icons": "npm run desktop:build-production && vite build --mode desktop && vite build --mode icons-placeholder",
+		"build-desktop-icons": "vite build --mode icons",
+		"build-desktop-dev": "npm run desktop:build-dev && vite build",
 		"---------- UTILITIES ----------": "",
 		"lint": "eslint . && tsc --noEmit",
 		"lint-fix": "eslint . --fix && tsc --noEmit",
 		"---------- INTERNAL ----------": "",
 		"setup": "node package-installer.js",
-		"native:build-dev": "wasm-pack build ./wasm --dev --target=web --features native",
-		"native:build-production": "wasm-pack build ./wasm --release --target=web --features native",
+		"desktop:build-dev": "wasm-pack build ./wasm --dev --target=web --features native",
+		"desktop:build-production": "wasm-pack build ./wasm --release --target=web --features native",
 		"wasm:build-dev": "wasm-pack build ./wasm --dev --target=web",
 		"wasm:build-profiling": "wasm-pack build ./wasm --profiling --target=web",
 		"wasm:build-production": "wasm-pack build ./wasm --release --target=web",
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index 7ac2d4f162..ca36b0c2ce 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -4,9 +4,9 @@
 	import { fade } from "svelte/transition";
 
 	import type { Editor } from "@graphite/editor";
+	import type { IconName } from "@graphite/icons";
 	import type { FrontendGraphInput, FrontendGraphOutput } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
-	import type { IconName } from "@graphite/utility-functions/icons";
 
 	import NodeCatalog from "@graphite/components/floating-menus/NodeCatalog.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
diff --git a/frontend/src/components/widgets/buttons/IconButton.svelte b/frontend/src/components/widgets/buttons/IconButton.svelte
index 97fbc2c8c9..81ab288a2e 100644
--- a/frontend/src/components/widgets/buttons/IconButton.svelte
+++ b/frontend/src/components/widgets/buttons/IconButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type IconName, type IconSize } from "@graphite/utility-functions/icons";
+	import { type IconName, type IconSize } from "@graphite/icons";
 
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte
index b0bb0a551e..d6379f49b2 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.svelte
+++ b/frontend/src/components/widgets/buttons/PopoverButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { type IconName, type PopoverButtonStyle } from "@graphite/icons";
+
 	import type { MenuDirection } from "@graphite/messages";
-	import { type IconName, type PopoverButtonStyle } from "@graphite/utility-functions/icons";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index 8cfc3ec4d5..bb1416f5c0 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+	import type { IconName } from "@graphite/icons";
+
 	import type { MenuListEntry } from "@graphite/messages";
-	import type { IconName } from "@graphite/utility-functions/icons";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.svelte b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
index f8e53eeadb..8c10f34adf 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.svelte
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { IconName } from "@graphite/utility-functions/icons";
+	import type { IconName } from "@graphite/icons";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
diff --git a/frontend/src/components/widgets/labels/IconLabel.svelte b/frontend/src/components/widgets/labels/IconLabel.svelte
index 3edb01a788..5dbb688684 100644
--- a/frontend/src/components/widgets/labels/IconLabel.svelte
+++ b/frontend/src/components/widgets/labels/IconLabel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type IconName, ICONS, ICON_SVG_STRINGS } from "@graphite/utility-functions/icons";
+	import { type IconName, ICONS, ICON_SVG_STRINGS } from "@graphite/icons";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.svelte b/frontend/src/components/widgets/labels/UserInputLabel.svelte
index 83e3d0c339..39bd43cdb2 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.svelte
+++ b/frontend/src/components/widgets/labels/UserInputLabel.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 
+	import type { IconName } from "@graphite/icons";
+
 	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/messages";
 	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
-	import type { IconName } from "@graphite/utility-functions/icons";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
diff --git a/frontend/src/utility-functions/icons.ts b/frontend/src/icons.ts
similarity index 100%
rename from frontend/src/utility-functions/icons.ts
rename to frontend/src/icons.ts
diff --git a/frontend/src/messages.ts b/frontend/src/messages.ts
index aff6380c2e..c9dda22679 100644
--- a/frontend/src/messages.ts
+++ b/frontend/src/messages.ts
@@ -2,7 +2,8 @@
 
 import { Transform, Type, plainToClass } from "class-transformer";
 
-import { type PopoverButtonStyle, type IconName, type IconSize } from "@graphite/utility-functions/icons";
+import { type PopoverButtonStyle, type IconName, type IconSize } from "@graphite/icons";
+
 import { type EditorHandle } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
 
 export class JsMessage {
diff --git a/frontend/src/state-providers/dialog.ts b/frontend/src/state-providers/dialog.ts
index a2f12337d0..140f498620 100644
--- a/frontend/src/state-providers/dialog.ts
+++ b/frontend/src/state-providers/dialog.ts
@@ -1,6 +1,7 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
+import { type IconName } from "@graphite/icons";
 import {
 	defaultWidgetLayout,
 	DisplayDialog,
@@ -11,7 +12,6 @@ import {
 	patchWidgetLayout,
 	TriggerDisplayThirdPartyLicensesDialog,
 } from "@graphite/messages";
-import { type IconName } from "@graphite/utility-functions/icons";
 
 export function createDialogState(editor: Editor) {
 	const { subscribe, update } = writable({
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 04fa5dad3e..b0807b20d8 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -7,37 +7,82 @@ import path from "path";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import rollupPluginLicense, { type Dependency } from "rollup-plugin-license";
 import { sveltePreprocess } from "svelte-preprocess";
-import { defineConfig } from "vite";
+import { defineConfig, type AliasOptions, type BuildOptions, type Plugin, type ResolveOptions, type UserConfig } from "vite";
 import { DynamicPublicDirectory as viteMultipleAssets } from "vite-multiple-assets";
 
 const projectRootDir = path.resolve(__dirname);
 
 // https://vitejs.dev/config/
-export default defineConfig({
-	plugins: [
-		svelte({
-			preprocess: [sveltePreprocess()],
-			onwarn(warning, defaultHandler) {
-				const suppressed = [
-					"css-unused-selector", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
-					"vite-plugin-svelte-css-no-scopable-elements", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
-					"a11y-no-static-element-interactions", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
-					"a11y-no-noninteractive-element-interactions", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
-					"a11y-click-events-have-key-events", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
-				];
-				if (suppressed.includes(warning.code)) return;
-
-				defaultHandler?.(warning);
+export default defineConfig(({ mode }) => {
+	switch (mode) {
+		case "desktop":
+			return desktop();
+		case "icons":
+			return icons(false);
+		case "icons-placeholder":
+			return icons(true);
+		default:
+			return web();
+	}
+});
+
+function web(): UserConfig {
+	return {
+		plugins: [sveltePlugins(), assetsPlugin()],
+		resolve: resolve(),
+		server: {
+			port: 8080,
+			host: "0.0.0.0",
+		},
+		build: build(),
+	};
+}
+
+function desktop(): UserConfig {
+	return {
+		plugins: [sveltePlugins(), assetsPlugin()],
+		resolve: resolve(),
+		build: build(true),
+	};
+}
+
+function icons(usePlaceholderIcons: boolean): UserConfig {
+	return {
+		plugins: [placeholderIconsPlugin(usePlaceholderIcons)],
+		resolve: resolve(),
+		build: {
+			lib: {
+				entry: path.resolve(projectRootDir, "src/icons.ts"),
+				formats: ["es" as const],
+				fileName: "assets/icons",
 			},
-		}),
-		viteMultipleAssets(
-			// Additional static asset directories besides `public/`
-			[{ input: "../demo-artwork/**", output: "demo-artwork" }],
-			// Options where we set custom MIME types
-			{ mimeTypes: { ".graphite": "application/json" } },
-		),
-	],
-	resolve: {
+			emptyOutDir: false,
+		},
+		publicDir: false,
+	};
+}
+
+function placeholderIconsPlugin(enabled: boolean): Plugin {
+	return {
+		name: "graphite-placeholder-icons",
+		enforce: "pre",
+		load(id) {
+			if (!enabled) return null;
+			if (id.endsWith(".svg") || id.endsWith(".svg?raw")) {
+				const raw = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><circle cx="6" cy="6" r="3" /></svg>`;
+				return `export default ${JSON.stringify(raw)};`;
+			}
+			return null;
+		},
+	};
+}
+
+function resolve():
+	| (ResolveOptions & {
+			alias?: AliasOptions;
+	  })
+	| undefined {
+	return {
 		alias: [
 			{ find: /@graphite-frontend\/(.*\.svg)/, replacement: path.resolve(projectRootDir, "$1?raw") },
 			{ find: "@graphite-frontend", replacement: projectRootDir },
@@ -45,13 +90,22 @@ export default defineConfig({
 			{ find: "@graphite/../public", replacement: path.resolve(projectRootDir, "public") },
 			{ find: "@graphite", replacement: path.resolve(projectRootDir, "src") },
 		],
-	},
-	server: {
-		port: 8080,
-		host: "0.0.0.0",
-	},
-	build: {
+	};
+}
+
+function build(desktop: boolean = false): BuildOptions {
+	const entryNames = !desktop ? `assets/[name]-[hash].js` : `assets/[name].js`;
+	const chunkNames = !desktop ? `assets/[name]-[hash].js` : `assets/[name].js`;
+	const assetNames = !desktop ? `assets/[name]-[hash].[ext]` : `assets/[name].[ext]`;
+	return {
 		rollupOptions: {
+			external: desktop ? ["@graphite/icons"] : [],
+			output: {
+				entryFileNames: entryNames,
+				chunkFileNames: chunkNames,
+				assetFileNames: assetNames,
+				paths: desktop ? { ["@graphite/icons"]: "/assets/icons.js" } : {},
+			},
 			plugins: [
 				rollupPluginLicense({
 					thirdParty: {
@@ -67,11 +121,38 @@ export default defineConfig({
 							template: formatThirdPartyLicenses,
 						},
 					},
-				}),
+				}) as Plugin,
 			],
 		},
-	},
-});
+	};
+}
+
+function sveltePlugins(): Plugin[] {
+	return svelte({
+		preprocess: [sveltePreprocess()],
+		onwarn(warning, defaultHandler) {
+			const suppressed = [
+				"css-unused-selector", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
+				"vite-plugin-svelte-css-no-scopable-elements", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
+				"a11y-no-static-element-interactions", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
+				"a11y-no-noninteractive-element-interactions", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
+				"a11y-click-events-have-key-events", // NOTICE: Keep this list in sync with the list in `.vscode/settings.json`
+			];
+			if (suppressed.includes(warning.code)) return;
+
+			defaultHandler?.(warning);
+		},
+	});
+}
+
+function assetsPlugin(): Plugin {
+	return viteMultipleAssets(
+		// Additional static asset directories besides `public/`
+		[{ input: "../demo-artwork/**", output: "demo-artwork" }],
+		// Options where we set custom MIME types
+		{ mimeTypes: { ".graphite": "application/json" } },
+	) as Plugin;
+}
 
 type LicenseInfo = {
 	licenseName: string;
diff --git a/package.json b/package.json
index 8d605249a3..9a47fa0ebb 100644
--- a/package.json
+++ b/package.json
@@ -4,15 +4,15 @@
 	"scripts": {
 		"---------- DEV SERVER ----------": "",
 		"start": "cd frontend && npm start",
-		"start-desktop": "cd frontend && npm run build-native-dev && cargo run -p graphite-desktop",
+		"start-desktop": "cd frontend && npm run build-desktop-dev && cargo run -p graphite-desktop",
 		"profiling": "cd frontend && npm run profiling",
 		"production": "cd frontend && npm run production",
 		"---------- BUILDS ----------": "",
 		"build-dev": "cd frontend && npm run build-dev",
 		"build-profiling": "cd frontend && npm run build-profiling",
 		"build": "cd frontend && npm run build",
-		"build-desktop": "cd frontend && npm run build-native && cargo build -r -p graphite-desktop",
-		"build-desktop-dev": "cd frontend && npm run build-native-dev && cargo build -p graphite-desktop",
+		"build-desktop": "cd frontend && npm run build-desktop && cargo build -r -p graphite-desktop",
+		"build-desktop-dev": "cd frontend && npm run build-desktop-dev && cargo build -p graphite-desktop",
 		"---------- UTILITIES ----------": "",
 		"lint": "cd frontend && npm run lint",
 		"lint-fix": "cd frontend && npm run lint-fix"