feat: update angular-three and *ref

Author: nartc

libs/angular-three-postprocessing/effects/src/lib/lut/lut.ts

@@ -1,5 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { injectNgtRef, NgtArgs, NgtRxStore, NgtStore, startWithUndefined } from 'angular-three';
+import { injectNgtRef, NgtArgs, NgtRef, NgtRxStore, NgtStore, startWithUndefined } from 'angular-three';
 import { componentInputsToCombinedStream, simpleChangesToStateObject } from 'angular-three-postprocessing';
 import { LUT3DEffect } from 'postprocessing';
 import { combineLatest, map } from 'rxjs';
@@ -8,9 +8,11 @@ import { combineLatest, map } from 'rxjs';
     selector: 'ngtp-lut',
     standalone: true,
     template: `
-        <ngt-primitive *args="[get('effect')]" [ref]="lutRef" />
+        <ng-container *args="[get('effect')]">
+            <ngt-primitive *ref="lutRef" />
+        </ng-container>
     `,
-    imports: [NgtArgs],
+    imports: [NgtArgs, NgtRef],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     inputs: ['blendFunction', 'tetrahedralInterpolation'],
 })

libs/angular-three-postprocessing/effects/src/lib/ssao/ssao.ts

@@ -1,5 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { injectNgtRef, NgtArgs, NgtRxStore } from 'angular-three';
+import { injectNgtRef, NgtArgs, NgtRef, NgtRxStore } from 'angular-three';
 import {
     componentInputsToCombinedStream,
     NGTP_EFFECT_COMPOSER_API,
@@ -12,9 +12,11 @@ import { combineLatest, map } from 'rxjs';
     selector: 'ngtp-ssao',
     standalone: true,
     template: `
-        <ngt-primitive *args="[get('effect')]" [ref]="ssaoRef" />
+        <ng-container *args="[get('effect')]">
+            <ngt-primitive *ref="ssaoRef" />
+        </ng-container>
     `,
-    imports: [NgtArgs],
+    imports: [NgtArgs, NgtRef],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     inputs: [
         'blendFunction',

libs/angular-three-postprocessing/src/lib/effect-composer.ts

@@ -1,6 +1,6 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, InjectionToken, Input, OnInit } from '@angular/core';
 import { RxActionFactory } from '@rx-angular/state/actions';
-import { extend, getLocalState, injectNgtRef, NgtRxStore, NgtStore, startWithUndefined } from 'angular-three';
+import { extend, getLocalState, injectNgtRef, NgtRef, NgtRxStore, NgtStore, startWithUndefined } from 'angular-three';
 import { DepthDownsamplingPass, EffectComposer, EffectPass, NormalPass, RenderPass } from 'postprocessing';
 import { combineLatest, map } from 'rxjs';
 import * as THREE from 'three';
@@ -43,14 +43,15 @@ function effectComposerApiFactory(composer: NgtpEffectComposer) {
     selector: 'ngtp-effect-composer',
     standalone: true,
     template: `
-        <ngt-group [ref]="composerRef">
+        <ngt-group *ref="composerRef">
             <ng-content />
         </ngt-group>
     `,
     providers: [
         { provide: NGTP_EFFECT_COMPOSER_API, useFactory: effectComposerApiFactory, deps: [NgtpEffectComposer] },
         RxActionFactory,
     ],
+    imports: [NgtRef],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtpEffectComposer extends NgtRxStore implements OnInit {

package.json

@@ -63,7 +63,7 @@
         "@angular/router": "~15.1.3",
         "@rx-angular/state": "^1.7.0",
         "@swc/helpers": "~0.4.14",
-        "angular-three": "^1.3.0",
+        "angular-three": "^1.5.0",
         "postprocessing": "^6.29.3",
         "rxjs": "~7.8.0",
         "three": "^0.149.0",