angular-threejs · JeevanMahesha · Jun 20, 2025 · Jun 20, 2025
diff --git a/.gitignore b/.gitignore
@@ -45,4 +45,6 @@ Thumbs.db
 .nx/workspace-data
 
 vite.config.*.timestamp*
-vitest.config.*.timestamp*
+vitest.config.*.timestamp*
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
diff --git a/apps/ionic-app/project.json b/apps/ionic-app/project.json
@@ -102,7 +102,8 @@
 					"buildTarget": "ionic-app:build:development"
 				}
 			},
-			"defaultConfiguration": "development"
+			"defaultConfiguration": "development",
+			"continuous": true
 		},
 		"extract-i18n": {
 			"executor": "@angular-devkit/build-angular:extract-i18n",

diff --git a/apps/ionic-app/src/app/app.component.ts b/apps/ionic-app/src/app/app.component.ts
@@ -1,10 +1,10 @@
-import { CommonModule } from '@angular/common';
+
 import { Component } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
 
 @Component({
 	selector: 'platform-root',
-	imports: [CommonModule, IonicModule],
+	imports: [IonicModule],
 	template: `
 		<ion-app>
 			<ion-router-outlet></ion-router-outlet>

diff --git a/apps/kitchen-sink/src/app/routed-rocks/cursor.ts b/apps/kitchen-sink/src/app/routed-rocks/cursor.ts
@@ -1,5 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { Directive, ElementRef, inject } from '@angular/core';
+
+import { Directive, ElementRef, inject, DOCUMENT } from '@angular/core';
 import { getLocalState, injectObjectEvents } from 'angular-three';
 import { Object3D } from 'three';
 

diff --git a/apps/kitchen-sink/src/app/soba/camera-scroll/model.ts b/apps/kitchen-sink/src/app/soba/camera-scroll/model.ts
@@ -3,14 +3,15 @@ Command: npx angular-three-gltf&#64;1.1.11 apps/kitchen-sink/src/app/soba/camera
 **/
 
 import {
-	ChangeDetectionStrategy,
-	Component,
-	CUSTOM_ELEMENTS_SCHEMA,
-	effect,
-	ElementRef,
-	inject,
-	signal,
-	viewChild,
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  effect,
+  ElementRef,
+  inject,
+  signal,
+  viewChild,
+  DOCUMENT
 } from '@angular/core';
 import { injectBeforeRender, NgtArgs, NgtThreeEvent } from 'angular-three';
 import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
@@ -21,7 +22,7 @@ import { BufferGeometry, Color, Group, MathUtils, Mesh, MeshStandardMaterial } f
 import { GLTF } from 'three-stdlib';
 import { SCROLL } from './camera-scroll';
 
-import { DOCUMENT } from '@angular/common';
+
 import modelUrl from './model-transformed.glb';
 
 type ActionName = 'CameraAction.005';

diff --git a/apps/kitchen-sink/src/app/soba/camera-scroll/overlay.ts b/apps/kitchen-sink/src/app/soba/camera-scroll/overlay.ts
@@ -1,5 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ElementRef, inject, viewChild } from '@angular/core';
+
+import { ChangeDetectionStrategy, Component, ElementRef, inject, viewChild, DOCUMENT } from '@angular/core';
 import { SCROLL } from './camera-scroll';
 
 @Component({

diff --git a/apps/kitchen-sink/src/app/soba/html-chart/html-chart.ts b/apps/kitchen-sink/src/app/soba/html-chart/html-chart.ts
@@ -1,12 +1,13 @@
-import { DOCUMENT } from '@angular/common';
+
 import {
-	afterNextRender,
-	ChangeDetectionStrategy,
-	Component,
-	DestroyRef,
-	effect,
-	inject,
-	Injector,
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  effect,
+  inject,
+  Injector,
+  DOCUMENT
 } from '@angular/core';
 import { NgtCanvas } from 'angular-three';
 import { Experience } from './experience';

diff --git a/eslint.config.js b/eslint.config.js
@@ -80,4 +80,7 @@ module.exports = [
 			'@angular-eslint/prefer-standalone': 'off',
 		},
 	},
+	{
+		ignores: ['**/vite.config.*.timestamp*', '**/vitest.config.*.timestamp*'],
+	},
 ];
diff --git a/libs/core/nativescript/src/lib/canvas.ts b/libs/core/nativescript/src/lib/canvas.ts
@@ -1,24 +1,25 @@
 import '@nativescript/canvas-three';
 
-import { DOCUMENT } from '@angular/common';
+
 import {
-	booleanAttribute,
-	ChangeDetectionStrategy,
-	Component,
-	ComponentRef,
-	createEnvironmentInjector,
-	DestroyRef,
-	EnvironmentInjector,
-	inject,
-	Injector,
-	input,
-	NgZone,
-	NO_ERRORS_SCHEMA,
-	output,
-	Type,
-	untracked,
-	viewChild,
-	ViewContainerRef,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  ComponentRef,
+  createEnvironmentInjector,
+  DestroyRef,
+  EnvironmentInjector,
+  inject,
+  Injector,
+  input,
+  NgZone,
+  NO_ERRORS_SCHEMA,
+  output,
+  Type,
+  untracked,
+  viewChild,
+  ViewContainerRef,
+  DOCUMENT
 } from '@angular/core';
 import { registerElement } from '@nativescript/angular';
 import { Canvas } from '@nativescript/canvas';

diff --git a/libs/core/src/lib/pipes/hexify.ts b/libs/core/src/lib/pipes/hexify.ts
@@ -1,5 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { inject, Pipe } from '@angular/core';
+
+import { inject, Pipe, DOCUMENT } from '@angular/core';
 
 const RGBA_REGEX = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*\.?\d+)?\)/;
 const DEFAULT_COLOR = 0x000000;

diff --git a/libs/core/src/lib/renderer/index.ts b/libs/core/src/lib/renderer/index.ts
@@ -1,14 +1,15 @@
-import { DOCUMENT } from '@angular/common';
+
 import {
-	DebugNode,
-	Injectable,
-	Renderer2,
-	RendererFactory2,
-	RendererType2,
-	Type,
-	inject,
-	makeEnvironmentProviders,
-	untracked,
+  DebugNode,
+  Injectable,
+  Renderer2,
+  RendererFactory2,
+  RendererType2,
+  Type,
+  inject,
+  makeEnvironmentProviders,
+  untracked,
+  DOCUMENT
 } from '@angular/core';
 import { NgtArgs } from '../directives/args';
 import { NgtParent } from '../directives/parent';

diff --git a/libs/core/src/lib/routed-scene.ts b/libs/core/src/lib/routed-scene.ts
@@ -1,16 +1,15 @@
 import {
-	ChangeDetectorRef,
-	Component,
-	createEnvironmentInjector,
-	Directive,
-	effect,
-	EnvironmentInjector,
-	inject,
-	InjectFlags,
-	InjectOptions,
-	ProviderToken,
-	RendererFactory2,
-	runInInjectionContext,
+  ChangeDetectorRef,
+  Component,
+  createEnvironmentInjector,
+  Directive,
+  effect,
+  EnvironmentInjector,
+  inject,
+  InjectOptions,
+  ProviderToken,
+  RendererFactory2,
+  runInInjectionContext
 } from '@angular/core';
 import { ActivatedRoute, ActivationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs';
@@ -31,7 +30,7 @@ class NgtOutletEnvironmentInjector extends EnvironmentInjector {
 	override get<T>(
 		token: ProviderToken<T>,
 		notFoundValue?: unknown,
-		flags: InjectFlags | InjectOptions = InjectFlags.Default,
+		flags: InjectFlags | InjectOptions = {},
 	): any {
 		const options: InjectOptions = {};
 

diff --git a/libs/core/src/lib/store.ts b/libs/core/src/lib/store.ts
@@ -1,5 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { ElementRef, InjectOptions, InjectionToken, effect, inject } from '@angular/core';
+
+import { ElementRef, InjectOptions, InjectionToken, effect, inject, DOCUMENT } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Clock, Vector2, Vector3 } from 'three';
 import { injectLoop } from './loop';

diff --git a/libs/soba/.storybook/documentation-template.mdx b/libs/soba/.storybook/documentation-template.mdx
@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Description, Primary, Controls } from '@storybook/addon-docs/blocks';
 
 {/\*
 

diff --git a/libs/soba/.storybook/main.ts b/libs/soba/.storybook/main.ts
@@ -1,11 +1,23 @@
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
 import { StorybookConfig } from '@storybook/angular';
 
+const require = createRequire(import.meta.url);
+
 const config: StorybookConfig = {
 	stories: ['../**/*.mdx', '../**/*.stories.@(js|ts)'],
-	addons: ['@storybook/addon-essentials', 'storybook-addon-deep-controls', '@chromatic-com/storybook'],
+	addons: [
+        getAbsolutePath("storybook-addon-deep-controls"),
+        getAbsolutePath("@chromatic-com/storybook"),
+        getAbsolutePath("@storybook/addon-docs")
+    ],
 	staticDirs: ['./public', './public/cube'],
-	framework: '@storybook/angular',
+	framework: getAbsolutePath("@storybook/angular"),
 	docs: {},
 };
 
 export default config;
+
+function getAbsolutePath(value: string): any {
+    return dirname(require.resolve(join(value, "package.json")));
+}
diff --git a/libs/soba/.storybook/manager.ts b/libs/soba/.storybook/manager.ts
@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import theme from './theme';
 
 addons.setConfig({ theme });

diff --git a/libs/soba/.storybook/theme.ts b/libs/soba/.storybook/theme.ts
@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 
 export default create({
 	base: 'light',

diff --git a/libs/soba/abstractions/src/lib/gradient-texture.ts b/libs/soba/abstractions/src/lib/gradient-texture.ts
@@ -1,12 +1,13 @@
-import { DOCUMENT } from '@angular/common';
+
 import {
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	CUSTOM_ELEMENTS_SCHEMA,
-	inject,
-	input,
-	untracked,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  CUSTOM_ELEMENTS_SCHEMA,
+  inject,
+  input,
+  untracked,
+  DOCUMENT
 } from '@angular/core';
 import { extend, injectStore, NgtArgs, NgtAttachable, NgtTexture, omit } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';

diff --git a/libs/soba/controls/src/lib/scroll-controls.ts b/libs/soba/controls/src/lib/scroll-controls.ts
@@ -1,14 +1,15 @@
-import { DOCUMENT } from '@angular/common';
+
 import {
-	ChangeDetectionStrategy,
-	Component,
-	Directive,
-	effect,
-	ElementRef,
-	inject,
-	input,
-	model,
-	untracked,
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  untracked,
+  DOCUMENT
 } from '@angular/core';
 import { injectBeforeRender, injectStore, NgtHTML, pick, provideHTMLDomElement } from 'angular-three';
 import { easing } from 'maath';

diff --git a/libs/soba/eslint.config.js b/libs/soba/eslint.config.js
@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 const { FlatCompat } = require('@eslint/eslintrc');
 const js = require('@eslint/js');
 const baseConfig = require('../../eslint.config.js');

diff --git a/libs/soba/gizmos/src/lib/gizmo-helper/gizmo-viewcube.ts b/libs/soba/gizmos/src/lib/gizmo-helper/gizmo-viewcube.ts
@@ -1,13 +1,14 @@
-import { DOCUMENT } from '@angular/common';
+
 import {
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	CUSTOM_ELEMENTS_SCHEMA,
-	inject,
-	input,
-	output,
-	signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  CUSTOM_ELEMENTS_SCHEMA,
+  inject,
+  input,
+  output,
+  signal,
+  DOCUMENT
 } from '@angular/core';
 import {
 	extend,

diff --git a/libs/soba/gizmos/src/lib/gizmo-helper/gizmo-viewport.ts b/libs/soba/gizmos/src/lib/gizmo-helper/gizmo-viewport.ts
@@ -1,13 +1,14 @@
-import { DOCUMENT } from '@angular/common';
+
 import {
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	CUSTOM_ELEMENTS_SCHEMA,
-	inject,
-	input,
-	output,
-	signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  CUSTOM_ELEMENTS_SCHEMA,
+  inject,
+  input,
+  output,
+  signal,
+  DOCUMENT
 } from '@angular/core';
 import {
 	extend,

diff --git a/libs/soba/stats/src/lib/stats.ts b/libs/soba/stats/src/lib/stats.ts
@@ -1,5 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { computed, Directive, effect, ElementRef, inject, input, untracked } from '@angular/core';
+
+import { computed, Directive, effect, ElementRef, inject, input, untracked, DOCUMENT } from '@angular/core';
 import { addAfterEffect, injectStore, omit, pick, resolveRef } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import Stats from 'stats-gl';
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,4 +80,7 @@ module.exports = [ @@
     			'@angular-eslint/prefer-standalone': 'off',
     		},
     	},
+    	{
+    		ignores: ['**/vite.config.*.timestamp*', '**/vitest.config.*.timestamp*'],
+    	},
     ];