fragment-tools 0.1.13 → 0.1.15

package/src/cli/prompts.js

@@ -0,0 +1,260 @@
+import { ConfirmPrompt, SelectPrompt, TextPrompt } from '@clack/core';
+import isUnicodeSupported from 'is-unicode-supported';
+import * as color from 'kleur/colors';
+
+const unicode = isUnicodeSupported();
+
+/**
+ * @param {string} c
+ * @param {string} fallback
+ * @returns {string}
+ */
+const s = (c, fallback) => (unicode ? c : fallback);
+
+const S_RADIO_ACTIVE = s('●', '>');
+const S_RADIO_INACTIVE = s('○', ' ');
+
+const S_BAR_H = s('─', '-');
+const S_CORNER_TOP_LEFT = s('╭', '+');
+const S_CORNER_TOP_RIGHT = s('╮', '+');
+const S_CORNER_BOTTOM_RIGHT = s('╯', '+');
+const S_CORNER_BOTTOM_LEFT = s('╰', '+');
+const S_BAR = s('│', '|');
+
+/**
+ * @param {object} opts
+ * @param {string} opts.active
+ * @param {string} opts.inactive
+ * @param {boolean} opts.initialValue
+ * @returns {Promise<boolean|symbol>}
+ */
+export const confirm = (opts) => {
+	const active = opts.active ?? 'Yes';
+	const inactive = opts.inactive ?? 'No';
+
+	return new ConfirmPrompt({
+		active,
+		inactive,
+		initialValue: opts.initialValue ?? true,
+		render() {
+			const title = `${opts.message}\n`;
+			const value = this.value ? active : inactive;
+
+			switch (this.state) {
+				case 'submit':
+					return `${color.dim(title)} ${color.green(value)}\n`;
+				case 'cancel':
+					return `${title}${color.strikethrough(color.dim(value))}\n`;
+				default: {
+					return `${title} ${
+						this.value
+							? `${S_RADIO_ACTIVE} ${active}`
+							: `${color.dim(S_RADIO_INACTIVE)} ${color.dim(active)}`
+					} ${color.dim('/')} ${
+						!this.value
+							? `${S_RADIO_ACTIVE} ${inactive}`
+							: `${color.dim(S_RADIO_INACTIVE)} ${color.dim(inactive)}`
+					}\n`;
+				}
+			}
+		},
+	}).prompt();
+};
+
+/**
+ * @param {object} opts
+ * @param {string} opts.message
+ * @param {string} [opts.placeholder]
+ * @param {string} [opts.defaultValue]
+ * @param {string} [opts.initialValue]
+ * @param {string} [opts.initialValue]
+ * @param {function} [opts.validate]
+ * @returns {Promise<string|symbol>}
+ */
+export const text = (opts) => {
+	const { hint = '' } = opts;
+
+	return new TextPrompt({
+		validate: opts.validate,
+		placeholder: opts.placeholder,
+		defaultValue: opts.defaultValue,
+		initialValue: opts.initialValue,
+		render() {
+			const title = `${opts.message}\n`;
+			const placeholder = opts.placeholder
+				? color.inverse(opts.placeholder[0]) +
+					color.dim(opts.placeholder.slice(1))
+				: color.inverse(color.hidden('_'));
+			const value = !this.value
+				? `${placeholder} ${color.dim(hint)}`.trim()
+				: this.valueWithCursor;
+
+			switch (this.state) {
+				case 'error':
+					return `${title.trim()}\n${value}\n  ${color.yellow(this.error)}\n`;
+				case 'submit':
+					return `${color.dim(`${title}`)} ${color.green(this.value || opts.placeholder)}\n`;
+				case 'cancel':
+					return `${title} ${color.strikethrough(
+						color.dim(this.value ?? placeholder),
+					)}\n`;
+				default:
+					return `${title} ${value}\n`;
+			}
+		},
+	}).prompt();
+};
+
+const limitOptions = (params) => {
+	const { cursor, options, style } = params;
+
+	// We clamp to minimum 5 because anything less doesn't make sense UX wise
+	const maxItems =
+		params.maxItems === undefined ? Infinity : Math.max(params.maxItems, 5);
+	let slidingWindowLocation = 0;
+
+	if (cursor >= slidingWindowLocation + maxItems - 3) {
+		slidingWindowLocation = Math.max(
+			Math.min(cursor - maxItems + 3, options.length - maxItems),
+			0,
+		);
+	} else if (cursor < slidingWindowLocation + 2) {
+		slidingWindowLocation = Math.max(cursor - 2, 0);
+	}
+
+	const shouldRenderTopEllipsis =
+		maxItems < options.length && slidingWindowLocation > 0;
+	const shouldRenderBottomEllipsis =
+		maxItems < options.length &&
+		slidingWindowLocation + maxItems < options.length;
+
+	return options
+		.slice(slidingWindowLocation, slidingWindowLocation + maxItems)
+		.map((option, i, arr) => {
+			const isTopLimit = i === 0 && shouldRenderTopEllipsis;
+			const isBottomLimit =
+				i === arr.length - 1 && shouldRenderBottomEllipsis;
+			return isTopLimit || isBottomLimit
+				? color.dim('...')
+				: style(option, i + slidingWindowLocation === cursor);
+		});
+};
+
+/**
+ * @typedef {string|boolean|number} Value
+ */
+
+/**
+ * @typedef {Object} Option
+ * @property {string} value
+ * @property {string} [label]
+ * @property {string} [hint]
+ */
+
+/**
+ * @param {object} opts
+ * @param {string} opts.message
+ * @param {Option<Value>[]} opts.options
+ * @param {Value} [opts.initialValue]
+ * @param {number} [opts.maxItems]
+ * @returns {Promise<boolean|symbol>}
+ */
+export const select = (opts) => {
+	/**
+	 *
+	 * @param {Option<Value>} option
+	 * @param {'inactive' | 'active' | 'selected' | 'cancelled'} state
+	 * @returns {string}
+	 */
+	const opt = (option, state) => {
+		const label = option.label ?? String(option.value);
+		switch (state) {
+			case 'selected':
+				return `${label}`;
+			case 'active':
+				return `${color.green(S_RADIO_ACTIVE)} ${label} ${
+					option.hint ? color.dim(`(${option.hint})`) : ''
+				}`;
+			case 'cancelled':
+				return `${color.strikethrough(color.dim(label))}`;
+			default:
+				return `${color.dim(S_RADIO_INACTIVE)} ${color.dim(label)}`;
+		}
+	};
+
+	return new SelectPrompt({
+		options: opts.options,
+		initialValue: opts.initialValue,
+		render() {
+			const title = `${opts.message}\n`;
+
+			switch (this.state) {
+				case 'submit':
+					return `${color.dim(title)} ${color.green(opt(this.options[this.cursor], 'selected'))}\n`;
+				case 'cancel':
+					return `${title} ${opt(
+						this.options[this.cursor],
+						'cancelled',
+					)}\n`;
+				default: {
+					return `${title} ${limitOptions({
+						cursor: this.cursor,
+						options: this.options,
+						maxItems: opts.maxItems,
+						style: (item, active) =>
+							opt(item, active ? 'active' : 'inactive'),
+					}).join(`\n`)}\n`;
+				}
+			}
+		},
+	}).prompt();
+};
+
+function ansiRegex() {
+	const pattern = [
+		'[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)',
+		'(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))',
+	].join('|');
+
+	return new RegExp(pattern, 'g');
+}
+
+/**
+ * @param {string} str
+ * @returns {string}
+ */
+const strip = (str) => str.replace(ansiRegex(), '');
+
+/**
+ * @param {string} message
+ * @param {string} title
+ */
+export const note = (message = '', title = '') => {
+	const lines = `\n${message}\n`.split('\n');
+	const titleLen = strip(title).length;
+	const len =
+		Math.max(
+			lines.reduce((sum, ln) => {
+				ln = strip(ln);
+				return ln.length > sum ? ln.length : sum;
+			}, 0),
+			titleLen,
+		) + 2;
+	const msg = lines
+		.map(
+			(ln) =>
+				`${color.gray(S_BAR)}  ${ln}${' '.repeat(len - strip(ln).length)}${color.gray(
+					S_BAR,
+				)}`,
+		)
+		.join('\n');
+
+	const head = title ? ` ${title} ` : `${color.gray(S_BAR_H.repeat(2))}`;
+
+	process.stdout.write(
+		`${color.gray(S_CORNER_TOP_LEFT + S_BAR_H)}${head}${color.gray(
+			S_BAR_H.repeat(Math.max(len - titleLen - 1, 1)) +
+				S_CORNER_TOP_RIGHT,
+		)}\n${msg}\n${color.gray(S_CORNER_BOTTOM_LEFT + S_BAR_H.repeat(len + 2) + S_CORNER_BOTTOM_RIGHT)}\n`,
+	);
+};

