fragment-tools 0.1.13 → 0.1.15

package/src/cli/createFragmentFile.js

@@ -0,0 +1,70 @@
+import path from 'node:path';
+import { writeFile } from 'node:fs/promises';
+import { log } from './log.js';
+import { mkdirp } from './utils.js';
+
+/**
+ * Create local files needed by Fragment
+ * @param {string[]} entries
+ * @param {string} cwd Current working directory
+ * @returns {string}
+ */
+export async function createFragmentFile(entries = [], cwd = process.cwd()) {
+	try {
+		function getFilenameFromEntries(entries) {
+			if (entries.length === 1) {
+				const filename = path.parse(entries[0]).name;
+
+				return `${filename}.js`;
+			}
+
+			return `sketches.js`;
+		}
+
+		log.info(`Generating files...`);
+
+		const dir = '/node_modules/.fragment';
+		const dirpath = path.join(cwd, dir);
+		const filename = getFilenameFromEntries(entries);
+		const filepath = path.join(dirpath, filename);
+
+		// generate sketch index file
+		const code = /* js */ `
+// This file is generated by Fragment. Do not edit it.
+
+export const sketches = {
+    ${entries
+		.map((entry) => {
+			const entryPath = entry.split(path.sep).join(path.posix.sep);
+			const relativeEntryPath = `../../${entry}`
+				.split(path.sep)
+				.join(path.posix.sep);
+
+			return `"${entryPath}": () => import("${relativeEntryPath}")`;
+		})
+		.join(',')}
+};
+
+export const onSketchReload = (fn) => {
+    if (import.meta.hot) {
+        import.meta.hot.data.onSketchChange = fn;
+    }
+};
+
+if (import.meta.hot) {
+    import.meta.hot.accept((m) => {
+        if (typeof import.meta.hot.data.onSketchChange === "function") {
+            import.meta.hot.data.onSketchChange(m);
+        }
+    });
+}
+`;
+
+		await mkdirp(dirpath);
+		await writeFile(filepath, code);
+
+		return filepath;
+	} catch (error) {
+		throw error;
+	}
+}

package/src/cli/getEntries.js

@@ -0,0 +1,85 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import { lstat, readdir } from 'node:fs/promises';
+import { bold, cyan, log } from './log.js';
+import * as p from './prompts.js';
+import { addExtension } from './utils.js';
+
+/**
+ * Build entries from entry filepath or folder path
+ * @param {string} entry
+ * @param {string} cwd - Current working directory
+ * @returns {string[]}
+ */
+export async function getEntries(
+	entry,
+	cwd = process.cwd(),
+	command,
+	prefix = log.prefix(command),
+) {
+	const displayCommand = (message) => {
+		p.note(bold(cyan(message)));
+	};
+
+	const onError = (message) => {
+		log.error(`Error\n`, prefix);
+		log.warn(message);
+	};
+
+	try {
+		const entries = [];
+
+		if (!entry) {
+			onError(`You need to specify a file to start Fragment.\n`);
+			displayCommand(
+				`fragment${command === 'build' ? ' build' : ''} [your-file].js`,
+			);
+			return entries;
+		}
+
+		const entryPath = path.join(cwd, entry);
+
+		if (fs.existsSync(entryPath)) {
+			const stats = await lstat(entryPath);
+
+			if (stats.isFile()) {
+				entries.push(path.relative(cwd, entryPath));
+			} else if (stats.isDirectory()) {
+				const files = await readdir(entryPath);
+				const sketchFiles = files
+					.filter((file) => path.extname(file) === '.js')
+					.map((file) => path.join(entryPath, file));
+
+				if (sketchFiles.length > 0) {
+					entries.push(
+						...sketchFiles.map((sketchFile) =>
+							path.relative(cwd, sketchFile),
+						),
+					);
+				} else {
+					onError(`Folder doesn't contain any sketch files.`);
+				}
+			}
+		} else {
+			onError(`${path.join(cwd, entry)} does not exist.\n`);
+
+			const entryWithExt = addExtension(entry, '.js');
+			const fileExists = fs.existsSync(path.join(cwd, entryWithExt));
+
+			if (fileExists) {
+				log.message(`Did you mean to type?\n`);
+
+				displayCommand(`fragment ${entryWithExt}`);
+			} else {
+				log.message(
+					`Run the following command to start a new sketch:\n`,
+				);
+				displayCommand(`fragment ${entryWithExt} --new`);
+			}
+		}
+
+		return entries;
+	} catch (error) {
+		throw error;
+	}
+}

