docs: update documentation

Author: Chau Tran

apps/documentation/docs/api/additional-exports.mdx

@@ -20,7 +20,7 @@ export class SceneGraph {
 :::info
 
 `injectBeforeRender()` automatically cleans up the before render but it returns the reference to the clean up function.
-We can call this function anytime to clean up the before render, not just in `ngOnDestroy`
+We can call this function anytime to clean up the before render
 
 :::
 

apps/documentation/docs/api/custom-renderer.mdx

@@ -275,7 +275,7 @@ To register a callback in the animation loop, we can listen for `(beforeRender)`
 
 ```ts
 @Component({
-    template: `<ngt-mesh (beforeRender)="onBeforeRender($any($event))" />`,
+    template: `<ngt-mesh (beforeRender)="onBeforeRender($event)" />`,
 })
 export class SceneGraph {
     onBeforeRender(event: NgtBeforeRenderEvent<Mesh>) {
@@ -286,10 +286,6 @@ export class SceneGraph {
 
 When the element is destroyed, `(beforeRender)` is unregistered automatically.
 
-:::note
-We use `$any($event)` because of Angular limitations on `CUSTOM_ELEMENTS_SCHEMA`
-:::
-
 #### Render Priority
 
 By default, NGT renders the scene on every frame. If we need to control this process, we can pass `priority` as **Attribute Binding** with number-string values
@@ -298,8 +294,8 @@ to any object whose `(beforeRender)` is being listened to. When a `priority` is
 ```ts
 @Component({
     template: `
-        <ngt-mesh priority="1" (beforeRender)="onBeforeRender($any($event))" />
-        <ngt-mesh priority="2" (beforeRender)="onOtherBeforeRender($any($event))" />
+        <ngt-mesh priority="1" (beforeRender)="onBeforeRender($event)" />
+        <ngt-mesh priority="2" (beforeRender)="onOtherBeforeRender($event)" />
     `,
 })
 export class SceneGraph {
@@ -324,7 +320,7 @@ This event emits after the child **has been attached** to the parent
 @Component({
     template: `
         <ngt-mesh>
-            <ngt-mesh-basic-material attach="material" (afterAttach)="onAfterAttach($any($event))" />
+            <ngt-mesh-basic-material attach="material" (afterAttach)="onAfterAttach($event)" />
         </ngt-mesh>
     `,
 })
@@ -339,7 +335,7 @@ This event emits after an object is updated
 
 ```ts
 @Component({
-    template: ` <ngt-mesh (afterUpdate)="onAfterUpdate($any($event))" [position]="[0, 1, 2]" /> `,
+    template: ` <ngt-mesh (afterUpdate)="onAfterUpdate($event)" [position]="[0, 1, 2]" /> `,
 })
 export class SceneGraph {
     onAfterUpdate(event: Mesh) {}

apps/documentation/docs/api/pipes/push.mdx

@@ -23,10 +23,18 @@ A more realistic use-case is to load a 3D model into our SceneGraph
 
 ```ts
 @Component({
-    template: ` <ngt-primitive *args="[model$ | ngtPush]" [scale]="0.01" /> `,
-    imports: [NgtArgs, NgtPush],
+    template: ` <ngt-primitive *args="[model()]" [scale]="0.01" /> `,
+    imports: [NgtArgs],
 })
 export class SceneGraph {
-    readonly model$ = injectNgtLoader(GLTFLoader, 'assets/model.glb').pipe(map((model) => model.scene));
+    readonly #gltf = injectNgtLoader(
+        () => GLTFLoader,
+        () => 'assets/model.glb'
+    );
+    readonly model = computed(() => {
+        const gltf = this.#gltf();
+        if (!gltf) return null;
+        return gltf.scene;
+    });
 }
 ```

apps/documentation/docs/api/primitive.mdx

@@ -59,16 +59,17 @@ The NGT Custom Renderer will assign the `Mesh` object to the `ref.nativeElement`
 returns an `NgtInjectedRef<ObjectType>`.
 
 ```ts
-type Subscribe<T> = (callback: (current: T, previous: T | null) => void) => Subscription;
-
-export type NgtInjectedRef<T> = ElementRef<T> & {
-    /* a Subscribe fn that emits current and previous value. Useful for debug */
-    subscribe: Subscribe<T>;
-    /* consumers should use this for listening to value of this ref. This filters out initial null value */
-    $: Observable<T>;
+export type NgtInjectedRef<TElement> = ElementRef<TElement> & {
     /* consumers should use this for listenting to children changes on this ref */
-    children$: (type?: 'objects' | 'nonObjects' | 'both') => Observable<NgtInstanceNode[]>;
-    /* notify this CD when ref value changes */
-    useCDR: (cdr: ChangeDetectorRef) => void;
+    children: (type?: 'objects' | 'nonObjects' | 'both') => Signal<NgtInstanceNode[]>;
+    /* consumers should use this to read the ref current value without registering the signal */
+    untracked: TElement;
 };
 ```
+
+:::note
+
+`NgtInjectedRef<TElement>#nativeElement` is overridden to be a getter that returns a `Signal<TElement>`. Consumers should use
+`nativeElement` only if they want to register `Signal<TElement>` as a dependency in other Signal APIs like `computed` or `effect`
+
+:::

apps/documentation/docs/api/ref.mdx

@@ -4,15 +4,15 @@ title: Store
 sidebar_label: Store
 ---
 
-`NgtStore` contains all information about the current `NgtCanvas`. `NgtStore` extends [RxState](https://www.rx-angular.io/docs/state/api/rx-state) API
+`NgtStore` contains all information about the current `NgtCanvas`. `NgtStore` utilizes [Angular Signals](https://angular.io/guide/signals).
 
 ```ts
 @Component({
     /*...*/
 })
 export class SceneGraph {
     // inject the Store. We can also use Constructor DI
-    readonly store = inject(NgtStore);
+    readonly #store = inject(NgtStore);
 }
 ```
 
@@ -23,9 +23,9 @@ export class SceneGraph {
     /*...*/
 })
 export class SceneGraph {
-    readonly store = inject(NgtStore);
-    readonly camera$ = this.store.select('camera'); // Observable<NgtCamera>
-    readonly glDom$ = this.store.select('gl', 'domElement'); // Observable<HTMLElement>
+    readonly #store = inject(NgtStore);
+    readonly camera = this.#store.select('camera'); // Signal<NgtCamera>
+    readonly glDom = this.#store.select('gl', 'domElement'); // Signal<HTMLElement>
 }
 ```
 
@@ -36,9 +36,9 @@ export class SceneGraph {
     /*...*/
 })
 export class SceneGraph {
-    readonly store = inject(NgtStore);
-    readonly camera = this.store.get('camera'); // NgtCamera
-    readonly glDom = this.store.get('gl', 'domElement'); // HTMLElement
+    readonly #store = inject(NgtStore);
+    readonly camera = this.#store.get('camera'); // NgtCamera
+    readonly glDom = this.#store.get('gl', 'domElement'); // HTMLElement
 }
 ```
 
@@ -51,19 +51,14 @@ Beside using `(beforeRender)` Output on Custom Element tags, we can also use `Ng
     /*...*/
 })
 export class SceneGraph {
-    readonly store = inject(NgtStore);
-
-    private sub?: () => void;
+    readonly #store = inject(NgtStore);
+    readonly #destroyRef = inject(DestroyRef);
 
     ngOnInit() {
         // register and return the clean up function
         // signature: subscribe(callback, priority)
-        this.sub = this.store.get('internal').subscribe(() => {}, 0);
-    }
-
-    ngOnDestroy() {
-        // call the clean up function to unregister the callback
-        this.sub?.();
+        const sub = this.#store.get('internal').subscribe(() => {}, 0);
+        this.#destroyRef.onDestroy(() => sub());
     }
 }
 ```