fragment-tools 0.2.9 → 0.2.11

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "A web development environment for creative coding",
-  "main": "index.js",
+  "main": "./src/index.js",
   "bin": {
     "fragment": "bin/index.js"
   },
@@ -26,22 +26,21 @@
   "dependencies": {
     "@clack/core": "^0.4.2",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "body-parser": "^2.2.0",
     "changedpi": "^1.0.4",
     "convert-length": "^1.0.1",
     "get-port": "^7.1.0",
     "gifenc": "^1.0.3",
-    "glslify": "^7.1.1",
     "is-unicode-supported": "^2.0.0",
     "kleur": "^4.1.4",
+    "mediabunny": "^1.13.3",
+    "milliparsec": "^5.1.0",
     "sade": "^1.7.4",
     "svelte": "^5.19.0",
     "vite": "^6.3.5",
-    "webm-writer": "^1.0.0",
     "ws": "^8.2.3"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.6",
+    "@changesets/cli": "^2.29.7",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/p5": "^1.7.6",
     "@types/three": "^0.174.0",

package/src/cli/createConfig.js

@@ -1,5 +1,6 @@
 import path from 'node:path';
 import fs from 'node:fs';
+import url from 'node:url';
 import { defineConfig, loadConfigFromFile, mergeConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
@@ -8,30 +9,47 @@ import { __dirname, file } from './utils.js';
 import { log } from './log.js';
 import sketches from './plugins/sketches.js';
 
+/**
+ *
+ * @param {{ cwd: string, filepath: string | undefined }} params
+ * @returns {Promise<import('../types/config.js').Config>}
+ */
 export async function loadConfig({ cwd, filepath }) {
 	try {
-		let filename = `fragment.config.js`;
-		let configFile = filepath ? filepath : filename;
 		let configRoot = cwd;
-		let resolvedPath = path.resolve(cwd, configFile);
+		let filenames = [`fragment.config.js`, `fragment.config.ts`];
 
-		if (!fs.existsSync(resolvedPath)) {
-			if (filepath) {
-				log.error(`Config file not found: ${resolvedPath}`);
-			}
-			return {};
+		if (filepath) {
+			filenames = [filepath, ...filenames];
 		}
 
-		log.info(`Extending configuration from ${resolvedPath}`);
+		let filepaths = filenames.map((filename) => {
+			return path.resolve(configRoot, filename);
+		});
 
-		const { config } = await loadConfigFromFile(
-			{
-				command: 'build',
-				mode: 'dev',
-			},
-			configFile,
-			configRoot,
+		let resolvedIndex = filepaths.findIndex((filepath) =>
+			fs.existsSync(filepath),
 		);
+		/** @type {string|undefined} */
+		let resolvedPath = filepaths[resolvedIndex];
+
+		if (filepath && resolvedIndex !== 0) {
+			log.error(`Config file not found: ${filepath}`);
+		}
+
+		if (!resolvedPath) {
+			return {};
+		}
+
+		let configFile = path.relative(cwd, resolvedPath);
+
+		log.info(`Extending configuration from ${configFile}`);
+
+		const config = (
+			await import(
+				`${url.pathToFileURL(configFile).href}?ts=${Date.now()}`
+			)
+		).default;
 
 		return config;
 	} catch (error) {
@@ -43,9 +61,10 @@ export async function loadConfig({ cwd, filepath }) {
 /**
  * Create Vite config from entries
  * @param {string[]} entries
- * @param {options} options
+ * @param {object} [options]
  * @param {boolean} [options.dev=false]
  * @param {boolean} [options.build=false]
+ * @param {string} [configFilepath]
  * @param {string} [cwd=process.cwd()]
  * @returns {import('vite').UserConfig}
  */
@@ -63,8 +82,8 @@ export async function createConfig(
 	log.info(`Creating Vite configuration...`);
 
 	const config = await loadConfig({
-		filepath: configFilepath,
 		cwd,
+		filepath: configFilepath,
 	});
 
 	return mergeConfig(
@@ -110,7 +129,7 @@ export async function createConfig(
 				__DEV__: !build,
 			},
 			optimizeDeps: {
-				include: ['convert-length', 'webm-writer', 'changedpi'],
+				include: ['convert-length', 'changedpi'],
 			},
 		}),
 		config.vite ?? {},

package/src/cli/plugins/hot-shader-replacement.js

@@ -1,7 +1,6 @@
 import path from 'node:path';
 import fs from 'node:fs';
 import { readFile } from 'node:fs/promises';
-import glslify from 'glslify';
 import { log, dim, green, yellow } from '../log.js';
 
 /**
@@ -232,10 +231,6 @@ ${keyword}${shaderParts[1]}
 			shaderPath,
 		);
 
-		code = glslify(code, {
-			basedir: process.cwd(),
-		});
-
 		if (server) {
 			code = addShaderFilepath(code, shaderPath);
 		}

package/src/cli/plugins/save.js

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import { writeFile } from 'node:fs/promises';
-import bodyParser from 'body-parser';
+import { json } from 'milliparsec';
 import { log, green, red } from '../log.js';
 import { mkdirp } from '../utils.js';
 
@@ -50,7 +50,12 @@ export default function screenshot({
 	return {
 		name: 'save',
 		configureServer(server) {
-			server.middlewares.use(bodyParser.json({ limit: '100mb' }));
+			const payloadLimit = 100 * 1024 * 1024; // 100mb
+			server.middlewares.use(
+				json({
+					payloadLimit,
+				}),
+			);
 			server.middlewares.use('/save', async (req, res, next) => {
 				if (req.method === 'POST') {
 					const { files } = req.body;

package/src/cli/run.js

@@ -26,17 +26,23 @@ import hotShaderReplacement from './plugins/hot-shader-replacement.js';
  */
 export async function run(entry, options = {}) {
 	let fragmentServer;
+	/** @type {import('node:fs').FSWatcher} */
+	let watcher;
 
 	const cwd = process.cwd();
 	const command = `run`;
 	const prefix = log.prefix(command);
+
+	const stop = () => {
+		fragmentServer?.close();
+		watcher?.close();
+	};
+
 	const exit = () => {
 		process.off('SIGTERM', exit);
 		process.off('exit', exit);
 
-		if (fragmentServer) {
-			fragmentServer.close();
-		}
+		stop();
 
 		console.log();
 	};
@@ -62,9 +68,10 @@ export async function run(entry, options = {}) {
 			);
 		}
 
+		const hasTSFiles = entries.some((entry) => entry.endsWith('ts'));
 		const tsConfigDirpath = path.join(cwd, FRAGMENT_DIRECTORY);
 		const tsConfigFilepath = path.join(tsConfigDirpath, 'tsconfig.json');
-		if (!fs.existsSync(tsConfigFilepath)) {
+		if (!fs.existsSync(tsConfigFilepath) && hasTSFiles) {
 			await createTsConfigFile(cwd);
 		}
 
@@ -106,6 +113,22 @@ export async function run(entry, options = {}) {
 				],
 			}),
 		);
+
+		watcher = fs.watch(cwd, (eventType, filename) => {
+			if (
+				['fragment.config.js', 'fragment.config.ts'].includes(
+					filename,
+				) ||
+				options.configFilepath?.includes(filename)
+			) {
+				log.warn(`${filename} has changed. Restarting...`);
+				console.log();
+				server.close();
+				stop();
+				run(entry, options);
+			}
+		});
+
 		await server.listen();
 
 		// line break after logs
@@ -130,8 +153,6 @@ export async function run(entry, options = {}) {
 
 		// line break before fragment logs
 		log.message();
-
-		return server;
 	} catch (error) {
 		// line break before error
 		log.message();

package/src/client/app/lib/canvas-recorder/CanvasRecorder.js

@@ -7,6 +7,7 @@ class CanvasRecorder {
 			duration = Infinity,
 			framerate = 25,
 			quality = 100,
+			format,
 			onStart = noop,
 			onTick = noop,
 			onComplete = noop,
@@ -16,6 +17,7 @@ class CanvasRecorder {
 		this.framerate = framerate;
 		this.duration = duration;
 		this.quality = quality;
+		this.format = format;
 		this.onStart = onStart;
 		this.onTick = onTick;
 		this.onComplete = onComplete;
@@ -24,7 +26,7 @@ class CanvasRecorder {
 		this.deltaTime = 1000 / this.framerate;
 
 		this.frameDuration = 1000 / this.framerate;
-		this.frameTotal = isFinite(duration)
+		this.frameTotal = isFinite(this.duration)
 			? this.duration * this.framerate
 			: Infinity;
 		this.started = false;

package/src/client/app/lib/canvas-recorder/GIFRecorder.js

@@ -9,7 +9,17 @@ class GIFRecorder extends CanvasRecorder {
 		this.tmpCanvas = document.createElement('canvas');
 		this.tmpContext = this.tmpCanvas.getContext('2d');
 
-		this.maxColors = Math.floor(map(this.quality, 1, 100, 1, 256));
+		this.maxColors = Math.floor(map(this.quality, 20, 100, 32, 256));
+
+		if (this.framerate > 50) {
+			console.warn(`GIFRecorder :: recording was capped at 50fps.`);
+			this.framerate = 50;
+			this.deltaTime = 1000 / this.framerate;
+			this.frameDuration = 1000 / this.framerate;
+			this.frameTotal = isFinite(this.duration)
+				? this.duration * this.framerate
+				: Infinity;
+		}
 
 		super.start();
 	}

package/src/client/app/lib/canvas-recorder/MediaBunnyRecorder.js

@@ -0,0 +1,97 @@
+import CanvasRecorder from './CanvasRecorder.js';
+import {
+	Output,
+	Mp4OutputFormat,
+	MkvOutputFormat,
+	MovOutputFormat,
+	WebMInputFormat,
+	BufferTarget,
+	CanvasSource,
+	Quality,
+	QUALITY_VERY_LOW,
+	QUALITY_LOW,
+	QUALITY_MEDIUM,
+	QUALITY_HIGH,
+	QUALITY_VERY_HIGH,
+	WebMOutputFormat,
+} from 'mediabunny';
+import { map } from '@fragment/utils/math.utils.js';
+import { VIDEO_FORMATS } from '@fragment/state/exports.svelte.js';
+
+class MediaBunnyRecorder extends CanvasRecorder {
+	/** @type Quality[] */
+	static BITRATES = [
+		QUALITY_VERY_LOW,
+		QUALITY_LOW,
+		QUALITY_MEDIUM,
+		QUALITY_HIGH,
+		QUALITY_VERY_HIGH,
+	];
+
+	/**
+	 *
+	 * @param {HTMLCanvasElement} canvas
+	 * @param {object} options
+	 * @param {codec} options.string
+	 */
+	constructor(canvas, { codec, ...options }) {
+		super(canvas, options);
+
+		/** @type {string} */
+		this.codec = codec;
+
+		const outputFormats = new Map();
+		outputFormats.set(VIDEO_FORMATS.MKV, MkvOutputFormat);
+		outputFormats.set(VIDEO_FORMATS.MP4, Mp4OutputFormat);
+		outputFormats.set(VIDEO_FORMATS.MOV, MovOutputFormat);
+		outputFormats.set(VIDEO_FORMATS.WEBM, WebMOutputFormat);
+
+		const outputFormat = outputFormats.get(this.format);
+
+		/** @type {Output} */
+		this.output = new Output({
+			format: new outputFormat(),
+			target: new BufferTarget(),
+		});
+
+		const { BITRATES } = MediaBunnyRecorder;
+
+		const bitrate =
+			BITRATES[
+				Math.floor(map(this.quality, 1, 100, 0, BITRATES.length - 1))
+			];
+
+		/** @type {CanvasSource} */
+		this.videoSource = new CanvasSource(this.canvas, {
+			codec,
+			bitrate,
+		});
+
+		this.output.addVideoTrack(this.videoSource, {
+			frameRate: this.framerate,
+		});
+	}
+
+	async load() {
+		await this.output.start();
+	}
+
+	async tick({ frameCount, time }) {
+		const timestamp = frameCount / this.framerate;
+
+		this.videoSource.add(timestamp, this.frameDuration / 1000);
+	}
+
+	async end() {
+		await this.output.finalize();
+
+		const { mimeType } = this.output.format;
+		const { buffer } = this.output.target;
+
+		this.result = new Blob([buffer], { type: mimeType });
+
+		super.end();
+	}
+}
+
+export default MediaBunnyRecorder;

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

@@ -7,6 +7,7 @@
 		IMAGE_ENCODINGS,
 		VIDEO_FORMATS,
 		exports,
+		getCodecsForFormat,
 	} from '../state/exports.svelte';
 
 	let { id = layout.getID(), headless = false } = $props();
@@ -81,16 +82,39 @@
 			params={{ options: Object.values(VIDEO_FORMATS) }}
 			onchange={(value) => {
 				exports.videoFormat = value;
+
+				if (
+					!getCodecsForFormat(exports.videoFormat).includes(
+						exports.videoCodec,
+					)
+				) {
+					exports.videoCodec = getCodecsForFormat(
+						exports.videoFormat,
+					)?.[0];
+				}
 			}}
 		/>
+		{#if [VIDEO_FORMATS.MKV, VIDEO_FORMATS.MP4, VIDEO_FORMATS.WEBM, VIDEO_FORMATS.MOV].includes(exports.videoFormat)}
+			<Field
+				key="codec"
+				value={exports.videoCodec}
+				params={{ options: getCodecsForFormat(exports.videoFormat) }}
+				onchange={(value) => {
+					exports.videoCodec = value;
+				}}
+			/>
+		{/if}
 		<Field
 			key="quality"
 			value={exports.videoQuality}
 			params={{
-				min: 1,
-				max: 100,
-				step: 1,
-				suffix: '%',
+				options: [
+					{ value: 100, label: 'very high' },
+					{ value: 80, label: 'high' },
+					{ value: 60, label: 'medium' },
+					{ value: 40, label: 'low' },
+					{ value: 20, label: 'very low' },
+				],
 				triggerable: false,
 			}}
 			onchange={(value) => {

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

@@ -6,13 +6,47 @@ export const IMAGE_ENCODINGS = ['png', 'jpeg', 'webp'];
 export const VIDEO_FORMATS = {
 	FRAMES: 'frames',
 	MP4: 'mp4',
-	GIF: 'gif',
 	WEBM: 'webm',
+	GIF: 'gif',
+	MKV: 'mkv',
+	MOV: 'mov',
+};
+
+export const VIDEO_CODECS = {
+	AVC: 'avc',
+	HEVC: 'hevc',
+	VP8: 'vp8',
+	VP9: 'vp9',
+	AV1: 'av1',
 };
 
+export const VIDEO_CODECS_FORMATS = new Map();
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.AVC, ['mp4', 'mkv', 'mov']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.HEVC, ['mp4', 'mkv', 'mov']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.VP8, ['webm', 'mkv']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.VP9, ['webm', 'mkv']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.AV1, ['webm', 'mkv']);
+
+/**
+ * List valid codecs based on format
+ * @param {string} format
+ * @return {string[]}
+ */
+export function getCodecsForFormat(format) {
+	const codecs = [];
+
+	for (const [codec, formats] of VIDEO_CODECS_FORMATS) {
+		if (formats.includes(format)) {
+			codecs.push(codec);
+		}
+	}
+
+	return codecs;
+}
+
 class Exports {
 	imageEncoding = $state(IMAGE_ENCODINGS[0]);
-	videoFormat = $state(Object.values(VIDEO_FORMATS)[0]);
+	videoFormat = $state(VIDEO_FORMATS.MP4);
 	pixelsPerInch = $state(72);
 	framerate = $state(60);
 	useDuration = $state(true);
@@ -20,6 +54,7 @@ class Exports {
 	loopCount = $state(1);
 	imageQuality = $state(100);
 	videoQuality = $state(100);
+	videoCodec = $state(VIDEO_CODECS.HEVC);
 	imageCount = $state(1);
 	recording = $state(false);
 	capturing = $state(false);
@@ -41,6 +76,7 @@ class Exports {
 						loopCount: this.loopCount,
 						imageQuality: this.imageQuality,
 						videoQuality: this.videoQuality,
+						videoCodec: this.videoCodec,
 						imageCount: this.imageCount,
 						videoCollapsed: this.videoCollapsed,
 						imageCollapsed: this.imageCollapsed,
@@ -105,6 +141,7 @@ class Exports {
 			format = this.videoFormat,
 			imageEncoding = this.imageEncoding,
 			quality = this.videoQuality,
+			codec = this.videoCodec,
 			duration,
 			filename,
 			pattern,
@@ -133,6 +170,7 @@ class Exports {
 			onTick,
 			framerate,
 			format,
+			codec,
 			imageEncoding,
 			quality,
 			duration: duration * this.loopCount,

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

@@ -556,7 +556,7 @@ export class Render {
 	}
 
 	async screenshot({
-		filename = this.sketch.name ?? this.sketch.key,
+		filename = this.sketch.key,
 		pattern = this.sketch.filenamePattern,
 		exportDir = this.sketch.exportDir,
 	} = {}) {

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

@@ -67,10 +67,14 @@
 			value(event);
 			onclick(event);
 		},
-		download: (event) => {
-			let [data, filename] = value(event);
+		download: async (event) => {
+			try {
+				let [data, filename] = await value(event);
 
-			download(data, filename);
+				download(data, filename);
+			} catch (error) {
+				console.error(`Error while trying to download:`, error);
+			}
 		},
 		number: (event = {}) => {
 			const isValueInRange = event.value >= 0 && event.value <= 1;

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

@@ -100,7 +100,7 @@
 		transition: opacity 0.1s ease;
 	}
 
-	button.field__label {
+	button.field__label:not(:disabled) {
 		cursor: pointer;
 	}
 

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

@@ -9,7 +9,7 @@
 
 	let gui = $derived(buildConfig.gui ?? {});
 	let layout = $derived(buildConfig.layout ?? {});
-	let headless = $derived(layout.headless ?? false);
+	let headless = $derived(layout.headless ?? true);
 	let resizable = $derived(layout.resizable ?? false);
 
 	let guiOutput = $derived(gui.output ?? true);

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

@@ -110,7 +110,11 @@
 
 	let backgroundColor = $derived.by(() => {
 		if (layout.previewing) {
-			return sketch?.buildConfig?.backgroundColor ?? 'inherit';
+			return (
+				sketch?.buildConfig?.backgroundColor ??
+				sketch?.backgroundColor ??
+				'inherit'
+			);
 		}
 
 		return sketch?.backgroundColor ?? 'inherit';

package/src/client/app/ui/fields/CheckboxInput.svelte

@@ -12,7 +12,7 @@
 	};
 </script>
 
-<div class="checkbox">
+<div class="checkbox" class:disabled>
 	<input
 		class="input"
 		bind:checked={value}
@@ -20,7 +20,6 @@
 		onchange={handleChange}
 		disabled={disabled ? 'disabled' : null}
 	/>
-	<div class="checked" />
 </div>
 
 <style>
@@ -36,11 +35,12 @@
 		background-color: var(--fragment-input-background-color);
 	}
 
-	.checkbox:hover {
+	:global(body:not(.fragment-dragging)) .checkbox:not(.disabled):hover {
 		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
-	.checkbox:focus-within {
+	:global(body:not(.fragment-dragging))
+		.checkbox:not(.disabled):focus-within {
 		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
@@ -53,7 +53,9 @@
 		outline: 0;
 	}
 
-	.checked {
+	.checkbox:after {
+		content: '';
+
 		position: absolute;
 		left: 3px;
 		top: 3px;
@@ -67,11 +69,11 @@
 		pointer-events: none;
 	}
 
-	.input:checked + .checked {
+	.checkbox:has(.input:checked):after {
 		opacity: 1;
 	}
 
-	.input:checked:disabled + .checked {
+	.checkbox:has(.input:checked:disabled):after {
 		background-color: var(--fragment-color-disabled);
 	}
 </style>