Skip to content

Conversation

@alvarosabu
Copy link
Member

@alvarosabu alvarosabu commented May 24, 2025

This PR introduces a Vue devtools inspector tree to inspect the TresContext.

  • Refactor and cleaning of devtools logic with input handlers file.

- Updated `createContextNode` to include an optional `parentKey` parameter for better context chaining.
- Modified `buildContextGraph` to utilize the new `parentKey` for constructing chained keys during recursion.
- Added handling for context nodes in the inspector state, allowing for dynamic traversal of context objects based on chained keys.
- Improved readability and maintainability of the context graph logic.
- Enhanced the logic for extracting UUIDs from scene node IDs to ensure proper handling of scene objects.
- Updated the inspector state editing to reflect the new UUID extraction method, improving reliability when editing scene objects.
- Set the `editable` property to false for certain inspector values to prevent unintended modifications.
- Added `inspectorHandlers.ts` to manage inspector tree and state updates, enhancing the interaction with the Tres context.
- Introduced functions for creating nodes in the inspector tree, building graphs for scene and context objects, and handling state edits.
- Updated `TresCanvas.vue` to ensure proper context handling when registering Tres Devtools.
- Refactored `plugin.ts` to utilize the new inspector handlers, improving code organization and maintainability.
- Created type definitions in `types.ts` for better clarity and type safety in inspector-related functionalities.
@alvarosabu alvarosabu added feature p3-significant High-priority enhancement (priority) labels May 24, 2025
@alvarosabu alvarosabu added this to the v5 milestone May 24, 2025
@alvarosabu alvarosabu requested a review from Tinoooo May 24, 2025 11:18
@pkg-pr-new
Copy link

pkg-pr-new bot commented May 24, 2025

Open in StackBlitz

npm i https://pkg.pr.new/@tresjs/core@1013

commit: 6279b47

