fragment-tools 0.1.13 → 0.1.14

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

@@ -1,12 +1,12 @@
-import { WebGLRenderer, Scene } from "three";
-import { Texture, fragment } from "@fragment/lib/gl";
-import { client } from "@fragment/client";
-import { getShaderPath } from "../utils/glsl.utils";
-import { clearError } from "../stores/errors";
+import { WebGLRenderer, Scene } from 'three';
+import { Texture, fragment } from '@fragment/lib/gl';
+import { client } from '@fragment/client';
+import { getShaderPath } from '../utils/glsl.utils';
+import { clearError } from '../stores/errors';
 
 let renderer;
 let previews = [];
-let fragmentShader = /* glsl */`
+let fragmentShader = /* glsl */ `
     precision highp float;
     uniform sampler2D uSampler;
     varying vec2 vUv;
@@ -18,111 +18,153 @@ let fragmentShader = /* glsl */`
 `;
 
 export let init = ({ canvas }) => {
-    renderer = new WebGLRenderer({ antialias: true });
+	renderer = new WebGLRenderer({ antialias: true });
 
-    return {
-        renderer,
-    };
+	const render = renderer.render;
+
+	renderer.render = (scene, camera) => {
+		handleHotShaderUpdate(scene);
+
+		render.call(renderer, scene, camera);
+	};
+
+	return {
+		renderer,
+	};
 };
 
 export let onMountPreview = ({ id, canvas, width, height, pixelRatio }) => {
-    let { gl, render, resize, uniforms, destroy } = fragment({
-        canvas,
-        shader: fragmentShader,
-        uniforms: {
-            uSampler: { value: null, type: "sampler2D" },
-        },
-    });
-
-    let texture = new Texture(gl, {
-        image: renderer.domElement,
-    });
-
-    uniforms.uSampler.value = texture;
-
-    let scene = new Scene();
-
-    previews.push({
-        id,
-        scene,
-        texture,
-        render,
-        resize,
-        destroy,
-    });
-
-    return {
-        scene,
-        renderer,
-    };
+	let { gl, render, resize, uniforms, destroy } = fragment({
+		canvas,
+		shader: fragmentShader,
+		uniforms: {
+			uSampler: { value: null, type: 'sampler2D' },
+		},
+	});
+
+	let texture = new Texture(gl, {
+		image: renderer.domElement,
+	});
+
+	uniforms.uSampler.value = texture;
+
+	let scene = new Scene();
+
+	previews.push({
+		id,
+		scene,
+		texture,
+		render,
+		resize,
+		destroy,
+		rendered: false,
+	});
+
+	return {
+		scene,
+		renderer,
+	};
 };
 
 export let onDestroyPreview = ({ id, canvas }) => {
-    const previewIndex = previews.findIndex(p => p.id === id);
-    const preview = previews[previewIndex];
+	const previewIndex = previews.findIndex((p) => p.id === id);
+	const preview = previews[previewIndex];
 
-    clearError(renderer.getContext().__uuid);
+	clearError(renderer.getContext().__uuid);
 
-    if (preview) {
-        preview.texture.destroy();
-        preview.destroy();
-        previews.splice(previewIndex, 1);
-    }
+	if (preview) {
+		preview.texture.destroy();
+		preview.destroy();
+		previews.splice(previewIndex, 1);
+	}
 };
 
