lunchboxjs 0.2.1001-beta.1 → 0.2.1001-beta.2

package/dist/lunchboxjs.module.js

@@ -1,4 +1,4 @@
-import { isRef, isVNode, inject, toRaw, defineComponent, createVNode, resolveComponent, ref, watch, onBeforeUnmount, reactive, onMounted, Fragment, mergeProps, h, createRenderer, computed } from 'vue';
+import { isRef, isVNode, toRaw, defineComponent, createVNode, resolveComponent, ref, onBeforeUnmount, watch, reactive, onMounted, computed, Fragment, mergeProps, h, inject, createRenderer } from 'vue';
 import * as THREE from 'three';
 import { get, isNumber, set } from 'lodash';
 
@@ -102,34 +102,6 @@ function createNode(options = {}, props = {}) {
   return node;
 }
 
-const globalsInjectionKey = Symbol();
-const updateGlobalsInjectionKey = Symbol();
-const setCustomRenderKey = Symbol();
-const clearCustomRenderKey = Symbol();
-const beforeRenderKey = Symbol();
-const onBeforeRenderKey = Symbol();
-const offBeforeRenderKey = Symbol();
-const afterRenderKey = Symbol();
-const onAfterRenderKey = Symbol();
-const offAfterRenderKey = Symbol();
-const frameIdKey = Symbol();
-const watchStopHandleKey = Symbol();
-const appRootNodeKey = Symbol();
-const appKey = Symbol();
-const appRenderersKey = Symbol();
-const appSceneKey = Symbol();
-const appCameraKey = Symbol();
-const lunchboxInteractables = Symbol();
-const startCallbackKey = Symbol();
-
-const ensuredCamera = () => inject(appCameraKey); // ENSURE RENDERER
-// ====================
-
-const ensureRenderer = () => inject(appRenderersKey); // ENSURE SCENE
-// ====================
-
-const ensuredScene = () => inject(appSceneKey);
-
 /** Add an event listener to the given node. Also creates the event teardown function and any necessary raycaster/interaction dictionary updates. */
 function addEventListener({
   node,
@@ -260,8 +232,6 @@ const LunchboxEventHandlers = defineComponent({
 
   setup() {
     const interactables = useLunchboxInteractables();
-    const camera = useCamera();
-    const renderer = useRenderer();
     const globals = useGlobals();
     const mousePos = ref({
       x: Infinity,
@@ -289,7 +259,7 @@ const LunchboxEventHandlers = defineComponent({
     }; // add mouse listener to renderer DOM element when the element is ready
 
 
-    const stopWatch = watch(renderer, v => {
+    onRendererReady(v => {
       if (!v?.domElement) return; // we have a DOM element, so let's add mouse listeners
 
       const {
@@ -310,16 +280,14 @@ const LunchboxEventHandlers = defineComponent({
 
       domElement.addEventListener('pointermove', mouseMoveListener);
       domElement.addEventListener('pointerdown', mouseDownListener);
-      domElement.addEventListener('pointerup', mouseUpListener); // stop the watcher
-
-      stopWatch();
-    }, {
-      immediate: true
+      domElement.addEventListener('pointerup', mouseUpListener);
     });
+    const camera = useCamera();
 
     const update = () => {
       const c = camera.value;
-      if (!c) return;
+      if (!c) return; // console.log(camera.value)
+
       raycaster.setFromCamera(mousePos.value, c);
       const intersections = raycaster.intersectObjects(interactables?.value.map(v => v.instance) ?? []);
       let leaveValues = [],
@@ -410,10 +378,13 @@ const LunchboxEventHandlers = defineComponent({
     onBeforeUnmount(teardown);
     const clickEventKeys = ['onClick', 'onPointerDown', 'onPointerUp'];
     watch(inputActive, isDown => {
-      // meshes with multiple intersections receive multiple callbacks by default -
+      // run raycaster on click (necessary when `update` is not automatically called,
+      // for example in `updateSource` functions)
+      update(); // meshes with multiple intersections receive multiple callbacks by default -
       // let's make it so they only receive one callback of each type per frame.
       // (ie usually when you click on a mesh, you expect only one click event to fire, even
       // if there are technically multiple intersections with that mesh)
+
       const uuidsInteractedWithThisFrame = [];
       currentIntersections.forEach(v => {
         clickEventKeys.forEach(key => {
@@ -615,7 +586,37 @@ const LunchboxWrapper = defineComponent({
     // ====================
 
     const containerFillStyle = props.sizePolicy === 'container' ? 'static' : 'absolute';
-    const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed';
+    const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed'; // REACTIVE CUSTOM CAMERAS
+    // ====================
+    // find first camera with `type.name` property
+    // (which indicates a Lunch.Node)
+
+    const activeCamera = computed(() => {
+      const output = context.slots?.camera?.().find(c => c.type?.name);
+
+      if (output) {
+        return output;
+      }
+
+      return output;
+    }); // TODO: make custom cameras reactive
+
+    watch(activeCamera, async (newVal, oldVal) => {
+      // console.log('got camera', newVal)
+      if (newVal && newVal?.props?.key !== oldVal?.props?.key) {
+        // TODO: remove cast
+        camera.value = newVal; // TODO: why isn't this updating app camera?
+        // const el = await waitFor(() => newVal.el)
+        // console.log(el)
+        // camera.value = el
+        // console.log(newVal.uuid)
+        // updateGlobals?.({ camera: el })
+      }
+    }, {
+      immediate: true
+    }); // RENDER FUNCTION
+    // ====================
+
     return () => createVNode(Fragment, null, [context.slots?.renderer?.()?.length ? // TODO: remove `as any` cast
     renderer.value = context.slots?.renderer?.()[0] : // ...otherwise, add canvas...
     createVNode(Fragment, null, [createVNode("div", {
@@ -645,7 +646,7 @@ const LunchboxWrapper = defineComponent({
     }, {
       default: () => [context.slots?.default?.()]
     }), context.slots?.camera?.()?.length ? // TODO: remove `any` cast
-    camera.value = context.slots?.camera?.()[0] : props.ortho || props.orthographic ? createVNode(resolveComponent("orthographicCamera"), mergeProps({
+    camera.value : props.ortho || props.orthographic ? createVNode(resolveComponent("orthographicCamera"), mergeProps({
       "ref": camera,
       "args": props.cameraArgs ?? []
     }, consolidatedCameraProperties), null) : createVNode(resolveComponent("perspectiveCamera"), mergeProps({
@@ -1113,6 +1114,26 @@ function isMinidomNode(item) {
   return item?.minidomType === 'RendererNode';
 }
 
+const globalsInjectionKey = Symbol();
+const updateGlobalsInjectionKey = Symbol();
+const setCustomRenderKey = Symbol();
+const clearCustomRenderKey = Symbol();
+const beforeRenderKey = Symbol();
+const onBeforeRenderKey = Symbol();
+const offBeforeRenderKey = Symbol();
+const afterRenderKey = Symbol();
+const onAfterRenderKey = Symbol();
+const offAfterRenderKey = Symbol();
+const frameIdKey = Symbol();
+const watchStopHandleKey = Symbol();
+const appRootNodeKey = Symbol();
+const appKey = Symbol();
+const appRenderersKey = Symbol();
+const appSceneKey = Symbol();
+const appCameraKey = Symbol();
+const lunchboxInteractables = Symbol();
+const startCallbackKey = Symbol();
+
 const requestUpdate = opts => {
   if (typeof opts.app.config.globalProperties.lunchbox.frameId === 'number') {
     cancelAnimationFrame(opts.app.config.globalProperties.lunchbox.frameId);
@@ -1146,20 +1167,19 @@ const update = opts => {
   const {
     app,
     renderer,
-    scene,
-    camera
+    scene
   } = opts; // BEFORE RENDER
 
   app.config.globalProperties.lunchbox.beforeRender.forEach(cb => {
     cb?.(opts);
   }); // RENDER
 
-  if (renderer && scene && camera) {
+  if (renderer && scene && opts.app.config.globalProperties.lunchbox.camera) {
     if (app.customRender) {
       app.customRender(opts);
     } else {
-      renderer.render(toRaw(scene), // opts.app.config.globalProperties.lunchbox.camera!
-      toRaw(camera));
+      renderer.render(toRaw(scene), opts.app.config.globalProperties.lunchbox.camera // toRaw(camera)
+      );
     }
   } // AFTER RENDER
 
@@ -1169,55 +1189,81 @@ const update = opts => {
   });
 }; // before render
 // ====================
-// TODO: document
+
+/** Obtain callback methods for `onBeforeRender` and `offBeforeRender`. Usually used internally by Lunchbox. */
 
 const useBeforeRender = () => {
   return {
     onBeforeRender: inject(onBeforeRenderKey),
     offBeforeRender: inject(offBeforeRenderKey)
   };
-}; // TODO: document
+};
+/** Run a function before every render.
+ *
+ * Note that if `updateSource` is set in the Lunchbox wrapper component, this will **only** run
+ * before a render triggered by that `updateSource`. Normally, the function should run every frame.
+ */
 
 const onBeforeRender = (cb, index = Infinity) => {
   useBeforeRender().onBeforeRender?.(cb, index);
-}; // TODO: document
+};
+/** Remove a function from the `beforeRender` callback list. Useful for tearing down functions added
+ * by `onBeforeRender`.
+ */
 
 const offBeforeRender = cb => {
   useBeforeRender().offBeforeRender?.(cb);
 }; // after render
 // ====================
-// TODO: document
+
+/** Obtain callback methods for `onAfterRender` and `offAfterRender`. Usually used internally by Lunchbox. */
 
 const useAfterRender = () => {
   return {
     onAfterRender: inject(onBeforeRenderKey),
     offAfterRender: inject(offBeforeRenderKey)
   };
-}; // TODO: document
+};
+/** Run a function after every render.
+ *
+ * Note that if `updateSource` is set in the Lunchbox wrapper component, this will **only** run
+ * after a render triggered by that `updateSource`. Normally, the function should run every frame.
+ */
 
 const onAfterRender = (cb, index = Infinity) => {
   useBeforeRender().onBeforeRender?.(cb, index);
-}; // TODO: document
+};
+/** Remove a function from the `afterRender` callback list. Useful for tearing down functions added
+ * by `onAfterRender`.
+ */
 
 const offAfterRender = cb => {
   useBeforeRender().offBeforeRender?.(cb);
-}; // TODO: document
+};
+/** Obtain a function used to cancel the current update frame. Use `cancelUpdate` if you wish
+ * to immediately invoke the cancellation function. Usually used internally by Lunchbox.
+ */
 
 const useCancelUpdate = () => {
   const frameId = inject(frameIdKey);
   return () => {
     if (frameId !== undefined) cancelAnimationFrame(frameId);
   };
-}; // TODO: document
+};
+/** Cancel the current update frame. Usually used internally by Lunchbox. */
 
 const cancelUpdate = () => {
   useCancelUpdate()?.();
-}; // TODO: document
+};
+/** Obtain a function used to cancel an update source. Use `cancelUpdateSource` if you wish to
+ * immediately invoke the cancellation function. Usually used internally by Lunchbox.
+ */
 
 const useCancelUpdateSource = () => {
   const cancel = inject(watchStopHandleKey);
   return () => cancel?.();
-}; // TODO: document
+};
+/** Cancel an update source. Usually used internally by Lunchbox. */
 
 const cancelUpdateSource = () => {
   useCancelUpdateSource()?.();
@@ -1268,6 +1314,7 @@ function updateObjectProp({
     const fullPath = [nestedProperty, finalKey].filter(Boolean).join('.');
     liveProperty = liveProperty = get(target, fullPath);
   } // change property
+  // first, save as array in case we need to spread it
 
 
   if (liveProperty && isNumber(value) && liveProperty.setScalar) {
@@ -1278,14 +1325,24 @@ function updateObjectProp({
     const nextValueAsArray = Array.isArray(value) ? value : [value];
     target[finalKey].set(...nextValueAsArray);
   } else if (typeof liveProperty === 'function') {
-    // if property is a function, let's try calling it
-    liveProperty.bind(node.instance)(...value); // pass the result to the parent
+    // some function properties are set rather than called, so let's handle them
+    if (finalKey.toLowerCase() === 'onbeforerender' || finalKey.toLowerCase() === 'onafterrender') {
+      target[finalKey] = value;
+    } else {
+      if (!Array.isArray(value)) {
+        throw new Error('Arguments on a declarative method must be wrapped in an array.\nWorks:\n<example :methodCall="[256]" />\nDoesn\'t work:\n<example :methodCall="256" />');
+      } // if property is a function, let's try calling it
+
+
+      liveProperty.bind(node.instance)(...value);
+    } // pass the result to the parent
     // const parent = node.parentNode
     // if (parent) {
     //     const parentAsLunchboxNode = parent as Lunchbox.Node
     //     parentAsLunchboxNode.attached[finalKey] = result
     //         ; (parentAsLunchboxNode.instance as any)[finalKey] = result
     // }
+
   } else if (get(target, finalKey, undefined) !== undefined) {
     // blank strings evaluate to `true`
     // <mesh castShadow receiveShadow /> will work the same as
@@ -1575,33 +1632,51 @@ const createNodeOps = () => {
   };
 };
 
-/** The current camera. Often easier to use `useCamera` instead of this. */
-// TODO: update docs
+/** The current camera as a computed value. */
 
-const camera = ensuredCamera; // TODO: update docs
+const useCamera = () => inject(appCameraKey);
+/** Run a function using the current camera when it's present. */
 
-const useCamera = () => ensuredCamera();
-/** The current renderer as a computed value. Often easier to use `useRenderer` instead of this. */
+const onCameraReady = cb => {
+  const stopWatch = watch(useCamera(), newVal => {
+    if (newVal) {
+      cb(newVal);
+      stopWatch();
+    }
+  }, {
+    immediate: true
+  });
+};
+/** The current renderer as a computed value. */
 
-const renderer = ensureRenderer;
+const useRenderer = () => inject(appRenderersKey);
 /** Run a function using the current renderer when it's present. */
 
-const useRenderer = () => ensureRenderer();
-/** The current scene. Often easier to use `useScene` instead of this. */
-// TODO: update docs
+const onRendererReady = cb => {
+  const stopWatch = watch(useRenderer(), newVal => {
+    if (newVal) {
+      cb(newVal);
+      stopWatch();
+    }
+  }, {
+    immediate: true
+  });
+};
+/** The current scene as a computed value. */
 
-const scene = ensuredScene;
+const useScene = () => inject(appSceneKey);
 /** Run a function using the current scene when it's present. */
-// TODO: update docs
 
-function useScene(callback) {
-  return watch(scene, newVal => {
-    if (!newVal) return;
-    callback(newVal.value);
+const onSceneReady = cb => {
+  const stopWatch = watch(useScene(), newVal => {
+    if (newVal) {
+      cb(newVal);
+      stopWatch();
+    }
   }, {
     immediate: true
   });
-} // CUSTOM RENDER SUPPORT
+}; // CUSTOM RENDER SUPPORT
 // ====================
 
 /** Set a custom render function, overriding the Lunchbox app's default render function.
@@ -1658,14 +1733,15 @@ const useUpdateGlobals = () => inject(updateGlobalsInjectionKey);
 
 const updateGlobals = newValue => {
   useUpdateGlobals()?.(newValue);
-}; // TODO: document
-
-const useRootNode = () => inject(appRootNodeKey); // TODO: document
+};
+/** Use the current Lunchbox app. Usually used internally by Lunchbox. */
 
-const useApp = () => inject(appKey); // TODO: document
+const useApp = () => inject(appKey);
+/** Obtain a list of the start callback functions. Usually used internally by Lunchbox. */
 
-const useStartCallbacks = () => inject(startCallbackKey); //[] as Lunch.UpdateCallback[]
-// TODO: document
+const useStartCallbacks = () => inject(startCallbackKey);
+/** Run a given callback once when the Lunchbox app starts. Include an index to
+ * splice the callback at that index in the callback queue. */
 
 const onStart = (cb, index = Infinity) => {
   const callbacks = useStartCallbacks();
@@ -1675,7 +1751,8 @@ const onStart = (cb, index = Infinity) => {
   } else {
     callbacks?.splice(index, 0, cb);
   }
-}; // TODO: document
+};
+/** Obtain a list of interactable objects (registered via onClick, onHover, etc events). Usually used internally by Lunchbox. */
 
 const useLunchboxInteractables = () => inject(lunchboxInteractables); // CREATE APP
 // ====================
@@ -1838,4 +1915,4 @@ const createApp = root => {
   return app;
 };
 
-export { MiniDom, addEventListener, afterRenderKey, appCameraKey, appKey, appRenderersKey, appRootNodeKey, appSceneKey, beforeRenderKey, camera, cancelUpdate, cancelUpdateSource, clearCustomRender, clearCustomRenderKey, createApp, createCommentNode, createDomNode, createNode, createTextNode, ensureRenderer, ensuredCamera, ensuredScene, extend, find, frameIdKey, globalsInjectionKey, instantiateThreeObject, isMinidomNode, lunchboxInteractables, nestedPropertiesToCheck, offAfterRender, offAfterRenderKey, offBeforeRender, offBeforeRenderKey, onAfterRender, onAfterRenderKey, onBeforeRender, onBeforeRenderKey, onStart, renderer, scene, setCustomRender, setCustomRenderKey, startCallbackKey, update, updateGlobals, updateGlobalsInjectionKey, updateObjectProp, useAfterRender, useApp, useBeforeRender, useCamera, useCancelUpdate, useCancelUpdateSource, useCustomRender, useGlobals, useLunchboxInteractables, useRenderer, useRootNode, useScene, useStartCallbacks, useUpdateGlobals, watchStopHandleKey };
+export { MiniDom, addEventListener, afterRenderKey, appCameraKey, appKey, appRenderersKey, appRootNodeKey, appSceneKey, beforeRenderKey, cancelUpdate, cancelUpdateSource, clearCustomRender, clearCustomRenderKey, createApp, createCommentNode, createDomNode, createNode, createTextNode, extend, find, frameIdKey, globalsInjectionKey, instantiateThreeObject, isMinidomNode, lunchboxInteractables, nestedPropertiesToCheck, offAfterRender, offAfterRenderKey, offBeforeRender, offBeforeRenderKey, onAfterRender, onAfterRenderKey, onBeforeRender, onBeforeRenderKey, onCameraReady, onRendererReady, onSceneReady, onStart, setCustomRender, setCustomRenderKey, startCallbackKey, update, updateGlobals, updateGlobalsInjectionKey, updateObjectProp, useAfterRender, useApp, useBeforeRender, useCamera, useCancelUpdate, useCancelUpdateSource, useCustomRender, useGlobals, useLunchboxInteractables, useRenderer, useScene, useStartCallbacks, useUpdateGlobals, watchStopHandleKey };

package/extras/OrbitControlsWrapper.vue

@@ -11,15 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import {
-    onBeforeRender,
-    globals,
-    Lunch,
-    // camera,
-    useRenderer,
-    useCamera,
-} from '../src'
+import { computed, ref } from 'vue'
+import { onBeforeRender, Lunch, useCamera, useRenderer } from '../src'
 
 // props
 const props = defineProps<{
@@ -33,9 +26,6 @@ const ready = computed(() => {
 const camera = useCamera()
 const renderer = useRenderer()
 const orbitArgs = computed(() => [camera.value, renderer.value?.domElement])
-// watch(() => orbitArgs.value, console.log, { immediate: true })
-// console.log(renderer)
-watch(camera, console.log)
 
 // update
 const controls = ref<Lunch.LunchboxComponent>()

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lunchboxjs",
-    "version": "0.2.1001-beta.1",
+    "version": "0.2.1001-beta.2",
     "scripts": {
         "dev": "vite -c utils/vite.config.ts",
         "build": "vue-tsc --noEmit && vite build -c utils/vite.config.ts",
@@ -14,6 +14,9 @@
         "docs:serve": "vitepress serve docs",
         "demo:create": "node utils/createExample"
     },
+    "engines": {
+        "npm": ">=16.0.0"
+    },
     "dependencies": {
         "uuid": "8.3.2",
         "vue": "^3.2.16"

package/src/components/LunchboxEventHandlers.tsx

@@ -1,10 +1,10 @@
 import { defineComponent, onBeforeUnmount, ref, watch } from 'vue'
 import {
-    Lunch,
     useCamera,
+    Lunch,
     useGlobals,
     useLunchboxInteractables,
-    useRenderer,
+    onRendererReady,
 } from '..'
 import * as THREE from 'three'
 import { offBeforeRender, onBeforeRender } from '../core'
@@ -13,8 +13,6 @@ export const LunchboxEventHandlers = defineComponent({
     name: 'LunchboxEventHandlers',
     setup() {
         const interactables = useLunchboxInteractables()
-        const camera = useCamera()
-        const renderer = useRenderer()
         const globals = useGlobals()
         const mousePos = ref({ x: Infinity, y: Infinity })
         const inputActive = ref(false)
@@ -49,38 +47,34 @@ export const LunchboxEventHandlers = defineComponent({
         }
 
         // add mouse listener to renderer DOM element when the element is ready
-        const stopWatch = watch(
-            renderer,
-            (v) => {
-                if (!v?.domElement) return
-
-                // we have a DOM element, so let's add mouse listeners
-                const { domElement } = v
-
-                const mouseMoveListener = (evt: PointerEvent) => {
-                    const screenWidth = (domElement.width ?? 1) / globals.dpr
-                    const screenHeight = (domElement.height ?? 1) / globals.dpr
-                    mousePos.value.x = (evt.offsetX / screenWidth) * 2 - 1
-                    mousePos.value.y = -(evt.offsetY / screenHeight) * 2 + 1
-                }
-                const mouseDownListener = () => (inputActive.value = true)
-                const mouseUpListener = () => (inputActive.value = false)
-
-                // add mouse events
-                domElement.addEventListener('pointermove', mouseMoveListener)
-                domElement.addEventListener('pointerdown', mouseDownListener)
-                domElement.addEventListener('pointerup', mouseUpListener)
-
-                // stop the watcher
-                stopWatch()
-            },
-            { immediate: true }
-        )
+        onRendererReady((v) => {
+            if (!v?.domElement) return
+
+            // we have a DOM element, so let's add mouse listeners
+            const { domElement } = v
+
+            const mouseMoveListener = (evt: PointerEvent) => {
+                const screenWidth = (domElement.width ?? 1) / globals.dpr
+                const screenHeight = (domElement.height ?? 1) / globals.dpr
+                mousePos.value.x = (evt.offsetX / screenWidth) * 2 - 1
+                mousePos.value.y = -(evt.offsetY / screenHeight) * 2 + 1
+            }
+            const mouseDownListener = () => (inputActive.value = true)
+            const mouseUpListener = () => (inputActive.value = false)
+
+            // add mouse events
+            domElement.addEventListener('pointermove', mouseMoveListener)
+            domElement.addEventListener('pointerdown', mouseDownListener)
+            domElement.addEventListener('pointerup', mouseUpListener)
+        })
 
+        const camera = useCamera()
         const update = () => {
             const c = camera.value
             if (!c) return
 
+            // console.log(camera.value)
+
             raycaster.setFromCamera(mousePos.value, c)
             const intersections = raycaster.intersectObjects(
                 interactables?.value.map(
@@ -202,6 +196,10 @@ export const LunchboxEventHandlers = defineComponent({
             'onPointerUp',
         ]
         watch(inputActive, (isDown) => {
+            // run raycaster on click (necessary when `update` is not automatically called,
+            // for example in `updateSource` functions)
+            update()
+
             // meshes with multiple intersections receive multiple callbacks by default -
             // let's make it so they only receive one callback of each type per frame.
             // (ie usually when you click on a mesh, you expect only one click event to fire, even

package/src/components/LunchboxWrapper/LunchboxWrapper.tsx

@@ -1,10 +1,12 @@
 import {
+    computed,
     defineComponent,
     onBeforeUnmount,
     onMounted,
     PropType,
     reactive,
     ref,
+    watch,
     WatchSource,
 } from 'vue'
 import { cancelUpdate, cancelUpdateSource, MiniDom, update } from '../../core'
@@ -14,6 +16,8 @@ import { prepCanvas } from './prepCanvas'
 import { useUpdateGlobals, useStartCallbacks } from '../..'
 import { LunchboxScene } from './LunchboxScene'
 import { LunchboxEventHandlers } from '../LunchboxEventHandlers'
+import * as Keys from '../../keys'
+import { waitFor } from '../../utils'
 
 /** fixed & fill styling for container */
 const fillStyle = (position: string) => {
@@ -212,6 +216,43 @@ export const LunchboxWrapper = defineComponent({
         const canvasFillStyle =
             props.sizePolicy === 'container' ? 'static' : 'fixed'
 
+        // REACTIVE CUSTOM CAMERAS
+        // ====================
+        // find first camera with `type.name` property
+        // (which indicates a Lunch.Node)
+        const activeCamera = computed(() => {
+            const output = context.slots
+                ?.camera?.()
+                .find((c) => (c.type as any)?.name)
+            if (output) {
+                return output
+            }
+
+            return output
+        })
+
+        // TODO: make custom cameras reactive
+        watch(
+            activeCamera,
+            async (newVal, oldVal) => {
+                // console.log('got camera', newVal)
+                if (newVal && newVal?.props?.key !== oldVal?.props?.key) {
+                    // TODO: remove cast
+                    camera.value = newVal as any
+
+                    // TODO: why isn't this updating app camera?
+                    // const el = await waitFor(() => newVal.el)
+                    // console.log(el)
+                    // camera.value = el
+                    // console.log(newVal.uuid)
+                    // updateGlobals?.({ camera: el })
+                }
+            },
+            { immediate: true }
+        )
+
+        // RENDER FUNCTION
+        // ====================
         return () => (
             <>
                 {/* use renderer slot if provided... */}
@@ -270,7 +311,7 @@ export const LunchboxWrapper = defineComponent({
                 {/* use camera slot if provided... */}
                 {context.slots?.camera?.()?.length ? (
                     // TODO: remove `any` cast
-                    (camera.value = context.slots?.camera?.()[0] as any)
+                    camera.value
                 ) : props.ortho || props.orthographic ? (
                     <orthographicCamera
                         ref={camera}

package/src/core/index.ts

@@ -1,5 +1,4 @@
 export * from './createNode'
-export * from './ensure'
 export * from './interaction'
 export * from './extend'
 export * from './instantiateThreeObject'