package/src/cli/run.js

@@ -0,0 +1,131 @@
+import { createServer, mergeConfig } from 'vite';
+import { createConfig } from './createConfig.js';
+import { createFragmentFile } from './createFragmentFile.js';
+import { getEntries } from './getEntries.js';
+import { log, magenta, bold, cyan, red } from './log.js';
+import save from './plugins/save.js';
+import * as p from './prompts.js';
+import { prettifyTime } from './utils.js';
+import { start as startWebSocketServer } from './ws.js';
+import hotSketchReload from './plugins/hot-sketch-reload.js';
+import hotShaderReplacement from './plugins/hot-shader-replacement.js';
+
+/**
+ * Run a sketch
+ * @param {string} entry
+ * @param {object} options
+ * @param {boolean} options.development
+ * @param {number} options.port
+ * @param {number} options.exportDir
+ */
+export async function run(entry, options = {}) {
+	let fragmentServer;
+
+	const cwd = process.cwd();
+	const command = `run`;
+	const prefix = log.prefix(command);
+	const exit = () => {
+		process.off('SIGTERM', exit);
+		process.off('exit', exit);
+
+		if (fragmentServer) {
+			fragmentServer.close();
+		}
+
+		console.log();
+	};
+
+	process.once('SIGTERM', exit);
+	process.on('exit', exit);
+
+	const startTime = Date.now();
+
+	try {
+		const entries = await getEntries(entry, cwd, command, prefix);
+
+		if (!entries.length) return;
+
+		log.message(
+			`Starting ${entries.length > 1 ? `${entries.length} sketches in ${entry}` : magenta(entries[0])}\n`,
+			prefix,
+		);
+
+		if (entries.length > 1) {
+			log.message(
+				`${entries.map((entry) => `- ${magenta(entry)}`).join('\n')}\n`,
+			);
+		}
+
+		const fragmentFilepath = await createFragmentFile(entries, cwd);
+
+		fragmentServer = await startWebSocketServer({
+			cwd,
+		});
+
+		const config = createConfig(
+			entries,
+			fragmentFilepath,
+			{
+				dev: options.development,
+				build: false,
+			},
+			cwd,
+		);
+
+		log.info(`Starting Vite server...`);
+
+		const server = await createServer(
+			mergeConfig(config, {
+				server: {
+					port: options.port,
+					host: true,
+					fs: {
+						strict: false,
+						allow: ['..'],
+					},
+				},
+				define: {
+					__FRAGMENT_PORT__: fragmentServer.port,
+				},
+				plugins: [
+					hotSketchReload({
+						cwd,
+					}),
+					hotShaderReplacement({ cwd, wss: fragmentServer }),
+					save({ cwd, inlineExportDir: options.exportDir }),
+				],
+			}),
+		);
+		await server.listen();
+
+		// line break after logs
+		log.message();
+
+		log.success(
+			`Started in ${prettifyTime(Date.now() - startTime)}\n`,
+			prefix,
+		);
+
+		const { resolvedUrls } = server;
+
+		let urls = [
+			...resolvedUrls.local.map(
+				(url) => `${bold('Local')}:   ${bold(cyan(url))}`,
+			),
+			...resolvedUrls.network.map(
+				(url) => `${bold('Network')}: ${bold(cyan(url))}`,
+			),
+		];
+		p.note(urls.join(`\n`));
+
+		// line break before fragment logs
+		log.message();
+
+		return server;
+	} catch (error) {
+		// line break before error
+		log.message();
+		log.error(`Error\n`, prefix);
+		console.error(error);
+	}
+}

