fragment-tools 0.1.13 → 0.1.15

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

@@ -0,0 +1,95 @@
+import * as THREE from 'three';
+import fragmentShader from './fragment.fs';
+
+let camera;
+let uniforms = {
+	uResolution: { value: new THREE.Vector2() },
+	uTime: { value: 0 },
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {THREE.Renderer} params.renderer
+ * @param {THREE.Scene} params.scene
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let init = ({ scene, width, height }) => {
+	camera = new THREE.OrthographicCamera(1, 1, 1, 1, 1, 1000);
+
+	let geometry = new THREE.BufferGeometry();
+	geometry.setAttribute(
+		'position',
+		new THREE.Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3),
+	);
+	geometry.setAttribute(
+		'uv',
+		new THREE.Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2),
+	);
+
+	let mesh = new THREE.Mesh(
+		geometry,
+		new THREE.RawShaderMaterial({
+			vertexShader: `
+        attribute vec3 position;
+        attribute vec2 uv;
+
+        varying vec2 vUv;
+
+        void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.);
+        }
+        `,
+			fragmentShader,
+			uniforms,
+		}),
+	);
+
+	scene.add(mesh);
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {THREE.Renderer} params.renderer
+ * @param {THREE.Scene} params.scene
+ * @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 = ({ renderer, scene, time, deltaTime }) => {
+	uniforms.uTime.value = time;
+
+	renderer.render(scene, camera);
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {THREE.Renderer} params.renderer
+ * @param {THREE.Scene} params.scene
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let resize = ({ width, height }) => {
+	uniforms.uResolution.value.x = width;
+	uniforms.uResolution.value.y = height;
+
+	camera.left = -width * 0.5;
+	camera.right = width * 0.5;
+	camera.top = height * 0.5;
+	camera.bottom = -height * 0.5;
+
+	camera.updateProjectionMatrix();
+};
+
+export let rendering = 'three';

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

@@ -0,0 +1,5 @@
+{
+	"name": "three-fragment",
+	"description": "A fullscreen fragment shader with THREE.js",
+	"dependencies": ["three"]
+}

package/src/cli/templates/three-orthographic/index.js

@@ -0,0 +1,55 @@
+import * as THREE from 'three';
+
+let camera;
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {THREE.Renderer} params.renderer
+ * @param {THREE.Scene} params.scene
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let init = ({ scene, width, height }) => {
+	camera = new THREE.OrthographicCamera(1, 1, 1, 1, 1, 1000);
+	camera.position.z = 1;
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {THREE.Renderer} params.renderer
+ * @param {THREE.Scene} params.scene
+ * @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 = ({ renderer, scene, time, deltaTime }) => {
+	renderer.render(scene, camera);
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {THREE.Renderer} params.renderer
+ * @param {THREE.Scene} params.scene
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let resize = ({ width, height }) => {
+	camera.left = -width * 0.5;
+	camera.right = width * 0.5;
+	camera.top = height * 0.5;
+	camera.bottom = -height * 0.5;
+
+	camera.updateProjectionMatrix();
+};
+
+export let rendering = 'three';

package/src/cli/templates/three-orthographic/meta.json

@@ -0,0 +1,5 @@
+{
+	"name": "three-orthographic",
+	"description": "An empty scene with a THREE.OrthographicCamera",
+	"dependencies": ["three"]
+}

package/src/cli/templates/three-perspective/index.js

@@ -0,0 +1,52 @@
+import * as THREE from 'three';
+
+let camera;
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {THREE.Renderer} params.renderer
+ * @param {THREE.Scene} params.scene
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let init = ({ scene, width, height }) => {
+	camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
+	camera.position.z = 10;
+	camera.lookAt(new THREE.Vector3());
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {THREE.Renderer} params.renderer
+ * @param {THREE.Scene} params.scene
+ * @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 = ({ renderer, scene, time, deltaTime }) => {
+	renderer.render(scene, camera);
+};
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {THREE.Renderer} params.renderer
+ * @param {THREE.Scene} params.scene
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let resize = ({ width, height }) => {
+	camera.aspect = width / height;
+	camera.updateProjectionMatrix();
+};
+
+export let rendering = 'three';

package/src/cli/templates/three-perspective/meta.json

@@ -0,0 +1,5 @@
+{
+	"name": "three-perspective",
+	"description": "An empty scene with a THREE.PerspectiveCamera",
+	"dependencies": ["three"]
+}

package/src/cli/utils.js

@@ -0,0 +1,70 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { isCancel } from '@clack/core';
+import { log } from './log.js';
+
+/** @type {string} */
+export const packageManager = getPackageManager() || 'npm';
+
+/**
+ * From https://github.com/sveltejs/kit/blob/main/packages/create-svelte/utils.js#L56
+ */
+function getPackageManager() {
+	if (!process.env.npm_config_user_agent) {
+		return undefined;
+	}
+	const user_agent = process.env.npm_config_user_agent;
+	const pm_spec = user_agent.split(' ')[0];
+	const separator_pos = pm_spec.lastIndexOf('/');
+	const name = pm_spec.substring(0, separator_pos);
+	return name === 'npminstall' ? 'cnpm' : name;
+}
+
+/**
+ * Create a directory without throwing error if it already exists
+ * @param {string} dir
+ */
+export function mkdirp(dir) {
+	try {
+		fs.mkdirSync(dir, { recursive: true });
+	} catch (e) {
+		if (/** @type {any} */ (e).code === 'EEXIST') return;
+		throw e;
+	}
+}
+
+/** @param {string} path */
+export function file(path) {
+	return fileURLToPath(new URL(`${path}`, import.meta.url).href);
+}
+
+export function handleCancelledPrompt(prompt, prefix) {
+	if (isCancel(prompt)) {
+		log.error(`Cancelled`, prefix);
+		process.exit(1);
+	}
+}
+
+/** @param {number} milliseconds */
+export function prettifyTime(milliseconds) {
+	if (milliseconds > 999) {
+		return (milliseconds / 1000).toFixed(2) + 's';
+	} else {
+		return milliseconds + 'ms';
+	}
+}
+
+/**
+ * Add extension to a string if it doesn't have any
+ * @param {string} filepath
+ * @param {string} ext
+ * @returns {string}
+ */
+export function addExtension(filepath, ext) {
+	if (path.extname(filepath) === '') {
+		return `${filepath}${ext}`;
+	}
+
+	return filepath;
+}

package/src/cli/ws.js

@@ -1,92 +1,101 @@
-import fs from "fs";
-import path from "path";
 import getPort from 'get-port';
-import log from "./log.js";
 import WebSocket, { WebSocketServer } from 'ws';
-import db from "./db.js";
+import { log } from './log.js';
 
-export async function start({
-    port = 1234,
-    cwd = "",
-} = {}) {
-    port = await getPort({ port });
+/**
+ * @param {object} params
+ * @param {number} params.port
+ */
+export async function start({ port = 1234 } = {}) {
+	port = await getPort({ port });
 
-    let wss = new WebSocketServer({ port });
+	let wss = new WebSocketServer({ port });
 
-    wss.on('connection', (socket) => {
-        socket.on('message', (message) => {
-            const json = JSON.parse(message);
-            const { event, data } = json;
-            
-            if (event === "save") {
-                const { key, value } = data;
-                db.save(key, value);
-            }
+	log.info(`Starting WebSocket server...`);
 
-            send(json, {
-                sender: socket
-            });
-        });
+	wss.on('connection', (socket) => {
+		socket.on('message', (message) => {
+			const json = JSON.parse(message);
 
-        send({
-            event: 'start',
-            data: {
-                clientCount: wss.clients.size - 1,
-            },
-        }, {
-            include: socket
-        });
+			send(json, {
+				sender: socket,
+			});
+		});
 
-        send({
-            event: 'client-connect',
-            data: {
-                clientCount: wss.clients.size - 1
-            }
-        }, {
-            exclude: socket,
-        });
+		send(
+			{
+				event: 'start',
+				data: {
+					clientCount: wss.clients.size - 1,
+				},
+			},
+			{
+				include: socket,
+			},
+		);
 
-        socket.on('close', () => {
-            send({
-                event: 'client-disconnect',
-                data: {
-                    clientCount: wss.clients.size - 1
-                }
-            }, {
-                exclude: socket,
-            });
-        });
-    });
+		send(
+			{
+				event: 'client-connect',
+				data: {
+					clientCount: wss.clients.size - 1,
+				},
+			},
+			{
+				exclude: socket,
+			},
+		);
 
-    wss.on('error', (e) => {
-        if (e.code !== 'EADDRINUSE') {
-            console.error(`WebSocket server error:\n${e.stack || e.message}`);
-        }
-    });
+		socket.on('close', () => {
+			send(
+				{
+					event: 'client-disconnect',
+					data: {
+						clientCount: wss.clients.size - 1,
+					},
+				},
+				{
+					exclude: socket,
+				},
+			);
+		});
+	});
 
-    function send(payload, { transform = true, exclude = null, include = null } = {}) {
-        const stringified = transform ? JSON.stringify(payload) : payload;
+	wss.on('error', (e) => {
+		if (e.code !== 'EADDRINUSE') {
+			console.error(`WebSocket server error:\n${e.stack || e.message}`);
+		}
+	});
 
-        wss.clients.forEach((client) => {
-            if (client.readyState === WebSocket.OPEN && (client !== exclude || client === include)) {
-                client.send(stringified);
-            }
-        });
-    }
+	function send(
+		payload,
+		{ transform = true, exclude = null, include = null } = {},
+	) {
+		const stringified = transform ? JSON.stringify(payload) : payload;
 
-    return {
-        port,
-        send,
-        close: () => {
-            return new Promise((resolve, reject) => {
-                wss.close((err) => {
-                    if (err) {
-                        reject(err)
-                    } else {
-                        resolve()
-                    }
-                });
-            });
-        }
-    };
+		wss.clients.forEach((client) => {
+			if (
+				client.readyState === WebSocket.OPEN &&
+				(client !== exclude || client === include)
+			) {
+				client.send(stringified);
+			}
+		});
+	}
+
+	return {
+		port,
+		send,
+		close: () => {
+			return new Promise((resolve, reject) => {
+				wss.close((err) => {
+					if (err) {
+						reject(err);
+					} else {
+						resolve();
+					}
+				});
+			});
+		},
+	};
 }

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/IconCross.svelte

@@ -4,26 +4,26 @@
 </div>
 
 <style>
-.icon-cross {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
+	.icon-cross {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
 
-.icon-cross-side {
-	--size: 10px;
-	position: absolute;
-	top: calc(50% - 1px);
-	left: calc(50% - var(--size) * 0.5);
-	width: var(--size);
-	height: 2px;
+	.icon-cross-side {
+		--size: 10px;
+		position: absolute;
+		top: calc(50% - 1px);
+		left: calc(50% - var(--size) * 0.5);
+		width: var(--size);
+		height: 2px;
 
-	transform: rotate(45deg);
+		transform: rotate(45deg);
 
-	background-color: #551717;
-}
+		background-color: #551717;
+	}
 
-.icon-cross-side:last-child {
-	transform: rotate(-45deg);
-}
+	.icon-cross-side:last-child {
+		transform: rotate(-45deg);
+	}
 </style>