Phase 4: removes svelte/legacy compat APIs

frontend/src/components/floating-menus/NodeCatalog.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation, passive } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	import { getContext, onMount } from "svelte";
 
 	import type { FrontendNodeType } from "@graphite/messages";
@@ -10,6 +7,7 @@
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import type { WheelEventHandler } from 'svelte/elements';
 
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
 
@@ -17,9 +15,10 @@
 		disabled?: boolean;
 		initialSearchTerm?: string;
 		onselectNodeType?: (selectNodeType: string) => void;
+		onwheel?: WheelEventHandler<HTMLDivElement>;
 	}
 
-	let { disabled = false, initialSearchTerm = "", onselectNodeType }: Props = $props();
+	let { disabled = false, initialSearchTerm = "", onselectNodeType, onwheel }: Props = $props();
 
 	let nodeSearchInput: TextInput | undefined = $state(undefined);
 	let searchTerm = $state(initialSearchTerm);
@@ -118,7 +117,12 @@
 
 <div class="node-catalog">
 	<TextInput placeholder="Search Nodes..." bind:value={searchTerm} bind:this={nodeSearchInput} />
-	<div class="list-results" use:passive={['wheel', () => stopPropagation(bubble('wheel'))]}>
+	<div class="list-results" onwheel={(event) => {
+			// onwheel events are passive by default
+			// https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-Touch-and-wheel-events-are-passive
+			event.stopPropagation();
+			onwheel?.(event);
+		}}>
 		{#each nodeCategories as nodeCategory}
 			<details open={nodeCategory[1].open}>
 				<summary>

frontend/src/components/layout/LayoutCol.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 
 	type DivHTMLElementProps = SvelteHTMLElements["div"];
 	
@@ -54,26 +51,26 @@
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
 	bind:this={self}
-	onauxclick={bubble('auxclick')}
-	onblur={bubble('blur')}
-	onclick={bubble('click')}
-	ondblclick={bubble('dblclick')}
-	ondragend={bubble('dragend')}
-	ondragleave={bubble('dragleave')}
-	ondragover={bubble('dragover')}
-	ondragstart={bubble('dragstart')}
-	ondrop={bubble('drop')}
-	onmouseup={bubble('mouseup')}
-	onpointerdown={bubble('pointerdown')}
-	onpointerenter={bubble('pointerenter')}
-	onpointerleave={bubble('pointerleave')}
-	onscroll={bubble('scroll')}
 	{...rest}
 >
 	{@render children?.()}
 </div>
 
 <!-- Unused (each impacts performance, see <https://github.com/GraphiteEditor/Graphite/issues/1877>):
+onauxclick={bubble('auxclick')}
+onblur={bubble('blur')}
+onclick={bubble('click')}
+ondblclick={bubble('dblclick')}
+ondragend={bubble('dragend')}
+ondragleave={bubble('dragleave')}
+ondragover={bubble('dragover')}
+ondragstart={bubble('dragstart')}
+ondrop={bubble('drop')}
+onmouseup={bubble('mouseup')}
+onpointerdown={bubble('pointerdown')}
+onpointerenter={bubble('pointerenter')}
+onpointerleave={bubble('pointerleave')}
+onscroll={bubble('scroll')}
 on:contextmenu
 on:copy
 on:cut

frontend/src/components/layout/LayoutRow.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 
 	type DivHTMLElementProps = SvelteHTMLElements["div"];
 
@@ -55,26 +52,26 @@
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
 	bind:this={self}
-	onauxclick={bubble('auxclick')}
-	onblur={bubble('blur')}
-	onclick={bubble('click')}
-	ondblclick={bubble('dblclick')}
-	ondragend={bubble('dragend')}
-	ondragleave={bubble('dragleave')}
-	ondragover={bubble('dragover')}
-	ondragstart={bubble('dragstart')}
-	ondrop={bubble('drop')}
-	onmouseup={bubble('mouseup')}
-	onpointerdown={bubble('pointerdown')}
-	onpointerenter={bubble('pointerenter')}
-	onpointerleave={bubble('pointerleave')}
-	onscroll={bubble('scroll')}
 	{...rest}
 >
 	{@render children?.()}
 </div>
 
 <!-- Unused (each impacts performance, see <https://github.com/GraphiteEditor/Graphite/issues/1877>):
+ onauxclick={bubble('auxclick')}
+onblur={bubble('blur')}
+onclick={bubble('click')}
+ondblclick={bubble('dblclick')}
+ondragend={bubble('dragend')}
+ondragleave={bubble('dragleave')}
+ondragover={bubble('dragover')}
+ondragstart={bubble('dragstart')}
+ondrop={bubble('drop')}
+onmouseup={bubble('mouseup')}
+onpointerdown={bubble('pointerdown')}
+onpointerenter={bubble('pointerenter')}
+onpointerleave={bubble('pointerleave')}
+onscroll={bubble('scroll')}
 on:contextmenu
 on:copy
 on:cut

frontend/src/components/panels/Layers.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { handlers } from 'svelte/legacy';
-
 	import { getContext, onMount, onDestroy, tick } from "svelte";
 
 	import type { Editor } from "@graphite/editor";

frontend/src/components/widgets/WidgetSection.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import WidgetSection from './WidgetSection.svelte';
-	import { stopPropagation } from 'svelte/legacy';
 
 	import { getContext } from "svelte";
 
@@ -37,7 +36,10 @@
 
 <!-- TODO: Implement collapsable sections with properties system -->
 <LayoutCol class={`widget-section ${className}`.trim()} {classes}>
-	<button class="header" class:expanded onclick={stopPropagation(() => (expanded = !expanded))} tabindex="0">
+	<button class="header" class:expanded onclick={(event) => {
+		event.stopPropagation();
+		expanded = !expanded;
+	}} tabindex="0">
 		<div class="expand-arrow"></div>
 		<TextLabel tooltip={widgetData.description} bold={true}>{widgetData.name}</TextLabel>
 		<IconButton

frontend/src/components/widgets/inputs/NumberInput.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler, preventDefault } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	import { onMount } from "svelte";
 
 	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS } from "@graphite/io-managers/input";
@@ -10,6 +7,7 @@
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
+	import type { MouseEventHandler } from 'svelte/elements';
 
 	const BUTTONS_LEFT = 0b0000_0001;
 	const BUTTONS_RIGHT = 0b0000_0010;
@@ -56,6 +54,7 @@
 		incrementCallbackDecrease?: (() => void) | undefined;
 		onvalue?: (value: number | undefined) => void;
 		onstartHistoryTransaction?: () => void;
+		oncontextmenu?: MouseEventHandler<HTMLInputElement>
 	}
 
 	let {
@@ -80,6 +79,7 @@
 		incrementCallbackDecrease = undefined,
 		onvalue,
 		onstartHistoryTransaction,
+		oncontextmenu,
 	}: Props = $props();
 
 	let self: FieldInput | undefined = $state();
@@ -708,13 +708,16 @@
 				class="slider"
 				class:hidden={rangeSliderClickDragState === "Deciding"}
 				{disabled}
-				min={rangeMin}
+				min={rangeMin}	
 				max={rangeMax}
 				step={sliderStepValue}
 				bind:value={rangeSliderValue}
 				oninput={onSliderInput}
 				onpointerup={onSliderPointerUp}
-				oncontextmenu={preventDefault(bubble('contextmenu'))}
+				oncontextmenu={(event) => {
+					event.preventDefault();
+					oncontextmenu?.(event);
+				}}
 				onwheel={(e) => /* Stops slider eating the scroll event in Firefox */ e.target instanceof HTMLInputElement && e.target.blur()}
 				bind:this={inputRangeElement}
 			/>