package/src/cli/templates/blank/index.js

@@ -0,0 +1,33 @@
+export let props = {};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let init = ({ canvas, width, height, pixelRatio }) => {};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @param {number} params.time
+ * @param {number} params.deltaTime
+ * @param {number} params.frame
+ * @param {number} params.playhead
+ * @param {number} params.playcount
+ */
+export let update = ({ width, height, time, deltaTime }) => {};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let resize = ({ width, height, pixelRatio }) => {};

package/src/cli/templates/blank/meta.json

@@ -0,0 +1,4 @@
+{
+	"name": "blank",
+	"description": "An empty sketch"
+}

package/src/cli/templates/default/index.js

@@ -0,0 +1,39 @@
+export let props = {};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {CanvasRenderingContext2D} params.context
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let init = ({ canvas, context, width, height }) => {};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {CanvasRenderingContext2D} params.context
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @param {number} params.time
+ * @param {number} params.deltaTime
+ * @param {number} params.frame
+ * @param {number} params.playhead
+ * @param {number} params.playcount
+ */
+export let update = ({ context, width, height, time, deltaTime }) => {
+	context.clearRect(0, 0, width, height);
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let resize = ({ width, height }) => {};
+
+export let rendering = '2d';

package/src/cli/templates/default/meta.json

@@ -0,0 +1,5 @@
+{
+	"name": "2d",
+	"description": "An empty sketch with a CanvasRenderingContext2D",
+	"isDefault": true
+}

package/src/cli/templates/fragment-gl/index.js

@@ -0,0 +1,37 @@
+import fragmentShader from './fragment.fs';
+
+let uniforms = {
+	uTime: { value: 0, type: 'float' },
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let init = ({ frag }) => {
+	frag.uniforms = uniforms;
+	frag.shader = fragmentShader;
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @param {number} params.time
+ * @param {number} params.deltaTime
+ * @param {number} params.frame
+ * @param {number} params.playhead
+ * @param {number} params.playcount
+ */
+export let update = ({ frag, deltaTime }) => {
+	uniforms.uTime.value += deltaTime;
+
+	frag.render();
+};
+
+export let rendering = 'fragment';

package/src/cli/templates/fragment-gl/meta.json

@@ -0,0 +1,4 @@
+{
+	"name": "fragment-gl",
+	"description": "A fullscreen fragment shader with fragment-gl"
+}

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

@@ -0,0 +1,32 @@
+import p5 from 'p5';
+
+export let props = {};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {p5} params.p
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export function setup({ p, width, height }) {}
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {p5} params.p
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @param {number} params.time
+ * @param {number} params.deltaTime
+ * @param {number} params.frame
+ * @param {number} params.playhead
+ * @param {number} params.playcount
+ */
+export function draw({ p }) {
+	p.background(255, 0, 0);
+}
+
+export let rendering = 'p5';

package/src/cli/templates/p5/meta.json

@@ -0,0 +1,5 @@
+{
+	"name": "p5",
+	"description": "An empty sketch with p5.js",
+	"dependencies": ["p5"]
+}

package/src/cli/templates/p5-webgl/fragment.fs

@@ -0,0 +1,14 @@
+precision mediump float;
+
+#define PI 3.141592653589793
+
+uniform float uTime;
+
+varying vec2 vUv;
+
+void main() {
+    vec2 uv = vUv;
+	vec3 color = vec3(sin(uv.x * PI * 10. + uTime * 10.));
+    
+    gl_FragColor = vec4(color, 1.0);
+}

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

@@ -0,0 +1,67 @@
+import p5 from 'p5';
+import fragmentShader from './fragment.fs';
+
+export let props = {
+	backgroundColor: {
+		value: 'rgb(255, 0, 0)',
+	},
+};
+
+let shader;
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {p5} params.p
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let setup = ({ p, width, height }) => {
+	shader = p.createShader(
+		/* glsl */ `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+uniform mat4 uProjectionMatrix;
+uniform mat4 uModelViewMatrix;
+
+varying vec2 vUv;
+
+void main() {
+    vUv = aTexCoord;
+
+	vec3 transformed = aPosition;
+    transformed.xy = transformed.xy - 1.;
+    
+    gl_Position = vec4(transformed, 1.);
+}
+`,
+		fragmentShader,
+	);
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {p5} params.p
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @param {number} params.time
+ * @param {number} params.deltaTime
+ * @param {number} params.frame
+ * @param {number} params.playhead
+ * @param {number} params.playcount
+ */
+export function draw({ p, width, height, time }) {
+	p.background(props.backgroundColor.value);
+
+	p.shader(shader);
+
+	shader.setUniform('uTime', time / 1000);
+
+	p.rect(0, 0, width, height);
+}
+
+export let rendering = 'p5-webgl';

package/src/cli/templates/p5-webgl/meta.json

@@ -0,0 +1,5 @@
+{
+	"name": "p5-webgl",
+	"description": "An empty sketch with p5.js in WebGL mode",
+	"dependencies": ["p5"]
+}

package/src/cli/templates/three-fragment/fragment.fs

@@ -0,0 +1,10 @@
+precision highp float;
+
+uniform float uTime;
+uniform vec2 uResolution;
+
+varying vec2 vUv;
+
+void main() {
+    gl_FragColor = vec4(1., 0., 0., 1.);
+}