fragment-tools 0.2.11 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "A web development environment for creative coding",
   "main": "./src/index.js",
   "bin": {
@@ -24,24 +24,25 @@
   },
   "homepage": "https://github.com/raphaelameaume/fragment#readme",
   "dependencies": {
-    "@clack/core": "^0.4.2",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "changedpi": "^1.0.4",
-    "convert-length": "^1.0.1",
+    "@clack/core": "^1.3.1",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "changedpi": "1.0.4",
+    "convert-length": "1.0.1",
     "get-port": "^7.1.0",
-    "gifenc": "^1.0.3",
+    "gifenc": "1.0.3",
     "is-unicode-supported": "^2.0.0",
-    "kleur": "^4.1.4",
+    "kleur": "^4.1.5",
     "mediabunny": "^1.13.3",
     "milliparsec": "^5.1.0",
-    "sade": "^1.7.4",
-    "svelte": "^5.19.0",
-    "vite": "^6.3.5",
-    "ws": "^8.2.3"
+    "sade": "^1.8.1",
+    "svelte": "^5.55.9",
+    "vite": "^8.0.14",
+    "ws": "^8.20.1"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
+    "@types/node": "^25.9.1",
     "@types/p5": "^1.7.6",
     "@types/three": "^0.174.0",
     "prettier": "^3.2.5",

package/src/cli/build.js

@@ -83,6 +83,7 @@ export async function build(entry, options) {
 				placeholder: `/`,
 				hint: '(Hit Enter to validate)',
 				initialValue: base,
+				defaultValue: '/',
 			});
 
 			handleCancelledPrompt(base, prefix);

package/src/cli/create.js

