fix(core): rename requestAnimationInInjectionContext to requestAnimationFrameInInjectionContext

Chau Tran · Chau Tran · commit af45513e5e87 · 2023-05-27T16:46:00.000-05:00
diff --git a/libs/angular-three/src/index.ts b/libs/angular-three/src/index.ts
@@ -20,6 +20,5 @@ export * from './lib/utils/instance';
 export * from './lib/utils/is';
 export * from './lib/utils/make';
 export * from './lib/utils/safe-detect-changes';
-export * from './lib/utils/signal';
 export * from './lib/utils/timing';
 export * from './lib/utils/update';
diff --git a/libs/angular-three/src/lib/loader.ts b/libs/angular-three/src/lib/loader.ts
@@ -11,7 +11,7 @@ import type {
 import { assertInjectionContext } from './utils/assert-in-injection-context';
 import { makeObjectGraph } from './utils/make';
 import { safeDetectChanges } from './utils/safe-detect-changes';
-import { requestAnimationInInjectionContext } from './utils/timing';
+import { requestAnimationFrameInInjectionContext } from './utils/timing';
 
 export type NgtLoaderResults<
     TInput extends string | string[] | Record<string, string>,
@@ -96,7 +96,7 @@ export function injectNgtLoader<
         const cdr = inject(ChangeDetectorRef);
         const effector = load(loaderConstructorFactory, inputs, { extensions, onProgress });
 
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             effect(
                 () => {
                     const originalUrls = inputs();
diff --git a/libs/angular-three/src/lib/portal.ts b/libs/angular-three/src/lib/portal.ts
@@ -29,7 +29,7 @@ import type { NgtEventManager, NgtRenderState, NgtSize, NgtState } from './types
 import { getLocalState, prepare } from './utils/instance';
 import { is } from './utils/is';
 import { safeDetectChanges } from './utils/safe-detect-changes';
-import { queueMicrotaskInInjectionContext } from './utils/timing';
+import { requestAnimationFrameInInjectionContext } from './utils/timing';
 import { updateCamera } from './utils/update';
 
 const privateKeys = [
@@ -70,7 +70,7 @@ export class NgtPortalBeforeRender {
 
     constructor() {
         let oldClear: boolean;
-        queueMicrotaskInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             injectBeforeRender(
                 ({ delta, frame }) => {
                     this.beforeRender.emit({ ...this.#portalStore.get(), delta, frame });
diff --git a/libs/angular-three/src/lib/utils/timing.ts b/libs/angular-three/src/lib/utils/timing.ts
@@ -1,23 +1,9 @@
 import { Injector, runInInjectionContext } from '@angular/core';
 import { assertInjectionContext } from './assert-in-injection-context';
 
-export function requestAnimationInInjectionContext(cb: () => void, injector?: Injector) {
-    injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
+export function requestAnimationFrameInInjectionContext(cb: () => void, injector?: Injector) {
+    injector = assertInjectionContext(requestAnimationFrameInInjectionContext, injector);
     return requestAnimationFrame(() => {
         return runInInjectionContext(injector!, cb);
     });
 }
-
-export function queueMicrotaskInInjectionContext(cb: () => void, injector?: Injector) {
-    injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
-    return queueMicrotask(() => {
-        return runInInjectionContext(injector!, cb);
-    });
-}
-
-export function queueMacrotaskInInjectionContext(cb: () => void, injector?: Injector) {
-    injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
-    return setTimeout(() => {
-        return runInInjectionContext(injector!, cb);
-    });
-}
diff --git a/libs/cannon/src/physics.ts b/libs/cannon/src/physics.ts
@@ -22,7 +22,7 @@ import {
     NgtSignalStore,
     NgtStore,
     injectBeforeRender,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
     type NgtRenderState,
 } from 'angular-three';
 import * as THREE from 'three';
@@ -203,7 +203,7 @@ export class NgtcPhysics extends NgtSignalStore<NgtcPhysicsState> {
             stepSize: 1 / 60,
             tolerance: 0.001,
         });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#connectWorker();
             this.#updateWorkerProp('axisIndex');
             this.#updateWorkerProp('broadphase');
diff --git a/libs/postprocessing/effects/src/lut/lut.ts b/libs/postprocessing/effects/src/lut/lut.ts
@@ -1,5 +1,11 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, computed, effect, inject } from '@angular/core';
-import { NgtArgs, NgtSignalStore, NgtStore, injectNgtRef, requestAnimationInInjectionContext } from 'angular-three';
+import {
+    NgtArgs,
+    NgtSignalStore,
+    NgtStore,
+    injectNgtRef,
+    requestAnimationFrameInInjectionContext,
+} from 'angular-three';
 import { BlendFunction, LUT3DEffect } from 'postprocessing';
 
 export interface NgtpLUTState {
@@ -47,7 +53,7 @@ export class NgtpLUT extends NgtSignalStore<NgtpLUTState> {
 
     constructor() {
         super();
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#setProps();
         });
     }
diff --git a/libs/postprocessing/src/effect-composer.ts b/libs/postprocessing/src/effect-composer.ts
@@ -14,7 +14,7 @@ import {
     extend,
     injectBeforeRender,
     injectNgtRef,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
 } from 'angular-three';
 import { DepthDownsamplingPass, EffectComposer, EffectPass, NormalPass, RenderPass } from 'postprocessing';
 import * as THREE from 'three';
@@ -191,7 +191,7 @@ export class NgtpEffectComposer extends NgtSignalStore<NgtpEffectComposerState>
             multisampling: 8,
             frameBufferType: THREE.HalfFloatType,
         });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#setComposerSize();
             this.#updateEffectPasses();
             this.#setBeforeRender();
diff --git a/libs/postprocessing/src/effect.ts b/libs/postprocessing/src/effect.ts
@@ -5,7 +5,7 @@ import {
     NgtStore,
     getLocalState,
     injectNgtRef,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
 } from 'angular-three';
 import { BlendFunction, Effect } from 'postprocessing';
 
@@ -59,7 +59,7 @@ export abstract class NgtpEffect<T extends Effect> extends NgtSignalStore<{
 
     constructor() {
         super();
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#setBlendMode();
         });
     }
diff --git a/libs/soba/abstractions/src/gizmo-helper/gizmo-viewcube/gizmo-viewcube.ts b/libs/soba/abstractions/src/gizmo-helper/gizmo-viewcube/gizmo-viewcube.ts
@@ -1,6 +1,6 @@
 import { NgFor } from '@angular/common';
 import { Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output } from '@angular/core';
-import { extend, NgtThreeEvent, requestAnimationInInjectionContext } from 'angular-three';
+import { extend, NgtThreeEvent, requestAnimationFrameInInjectionContext } from 'angular-three';
 import { AmbientLight, Group, PointLight } from 'three';
 import { cornerDimensions, corners, edgeDimensions, edges } from './constants';
 import { NgtsGizmoViewcubeEdgeCube } from './gizmo-viewcube-edge';
@@ -47,7 +47,7 @@ export class NgtsGizmoViewcube extends NgtsGizmoViewcubeInputs {
 
     constructor() {
         super();
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             if (this.clicked.observed) {
                 this.set({ clickEmitter: this.clicked });
             }
diff --git a/libs/soba/abstractions/src/line/line.ts b/libs/soba/abstractions/src/line/line.ts
@@ -1,5 +1,5 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, computed, effect, inject } from '@angular/core';
-import { NgtArgs, NgtStore, injectNgtRef, requestAnimationInInjectionContext } from 'angular-three';
+import { NgtArgs, NgtStore, injectNgtRef, requestAnimationFrameInInjectionContext } from 'angular-three';
 import * as THREE from 'three';
 import { Line2, LineGeometry, LineMaterial, LineSegments2, LineSegmentsGeometry } from 'three-stdlib';
 import { NgtsLineInputs, type NgtsLineState } from './line-input';
@@ -122,7 +122,7 @@ export class NgtsLine extends NgtsLineInputs {
     constructor() {
         super();
         this.set({ segments: false });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#disposeGeometry();
             this.#computeLineDistances();
         });
diff --git a/libs/soba/cameras/src/camera/camera.ts b/libs/soba/cameras/src/camera/camera.ts
@@ -3,7 +3,7 @@ import {
     injectNgtRef,
     NgtSignalStore,
     NgtStore,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
     type NgtCamera,
 } from 'angular-three';
 import { injectNgtsFBO } from 'angular-three-soba/misc';
@@ -46,7 +46,7 @@ export abstract class NgtsCamera<TCamera extends NgtCamera> extends NgtSignalSto
 
     constructor() {
         super({ resolution: 256, frames: Infinity, makeDefault: false, manual: false });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#setDefaultCamera();
             this.#updateProjectionMatrix();
         });
diff --git a/libs/soba/performance/src/instances/instance.ts b/libs/soba/performance/src/instances/instance.ts
@@ -1,5 +1,5 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component, effect, inject } from '@angular/core';
-import { extend, injectNgtRef, requestAnimationInInjectionContext } from 'angular-three';
+import { extend, injectNgtRef, requestAnimationFrameInInjectionContext } from 'angular-three';
 import { NGTS_INSTANCES_API } from './instances';
 import { PositionMesh } from './position-mesh';
 
@@ -25,7 +25,7 @@ export class NgtsInstance {
     protected readonly instancesApi = inject(NGTS_INSTANCES_API);
 
     constructor() {
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             effect((onCleanup) => {
                 onCleanup(this.instancesApi().subscribe(this.positionMeshRef));
             });
diff --git a/libs/soba/performance/src/instances/instances.ts b/libs/soba/performance/src/instances/instances.ts
@@ -16,7 +16,7 @@ import {
     extend,
     injectBeforeRender,
     injectNgtRef,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
 } from 'angular-three';
 import * as THREE from 'three';
 import { InstancedBufferAttribute, InstancedMesh } from 'three';
@@ -126,7 +126,7 @@ export class NgtsInstances extends NgtSignalStore<NgtsInstancesState> {
 
     constructor() {
         super({ limit: 1000, frames: Infinity });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#checkUpdate();
             this.#setBeforeRender();
         });
diff --git a/libs/soba/staging/src/accumulative-shadows/accumulative-shadows.ts b/libs/soba/staging/src/accumulative-shadows/accumulative-shadows.ts
@@ -16,7 +16,7 @@ import {
     getLocalState,
     injectBeforeRender,
     injectNgtRef,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
     type NgtGroup,
 } from 'angular-three';
 import { SoftShadowMaterial, SoftShadowMaterialInputs } from 'angular-three-soba/shaders';
@@ -257,7 +257,7 @@ export class NgtsAccumulativeShadows extends NgtSignalStore<NgtsAccumulativeShad
             toneMapped: true,
             temporal: false,
         });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#configure();
             this.#resetAndUpdate();
         });
diff --git a/libs/soba/staging/src/accumulative-shadows/randomized-lights.ts b/libs/soba/staging/src/accumulative-shadows/randomized-lights.ts
@@ -5,7 +5,7 @@ import {
     NgtSignalStore,
     extend,
     injectNgtRef,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
     type NgtGroup,
 } from 'angular-three';
 import * as THREE from 'three';
@@ -206,7 +206,7 @@ export class NgtsRandomizedLights extends NgtSignalStore<NgtsRandomizedLightsSta
             intensity: 1,
             ambient: 0.5,
         });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#updateLightsMap();
         });
     }
