fix(core): remove standalone true

Author: nartc

libs/core/README.md

@@ -23,40 +23,38 @@ import { extend } from 'angular-three';
 import { Mesh, BoxGeometry } from 'three';
 
 extend({
-	Mesh, // makes ngt-mesh available
-	BoxGeometry, // makes ngt-box-geometry available
-	/* ... */
-	MyMesh: Mesh, // makes ngt-my-mesh available
+ Mesh, // makes ngt-mesh available
+ BoxGeometry, // makes ngt-box-geometry available
+ /* ... */
+ MyMesh: Mesh, // makes ngt-my-mesh available
 });
 
 // alternatively for demo purposes, you can use the following
 // extend(THREE);
 // This includes the entire THREE.js namespace
 
 @Component({
-	// This Component is rendered in the Custom Renderer
-	standalone: true,
-	template: `
-		<ngt-mesh>
-			<ngt-box-geometry />
-		</ngt-mesh>
-	`,
-	schemas: [CUSTOM_ELEMENTS_SCHEMA], // required
-	changeDetection: ChangeDetectionStrategy.OnPush,
+ // This Component is rendered in the Custom Renderer
+ template: `
+  <ngt-mesh>
+   <ngt-box-geometry />
+  </ngt-mesh>
+ `,
+ schemas: [CUSTOM_ELEMENTS_SCHEMA], // required
+ changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SceneGraph {}
 
 @Component({
-	// This Component is rendered normally in Angular.
-	selector: 'app-my-experience',
-	standalone: true,
-	template: `
-		<ngt-canvas [sceneGraph]="SceneGraph" />
-	`,
-	imports: [NgtCanvas],
+ // This Component is rendered normally in Angular.
+ selector: 'app-my-experience',
+ template: `
+  <ngt-canvas [sceneGraph]="SceneGraph" />
+ `,
+ imports: [NgtCanvas],
 })
 export class MyExperience {
-	SceneGraph = SceneGraph;
+ SceneGraph = SceneGraph;
 }
 ```
 
@@ -98,7 +96,7 @@ The consumers can add `web-types` property to the workspace's `package.json` and
 
 ```json
 {
-	"web-types": "node_modules/angular-three/web-types.json"
+ "web-types": "node_modules/angular-three/web-types.json"
 }
 ```
 
@@ -110,7 +108,7 @@ The consumers can enable it via `html.customData` in their `settings.json` file.
 
 ```json
 {
-	"html.customData": ["node_modules/angular-three/metadata.json"]
+ "html.customData": ["node_modules/angular-three/metadata.json"]
 }
 ```
 
@@ -122,7 +120,7 @@ Input bindings for `ngt-*` elements work the same way as they do in Angular.
 
 ```html
 <ngt-mesh [position]="[x, y, z]" [rotation]="[x, y, z]">
-	<ngt-mesh-basic-material color="hotpink" />
+ <ngt-mesh-basic-material color="hotpink" />
 </ngt-mesh>
 ```
 
@@ -179,13 +177,13 @@ The consumers can query for the THREE.js entities like they would do in normal H
 
 ```ts
 @Component({
-	template: `
-		<ngt-mesh #mesh></ngt-mesh>
-	`,
+ template: `
+  <ngt-mesh #mesh></ngt-mesh>
+ `,
 })
 export class Box {
-	mesh = viewChild.required<ElementRef<Mesh>>('mesh');
-	//  notice that it is an ElementRef of THREE.Mesh instead of an HTMLElement
+ mesh = viewChild.required<ElementRef<Mesh>>('mesh');
+ //  notice that it is an ElementRef of THREE.Mesh instead of an HTMLElement
 }
 ```
 
@@ -195,18 +193,18 @@ In order to participate in the animation loop, use `injectBeforeRender` inject f
 
 ```ts
 @Component({
-	/*...*/
+ /*...*/
 })
 export class Box {
-	mesh = viewChild.required<ElementRef<Mesh>>('mesh');
-
-	constructor() {
-		injectBeforeRender(() => {
-			// runs every frame
-			const mesh = this.mesh().nativeElement;
-			mesh.rotation.x += 0.01;
-		});
-	}
+ mesh = viewChild.required<ElementRef<Mesh>>('mesh');
+
+ constructor() {
+  injectBeforeRender(() => {
+   // runs every frame
+   const mesh = this.mesh().nativeElement;
+   mesh.rotation.x += 0.01;
+  });
+ }
 }
 ```
 
@@ -216,9 +214,9 @@ Angular Three keeps track of its state via an internal store. The consumers can
 
 ```ts
 export class Box {
-	store = injectStore();
-	viewport = this.store.select('viewport'); // Signal<NgtViewport>
-	camera = this.store.select('camera'); // Signal<NgtCamera> - the default camera
-	/* many more properties */
+ store = injectStore();
+ viewport = this.store.select('viewport'); // Signal<NgtViewport>
+ camera = this.store.select('camera'); // Signal<NgtCamera> - the default camera
+ /* many more properties */
 }
 ```

libs/core/src/lib/directives/args.ts

@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import { SPECIAL_INTERNAL_ADD_COMMENT } from '../renderer/constants';
 
-@Directive({ selector: 'ng-template[args]', standalone: true })
+@Directive({ selector: 'ng-template[args]' })
 export class NgtArgs {
 	args = input.required<any[] | null>();
 

libs/core/src/lib/directives/selection.ts

@@ -2,7 +2,7 @@ import { booleanAttribute, Directive, effect, ElementRef, inject, input, signal,
 import { Group, Mesh, Object3D } from 'three';
 import { getLocalState } from '../instance';
 
-@Directive({ standalone: true, selector: '[ngtSelection]' })
+@Directive({ selector: '[ngtSelection]' })
 export class NgtSelection {
 	enabled = input(true, { alias: 'ngtSelection', transform: booleanAttribute });
 
@@ -15,7 +15,7 @@ export class NgtSelection {
 	}
 }
 
-@Directive({ standalone: true, selector: 'ngt-group[ngtSelect], ngt-mesh[ngtSelect]' })
+@Directive({ selector: 'ngt-group[ngtSelect], ngt-mesh[ngtSelect]' })
 export class NgtSelect {
 	enabled = input(false, { transform: booleanAttribute, alias: 'ngtSelect' });
 

libs/core/src/lib/pipes/hexify.ts

@@ -4,7 +4,7 @@ import { inject, Pipe } from '@angular/core';
 const RGBA_REGEX = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*\.?\d+)?\)/;
 const DEFAULT_COLOR = 0x000000;
 
-@Pipe({ name: 'hexify', pure: true, standalone: true })
+@Pipe({ name: 'hexify', pure: true })
 export class NgtHexify {
 	private document = inject(DOCUMENT, { optional: true });
 	private ctx?: CanvasRenderingContext2D | null;

libs/core/src/lib/portal.ts

@@ -29,7 +29,6 @@ import { updateCamera } from './utils/update';
 
 @Component({
 	selector: 'ngt-portal-before-render',
-	standalone: true,
 	template: `
 		<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
 		<ngt-group (pointerover)="onPointerOver()" attach="none" />
@@ -80,7 +79,7 @@ export class NgtPortalBeforeRender {
 	}
 }
 
-@Directive({ selector: 'ng-template[portalContent]', standalone: true })
+@Directive({ selector: 'ng-template[portalContent]' })
 export class NgtPortalContent {
 	constructor() {
 		const { element: comment } = inject(ViewContainerRef);
@@ -140,7 +139,7 @@ export type NgtPortalInjectableState = Partial<
 	imports: [NgtPortalBeforeRender],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	providers: [provideStore(() => signalStore({}))],
+	providers: [provideStore(() => signalStore<NgtState>({}))],
 })
 export class NgtPortal {
 	container = input.required<Object3D>();

libs/core/src/lib/utils/object-events.ts

@@ -4,7 +4,7 @@ import { Object3D } from 'three';
 import { NgtEventHandlers, NgtThreeEvent } from '../types';
 import { resolveRef } from './resolve-ref';
 
-@Directive({ standalone: true, selector: '[ngtObjectEvents]' })
+@Directive({ selector: '[ngtObjectEvents]' })
 /**
  * As host directive:
  * - outputs: [

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

@@ -125,8 +125,9 @@ export async function initGenerator(
 			return warnExperienceWasNotGenerated(tree, `AppComponent was not found`);
 		}
 
-		// TODO (chau): revisit if standalone:true becomes the default
-		const isStandalone = appComponentContent.includes(`standalone: true`);
+		// standalone is true or not exist
+		const isStandalone =
+			appComponentContent.includes(`standalone: true`) || !appComponentContent.includes('standalone');
 		if (!isStandalone) {
 			return warnExperienceWasNotGenerated(tree, `AppComponent is not a Standalone Component`);
 		}