fix: resolve Solid 2.x context auto-disposal, XR timing, and signal dev-mode warnings

Author: bigmistqke

.github/workflows/pkg-pr-new.yml

@@ -36,4 +36,4 @@ jobs:
         run: pnpm build
 
       - name: Publish preview
-        run: pnpx pkg-pr-new publish --compact
+        run: pnpx pkg-pr-new publish --compact --template ./demo

.gitignore

@@ -2,4 +2,5 @@
 dist
 types
 node_modules
+demo/node_modules
 packed/

README.md

@@ -20,6 +20,7 @@
 3. [Components](#components)
    - [Canvas](#canvas)
    - [T](#t)
+     - [createEntity](#createentity)
    - [Entity](#entity)
    - [Portal](#portal)
    - [Resource](#resource)
@@ -100,11 +101,11 @@ The `Canvas` component initializes the `three.js` rendering context and acts as
 
 **Props:**
 
-- **defaultCamera**: Configures the camera used in the scene. Can be partial props for a camera or an existing Camera instance.
+- **camera**: Configures the camera used in the scene. Can be partial props for a camera or an existing Camera instance.
 - **fallback**: Element to render while the main content is loading asynchronously.
 - **gl**: Defines options for the WebGLRenderer, a function returning a customized renderer, or an existing renderer instance.
 - **scene**: Provides custom settings for the Scene instance or an existing Scene.
-- **defaultRaycaster**: Configures the Raycaster for mouse and pointer events.
+- **raycaster**: Configures the Raycaster for mouse and pointer events.
 - **shadows**: Enables and configures shadows in the scene with various shadow mapping techniques.
 - **orthographic**: Toggles between Orthographic and Perspective camera for the default camera.
 - **linear**: Toggles linear interpolation for texture filtering.
@@ -122,11 +123,11 @@ The `Canvas` component initializes the `three.js` rendering context and acts as
 
 ```tsx
 interface CanvasProps {
-  defaultCamera?: Partial<PerspectiveCamera | OrthographicCamera> | Camera
+  camera?: Partial<PerspectiveCamera | OrthographicCamera> | Camera
   fallback?: JSX.Element
   gl?: Partial<WebGLRenderer> | ((canvas: HTMLCanvasElement) => WebGLRenderer) | WebGLRenderer
   scene?: Partial<Scene> | Scene
-  defaultRaycaster?: Partial<Raycaster> | Raycaster
+  raycaster?: Partial<Raycaster> | Raycaster
   shadows?: boolean | "basic" | "percentage" | "soft" | "variance" | WebGLRenderer["shadowMap"]
   orthographic?: boolean
   linear?: boolean
@@ -312,6 +313,22 @@ const T = createT({ Mesh, BoxGeometry, MeshBasicMaterial })
 - **In Libraries**: create multiple `T` to allow for treeshaking or use [`<Entity/>`](#entity) instead
 - **Multiple Ts**: Create multiple T instances for lazy loading different parts of three.js
 
+#### createEntity
+
+`createT` is built on top of `createEntity`, which creates a single typed component from one Three.js constructor. Use it directly when you need a one-off component without building a full namespace:
+
+```tsx
+import { createEntity } from "solid-three"
+import { Mesh } from "three"
+
+const MeshComponent = createEntity(Mesh)
+
+// Equivalent to <T.Mesh /> but without the full namespace
+<MeshComponent position={[0, 1, 0]}>
+  ...
+</MeshComponent>
+```
+
 ### Portal
 
 The `Portal` component allows you to place children outside the regular scene graph while maintaining reactive updates. This is useful for rendering objects into different scenes or bypassing the normal parent-child relationships.
@@ -390,7 +407,24 @@ Wrapper-component around ['useLoader'](#useloader).
 
 ### useThree
 
-Provides access to the `three.js` context, including the renderer, scene, camera, and more. This hook can be used with or without a selector function for optimized access to specific properties.
+Provides access to the `three.js` context, including the renderer, scene, camera, and more.
+
+**Signatures:**
+
+```tsx
+// Returns the full context object directly
+useThree(): Context
+
+// Returns a reactive accessor for a derived value
+useThree<T>(callback: (value: Context) => T): Accessor<T>
+```
+
+Use the selector form to derive a specific value reactively:
+
+```tsx
+const camera = useThree(ctx => ctx.camera)
+// camera() is an Accessor<Camera>
+```
 
 **Returns:**
 
@@ -413,7 +447,7 @@ Provides access to the `three.js` context, including the renderer, scene, camera
 `solid-three` implements a stack-based system for managing its current camera and raycaster:
 
 - **Stack-based Management**: Both cameras and raycasters are managed as stacks internally
-- **Default at Tail**: The `defaultCamera` and `defaultRaycaster` from Canvas props form the tail of their respective stacks
+- **Default at Tail**: The `camera` and `raycaster` from Canvas props form the tail of their respective stacks
 - **Current Active Camera at Head**: The camera/raycaster at the top of the stack is the currently active camera/raycaster
 - **Push To The Stack To Become Active**: By calling `setCamera(camera)` and `setRaycaster(raycaster)`, the camera/raycaster is pushed to the stack. This causes it to become the currently active camera/raycaster
 - **Pop From The Stack To Deactivate**: `setCamera(camera)` and `setRaycaster(raycaster)` return a cleanup-function to pop the camera/raycaster from the stack. If the camera/raycaster was on top of the stack, the previous camera/raycaster in the stack becomes active again
@@ -485,7 +519,7 @@ useFrame(
     priority?: number
     stage?: "before" | "after"
   }
-)
+): () => void
 ```
 
 </details>
@@ -745,7 +779,7 @@ const App = () => {
   const raycaster = new CursorRaycaster()
 
   // CursorRaycaster is used by default, but you can explicitly set it:
-  return <Canvas defaultRaycaster={raycaster}>{/* Your scene */}</Canvas>
+  return <Canvas raycaster={raycaster}>{/* Your scene */}</Canvas>
 }
 ```
 
@@ -760,7 +794,7 @@ import { CenterRaycaster } from "solid-three"
 const App = () => {
   const raycaster = new CenterRaycaster()
 
-  return <Canvas defaultRaycaster={raycaster}>>{/* Your scene */}</Canvas>
+  return <Canvas raycaster={raycaster}>>{/* Your scene */}</Canvas>
 }
 ```
 
@@ -796,7 +830,7 @@ class CustomRaycaster extends Raycaster implements EventRaycaster {
 const App = () => {
   const raycaster = new CustomRaycaster()
 
-  return <Canvas defaultRaycaster={raycaster}>{/* Your scene */}</Canvas>
+  return <Canvas raycaster={raycaster}>{/* Your scene */}</Canvas>
 }
 ```
 
@@ -1118,7 +1152,7 @@ const TreePropagation = () => {
 ```tsx
 const RayPropagation = () => {
   return (
-    <Canvas defaultCamera={{ position: [0, 0, 5] }}>
+    <Canvas camera={{ position: [0, 0, 5] }}>
       <T.Mesh
         name="front mesh"
         position={[0, 0, 2]}

demo/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installCommand": "pnpm install",
+  "startCommand": "pnpm run dev"
+}

demo/index.html

@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="./main.tsx" type="module"></script>
+    <script src="./src/main.tsx" type="module"></script>
   </body>
 </html>