-export let onAfterUpdatePreview = ({ id }) => {
-    const preview = previews.find(p => p.id === id);
+export let onBeforeUpdatePreview = ({ id }) => {
+	const preview = previews.find((p) => p.id === id);
 
-    if (preview) {
-        preview.texture.needsUpdate = true;
-        preview.render();
-    }
+	if (preview) {
+		preview.rendered = false;
+	}
+};
+
+export let onAfterUpdatePreview = ({ id }) => {
+	const preview = previews.find((p) => p.id === id);
+
+	if (preview) {
+		preview.texture.needsUpdate = true;
+		preview.render();
+		preview.rendered = true;
+	}
+
+	if (
+		previews.every((preview) => preview.rendered) &&
+		_shaderUpdates.length > 0
+	) {
+		clearShaderUpdates();
+	}
 };
 
 export let resize = ({ width, height, pixelRatio }) => {
-    renderer.setPixelRatio(pixelRatio);
-    renderer.setSize(width, height);
+	renderer.setPixelRatio(pixelRatio);
+	renderer.setSize(width, height);
 
-    for (let i = 0; i < previews.length; i++) {
-        const preview = previews[i];
-        preview.resize({ width, height, pixelRatio });
-    }
+	for (let i = 0; i < previews.length; i++) {
+		const preview = previews[i];
+		preview.resize({ width, height, pixelRatio });
+	}
 };
 
 /* HOT SHADER RELOADING */
-client.on('shader-update', (data) => {
-    clearError(renderer.getContext().__uuid);
-    const { filepath, source } = data;
-
-    const scenes = previews.map((preview) => preview.scene);
-    const materials = [];
-
-    scenes.forEach(scene => {
-        scene.traverse((child) => {
-            if (child.material) {
-                const { material } = child;
-
-                if (material.isShaderMaterial || material.isRawShaderMaterial) {
-                    materials.push(material);
-                }
-            }
-        })
-    });
-
-    materials.forEach(material => {
-        const { vertexShader, fragmentShader } = material;
-
-        Object.keys({ vertexShader, fragmentShader }).forEach((key) => {
-            const shader = material[key];
-            const shaderPath = getShaderPath(shader);
-
-            if (shaderPath === filepath) {
-                console.log(`[fragment] shader update ${shaderPath.replace(__CWD__, "")}`);
-                material[key] = source;
-                material.needsUpdate = true;
-            }
-        });
-    });
-
-    
+let _shaderUpdates = [];
+
+function handleHotShaderUpdate(scene) {
+	if (_shaderUpdates.length > 0) {
+		scene.traverse((child) => {
+			if (child.material) {
+				const { material } = child;
+
+				if (material.isShaderMaterial || material.isRawShaderMaterial) {
+					const { vertexShader, fragmentShader } = material;
+
+					Object.keys({ vertexShader, fragmentShader }).forEach(
+						(key) => {
+							const shader = material[key];
+							const shaderPath = getShaderPath(shader);
+							const shaderUpdate = _shaderUpdates.find(
+								(shaderUpdate) =>
+									shaderUpdate.filepath === shaderPath,
+							);
+
+							if (shaderUpdate) {
+								console.log(
+									`[fragment-plugin-hsr] hsr update ${shaderPath.replace(
+										__CWD__,
+										'',
+									)}`,
+								);
+								material[key] = shaderUpdate.source;
+								material.needsUpdate = true;
+							}
+						},
+					);
+				}
+			}
+		});
+	}
+}
+
+function clearShaderUpdates() {
+	_shaderUpdates = [];
+}
+
+if (import.meta.hot) {
+	import.meta.hot.on('sketch-update', (data) => {
+		clearShaderUpdates();
+	});
+}
+
+client.on('shader-update', (shaderUpdates) => {
+	clearError(renderer.getContext().__uuid);
+
+	_shaderUpdates = shaderUpdates;
 });

package/src/client/app/stores/exports.js

@@ -1,28 +1,44 @@
-import { writable } from "svelte/store";
-import { createStore } from "./utils";
+import { writable } from 'svelte/store';
+import { createHookStore, createStore } from './utils';
 
-export const IMAGE_ENCODINGS = ["png", "jpeg", "webp"];
+export const IMAGE_ENCODINGS = ['png', 'jpeg', 'webp'];
 
 export const VIDEO_FORMATS = {
-	FRAMES: "frames",
-	MP4: "mp4",
-	GIF: "gif",
-	WEBM: "webm",
+	FRAMES: 'frames',
+	MP4: 'mp4',
+	GIF: 'gif',
+	WEBM: 'webm',
 };
 
-export const exports = createStore(`exports`, {
-	imageEncoding: IMAGE_ENCODINGS[0],
-	videoFormat: Object.values(VIDEO_FORMATS)[0],
-	pixelsPerInch: 72,
-	framerate: 60,
-	useDuration: true,
-	loopCount: 1,
-	imageQuality: 100,
-	videoQuality: 100,
-}, {
-	persist: !__BUILD__,
-	reset: false,
-});
+export const exports = createStore(
+	`exports`,
+	{
+		imageEncoding: IMAGE_ENCODINGS[0],
+		videoFormat: Object.values(VIDEO_FORMATS)[0],
+		pixelsPerInch: 72,
+		framerate: 60,
+		useDuration: true,
+		loopCount: 1,
+		imageQuality: 100,
+		videoQuality: 100,
+		imageCount: 1,
+	},
+	{
+		persist: !__BUILD__,
+		reset: false,
+	},
+);
 
 export const recording = writable(false);
 export const capturing = writable(false);
+
+export const [beforeCapture, onBeforeCapture, removeBeforeCaptureFrom] =
+	createHookStore('onBeforeCapture');
+export const [afterCapture, onAfterCapture, removeAfterCaptureFrom] =
+	createHookStore('onAfterCapture');
+
+export const [beforeRecord, onBeforeRecord, removeBeforeRecordFrom] =
+	createHookStore('onBeforeRecord');
+
+export const [afterRecord, onAfterRecord, removeAfterRecordFrom] =
+	createHookStore('onAfterRecord');

package/src/client/app/stores/props.js

@@ -1,14 +1,15 @@
-import { writable, get } from "svelte/store";
-import { sketches } from "./sketches";
+import { sketches } from './sketches';
+import { getStore } from './utils';
 
-export const props = writable({});
+export const props = getStore('props', {});
 
 sketches.subscribe((sketches) => {
 	props.update((currentProps) => {
 		Object.keys(sketches).forEach((key) => {
 			const sketch = sketches[key];
 
-			if (sketch) { // sketch can be undefined if failed to load
+			if (sketch) {
+				// sketch can be undefined if failed to load
 				currentProps[key] = reconcile(sketch.props, currentProps[key]);
 			}
 		});
@@ -17,7 +18,7 @@ sketches.subscribe((sketches) => {
 	});
 });
 
-function reconcile(newProps = {}, prevProps = {}) {
+export function reconcile(newProps = {}, prevProps = {}) {
 	Object.keys(newProps).forEach((propKey) => {
 		let newProp = newProps[propKey];
 
@@ -44,3 +45,25 @@ function reconcile(newProps = {}, prevProps = {}) {
 
 	return newProps;
 }
+
+/**
+ * Update prop value based on sketch key and prop key
+ * @param {string} sketchKey
+ * @param {string} propKey
+ * @param {any} newValue
+ */
+export function updateProp(sketchKey, propKey, newValue) {
+	props.update((currentProps) => {
+		const prop = currentProps[sketchKey][propKey];
+
+		if (prop) {
+			prop.value = newValue;
+
+			if (typeof prop.onChange === 'function') {
+				prop.onChange(prop);
+			}
+		}
+
+		return currentProps;
+	});
+}

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

@@ -1,30 +1,37 @@
-import { rendering } from "./rendering";
+import { rendering } from './rendering';
 
 export let renderers = {};
 
 function loadRenderer(renderingMode) {
-	if (__THREE_RENDERER__ && renderingMode === "three") {
-		return import("../renderers/THREERenderer.js");
+	if (renderers[renderingMode]) return renderers[renderingMode];
+
+	if (__THREE_RENDERER__ && renderingMode === 'three') {
+		return import('../renderers/THREERenderer.js');
 	}
 
-	if (__FRAGMENT_RENDERER__ && renderingMode === "fragment") {
-		return import("../renderers/FragmentRenderer.js");
+	if (__FRAGMENT_RENDERER__ && renderingMode === 'fragment') {
+		return import('../renderers/FragmentRenderer.js');
 	}
 
-	if (__P5_RENDERER__ && renderingMode === "p5") {
-		return import("../renderers/P5Renderer.js");
+	if (__P5_RENDERER__ && renderingMode === 'p5') {
+		return import('../renderers/P5Renderer.js');
 	}
 
-	if (__2D_RENDERER__ && renderingMode === "2d") {
-		return import("../renderers/2DRenderer.js");
+	if (__2D_RENDERER__ && renderingMode === '2d') {
+		return import('../renderers/2DRenderer.js');
 	}
 }
 
-export async function findRenderer(renderingMode) {
-	if (renderers[renderingMode]) return renderers[renderingMode];
-
+export async function findRenderer({
+	rendering: renderingMode,
+	renderer: customRenderer,
+}) {
 	// load and save
-	renderers[renderingMode] = await loadRenderer(renderingMode);
+	renderers[renderingMode] = customRenderer
+		? typeof customRenderer === 'function'
+			? await customRenderer()
+			: customRenderer
+		: await loadRenderer(renderingMode);
 
 	// get
 	let renderer = renderers[renderingMode];
@@ -35,7 +42,7 @@ export async function findRenderer(renderingMode) {
 			let r;
 
 			if (!initialized) {
-				if (typeof renderer.init === "function") {
+				if (typeof renderer.init === 'function') {
 					r = renderer.init({
 						canvas: document.createElement('canvas'),
 						pixelRatio: current.pixelRatio,
@@ -47,7 +54,7 @@ export async function findRenderer(renderingMode) {
 
 			initialized = true;
 
-			if (typeof renderer.resize === "function") {
+			if (typeof renderer.resize === 'function') {
 				renderer.resize({
 					width: current.width,
 					height: current.height,

package/src/client/app/stores/sketches.js

@@ -1,6 +1,6 @@
-import { createStore } from "./utils.js";
-import { displayError } from "../stores/errors";
-import { sketches as all, onSketchReload } from "@fragment/sketches";
+import { createStore } from './utils.js';
+import { displayError } from '../stores/errors';
+import { sketches as all } from '@fragment/sketches';
 
 export const sketches = createStore('sketches', {});
 export const sketchesKeys = createStore('sketchesKeys', Object.keys(all));
@@ -16,9 +16,11 @@ async function loadSketch(collection, key) {
 	}
 }
 
-async function loadAll(collection) {
+export async function loadAll(collection) {
 	const keys = [...Object.keys(collection)];
-	const loadedSketches = await Promise.all(keys.map((key) => loadSketch(collection, key)));
+	const loadedSketches = await Promise.all(
+		keys.map((key) => loadSketch(collection, key)),
+	);
 
 	const newSketches = keys.reduce((all, key, index) => {
 		if (loadedSketches[index]) {
@@ -34,7 +36,3 @@ async function loadAll(collection) {
 }
 
 loadAll(all);
-
-onSketchReload(({ sketches }) => {
-	loadAll(sketches);
-});

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

@@ -1,66 +1,123 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
+import { getContext } from '../triggers/shared';
 
 let stores = new Map();
 
 /**
  * Returns the value stored in localStorage for key or return defaultValue if it doesn't exist
- * @param {string} key 
- * @param {any} defaultValue 
- * @param {boolean} override 
+ * @param {string} key
+ * @param {any} defaultValue
+ * @param {boolean} override
  * @returns {any} result
  */
 export function rehydrate(key, defaultValue) {
-    const storedValue = localStorage.getItem(`fragment.${key}`);
+	const storedValue = localStorage.getItem(`fragment.${key}`);
 
-    if (storedValue) {
-        return typeof storedValue === "string" ? JSON.parse(storedValue) : storedValue;
-    }
+	if (storedValue) {
+		return typeof storedValue === 'string'
+			? JSON.parse(storedValue)
+			: storedValue;
+	}
 
-    return defaultValue;
-};
+	return defaultValue;
+}
 
 /**
  * Save value in localStorage
- * @param {string} key 
- * @param {any} value 
+ * @param {string} key
+ * @param {any} value
  */
 export function save(key, value) {
-    localStorage.setItem(`fragment.${key}`, JSON.stringify(value));
-};
+	localStorage.setItem(`fragment.${key}`, JSON.stringify(value));
+}
 
 /**
  * Create store and register it for later usage
- * @param {string} key 
- * @param {any} initialValue 
+ * @param {string} key
+ * @param {any} initialValue
  * @param {object} options
- * @returns {object} store
+ * @returns {import('svelte/store').Writable} store
  */
-export function createStore(key, initialValue, { persist = false, reset = false } = {}) {
-    const value = (persist && !reset) ? rehydrate(key, initialValue) : initialValue;
-    const store = writable(value);
+export function createStore(
+	key,
+	initialValue,
+	{ persist = false, reset = false } = {},
+) {
+	const value =
+		persist && !reset ? rehydrate(key, initialValue) : initialValue;
+	const store = writable(value);
 
-    if (persist) {
-        store.subscribe((current) => {
-            save(key, current);
-        });
-    }
-    
-    stores.set(key, store);
+	if (persist) {
+		store.subscribe((current) => {
+			save(key, current);
+		});
+	}
 
-    return store;
-};
+	stores.set(key, store);
+
+	return store;
+}
 
 /**
  * Get an existing store from key or create it if it doesn't exist yet
- * @param {string} key 
- * @param {any} initialValue 
+ * @param {string} key
+ * @param {any} initialValue
  * @param {object} options
- * @returns {object} store
+ * @returns {import('svelte/store').Writable} store
  */
-export function getStore(key, initialValue, { persist = false, reset = false } = {}) {
-    if (!stores.has(key)) {
-        return createStore(key, initialValue, { persist, reset });
-    }
+export function getStore(
+	key,
+	initialValue,
+	{ persist = false, reset = false } = {},
+) {
+	if (!stores.has(key)) {
+		return createStore(key, initialValue, { persist, reset });
+	}
+
+	return stores.get(key);
+}
+
+/**
+ * Create a new store to register callbacks grouped by context
+ * @param {string} name
+ */
+export function createHookStore(name) {
+	const store = writable(new Map());
+
+	const hook = (fn, { context = getContext() } = {}) => {
+		if (typeof fn !== 'function') {
+			console.warn(`${name} argument must be a function.`);
+		}
+
+		store.update((hooks) => {
+			if (!hooks.has(context)) {
+				hooks.set(context, []);
+			}
+
+			hooks.set(context, [...hooks.get(context), fn]);
+
+			return hooks;
+		});
+
+		return () => {
+			store.update((hooks) => {
+				hooks.set(
+					context,
+					[...hooks.get(context)].filter((hook) => hook !== fn),
+				);
+
+				return hooks;
+			});
+		};
+	};
+
+	const remove = (context) => {
+		store.update((hooks) => {
+			hooks.delete(context);
+
+			return hooks;
+		});
+	};
 
-    return stores.get(key);
-};
+	return [store, hook, remove];
+}