feat(plugin): update plugin to the latest

Author: nartc

libs/plugin/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "plugin",
 	"dependencies": {
-		"@nx/devkit": "^17.0.0",
+		"@nx/devkit": "^19.0.0",
 		"tslib": "^2.3.0"
 	},
 	"nx-migrations": {

libs/plugin/src/generators/init/files/experience/experience.component.html__tmpl__

@@ -1,18 +1,29 @@
-import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
-import { extend, type NgtBeforeRenderEvent } from 'angular-three';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, viewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
+import { extend, injectBeforeRender } from 'angular-three';
 import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
 
 extend({ Mesh, BoxGeometry, MeshBasicMaterial });
 
 @Component({
   standalone: true,
-  templateUrl: './experience.component.html',
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  template: `
+    <ngt-mesh #mesh>
+      <ngt-box-geometry />
+      <ngt-mesh-basic-material color="hotpink" />
+    </ngt-mesh>
+  `,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Experience {
-  onBeforeRender({ object, state: { delta }}: NgtBeforeRenderEvent<Mesh>) {
-    object.rotation.x += delta;
-    object.rotation.y += delta;
+  meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
+
+  constructor() {
+    injectBeforeRender(({ delta }) => {
+      const mesh = this.meshRef().nativeElement;
+      mesh.rotation.x += delta;
+      mesh.rotation.y += delta;
+    })
   }
 }
 

libs/plugin/src/generators/init/files/experience/experience.component.ts__tmpl__

@@ -11,7 +11,7 @@ describe('init generator', () => {
 	});
 
 	it('should add three dependencies', async () => {
-		await init(appTree);
+		await init(appTree, { skipGenerateExperience: true });
 
 		const packageJson = readJson(appTree, 'package.json');
 
@@ -21,15 +21,15 @@ describe('init generator', () => {
 	});
 
 	it('should update skipLibCheck in tsconfig.base.json', async () => {
-		await init(appTree);
+		await init(appTree, { skipGenerateExperience: true });
 
 		const tsConfig = readJson(appTree, 'tsconfig.base.json');
 		expect(tsConfig.compilerOptions.skipLibCheck).toEqual(true);
 	});
 
 	it('should update skipLibCheck in tsconfig.json', async () => {
 		appTree.rename('tsconfig.base.json', 'tsconfig.json');
-		await init(appTree);
+		await init(appTree, { skipGenerateExperience: true });
 
 		const tsConfig = readJson(appTree, 'tsconfig.json');
 		expect(tsConfig.compilerOptions.skipLibCheck).toEqual(true);

libs/plugin/src/generators/init/generator.spec.ts

@@ -17,7 +17,14 @@ import { type ArrayLiteralExpression, type NoSubstitutionTemplateLiteral } from
 import { addMetadataJson } from '../utils';
 import { ANGULAR_THREE_VERSION, NGXTENSION_VERSION, THREE_TYPE_VERSION, THREE_VERSION } from '../version';
 
-export async function initGenerator(tree: Tree) {
+export interface InitGeneratorOptions {
+	skipGenerateExperience: boolean;
+}
+
+export async function initGenerator(
+	tree: Tree,
+	{ skipGenerateExperience = false }: Partial<InitGeneratorOptions> = {},
+) {
 	logger.log('Initializing Angular Three...');
 
 	const packageJson = readJson(tree, 'package.json');
@@ -45,6 +52,14 @@ export async function initGenerator(tree: Tree) {
 
 	addMetadataJson(tree, 'angular-three/metadata.json');
 
+	if (skipGenerateExperience) {
+		await formatFiles(tree);
+
+		return () => {
+			installPackagesTask(tree);
+		};
+	}
+
 	const { generateExperience } = await prompt<{ generateExperience: 'append' | 'replace' | 'none' }>({
 		type: 'select',
 		name: 'generateExperience',
@@ -63,7 +78,7 @@ export async function initGenerator(tree: Tree) {
 			(project) => project.projectType === 'application',
 		);
 		let selectedProject: string;
-		if (applicationProjects.length > 1) {
+		if (applicationProjects.length === 1) {
 			selectedProject = applicationProjects[0].name;
 		} else {
 			// prompt
@@ -107,7 +122,7 @@ export async function initGenerator(tree: Tree) {
 			return warnExperienceWasNotGenerated(tree, `AppComponent was not found`);
 		}
 
-		// TODO: revisit if standalone:true becomes the default
+		// TODO (chau): revisit if standalone:true becomes the default
 		const isStandalone = appComponentContent.includes(`standalone: true`);
 		if (!isStandalone) {
 			return warnExperienceWasNotGenerated(tree, `AppComponent is not a Standalone Component`);

libs/plugin/src/generators/init/generator.ts

@@ -2,5 +2,13 @@
 	"$schema": "http://json-schema.org/schema",
 	"cli": "nx",
 	"$id": "Init",
-	"title": "Init Angular Three"
+	"title": "Init Angular Three",
+  "type": "object",
+  "properties": {
+    "skipGenerateExperience": {
+      "type": "boolean",
+      "description": "Skip generating Experience component",
+      "default": false
+    }
+  }
 }

libs/plugin/src/generators/init/schema.json

@@ -1,19 +1,4 @@
 export const ANGULAR_THREE_VERSION = '^2.0.0';
-export const THREE_VERSION = '^0.159.0';
-export const THREE_TYPE_VERSION = '^0.159.0';
-
-export const THREE_STDLIB_VERSION = '^2.0.0';
-export const STATS_GL_VERSION = '^1.0.0';
-export const MESH_LINE_VERSION = '^3.1.0';
-export const THREE_MESH_BVH_VERSION = '^0.6.0';
-export const TROIKA_THREE_TEXT_VERSION = '^0.49.0';
-
-export const POSTPROCESSING_VERSION = '^6.0.0';
-
-export const CANNON_WORKER_API_VERSION = '^2.0.0';
-export const CANNON_ES_VERSION = '^0.20.0';
-export const CANNON_ES_DEBUGGER_VERSION = '^1.0.0';
-
-export const RAPIER_COMPAT_VERSION = '^0.11.2';
-
-export const NGXTENSION_VERSION = '^1.0.0';
+export const THREE_VERSION = '^0.166.0';
+export const THREE_TYPE_VERSION = '^0.166.0';
+export const NGXTENSION_VERSION = '^4.0.0';