@benjos/create-boilerplate 1.5.2 → 1.5.6

package/template-vanilla/package.json

@@ -1,7 +1,7 @@
 {
     "name": "template-vanilla",
     "private": true,
-    "version": "1.5.2",
+    "version": "1.5.6",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -13,19 +13,19 @@
         "format:check": "prettier --check ."
     },
     "devDependencies": {
-        "@eslint/js": "^9.39.2",
+        "@eslint/js": "^10.0.1",
         "@types/howler": "^2.2.12",
-        "@types/three": "^0.182.0",
-        "eslint": "^9.39.2",
+        "@types/three": "^0.183.1",
+        "eslint": "^10.1.0",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-prettier": "^5.5.4",
-        "prettier": "^3.7.4",
-        "sass-embedded": "^1.97.1",
+        "eslint-plugin-prettier": "^5.5.5",
+        "prettier": "^3.8.1",
+        "sass-embedded": "^1.98.0",
         "three-perf": "^1.0.11",
         "typescript": "~5.9.3",
-        "typescript-eslint": "^8.50.1",
-        "vite": "^7.3.0",
-        "vite-plugin-glsl": "^1.5.5"
+        "typescript-eslint": "^8.57.1",
+        "vite": "^8.0.1",
+        "vite-plugin-glsl": "^1.5.6"
     },
     "dependencies": {
         "@benjos/cookware": "^1.0.4",
@@ -34,6 +34,6 @@
         "gsap": "^3.14.2",
         "howler": "^2.2.4",
         "lil-gui": "^0.21.0",
-        "three": "^0.182.0"
+        "three": "^0.183.2"
     }
 }

package/template-vanilla/src/experiences/Experience.ts

@@ -22,7 +22,7 @@ class Experience {
     }
 
     private readonly _onReady = async (): Promise<void> => {
-        await MainThreeApp.setCurrentView(ViewId.THREE_VIEW_WORLD_1);
+        await MainThreeApp.setCurrentView(ViewId.THREE_WORLD_1);
     };
 }
 

package/template-vanilla/src/experiences/constants/experiences/ViewId.ts

@@ -1,15 +1,10 @@
-const HTMLViewId = {
-    HTML_LOADER: 'HTML_LOADER',
-} as const;
-
 const ThreeViewId = {
     THREE_LOADER: 'THREE_LOADER',
-    THREE_VIEW_WORLD_1: 'THREE_VIEW_WORLD_1',
-    THREE_VIEW_WORLD_2: 'THREE_VIEW_WORLD_2',
+    THREE_WORLD_1: 'THREE_WORLD_1',
+    THREE_WORLD_2: 'THREE_WORLD_2',
 } as const;
 
 export const ViewId = {
-    ...HTMLViewId,
     ...ThreeViewId,
 } as const;
 

package/template-vanilla/src/experiences/engines/threes/app/MainThreeApp.ts

@@ -25,6 +25,7 @@ class MainThreeApp extends ThreeAppBase {
     ];
 
     declare private _debugWireframeMaterial: MeshStandardMaterial;