diff --git a/libs/soba/staging/src/bounds/bounds.ts b/libs/soba/staging/src/bounds/bounds.ts
@@ -18,7 +18,7 @@ import {
     is,
     NgtSignalStore,
     NgtStore,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
     type NgtRenderState,
 } from 'angular-three';
 import * as THREE from 'three';
@@ -283,7 +283,7 @@ export class NgtsBounds extends NgtSignalStore<NgtsBoundsState> {
     constructor() {
         super({ damping: 6, fit: false, clip: false, observe: false, margin: 1.2, eps: 0.01 });
         this.#preventDragHijacking();
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#scalePointer();
             injectBeforeRender(this.#onBeforeRender.bind(this));
         });
diff --git a/libs/soba/staging/src/caustics/caustisc.ts b/libs/soba/staging/src/caustics/caustisc.ts
@@ -1,6 +1,6 @@
 import { NgIf } from '@angular/common';
 import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, ElementRef, inject, Input } from '@angular/core';
-import { extend, injectNgtRef, NgtSignalStore, NgtStore, requestAnimationInInjectionContext } from 'angular-three';
+import { extend, injectNgtRef, NgtSignalStore, NgtStore, requestAnimationFrameInInjectionContext } from 'angular-three';
 import { NgtsEdges } from 'angular-three-soba/abstractions';
 import { injectNgtsFBO } from 'angular-three-soba/misc';
 import { CausticsMaterial, CausticsProjectionMaterial } from 'angular-three-soba/shaders';
