refactor(core): use DOM_PARENT constant for __ngt_dom_parent__

nartc · nartc · commit 800bc6dd3c86 · 2024-10-03T20:56:44.000-07:00
diff --git a/libs/core/src/lib/html.ts b/libs/core/src/lib/html.ts
@@ -10,6 +10,7 @@ import {
 	Type,
 } from '@angular/core';
 import { HTML } from './renderer';
+import { DOM_PARENT } from './renderer/constants';
 import { injectStore } from './store';
 import { NgtAnyRecord } from './types';
 
@@ -42,15 +43,15 @@ export abstract class NgtHTML {
 	constructor() {
 		if (this.domElement === 'gl') {
 			Object.assign(this.host.nativeElement, {
-				__ngt_dom_parent__: this.store.snapshot.gl.domElement.parentElement,
+				[DOM_PARENT]: this.store.snapshot.gl.domElement.parentElement,
 			});
 		} else if (this.domElement) {
-			Object.assign(this.host.nativeElement, { __ngt_dom_parent__: this.domElement });
+			Object.assign(this.host.nativeElement, { [DOM_PARENT]: this.domElement });
 		}
 
 		this.destroyRef.onDestroy(() => {
-			(this.host.nativeElement as NgtAnyRecord)['__ngt_dom_parent__'] = null;
-			delete (this.host.nativeElement as NgtAnyRecord)['__ngt_dom_parent__'];
+			(this.host.nativeElement as NgtAnyRecord)[DOM_PARENT] = null;
+			delete (this.host.nativeElement as NgtAnyRecord)[DOM_PARENT];
 		});
 	}
 }
diff --git a/libs/core/src/lib/renderer/constants.ts b/libs/core/src/lib/renderer/constants.ts
@@ -2,6 +2,7 @@ export const ROUTED_SCENE = '__ngt_renderer_is_routed_scene__';
 export const HTML = '__ngt_renderer_is_html';
 export const NON_ROOT = '__ngt_renderer_is_non_root__';
 export const SPECIAL_INTERNAL_ADD_COMMENT = '__ngt_renderer_add_comment__';
+export const DOM_PARENT = '__ngt_dom_parent__';
 
 export const SPECIAL_DOM_TAG = {
 	NGT_PORTAL: 'ngt-portal',
diff --git a/libs/core/src/lib/renderer/index.ts b/libs/core/src/lib/renderer/index.ts
@@ -12,12 +12,13 @@ import {
 import { NgtArgs } from '../directives/args';
 import { getLocalState, prepare } from '../instance';
 import { NGT_STORE, injectStore, provideStore } from '../store';
-import { NgtAnyRecord, NgtInstanceNode, NgtLocalState, NgtState } from '../types';
+import { NgtAnyRecord, NgtLocalState, NgtState } from '../types';
 import { applyProps } from '../utils/apply-props';
 import { is } from '../utils/is';
-import { NgtSignalStore, signalStore } from '../utils/signal-store';
+import { NgtSignalStore } from '../utils/signal-store';
 import { NgtAnyConstructor, injectCatalogue } from './catalogue';
 import {
+	DOM_PARENT,
 	HTML,
 	NON_ROOT,
 	ROUTED_SCENE,
@@ -122,23 +123,9 @@ export class NgtRenderer implements Renderer2 {
 		}
 
 		if (name === SPECIAL_DOM_TAG.NGT_VALUE) {
-			const instanceStore = signalStore({ parent: null, objects: [], nonObjects: [] });
 			return createNode(
 				'three',
-				Object.assign(
-					{ __ngt_renderer__: { rawValue: undefined } },
-					// NOTE: we assign this manually to a raw value node
-					// because we say it is a 'three' node but we're not using prepare()
-					{
-						__ngt__: {
-							isRaw: true,
-							instanceStore,
-							setParent(parent: NgtInstanceNode) {
-								instanceStore.update({ parent });
-							},
-						},
-					},
-				),
+				prepare({ __ngt_renderer__: { rawValue: undefined } }, { store: this.rootStore, isRaw: true }),
 				this.document,
 			);
 		}
@@ -182,8 +169,8 @@ export class NgtRenderer implements Renderer2 {
 		const comment = this.delegate.createComment(value);
 
 		// NOTE: we attach an arrow function to the Comment node
-		// In our directives, we can call this function to then start tracking the RendererNode
-		// this is done to limit the amount of Nodes we need to process for getCreationState
+		//  In our directives, we can call this function to then start tracking the RendererNode
+		//  this is done to limit the amount of Nodes we need to process for getCreationState
 		comment[SPECIAL_INTERNAL_ADD_COMMENT] = (node: NgtRendererNode | 'args') => {
 			if (node === 'args') {
 				this.argsCommentNodes.push(comment);
@@ -205,8 +192,8 @@ export class NgtRenderer implements Renderer2 {
 		) {
 			addChild(parent, newChild);
 
-			if (newChild['__ngt_dom_parent__'] && newChild['__ngt_dom_parent__'] instanceof HTMLElement) {
-				this.delegate.appendChild(newChild['__ngt_dom_parent__'], newChild);
+			if (newChild[DOM_PARENT] && newChild[DOM_PARENT] instanceof HTMLElement) {
+				this.delegate.appendChild(newChild[DOM_PARENT], newChild);
 				return;
 			}
 
@@ -390,17 +377,20 @@ export class NgtRenderer implements Renderer2 {
 					const localState = getLocalState(el);
 					if (localState) localState.attach = paths;
 				}
-			} else if (name === SPECIAL_PROPERTIES.RAW_VALUE) {
+			} else {
 				// NOTE: coercion
 				let maybeCoerced: string | number | boolean = value;
 				if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
 					maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
 				} else if (!isNaN(Number(maybeCoerced))) {
 					maybeCoerced = Number(maybeCoerced);
 				}
-				rS[NgtRendererClassId.rawValue] = maybeCoerced;
-			} else {
-				applyProps(el, { [name]: value });
+
+				if (name === SPECIAL_PROPERTIES.RAW_VALUE) {
+					rS[NgtRendererClassId.rawValue] = maybeCoerced;
+				} else {
+					applyProps(el, { [name]: maybeCoerced });
+				}
 			}
 
 			return false;
