fragment-tools 0.1.13 → 0.1.14

package/bin/index.js

@@ -4,14 +4,14 @@ import sade from 'sade';
 import { run } from '../src/cli/index.js';
 
 sade('fragment [entry]')
-	.version('0.1.13')
+	.version('0.1.14')
 	.describe('Run a dev environment for fragment')
 	.option('-n, --new', 'Create file if it does not exist', false)
 	.option('-t, --template', 'Specify template to create the file from', '2d')
 	.option('-p, --port', 'Port to bind', 3000)
 	.option('-dev, --development', 'Enable development mode', false)
 	.option('-b, --build', 'Build sketch for production', false)
-	.option('--exportDir', 'Directory used for exports', process.cwd())
+	.option('--exportDir', 'Directory used for exports')
 	.option('--outDir', 'Directory used for static build', null)
 	.option('--emptyOutDir', 'Empty outDir before static build', false)
 	.action((entry, options) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {
@@ -18,8 +18,7 @@
   },
   "homepage": "https://github.com/raphaelameaume/fragment#readme",
   "dependencies": {
-    "@rollup/plugin-alias": "^3.1.5",
-    "@sveltejs/vite-plugin-svelte": "^1.0.2",
+    "@sveltejs/vite-plugin-svelte": "^2.4.5",
     "body-parser": "^1.20.0",
     "changedpi": "^1.0.4",
     "chokidar": "^3.5.2",
@@ -29,9 +28,9 @@
     "glslify": "^7.1.1",
     "kleur": "^4.1.4",
     "sade": "^1.7.4",
-    "svelte": "^3.49.0",
+    "svelte": "^4.0.0",
     "svelte-json-tree": "^1.0.0",
-    "vite": "^3.0.9",
+    "vite": "^4.4.9",
     "webm-writer": "^1.0.0",
     "ws": "^8.2.3"
   }

package/src/cli/log.js

@@ -1,26 +1,36 @@
-import kleur from "kleur";
+import kleur from 'kleur';
 
 const log = (() => {
-    let prefix = kleur.grey('[fragment]');
-
-    const success = (message) => {
-        console.log(prefix, kleur.green(`✔ ${message}`));
-    };
-
-    const warning = (message) => {
-        console.log(prefix, kleur.yellow(`ℹ ${message}`));
-    };
-
-    const error = (message) => {
-        console.log(prefix, kleur.red(`✖ ${message}`));
-    };
-
-    return {
-        prefix,
-        success,
-        warning,
-        error,
-    };
+	let _prefix = createPrefix('fragment');
+
+	const success = (message, prefix = _prefix) => {
+		console.log(prefix, kleur.green(`✔ ${message}`));
+	};
+
+	const warning = (message, prefix = _prefix) => {
+		console.log(prefix, kleur.yellow(`ℹ ${message}`));
+	};
+
+	const error = (message, prefix = _prefix) => {
+		console.log(prefix, kleur.red(`✖ ${message}`));
+	};
+
+	const text = (message, prefix = _prefix) => {
+		console.log(prefix, message);
+	};
+
+	function createPrefix(prefix) {
+		return kleur.grey(`[${prefix}]`);
+	}
+
+	return {
+		prefix: _prefix,
+		createPrefix,
+		success,
+		warning,
+		error,
+		text,
+	};
 })();
 
 export default log;

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

@@ -1,36 +1,45 @@
-import path from "path";
-import fs from "fs";
-import log from "../log.js";
+import path from 'path';
+import fs from 'fs';
+import log from '../log.js';
 
-export default function checkDependencies({ cwd, app, entriesPaths, build } = {}) {
-    const regex = /\bexport[\s]*\b(let|const)[\s]*\brendering\b[\s]*=[\s]*["'](.*?)["']/;
+export default function checkDependencies({
+	cwd,
+	app,
+	entriesPaths,
+	build,
+} = {}) {
+	const regex =
+		/\bexport[\s]*\b(let|const)[\s]*\brendering\b[\s]*=[\s]*["'](.*?)["']/;
 
-    const dependenciesMap = new Map();
-    dependenciesMap.set("three", ["three"]);
-    dependenciesMap.set("p5", ["p5"]);
-    dependenciesMap.set("fragment", []);
-    dependenciesMap.set("2d", []);
+	const dependenciesMap = new Map();
+	dependenciesMap.set('three', ['three']);
+	dependenciesMap.set('p5', ['p5']);
+	dependenciesMap.set('fragment', []);
+	dependenciesMap.set('2d', []);
 
 	const renderers = new Map();
-	renderers.set("three", `${app}/renderers/THREERenderer.js`);
-	renderers.set("p5", `${app}/renderers/P5Renderer.js`);
-	renderers.set("ogl", `${app}/renderers/OGLRenderer.js`);
-	renderers.set("fragment", `${app}/renderers/FragmentRenderer.js`);
-	renderers.set("2d", `${app}/renderers/2DRenderer.js`);
+	renderers.set('three', `${app}/renderers/THREERenderer.js`);
+	renderers.set('p5', `${app}/renderers/P5Renderer.js`);
+	renderers.set('ogl', `${app}/renderers/OGLRenderer.js`);
+	renderers.set('fragment', `${app}/renderers/FragmentRenderer.js`);
+	renderers.set('2d', `${app}/renderers/2DRenderer.js`);
 
 	const renderings = [];
 
 	entriesPaths.forEach((entry) => {
-		const content = fs.readFileSync(entry, { encoding: "utf-8" });
-        const match = content.match(regex);
+		const content = fs.readFileSync(entry, { encoding: 'utf-8' });
+		const match = content.match(regex);
 		const rendering = match && match[2];
 
-		if (rendering) {
+		if (rendering && dependenciesMap.has(rendering)) {
 			renderings.push(rendering);
 
 			const dependencies = dependenciesMap.get(rendering);
 			dependencies.forEach((dependency) => {
-				const dependencyPath = path.join(cwd, `node_modules/${dependency}`);
+				const dependencyPath = path.join(
+					cwd,
+					`node_modules/${dependency}`,
+				);
 				const isInstalled = fs.existsSync(dependencyPath);
 
 				if (!isInstalled) {
@@ -40,7 +49,7 @@ export default function checkDependencies({ cwd, app, entriesPaths, build } = {}
 					console.log(`
 It looks like you're trying to build a ${dependency} sketch (${filename}) without having ${dependency} installed.
 Run 'npm install ${dependency}' before starting Fragment to run ${filename}.
-					`)
+					`);
 
 					throw new Error(error);
 				}
@@ -58,20 +67,28 @@ Run 'npm install ${dependency}' before starting Fragment to run ${filename}.
 		})
 		.flat();
 
-    return {
-        name: 'check-dependencies',
+	return {
+		name: 'check-dependencies',
 		config: () => ({
 			define: {
-				'__THREE_RENDERER__': build ? renderings.some((rendering) => rendering === "three") : true,
-				'__P5_RENDERER__': build ? renderings.some((rendering) => rendering === "p5") : true,
-				'__FRAGMENT_RENDERER__': build ? renderings.some((rendering) => rendering === "fragment") : true,
-				'__2D_RENDERER__': build ? renderings.some((rendering) => rendering === "2d") : true,
+				__THREE_RENDERER__: build
+					? renderings.some((rendering) => rendering === 'three')
+					: true,
+				__P5_RENDERER__: build
+					? renderings.some((rendering) => rendering === 'p5')
+					: true,
+				__FRAGMENT_RENDERER__: build
+					? renderings.some((rendering) => rendering === 'fragment')
+					: true,
+				__2D_RENDERER__: build
+					? renderings.some((rendering) => rendering === '2d')
+					: true,
 			},
 		}),
-        load(id) {
+		load(id) {
 			if (build && skipFiles.includes(id)) {
-				return { code: "", map: null };
+				return { code: '', map: null };
 			}
-        },
-    };
+		},
+	};
 }

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

@@ -0,0 +1,384 @@
+import { posix, sep, resolve, dirname, extname, relative } from 'path';
+import { readFileSync } from 'fs';
+import glslify from 'glslify';
+import log from '../log.js';
+import { readFile } from 'fs/promises';
+import kleur from 'kleur';
+
+/**
+ * @typedef {Object} 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.
+ */
+
+export default function hotShaderReplacement({ cwd, wss, watch = false }) {
+	const name = 'fragment-plugin-hsr';
+	const prefix = log.createPrefix(name);
+	const fileRegex = /\.(?:frag|vert|glsl|vs|fs)$/;
+	const includeRegex = /#include(\s+([^\s<>]+));?/gi;
+	const ignoreRegex = /^(?:\/|\*)*\s*@fragment-nohsr/;
+	const commentRegex =
+		/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(\/\/.*)/gi;
+	const base = process.cwd().split(sep).join(posix.sep);
+
+	let dependencies = new Map();
+	let shaders = [];
+	let modulesToReload = [];
+
+	function reloadSketch() {
+		const clone = [...modulesToReload];
+
+		modulesToReload = [];
+
+		if (clone.length > 0) {
+			const { file } = clone[0];
+			const filepath = relative(cwd, file);
+			console.log(
+				`${log.prefix} ${kleur.green(`hmr update`)} /${filepath}`,
+			);
+
+			server.ws.send({
+				type: 'custom',
+				event: 'sketch-update',
+				data: {
+					file,
+					filepath,
+					cwd,
+				},
+			});
+		}
+
+		return clone;
+	}
+
+	function addShaderFilepath(shaderSource, shaderPath) {
+		let keyword = `void main`;
+		let shaderParts = shaderSource.split(keyword);
+		let hint = `// <filepath://${shaderPath}>`;
+
+		return `${shaderParts[0]}
+${hint}
+${keyword}${shaderParts[1]}
+        `;
+	}
+
+	function getUnixPath(shaderPath) {
+		return shaderPath.split(sep).join(posix.sep);
+	}
+
+	function compileGLSL(shaderSource, shaderPath) {
+		// test if shader source contains hint to avoid shader injection
+		const nohsr = ignoreRegex.test(shaderSource);
+
+		// remove current shader from dependency list before resolving dependencies again
+		dependencies.forEach((shadersPaths, dependency) => {
+			const shadersList = shadersPaths.filter((p) => p !== shaderPath);
+			dependencies.set(dependency, shadersList);
+		});
+
+		// if a dependency no longer have any parent shader, we can remove it from the watch
+		dependencies.forEach((shadersPaths, dependency) => {
+			if (shadersPaths.length === 0) {
+				if (server) {
+					server.watcher.unwatch(dependency);
+				}
+
+				dependencies.delete(dependency);
+			}
+		});
+
+		/**
+		 *
+		 * @param {string} parentSource
+		 * @param {string} parentPath
+		 * @param {string[]} deps
+		 * @returns {}
+		 */
+		function resolveDependencies(
+			parentSource,
+			parentPath,
+			deps = [],
+			warnings = [],
+		) {
+			// remove comments
+			parentSource = parentSource.replace(commentRegex, '');
+
+			let parentUnixPath = getUnixPath(parentPath);
+			let directory = dirname(parentUnixPath);
+
+			if (includeRegex.test(parentSource)) {
+				const currentDirectory = directory;
+
+				parentSource = parentSource.replace(
+					includeRegex,
+					(_, include) => {
+						include = include.trim();
+						let chunkPath = include.replace(
+							/^(?:"|')?|(?:"|')?;?$/gi,
+							'',
+						);
+
+						if (!chunkPath.indexOf('/')) {
+							chunkPath = `${base}/${chunkPath}`;
+						}
+
+						const directoryIndex = chunkPath.lastIndexOf('/');
+						directory = currentDirectory;
+
+						if (directoryIndex !== -1) {
+							directory = resolve(
+								directory,
+								chunkPath.slice(0, directoryIndex + 1),
+							);
+							chunkPath = chunkPath.slice(
+								directoryIndex + 1,
+								chunkPath.length,
+							);
+						}
+
+						let chunkResolvedPath = resolve(directory, chunkPath);
+						let extension = 'glsl';
+
+						if (!extname(chunkResolvedPath))
+							chunkResolvedPath = `${chunkResolvedPath}.${extension}`;
+
+						const chunkUnixPath = getUnixPath(chunkResolvedPath);
+
+						if (!dependencies.has(chunkUnixPath)) {
+							// first time chunk is detected
+							dependencies.set(chunkUnixPath, []);
+
+							if (server) {
+								server.watcher.add(chunkResolvedPath);
+							}
+						}
+
+						const parents = dependencies.get(chunkUnixPath);
+
+						if (!parents.includes(shaderPath)) {
+							parents.push(shaderPath);
+							deps.push(chunkResolvedPath);
+						} else {
+							const message = `Dependency is already included in ${shaderPath}.\nInclude was skipped to avoid errors.`;
+
+							warnings.push({
+								type: 'duplicated dependency',
+								message,
+								importer: parentPath,
+								url: chunkResolvedPath,
+								location: {
+									lineText: `#include ${include}`,
+								},
+							});
+
+							return '';
+						}
+
+						const { code: chunkCode } = resolveDependencies(
+							readFileSync(chunkResolvedPath, 'utf8'),
+							chunkResolvedPath,
+							deps,
+							warnings,
+						);
+
+						const prefix = server ? `//#include ${include}\n` : ``;
+
+						return `${prefix}\n${chunkCode}`;
+					},
+				);
+			}
+
+			return {
+				code: parentSource.trim().replace(/(\r\n|\r|\n){3,}/g, '$1\n'),
+				deps,
+				warnings,
+			};
+		}
+
+		let { code, deps, warnings } = resolveDependencies(
+			shaderSource,
+			shaderPath,
+		);
+
+		code = glslify(code, {
+			basedir: process.cwd(),
+		});
+
+		if (server) {
+			code = addShaderFilepath(code, shaderPath);
+		}
+
+		warnings.forEach((warning) => {
+			const { location } = warning;
+			const line = 1;
+			const column = 4;
+			log.text(
+				`${kleur.yellow(warning.type)} ${warning.importer}`,
+				prefix,
+			);
+			console.log();
+			console.log(`  ${kleur.dim(location.lineText)}`);
+			console.log();
+			console.log(warning.message);
+			console.log();
+		});
+
+		return { code, deps, warnings, nohsr };
+	}
+
+	/**
+	 * Reload shaders after changes via custom Websocket or Vite HMR (sketch reload)
+	 * @param {ShaderUpdate[]} shaderUpdates
+	 */
+	function reloadShaders(shaderUpdates) {
+		const shadersNeedReload = shaderUpdates.filter(
+			(shaderUpdate) => shaderUpdate.nohsr,
+		);
+
+		if (shadersNeedReload.length > 0) {
+			shadersNeedReload.forEach((shaderUpdate) => {
+				log.text(
+					`${kleur.yellow('hsr ignore')} ${shaderUpdate.filepath}`,
+					prefix,
+				);
+			});
+
+			return reloadSketch();
+		} else {
+			shaderUpdates.forEach((shaderUpdate) => {
+				log.text(
+					`${kleur.green('hsr update')} ${shaderUpdate.filepath}`,
+					prefix,
+				);
+			});
+
+			wss.send({
+				type: 'custom',
+				event: 'shader-update',
+				data: shaderUpdates,
+			});
+
+			return [];
+		}
+	}
+
+	/** @type import('vite').ViteDevServer */
+	let server;
+
+	return {
+		name: 'fragment-plugin-hsr',
+		config: () => ({
+			optimizeDeps: {
+				esbuildOptions: {
+					loader: {
+						'.frag': 'text',
+						'.vert': 'text',
+						'.glsl': 'text',
+						'.fs': 'text',
+						'.vs': 'text',
+					},
+				},
+			},
+		}),
+		configureServer(_server) {
+			server = _server;
+		},
+		handleHotUpdate: async ({ modules, file, read }) => {
+			const { moduleGraph } = server;
+
+			if (fileRegex.test(file)) {
+				const thisModule = moduleGraph.getModuleById(file);
+
+				if (thisModule) {
+					modulesToReload.push(thisModule);
+				}
+
+				let unixPath = getUnixPath(file);
+				if (shaders.includes(file)) {
+					let source = await read();
+					let {
+						code: glsl,
+						warnings,
+						nohsr,
+					} = compileGLSL(source, file);
+
+					/** @type ShaderUpdate[] */
+					const shaderUpdate = {
+						filepath: unixPath,
+						source: glsl,
+						warnings,
+						nohsr,
+					};
+
+					return reloadShaders([shaderUpdate]);
+				} else {
+					if (dependencies.has(unixPath)) {
+						const shadersList = dependencies.get(unixPath);
+
+						// retrieve modules from module graph
+						const moduleNodes = shadersList.map((moduleNode) =>
+							moduleGraph.getModuleById(moduleNode),
+						);
+
+						// 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);
+
+						const sources = await Promise.all(
+							shadersList.map((shader) => {
+								return readFile(shader, 'utf-8');
+							}),
+						);
+
+						log.text(
+							`${kleur.yellow(`dependency update`)} ${unixPath}`,
+							prefix,
+						);
+
+						/** @type ShaderUpdate[] */
+						const shaderUpdates = shadersList.map(
+							(shader, index) => {
+								let source = sources[index];
+								let {
+									code: glsl,
+									warnings,
+									nohsr,
+								} = compileGLSL(source, shader);
+
+								return {
+									filepath: shader,
+									source: glsl,
+									warnings: warnings,
+									nohsr,
+								};
+							},
+						);
+
+						return reloadShaders(shaderUpdates);
+					}
+				}
+
+				return [];
+			} else if (modulesToReload.length > 0) {
+				// only return if some shaders have been updated in between
+				// otherwise, returning an empty array would prevent hmr on sketch files
+				return reloadSketch();
+			}
+		},
+		transform(source, file) {
+			if (!fileRegex.test(file)) return;
+
+			if (!shaders.includes(file)) {
+				shaders.push(file);
+			}
+
+			let { code: glsl } = compileGLSL(source, file);
+
+			return {
+				code: `export default ${JSON.stringify(glsl)}`,
+				map: null, // provide source map if available
+			};
+		},
+	};
+}

package/src/cli/plugins/hot-sketch-reload.js

@@ -3,10 +3,11 @@ import kleur from "kleur";
 import log from "../log.js";
 
 export default function hotSketchReload({ cwd }) {
+    const shaderRegex = /\.(?:frag|vert|glsl|vs|fs)$/;
     return {
         name: 'hot-sketch-reload',
         handleHotUpdate: async ({ server, modules, file, read }) => {
-			if (file.includes(cwd)) {
+			if (file.includes(cwd) && !shaderRegex.test(file)) {
 				const filepath = path.relative(cwd, file);
                 console.log(`${log.prefix} ${kleur.green(`hmr update`)} /${filepath}`);
 			
@@ -23,17 +24,6 @@ export default function hotSketchReload({ cwd }) {
 			}
 
 			return modules;
-        },
-        // transform: (src, id) => {
-        //     if (fileRegex.test(id)) {
-        //         let source = glslify(src);
-        //         source = addShaderFilepath(source, id);
-
-        //         return {
-        //             code: `export default ${JSON.stringify(source)}`,
-        //             map: null // provide source map if available
-        //         }
-        //     }
-        // }
+        }
     };
 }