package/src/cli/log.js

@@ -1,26 +1,38 @@
-import kleur from "kleur";
+import { green, yellow, grey, inverse, red } from 'kleur/colors';
 
-const log = (() => {
-    let prefix = kleur.grey('[fragment]');
+export const log = {
+	message: (message = '', prefix) => {
+		const prefixed = prefix ? `${prefix} ` : ``;
+		process.stdout.write(`${prefixed}${message}\n`);
+	},
+	info: (message = '', prefix) => {
+		log.message(grey(`${message}`), prefix);
+	},
+	success: (message = '', prefix) => {
+		log.message(green(`${message}`), prefix);
+	},
+	warn: (message = '', prefix) => {
+		log.message(yellow(`${message}`), prefix);
+	},
+	/** alias for `log.warn()`. */
+	warning: (message = '', prefix) => {
+		log.warn(message, prefix);
+	},
+	error: (message = '', prefix) => {
+		log.message(red(`${message}`), prefix);
+	},
+	prefix: (label) => {
+		return inverse(` ${label} `);
+	},
+};
 
-    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,
-    };
-})();
-
-export default log;
+export {
+	green,
+	magenta,
+	cyan,
+	bold,
+	grey,
+	yellow,
+	dim,
+	red,
+} from 'kleur/colors';

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

@@ -1,50 +1,85 @@
-import path from "path";
-import fs from "fs";
-import log from "../log.js";
+import path from 'node:path';
+import fs from 'node:fs';
+import { log, bold, cyan, dim, magenta } from '../log.js';
+import { packageManager } from '../utils.js';
+import * as p from '../prompts.js';
 
-export default function checkDependencies({ cwd, app, entriesPaths, build } = {}) {
-    const regex = /\bexport[\s]*\b(let|const)[\s]*\brendering\b[\s]*=[\s]*["'](.*?)["']/;
+/**
+ *
+ * @param {object} params
+ * @param {string} params.cwd - Current working directory
+ * @param {string} params.app - App directory
+ * @param {string[]} params.entriesPaths - Absolute entries paths
+ * @param {boolean} params.build - Building for production
+ * @returns {import('vite').Plugin}
+ */
+export default function checkDependencies({
+	cwd = process.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('p5-webgl', ['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('p5-webgl', `${app}/renderers/P5GLRenderer.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) {
 			renderings.push(rendering);
 
-			const dependencies = dependenciesMap.get(rendering);
-			dependencies.forEach((dependency) => {
-				const dependencyPath = path.join(cwd, `node_modules/${dependency}`);
-				const isInstalled = fs.existsSync(dependencyPath);
+			if (dependenciesMap.has(rendering)) {
+				const dependencies = dependenciesMap.get(rendering);
+				dependencies.forEach((dependency) => {
+					const dependencyPath = path.join(
+						cwd,
+						`node_modules/${dependency}`,
+					);
+					const isInstalled = fs.existsSync(dependencyPath);
 
-				if (!isInstalled) {
-					const filename = entry.split(`${cwd}/`)[1];
-					const error = `Missing dependency "${dependency}" in ${filename}`;
-					log.error(error);
-					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}.
-					`)
+					if (!isInstalled) {
+						const filename = entry.split(`${cwd}/`)[1];
+						log.message();
+						log.error(
+							`Missing dependency "${dependency}" in ${filename}\n`,
+							log.prefix(`run`),
+						);
+						log.warn(
+							`It looks like you're trying to build a sketch with the following dependency: ${bold(dependency)}. It needs to be installed before running Fragment.\n`,
+						);
 
-					throw new Error(error);
-				}
-			});
+						log.message(
+							`Follow the next steps to start running ${magenta(filename)} with Fragment:\n`,
+						);
+
+						p.note(
+							`${dim(`1. Install dependencies`)}\n${bold(cyan(`${packageManager} install ${dependency}`))}\n${dim(`2. Start Fragment`)}\n${bold(cyan(`fragment ${filename}`))}`,
+							'',
+						);
+
+						process.exit(1);
+					}
+				});
+			}
 		}
 	});
 
@@ -58,20 +93,31 @@ 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,
+				__P5_WEBGL_RENDERER__: build
+					? renderings.some((rendering) => rendering === 'p5-webgl')
+					: 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 };
 			}
-        },
-    };
+		},
+	};
 }