update nx

Author: nartc

apps/testbed/src/app/cube/cube.html

@@ -6,6 +6,6 @@
 	(pointerout)="hover.set(false)"
 	(click)="active.set(!active())"
 >
-	<ngt-box-geometry />
+	<ngt-box-geometry *args="[1.5, 1.5, 1.5]" />
 	<ngt-mesh-standard-material [withTimeline]="gsapTimeline['color']" />
 </ngt-mesh>

apps/testbed/src/app/cube/cube.ts

@@ -1,26 +1,32 @@
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, Input, computed } from '@angular/core';
-import { cdAwareSignal, type NgtBeforeRenderEvent } from 'angular-three';
+import {
+	CUSTOM_ELEMENTS_SCHEMA,
+	ChangeDetectionStrategy,
+	Component,
+	Input,
+	afterNextRender,
+	computed,
+} from '@angular/core';
+import { NgtArgs, cdAwareSignal, type NgtBeforeRenderEvent } from 'angular-three';
 import { WithTimeline, injectGsap } from './gsap';
 
 @Component({
 	selector: 'app-cube',
 	standalone: true,
-	templateUrl: './cube.html',
 	template: `
 		<ngt-mesh
-			[withTimeline]="gsapTimeline.scale"
+			[withTimeline]="gsapTimeline.mesh"
 			[position]="position"
 			(beforeRender)="onBeforeRender($event)"
 			(pointerover)="hover.set(true)"
 			(pointerout)="hover.set(false)"
 			(click)="active.set(!active())"
 		>
-			<ngt-box-geometry />
-			<ngt-mesh-standard-material [withTimeline]="gsapTimeline.color" />
+			<ngt-box-geometry *args="[1.5, 1.5, 1.5]" />
+			<ngt-mesh-standard-material [withTimeline]="gsapTimeline.material" />
 		</ngt-mesh>
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
-	imports: [WithTimeline],
+	imports: [WithTimeline, NgtArgs],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Cube {
@@ -33,10 +39,16 @@ export class Cube {
 	protected scale = computed(() => (this.active() ? 1.5 : 1));
 
 	protected gsapTimeline = injectGsap({
-		scale: { value: this.scale, ease: 'bounce.out' },
-		color: { value: this.color },
+		mesh: { value: () => ({ scale: this.scale() }), ease: 'bounce.out' },
+		material: { value: () => ({ color: this.color() }) },
 	});
 
+	constructor() {
+		afterNextRender(() => {
+			console.log(this.gsapTimeline);
+		});
+	}
+
 	onBeforeRender(event: NgtBeforeRenderEvent<THREE.Mesh>) {
 		event.object.rotation.x += 0.01;
 	}

apps/testbed/src/app/cube/gsap.ts

@@ -1,66 +1,68 @@
 import {
+	afterNextRender,
+	AfterRenderPhase,
 	DestroyRef,
 	Directive,
+	effect,
 	ElementRef,
+	inject,
 	Injector,
 	Input,
-	afterNextRender,
-	effect,
-	inject,
 	signal,
 	untracked,
 	type WritableSignal,
 } from '@angular/core';
+import { applyProps } from 'angular-three';
 import { gsap } from 'gsap';
-import { applyProps } from 'libs/core/src/lib/utils/apply-props';
 
 export function injectGsap(config: Record<string, { value: () => any } & gsap.TweenVars>) {
 	const destroyRef = inject(DestroyRef);
-	const targets: Record<string, WritableSignal<any>> = {};
-	const timelines: Record<string, gsap.core.Timeline> = {};
-	let context: gsap.Context;
 
 	const entries = Object.entries(config);
 
-	afterNextRender(() => {
-		context = gsap.context(() => {
-			entries.forEach(([key]) => {
-				timelines[key] = gsap.timeline();
-				targets[key] = signal<any | null>(null);
-			});
+	const targets: Record<string, WritableSignal<any>> = entries.reduce(
+		(acc, [key]) => {
+			acc[key] = signal(null!);
+			return acc;
+		},
+		{} as Record<string, WritableSignal<any>>,
+	);
+	const timelines: Record<string, gsap.core.Timeline> = {};
+
+	const context = gsap.context(() => {
+		entries.forEach(([key]) => {
+			timelines[key] = gsap.timeline();
 		});
 	});
 
-	destroyRef.onDestroy(() => context?.revert());
+	destroyRef.onDestroy(() => context.revert());
 
 	return entries.reduce((acc, [key, { value, ...rest }]) => {
-		const preConfig = {
-			[key]: untracked(value),
-		};
-
-		acc[key] = {
-			start: (target: any, injector: Injector) => {
-				untracked(() => {
-					targets[key].set(target);
-					rest.onUpdate = () => {
-						if (timelines[key].isActive()) {
-							applyProps(target, preConfig);
-						}
-					};
-				});
-				queueMicrotask(() => {
-					effect(
-						(onCleanup) => {
-							if (!target) return;
-
-							timelines[key].to(preConfig, { ...rest, [key]: value() });
+		const targetValue = untracked(value);
+		acc[key] = (target: any, injector: Injector) => {
+			queueMicrotask(() => {
+				effect(
+					(onCleanup) => {
+						const _target = targets[key]();
+						if (!_target) return;
+						timelines[key].to(targetValue, Object.assign(rest, value()));
+						onCleanup(() => timelines[key].clear());
+					},
+					{ injector },
+				);
+			});
 
-							onCleanup(() => timelines[key].clear());
-						},
-						{ injector },
-					);
-				});
-			},
+			untracked(() => {
+				applyProps(target, targetValue);
+				targets[key].set(target);
+				const originalOnUpdate = rest.onUpdate;
+				rest.onUpdate = () => {
+					originalOnUpdate?.();
+					if (timelines[key].isActive()) {
+						applyProps(target, targetValue);
+					}
+				};
+			});
 		};
 
 		return acc;
@@ -72,8 +74,11 @@ export class WithTimeline {
 	@Input({ required: true }) withTimeline!: any;
 
 	constructor(elementRef: ElementRef<any>, injector: Injector) {
-		afterNextRender(() => {
-			this.withTimeline.start(elementRef.nativeElement, injector);
-		});
+		afterNextRender(
+			() => {
+				this.withTimeline(elementRef.nativeElement, injector);
+			},
+			{ phase: AfterRenderPhase.Read },
+		);
 	}
 }

apps/testbed/src/app/scene/scene.html

@@ -3,6 +3,6 @@
 <ngt-point-light [intensity]="5" [position]="-1.5" />
 
 <app-cube [position]="[0, 0, 0]" />
-<app-cube [position]="[2, 0, 0]" />
+<!-- <app-cube [position]="[2, 0, 0]" /> -->
 
 <ngt-orbit-controls *args="controlsArgs()" />

libs/core/src/index.ts

@@ -8,8 +8,6 @@ export * from './lib/ref';
 export * from './lib/renderer';
 export * from './lib/routed-scene';
 export * from './lib/store';
-export * from './lib/three-types';
-export * from './lib/types';
 export * from './lib/utils/apply-props';
 export { createAttachFunction } from './lib/utils/attach';
 export * from './lib/utils/before-render';

package.json

@@ -14,15 +14,15 @@
 	},
 	"private": true,
 	"devDependencies": {
-		"@analogjs/platform": "^0.2.21",
-		"@analogjs/vite-plugin-angular": "^0.2.21",
+		"@analogjs/platform": "^0.2.22",
+		"@analogjs/vite-plugin-angular": "^0.2.22",
 		"@angular-devkit/build-angular": "17.0.3",
 		"@angular-devkit/core": "17.0.3",
 		"@angular-devkit/schematics": "17.0.3",
 		"@angular-eslint/eslint-plugin": "17.1.0",
 		"@angular-eslint/eslint-plugin-template": "17.1.0",
 		"@angular-eslint/template-parser": "17.1.0",
-		"@angular/cli": "~17.0.3",
+		"@angular/cli": "~17.0.0",
 		"@angular/compiler-cli": "17.0.4",
 		"@angular/language-service": "17.0.4",
 		"@nx/angular": "17.1.3",
@@ -52,7 +52,7 @@
 		"@swc/cli": "~0.1.63",
 		"@swc/core": "1.3.99",
 		"@types/jest": "^29.5.10",
-		"@types/node": "20.9.4",
+		"@types/node": "20.10.0",
 		"@types/three": "^0.158.3",
 		"@typescript-eslint/eslint-plugin": "6.12.0",
 		"@typescript-eslint/parser": "6.12.0",
@@ -92,8 +92,8 @@
 		"@nx/eslint": "17.1.3"
 	},
 	"dependencies": {
-		"@analogjs/content": "^0.2.21",
-		"@analogjs/router": "^0.2.21",
+		"@analogjs/content": "^0.2.22",
+		"@analogjs/router": "^0.2.22",
 		"@angular/animations": "17.0.4",
 		"@angular/common": "17.0.4",
 		"@angular/compiler": "17.0.4",