- Removed the `uuid` property from the `TresContext` interface as it is no longer necessary.
- Updated the UUID generation in `buildContextGraph` to safely access the scene's UUID, ensuring compatibility with the new context structure.
- Removed the unused `MathUtils` import from `useTresContextProvider/index.ts` to clean up the code and improve maintainability.
@alvarosabu alvarosabu merged commit ff6723c into next Jun 6, 2025
5 checks passed
@alvarosabu alvarosabu deleted the feature/1012-add-context-inspector-devtools branch June 6, 2025 07:02
@alvarosabu alvarosabu linked an issue Jun 12, 2025 that may be closed by this pull request
4 tasks
alvarosabu added a commit that referenced this pull request Sep 20, 2025
* chore: replace useLogger with logger utility functions (#964)

- Removed useLogger imports from various composables and directives.
- Introduced logError and logWarning functions from the new logger utility.
- Updated relevant code to utilize the new logging methods for improved clarity and maintainability.

* feat!: update package.json and vite.config.ts for build configuration (#960)

BREAKING CHANGE: Tres is now ESM only

- Removed UMD build configuration from package.json and adjusted exports to only include ES module.
- Updated vite.config.ts to specify the output format as ES, enhancing compatibility with modern module systems.

* fix: export logger utility from utils in index.ts (#966)

- Added export for the logger utility from './utils/logger' to enhance logging capabilities across the ecosystem

* refactor: update utility imports in composables and core files (#973)

- Changed import statements in various files to directly import specific utility functions from './utils/is' instead of importing the entire module.
- This improves clarity and reduces potential namespace conflicts, ensuring that only the necessary functions are imported for use.
- Updated related logic in composables and core operations to utilize the new import structure for better maintainability.

* feat: 974-createsetup-devtools (#975)

* feat: integrate devtools setup for performance monitoring

- Added a new `setupDevtools` function to manage performance metrics such as FPS and memory usage.
- Integrated the `setupDevtools` function into the `useTresContextProvider` to enhance the development experience.
- Updated the `index.vue` page to utilize the `useControls` for FPS graphing.
- Cleaned up unused performance-related code to streamline the context provider logic.

* Update src/devtools/setupDevtools.ts

Co-authored-by: Damien Montastier <[email protected]>

* Update src/devtools/setupDevtools.ts

Co-authored-by: Damien Montastier <[email protected]>

* refactor: improve readability in setupDevtools.ts

- Adjusted indentation and formatting in the `setupDevtools` function to enhance code clarity.
- Ensured consistent use of braces for conditional statements to improve maintainability and readability.

* refactor: added boundedPush util

- Introduced a new utility function `boundedPush` in `perf.ts` to streamline the logic for maintaining a fixed-length array for performance metrics.
- Updated `setupDevtools.ts` to utilize `boundedPush` for both FPS and memory usage tracking, enhancing code clarity and reducing redundancy.

---------

Co-authored-by: Damien Montastier <[email protected]>

* feat(deps): update @vue/devtools-api and @tresjs/cientos dependencies (#977)

- Upgraded @vue/devtools-api from version 6.6.3 to 7.7.2 for improved functionality.
- Updated @tresjs/cientos dependency to a specific version hosted at a new URL for better version control.
- Enabled Vue DevTools in the Vite configuration for enhanced development experience.
- Adjusted the homepage link in the devtools plugin for accurate documentation reference.

* feat(loader)!: refactor useLoader to a true composable (#959)

* feat(loader): introduce useLoader composable and documentation

- Added `useLoader` composable for loading resources with THREE.js, supporting single and multiple resource loading, loading state tracking, and error handling.
- Created comprehensive documentation for `useLoader`, detailing its features, usage examples, and API reference.
- Updated various playground components to utilize the new `useLoader` composable for loading GLTF and FBX models.
- Added new demo pages for loading multiple models and using the `UseLoader` component in templates.

* feat(loader)!: introduce useLoader composable and documentation

BREAKING CHANGE: useLoader no longer returns the plain obj, it now returns and object with reactive data (resource|s), isLoading, error) and a load method, can be used both sync and async (suspense)

- Added `useLoader` composable for loading resources with THREE.js, supporting single and multiple resource loading, loading state tracking, and error handling.
- Created comprehensive documentation for `useLoader`, detailing its features, usage examples, and API reference.
- Updated various playground components to utilize the new `useLoader` composable for loading GLTF and FBX models.
- Added new demo pages for loading multiple models and using the `UseLoader` component in templates.

* chore(loader): simplify useLoader implementation and clean up imports

- Updated the `UseLoader` component in documentation to remove unnecessary destructuring of the slot props.
- Cleaned up imports in `BlenderCube.vue`, `Suzanne.vue`, and `TheExperience.vue` by removing unused types.
- Added eslint-disable comments for console logging in `Suzanne.vue` and `TheExperience.vue` to improve code readability while debugging.

* feat: useGraph to generate named object material collections

* feat: useAsyncState for useLoader

- Added documentation for the `useLoader` composable, detailing its features, usage examples, and API reference.
- Updated the navigation in the VitePress configuration to include a link to the new `useLoader` documentation.
- Enhanced the `useLoader` composable to support better type safety and resource management.
- Removed the `Suzanne.vue` component as part of the cleanup process.

* feat: enhance useLoader and useGraph composables

- Updated the `useLoader` composable to improve type safety and support loading textures alongside models.
- Refactored the `useGraph` composable to accept both Object3D and TresObject types, enhancing its flexibility.
- Added new examples and documentation for loading multiple models and textures, including progress tracking.
- Cleaned up and organized playground components to demonstrate the new features effectively.

* refactor(useLoader.test): clean up imports by removing unused `nextTick` import

- Removed the unused `nextTick` import from the `useLoader.test.ts` file to streamline the code and improve readability.

* docs: remove trailing spaces in team.md for consistency

- Cleaned up trailing spaces in the `team.md` file to improve code consistency and readability.

* fix(graph): export also types from graph utils

* refactor(index.ts): remove unused export of buildGraph

- Removed the unused `buildGraph` export from `index.ts` to streamline the code and improve maintainability.

* feat: enhance resources loading with progress tracking

- Enhanced the `useLoader` composable to return progress information, allowing for better user feedback during model loading.
- Updated `TheModel.vue` to utilize the new progress tracking feature from the `useLoader` composable.
- Removed the unused `LoadingManager` and integrated progress updates directly into the component's state.
- Updated docs

* feat: added tests to load and progress

* chore: release v5.0.0-next.0

* chore: type checking in ci (#988)

* added typecheck script

* added typecheck to ci

* ts error fixes

* fixed import

* docs: added cientos next to docs to fix build

* merged lint and typecheck workflow

* added eol

* removed shit added by ai

* improved workflow dependencies

* lint fix

* made pkg.pr.new dependent on lint and typecheck

* added branch filters to workflow_run triggers in pkg.pr.new.yml and test.yml

* trying to get workflow to run

* merged workflows

* adjusted triggers for ci

* restored pkg.pr.new.yml

* trying again

* restored pkg.pr.new.yml again

---------

Co-authored-by: alvarosabu <[email protected]>

* refactor: reorganize devtools setup and imports (#991)

* refactor: reorganize devtools setup and imports

- Moved the `registerTresDevtools` import in `TresCanvas.vue` to improve clarity and ensure proper registration of devtools.
- Renamed `setupDevtools` to `setupTresDevtools` in `setupDevtools.ts` for consistency with the new naming convention.
- Updated the `registerTresDevtools` function in `plugin.ts` to call the renamed `setupTresDevtools`, ensuring proper integration of the devtools setup.
- Removed the unused `setupDevtools` call from `useTresContextProvider` to streamline the context provider logic.

* refactor: remove unused setupDevtools import from useTresContextProvider

- Eliminated the unused `setupDevtools` import from `useTresContextProvider` to streamline the context provider logic and improve code clarity.

* feat!: deprecate useSeek composable and update documentation (#990)

* feat!: deprecate useSeek composable and update documentation

BREAKING CHANGE: `useSeek` is deprecated

- Marked the `useSeek` composable as deprecated in the documentation, indicating its removal in v5.0.0.
- Removed the `useSeek` composable implementation and its associated tests from the codebase to streamline the composables directory.
- Updated the documentation to reflect the deprecation status and provide guidance for users.

* Update docs/api/composables.md

Co-authored-by: Tino Koch <[email protected]>

---------

Co-authored-by: Tino Koch <[email protected]>

* chore: update-cientos-next-for-playground-docs (#996)

* chore: fix some stuff for playground on next

- Updated `@tresjs/cientos` and `@tresjs/leches` dependencies to specific versions in `pnpm-lock.yaml` and `package.json`.
- Refactored `BlenderCube.vue` to utilize computed properties for model handling and removed unused controls.
- Replaced `GraphPane.vue` with `TresLeches` for rendering performance metrics in `OnDemandRendering.vue` and `experience.vue`.
- Introduced `BrownianDistribution.vue` for a new demo showcasing Brownian distribution.
- Cleaned up unused state management code and removed `GraphPane.vue` and `state.ts` to streamline the codebase.
- Updated routing to reflect new component structure and added a route for the new Brownian distribution demo.

* chore: remove unused import from index.vue

- Eliminated the unused `useControls` import from `index.vue` to streamline the code and improve clarity.

* refactor!: 979 move renderer logic from usetrescontextprovider to userenderer 2 (#993)

* added typecheck script

* added typecheck to ci

* ts error fixes

* fixed import

* moved render state stuff to useRenderer

* chore!: stripped unnecessarily returned elements from useRenderer

BREAKING CHANGE:

- useRenderer now returns invalidate and advance
- useTresContextProvider no longer contains render state

* chore: removed internal renderer ref

* refactor!: the renderer instance is now returned from useRenderer, made renderer being wrapped inside the context

BREAKING CHANGE:

- invalidate, advance, canBeInvalidated and the renderer instance are now accessed through the context via `renderer`
- the renderer instance in the context is now readonly

* refactor: removed one emit dependency

* tofo cleanup

* merge fix

* refactor: updated other parts to match structural changes

* worked around loop errors

* fixes concerning changes in playground

* updated english docs

* fix: wrong render mode in docs

* removed obsolete todo

* fix: added null check

* fix: removed deprecated toValue import

* chore: restored renderer tyope in LoopCallbackWithCtx

* refactor: renamed useRenderer

* fix: test

* fix: lint fix

---------

Co-authored-by: Alvaro Saburido <[email protected]>

* refactor!: 992 removal of emit from usetrescontextprovider composable (#999)

* added typecheck script

* added typecheck to ci

* ts error fixes

* fixed import

* moved render state stuff to useRenderer

* chore!: stripped unnecessarily returned elements from useRenderer

BREAKING CHANGE:

- useRenderer now returns invalidate and advance
- useTresContextProvider no longer contains render state

* chore: removed internal renderer ref

* refactor!: the renderer instance is now returned from useRenderer, made renderer being wrapped inside the context

BREAKING CHANGE:

- invalidate, advance, canBeInvalidated and the renderer instance are now accessed through the context via `renderer`
- the renderer instance in the context is now readonly

* refactor: removed one emit dependency

* tofo cleanup

* merge fix

* refactor: updated other parts to match structural changes

* worked around loop errors

* fixes concerning changes in playground

* updated english docs

* fix: wrong render mode in docs

* removed obsolete todo

* fix: added null check

* fix: removed deprecated toValue import

* feat: remove emit from useTresEventManager

* renamed type

* chore: got rid of emit concerning TresReady

* refactor!: removed emit from useTresContextProvider and useTresEventManager

BREAKING CHANGE:

- the type `EmitEventName` is no longer exported from @tresjs/core
- the type `EmitEventFn` is no longer exported from @tresjs/core

* chore: restored renderer tyope in LoopCallbackWithCtx

* refactor: renamed useRenderer

* fix: test

* cleanup

---------

Co-authored-by: Alvaro Saburido <[email protected]>

* fix: added forgotten ready emit

* refactor!: removed useTresReady, added isReady to the renderer in the… (#1000)

* refactor!: removed useTresReady, added isReady to the renderer in the context

BREAKING CHANGE:

- useTresReady is no longer available, it has been replaced by isReady in the renderer in the context
- onTresReady is no longer available. renderer.isReady should be leveraged instead

* chore: removed playground files concerning useTresReady

* chore: removed ready pages from playground routes

* feature: made isReady dependency clearer by leveraging triggerRef

* fix: add initial value support to useLoader(#1007)

* fix: add initial value support to useLoader

- Enhanced the `useLoader` composable to accept an `initialValue` option, allowing users to provide a default state while resources are loading.
- Updated documentation to reflect the new `initialValue` feature, improving user experience by preventing null states during loading.
- Modified examples in the documentation and playground to demonstrate the usage of `initialValue` with textures and models.

* fix: update import order in use-loader documentation for consistency

- Adjusted the import order of `Texture` and `TextureLoader` from 'three' to maintain a consistent style across documentation examples.
- Minor formatting change in the example code for better readability.

* fix: ensure initialValue in useLoader defaults to null

- Updated the `useLoader` composable to default the `initialValue` option to `null` if not provided, enhancing robustness and preventing potential undefined states during loading.
- This change improves the composable's usability by ensuring a consistent default behavior.

* feat!: 986 remove usetexture (#1008)

* feat!: remove useTexture composable and update documentation

BREAKING CHANGE: `useTexture` composable has been refactored and moved to `@tresjs/cientos` package

- Deleted the `useTexture` composable and its associated files as it has been refactored and moved to the `@tresjs/cientos` package.
- Updated documentation to reflect the changes, including a warning about the deprecation and a link to the new `cientos` documentation for `useTexture`.
- Adjusted examples in the cookbook to utilize the new `useTexture` from `@tresjs/cientos`, ensuring users are directed to the correct implementation.

* fix: clean up texture loading examples in documentation

- Removed unnecessary line breaks and improved formatting in the `load-textures.md` documentation.
- Streamlined the example code for `TresMeshStandardMaterial` to enhance readability and maintain consistency with coding standards.

* docs: update composables documentation to reflect removal of useTexture

- Removed deprecated `useTexture` section from the documentation, indicating its refactor to the `@tresjs/cientos` package.
- Added a warning about the deprecation and provided a link to the new `cientos` documentation for user guidance.
- Ensured that the remaining documentation is clear and concise, maintaining consistency with the latest changes in the codebase.

* refactor!: context camera is now a state (#1004)

* refactor!: context camera is now a state

BREAKING CHANGE: camera ctx property is now an object with the camera manager instead of the active camera

* fix: remove camera manual check

* chore: remove reset onUnmounted

Co-authored-by: Tino Koch <[email protected]>

* chore: remove unused comment

Co-authored-by: Tino Koch <[email protected]>

* chore: omit previous reordering of cameras

Co-authored-by: Tino Koch <[email protected]>

* refactor: update camera handling to use Three.js Camera type

- Replaced instances of TresCamera with Three.js Camera type across the codebase for better compatibility and consistency.
- Updated camera management logic in useCamera composable and related components to reflect the new type.
- Simplified currentCamera logic to use computed properties instead of watch.

* refactor: enhance orthographic camera setup and controls

- Updated the orthographic camera initialization to correctly calculate frustum dimensions based on the aspect ratio.
- Introduced zoom functionality for the orthographic camera.
- Simplified the useControls setup by removing unnecessary properties and focusing on essential controls.
- Adjusted the camera update logic to reflect the new control structure, ensuring proper projection matrix updates.

* chore(playground): streamline camera implementation with TresJS components

- Removed manual camera initialization in favor of using TresJS components for perspective and orthographic cameras.
- Updated the template to conditionally render the appropriate camera based on the selected camera type.
- Enhanced readability and maintainability by leveraging TresJS's built-in camera properties and methods.

* refactor(playground): remove unused camera imports in index.vue

- Eliminated unused imports for OrthographicCamera and PerspectiveCamera from Three.js to streamline the code.
- This change enhances code clarity and reduces unnecessary dependencies, aligning with the recent updates to utilize TresJS components for camera management.

* refactor(useCamera): improve camera management logic (#1009)

---------

Co-authored-by: Tino Koch <[email protected]>

* chore: update @tresjs/cientos dependency to version 14afe95 and adjust ESLint auto-imports

- Updated the @tresjs/cientos dependency in package.json and pnpm-lock.yaml to the latest version (14afe95).
- Added Slot and Slots to ESLint auto-imports for improved type support in Vue components.
- Removed the Textures.vue component as it is no longer needed in the project.
- Simplified the Text3D component by using useLoader for font loading and updated the template to reflect the new structure.
- Cleaned up the basic routes by removing the reference to the deleted Textures.vue component.

* chore: remove unused fontOptions

* chore: remove PbrSphere component and its references from NoCamera and multipleCameras pages

* refactor!: removal of performance state from useTresContextProvider (#1003)

* refactor!: removed useTresReady, added isReady to the renderer in the context

BREAKING CHANGE:

- useTresReady is no longer available, it has been replaced by isReady in the renderer in the context
- onTresReady is no longer available. renderer.isReady should be leveraged instead

* chore: removed playground files concerning useTresReady

* chore: removed ready pages from playground routes

* feature: made isReady dependency clearer by leveraging triggerRef

* ˆ

---------

Co-authored-by: Alvaro Saburido <[email protected]>

* feat: introduce useTres composable and update related documentation (#1017)

* feat: introduce useTres composable and update related documentation

- Added the `useTres` composable to provide a simplified API for accessing the TresJS context, including methods for `invalidate` and `advance`.
- Updated various components and documentation to utilize the new `useTres` composable, enhancing code clarity and maintainability.
- Included a new documentation page for `useTres` detailing its usage and properties.

* fix: clean up TresCanvas template and update useFBO imports

- Removed unnecessary line breaks in the TresCanvas template for improved readability.
- Updated the import statement in useFBO.ts to remove unused useTresContext, streamlining the code and enhancing clarity.

* refactor: remove performance state from useTres composable

- Removed the `perf` property from the `useTres` composable, streamlining the context returned by `useTresContext`.
- Introduced a new `PerformanceState` interface in `setupDevtools.ts` to manage performance metrics, enhancing clarity and maintainability of performance-related data.

* feat: 1012 add context inspector devtools (#1013)

* feat: get the context object tree with max 4 leves deep

* feat: enhance context node creation and graph building

- Updated `createContextNode` to include an optional `parentKey` parameter for better context chaining.
- Modified `buildContextGraph` to utilize the new `parentKey` for constructing chained keys during recursion.
- Added handling for context nodes in the inspector state, allowing for dynamic traversal of context objects based on chained keys.
- Improved readability and maintainability of the context graph logic.

* fix: improve scene object handling in Tres Devtools

- Enhanced the logic for extracting UUIDs from scene node IDs to ensure proper handling of scene objects.
- Updated the inspector state editing to reflect the new UUID extraction method, improving reliability when editing scene objects.
- Set the `editable` property to false for certain inspector values to prevent unintended modifications.

* fix: lint issue with fonts

* feat: implement inspector handlers for Tres Devtools

- Added `inspectorHandlers.ts` to manage inspector tree and state updates, enhancing the interaction with the Tres context.
- Introduced functions for creating nodes in the inspector tree, building graphs for scene and context objects, and handling state edits.
- Updated `TresCanvas.vue` to ensure proper context handling when registering Tres Devtools.
- Refactored `plugin.ts` to utilize the new inspector handlers, improving code organization and maintainability.
- Created type definitions in `types.ts` for better clarity and type safety in inspector-related functionalities.

* refactor: remove uuid from TresContext and update UUID generation logic

- Removed the `uuid` property from the `TresContext` interface as it is no longer necessary.
- Updated the UUID generation in `buildContextGraph` to safely access the scene's UUID, ensuring compatibility with the new context structure.

* refactor: remove unused import from useTresContextProvider

- Removed the unused `MathUtils` import from `useTresContextProvider/index.ts` to clean up the code and improve maintainability.

* refactor: remove redundant error check in invalidate function of useRendererManager (#1023)

- Removed the error check for render mode in the `invalidate` function, as it is no longer necessary. This simplifies the logic and improves code clarity.

* chore: release v5.0.0-next.1

* feat!(events): new event system based on pmdrs/pointer-events

BREAKING CHANGE: Only first element intersected wil trigger the pointer event, no more need to stop propagation on occlusion

* feat: get the context object tree with max 4 leves deep

* feat: enhance context node creation and graph building

- Updated `createContextNode` to include an optional `parentKey` parameter for better context chaining.
- Modified `buildContextGraph` to utilize the new `parentKey` for constructing chained keys during recursion.
- Added handling for context nodes in the inspector state, allowing for dynamic traversal of context objects based on chained keys.
- Improved readability and maintainability of the context graph logic.

* fix: improve scene object handling in Tres Devtools

- Enhanced the logic for extracting UUIDs from scene node IDs to ensure proper handling of scene objects.
- Updated the inspector state editing to reflect the new UUID extraction method, improving reliability when editing scene objects.
- Set the `editable` property to false for certain inspector values to prevent unintended modifications.

* fix: lint issue with fonts

* feat: implement inspector handlers for Tres Devtools

- Added `inspectorHandlers.ts` to manage inspector tree and state updates, enhancing the interaction with the Tres context.
- Introduced functions for creating nodes in the inspector tree, building graphs for scene and context objects, and handling state edits.
- Updated `TresCanvas.vue` to ensure proper context handling when registering Tres Devtools.
- Refactored `plugin.ts` to utilize the new inspector handlers, improving code organization and maintainability.
- Created type definitions in `types.ts` for better clarity and type safety in inspector-related functionalities.

* feat!(events): new event system based on pmdrs/pointer-events

BREAKING CHANGE: Only first element intersected wil trigger the pointer event, no more need to stop propagation on occlusion

* refactor: update event handler parameter naming for clarity

- Renamed the parameter in the onPointerMove function from 'ev' to '_ev' to indicate that it is intentionally unused, improving code readability.
- Removed unused import 'TresObject' from useTresContextProvider to clean up the codebase.

* refactor: update type imports and event handling in TresCanvas

- Replaced the Camera type with TresCamera in TresCanvasProps for better type specificity.
- Cleaned up imports in TresCanvas.vue by removing unused imports.
- Updated event handling in useEventManager to use pointerEventsMap for onClick, with a TODO for future type improvements.
- Modified handlers in LocalState to accept both PointerEventType and string for enhanced flexibility.
- Adjusted deregistration method in doRemoveDeregister to use context.events for consistency.

* refactor: update useTres composable to replace raycaster with events

- Modified the `useTres` composable to return `events` instead of `raycaster`, aligning with the updated context structure.
- Removed the `uuid` property from the `TresContext` interface and cleaned up unused imports in `useTresContextProvider`, enhancing code maintainability.

* refactor: update useLoop composable to replace raycaster with events

- Modified the `useLoop` composable to utilize `events` instead of `raycaster`, aligning with the recent changes in the Tres context structure.
- This change enhances the integration with the updated event system, ensuring better context handling during the rendering loop.

* wip

* separated event utils

* beautified types

* type fixes

* moved update call

* added todos

* omitted potential memory leak and callback calls of gone objects

* refactor: fixed onRender naming

* restored playground example

* Updated the `offPointerMissed` assignment to create a separate listener for each object, preventing unintended shared calls.

* improved comment

* renamed eventManager in context

* removed obsolete code

* chore: update @tresjs/cientos dependency to version 5.0.0-next.0 in package.json and playground/vue/package.json

* chore(playground): streamline event handling and remove unused Box component

- Removed the `stopPropagation` control logic from event handlers in `index.vue` to simplify the code.
- Updated event logging messages for consistency in `index.vue` and `groups/index.vue`.
- Enhanced the `TresGroup` component in `groups/index.vue` to include a new `@pointermissed` event handler.
- Deleted the unused `Box.vue` and `index.vue` files from the propagation directory to clean up the codebase.

* went back to "events"

* removed pointermissed from nodeops

* fixed emits of canvas compoennt

* cleaned up types

* tiny readability improvement

* eslint fix

---------

Co-authored-by: alvarosabu <[email protected]>

* feat: 982 refactor userenderer (#1022)

* refactor(TresCanvas): refactor prop types

* chore(playground): add controls to basic playground

* feat(playground): refactor useRenderer

* refactor(useRendererManager): remove unused watchEffect for render mode

* refactor(useRendererManager): replace watch with watchEffect to track instance.value

* refactor: making renderer instance a plain object (#1028)

* refactor: streamline renderer management and event handling

- Replaced the `instance` reference with `renderer` in `useRendererManager` for clarity and consistency.
- Updated event handling in `TresCanvas.vue` to utilize the new `onReady` method instead of `whenever`, improving readability.
- Cleaned up unused imports across multiple files, enhancing code maintainability.
- Adjusted inspector state handling to reflect the new renderer structure, ensuring accurate memory and rendering statistics.

* refactor: tiny performance improvement (maybe)

* refactor: tiny type improvement

* refactor: separate types for props and composable

- Updated references to `renderer.instance.value` to `renderer.instance` for consistency and clarity in `useLoop`, `TresCanvas`, and related components.
- Enhanced type definitions by introducing `RendererOptions` to encapsulate WebGL context options, improving type safety and maintainability.
- Cleaned up unused imports and adjusted prop types in `useTres` and `useTresContextProvider` for better alignment with the new renderer structure.
- This refactor aims to simplify the renderer management and improve overall code readability.

* fix(loop): update renderer reference in snapshot context

- Changed the renderer reference in the snapshot context from `context.renderer.instance` to `context.renderer` for consistency with recent refactors.
- This adjustment aligns with the updated renderer management structure, enhancing clarity and maintainability of the rendering loop.

---------

Co-authored-by: Tino Koch <[email protected]>

* feat: webgpu native support (#1029)

* chore: release v5.0.0-next.2

* feat: expose render mode (#1032)

* chore: release v5.0.0-next.3

* feat!: useLoop and useRenderLoop refactoring (#1035)

BREAKING CHANGE: onAfterRender has been renamed to onRender

* refactor: type improvements in createPriorityEventHook

* wip

* wip

* improved test

* added context to useCreateRenderLoop and tests

* fixed typing

* added clock

* wip

* refactor: remove deprecated loop implementation and update related composables

- Removed the old `useCreateRenderLoop` and its associated tests.
- Updated `useLoop` to utilize the new `useRenderLoop` for better event handling.
- Commented out `OrbitControls` in relevant Vue components for potential future use.
- Cleaned up unused code and comments in `useTresContextProvider`.

* added some todos

* refactor: removed redundant eventhook

* refactor: simplify renderer setup by removing loop parameter

* refactor: enhance useRenderLoop to accept notifyFrameRendered callback

* chore: removed obsolete comment

* chore: made TresCanvas use correct event hook

* refactor!: omitted frame in render manager return

* refactor: restored renderEventHook

* chore: added comments after meeting

* refactor: made render loop more generic in it's naming

* refactor: made useLoop use useTres context

* chore: added jsdoc description for useLoop

* refactor: rename LoopContext to RafLoopContext and update related references

* refactor: replaced setTimeout with useTimeout

* refactor: update useLoop tests to use useCreateRafLoop and adjust rendering logic

* test: enhance useLoop tests with fake timers and add new callback functionality

* chore: removed debug code

* fix: initialize frames based on renderMode to ensure correct rendering behavior

* refactor: fixed multiple playgrounds

* feat: added loop and beforeLoop events to canvas

* fix: fixed playground experience
rafactor: renamed replaceCycleFunction to replaceLoopFunction

* fix: fixed some more playgrounds

* fixed some more playgrounds

* refactor!: renamed onBeforeRender to onBeforeLoop and onRender to onLoop
fix: fixed playgrounds

* fixed test

* refactor: tiny code styling improvement

* refactor: omitted export of useCreateRafLoop

* linting fixes

* refactor: tiny improvement for fbo demo

* refactor: rename fboRef to groupRef for clarity in FBO demo

* refactor: renamed onBeforeLoop back to onBeforeRender and onLoop back to onRender

* restored usage of orbit controls

* more restoring of orbitcontrols usages

* refactor: updated loop handling by renaming onLoop to onRender in TakeOverRenderExperience.vue and adjusted related emit definitions in TresCanvas.vue

* removed obsolete comment

* chore(playground): fixed related playgrounds (#1039)

* refactor!: TresCanvas: changed type of event "render" to TresContext.

---------

Co-authored-by: Alvaro Saburido <[email protected]>

* chore: release v5.0.0-next.4

* chore: update dependencies to latest versions (#1041)

- Updated `@types/three` from `^0.173.0` to `^0.177.0`.
- Updated `three` from `^0.173.0` to `^0.177.0`.
- Updated `vite-plugin-dts` from `4.5.0` to `4.5.4`.
- Updated `vue` from `3.5.13` to `3.5.17`.
- Updated related dependencies in `pnpm-lock.yaml` to reflect the changes in `package.json`.

* chore: release v5.0.0-next.5

* refactor: 1043 render function triggers too often (#1044)

* refactor!: moved function to replace render function to renderer manager

* removed test

* fixed test type stuff

* fix: take over render

* refactor: update attach demo to use useTresContext

* refactor: added render callback back to useLoop for less breaking changes

* removed deprecation message

* fix: update elapsed time retrieval in useCreateRafLoop to use the latest clock property (#1046)

* refactor: 983 refactor usetrescontextprovider to use createinjectionstate (#1042)

* refactor: updated TresCanvas and useTresContextProvider for improved context handling

* fixed comment grammar

* chore: add .claude to .gitignore

* chore: release v5.0.0-next.6

* feat: 1047 warn user if the canvas has no area (#1048)

* feat: add warning for non-existant canvas area in TresCanvas component

* Update src/components/TresCanvas.vue

Co-authored-by: Alvaro Saburido <[email protected]>

---------

Co-authored-by: Alvaro Saburido <[email protected]>

* chore: 1031 migrate docs to nuxt UI docs template (#1049)

* feat!: nuxt ui pro docs

* docs: update documentation and components for TresJS integration

- Updated package.json to rename the project to "tresjs-docs" and added dependencies for @tresjs/cientos and @tresjs/core.
- Enhanced nuxt.config.ts to include template compiler options from @tresjs/core.
- Introduced new components: HomeScene.vue and IntroScene.vue for showcasing 3D capabilities.
- Refactored AppHeader.vue and other components to align with the new branding and design.
- Updated main.css with new color palettes and styles for improved UI.
- Revised content in markdown files to reflect TresJS branding and features, enhancing the overall documentation experience.

* feat: implement navigation components and restructure documentation layout

- Added `AppSide.vue` for sidebar navigation, utilizing `useHeaderLinks` and `useNavigation` composables.
- Introduced `useNavigation.ts` for managing header and footer links.
- Created utility function `navPageFromPath` in `content.ts` for navigation structure.
- Updated `docs.vue` layout to incorporate the new `AppSide` component.
- Removed outdated `usage.md` file and added new API documentation structure.
- Enhanced navigation YAML files for better organization and icon representation.

* feat: enhance WebGPU support and update documentation

- Updated `main.css` to change the monospace font to 'JetBrains Mono'.
- Wrapped slot in `SceneWrapper.vue` with `ClientOnly` for better SSR handling.
- Added `HologramCube.vue` component for WebGPU rendering with dynamic glitch effects.
- Created `index.vue` to demonstrate the usage of `HologramCube` within a `TresCanvas`.
- Updated `docs.vue` layout for improved spacing and added a `UContainer` around the slot.
- Enhanced `[...slug].vue` to include custom UI properties for better styling.
- Introduced new navigation YAML files for API documentation structure.
- Added detailed documentation for the `TresCanvas` component and WebGPU capabilities.
- Removed outdated `tres-canvas.md` file to streamline documentation.

* docs: my first scene guide

- Created `Experience.vue` for the 3D scene, featuring a rotating donut using TresJS.
- Added `index.vue` to set up the main canvas component and include the experience.
- Developed comprehensive documentation in `3.your-first-scene.md` to guide users through creating their first 3D scene with TresJS, covering setup, camera configuration, visual helpers, and animation.

* chore: update documentation scripts and added missing navigation links

- Modified `package.json` to streamline documentation commands using pnpm filters.
- Updated `useNavigation.ts` to correct navigation paths for 'Essentials' and 'API' sections.
- Added new markdown files for 'Essentials' and 'Cookbook' sections, including metadata for better organization.
- Introduced a navigation YAML file for the 'Cookbook' section to improve documentation structure.

* chore: update documentation generation script in package.json

- Modified the `docs:generate` script to first run the build command before generating documentation, ensuring that the latest changes are reflected in the generated output.

* chore: update Netlify configuration and package.json for documentation build

- Changed the publish directory in `netlify.toml` to reflect the new output path.
- Updated the build command in `netlify.toml` to use `docs:generate` for generating documentation.
- Enhanced `package.json` to include development-specific exports and adjusted the `docs:prepare` script for better documentation preparation.

* chore: enhance package.json with postinstall script for automated build

- Added a `postinstall` script to `package.json` to automatically run the build command after installation, ensuring the latest build is always available.
- Maintained the existing `docs:prepare` script for documentation preparation.

* chore: update postinstall script for documentation preparation

- Modified the `postinstall` script in the root `package.json` to include `pnpm --filter='./docs' prepare`, ensuring that documentation is prepared automatically after the build process.
- Removed the `postinstall` script from the `docs/package.json` as it is now handled in the root package.

* chore: remove tsconfig extension for Nuxt Content/UI hydration issue

- Removed the extension of the TypeScript configuration from `tsconfig.json` that was previously addressing a hydration issue with Nuxt Content/UI. This change simplifies the configuration and resolves potential conflicts.

* chore: update dependencies in pnpm-lock.yaml and package.json

- Updated `@tresjs/core` to version `5.0.0-next.6` in `pnpm-lock.yaml` and `package.json`.
- Added `better-sqlite3` as a dependency in both `pnpm-lock.yaml` and `package.json`, ensuring compatibility with the latest packages.
- Adjusted various package versions in `pnpm-lock.yaml` to reflect the latest updates and maintain consistency across dependencies.

* chore: update Netlify configuration for documentation output path

- Changed the publish directory in `netlify.toml` from `docs/.output/public` to `docs/dist` to align with the new output structure.
- Updated the build command to ensure proper documentation generation.

* docs: add Tres Components documentation

- Created a new markdown file `tres-objects.md` detailing how TresJS maps Vue components to Three.js objects.
- Included examples of component usage, constructor arguments, and declarative properties for better understanding.
- Documented common patterns and property mappings to enhance user experience with TresJS.

* chore: add redirects for old VitePress URLs in Netlify configuration

- Implemented redirects in `netlify.toml` to map old VitePress documentation URLs to the new Nuxt structure, ensuring users are seamlessly directed to the updated content.
- Added multiple 301 redirects for key documentation pages to maintain accessibility and improve user experience.

* chore: migrate redirects from Netlify configuration to new _redirects file

- Removed old VitePress URL redirects from `netlify.toml` to streamline the configuration.
- Added a new `_redirects` file in the `docs/public` directory to maintain the same redirect functionality for the updated Nuxt structure.
- This change enhances organization and aligns with best practices for managing redirects in a dedicated file.

* docs: useLoop page and diagram components

- Introduced `DottedDiagram.vue` and `RenderLoop.vue` components to enhance the visual representation of diagrams.
- Updated `main.css` to include new CSS variables for dot patterns and background styles, ensuring better design consistency.
- Added new markdown files for composables documentation, detailing `useTres`, `useTresContext`, and `useLoop` functionalities.
- Included an SVG diagram for the render loop to visually support the documentation.
- Enhanced navigation structure for composables in the documentation.

* docs: correct Three.js capitalization in documentation

- Updated instances of "ThreeJS" to "Three.js" for consistency and accuracy across multiple markdown files.
- Ensured that the description and examples reflect the correct naming convention, enhancing clarity for users.

* docs: clarify animation system description in getting started guide

- Updated the description of the animation system to improve clarity, changing "The animation system works by:" to "The animation (system) consists of:". This enhances the understanding of the animation components for users.

* docs: fix lint

* docs: add type signature

* docs: enhance useLoop documentation with custom rendering details

- Added a new section on taking over the render loop using the `render` method from `useLoop`, allowing for custom rendering logic and post-processing effects.
- Included a detailed example demonstrating custom rendering with multiple passes using `EffectComposer` and `RenderPass`.
- Updated the warning section to clarify responsibilities when using custom rendering, ensuring users understand the implications of bypassing built-in render modes.

* docs: add ReadMore component and useTres documentation

- Introduced a new `ReadMore.vue` component for improved navigation and content engagement within the documentation.
- Expanded the `useTres` documentation with detailed usage examples, including a basic example, extending the catalogue, and manual rendering control.
- Clarified the differences between `useTres` and `useTresContext`, providing users with a better understanding of when to use each composable.

* docs: expand useTresContext documentation with detailed usage examples

- Added comprehensive documentation for the `useTresContext` composable, detailing its features and internal management systems, including camera management, renderer control, and event handling.
- Included practical usage examples demonstrating advanced camera management, renderer control, and event system integration.
- Clarified the differences between `useTresContext` and `useTres`, guiding users on when to utilize each composable for their specific needs.

* docs: add Primitives documentation for TresJS integration

- Introduced comprehensive documentation for the `<primitive />` component, detailing its usage for integrating Three.js objects directly within Vue applications.
- Included examples demonstrating basic usage, props, events, and performance considerations.
- Highlighted common use cases such as integrating third-party libraries, custom geometries, and particle systems, enhancing user understanding of the component's capabilities.

* docs: enhance `<primitive />` component documentation with new props and examples

- Updated the documentation for the `<primitive />` component to clarify the expected Three.js object type and its rendering behavior.
- Added new sections detailing the `dispose`, `attach`, `visible`, and event handlers props, including their types, defaults, and usage examples.
- Included practical examples demonstrating custom disposal functions, material and geometry attachments, and event handling to improve user understanding of the component's capabilities.

* docs: enhance useLoop documentation with success callback requirements and examples

- Updated the `useLoop` documentation to include the necessity of calling the `notifySuccess()` callback at the end of the render function for proper render loop functionality.
- Expanded the custom rendering examples to demonstrate conditional rendering, post-processing, and multi-pass rendering scenarios.
- Clarified the parameters of the `render` method, emphasizing the change from a context object to a single callback parameter.
- Added warnings and notes to guide users on responsibilities when taking over the render loop.

* docs: refine `<primitive />` component documentation for clarity

- Improved the wording in the documentation for the `<primitive />` component to enhance clarity and readability.
- Adjusted phrases to ensure consistency and better understanding, particularly regarding the rendering of Three.js objects and the use of slots for additional components.
- Made minor grammatical corrections to improve the overall flow of the documentation.

* docs: update index.md to reflect new features

- Revised the main title and feature descriptions to better highlight the benefits and functionalities of the documentation.
- Updated links to direct users to relevant resources, including the TresJS lab and Three.js website.
- Enhanced feature titles and descriptions to provide clearer insights into the capabilities of the framework, focusing on 3D scene building and developer experience.
- Removed outdated sections to streamline the content and improve overall readability.

* docs: update Tres docs metadata and site config
- Revised the `nuxt.config.ts` to reflect the new project title and description for TresJS documentation.
- Updated the `nuxt.schema.ts` to ensure consistency in required fields and default values.
- Enhanced the `app.config.ts` to align with the new branding and footer links for TresJS.
- Added new SVG assets for dark mode and updated favicon files to improve visual consistency across the documentation.
- Improved the navigation structure in `useNavigation.ts` to better reflect the updated content organization.
- Updated the `getting-started` and `api` documentation to enhance clarity and provide a better user experience.

* docs: add useGraph composable documentation and update navigation metadata

- Introduced new documentation for the `useGraph` composable, detailing its functionality for extracting and accessing named nodes, materials, and meshes from a Three.js object hierarchy.
- Included usage examples and best practices for working with loaded models and complex object hierarchies.
- Updated the navigation metadata to include a title template for better clarity in the TresJS documentation.

* docs: add examples for useLoader composable with GLTF and Texture loading

- Introduced new examples for the `useLoader` composable, demonstrating how to load GLTF models and textures in TresJS.
- Created `Experience.vue` components for both GLTF and texture loading, showcasing the integration of Three.js loaders with Vue's reactivity.
- Added documentation for the `useLoader` composable, detailing its functionality, usage, and best practices for loading 3D assets and textures.
- Enhanced the overall documentation structure to improve clarity and user experience.

* docs: fix lint

- Added trailing commas in various sections of `nuxt.config.ts`, `nuxt.schema.ts`, and `app.config.ts` for improved readability and consistency.
- Enhanced the structure of the `content` and `eslint` configurations in `nuxt.config.ts` to ensure proper formatting.
- Updated the `required` fields in `nuxt.schema.ts` to maintain uniformity across the schema definitions.
- Made minor adjustments in the `app.config.ts` to align with the updated branding and footer links.
- Improved overall documentation clarity by ensuring consistent formatting and structure across configuration files.

* docs: update API navigation links in index.md

- Revised navigation links in the API documentation to point to more specific routes, enhancing user accessibility to TresJS components and composables.
- Updated the links for "Components", "Composables", and "Advanced" sections to reflect the new structure, ensuring users can easily find relevant information.

* docs: scaling performance

* docs: added cookbook structure

- Removed trailing commas in `content.config.ts` and `nuxt.config.ts` for improved consistency.
- Added new `RecipesList.vue` component to display a list of recipes dynamically.
- Introduced `LocalOrbitControls.vue` and `index.vue` components for orbit controls examples using TresJS.
- Created new documentation for `OrbitControls` in the cookbook section, including usage examples and a thumbnail image.
- Enhanced the existing documentation structure for better clarity and user experience.

* docs: remove defautl essential guides and replace them with tresjs essentials

- Enhanced the `useNavigation.ts` file by removing trailing commas for improved consistency.
- Updated the footer links to ensure proper navigation and accessibility.
- Deleted outdated markdown files related to markdown syntax, code blocks, prose components, and images/embeds to streamline the documentation.
- Added new navigation metadata for the core architecture and key concepts sections to improve content organization and user experience.

* docs: add performance monitoring documentation and example component

- Introduced a new `index.vue` component for performance monitoring using `@tresjs/leches`, featuring an FPS graph for real-time performance insights.
- Added comprehensive documentation on Vue's reactivity system in the context of 3D rendering, detailing best practices for maintaining performance in high-frequency render loops.
- Included examples demonstrating the use of template refs and shallow reactivity to optimize performance in TresJS applications.

* docs: standardize formatting and improve consistency across configuration files

- Removed trailing commas in `nuxt.schema.ts`, `app.config.ts`, and various component files for improved readability.
- Ensured uniformity in the `required` fields and default values within the schema definitions.
- Updated component templates to use self-closing tags where applicable, enhancing code clarity.
- Added a new `GithubMagicLink.vue` component for improved GitHub link handling and display.
- Introduced `ProseA.vue` for enhanced content rendering, supporting both GitHub links and Nuxt links.
- Created documentation for the new `Custom Vue Renderer` to explain TresJS's integration with Vue 3's custom renderer API.

* docs: applied docs suggestions

* docs: standardize formatting and improve consistency across various files

- Added trailing commas in `content.config.ts`, `nuxt.config.ts`, and `nuxt.schema.ts` for improved readability and consistency.
- Ensured uniformity in the `required` fields and default values within the schema definitions.
- Updated component templates to use self-closing tags where applicable, enhancing code clarity.
- Made minor adjustments in various components to align with updated formatting standards.
- Improved overall documentation clarity by ensuring consistent formatting and structure across configuration files.

* feat: added quicklinks in navbar for home

* Update docs/content/4.cookbook/1.orbit-controls.md

Co-authored-by: colinscz <[email protected]>

* refactor: enhance GitHubMagicLink component for improved URL handling

- Replaced reactive refs with computed properties for displayTitle, suffix, and icon to streamline the logic and improve performance.
- Utilized computedAsync from @vueuse/core for asynchronous title fetching, enhancing responsiveness.
- Updated the template to conditionally render the icon based on its availability, improving clarity and user experience.

* feat: replace LogoPro with TheLogo component in AppHeader

- Updated the AppHeader component to use the new TheLogo component for improved branding consistency.
- Introduced TheLogo component to encapsulate the logo rendering logic, enhancing modularity and maintainability.

* refactor: improve prop type definitions in ReadMore component

- Updated the ReadMore component to use TypeScript type annotations for props, enhancing type safety and clarity.
- Simplified the props definition by removing unnecessary default values and ensuring required fields are clearly defined.
- Adjusted the template to utilize self-closing tags for improved readability.

* refactor: update alt text and remove unused TemplateMenu component

- Changed the alt text for recipe thumbnails in RecipesList.vue for improved accessibility.
- Deleted the TemplateMenu.vue component as it was no longer in use, streamlining the codebase.

* refactor: enhance prop type definitions in ProseA component

- Updated the ProseA component to utilize TypeScript type annotations for props, improving type safety and clarity.
- Simplified the props definition by removing unnecessary default values and ensuring required fields are clearly defined.
- Adjusted the template to use self-closing tags for improved readability.

* refactor: navigation key symbol

* refactor: missing key file

* refactor: address comments

- Removed outdated command from package.json related to contributors.
- Improved clarity in various documentation files by correcting grammatical errors and enhancing descriptions.
- Standardized punctuation and formatting across multiple sections to ensure consistency.
- Updated descriptions to provide clearer context and improve readability for users.

* docs: Update docs/content/3.api/2.composables/3.use-loop.md

Co-authored-by: Tino Koch <[email protected]>

* docs: Update docs/content/2.essentials/2.concepts/1.declarative-vs-imperative.md

Co-authored-by: Tino Koch <[email protected]>

* refactor: enhance error handling and documentation in components

- Added null checks for recipe metadata in RecipesList.vue to prevent potential runtime errors.
- Improved material property access in Experience.vue by adding a conditional check to ensure the Material object exists before modifying its properties.
- Updated the useTres documentation to clarify its usage context within the TresCanvas component, enhancing user understanding.

* refactor: update navigationInjectionKey symbol for clarity

- Changed the navigationInjectionKey symbol to include a description ('navigation') for improved clarity and context in the codebase.

* refactor: standardize template syntax and improve readability

- Updated various Vue components to ensure consistent use of self-closing tags for improved readability.
- Added missing commas in object literals to maintain proper syntax.
- Enhanced the overall structure of the code by ensuring consistent formatting across multiple files.

* docs: clarify usage context for useTres composable

- Updated the documentation for the `useTres` composable to specify that it can only be used in child components of a `TresCanvas` component, enhancing clarity on its context and usage.

* refactor: streamline navigation links structure

- Removed unnecessary `active` properties from navigation links in the `useNavigation` composable to simplify the structure.
- Ensured consistent formatting by removing trailing commas and maintaining clean object definitions.
- Improved overall readability of the navigation links configuration.

* docs: improve clarity in documentation

- Corrected grammatical errors in the `declarative-vs-imperative.md` file by changing "Almost every time" to "almost every time" for consistency.
- Enhanced the description in the `tres-objects.md` file by rephrasing the example usage of the `PerspectiveCamera` component for better readability.

* fix: adjust AppHeader navigation visibility for responsive design

- Added a class to the `UNavigationMenu` component to ensure it is hidden on smaller screens and displayed on medium and larger screens, improving the responsive behavior of the header.

* refactor: clean up navigation composables and improve type safety

- Removed commented-out code in `AppSide.vue` to enhance code clarity.
- Introduced a `HeaderLink` interface in `useNavigation.ts` for better type safety and structure of header links.
- Streamlined header links definition by ensuring consistent formatting and removing unnecessary trailing commas.
- Updated the `_useNavigation` function to return only relevant properties, improving the overall readability and maintainability of the navigation logic.

* chore: turn off annoying stylistic rule from nuxt eslint

* docs: enhance documentation clarity and consistency

- Corrected grammatical errors in `index.md` for improved readability.
- Updated section titles in `performance.md` to better reflect content focus.
- Rephrased resource disposal guidance in `performance.md` for clarity.
- Removed outdated practical examples from `use-tres-context.md` to streamline documentation.

* refactor: simplify navigation injection in components (#1056)

- Removed type annotations from the `inject` function in `AppHeader.vue`, `AppSide.vue`, and `[...slug].vue` for cleaner code.
- Updated the `navigationInjectionKey` export in `content.ts` to include a more specific type definition, enhancing type safety.

* fix: correct syntax in component props and documentation

- Added a missing comma in the `ui` object of the `[...slug].vue` component to ensure proper syntax.
- Removed unnecessary blank lines in the `use-tres-context.md` and `primitives.md` documentation files for improved readability and consistency.

* feat: enhance GitHubMagicLink component to support wiki links

- Updated the `GitHubURLInfo` interface to include a new 'wiki' type and an optional 'page' property for wiki page names.
- Modified the `parseGitHubURL` function to handle wiki URLs, returning the appropriate type and page name.
- Enhanced the `displayTitle` and `suffix` computed properties to accommodate wiki links, providing better user experience.
- Improved styling in the component to ensure dark mode compatibility.

* docs: update useTres documentation to include invalidate function

- Added a note about the `invalidate()` function in the usage example to clarify its role in triggering a re-render in on-demand mode, enhancing the understanding of the composable's functionality.

* update docs/content/3.api/2.composables/3.use-loop.md

Co-authored-by: Tino Koch <[email protected]>

* docs docs/content/3.api/2.composables/5.use-loader.md

Co-authored-by: Tino Koch <[email protected]>

* refactor: remove unused navigation logic from useNavigation composable

- Eliminated the `_useNavigation` function and its associated logic from `useNavigation.ts` to streamline the codebase.
- This change enhances maintainability by focusing on the relevant properties returned by the `useHeaderLinks` function, improving overall clarity and reducing complexity.

---------

Co-authored-by: colinscz <[email protected]>
Co-authored-by: Tino Koch <[email protected]>

* feat: enhance Nuxt configuration and AppHeader to include package version

- Implemented a function to locate the monorepo root package.json, enabling dynamic retrieval of the package version.
- Updated `nuxt.config.ts` to include the package version in the runtime configuration.
- Modified `AppHeader.vue` to display the current package version using a new `UBadge` component, improving user awareness of the application version.

* chore: og docs (#1057)

* chore: remove nuxt-og-image dependency and update SEO metadata

- Deleted the `nuxt-og-image` dependency from `package.json` and `nuxt.config.ts` to streamline the project.
- Updated SEO metadata in `app.vue` and `index.vue` to include custom Open Graph and Twitter card properties, enhancing social media sharing capabilities.
- Removed the `OgImageDocs.vue` component as it was no longer needed, simplifying the codebase.
- Added a new `og-image.png` for improved visual representation in social media links.

* fix: remove unnecessary blank line in [...slug].vue for improved code clarity

* revert(docs): revert active navigation change (#1058)

* fix: enhance header link activation state in useNavigation composable

- Updated the `_useHeaderLinks` function to include an `active` property for each header link, utilizing the current route path to determine the active state.
- Removed unnecessary blank lines for cleaner code structure.

* refactor: lint

- Removed trailing commas from the header link definitions in the `_useHeaderLinks` function for improved consistency and readability.
- Ensured that the `active` property for each header link is correctly formatted, enhancing the overall clarity of the navigation logic.

* chore: 1059 fix typecheck errors in docs (#1060)

* refactor: fixed type errors in app.config.ts

* refactor: improve type safety and null handling in useGraph and related components

* refactor: enhance type safety and null handling in Experience and graph utilities

* refactor: enhance type safety in HologramCube component

* chore: added typecheck to ci job

* refactor: move type check for Mesh to a separate function in HologramCube component for improved clarity

* fix: smaller lint fixes

* docs: fixed javascript highlighting

* chore: 1061 fix eslint errors in docs (#1063)

* chore: applied lint fixes

* chore: add docs linting command to package.json and CI workflow

* chore: added eol

* chore: added tres lint config and applied lint fixes

* chore: removed duplicate dependency

* chore: restored withNuxt in eslint config

* chore: cleaned up ESLint configuration and remove unused dependencies

* chore: removed lint module

* docs: add pointer events examples and documentation (#1066)

- Introduced two new Vue components for demonstrating pointer events: `index.vue` and `propagation.vue`, showcasing click, pointer enter, and pointer leave interactions with TresJS.
- Added a new navigation entry for "Event handling" and created a detailed documentation page on pointer events, explaining their usage and available events in TresJS.
- Updated the existing `groups/index.vue` to handle pointer missed events, enhancing interactivity in the playground.
- Included performance considerations and best practices for using pointer events effectively in 3D applications.

* docs: migration guide (#1064)

* fix: enhance header link activation state in useNavigation composable

- Updated the `_useHeaderLinks` function to include an `active` property for each header link, utilizing the current route path to determine the active state.
- Removed unnecessary blank lines for cleaner code structure.

* refactor: lint

- Removed trailing commas from the header link definitions in the `_useHeaderLinks` function for improved consistency and readability.
- Ensured that the `active` property for each header link is correctly formatted, enhancing the overall clarity of the navigation logic.

* fix: default github magic link to normal link when criteria is not met

* docs: upgrade guide

* chore: update ESLint configuration to ignore markdown files

- Added an `ignores` entry to both `eslint.config.js` and `docs/eslint.config.mjs` to exclude markdown files from linting, improving the focus on relevant code files.
- Ensured consistent handling of file types across configurations.

* docs: typo on warning

Co-authored-by: Copilot <[email protected]>

* docs: improve what changed part on useLoader, reasons vs features

* docs: update upgrade guide for pointer events changes

- Clarified that pointer events now follow native DOM event names, replacing dash-case with camelCase (e.g., '@pointer-down' to '@pointerdown').
- Added migration steps to assist users in adapting to the new event naming convention.
- Emphasized consistency with web standards and the pmndrs ecosystem.

* docs: clarify migration steps in upgrade guide

- Updated the language in the migration steps to specify that for most use cases, changing `useTresContext` to `useTres` is likely sufficient.
- Aimed to enhance clarity and user understanding of the migration process.

* docs: update upgrade guide with breaking changes and new composable usage

- Removed deprecated composables: `useTresReady`, `useSeek`, `useTresEventManager`, `useRaycaster`, `useRenderLoop`, and `useLogger`.
- Added detailed migration steps for replacing `useRenderLoop` with `useLoop`, including usage examples and warnings about component hierarchy.
- Enhanced clarity on the architectural improvements in TresJS v5, focusing on a simplified API surface.

* docs: update upgrade guide with TresCanvas props reactivi…
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature p3-significant High-priority enhancement (priority)

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Add Tres context to devtools

2 participants