fragment-tools 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {

package/src/client/app/components/Init.svelte

@@ -19,11 +19,15 @@
 		sketchesManager.loadAll(sketches);
 	});
 
-	let prefix = $derived(
-		sketchesManager.keys.length === 1
-			? `${getFilename(sketchesManager.keys[0])} | `
-			: '',
-	);
+	let prefix = $derived.by(() => {
+		const { keys } = sketchesManager;
+
+		if (keys.length === 1) {
+			return `${sketchesManager.sketches[keys[0]].name ?? getFilename(sketchesManager.keys[0])} | `;
+		}
+
+		return '';
+	});
 	let title = $derived(`${prefix}fragment`);
 </script>
 

package/src/client/app/modules/Monitor.svelte

@@ -33,10 +33,7 @@
 	let error = $derived(
 		errors.has(key)
 			? errors.get(key)
-			: monitors.length === 1 ||
-				  !monitors.some(
-						(m) => m.selected === errors.keys().next().value,
-				  )
+			: monitors.length === 1
 				? errors.values().next().value
 				: null,
 	);

package/src/client/app/state/rendering.svelte.js

@@ -304,6 +304,7 @@ class Rendering {
 export let rendering = new Rendering();
 
 export class Render {
+	loading = $state(false);
 	loaded = $state(false);
 	errored = $state(false);
 	paused = $state(false);
@@ -340,10 +341,11 @@ export class Render {
 		$effect(() => {
 			const { width, height, pixelRatio } = rendering;
 
-			if (!this.loaded) {
+			if (!this.loaded && !this.loading) {
 				this.width = width;
 				this.height = height;
 				this.pixelRatio = pixelRatio;
+
 				this.init();
 			}
 		});
@@ -477,6 +479,8 @@ export class Render {
 		this.init = async () => {
 			if (this.errored) return;
 
+			this.loading = true;
+
 			clearError(this.sketch.key);
 			this.mountParams = this.renderer?.onMountPreview?.(this.params);
 			if (this.mountParams && this.mountParams.canvas !== this.canvas) {
@@ -500,6 +504,7 @@ export class Render {
 					this.update(this.time);
 				});
 
+				this.loading = false;
 				this.loaded = true;
 			} catch (error) {
 				console.error(error);
@@ -703,11 +708,17 @@ export class Render {
 		this.removeShaderUpdateListener();
 
 		const { id, sketch } = this;
-		clearError(sketch.key);
 
 		this.renderer?.onDestroyPreview?.({ id });
 		this.destroyCanvas(this.canvas);
-		sketch?.instance?.dispose?.();
+
+		try {
+			sketch?.instance?.dispose?.();
+		} catch (error) {
+			console.error(error);
+			displayError(error, sketch.key);
+			this.errored = true;
+		}
 
 		cancelAnimationFrame(this.raf);
 		this.raf = null;

package/src/client/app/ui/ErrorOverlay.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { clearErrors } from '../state/errors.svelte';
 
-	export let error;
+	let { error } = $props();
 
 	export function getLineAndColNumber(stack) {
 		const match = stack.match(/(:([0-9]+)\:([0-9]+))/);
@@ -16,30 +16,34 @@
 		return { lineNumber, colNumber };
 	}
 
-	$: stackLines = error.stack
-		? error.stack
-				.split('\n')
-				.filter((line, i, s) => (s.length === 1 ? true : i !== 0))
-				.filter((line) => !line.includes('/app/'))
-				.map((line) => {
-					// remove path to file in URL
-					line = line.replace(
-						`${window.location.origin}/@fs${__CWD__}/`,
-						'',
-					);
-					// remove vite injected params in URL
-					line = line.replace(/\?.+?\:/g, ':');
-
-					return line;
-				})
-		: null;
-
-	$: extract = error.source
-		? error.source.split('\n').map((text, index) => ({
-				text,
-				highlighted: text.includes(`> ${error.lineNumber}:`),
-			}))
-		: [];
+	let stackLines = $derived(
+		error.stack
+			? error.stack
+					.split('\n')
+					.filter((line, i, s) => (s.length === 1 ? true : i !== 0))
+					.filter((line) => !line.includes('/app/'))
+					.map((line) => {
+						// remove path to file in URL
+						line = line.replace(
+							`${window.location.origin}/@fs${__CWD__}/`,
+							'',
+						);
+						// remove vite injected params in URL
+						line = line.replace(/\?.+?\:/g, ':');
+
+						return line;
+					})
+			: null,
+	);
+
+	let extract = $derived(
+		error.source
+			? error.source.split('\n').map((text, index) => ({
+					text,
+					highlighted: text.includes(`> ${error.lineNumber}:`),
+				}))
+			: [],
+	);
 </script>
 
 <div class="error-overlay" on:click={() => clearErrors()}>