fragment-tools 0.1.20 → 0.2.1

package/bin/index.js

@@ -44,7 +44,7 @@ prog.command('run [entry]', '', { default: true })
 				emptyOutDir: options.emptyOutDir,
 				base: options.base,
 				prompts: options.prompts,
-				config: options.config,
+				configFilepath: options.config,
 			});
 		}
 
@@ -52,7 +52,7 @@ prog.command('run [entry]', '', { default: true })
 			development: options.development,
 			exportDir: options.exportDir,
 			port: options.port,
-			config: options.config,
+			configFilepath: options.config,
 		});
 	});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.1.20",
+  "version": "0.2.1",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/raphaelameaume/fragment#readme",
   "dependencies": {
     "@clack/core": "^0.3.3",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
     "body-parser": "^1.20.0",
     "changedpi": "^1.0.4",
     "chokidar": "^3.5.2",
@@ -33,14 +33,13 @@
     "is-unicode-supported": "^2.0.0",
     "kleur": "^4.1.4",
     "sade": "^1.7.4",
-    "svelte": "^4.0.0",
-    "svelte-json-tree": "^2.2.0",
-    "vite": "^5.3.3",
+    "svelte": "^5.19.0",
+    "vite": "^5.4.12",
     "webm-writer": "^1.0.0",
     "ws": "^8.2.3"
   },
   "devDependencies": {
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.1.2"
+    "prettier-plugin-svelte": "^3.2.6"
   }
 }

package/src/cli/build.js

@@ -102,7 +102,7 @@ export async function build(entry, options) {
 					dev: options.development,
 					build: true,
 				},
-				options.config,
+				options.configFilepath,
 				cwd,
 			);
 

package/src/cli/plugins/check-dependencies.js

@@ -93,26 +93,28 @@ export default function checkDependencies({
 		})
 		.flat();
 
