feat: pass PluginProps to <Canvas/>

Author: bigmistqke

playground/examples/PluginExample.tsx

@@ -61,7 +61,7 @@ const GlobalPlugin = plugin(element => ({
 
 // Example with setup - plugin that needs context from setup function
 const ContextPlugin = plugin
-  .setup((context) => {
+  .setup(context => {
     return { scene: context.scene }
   })
   .then((element, context) => ({
@@ -88,6 +88,7 @@ export function PluginExample() {
     <Canvas
       style={{ width: "100vw", height: "100vh" }}
       defaultCamera={{ position: new THREE.Vector3(0, 0, 30) }}
+      onClick={() => console.info("click missed")}
     >
       <OrbitControls />
       <Entity from={THREE.Mesh} />
@@ -99,7 +100,7 @@ export function PluginExample() {
         lookAt={useThree().currentCamera}
         log="Mesh rendered!"
         shake={0.1}
-        onMouseDown={event => console.info("ok")}
+        onClick={event => event.stopPropagation()}
       >
         <T.TorusKnotGeometry args={[1, 0.5, 128, 32]} />
         <T.MeshStandardMaterial metalness={1} roughness={0} color="white">

src/create-three.tsx

@@ -23,6 +23,7 @@ import {
   VSMShadowMap,
   WebGLRenderer,
 } from "three"
+import { processProps } from "../playground/controls/process-props.ts"
 import type { CanvasProps } from "./create-canvas.tsx"
 import { frameContext, threeContext } from "./hooks.ts"
 import { pluginContext } from "./internal-context.ts"
@@ -31,7 +32,6 @@ import { CursorRaycaster, type EventRaycaster } from "./raycasters.tsx"
 import type { CameraKind, Context, FrameListener, FrameListenerCallback, Plugin } from "./types.ts"
 import {
   binarySearch,
-  defaultProps,
   getCurrentViewport,
   meta,
   removeElementFromArray,
@@ -48,7 +48,22 @@ import { useMeasure } from "./utils/use-measure.ts"
  * based on the provided properties.
  */
 export function createThree(canvas: HTMLCanvasElement, props: CanvasProps, plugins: Plugin[]) {
-  const canvasProps = defaultProps(props, { frameloop: "always" })
+  const [canvasProps, rest] = processProps(props, { frameloop: "always" }, [
+    "children",
+    "frameloop",
+    "class",
+    "defaultCamera",
+    "defaultRaycaster",
+    "fallback",
+    "flat",
+    "frameloop",
+    "gl",
+    "linear",
+    "orthographic",
+    "scene",
+    "shadows",
+    "style",
+  ])
 
   /**********************************************************************************/
   /*                                                                                */
@@ -237,8 +252,6 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps, plugi
   const clock = new Clock()
   clock.start()
 
-  const pluginMap = new ReactiveMap<Plugin, ReturnType<Plugin>>()
-
   const context: Context = {
     get bounds() {
       return measure.bounds()
@@ -249,15 +262,7 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps, plugi
       return this.gl.getPixelRatio()
     },
     props,
-    registerPlugin(plugin) {
-      let result = pluginMap.get(plugin)
-      if (result) {
-        return result
-      }
-      result = plugin(context)
-      pluginMap.set(plugin, result)
-      return result
-    },
+    registerPlugin,
     render,
     requestRender,
     get viewport() {
@@ -293,6 +298,28 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps, plugi
     ],
   )
 
+  /**********************************************************************************/
+  /*                                                                                */
+  /*                                     Plugins                                    */
+  /*                                                                                */
+  /**********************************************************************************/
+
+  const pluginMap = new ReactiveMap<Plugin, ReturnType<Plugin>>()
+
+  function registerPlugin(plugin: Plugin) {
+    let result = pluginMap.get(plugin)
+    if (result) {
+      return result
+    }
+    result = plugin(context)
+    pluginMap.set(plugin, result)
+    return result
+  }
+
+  const pluginMethods = createMemo(() =>
+    mergeProps(...plugins.map(init => () => registerPlugin(init)(canvas))),
+  )
+
   /**********************************************************************************/
   /*                                                                                */
   /*                                     Effects                                    */
@@ -310,6 +337,16 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps, plugi
         }
       })
 
+      // Manage props resolved to plugins
+      createRenderEffect(() => {
+        const _pluginMethods = pluginMethods()
+        for (const key in canvasProps) {
+          if (key in _pluginMethods) {
+            _pluginMethods[key]?.(canvasProps[key as keyof typeof canvasProps])
+          }
+        }
+      })
+
       // Manage camera
       createRenderEffect(() => {
         if (cameraStack.peek()) return

src/types.ts

@@ -89,7 +89,9 @@ export interface Context {
   dpr: number
   gl: Meta<WebGLRenderer>
   props: CanvasProps
-  registerPlugin(plugin: Plugin): (element: any) => void
+  registerPlugin(
+    plugin: Plugin,
+  ): (element: any) => Record<string, undefined | ((args: any) => void)>
   render: (delta: number) => void
   requestRender: () => void
   scene: Meta<Scene>