Remove JS module import prefixes and use absolute paths to the frontend directory (#3924)

* Remove JS module import prefixes

* Fix code review mistakes

frontend/src/utility-functions/clipboard.ts

@@ -1,6 +1,6 @@
-import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
-import { extractPixelData } from "@graphite/utility-functions/rasterization";
-import { stripIndents } from "@graphite/utility-functions/strip-indents";
+import { extractPixelData } from "/src/utility-functions/rasterization";
+import { stripIndents } from "/src/utility-functions/strip-indents";
+import type { EditorHandle } from "/wasm/pkg/graphite_wasm";
 
 export function readAtCaret(cut: boolean): string | undefined {
 	const element = window.document.activeElement;

frontend/src/utility-functions/colors.ts

@@ -1,5 +1,5 @@
-import { sampleInterpolatedGradient } from "@graphite/../wasm/pkg/graphite_wasm";
-import type { Color, FillChoice, GradientStops } from "@graphite/../wasm/pkg/graphite_wasm";
+import { sampleInterpolatedGradient } from "/wasm/pkg/graphite_wasm";
+import type { Color, FillChoice, GradientStops } from "/wasm/pkg/graphite_wasm";
 
 // Channels can have any range (0-1, 0-255, 0-100, 0-360) in the context they are being used in, these are just containers for the numbers
 export type HSV = { h: number; s: number; v: number };

frontend/src/utility-functions/crash-report.ts

@@ -1,5 +1,5 @@
-import { browserVersion, operatingSystem } from "@graphite/utility-functions/platform";
-import { stripIndents } from "@graphite/utility-functions/strip-indents";
+import { browserVersion, operatingSystem } from "/src/utility-functions/platform";
+import { stripIndents } from "/src/utility-functions/strip-indents";
 
 export function crashReportUrl(panicDetails: string): string {
 	const url = new URL("https://github.com/GraphiteEditor/Graphite/issues/new");

frontend/src/utility-functions/files.ts

@@ -1,5 +1,5 @@
-import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
-import { extractPixelData } from "@graphite/utility-functions/rasterization";
+import { extractPixelData } from "/src/utility-functions/rasterization";
+import type { EditorHandle } from "/wasm/pkg/graphite_wasm";
 
 export function downloadFileURL(filename: string, url: string) {
 	const element = document.createElement("a");

frontend/src/utility-functions/images.ts

@@ -1,11 +1,11 @@
 // Demo artwork
-import ThumbnailChangingSeasons from "@graphite/../assets/thumbnail-changing-seasons.png";
-import ThumbnailIsometricFountain from "@graphite/../assets/thumbnail-isometric-fountain.png";
-import ThumbnailPaintedDreams from "@graphite/../assets/thumbnail-painted-dreams.png";
-import ThumbnailParametricDunescape from "@graphite/../assets/thumbnail-parametric-dunescape.png";
-import ThumbnailProceduralStringLights from "@graphite/../assets/thumbnail-procedural-string-lights.png";
-import ThumbnailRedDress from "@graphite/../assets/thumbnail-red-dress.png";
-import ThumbnailValleyOfSpires from "@graphite/../assets/thumbnail-valley-of-spires.png";
+import ThumbnailChangingSeasons from "/assets/thumbnail-changing-seasons.png";
+import ThumbnailIsometricFountain from "/assets/thumbnail-isometric-fountain.png";
+import ThumbnailPaintedDreams from "/assets/thumbnail-painted-dreams.png";
+import ThumbnailParametricDunescape from "/assets/thumbnail-parametric-dunescape.png";
+import ThumbnailProceduralStringLights from "/assets/thumbnail-procedural-string-lights.png";
+import ThumbnailRedDress from "/assets/thumbnail-red-dress.png";
+import ThumbnailValleyOfSpires from "/assets/thumbnail-valley-of-spires.png";
 
 const DEMO_ARTWORK = {
 	ThumbnailChangingSeasons,

frontend/src/utility-functions/input.ts

@@ -1,14 +1,13 @@
 import { get } from "svelte/store";
-
-import { isPlatformNative } from "@graphite/../wasm/pkg/graphite_wasm";
-import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
-import type { DialogStore } from "@graphite/stores/dialog";
-import type { DocumentStore } from "@graphite/stores/document";
-import { toggleFullscreen } from "@graphite/stores/fullscreen";
-import type { PortfolioStore } from "@graphite/stores/portfolio";
-import { pasteFile } from "@graphite/utility-functions/files";
-import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@graphite/utility-functions/keyboard-entry";
-import { operatingSystem } from "@graphite/utility-functions/platform";
+import type { DialogStore } from "/src/stores/dialog";
+import type { DocumentStore } from "/src/stores/document";
+import { toggleFullscreen } from "/src/stores/fullscreen";
+import type { PortfolioStore } from "/src/stores/portfolio";
+import { pasteFile } from "/src/utility-functions/files";
+import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "/src/utility-functions/keyboard-entry";
+import { operatingSystem } from "/src/utility-functions/platform";
+import type { EditorHandle } from "/wasm/pkg/graphite_wasm";
+import { isPlatformNative } from "/wasm/pkg/graphite_wasm";
 
 const BUTTON_LEFT = 0;
 const BUTTON_MIDDLE = 1;

frontend/src/utility-functions/network.ts

@@ -1,4 +1,4 @@
-import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
+import type { EditorHandle } from "/wasm/pkg/graphite_wasm";
 
 export type RequestResult = { body: string; status: number };
 

frontend/src/utility-functions/persistence.ts

@@ -1,9 +1,8 @@
 import * as idb from "idb-keyval";
 import { get } from "svelte/store";
-
-import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
-import type { PortfolioStore } from "@graphite/stores/portfolio";
+import type { PortfolioStore } from "/src/stores/portfolio";
 import type { MessageBody } from "/src/subscriptions-router";
+import type { EditorHandle } from "/wasm/pkg/graphite_wasm";
 
 export async function storeCurrentDocumentId(documentId: string) {
 	const indexedDbStorage = idb.createStore("graphite", "store");

frontend/src/utility-functions/viewports.ts

@@ -1,4 +1,4 @@
-import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
+import type { EditorHandle } from "/wasm/pkg/graphite_wasm";
 
 export function setupViewportResizeObserver(editor: EditorHandle): () => void {
 	const viewports = Array.from(window.document.querySelectorAll("[data-viewport-container]"));

frontend/src/utility-functions/widgets.ts

@@ -1,4 +1,4 @@
-import type { Layout, LayoutGroup, WidgetDiff, WidgetInstance } from "@graphite/../wasm/pkg/graphite_wasm";
+import type { Layout, LayoutGroup, WidgetDiff, WidgetInstance } from "/wasm/pkg/graphite_wasm";
 
 type UIItem = Layout | LayoutGroup | WidgetInstance[] | WidgetInstance;
 // Updates a widget layout based on a list of updates, giving the new layout by mutating the `layout` argument