+	const defines = {
+		__THREE_RENDERER__: JSON.stringify(
+			renderings.some((rendering) => rendering === 'three'),
+		),
+		__P5_RENDERER__: JSON.stringify(
+			renderings.some((rendering) => rendering === 'p5'),
+		),
+		__P5_WEBGL_RENDERER__: JSON.stringify(
+			renderings.some((rendering) => rendering === 'p5-webgl'),
+		),
+		__FRAGMENT_RENDERER__: JSON.stringify(
+			renderings.some((rendering) => rendering === 'fragment'),
+		),
+		__2D_RENDERER__: JSON.stringify(
+			renderings.some((rendering) => rendering === '2d'),
+		),
+	};
+
 	return {
 		name: 'check-dependencies',
 		config: () => ({
-			define: {
-				__THREE_RENDERER__: build
-					? renderings.some((rendering) => rendering === 'three')
-					: true,
-				__P5_RENDERER__: build
-					? renderings.some((rendering) => rendering === 'p5')
-					: true,
-				__P5_WEBGL_RENDERER__: build
-					? renderings.some((rendering) => rendering === 'p5-webgl')
-					: true,
-				__FRAGMENT_RENDERER__: build
-					? renderings.some((rendering) => rendering === 'fragment')
-					: true,
-				__2D_RENDERER__: build
-					? renderings.some((rendering) => rendering === '2d')
-					: true,
-			},
+			define: defines,
 		}),
 		load(id) {
 			if (build && skipFiles.includes(id)) {

package/src/cli/run.js

@@ -69,7 +69,7 @@ export async function run(entry, options = {}) {
 				dev: options.development,
 				build: false,
 			},
-			options.config,
+			options.configFilepath,
 			cwd,
 		);
 

package/src/cli/templates/three-fragment/index.js

@@ -10,7 +10,7 @@ let uniforms = {
 /**
  * @param {object} params
  * @param {HTMLCanvasElement} params.canvas
- * @param {THREE.Renderer} params.renderer
+ * @param {THREE.WebGLRenderer} params.renderer
  * @param {THREE.Scene} params.scene
  * @param {number} params.width
  * @param {number} params.height
@@ -54,7 +54,7 @@ export let init = ({ scene, width, height }) => {
 /**
  * @param {object} params
  * @param {HTMLCanvasElement} params.canvas
- * @param {THREE.Renderer} params.renderer
+ * @param {THREE.WebGLRenderer} params.renderer
  * @param {THREE.Scene} params.scene
  * @param {number} params.width
  * @param {number} params.height
@@ -74,15 +74,15 @@ export let update = ({ renderer, scene, time, deltaTime }) => {
 /**
  * @param {object} params
  * @param {HTMLCanvasElement} params.canvas
- * @param {THREE.Renderer} params.renderer
+ * @param {THREE.WebGLRenderer} params.renderer
  * @param {THREE.Scene} params.scene
  * @param {number} params.width
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let resize = ({ width, height }) => {
-	uniforms.uResolution.value.x = width;
-	uniforms.uResolution.value.y = height;
+export let resize = ({ width, height, pixelRatio }) => {
+	uniforms.uResolution.value.x = width * pixelRatio;
+	uniforms.uResolution.value.y = height * pixelRatio;
 
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;

package/src/cli/templates/three-orthographic/index.js

@@ -5,7 +5,7 @@ let camera;
 /**
  * @param {object} params
  * @param {HTMLCanvasElement} params.canvas
- * @param {THREE.Renderer} params.renderer
+ * @param {THREE.WebGLRenderer} params.renderer
  * @param {THREE.Scene} params.scene
  * @param {number} params.width
  * @param {number} params.height
@@ -19,7 +19,7 @@ export let init = ({ scene, width, height }) => {
 /**
  * @param {object} params
  * @param {HTMLCanvasElement} params.canvas
- * @param {THREE.Renderer} params.renderer
+ * @param {THREE.WebGLRenderer} params.renderer
  * @param {THREE.Scene} params.scene
  * @param {number} params.width
  * @param {number} params.height
@@ -37,7 +37,7 @@ export let update = ({ renderer, scene, time, deltaTime }) => {
 /**
  * @param {object} params
  * @param {HTMLCanvasElement} params.canvas
- * @param {THREE.Renderer} params.renderer
+ * @param {THREE.WebGLRenderer} params.renderer
  * @param {THREE.Scene} params.scene
  * @param {number} params.width
  * @param {number} params.height

package/src/cli/templates/three-perspective/index.js

@@ -5,7 +5,7 @@ let camera;
 /**
  * @param {object} params
  * @param {HTMLCanvasElement} params.canvas
- * @param {THREE.Renderer} params.renderer
+ * @param {THREE.WebGLRenderer} params.renderer
  * @param {THREE.Scene} params.scene
  * @param {number} params.width
  * @param {number} params.height
@@ -20,7 +20,7 @@ export let init = ({ scene, width, height }) => {
 /**
  * @param {object} params
  * @param {HTMLCanvasElement} params.canvas
- * @param {THREE.Renderer} params.renderer
+ * @param {THREE.WebGLRenderer} params.renderer
  * @param {THREE.Scene} params.scene
  * @param {number} params.width
  * @param {number} params.height
@@ -38,7 +38,7 @@ export let update = ({ renderer, scene, time, deltaTime }) => {
 /**
  * @param {object} params
  * @param {HTMLCanvasElement} params.canvas
- * @param {THREE.Renderer} params.renderer
+ * @param {THREE.WebGLRenderer} params.renderer
  * @param {THREE.Scene} params.scene
  * @param {number} params.width
  * @param {number} params.height

package/src/client/app/actions/resize.js

@@ -0,0 +1,14 @@
+export function resize(node, callback) {
+	if (typeof callback !== 'function') return;
+
+	let observer = new ResizeObserver(callback);
+
+	observer.observe(node);
+
+	return {
+		destroy: () => {
+			observer.disconnect();
+			observer = null;
+		},
+	};
+}

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

@@ -0,0 +1,94 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let showLabel = $state(false);
+
+	onMount(() => {
+		let timeout = setTimeout(() => {
+			showLabel = true;
+		}, 250);
+
+		return () => {
+			clearTimeout(timeout);
+			timeout = null;
+		};
+	});
+</script>
+
+<div class="hint-loading">
+	{#if showLabel}
+		<div class="label">
+			<span>loading</span>
+			<svg width="10" height="6">
+				<circle cx="2" cy="5" r="1" fill="var(--color)" />
+				<circle cx="5" cy="5" r="1" fill="var(--color)" />
+				<circle cx="8" cy="5" r="1" fill="var(--color)" />
+			</svg>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hint-loading {
+		--color: #ffffff;
+
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+
+		width: 100%;
+
+		background: rgba(0, 0, 0, 0.5);
+	}
+	.label {
+		position: absolute;
+		top: 4px;
+		right: 4px;
+		z-index: 2;
+
+		display: flex;
+		place-items: center;
+
+		height: 16px;
+		padding: 0 2px;
+
+		color: var(--color);
+		font-size: 10px;
+
+		border: 1px solid var(--color);
+		border-radius: 2px;
+		text-transform: uppercase;
+
+		/* animation: fade 1s ease-in-out infinite; */
+	}
+
+	/* .label:before {
+		--size: 6px;
+		content: '';
+
+		width: var(--size);
+		height: var(--size);
+		margin: 0 3px 0 1px;
+
+		background-color: var(--color);
+		border-radius: 50%;
+
+		animation: fade 1s ease-in-out infinite;
+	} */
+
+	@keyframes fade {
+		0% {
+			opacity: 0;
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,88 @@
+<div class="paused-hint">
+	<div class="label">
+		<svg width="10" height="6">
+			<rect
+				x="2"
+				y="0"
+				width="2"
+				height="8"
+				fill="var(--color)"
+				rx="1"
+				ry="1"
+			/>
+			<rect
+				x="5"
+				y="0"
+				width="2"
+				height="8"
+				fill="var(--color)"
+				rx="1"
+				ry="1"
+			/>
+		</svg>
+		<span>paused</span>
+	</div>
+</div>
+
+<style>
+	.paused-hint {
+		--color: #ffffff;
+
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+
+		width: 100%;
+
+		background: rgba(0, 0, 0, 0.5);
+	}
+	.label {
+		position: absolute;
+		top: 4px;
+		right: 4px;
+		z-index: 2;
+
+		display: flex;
+		place-items: center;
+
+		height: 16px;
+		padding: 0 2px;
+
+		color: var(--color);
+		font-size: 10px;
+
+		border: 1px solid var(--color);
+		border-radius: 2px;
+		text-transform: uppercase;
+	}
+
+	/* .label:before {
+		--size: 6px;
+		content: '';
+
+		width: var(--size);
+		height: var(--size);
+		margin: 0 3px 0 1px;
+
+		background-color: var(--color);
+		border-radius: 50%;
+
+		animation: fade 1s ease-in-out infinite;
+	} */
+
+	@keyframes fade {
+		0% {
+			opacity: 0;
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,62 @@
+<div class="record-hint">
+	<span class="label">REC</span>
+</div>
+
+<style>
+	.record-hint {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+
+		background: rgba(0, 0, 0, 0.5);
+		pointer-events: none;
+	}
+	.label {
+		position: absolute;
+		top: 4px;
+		right: 4px;
+		z-index: 2;
+
+		display: flex;
+		place-items: center;
+
+		height: 16px;
+		padding: 0 2px;
+
+		color: var(--color-red);
+		font-size: 10px;
+
+		border: 1px solid var(--color-red);
+		border-radius: 2px;
+	}
+
+	.label:before {
+		--size: 6px;
+		content: '';
+
+		width: var(--size);
+		height: var(--size);
+		margin: 0 3px 0 1px;
+
+		background-color: var(--color-red);
+		border-radius: 50%;
+
+		animation: fade 1s ease-in-out infinite;
+	}
+
+	@keyframes fade {
+		0% {
+			opacity: 0;
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,51 @@
+<script>
+let { locked = false } = $props();
+</script>
+
+{#if locked}
+	<svg
+		class="action__icon"
+		width="16"
+		height="16"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<path
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"
+		/>
+		<path
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M7.75 10.5V10.3427C7.75 8.78147 7.65607 7.04125 8.74646 5.9239C9.36829 5.2867 10.3745 4.75 12 4.75C13.6255 4.75 14.6317 5.2867 15.2535 5.9239C16.3439 7.04125 16.25 8.78147 16.25 10.3427V10.5"
+		/>
+	</svg>
+{:else}
+	<svg
+		class="action__icon"
+		width="16"
+		height="16"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<path
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"
+		/>
+		<path
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M7.75 10.5V9.84343C7.75 8.61493 7.70093 7.29883 8.42416 6.30578C8.99862 5.51699 10.0568 4.75 12 4.75C14 4.75 15.25 6.25 15.25 6.25"
+		/>
+	</svg>
+{/if}

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

@@ -0,0 +1,48 @@
+<svg width="16" height="16" fill="none" viewBox="0 0 24 24">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		d="M4.75 8H7.25"
+	/>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		d="M12.75 8H19.25"
+	/>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		d="M4.75 16H12.25"
+	/>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		d="M17.75 16H19.25"
+	/>
+	<circle
+		cx="10"
+		cy="8"
+		r="2.25"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+	/>
+	<circle
+		cx="15"
+		cy="16"
+		r="2.25"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+	/>
+</svg>

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

@@ -1,43 +1,30 @@
 <script>
 	import { assignSketchFiles } from '../triggers/shared.js';
-	import { loadAll, sketchesKeys, sketches } from '../stores/sketches.js';
+	import { sketchesManager } from '../state/sketches.svelte.js';
 	import { onSketchReload } from '@fragment/sketches';
 	import { getFilename } from '../utils/file.utils.js';
 	import '../utils/glslErrors.js';
-	import { props, reconcile } from '../stores/props.js';
 
-	sketches.subscribe((sketches) => {
-		props.update((currentProps) => {
-			Object.keys(sketches).forEach((key) => {
-				const sketch = sketches[key];
-
-				if (sketch) {
-					// sketch can be undefined if failed to load
-					currentProps[key] = reconcile(
-						sketch.props,
-						currentProps[key],
-					);
-				}
-			});
-
-			return currentProps;
-		});
+	$effect(() => {
+		assignSketchFiles(sketchesManager.keys);
 	});
 
-	sketchesKeys.subscribe((keys) => {
-		if (keys.length > 0) {
-			assignSketchFiles(keys);
-		}
+	$effect(() => {
+		Object.keys(sketchesManager.sketches).forEach((key) => {
+			sketchesManager.sketches[key].save();
+		});
 	});
 
 	onSketchReload(({ sketches }) => {
-		loadAll(sketches);
+		sketchesManager.loadAll(sketches);
 	});
 
-	$: prefix =
-		$sketchesKeys.length === 1 ? `${getFilename($sketchesKeys[0])} | ` : '';
-
-	$: title = `${prefix}fragment`;
+	let prefix = $derived(
+		sketchesManager.keys.length === 1
+			? `${getFilename(sketchesManager.keys[0])} | `
+			: '',
+	);
+	let title = $derived(`${prefix}fragment`);
 </script>
 
 <svelte:head>

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

@@ -1,11 +1,8 @@
 <script>
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { onKeyPress, onKeyDown, onKeyUp } from '../triggers';
 
-	export let key;
-	export let type = 'press';
-
-	const dispatch = createEventDispatcher();
+	let { key, type = 'press', onTrigger = () => {} } = $props();
 
 	const triggers = {
 		press: onKeyPress,
@@ -19,7 +16,7 @@
 
 	onMount(() => {
 		trigger = triggerType(key, (event) => {
-			dispatch('trigger', event);
+			onTrigger(event);
 		});
 	});