fragment-tools 0.2.10 → 0.2.11

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "A web development environment for creative coding",
-  "main": "index.js",
+  "main": "./src/index.js",
   "bin": {
     "fragment": "bin/index.js"
   },
@@ -30,7 +30,6 @@
     "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",

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(

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/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/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/index.js

@@ -0,0 +1,12 @@
+/**
+ * @typedef {import('./types/config').Config} Config
+ */
+
+/**
+ * Type helper to make it easier to use fragment.config.js
+ * @param {Config} config
+ * @returns {Config}
+ */
+export function defineConfig(config = {}) {
+	return config;
+}

package/src/types/config.d.ts

@@ -0,0 +1,6 @@
+import { UserConfig } from 'vite';
+
+export interface Config {
+	vite?: UserConfig;
+	[key: string]: any;
+}

package/src/types/index.d.ts

@@ -1,5 +1,6 @@
 export type * from './renderers';
 export type * from './sketch';
+export type * from './config';
 export type * from './props';
 export type * from './helpers';
 export type * from './hooks';

package/src/types/props.d.ts

@@ -3,7 +3,7 @@ type BaseProp<Value, Params, Type> = {
 	params?: Params;
 	type?: Type;
 	hidden?: boolean;
-	displayName?: string;
+	displayName?: string | null;
 	folder?: string;
 	group?: string;
 	onChange?: PropOnChange<Value, Params>;
@@ -25,11 +25,37 @@ type NumberProp = BaseProp<
 	{ disabled?: boolean; step?: number } | { min: number; max: number },
 	'number'
 >;
-type VecProp = BaseProp<
+
+type VecArray =
 	| [number, number]
 	| [number, number, number]
-	| [number, number, number, number],
-	{ locked?: boolean },
+	| [number, number, number, number];
+
+type VecObject = Record<string, number> & { [key: number]: never };
+
+type VecValue = VecArray | VecObject;
+
+type VecArrayParams<V extends VecArray> = {
+	min: { [K in keyof V]: number };
+	max: { [K in keyof V]: number };
+	step?: { [K in keyof V]: number };
+};
+
+type VecObjectParams<V extends VecObject> = {
+	min: { [K in keyof V]: number };
+	max: { [K in keyof V]: number };
+	step?: { [K in keyof V]: number };
+};
+
+type VecParams<V extends VecValue> = V extends readonly number[]
+	? VecArrayParams<V>
+	: V extends Record<string, number>
+		? VecObjectParams<V>
+		: never;
+
+type VecProp<V extends VecValue = VecValue> = BaseProp<
+	V,
+	{ locked?: boolean } | VecParams<V>,
 	'vec'
 >;
 type CheckboxProp = BaseProp<boolean, never, 'checkbox'>;
@@ -50,7 +76,8 @@ type ImageProp = BaseProp<string, never, 'image'>;
 type Prop =
 	| SelectProp
 	| NumberProp
-	| VecProp
+	| VecProp<VecObject>
+	| VecProp<VecArray>
 	| CheckboxProp
 	| TextProp
 	| ListProp