@@ -225,7 +225,7 @@ export class NgtsCaustics extends NgtSignalStore<NgtsCausticsState> {
             resolution: 2024,
             lightSource: [5, 5, 5],
         });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#updateWorldMatrix();
             this.#setBeforeRender();
         });
diff --git a/libs/soba/staging/src/environment/environment-cube.ts b/libs/soba/staging/src/environment/environment-cube.ts
@@ -1,5 +1,5 @@
 import { Directive, Input, computed, effect, inject } from '@angular/core';
-import { NgtStore, requestAnimationInInjectionContext } from 'angular-three';
+import { NgtStore, requestAnimationFrameInInjectionContext } from 'angular-three';
 import { NgtsEnvironmentInput } from './environment-input';
 import { injectNgtsEnvironment, setEnvProps } from './utils';
 
@@ -18,7 +18,7 @@ export class NgtsEnvironmentCube {
 
     constructor() {
         this.environmentInput.patch({ background: false });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#setEnvProps();
         });
     }
diff --git a/libs/soba/staging/src/environment/environment-map.ts b/libs/soba/staging/src/environment/environment-map.ts
@@ -1,5 +1,5 @@
 import { Directive, Input, computed, effect, inject } from '@angular/core';
-import { NgtStore, requestAnimationInInjectionContext } from 'angular-three';
+import { NgtStore, requestAnimationFrameInInjectionContext } from 'angular-three';
 import { NgtsEnvironmentInput } from './environment-input';
 import { setEnvProps } from './utils';
 
