refactor: simplify the use of callback functions

Author: jsulpis

lib/src/hooks/useCompositeEffectPass.ts

@@ -1,4 +1,4 @@
-import { useLifeCycleCallback } from "../internal/useLifeCycleCallback";
+import { useHook } from "../internal/useHook";
 import type {
   CompositeEffectPass,
   EffectPass,
@@ -14,41 +14,33 @@ export function useCompositeEffectPass<U extends Uniforms = Record<string, never
 ): CompositeEffectPass<U> {
   const outputPass = passes.at(-1)!;
 
-  const [beforeRenderCallbacks, onBeforeRender] = useLifeCycleCallback<RenderCallback<any>>();
-  const [afterRenderCallbacks, onAfterRender] = useLifeCycleCallback<RenderCallback<any>>();
-  const [onUpdatedCallbacks, onUpdated] = useLifeCycleCallback<UpdatedCallback<any>>();
-  const [onResizeCallbacks, onResize] =
-    useLifeCycleCallback<(width: number, height: number) => void>();
-  const [onInitCallbacks, onInit] = useLifeCycleCallback<(gl: WebGL2RenderingContext) => void>();
+  const [onBeforeRender, executeBeforeRenderCallbacks] = useHook<RenderCallback<any>>();
+  const [onAfterRender, executeAfterRenderCallbacks] = useHook<RenderCallback<any>>();
+  const [onUpdated, executeUpdateCallbacks] = useHook<UpdatedCallback<any>>();
+  const [onResize, executeResizeCallbacks] = useHook<(width: number, height: number) => void>();
+  const [onInit, executeInitCallbacks] = useHook<(gl: WebGL2RenderingContext) => void>();
 
   function render() {
-    for (const callback of beforeRenderCallbacks) callback({ uniforms: {} });
+    executeBeforeRenderCallbacks({ uniforms });
     for (const pass of passes) pass.render();
-    for (const callback of afterRenderCallbacks) callback({ uniforms: {} });
+    executeAfterRenderCallbacks({ uniforms });
   }
 
   function initialize(gl: WebGL2RenderingContext) {
     for (const pass of passes) {
       pass.initialize(gl);
-
       pass.onUpdated((newUniforms, oldUniforms) => {
-        for (const callback of onUpdatedCallbacks) {
-          callback(newUniforms, oldUniforms);
-        }
+        executeUpdateCallbacks(newUniforms, oldUniforms);
       });
     }
-    for (const callback of onInitCallbacks) {
-      callback(gl);
-    }
+    executeInitCallbacks(gl);
   }
 
   function setSize(size: { width: number; height: number }) {
     for (const pass of passes) {
       pass.setSize(size);
     }
-    for (const callback of onResizeCallbacks) {
-      callback(size.width, size.height);
-    }
+    executeResizeCallbacks(size.width, size.height);
   }
 
   function setTarget(target: RenderTarget | null) {

lib/src/hooks/useRenderPass.ts

@@ -11,7 +11,7 @@ import { setRenderTarget } from "../core/renderTarget";
 import { findUniformName } from "../internal/findName";
 import { useUniforms } from "../internal/useUniforms";
 import { useAttributes } from "../internal/useAttributes";
-import { useLifeCycleCallback } from "../internal/useLifeCycleCallback";
+import { useHook } from "../internal/useHook";
 
 export type RenderPassOptions<U extends Uniforms = Record<string, never>> = {
   target?: RenderTarget | null;
@@ -62,7 +62,7 @@ export function useRenderPass<U extends Uniforms>(
     indexType,
   } = useAttributes(attributes);
 
-  const [initCallbacks, onInit] = useLifeCycleCallback<(gl: WebGL2RenderingContext) => void>();
+  const [onInit, executeInitCallbacks] = useHook<(gl: WebGL2RenderingContext) => void>();
 
   function initialize(gl: WebGL2RenderingContext) {
     _gl = gl;
@@ -76,9 +76,7 @@ export function useRenderPass<U extends Uniforms>(
     initializeUniforms(_gl, _program);
     initializeAttributes(_gl, _program);
 
-    for (const callback of initCallbacks) {
-      callback(_gl);
-    }
+    executeInitCallbacks(_gl);
   }
 
   if (gl) {
@@ -91,8 +89,7 @@ export function useRenderPass<U extends Uniforms>(
 
   const resolutionUniformName = findUniformName(fragment + vertex, "resolution");
 
-  const [resizeCallbacks, onResize] =
-    useLifeCycleCallback<(width: number, height: number) => void>();
+  const [onResize, executeResizeCallbacks] = useHook<(width: number, height: number) => void>();
 
   function setSize(size: { width: number; height: number }) {
     const width = size.width * resolutionScale;
@@ -104,9 +101,7 @@ export function useRenderPass<U extends Uniforms>(
     if (_target != null) {
       _target.setSize(width, height);
     }
-    for (const callback of resizeCallbacks) {
-      callback(width, height);
-    }
+    executeResizeCallbacks(width, height);
   }
 
   function setTarget(target: RenderTarget | null) {
@@ -119,8 +114,8 @@ export function useRenderPass<U extends Uniforms>(
 
   const drawMode = userDrawMode || (vertex.includes("gl_PointSize") ? "POINTS" : "TRIANGLES");
 
-  const [beforeRenderCallbacks, onBeforeRender] = useLifeCycleCallback<RenderCallback<U>>();
-  const [afterRenderCallbacks, onAfterRender] = useLifeCycleCallback<RenderCallback<U>>();
+  const [onBeforeRender, executeBeforeRenderCallbacks] = useHook<RenderCallback<U>>();
+  const [onAfterRender, executeAfterRenderCallbacks] = useHook<RenderCallback<U>>();
 
   function render({ target }: { target?: RenderTarget | null } = {}) {
     if (_gl == undefined) {
@@ -140,19 +135,15 @@ export function useRenderPass<U extends Uniforms>(
     bindVAO();
     setUniforms();
 
-    for (const callback of beforeRenderCallbacks) {
-      callback({ uniforms: getUniformsSnapshot() });
-    }
+    executeBeforeRenderCallbacks({ uniforms: getUniformsSnapshot() });
 
     if (hasIndices) {
       _gl.drawElements(_gl[drawMode], getVertexCount(), indexType, 0);
     } else {
       _gl.drawArrays(_gl[drawMode], 0, getVertexCount());
     }
 
-    for (const callback of afterRenderCallbacks) {
-      callback({ uniforms: getUniformsSnapshot() });
-    }
+    executeAfterRenderCallbacks({ uniforms: getUniformsSnapshot() });
   }
 
   return {

lib/src/hooks/useWebGLCanvas.ts

@@ -8,7 +8,7 @@ import { findUniformName } from "../internal/findName";
 import type { UseLoopOptions } from "./useLoop";
 import { useLoop } from "./useLoop";
 import { isHTMLImageTexture, isHTMLVideoTexture } from "../core/texture";
-import { useLifeCycleCallback } from "../internal/useLifeCycleCallback";
+import { useHook } from "../internal/useHook";
 
 interface Props<U extends Uniforms> extends UseLoopOptions, QuadPassOptions<U> {
   canvas: HTMLCanvasElement | OffscreenCanvas | string;
@@ -111,12 +111,12 @@ export const useWebGLCanvas = <U extends Uniforms>(props: Props<U>) => {
 
   let resizeObserver: ReturnType<typeof useResizeObserver> | null = null;
 
-  const [canvasReadyCallbacks, onCanvasReady] = useLifeCycleCallback();
+  const [onCanvasReady, executeCanvasReadyCallbacks] = useHook();
 
   function resizeCanvas(width: number, height: number) {
     setSize({ width: width * dpr, height: height * dpr });
     if (!isCanvasResized) {
-      for (const callback of canvasReadyCallbacks) callback();
+      executeCanvasReadyCallbacks();
       isCanvasResized = true;
     }
   }

lib/src/internal/useHook.ts

@@ -0,0 +1,15 @@
+export function useHook<C extends (...args: any[]) => any = () => void>() {
+  const callbacks: C[] = [];
+
+  function registerCallback(callback: C) {
+    callbacks.push(callback);
+  }
+
+  function executeCallbacks(...params: Parameters<C>) {
+    for (const callback of callbacks) {
+      callback(...params);
+    }
+  }
+
+  return [registerCallback, executeCallbacks] as const;
+}

lib/src/internal/useLifeCycleCallback.ts

@@ -1,7 +1,7 @@
 import type { DataTextureParams, ImageTextureParams } from "../core/texture";
 import { fillTexture } from "../core/texture";
 import type { Uniforms, UniformValue, UpdatedCallback } from "../types";
-import { useLifeCycleCallback } from "./useLifeCycleCallback";
+import { useHook } from "./useHook";
 
 export function useUniforms<U extends Uniforms>(uniforms: U) {
   type UniformName = Extract<keyof U, string>;
@@ -12,7 +12,7 @@ export function useUniforms<U extends Uniforms>(uniforms: U) {
   let _gl: WebGL2RenderingContext;
   let _program: WebGLProgram;
 
-  const [onUpdatedCallbacks, onUpdated] = useLifeCycleCallback<UpdatedCallback<U>>();
+  const [onUpdated, executeUpdateCallbacks] = useHook<UpdatedCallback<U>>();
 
   const uniformsLocations = new Map<UniformName, WebGLUniformLocation>();
 
@@ -35,7 +35,7 @@ export function useUniforms<U extends Uniforms>(uniforms: U) {
           const oldTarget = getSnapshot(target);
           target[uniform as keyof U] = value;
           const newTarget = getSnapshot(target);
-          for (const callback of onUpdatedCallbacks) callback(newTarget, oldTarget);
+          executeUpdateCallbacks(newTarget, oldTarget);
         }
         return true;
       },