@@ -18,8 +18,8 @@ import {
  * Create a new sketch
  * @param {string} entry
  * @param {object} options
- * @param {string} options.templateName
- * @param {boolean} options.typescript
+ * @param {string} [options.templateName]
+ * @param {boolean} [options.typescript]
  */
 export async function create(entry, { templateName, typescript } = {}) {
 	const cwd = process.cwd();
@@ -28,7 +28,10 @@ export async function create(entry, { templateName, typescript } = {}) {
 	try {
 		log.message(`${magenta(entry)}\n`, prefix);
 
-		let dir, name;
+		/** @type {string |undefined} */
+		let dir;
+		/** @type {string |undefined} */
+		let name;
 
 		if (entry) {
 			const { dir: entryDir, base: entryBase } = path.parse(entry);
@@ -42,6 +45,7 @@ export async function create(entry, { templateName, typescript } = {}) {
 			placeholder: '.',
 			hint: '(hit Enter to use current directory)',
 			initialValue: dir,
+			defaultValue: '.',
 		});
 
 		handleCancelledPrompt(dir, prefix);
@@ -56,7 +60,9 @@ export async function create(entry, { templateName, typescript } = {}) {
 			hint: '(hit Enter to validate)',
 			initialValue: name,
 			validate: (value) => {
-				if (value.length === 0) return `A name is required.`;
+				if (!value || value.length === 0) return `A name is required.`;
+
+				return undefined;
 			},
 		});
 
@@ -64,6 +70,18 @@ export async function create(entry, { templateName, typescript } = {}) {
 
 		name = name.replace(/\s/g, '-');
 
+		/**
+		 * @typedef TemplateOption
+		 * @property {string} name
+		 * @property {string} description
+		 * @property {string} path
+		 * @property {string} label
+		 * @property {string} hint
+		 * @property {string} value
+		 * @property {boolean} [isDefault=false]
+		 */
+
+		/** @type {TemplateOption[]} */
 		let templatesOptions = fs
 			.readdirSync(file('./templates'))
 			.map((dir) => {

package/src/cli/createConfig.js

@@ -1,7 +1,7 @@
 import path from 'node:path';
 import fs from 'node:fs';
 import url from 'node:url';
-import { defineConfig, loadConfigFromFile, mergeConfig } from 'vite';
+import { defineConfig, mergeConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 import checkDependencies from './plugins/check-dependencies.js';
@@ -66,7 +66,7 @@ export async function loadConfig({ cwd, filepath }) {
  * @param {boolean} [options.build=false]
  * @param {string} [configFilepath]
  * @param {string} [cwd=process.cwd()]
- * @returns {import('vite').UserConfig}
+ * @returns {Promise<import('vite').UserConfig>}
  */
 export async function createConfig(
 	entries,

package/src/cli/getEntries.js

@@ -9,7 +9,8 @@ import { addExtension } from './utils.js';
  * Build entries from entry filepath or folder path
  * @param {string} entry
  * @param {string} cwd - Current working directory
- * @returns {string[]}
+ * @param {string} command - Current working directory
+ * @returns {Promise<string[]>}
  */
 export async function getEntries(
 	entry,
@@ -17,10 +18,18 @@ export async function getEntries(
 	command,
 	prefix = log.prefix(command),
 ) {
+	/**
+	 *
+	 * @param {string} message
+	 */
 	const displayCommand = (message) => {
 		p.note(bold(cyan(message)));
 	};
 
+	/**
+	 *
+	 * @param {string} message
+	 */
 	const onError = (message) => {
 		log.error(`Error\n`, prefix);
 		log.warn(message);

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

@@ -4,11 +4,20 @@ import { readFile } from 'node:fs/promises';
 import { log, dim, green, yellow } from '../log.js';
 
 /**
- * @typedef {Object} ShaderUpdate
+ * @typedef Warning
+ * @property {string} type
+ * @property {string} importer
+ * @property {string} message
+ * @property {string} url
+ * @property {{ lineText: string }} location
+ */
+
+/**
+ * @typedef ShaderUpdate
  * @property {string} filepath - The path of the shader on the filesystem
  * @property {string} source - The source code of the shader
  * @property {boolean} nohsr - Whether the shader can be injected on the fly or if the sketch needs to be fully reloaded
- * @property {string[]} warnings - Indicates whether the Wisdom component is present.
+ * @property {Warning[]} warnings - Indicates whether the Wisdom component is present.
  */
 
 /**
@@ -28,8 +37,11 @@ export default function hotShaderReplacement({ cwd = process.cwd(), wss }) {
 		/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(\/\/.*)/gi;
 	const base = process.cwd().split(path.sep).join(path.posix.sep);
 
+	/** @type Map<string, string[]> */
 	let dependencies = new Map();
+	/** @type {string[]} */
 	let shaders = [];
+	/** @type {import('vite').ModuleNode[]} */
 	let modulesToReload = [];
 
 	function reloadSketch() {
@@ -56,6 +68,12 @@ export default function hotShaderReplacement({ cwd = process.cwd(), wss }) {
 		return clone;
 	}
 
+	/**
+	 *
+	 * @param {string} shaderSource
+	 * @param {string} shaderPath
+	 * @returns
+	 */
 	function addShaderFilepath(shaderSource, shaderPath) {
 		let keyword = `void main`;
 		let shaderParts = shaderSource.split(keyword);
@@ -67,10 +85,21 @@ ${keyword}${shaderParts[1]}
         `;
 	}
 
+	/**
+	 *
+	 * @param {string} shaderPath
+	 * @returns {string}
+	 */
 	function getUnixPath(shaderPath) {
 		return shaderPath.split(path.sep).join(path.posix.sep);
 	}
 
+	/**
+	 *
+	 * @param {string} shaderSource
+	 * @param {string} shaderPath
+	 * @returns
+	 */
 	function compileGLSL(shaderSource, shaderPath) {
 		// test if shader source contains hint to avoid shader injection
 		const nohsr = ignoreRegex.test(shaderSource);
@@ -97,7 +126,8 @@ ${keyword}${shaderParts[1]}
 		 * @param {string} parentSource
 		 * @param {string} parentPath
 		 * @param {string[]} deps
-		 * @returns {}
+		 * @param {Warning[]} warnings
+		 * @returns {{ code: string, deps: string[], warnings: Warning[] }}
 		 */
 		function resolveDependencies(
 			parentSource,
@@ -163,7 +193,7 @@ ${keyword}${shaderParts[1]}
 
 						const parents = dependencies.get(chunkUnixPath);
 
-						if (!parents.includes(shaderPath)) {
+						if (parents && !parents.includes(shaderPath)) {
 							parents.push(shaderPath);
 							deps.push(chunkResolvedPath);
 						} else {
@@ -201,7 +231,11 @@ ${keyword}${shaderParts[1]}
 
 							return `${prefix}\n${chunkCode}`;
 						} catch (error) {
-							if (error.code === 'ENOENT') {
+							const err = /** @type {NodeJS.ErrnoException} */ (
+								error
+							);
+
+							if (err.code === 'ENOENT') {
 								warnings.push({
 									type: 'not found',
 									message: `Cannot find ${chunkResolvedPath}`,
@@ -237,8 +271,7 @@ ${keyword}${shaderParts[1]}
 
 		warnings.forEach((warning) => {
 			const { location } = warning;
-			const line = 1;
-			const column = 4;
+
 			log.message(`${yellow(warning.type)} ${warning.importer}`, prefix);
 			console.log();
 			console.log(`  ${dim(location.lineText)}`);
@@ -291,8 +324,8 @@ ${keyword}${shaderParts[1]}
 		name: 'fragment-plugin-hsr',
 		config: () => ({
 			optimizeDeps: {
-				esbuildOptions: {
-					loader: {
+				rolldownOptions: {
+					moduleTypes: {
 						'.frag': 'text',
 						'.vert': 'text',
 						'.glsl': 'text',
@@ -305,7 +338,7 @@ ${keyword}${shaderParts[1]}
 		configureServer(_server) {
 			server = _server;
 		},
-		handleHotUpdate: async ({ modules, file, read }) => {
+		handleHotUpdate: async ({ file, read }) => {
 			const { moduleGraph } = server;
 
 			if (fileRegex.test(file)) {
@@ -324,7 +357,7 @@ ${keyword}${shaderParts[1]}
 						nohsr,
 					} = compileGLSL(source, file);
 
-					/** @type ShaderUpdate[] */
+					/** @type ShaderUpdate */
 					const shaderUpdate = {
 						filepath: unixPath,
 						source: glsl,
@@ -335,16 +368,21 @@ ${keyword}${shaderParts[1]}
 					return reloadShaders([shaderUpdate]);
 				} else {
 					if (dependencies.has(unixPath)) {
-						const shadersList = dependencies.get(unixPath);
+						const shadersList = dependencies.get(unixPath) ?? [];
 
 						// retrieve modules from module graph
-						const moduleNodes = shadersList.map((moduleNode) =>
-							moduleGraph.getModuleById(moduleNode),
-						);
+						const moduleNodes = shadersList
+							.map((moduleNode) =>
+								moduleGraph.getModuleById(moduleNode),
+							)
+							.filter((moduleNode) => moduleNode !== undefined);
 
 						// save it as modules to reload to invalidate the top level shaders in case a dependency has been hot updated in between
-						modulesToReload.push(...moduleNodes);
+						if (moduleNodes.length > 0) {
+							modulesToReload.push(...moduleNodes);
+						}
 
+						/** @type {string[]} */
 						const sources = await Promise.all(
 							shadersList.map((shader) => {
 								return readFile(shader, 'utf-8');

package/src/cli/plugins/save.js

@@ -1,9 +1,13 @@
 import path from 'node:path';
+import util from 'node:util';
+import { exec as execSync } from 'node:child_process';
 import { writeFile } from 'node:fs/promises';
 import { json } from 'milliparsec';
-import { log, green, red } from '../log.js';
+import { log, green, red, yellow } from '../log.js';
 import { mkdirp } from '../utils.js';
 
+const exec = util.promisify(execSync);
+
 /**
  *
  * @param {object} [params]
@@ -45,6 +49,32 @@ export default function screenshot({
 		return directory;
 	}
 
+	/**
+	 * Check if a directory is within a git repository
+	 * @param {string} dir - Directory to check
+	 * @returns {Promise<boolean>}
+	 */
+	async function isGitRepository(directory) {
+		try {
+			await exec('git status --porcelain');
+			return true;
+		} catch (error) {
+			return false;
+		}
+	}
+
+	async function commitChanges() {
+		const message = `fragment-auto-commit`;
+
+		try {
+			log.message(`${yellow(`git`)} Committing latest changes...`);
+			await exec(`git add . && git commit -m ${message}`);
+			log.message(`${green(`git`)} Committed latest changes.`);
+		} catch (error) {
+			log.error(error);
+		}
+	}
+
 	let inlineExportDirPath;
 
 	return {
@@ -54,54 +84,83 @@ export default function screenshot({
 			server.middlewares.use(
 				json({
 					payloadLimit,
+					payloadLimitErrorFn: (payloadLimit) => {},
 				}),
 			);
 			server.middlewares.use('/save', async (req, res, next) => {
 				if (req.method === 'POST') {
-					const { files } = req.body;
-
 					try {
-						const filepaths = [];
-
-						for (let i = 0; i < files.length; i++) {
-							const { filename, data, encoding, exportDir } =
-								files[i];
-
-							let directory = resolveExportDirectory(
-								exportDir,
-								path.dirname(filename),
-							);
-							mkdirp(directory);
-
-							let filepath = path.join(
-								directory,
-								path.basename(filename),
-							);
-
-							let buffer = Buffer.from(
-								encoding === 'base64'
-									? data.split(',')[1]
-									: data,
-								encoding,
-							);
-
-							await writeFile(filepath, buffer);
-
-							log.message(`${green(`export`)} Saved ${filepath}`);
-							filepaths.push(filepath);
+						if (req.body) {
+							const { files, commit: shouldCommit = false } =
+								req.body;
+
+							let canCommit = false;
+
+							if (shouldCommit) {
+								canCommit = await isGitRepository();
+							}
+
+							const filepaths = [];
+							const warnings = [];
+
+							for (let i = 0; i < files.length; i++) {
+								const { filename, data, encoding, exportDir } =
+									files[i];
+
+								let directory = resolveExportDirectory(
+									exportDir,
+									path.dirname(filename),
+								);
+								mkdirp(directory);
+
+								let filepath = path.join(
+									directory,
+									path.basename(filename),
+								);
+
+								let buffer = Buffer.from(
+									encoding === 'base64'
+										? data.split(',')[1]
+										: data,
+									encoding,
+								);
+
+								await writeFile(filepath, buffer);
+
+								log.message(
+									`${green(`export`)} Saved ${filepath}`,
+								);
+								filepaths.push(filepath);
+							}
+
+							if (shouldCommit && canCommit) {
+								await commitChanges();
+							} else if (shouldCommit) {
+								const warning = `Auto-commit failed because the current folder is not a Git repository.`;
+								log.warn(warning);
+								warnings.push(warning);
+							}
+
+							res.writeHead(200, {
+								'Content-Type': 'application/json',
+							});
+							res.end(JSON.stringify({ filepaths, warnings }));
+						} else {
+							throw new Error(`Payload is too big.`);
 						}
-
-						res.writeHead(200, {
-							'Content-Type': 'application/json',
-						});
-						res.end(JSON.stringify({ filepaths }));
 					} catch (error) {
-						log.message(`${red(`export`)} Error`);
+						const errorMessage = `Error while trying to save files on disk.`;
+
+						log.message(`${red(`export`)} ${errorMessage}`);
 						console.error(error);
 						res.writeHead(500, {
 							'Content-Type': 'application/json',
 						});
-						res.end(JSON.stringify({ error }));
+						res.end(
+							JSON.stringify({
+								errors: [errorMessage],
+							}),
+						);
 					}
 				} else {
 					next();