fix(soba): adjust html with new renderer

Author: nartc

libs/core/src/index.ts

@@ -1,7 +1,7 @@
 export * from './lib/directives/args';
 export * from './lib/directives/parent';
 export * from './lib/directives/selection';
-// export * from './lib/html';
+export * from './lib/html';
 export * from './lib/instance';
 export * from './lib/loader';
 export * from './lib/loop';

libs/core/src/lib/html.ts

@@ -13,50 +13,66 @@
 // import { DOM_PARENT } from './renderer-old/constants';
 // import { injectStore } from './store';
 // import { NgtAnyRecord } from './types';
+
+import {
+	AbstractType,
+	DestroyRef,
+	Directive,
+	ElementRef,
+	inject,
+	InjectionToken,
+	Provider,
+	ProviderToken,
+	Type,
+} from '@angular/core';
+import { NGT_DOM_PARENT_FLAG, NGT_HTML_FLAG } from './renderer/constants';
+import { injectStore } from './store';
+import { NgtAnyRecord } from './types';
+
 //
-// const NGT_HTML_DOM_ELEMENT = new InjectionToken<'gl' | HTMLElement>('NGT_HTML_DOM_ELEMENT');
-//
-// export function provideHTMLDomElement(): Provider;
-// export function provideHTMLDomElement(factory: () => HTMLElement): Provider;
-// export function provideHTMLDomElement<
-// 	TDeps extends Array<ProviderToken<any>>,
-// 	TValues extends {
-// 		[K in keyof TDeps]: TDeps[K] extends Type<infer T> | AbstractType<infer T> | InjectionToken<infer T> ? T : never;
-// 	},
-// >(deps: TDeps, factory: (...args: TValues) => HTMLElement): Provider;
-// export function provideHTMLDomElement(...args: any[]) {
-// 	if (args.length === 0) {
-// 		return { provide: NGT_HTML_DOM_ELEMENT, useFactory: () => 'gl' };
-// 	}
-//
-// 	if (args.length === 1) {
-// 		return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args[0] };
-// 	}
-//
-// 	return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args.pop(), deps: args };
-// }
-//
-// @Directive()
-// export abstract class NgtHTML {
-// 	static [HTML] = true;
-//
-// 	protected store = injectStore();
-// 	protected destroyRef = inject(DestroyRef);
-// 	protected host = inject<ElementRef<HTMLElement>>(ElementRef);
-// 	protected domElement = inject(NGT_HTML_DOM_ELEMENT, { self: true, optional: true });
-//
-// 	constructor() {
-// 		if (this.domElement === 'gl') {
-// 			Object.assign(this.host.nativeElement, {
-// 				[DOM_PARENT]: this.store.snapshot.gl.domElement.parentElement,
-// 			});
-// 		} else if (this.domElement) {
-// 			Object.assign(this.host.nativeElement, { [DOM_PARENT]: this.domElement });
-// 		}
-//
-// 		this.destroyRef.onDestroy(() => {
-// 			(this.host.nativeElement as NgtAnyRecord)[DOM_PARENT] = null;
-// 			delete (this.host.nativeElement as NgtAnyRecord)[DOM_PARENT];
-// 		});
-// 	}
-// }
+const NGT_HTML_DOM_ELEMENT = new InjectionToken<'gl' | HTMLElement>('NGT_HTML_DOM_ELEMENT');
+
+export function provideHTMLDomElement(): Provider;
+export function provideHTMLDomElement(factory: () => HTMLElement): Provider;
+export function provideHTMLDomElement<
+	TDeps extends Array<ProviderToken<any>>,
+	TValues extends {
+		[K in keyof TDeps]: TDeps[K] extends Type<infer T> | AbstractType<infer T> | InjectionToken<infer T> ? T : never;
+	},
+>(deps: TDeps, factory: (...args: TValues) => HTMLElement): Provider;
+export function provideHTMLDomElement(...args: any[]) {
+	if (args.length === 0) {
+		return { provide: NGT_HTML_DOM_ELEMENT, useFactory: () => 'gl' };
+	}
+
+	if (args.length === 1) {
+		return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args[0] };
+	}
+
+	return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args.pop(), deps: args };
+}
+
+@Directive()
+export abstract class NgtHTML {
+	static [NGT_HTML_FLAG] = true;
+
+	protected domElement = inject(NGT_HTML_DOM_ELEMENT, { self: true, optional: true });
+
+	constructor() {
+		const host = inject<ElementRef<HTMLElement>>(ElementRef);
+		const store = injectStore();
+
+		if (this.domElement === 'gl') {
+			Object.assign(host.nativeElement, {
+				[NGT_DOM_PARENT_FLAG]: store.snapshot.gl.domElement.parentElement,
+			});
+		} else if (this.domElement) {
+			Object.assign(host.nativeElement, { [NGT_DOM_PARENT_FLAG]: this.domElement });
+		}
+
+		inject(DestroyRef).onDestroy(() => {
+			(host.nativeElement as NgtAnyRecord)[NGT_DOM_PARENT_FLAG] = null;
+			delete (host.nativeElement as NgtAnyRecord)[NGT_DOM_PARENT_FLAG];
+		});
+	}
+}

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

@@ -9,4 +9,6 @@ export const NGT_MANUAL_INJECTED_STORE = '__ngt_manual_injected_store__';
 export const NGT_GET_NODE_ATTRIBUTE_FLAG = '__ngt_get_node_attribute__';
 export const NGT_DOM_PARENT_FLAG = '__ngt_dom_parent__';
 
+export const NGT_HTML_FLAG = '__ngt_html__';
+
 export const THREE_NATIVE_EVENTS = ['added', 'removed', 'childadded', 'childremoved', 'disposed'];