+    declare private _debugPreviousCameraId: CameraId;
 
     constructor() {
         super();
@@ -59,6 +60,7 @@ class MainThreeApp extends ThreeAppBase {
         this._cameraController = ThreeCameraControllerManager.get(CameraId.THREE_MAIN);
 
         if (DebugManager.isActive) {
+            this._debugPreviousCameraId = this._cameraController.cameraId;
             ThreeCameraControllerManager.add(new DebugThreeCameraController());
         }
 
@@ -71,14 +73,14 @@ class MainThreeApp extends ThreeAppBase {
     }
 
     protected override _declareViews(): void {
-        this._viewBuilder.set(ViewId.THREE_VIEW_WORLD_1, WorldThreeView);
-        this._viewBuilder.set(ViewId.THREE_VIEW_WORLD_2, World2ThreeView);
+        this._viewBuilder.set(ViewId.THREE_WORLD_1, WorldThreeView);
+        this._viewBuilder.set(ViewId.THREE_WORLD_2, World2ThreeView);
 
         if (DebugManager.isActive) {
             const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
             viewsDebug.add({ resetCurrentView: () => this._currentView.reset() }, 'resetCurrentView');
-            viewsDebug.add({ createWorld1: () => this.setCurrentView(ViewId.THREE_VIEW_WORLD_1) }, 'createWorld1');
-            viewsDebug.add({ createWorld2: () => this.setCurrentView(ViewId.THREE_VIEW_WORLD_2) }, 'createWorld2');
+            viewsDebug.add({ createWorld1: () => this.setCurrentView(ViewId.THREE_WORLD_1) }, 'createWorld1');
+            viewsDebug.add({ createWorld2: () => this.setCurrentView(ViewId.THREE_WORLD_2) }, 'createWorld2');
         }
     }
 
@@ -91,8 +93,9 @@ class MainThreeApp extends ThreeAppBase {
     private readonly _onKeyDown = (_e: KeyboardEvent): void => {
         if (DebugManager.isActive) {
             if (DomKeyboardManager.areAllKeysDown(MainThreeApp._TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS)) {
+                if (this._cameraController.cameraId !== CameraId.THREE_DEBUG) this._debugPreviousCameraId = this._cameraController.cameraId;
                 ThreeCameraControllerManager.setActiveCamera(
-                    this._cameraController.cameraId === CameraId.THREE_MAIN ? CameraId.THREE_DEBUG : CameraId.THREE_MAIN
+                    this._cameraController.cameraId === CameraId.THREE_DEBUG ? this._debugPreviousCameraId : CameraId.THREE_DEBUG
                 );
             } else if (DomKeyboardManager.areAllKeysDown(MainThreeApp._TOGGLE_WIREFRAME_KEYS)) {
                 if (this._scene.overrideMaterial === null) {

package/template-vanilla/src/experiences/managers/LoaderManager.ts

@@ -11,7 +11,7 @@ class LoaderManager {
     private _elapsed = 0;
     private _hasAssetsToLoad = false;
     private _assetsFinished = false;
-    private _transitionResolve: (() => void) | null = null;
+    private _transitionResolves: (() => void)[] = [];
     private _showTransition: (() => Promise<void>) | null = null;
     private _hideTransition: (() => Promise<void>) | null = null;
 
@@ -85,7 +85,8 @@ class LoaderManager {
             this._progress = 1;
             this.onProgress.execute();
             TickerManager.remove(this._onTransitionTick);
-            if (this._transitionResolve) this._transitionResolve();
+            this._transitionResolves.forEach((resolve) => resolve());
+            this._transitionResolves = [];
         }
     };
 
@@ -110,11 +111,9 @@ class LoaderManager {
             }
 
             await new Promise<void>((resolve) => {
-                this._transitionResolve = resolve;
+                this._transitionResolves.push(resolve);
                 TickerManager.add(this._onTransitionTick);
             });
-
-            this._transitionResolve = null;
         }
 
         if (onReady) await onReady();

package/template-vanilla/src/experiences/materials/threes/loaders/LoaderMaterial.ts

@@ -1,22 +1,23 @@
 import gsap from 'gsap';
-import { Color, ShaderMaterial } from 'three';
+import { Color, ShaderMaterial, Uniform } from 'three';
 import LoaderFragmentShader from '../../../shaders/threes/loaders/LoaderFragmentShader.glsl';
 import LoaderVertexShader from '../../../shaders/threes/loaders/LoaderVertexShader.glsl';
 
 export default class LoaderMaterial extends ShaderMaterial {
-    private static readonly _DEFAULT_UNIFORMS_ALPHA: number = 1;
     private static readonly _DEFAULT_UNIFORMS_COLOR: number = 0x3f79f3;
     private static readonly _GSAP_DURATION_FADE_IN: number = 0.5;
     private static readonly _GSAP_EASE_FADE_IN: string = 'power2.out';
     private static readonly _GSAP_DURATION_FADE_OUT: number = 1.5;
     private static readonly _GSAP_EASE_FADE_OUT: string = 'power2.in';
 
+    private _isFirstLoad: boolean = true;
+
     constructor() {
         super({
             transparent: true,
             uniforms: {
-                uAlpha: { value: LoaderMaterial._DEFAULT_UNIFORMS_ALPHA },
-                uColor: { value: new Color(LoaderMaterial._DEFAULT_UNIFORMS_COLOR) },
+                uAlpha: new Uniform(1),
+                uColor: new Uniform(new Color(LoaderMaterial._DEFAULT_UNIFORMS_COLOR)),
             },
             vertexShader: LoaderVertexShader,
             fragmentShader: LoaderFragmentShader,
@@ -25,11 +26,13 @@ export default class LoaderMaterial extends ShaderMaterial {
 
     public async show(): Promise<void> {
         gsap.killTweensOf(this.uniforms.uAlpha);
+        this.uniforms.uAlpha.value = this._isFirstLoad ? 1 : 0;
         await gsap.to(this.uniforms.uAlpha, {
             value: 1,
-            duration: LoaderMaterial._GSAP_DURATION_FADE_IN,
+            duration: this._isFirstLoad ? 0 : LoaderMaterial._GSAP_DURATION_FADE_IN,
             ease: LoaderMaterial._GSAP_EASE_FADE_IN,
         });
+        this._isFirstLoad = false;
     }
 
     public async hide(): Promise<void> {

package/template-vanilla/src/experiences/views/threes/bases/ThreeViewBase.ts

@@ -1,6 +1,6 @@
 import { Object3D } from 'three';
 import { ViewId } from '../../../constants/experiences/ViewId';
-import ThreeActorBase from '../worlds/components/actors/bases/ThreeActorBase';
+import ThreeActorBase from './components/ThreeActorBase';
 
 export default abstract class ThreeViewBase extends Object3D {
     private readonly _id: ViewId;

package/{template-vue/src/experiences/views/threes/worlds/components/actors/bases → template-vanilla/src/experiences/views/threes/bases/components}/ThreeAnimatedModelBase.ts

@@ -1,7 +1,7 @@
 import { AnimationAction, AnimationMixer } from 'three';
-import type { AnimationId } from '../../../../../../constants/experiences/AnimationId';
-import type { AssetId } from '../../../../../../constants/experiences/AssetId';
-import ThreeAssetsManager from '../../../../../../managers/threes/ThreeAssetsManager';
+import type { AnimationId } from '../../../../constants/experiences/AnimationId';
+import type { AssetId } from '../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
 import ThreeModelBase, { type ModelBaseParams } from './ThreeModelBase';
 
 export default abstract class ThreeAnimatedModelBase extends ThreeModelBase {

package/template-vanilla/src/experiences/views/threes/{worlds/components/actors/bases → bases/components}/ThreeModelBase.ts

@@ -1,8 +1,8 @@
 import { Mesh, Object3D, type Group } from 'three';
 import { SkeletonUtils } from 'three/examples/jsm/Addons.js';
-import type { AssetId } from '../../../../../../constants/experiences/AssetId';
-import type { Object3DId } from '../../../../../../constants/experiences/Object3dId';
-import ThreeAssetsManager from '../../../../../../managers/threes/ThreeAssetsManager';
+import type { AssetId } from '../../../../constants/experiences/AssetId';
+import type { Object3DId } from '../../../../constants/experiences/Object3dId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
 import ThreeActorBase from './ThreeActorBase';
 
 export interface ModelBaseParams {

package/template-vanilla/src/experiences/views/threes/loaders/components/TemplateLoaderThreeActor.ts

@@ -1,6 +1,6 @@
 import { Mesh, PlaneGeometry } from 'three';
 import LoaderMaterial from '../../../../materials/threes/loaders/LoaderMaterial';
-import ThreeActorBase from '../../worlds/components/actors/bases/ThreeActorBase';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 export default class TemplateLoaderThreeActor extends ThreeActorBase {
     private static readonly _DEFAULT_SIZE_WIDTH: number = 2;

package/template-vanilla/src/experiences/views/threes/worlds/World2ThreeView.ts

@@ -4,13 +4,13 @@ import MainThreeApp from '../../../engines/threes/app/MainThreeApp';
 import DebugManager from '../../../managers/DebugManager';
 import ThreeViewBase from '../bases/ThreeViewBase';
 import Environment from './components/Environment';
-import TemplateFont from './components/actors/TemplateFont';
-import TemplateMesh2 from './components/actors/TemplateMesh2';
-import TemplateModel from './components/actors/TemplateModel';
+import TemplateFont from './components/TemplateFont';
+import TemplateMesh2 from './components/TemplateMesh2';
+import TemplateModel from './components/TemplateModel';
 
 export default class World2ThreeView extends ThreeViewBase {
     constructor() {
-        super(ViewId.THREE_VIEW_WORLD_2);
+        super(ViewId.THREE_WORLD_2);
     }
 
     protected override _generateActors(): void {
@@ -18,7 +18,7 @@ export default class World2ThreeView extends ThreeViewBase {
 
         if (DebugManager.isActive) {
             const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
-            viewsDebug.add({ switchToWorld2ThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_VIEW_WORLD_2) }, 'switchToWorld2ThreeView').name('SWITCH WORLD_2_VIEW');
+            viewsDebug.add({ switchToWorld2ThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_WORLD_2) }, 'switchToWorld2ThreeView').name('SWITCH WORLD_2_VIEW');
         }
 
         this._actors.push(new Environment());

package/template-vanilla/src/experiences/views/threes/worlds/WorldThreeView.ts

@@ -4,13 +4,13 @@ import MainThreeApp from '../../../engines/threes/app/MainThreeApp';
 import DebugManager from '../../../managers/DebugManager';
 import ThreeViewBase from '../bases/ThreeViewBase';
 import Environment from './components/Environment';
-import TemplateFont from './components/actors/TemplateFont';
-import TemplateMesh from './components/actors/TemplateMesh';
-import TemplateModel from './components/actors/TemplateModel';
+import TemplateFont from './components/TemplateFont';
+import TemplateMesh from './components/TemplateMesh';
+import TemplateModel from './components/TemplateModel';
 
 export default class WorldThreeView extends ThreeViewBase {
     constructor() {
-        super(ViewId.THREE_VIEW_WORLD_1);
+        super(ViewId.THREE_WORLD_1);
     }
 
     protected override _generateActors(): void {
@@ -18,7 +18,7 @@ export default class WorldThreeView extends ThreeViewBase {
 
         if (DebugManager.isActive) {
             const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
-            viewsDebug.add({ switchToWorldThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_VIEW_WORLD_1) }, 'switchToWorldThreeView').name('SWITCH WORLD_1_VIEW');
+            viewsDebug.add({ switchToWorldThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_WORLD_1) }, 'switchToWorldThreeView').name('SWITCH WORLD_1_VIEW');
         }
 
         this._actors.push(new Environment());

package/template-vanilla/src/experiences/views/threes/worlds/components/Environment.ts

@@ -4,7 +4,7 @@ import { DebugGuiTitle } from '../../../../constants/experiences/DebugGuiTitle';
 import MainThreeApp from '../../../../engines/threes/app/MainThreeApp';
 import DebugManager from '../../../../managers/DebugManager';
 import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
-import ThreeActorBase from './actors/bases/ThreeActorBase';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 interface EnvironmentMap {
     intensity?: number;

package/template-vanilla/src/experiences/views/threes/worlds/components/{actors/TemplateFont.ts → TemplateFont.ts}

@@ -1,8 +1,8 @@
 import { Mesh, MeshStandardMaterial, type MeshStandardMaterialParameters } from 'three';
 import { TextGeometry, type TextGeometryParameters } from 'three/examples/jsm/Addons.js';
-import { AssetId } from '../../../../../constants/experiences/AssetId';
-import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
-import ThreeActorBase from './bases/ThreeActorBase';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 export default class TemplateFont extends ThreeActorBase {
     private static readonly _DEFAULT_TEXT: string = 'Hello boilerplate!';

package/template-vanilla/src/experiences/views/threes/worlds/components/{actors/TemplateMesh.ts → TemplateMesh.ts}

@@ -1,7 +1,7 @@
 import { Mesh, MeshStandardMaterial, RepeatWrapping, SphereGeometry, type MeshStandardMaterialParameters } from 'three';
-import { AssetId } from '../../../../../constants/experiences/AssetId';
-import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
-import ThreeActorBase from './bases/ThreeActorBase';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 export default class TemplateMesh extends ThreeActorBase {
     private static readonly _DEFAULT_GEOMETRY_RADIUS = 1;

package/template-vanilla/src/experiences/views/threes/worlds/components/{actors/TemplateMesh2.ts → TemplateMesh2.ts}

@@ -1,7 +1,7 @@
 import { BoxGeometry, Mesh, MeshStandardMaterial, RepeatWrapping, type MeshStandardMaterialParameters } from 'three';
-import { AssetId } from '../../../../../constants/experiences/AssetId';
-import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
-import ThreeActorBase from './bases/ThreeActorBase';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 export default class TemplateMesh2 extends ThreeActorBase {
     private static readonly _DEFAULT_GEOMETRY_WIDTH = 2;

package/template-vanilla/src/experiences/views/threes/worlds/components/{actors/TemplateModel.ts → TemplateModel.ts}

@@ -1,8 +1,8 @@
 import { Vector3 } from 'three';
-import { AssetId } from '../../../../../constants/experiences/AssetId';
-import { DebugGuiTitle } from '../../../../../constants/experiences/DebugGuiTitle';
-import DebugManager from '../../../../../managers/DebugManager';
-import ThreeModelBase from './bases/ThreeModelBase';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import { DebugGuiTitle } from '../../../../constants/experiences/DebugGuiTitle';
+import DebugManager from '../../../../managers/DebugManager';
+import ThreeModelBase from '../../bases/components/ThreeModelBase';
 
 export default class TemplateModel extends ThreeModelBase {
     private static readonly _DEFAULT_POSITION: Vector3 = new Vector3(0, 1, 0);

package/template-vanilla/tsconfig.json

@@ -1,10 +1,10 @@
 {
     "compilerOptions": {
-        "target": "ES2020",
+        "target": "ES2022",
         "module": "ESNext",
-        "moduleResolution": "Node",
+        "moduleResolution": "bundler",
         "strict": true,
-        "lib": ["DOM", "ES2020"],
+        "lib": ["DOM", "DOM.Iterable", "ES2022"],
         "skipLibCheck": true,
         "noEmit": true
     },