feat(core): expose "state" as signal readonly

Author: Chau Tran

libs/angular-three/src/lib/canvas.ts

@@ -198,11 +198,10 @@ export class NgtCanvas extends NgtSignalStore<NgtCanvasInputs> implements OnInit
 
         if (width > 0 && height > 0) {
             if (!this.#store.isInit) this.#store.init();
-            const inputs = this.select();
             this.#resizeRef = this.#zone.run(() =>
                 effect(
                     () => {
-                        const canvasInputs = inputs();
+                        const canvasInputs = this.state();
                         this.#zone.runOutsideAngular(() => {
                             this.#store.configure(
                                 { ...canvasInputs, size: { width, height, top, left } },

libs/angular-three/src/lib/portal.ts

@@ -20,6 +20,7 @@ import {
     type OnInit,
 } from '@angular/core';
 import * as THREE from 'three';
+import { injectBeforeRender } from './di/before-render';
 import { injectNgtRef } from './di/ref';
 import { SPECIAL_INTERNAL_ADD_COMMENT } from './renderer/utils';
 import { NgtSignalStore } from './stores/signal.store';
@@ -28,6 +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 { updateCamera } from './utils/update';
 
 const privateKeys = [
@@ -57,7 +59,7 @@ export interface NgtPortalInputs {
 }
 
 @Directive({ selector: '[ngtPortalBeforeRender]', standalone: true })
-export class NgtPortalBeforeRender implements OnInit {
+export class NgtPortalBeforeRender {
     readonly #portalStore = inject(NgtStore);
 
     @Input() renderPriority = 1;
@@ -66,36 +68,29 @@ export class NgtPortalBeforeRender implements OnInit {
 
     @Output() beforeRender = new EventEmitter<NgtRenderState>();
 
-    #subscription?: () => void;
-
     constructor() {
-        inject(DestroyRef).onDestroy(() => {
-            this.#subscription?.();
-        });
-    }
-
-    ngOnInit() {
         let oldClear: boolean;
-        this.#subscription = this.#portalStore.get('internal').subscribe(
-            ({ delta, frame }) => {
-                this.beforeRender.emit({ ...this.#portalStore.get(), delta, frame });
-                const { gl, scene, camera } = this.#portalStore.get();
-                oldClear = gl.autoClear;
-                if (this.renderPriority === 1) {
-                    // clear scene and render with default
-                    gl.autoClear = true;
-                    gl.render(this.parentScene, this.parentCamera);
-                }
-                // disable cleaning
-                gl.autoClear = false;
-                gl.clearDepth();
-                gl.render(scene, camera);
-                // restore
-                gl.autoClear = oldClear;
-            },
-            this.renderPriority,
-            this.#portalStore
-        );
+        queueMicrotaskInInjectionContext(() => {
+            injectBeforeRender(
+                ({ delta, frame }) => {
+                    this.beforeRender.emit({ ...this.#portalStore.get(), delta, frame });
+                    const { gl, scene, camera } = this.#portalStore.get();
+                    oldClear = gl.autoClear;
+                    if (this.renderPriority === 1) {
+                        // clear scene and render with default
+                        gl.autoClear = true;
+                        gl.render(this.parentScene, this.parentCamera);
+                    }
+                    // disable cleaning
+                    gl.autoClear = false;
+                    gl.clearDepth();
+                    gl.render(scene, camera);
+                    // restore
+                    gl.autoClear = oldClear;
+                },
+                { priority: this.renderPriority }
+            );
+        });
     }
 }
 
@@ -133,7 +128,7 @@ export class NgtPortal extends NgtSignalStore<NgtPortalInputs> implements OnInit
         this.set({ container });
     }
 
-    @Input() set state(state: NgtPortalInputs['state']) {
+    @Input() set portalState(state: NgtPortalInputs['state']) {
         this.set({ state });
     }
 

libs/angular-three/src/lib/stores/signal.store.ts

@@ -17,6 +17,7 @@ const STORE_COMPUTED_KEY = '__ngt_store_computed__' as const;
 export class NgtSignalStore<TState extends object> {
     readonly #state: WritableSignal<TState>;
     readonly #computedCache = new Map();
+    readonly state: Signal<TState>;
 
     constructor(
         @Optional()
@@ -25,6 +26,7 @@ export class NgtSignalStore<TState extends object> {
     ) {
         initialState ??= {};
         this.#state = createSignal(Object.assign(initialState, { __ngt_dummy_state__: Date.now() }) as TState);
+        this.state = this.#state.asReadonly();
     }
 
     select<
@@ -53,12 +55,12 @@ export class NgtSignalStore<TState extends object> {
     select<TKey extends keyof TState>(key: TKey, options?: CreateComputedOptions<TState[TKey]>): Signal<TState[TKey]>;
     select(options?: CreateComputedOptions<TState>): Signal<TState>;
     select(...keysAndOptions: any[]) {
-        if (keysAndOptions.length === 0) return this.#state.asReadonly();
+        if (keysAndOptions.length === 0) return this.state;
         if (keysAndOptions.length === 1 && typeof keysAndOptions[0] === 'object') {
             if (!this.#computedCache.has(STORE_COMPUTED_KEY)) {
                 this.#computedCache.set(
                     STORE_COMPUTED_KEY,
-                    computed(() => this.#state(), keysAndOptions as CreateComputedOptions<TState>)
+                    computed(this.state, keysAndOptions as CreateComputedOptions<TState>)
                 );
                 return this.#computedCache.get(STORE_COMPUTED_KEY)!;
             }
@@ -70,10 +72,7 @@ export class NgtSignalStore<TState extends object> {
         if (!this.#computedCache.has(joinedKeys)) {
             this.#computedCache.set(
                 joinedKeys,
-                computed(() => {
-                    const state = this.#state();
-                    return keys.reduce((value, key) => (value as NgtAnyRecord)[key], state);
-                }, options)
+                computed(() => keys.reduce((value, key) => (value as NgtAnyRecord)[key], this.state()), options)
             );
         }
 
@@ -95,7 +94,7 @@ export class NgtSignalStore<TState extends object> {
     get<TKey extends keyof TState>(key: TKey): TState[TKey];
     get(): TState;
     get(...keys: string[]) {
-        const state = untracked(this.#state);
+        const state = untracked(this.state);
         if (keys.length === 0) return state;
         return keys.reduce((value, key) => (value as NgtAnyRecord)[key], state);
     }

libs/angular-three/src/lib/stores/store.ts

@@ -457,13 +457,7 @@ export class NgtStore extends NgtSignalStore<NgtState> {
     }
 
     #invalidate() {
-        const state = this.select();
-        effect(
-            () => {
-                state().invalidate();
-            },
-            { injector: this.#injector }
-        );
+        effect(() => void this.state().invalidate(), { injector: this.#injector });
     }
 }
 

libs/postprocessing/effects/src/ssao/ssao.ts

@@ -122,10 +122,8 @@ export class NgtpSSAO extends NgtSignalStore<NgtpSSAOState> {
 
     readonly #effectComposerApi = inject(NGTP_EFFECT_COMPOSER_API);
 
-    readonly #state = this.select();
-
     readonly effect = computed(() => {
-        const state = this.#state();
+        const state = this.state();
         const { camera, normalPass, downSamplingPass, resolutionScale } = this.#effectComposerApi();
 
         if (normalPass === null && downSamplingPass === null) {

libs/soba/abstractions/src/text/text.ts

@@ -216,8 +216,6 @@ export class NgtsText extends NgtSignalStore<NgtsTextState> {
 
     readonly #store = inject(NgtStore);
 
-    readonly state = this.select();
-
     constructor() {
         super({ fontSize: 1, sdfGlyphSize: 64, anchorX: 'center', anchorY: 'middle' });
         inject(DestroyRef).onDestroy(() => {
@@ -240,9 +238,8 @@ export class NgtsText extends NgtSignalStore<NgtsTextState> {
     }
 
     #syncText() {
-        const state = this.select();
         effect(() => {
-            state();
+            this.state();
             const invalidate = this.#store.get('invalidate');
             this.troikaText.sync(() => {
                 invalidate();

libs/soba/staging/src/accumulative-shadows/accumulative-shadows.ts

@@ -286,7 +286,7 @@ export class NgtsAccumulativeShadows extends NgtSignalStore<NgtsAccumulativeShad
 
     #resetAndUpdate() {
         const trigger = computed(() => ({
-            state: this.select()(),
+            state: this.state(),
             objects: getLocalState(this.#store.get('scene')).objects(),
             mesh: this.meshRef.nativeElement,
         }));

libs/soba/staging/src/caustics/caustisc.ts

@@ -236,7 +236,7 @@ export class NgtsCaustics extends NgtSignalStore<NgtsCausticsState> {
             sceneChildren: this.sceneRef.children()(),
             caustics: this.causticsRef.nativeElement,
             causticsChildren: this.causticsRef.children()(),
-            state: this.select()(),
+            state: this.state(),
         }));
 
         effect(() => {