fragment-tools 0.1.15 → 0.1.17

package/bin/index.js

@@ -28,6 +28,7 @@ prog.command('run [entry]', '', { default: true })
 	.option('--outDir', 'Build output directory')
 	.option('--emptyOutDir', 'Empty outDir before static build')
 	.option('--base', 'Base public path when served in production', undefined)
+	.option('--prompts', 'Enable interactive prompts', true)
 	.action((entry, options) => {
 		if (options.new) {
 			return create(entry, {
@@ -41,6 +42,7 @@ prog.command('run [entry]', '', { default: true })
 				outDir: options.outDir,
 				emptyOutDir: options.emptyOutDir,
 				base: options.base,
+				prompts: options.prompts,
 			});
 		}
 
@@ -66,6 +68,7 @@ prog.command('build [entry]')
 	.option('--emptyOutDir', 'Empty outDir before building for production')
 	.option('--base', 'Base public path', undefined)
 	.option('-dev, --development', 'Enable development mode', false)
+	.option('--prompts', 'Enable interactive prompts', true)
 	.action((entry, options) => {
 		build(entry, options);
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {

package/src/cli/build.js

@@ -17,12 +17,15 @@ import hotShaderReplacement from './plugins/hot-shader-replacement.js';
  * @param {string} options.outDir
  * @param {boolean} options.emptyOutDir
  * @param {boolean} options.development
+ * @param {boolean} [options.prompts=true]
  */
 export async function build(entry, options) {
 	const cwd = process.cwd();
 	const command = 'build';
 	const prefix = log.prefix(command);
 
+	const { prompts = true } = options;
+
 	try {
 		const entries = await getEntries(entry, cwd, command, prefix);
 
@@ -30,15 +33,19 @@ export async function build(entry, options) {
 
 		log.message(`${magenta(entry)}\n`, prefix);
 
-		const outDir = await p.text({
-			message: 'Output directory:',
-			placeholder: '.',
-			hint: '(hit Enter to use current directory)',
-			initialValue:
-				options.outDir ?? entries[0].split(path.extname(entries[0]))[0],
-		});
+		let outDir =
+			options.outDir ?? entries[0].split(path.extname(entries[0]))[0];
 
-		handleCancelledPrompt(outDir, prefix);
+		if (prompts) {
+			outDir = await p.text({
+				message: 'Output directory:',
+				placeholder: '.',
+				hint: '(hit Enter to use current directory)',
+				initialValue: outDir,
+			});
+
+			handleCancelledPrompt(outDir, prefix);
+		}
 
 		let outDirPath = path.join(cwd, outDir);
 
@@ -52,24 +59,30 @@ export async function build(entry, options) {
 		if (files.length > 0) {
 			log.warn(`${outDirPath} is not an empty folder.\n`);
 
-			emptyOutDir = await p.confirm({
-				message: 'Empty folder before building?',
-				active: 'Yes',
-				inactive: 'No',
-				initialValue: emptyOutDir ?? true,
-			});
+			if (prompts) {
+				emptyOutDir = await p.confirm({
+					message: 'Empty folder before building?',
+					active: 'Yes',
+					inactive: 'No',
+					initialValue: emptyOutDir,
+				});
 
-			handleCancelledPrompt(emptyOutDir, prefix);
+				handleCancelledPrompt(emptyOutDir, prefix);
+			}
 		}
 
-		const base = await p.text({
-			message: 'Base public path:',
-			placeholder: `/`,
-			hint: '(Hit Enter to validate)',
-			initialValue: options.base,
-		});
+		let base = options.base;
+
+		if (prompts) {
+			base = await p.text({
+				message: 'Base public path:',
+				placeholder: `/`,
+				hint: '(Hit Enter to validate)',
+				initialValue: base,
+			});
 
-		handleCancelledPrompt(base, prefix);
+			handleCancelledPrompt(base, prefix);
+		}
 
 		if (entries.length > 0) {
 			log.message(

package/src/cli/createConfig.js

@@ -73,6 +73,7 @@ export function createConfig(
 			__SEED__: Date.now(),
 			__BUILD__: build,
 			__DEV__: !build,
+			global: {},
 		},
 		optimizeDeps: {
 			include: ['convert-length', 'webm-writer', 'changedpi'],

package/src/cli/plugins/save.js

@@ -15,13 +15,13 @@ export default function screenshot({
 	cwd = process.cwd(),
 	inlineExportDir,
 } = {}) {
-	function resolveDirectory(directoryPath) {
+	function resolveDirectory(directoryPath, dirname) {
 		return path.isAbsolute(directoryPath)
 			? directoryPath
-			: path.join(cwd, directoryPath);
+			: path.join(path.join(cwd, dirname), directoryPath);
 	}
 
-	function resolveExportDirectory(exportDir) {
+	function resolveExportDirectory(exportDir, dirname) {
 		let directory;
 
 		if (inlineExportDir) {
@@ -37,7 +37,7 @@ export default function screenshot({
 				);
 			}
 		} else if (exportDir) {
-			directory = resolveDirectory(exportDir);
+			directory = resolveDirectory(exportDir, dirname);
 		} else {
 			directory = cwd;
 		}
@@ -62,10 +62,16 @@ export default function screenshot({
 							const { filename, data, encoding, exportDir } =
 								files[i];
 
-							let directory = resolveExportDirectory(exportDir);
+							let directory = resolveExportDirectory(
+								exportDir,
+								path.dirname(filename),
+							);
 							mkdirp(directory);
 
-							let filepath = path.join(directory, filename);
+							let filepath = path.join(
+								directory,
+								path.basename(filename),
+							);
 
 							let buffer = Buffer.from(
 								encoding === 'base64'

package/src/cli/templates/p5-webgl/index.js

@@ -17,7 +17,7 @@ let shader;
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let setup = ({ p, width, height }) => {
+export function setup({ p, width, height }) {
 	shader = p.createShader(
 		/* glsl */ `
 attribute vec3 aPosition;
@@ -39,7 +39,7 @@ void main() {
 `,
 		fragmentShader,
 	);
-};
+}
 
 /**
  * @param {object} params

package/src/client/app/modules/Exports.svelte

@@ -58,7 +58,6 @@
 			value={$exports.imageCount || 1}
 			params={{ step: 1 }}
 			on:change={(e) => {
-				console.log(e.detail, $exports.imageCount);
 				$exports.imageCount = e.detail;
 			}}
 		/>

package/src/client/app/renderers/P5GLRenderer.js

@@ -30,6 +30,7 @@ export let onBeforeUpdatePreview = ({ id }) => {
 
 	if (preview) {
 		preview.rendered = false;
+		preview.p.resetMatrix();
 	}
 };
 
@@ -52,12 +53,13 @@ export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	const preview = previews.find((p) => p.id === id);
 
 	if (preview) {
-		preview.p.resizeCanvas(width * pixelRatio, height * pixelRatio, false);
+		preview.p.pixelDensity(pixelRatio);
+		preview.p.resizeCanvas(width, height, false);
 	}
 };
 
 export let onDestroyPreview = ({ id }) => {
-	const previewIndex = previews.find((p) => p.id === id);
+	const previewIndex = previews.findIndex((preview) => preview.id === id);
 	const preview = previews[previewIndex];
 
 	if (preview) {

package/src/client/app/renderers/P5Renderer.js

@@ -22,16 +22,25 @@ export let onMountPreview = ({ id, width, height }) => {
 	};
 };
 
+export let onBeforeUpdatePreview = ({ id }) => {
+	const preview = previews.find((p) => p.id === id);
+
+	if (preview) {
+		preview.p.resetMatrix();
+	}
+};
+
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	const preview = previews.find((p) => p.id === id);
 
 	if (preview) {
-		preview.p.resizeCanvas(width * pixelRatio, height * pixelRatio, false);
+		preview.p.pixelDensity(pixelRatio);
+		preview.p.resizeCanvas(width, height, false);
 	}
 };
 
 export let onDestroyPreview = ({ id }) => {
-	const previewIndex = previews.find((p) => p.id === id);
+	const previewIndex = previews.findIndex((p) => p.id === id);
 	const preview = previews[previewIndex];
 
 	if (preview) {

package/src/client/app/ui/SketchRenderer.svelte

@@ -182,6 +182,8 @@
 	async function createSketch(key) {
 		_created = false;
 
+		sketch?.dispose?.();
+
 		sketch = $sketches[key];
 
 		if (!key || !sketch) {
@@ -458,7 +460,7 @@
 			elapsed += dt;
 
 			if (!$sync) {
-				if (elapsed >= (1 / framerate) * 1000) {
+				if (elapsed >= (1 / framerate) * 1000 && _created) {
 					elapsed = 0;
 					_renderSketch();
 				}

package/src/client/app/utils/canvas.utils.js

@@ -165,7 +165,8 @@ export function recordCanvas(
 				files.push({
 					filename,
 					data,
-					blob: exportDir,
+					blob,
+					exportDir,
 					encoding: 'base64',
 				});
 			}

package/src/client/app/utils/fields.utils.js

@@ -80,8 +80,8 @@ export function inferFieldType({ type, value, params, key }) {
 }
 
 export function hasChanged(initialValue, currentValue) {
-	const initialType = typeof initialValue;
-	const currentType = typeof currentValue;
+	const initialType = initialValue && typeof initialValue;
+	const currentType = currentValue && typeof currentValue;
 
 	if (initialType !== currentType) return true;