refactor(core): use DebugNode instead of getDebugNode

Author: nartc

libs/core/src/lib/renderer/index.ts

@@ -1,10 +1,10 @@
 import { DOCUMENT } from '@angular/common';
 import {
+	DebugNode,
 	Injectable,
 	Renderer2,
 	RendererFactory2,
 	RendererType2,
-	getDebugNode,
 	inject,
 	makeEnvironmentProviders,
 	untracked,
@@ -99,7 +99,12 @@ export class NgtRenderer implements Renderer2 {
 		if (this.isRoot) {
 			this.isRoot = false;
 			const node = createNode('three', this.rootStore.snapshot.scene, this.document);
-			node.__ngt_renderer__[NgtRendererClassId.injectorFactory] = () => getDebugNode(element)?.injector;
+			node.__ngt_renderer__[NgtRendererClassId.debugNodeFactory] = () => {
+				if (!node.__ngt_renderer__[NgtRendererClassId.debugNode]) {
+					node.__ngt_renderer__[NgtRendererClassId.debugNode] = new DebugNode(element);
+				}
+				return node.__ngt_renderer__[NgtRendererClassId.debugNode];
+			};
 			return node;
 		}
 
@@ -521,13 +526,15 @@ export class NgtRenderer implements Renderer2 {
 		}
 
 		if (rS[NgtRendererClassId.type] === 'comment') {
-			rS[NgtRendererClassId.injectorFactory] = null!;
+			rS[NgtRendererClassId.debugNode] = null!;
+			rS[NgtRendererClassId.debugNodeFactory] = null!;
 			delete (node as NgtAnyRecord)[SPECIAL_INTERNAL_ADD_COMMENT];
 			this.removeCommentNode(node, this.argsCommentNodes);
 		}
 
 		if (rS[NgtRendererClassId.type] === 'portal') {
-			rS[NgtRendererClassId.injectorFactory] = null!;
+			rS[NgtRendererClassId.debugNode] = null!;
+			rS[NgtRendererClassId.debugNodeFactory] = null!;
 			this.removeCommentNode(node, this.portalCommentsNodes);
 		}
 
@@ -563,7 +570,7 @@ export class NgtRenderer implements Renderer2 {
 	}
 
 	private processPortalContainer(portal: NgtRendererNode) {
-		const injector = portal.__ngt_renderer__[NgtRendererClassId.injectorFactory]?.();
+		const injector = portal.__ngt_renderer__[NgtRendererClassId.debugNodeFactory]?.()?.injector;
 		if (!injector) return;
 
 		const portalStore = injector.get(NGT_STORE, null);
@@ -608,7 +615,7 @@ export class NgtRenderer implements Renderer2 {
 				i--;
 				continue;
 			}
-			const injector = comment.__ngt_renderer__[NgtRendererClassId.injectorFactory]();
+			const injector = comment.__ngt_renderer__[NgtRendererClassId.debugNodeFactory]?.()?.injector;
 			if (!injector) {
 				i--;
 				continue;
@@ -629,41 +636,6 @@ export class NgtRenderer implements Renderer2 {
 		return directive;
 	}
 
-	private tryGetPortalStore() {
-		let store: NgtSignalStore<NgtState> | undefined;
-		const destroyed = [];
-		// we only care about the portal states because NgtStore only differs per Portal
-		let i = this.portalCommentsNodes.length - 1;
-		while (i >= 0) {
-			// loop through the portal state backwards to find the closest NgtStore
-			const portal = this.portalCommentsNodes[i];
-			if (portal.__ngt_renderer__[NgtRendererClassId.destroyed]) {
-				destroyed.push(i);
-				i--;
-				continue;
-			}
-
-			const injector = portal.__ngt_renderer__[NgtRendererClassId.injectorFactory]();
-			if (!injector) {
-				i--;
-				continue;
-			}
-			const instance = injector.get(NGT_STORE, null);
-			// only the instance with previousRoot should pass
-			if (instance && instance.get('previousRoot')) {
-				store = instance;
-				break;
-			}
-			i--;
-		}
-
-		destroyed.forEach((index) => {
-			this.portalCommentsNodes.splice(index, 1);
-		});
-
-		return store || this.rootStore;
-	}
-
 	createText = this.delegate.createText.bind(this.delegate);
 	destroy = this.delegate.destroy.bind(this.delegate);
 	destroyNode: ((node: any) => void) | null = null;

libs/core/src/lib/renderer/state.ts

@@ -1,4 +1,4 @@
-import { Injector, getDebugNode } from '@angular/core';
+import { DebugNode } from '@angular/core';
 import { NgtAnyRecord } from '../types';
 import { NgtRendererClassId } from './utils';
 
@@ -9,7 +9,8 @@ export type NgtRendererState = [
 	destroyed: boolean,
 	rawValue: any,
 	portalContainer: NgtRendererNode,
-	injectorFactory: () => Injector | undefined,
+	debugNode: DebugNode | undefined,
+	debugNodeFactory: () => DebugNode | undefined,
 ];
 
 export interface NgtRendererNode {
@@ -18,7 +19,7 @@ export interface NgtRendererNode {
 }
 
 export function createNode(type: NgtRendererState[NgtRendererClassId.type], node: NgtAnyRecord, document: Document) {
-	const state = [type, null, [], false, undefined!, undefined!, undefined!] as NgtRendererState;
+	const state = [type, null, [], false, undefined!, undefined!, undefined!, undefined!] as NgtRendererState;
 
 	const rendererNode = Object.assign(node, { __ngt_renderer__: state });
 
@@ -28,7 +29,12 @@ export function createNode(type: NgtRendererState[NgtRendererClassId.type], node
 	// NOTE: assign injectorFactory on non-three type since
 	// rendererNode is an instance of DOM Node
 	if (state[NgtRendererClassId.type] !== 'three') {
-		state[NgtRendererClassId.injectorFactory] = () => getDebugNode(rendererNode)?.injector;
+		state[NgtRendererClassId.debugNodeFactory] = () => {
+			if (!state[NgtRendererClassId.debugNode]) {
+				state[NgtRendererClassId.debugNode] = new DebugNode(rendererNode as unknown as Node);
+			}
+			return state[NgtRendererClassId.debugNode];
+		};
 	}
 
 	return rendererNode;

libs/core/src/lib/renderer/utils.ts

@@ -14,7 +14,8 @@ export const enum NgtRendererClassId {
 	destroyed,
 	rawValue,
 	portalContainer,
-	injectorFactory,
+	debugNode,
+	debugNodeFactory,
 }
 
 export function kebabToPascal(str: string): string {

libs/core/src/lib/store.ts

@@ -1,4 +1,3 @@
-import { DOCUMENT } from '@angular/common';
 import { ElementRef, InjectOptions, InjectionToken, effect, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Clock, Vector2, Vector3 } from 'three';
@@ -10,14 +9,6 @@ import { NgtSignalStore, signalStore } from './utils/signal-store';
 import { updateCamera } from './utils/update';
 
 function storeFactory(previousStore: NgtSignalStore<NgtState> | null) {
-	const document = inject(DOCUMENT);
-	const window = document.defaultView;
-
-	if (!window) {
-		// TODO: revisit this when we need to support multiple platforms
-		throw new Error(`[NGT] Window is not available.`);
-	}
-
 	const loop = injectLoop();
 
 	// NOTE: using Subject because we do not care about late-subscribers