fixing lots of types

Author: nartc

Diff for: libs/core/src/lib/directives/args.ts

@@ -14,16 +14,16 @@ import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { SPECIAL_INTERNAL_ADD_COMMENT } from '../renderer/constants';
 
 @Directive({ selector: 'ng-template[args]', standalone: true })
-export class NgtArgs<TArgs extends any[] = any[]> {
-	args = input.required<TArgs | null>();
+export class NgtArgs {
+	args = input.required<any[] | null>();
 
 	private vcr = inject(ViewContainerRef);
 	private zone = inject(NgZone);
 	private template = inject(TemplateRef);
 	private autoEffect = injectAutoEffect();
 
 	protected injected = false;
-	protected injectedArgs: TArgs | null = null;
+	protected injectedArgs: any[] | null = null;
 	private view?: EmbeddedViewRef<unknown>;
 
 	constructor() {

Diff for: libs/postprocessing/package.json

@@ -38,5 +38,9 @@
 	"dependencies": {
 		"tslib": "^2.3.0"
 	},
-	"sideEffects": false
+	"sideEffects": false,
+  "web-types": [
+    "../../node_modules/angular-three/web-types.json",
+    "node_modules/angular-three/web-types.json"
+  ]
 }

Diff for: libs/soba/controls/src/lib/camera-controls.ts

@@ -32,15 +32,6 @@ export interface NgtsCameraControlsOptions {
 	regress: boolean;
 }
 
-declare global {
-	interface HTMLElementTagNameMap {
-		/**
-		 * @extends camera-controls|CameraControls
-		 */
-		'ngts-camera-controls': CameraControls & NgtsCameraControlsOptions;
-	}
-}
-
 const defaultOptions: Partial<CameraControls> & NgtsCameraControlsOptions = {
 	makeDefault: false,
 	events: false,

Diff for: libs/soba/controls/src/lib/orbit-controls.ts

@@ -14,15 +14,6 @@ export interface NgtsOrbitControlsOptions {
 	keyEvents: boolean | HTMLElement;
 }
 
-declare global {
-	interface HTMLElementTagNameMap {
-		/**
-		 * @extends three-stdlib|OrbitControls
-		 */
-		'ngts-orbit-controls': OrbitControls & NgtsOrbitControlsOptions;
-	}
-}
-
 const defaultOptions: Partial<OrbitControls> & NgtsOrbitControlsOptions = {
 	enableDamping: true,
 	regress: false,

Diff for: libs/soba/local-web-types.json

@@ -10,7 +10,6 @@ import {
 	untracked,
 	viewChild,
 } from '@angular/core';
-import { MeshDiscardMaterial, MeshTransmissionMaterial } from '@pmndrs/vanilla';
 import {
 	getLocalState,
 	injectBeforeRender,
@@ -21,6 +20,7 @@ import {
 	pick,
 } from 'angular-three';
 import { injectFBO } from 'angular-three-soba/misc';
+import { MeshDiscardMaterial, MeshTransmissionMaterial } from 'angular-three-soba/vanilla-exports';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { BackSide, Color, FrontSide, Mesh, NoToneMapping, Texture, ToneMapping } from 'three';
 

Diff for: libs/soba/materials/src/lib/mesh-transmission-material.ts

@@ -52,8 +52,8 @@
 	},
 	"sideEffects": false,
 	"web-types": [
-    "../../dist/libs/core/web-types.json",
-    "./local-web-types.json",
+    "../../node_modules/angular-three/web-types.json",
+    "../../node_modules/angular-three-soba/web-types.json",
     "./web-types.json"
   ]
 }

Diff for: libs/soba/package.json

@@ -1,5 +1,5 @@
 import { shaderMaterial } from '@pmndrs/vanilla';
-import { NgtShaderMaterial } from 'angular-three';
+import { NgtMaterial } from 'angular-three';
 import { getVersion } from 'angular-three-soba/misc';
 import { Color, ColorRepresentation, Side, Vector3 } from 'three';
 
@@ -110,11 +110,14 @@ export const GridMaterial = shaderMaterial(
   `,
 );
 
+export type NgtGridMaterial = NgtMaterial<InstanceType<typeof GridMaterial>, [GridMaterialOptions]>;
+
 declare global {
 	interface HTMLElementTagNameMap {
 		/**
 		 * @extends ngt-shader-material
+		 * @options GridMaterialOptions
 		 */
-		'ngt-grid-material': GridMaterialOptions & NgtShaderMaterial;
+		'ngt-grid-material': NgtGridMaterial;
 	}
 }

Diff for: libs/soba/shaders/src/lib/grid-material.ts

@@ -1,5 +1,4 @@
 import { shaderMaterial } from '@pmndrs/vanilla';
-import { NgtShaderMaterial } from 'angular-three';
 import { getVersion } from 'angular-three-soba/misc';
 import * as THREE from 'three';
 import { MeshBVHUniformStruct, shaderIntersectFunction, shaderStructs } from 'three-mesh-bvh';
@@ -168,12 +167,3 @@ export const MeshRefractionMaterial = shaderMaterial(
     #include <${getVersion() >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
   }`,
 );
-
-declare global {
-	interface HTMLElementTagNameMap {
-		/**
-		 * @extends ngt-shader-material
-		 */
-		'ngt-mesh-refraction-material': NgtShaderMaterial;
-	}
-}

Diff for: libs/soba/shaders/src/lib/mesh-refraction-material.ts

@@ -1,4 +1,4 @@
-import { NgtMeshStandardMaterial } from 'angular-three';
+import { NgtMaterial, NgtMeshStandardMaterial } from 'angular-three';
 import {
 	IUniform,
 	MeshStandardMaterial,
@@ -59,11 +59,14 @@ export class MeshWobbleMaterial extends MeshStandardMaterial {
 	}
 }
 
+export type NgtMeshWobbleMaterial = NgtMaterial<MeshWobbleMaterial, [MeshWobbleMaterialOptions]>;
+
 declare global {
 	interface HTMLElementTagNameMap {
 		/**
 		 * @extends ngt-mesh-standard-material
+		 * @options MeshWobbleMaterialOptions
 		 */
-		'ngt-mesh-wobble-material': MeshWobbleMaterialOptions & NgtMeshStandardMaterial;
+		'ngt-mesh-wobble-material': NgtMeshWobbleMaterial;
 	}
 }

Diff for: libs/soba/shaders/src/lib/mesh-wobble-material.ts

@@ -57,10 +57,10 @@ class TextCustomMaterialContainer {
 		maxWidth: 200,
 		lineHeight: 1,
 		letterSpacing: 0.02,
-		textAlign: 'left',
+		textAlign: 'left' as const,
 		font: 'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff',
-		anchorX: 'center',
-		anchorY: 'middle',
+		anchorX: 'center' as const,
+		anchorY: 'middle' as const,
 	};
 
 	textRef = viewChild.required(NgtsText);

Diff for: libs/soba/src/abstractions/text.stories.ts

@@ -17,7 +17,7 @@ import { color, makeDecorators, makeStoryObject } from '../setup-canvas';
 	selector: 'accumulative-shadows-suzi',
 	standalone: true,
 	template: `
-		<ngt-primitive *args="[scene()]" [rotation]="[-0.63, 0, 0]" [scale]="2" [position]="[0, -1.175, 0]" />
+		<ngt-primitive *args="[scene()]" [parameters]="{ rotation: [-0.63, 0, 0], scale: 2, position: [0, -1.175, 0] }" />
 	`,
 	imports: [NgtArgs],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],

Diff for: libs/soba/src/staging/accumulative-shadows.stories.ts

@@ -1,8 +1,10 @@
 import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { Meta } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
+import { NgtsHelper } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { NgtsBBAnchor, NgtsBBAnchorOptions } from 'angular-three-soba/staging';
+import { BoxHelper } from 'three';
 import { makeDecorators, makeStoryObject } from '../setup-canvas';
 
 @Component({
@@ -31,17 +33,18 @@ class MeshObject {}
 			<ngts-bb-anchor [options]="options()">
 				<ng-content />
 			</ngts-bb-anchor>
-		</ngt-mesh>
 
-		@if (drawBoundingBox()) {
-			<ngt-box-helper *args="[mesh, 'cyan']" />
-		}
+			@if (drawBoundingBox()) {
+				<ngts-helper [type]="BoxHelper" [options]="['cyan']" />
+			}
+		</ngt-mesh>
 	`,
-	imports: [NgtsBBAnchor, NgtsOrbitControls, NgtArgs],
+	imports: [NgtsBBAnchor, NgtsOrbitControls, NgtArgs, NgtsHelper],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class BBAnchorWrapper {
+	protected readonly BoxHelper = BoxHelper;
 	options = input.required<NgtsBBAnchorOptions>();
 	drawBoundingBox = input(false);
 }

Diff for: libs/soba/src/staging/bb-anchor.stories.ts

@@ -11,8 +11,8 @@ import {
 	untracked,
 	viewChild,
 } from '@angular/core';
-import { ProgressiveLightMap, SoftShadowMaterial } from '@pmndrs/vanilla';
 import { NgtGroup, extend, getLocalState, injectBeforeRender, injectStore, omit, pick } from 'angular-three';
+import { ProgressiveLightMap, SoftShadowMaterial } from 'angular-three-soba/vanilla-exports';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { Group, Mesh, PlaneGeometry } from 'three';

Diff for: libs/soba/staging/src/lib/accumulative-shadows.ts

@@ -0,0 +1,3 @@
+# angular-three-soba/vanilla-exports
+
+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/vanilla-exports`.

Diff for: libs/soba/vanilla-exports/README.md

@@ -0,0 +1,5 @@
+{
+	"lib": {
+		"entryFile": "src/index.ts"
+	}
+}

Diff for: libs/soba/vanilla-exports/ng-package.json

@@ -0,0 +1,21 @@
+import {
+	MeshDiscardMaterial,
+	MeshTransmissionMaterial,
+	ProgressiveLightMap,
+	SoftShadowMaterial,
+} from '@pmndrs/vanilla';
+import { NgtMaterial } from 'angular-three';
+
+export type NgtSoftShadowMaterial = NgtMaterial<InstanceType<typeof SoftShadowMaterial>, typeof SoftShadowMaterial>;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-mesh-standard-material
+		 * @rawOptions color|blend|opacity|alphaTest|map
+		 */
+		'ngt-soft-shadow-material': NgtSoftShadowMaterial;
+	}
+}
+
+export { MeshDiscardMaterial, MeshTransmissionMaterial, ProgressiveLightMap, SoftShadowMaterial };

Diff for: libs/soba/vanilla-exports/src/index.ts

@@ -5,11 +5,9 @@ const logger = createLog();
 
 const { metadataJson, webTypesJson, write } = createBareJsons();
 
-const { typeChecker, sourceFile, typeToTypeNode, typeToString, processIntersectionTypeNode, processTypeMembers } =
-	createProgram(['libs/core/src/lib/three-types.ts']);
-
-/** @type {Map<string, { typeDeclaration: ts.TypeAliasDeclaration, type: ts.Type, typeNode: ts.TypeNode, typeString: string}>} */
-const typeDeclarationMap = new Map();
+const { sourceFile, typesMap, processIntersectionTypeNode, processTypeMembers } = createProgram([
+	'libs/core/src/lib/three-types.ts',
+]);
 
 const THREE_MEMBERS_TO_SKIP = ['ngt-primitive'];
 const THREE_ELEMENTS_NAME = 'ThreeElements';
@@ -19,7 +17,7 @@ const THREE_OBJECT_EVENTS_MAP_NAME = 'NgtObject3DEventsMap';
  * @param {{name: string, attributes: any[]}} metadata
  */
 function processObject3DEvents(metadata) {
-	const object3DEventsMapType = typeDeclarationMap.get(THREE_OBJECT_EVENTS_MAP_NAME).type;
+	const object3DEventsMapType = typesMap[THREE_OBJECT_EVENTS_MAP_NAME].type;
 	for (const member of object3DEventsMapType.properties) {
 		metadata.attributes.push({
 			name: `(${member.name})`,
@@ -43,9 +41,8 @@ ts.forEachChild(sourceFile, (node) => {
 			/** @type {ts.TypeReferenceNode} */
 			const threeMemberType = threeMember.type;
 			const threeMemberTypeName = threeMemberType.typeName.text;
-			const cachedType = typeDeclarationMap.get(threeMemberTypeName);
-			// delete parent from typeDeclaration
-			delete cachedType.typeDeclaration.parent;
+			const cachedType = typesMap[threeMemberTypeName];
+
 			if (!THREE_MEMBERS_TO_SKIP.includes(threeMemberName)) {
 				const threeMemberTypeNode = cachedType.typeNode;
 				if (threeMemberTypeNode) {
@@ -58,6 +55,9 @@ ts.forEachChild(sourceFile, (node) => {
 						processTypeMembers(metadataAtMember, threeMemberTypeNode.members);
 					}
 				} else {
+					if (cachedType.typeString.includes(THREE_OBJECT_EVENTS_MAP_NAME)) {
+						processObject3DEvents(metadataAtMember);
+					}
 					processTypeMembers(metadataAtMember, cachedType.type.properties);
 				}
 			}
@@ -69,20 +69,6 @@ ts.forEachChild(sourceFile, (node) => {
 			webTypesJson.contributions.html.elements.push(metadataAtMember);
 		}
 	}
-
-	if (ts.isTypeAliasDeclaration(node)) {
-		const typeName = node.name.escapedText;
-		const type = typeChecker.getTypeAtLocation(node);
-		const typeNode = typeToTypeNode(type, node);
-		const typeString = typeToString(type, node);
-
-		// remove checker from type
-		delete type.checker;
-
-		typeDeclarationMap.set(typeName, { type, typeDeclaration: node, typeNode, typeString });
-
-		// TODO: we probably should recursively expand the type here as well
-	}
 });
 
 write(metadataJson, webTypesJson);