fragment-tools 0.1.13 → 0.1.14

package/src/cli/plugins/screenshot.js

@@ -1,27 +1,59 @@
-import path from "path";
-import fs from "fs/promises";
-import fsSync from "fs";
-import bodyParser from "body-parser";
-import log from "../log.js";
+import path from 'path';
+import fs from 'fs/promises';
+import fsSync from 'fs';
+import bodyParser from 'body-parser';
+import log from '../log.js';
 
-export default function screenshot({ cwd, exportDir = cwd }) {
-	let dir = (path.isAbsolute(exportDir) ? exportDir : path.join(cwd, exportDir));
+export default function screenshot({ cwd, inlineExportDir }) {
+	function resolveDirectory(directoryPath) {
+		return path.isAbsolute(directoryPath)
+			? directoryPath
+			: path.join(cwd, directoryPath);
+	}
+
+	function resolveExportDirectory({ exportDir }) {
+		let directory;
+
+		if (inlineExportDir) {
+			if (!inlineExportDirPath) {
+				inlineExportDirPath = resolveDirectory(inlineExportDir);
+			}
+
+			directory = inlineExportDirPath;
+
+			if (exportDir) {
+				log.warning(
+					`'exportDir' configuration from sketch has been overridden by --exportDir.`,
+				);
+			}
+		} else if (exportDir) {
+			directory = resolveDirectory(exportDir);
+		} else {
+			directory = cwd;
+		}
+
+		return directory;
+	}
+
+	let inlineExportDirPath;
 
 	return {
 		name: 'screenshot',
-		configureServer(server){
-			server.middlewares.use(bodyParser.json({ limit: '100mb'}))
+		configureServer(server) {
+			server.middlewares.use(bodyParser.json({ limit: '100mb' }));
 			server.middlewares.use('/save', async (req, res, next) => {
-				if (req.method === "POST") {
+				if (req.method === 'POST') {
 					const { filename, dataURL } = req.body;
 
-					const filepath = path.join(dir, filename);
+					let directory = resolveExportDirectory(req.body);
+
+					const filepath = path.join(directory, filename);
 					const buffer = Buffer.from(dataURL, 'base64');
 
-					if (!fsSync.existsSync(dir)) {
+					if (!fsSync.existsSync(directory)) {
 						try {
-							await fs.mkdir(dir, { recursive: true });
-						} catch(error) {
+							await fs.mkdir(directory, { recursive: true });
+						} catch (error) {
 							log.error('Cannot create directory for exports');
 							console.log(error);
 						}
@@ -30,17 +62,22 @@ export default function screenshot({ cwd, exportDir = cwd }) {
 					try {
 						await fs.writeFile(filepath, buffer);
 
-						res.writeHead(200, {'Content-Type': 'application/json'});
+						log.success(`Saved ${filepath}`);
+
+						res.writeHead(200, {
+							'Content-Type': 'application/json',
+						});
 						res.end(JSON.stringify({ filepath }));
-					} catch(error) {
-						res.writeHead(500, {'Content-Type': 'application/json'});
+					} catch (error) {
+						res.writeHead(500, {
+							'Content-Type': 'application/json',
+						});
 						res.end(JSON.stringify({ error }));
 					}
 				} else {
 					next();
 				}
 			});
-		}
-	}
-
+		},
+	};
 }

package/src/cli/server.js

@@ -1,153 +1,164 @@
-import path from "path";
-import kleur from "kleur";
+import path from 'path';
+import kleur from 'kleur';
 import { fileURLToPath } from 'url';
-import { createServer, defineConfig, build } from "vite";
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import hotShaderReload from "./plugins/hot-shader-reload.js";
-import hotSketchReload from "./plugins/hot-sketch-reload.js";
-import dbPlugin from "./plugins/db.js";
+import { createServer, defineConfig, build } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import hotShaderReplacement from './plugins/hot-shader-replacement.js';
+import hotSketchReload from './plugins/hot-sketch-reload.js';
+import dbPlugin from './plugins/db.js';
 
-import log from "./log.js";
-import db from "./db.js";
-import screenshotPlugin from "./plugins/screenshot.js";
-import checkDependencies from "./plugins/check-dependencies.js";
+import log from './log.js';
+import screenshotPlugin from './plugins/screenshot.js';
+import checkDependencies from './plugins/check-dependencies.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 export async function start({ options, filepaths, entries, fragment }) {
-    const root = path.join(__dirname, '/../client');
-    const cwd = process.cwd();
-    const app = path.join(root, 'app');
+	const root = path.join(__dirname, '/../client');
+	const cwd = process.cwd();
+	const app = path.join(root, 'app');
 
-    const entriesPaths = entries.map((entry ) => path.join(cwd, entry));
+	const entriesPaths = entries.map((entry) => path.join(cwd, entry));
 
-    const config = defineConfig({
-        configFile: false,
-        root,
-        logLevel: options.development ? "info" : "silent",
-        resolve: {
-            alias: [
-                { find: '@fragment/sketches', replacement: filepaths[0] },
-                { find: '@fragment', replacement: app },
-                { find: 'three', replacement: path.join(cwd, 'node_modules/three') },
-                { find: 'p5', replacement: path.join(cwd, 'node_modules/p5') },
-                { find: 'ogl', replacement: path.join(cwd, 'node_modules/ogl') },
-            ]
-        },
-        plugins: [
-            svelte({
-                configFile: false,
-                onwarn: (warning, handler) => {
-                    if (options.development) {
-                        handler(warning);
-                    } else {
-                        return;
-                    }
-                }
-            }),
-            hotSketchReload({
-                cwd,
-            }),
-            hotShaderReload({ wss: fragment.server }),
-            {
-                name: 'configure-response-headers',
-                configureServer: (server) => {
-                    server.middlewares.use((_req, res, next) => {
-                        res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
-                        res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
-                        next();
-                    });
-                }
-            },
-            dbPlugin(),
-            screenshotPlugin({ cwd, exportDir: options.exportDir }),
-            checkDependencies({
-                cwd,
-                app,
-                entriesPaths,
-                build: options.build,
-            })
-        ],
-        server: {
-            port: options.port,
-            host: true,
-            fs: {
-                strict: false,
-                allow: [".."],
-            },
-        },
-        define: {
-            '__CWD__': `${JSON.stringify(cwd)}`,
-            '__FRAGMENT_PORT__': fragment.server ? fragment.server.port : undefined,
-            '__START_TIME__': Date.now(),
-            '__SEED__': Date.now(),
-            '__BUILD__': options.build,
-            '__DEV__': !options.build,
+	const config = defineConfig({
+		configFile: false,
+		root,
+		logLevel: options.development ? 'info' : 'silent',
+		resolve: {
+			alias: [
+				{ find: '@fragment/sketches', replacement: filepaths[0] },
+				{ find: '@fragment', replacement: app },
+				{
+					find: 'three',
+					replacement: path.join(cwd, 'node_modules/three'),
+				},
+				{ find: 'p5', replacement: path.join(cwd, 'node_modules/p5') },
+				{
+					find: 'ogl',
+					replacement: path.join(cwd, 'node_modules/ogl'),
+				},
+			],
+		},
+		plugins: [
+			svelte({
+				configFile: false,
+				onwarn: (warning, handler) => {
+					if (options.development) {
+						handler(warning);
+					} else {
+						return;
+					}
+				},
+			}),
+			hotSketchReload({
+				cwd,
+			}),
+			hotShaderReplacement({ cwd, wss: fragment.server }),
+			{
+				name: 'configure-response-headers',
+				configureServer: (server) => {
+					server.middlewares.use((_req, res, next) => {
+						res.setHeader(
+							'Cross-Origin-Opener-Policy',
+							'same-origin',
+						);
+						res.setHeader(
+							'Cross-Origin-Embedder-Policy',
+							'require-corp',
+						);
+						next();
+					});
+				},
+			},
+			dbPlugin(),
+			screenshotPlugin({ cwd, inlineExportDir: options.exportDir }),
+			checkDependencies({
+				cwd,
+				app,
+				entriesPaths,
+				build: options.build,
+			}),
+		],
+		server: {
+			port: options.port,
+			host: true,
+			fs: {
+				strict: false,
+				allow: ['..'],
+			},
+		},
+		define: {
+			__CWD__: `${JSON.stringify(cwd)}`,
+			__FRAGMENT_PORT__: fragment.server
+				? fragment.server.port
+				: undefined,
+			__START_TIME__: Date.now(),
+			__SEED__: Date.now(),
+			__BUILD__: options.build,
+			__DEV__: !options.build,
+		},
+		optimizeDeps: {
+			include: ['convert-length', 'webm-writer', 'changedpi'],
+			exclude: ['@fragment/sketches', ...entriesPaths],
+		},
+		build: {
+			commonjsOptions: {
+				include: ['convert-length', 'webm-writer', 'changedpi'],
+			},
+		},
+	});
 
-        },
-        optimizeDeps: {
-            include: ['convert-length', 'webm-writer', 'changedpi'],
-            exclude: [
-                "@fragment/sketches",
-                ...entriesPaths,
-            ]
-        },
-        build: {
-            commonjsOptions: {
-                include: ['convert-length', 'webm-writer', 'changedpi'],
-            },
-        },
-    });
+	if (options.build) {
+		if (entries.length > 1) {
+			log.error(`fragment can only build one sketch at a time.`);
+			return;
+		}
 
-    if (options.build) {
-        if (entries.length > 1) {
-            log.error(`fragment can only build one sketch at a time.`);
-            return;
-        }
+		const outDir = options.outDir
+			? options.outDir
+			: entries[0].split('.js')[0];
 
-        const outDir = options.outDir ? options.outDir : entries[0].split('.js')[0];
+		await build({
+			...config,
+			logLevel: 'info',
+			build: {
+				outDir: path.join(process.cwd(), outDir),
+				emptyOutDir: options.emptyOutDir,
+			},
+		});
 
-        await build({
-            ...config,
-            logLevel: "info",
-            build: {
-                outDir: path.join(process.cwd(), outDir),
-                emptyOutDir: options.emptyOutDir,
-            },
-        });
+		log.success(`Built files for:`);
+		entries.forEach((entry) => console.log(`- ${entry}`));
+	} else {
+		log.warning(`Starting server...`);
+		const server = await createServer(config);
 
-        log.success(`Built files for:`);
-        entries.forEach(entry => console.log(`- ${entry}`));
-    } else {
-        log.warning(`Starting server...`);
-        const server = await createServer(config);
+		server.middlewares.use('/db', (req, res, next) => {
+			next();
+		});
 
-        server.middlewares.use('/db', (req, res, next) => {
-            next();
-        });
+		await server.listen();
 
-        await server.listen();
-        
-        log.success(`Server started at:`);
+		log.success(`Server started at:`);
 
-        const { resolvedUrls } = server;
+		const { resolvedUrls } = server;
 
-        for (const url of resolvedUrls.local) {
-            console.log(
-                `  ${kleur.green('➜')}  ${kleur.bold('Local')}:   ${kleur.cyan(
-                    url,
-                )}`,
-            );
-        }
-        for (const url of resolvedUrls.network) {
-            console.log(
-                `  ${kleur.green('➜')}  ${kleur.bold('Network')}: ${kleur.cyan(
-                    url,
-                )}`,
-            );
-        }
+		for (const url of resolvedUrls.local) {
+			console.log(
+				`  ${kleur.green('➜')}  ${kleur.bold('Local')}:   ${kleur.cyan(
+					url,
+				)}`,
+			);
+		}
+		for (const url of resolvedUrls.network) {
+			console.log(
+				`  ${kleur.green('➜')}  ${kleur.bold('Network')}: ${kleur.cyan(
+					url,
+				)}`,
+			);
+		}
 
-        return server;
-    }
+		return server;
+	}
 }

package/src/client/app/App.svelte

@@ -1,7 +1,7 @@
 <script>
-import Layout from "./ui/Layout.svelte";
-import Init from "./components/Init.svelte";
-import "./client";
+	import Layout from './ui/Layout.svelte';
+	import Init from './components/Init.svelte';
+	import './client';
 </script>
 
 <Init />

package/src/client/app/client.js

@@ -1,68 +1,84 @@
-const socketProtocol = (location.protocol === 'https:' ? 'wss' : 'ws');
+const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
 const socketHost = `${location.hostname}:${__FRAGMENT_PORT__}`;
 
-let socket, listeners = {};
+let socket,
+	listeners = {};
 
 function handleMessage(payload) {
-    const { event, data = {} } = payload;
-    const callbacks = listeners[event];
+	const { event, data = {} } = payload;
+	const callbacks = listeners[event];
 
-    if (callbacks && callbacks.length) {
-        callbacks.forEach((cb) => cb(data));
-    }
+	if (callbacks && callbacks.length) {
+		callbacks.forEach((cb) => cb(data));
+	}
 }
 
 function on(event, cb) {
-    if (!listeners[event]) {
-        listeners[event] = [];
-    }
+	if (!listeners[event]) {
+		listeners[event] = [];
+	}
 
-    listeners[event].push(cb);
+	listeners[event].push(cb);
 
-    return () => {
-        off(event, cb);
-    };
+	return () => {
+		off(event, cb);
+	};
 }
 
- function off(event, cb) {
-    const callbacks = listeners[event];
+function off(event, cb) {
+	const callbacks = listeners[event];
 
-    if (callbacks && callbacks.length) {
-        const filtered = callbacks.filter((callback) => callback !== cb);
+	if (callbacks && callbacks.length) {
+		const filtered = callbacks.filter((callback) => callback !== cb);
 
-        listeners[event] = filtered;
-    }
+		listeners[event] = filtered;
+	}
 }
 
 let opened = false;
 function emit(event, data) {
-    if (opened) {
-        socket.send(JSON.stringify({
-            event,
-            data,
-        }));
-    }
+	if (opened) {
+		socket.send(
+			JSON.stringify({
+				event,
+				data,
+			}),
+		);
+	}
 }
 
 if (import.meta.hot) {
-    console.log("[fragment] connecting...");
+	console.log('[fragment] connecting...');
 
-    socket = new WebSocket(`${socketProtocol}://${socketHost}`);
+	socket = new WebSocket(`${socketProtocol}://${socketHost}`);
 
-    socket.addEventListener('message', async (message) => {
-        const { data } = message;
+	socket.addEventListener('message', async (message) => {
+		const { data } = message;
 
-        handleMessage(JSON.parse(data));
-    });
+		handleMessage(JSON.parse(data));
+	});
 
-    socket.addEventListener("open", () => {
-        console.log("[fragment] connected.");
-        opened = true;
-    });
+	socket.addEventListener('open', () => {
+		console.log('[fragment] connected.');
+		opened = true;
+	});
 
-    import.meta.hot.on('sketch-update', (data) => {
-        console.log(`[fragment] hmr update /${data.filepath}`);
-    })
+	import.meta.hot.on('sketch-update', (data) => {
+		console.log(`[fragment] hmr update /${data.filepath}`);
+	});
 }
 
 export const client = { on, off, emit };
+
+client.on('shader-update', (shaderUpdates) => {
+	shaderUpdates.forEach(({ warnings = [] } = {}) => {
+		if (warnings.length > 0) {
+			warnings.forEach((warning) => {
+				const { location } = warning;
+				console.warn(
+					`[fragment-plugin-hsr] ${warning.type} ${warning.importer}\n\n  ${location.lineText}\n\n${warning.message}`,
+				);
+			});
+		}
+	});
+});

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

@@ -1,13 +1,16 @@
 <script>
-import { assignSketchFiles } from "../triggers/shared.js";
-import { sketchesKeys } from "../stores/sketches.js";
-import "../utils/glslErrors.js";
-
-sketchesKeys.subscribe((keys) => {
-	if (keys.length > 0) {
-		assignSketchFiles(keys);
-	}
-})
+	import { assignSketchFiles } from '../triggers/shared.js';
+	import { loadAll, sketchesKeys } from '../stores/sketches.js';
+	import { onSketchReload } from '@fragment/sketches';
+	import '../utils/glslErrors.js';
 
+	sketchesKeys.subscribe((keys) => {
+		if (keys.length > 0) {
+			assignSketchFiles(keys);
+		}
+	});
 
+	onSketchReload(({ sketches }) => {
+		loadAll(sketches);
+	});
 </script>

package/src/client/app/helpers.js

@@ -0,0 +1,42 @@
+import { props } from './stores/props';
+
+const propHandler = {
+	set: function (target, key, value, receiver) {
+		Reflect.set(target, key, value, receiver);
+
+		if (key === 'value') {
+			props.update((currentProps) => currentProps);
+		}
+
+		return true;
+	},
+};
+
+const propsHandler = {
+	get: (target, key) => {
+		if (typeof target[key] === 'object' && target[key] !== null) {
+			return new Proxy(target[key], propHandler);
+		}
+	},
+	set: (target, key, value) => {
+		console.log('new set', target, key, value);
+
+		target[key] = value;
+
+		props.update((currentProps) => currentProps);
+
+		return true;
+	},
+	deleteProperty: (target, prop) => {
+		if (prop in target) {
+			delete target[prop];
+			props.update((currentProps) => currentProps);
+
+			return true;
+		}
+	},
+};
+
+export function reactiveProps(props = {}) {
+	return new Proxy(props, propsHandler);
+}

package/src/client/app/hooks.js

@@ -0,0 +1,20 @@
+import {
+	removeBeforeCaptureFrom,
+	removeAfterCaptureFrom,
+	removeBeforeRecordFrom,
+	removeAfterRecordFrom,
+} from './stores/exports';
+
+export {
+	onBeforeCapture,
+	onAfterCapture,
+	onBeforeRecord,
+	onAfterRecord,
+} from './stores/exports';
+
+export function removeHooksFrom(context) {
+	removeBeforeCaptureFrom(context);
+	removeAfterCaptureFrom(context);
+	removeBeforeRecordFrom(context);
+	removeAfterRecordFrom(context);
+}

package/src/client/app/inputs/Keyboard.js

@@ -1,21 +1,19 @@
-import Input from "./Input";
+import Input from './Input';
 
 class Keyboard extends Input {
+	/**
+	 *
+	 * @param {KeyboardEvent} event
+	 */
+	getStepFromEvent(event) {
+		if (event.shiftKey) {
+			return 10;
+		} else if (event.altKey) {
+			return 0.1;
+		}
 
-    /**
-     * 
-     * @param {KeyboardEvent} event 
-     */
-    getStepFromEvent(event) {
-        if (event.shiftKey) {
-            return 10;
-        } else if (event.altKey) {
-            return 0.1;
-        }
-
-        return 1;
-    }
-
+		return 1;
+	}
 }
 
 export default new Keyboard();