@@ -21,7 +21,7 @@ export class NgtsEnvironmentMap {
 
     constructor() {
         this.environmentInput.patch({ background: false });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#setEnvProps();
         });
     }
diff --git a/libs/soba/staging/src/environment/environment-portal.ts b/libs/soba/staging/src/environment/environment-portal.ts
@@ -10,7 +10,7 @@ import {
     NgtRenderState,
     NgtStore,
     prepare,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
 } from 'angular-three';
 import * as THREE from 'three';
 import { CubeCamera } from 'three';
@@ -77,7 +77,7 @@ export class NgtsEnvironmentPortal {
             background: false,
             preset: undefined,
         });
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             this.#setEnvProps();
         });
         injectBeforeRender(this.#onBeforeRender.bind(this, 1));
diff --git a/libs/soba/staging/src/spot-light/spot-light-shadow-mesh.ts b/libs/soba/staging/src/spot-light/spot-light-shadow-mesh.ts
@@ -15,7 +15,7 @@ import {
     extend,
     injectBeforeRender,
     injectNgtRef,
-    requestAnimationInInjectionContext,
+    requestAnimationFrameInInjectionContext,
 } from 'angular-three';
 import * as THREE from 'three';
 import { Mesh, MeshBasicMaterial, PlaneGeometry } from 'three';
@@ -40,7 +40,7 @@ function injectShadowMeshCommon(
         const pos = new THREE.Vector3();
         const dir = new THREE.Vector3();
 
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             effect(() => {
                 const spotLight = spotLightRef.nativeElement;
                 if (!spotLight) return;
@@ -111,7 +111,7 @@ export class NgtsSpotLightShadowMeshNoShader {
     constructor() {
         this.shadowMeshInput.patch({ distance: 0.4, alphaTest: 0.5, width: 512, height: 512, scale: 1 });
 
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             effect(() => {
                 const map = this.shadowMeshInput.shadowMeshMap();
                 if (map) {
@@ -218,7 +218,7 @@ export class NgtsSpotLightShadowMeshShader {
             }
         });
 
-        requestAnimationInInjectionContext(() => {
+        requestAnimationFrameInInjectionContext(() => {
             effect(() => {
                 const map = this.shadowMeshInput.shadowMeshMap();
                 if (map) {
