lunchboxjs 0.1.4017 → 0.2.1001-beta.1

package/src/core/update.ts

@@ -1,31 +1,28 @@
-import { ensureRenderer, ensuredScene, ensuredCamera } from '.'
-import { Lunch } from '..'
-import { toRaw, watch, WatchStopHandle } from 'vue'
-
-let frameID: number
-let watchStopHandle: WatchStopHandle
-
-export const beforeRender = [] as Lunch.UpdateCallback[]
-export const afterRender = [] as Lunch.UpdateCallback[]
+import type { Lunch } from '..'
+import { inject, toRaw, watch } from 'vue'
+import * as Keys from '../keys'
 
 const requestUpdate = (opts: Lunch.UpdateCallbackProperties) => {
-    cancelUpdate()
-    frameID = requestAnimationFrame(() =>
-        update({
-            app: opts.app,
-            renderer: ensureRenderer.value?.instance,
-            scene: ensuredScene.value.instance,
-            camera: ensuredCamera.value?.instance,
-            updateSource: opts.updateSource,
-        })
+    if (typeof opts.app.config.globalProperties.lunchbox.frameId === 'number') {
+        cancelAnimationFrame(opts.app.config.globalProperties.lunchbox.frameId)
+    }
+    opts.app.config.globalProperties.lunchbox.frameId = requestAnimationFrame(
+        () =>
+            update({
+                app: opts.app,
+                renderer: opts.renderer,
+                scene: opts.scene,
+                camera: opts.camera,
+                updateSource: opts.updateSource,
+            })
     )
 }
 
 export const update: Lunch.UpdateCallback = (opts) => {
     if (opts.updateSource) {
-        if (!watchStopHandle) {
+        if (!opts.app.config.globalProperties.lunchbox.watchStopHandle) {
             // request next frame only when state changes
-            watchStopHandle = watch(
+            opts.app.config.globalProperties.lunchbox.watchStopHandle = watch(
                 opts.updateSource,
                 () => {
                     requestUpdate(opts)
@@ -44,10 +41,8 @@ export const update: Lunch.UpdateCallback = (opts) => {
     const { app, renderer, scene, camera } = opts
 
     // BEFORE RENDER
-    beforeRender.forEach((cb: Lunch.UpdateCallback | undefined) => {
-        if (cb) {
-            cb(opts)
-        }
+    app.config.globalProperties.lunchbox.beforeRender.forEach((cb) => {
+        cb?.(opts)
     })
 
     // RENDER
@@ -55,56 +50,84 @@ export const update: Lunch.UpdateCallback = (opts) => {
         if (app.customRender) {
             app.customRender(opts)
         } else {
-            renderer.render(toRaw(scene), toRaw(camera))
+            renderer.render(
+                toRaw(scene),
+                // opts.app.config.globalProperties.lunchbox.camera!
+                toRaw(camera)
+            )
         }
     }
 
     // AFTER RENDER
-    afterRender.forEach((cb: Lunch.UpdateCallback | undefined) => {
-        if (cb) {
-            cb(opts)
-        }
+    app.config.globalProperties.lunchbox.afterRender.forEach((cb) => {
+        cb?.(opts)
     })
 }
 
-export const onBeforeRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
-    if (index === Infinity) {
-        beforeRender.push(cb)
-    } else {
-        beforeRender.splice(index, 0, cb)
+// before render
+// ====================
+// TODO: document
+export const useBeforeRender = () => {
+    return {
+        onBeforeRender: inject<typeof onBeforeRender>(Keys.onBeforeRenderKey),
+        offBeforeRender: inject<typeof offBeforeRender>(
+            Keys.offBeforeRenderKey
+        ),
     }
 }
 
+// TODO: document
+export const onBeforeRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
+    useBeforeRender().onBeforeRender?.(cb, index)
+}
+
+// TODO: document
 export const offBeforeRender = (cb: Lunch.UpdateCallback | number) => {
-    if (isFinite(cb as number)) {
-        beforeRender.splice(cb as number, 1)
-    } else {
-        const idx = beforeRender.findIndex((v) => v == cb)
-        beforeRender.splice(idx, 1)
+    useBeforeRender().offBeforeRender?.(cb)
+}
+
+// after render
+// ====================
+// TODO: document
+export const useAfterRender = () => {
+    return {
+        onAfterRender: inject<typeof onAfterRender>(Keys.onBeforeRenderKey),
+        offAfterRender: inject<typeof offAfterRender>(Keys.offBeforeRenderKey),
     }
 }
 
+// TODO: document
 export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
-    if (index === Infinity) {
-        afterRender.push(cb)
-    } else {
-        afterRender.splice(index, 0, cb)
-    }
+    useBeforeRender().onBeforeRender?.(cb, index)
 }
 
+// TODO: document
 export const offAfterRender = (cb: Lunch.UpdateCallback | number) => {
-    if (isFinite(cb as number)) {
-        afterRender.splice(cb as number, 1)
-    } else {
-        const idx = afterRender.findIndex((v) => v == cb)
-        afterRender.splice(idx, 1)
+    useBeforeRender().offBeforeRender?.(cb)
+}
+
+// TODO: document
+export const useCancelUpdate = () => {
+    const frameId = inject<number>(Keys.frameIdKey)
+    return () => {
+        if (frameId !== undefined) cancelAnimationFrame(frameId)
     }
 }
 
+// TODO: document
 export const cancelUpdate = () => {
-    if (frameID) cancelAnimationFrame(frameID)
+    useCancelUpdate()?.()
+}
+
+// TODO: document
+export const useCancelUpdateSource = () => {
+    const cancel = inject<
+        Lunch.App['config']['globalProperties']['watchStopHandle']
+    >(Keys.watchStopHandleKey)
+    return () => cancel?.()
 }
 
+// TODO: document
 export const cancelUpdateSource = () => {
-    if (watchStopHandle) watchStopHandle()
+    useCancelUpdateSource()?.()
 }

package/src/core/updateObjectProp.ts

@@ -1,34 +1,25 @@
 import { isEventKey, isLunchboxStandardNode } from '../utils'
 import { addEventListener } from './interaction'
 import { get, isNumber, set } from 'lodash'
-import { Lunch } from '..'
-
-/** Update the given node so all of its props are current. */
-export function updateAllObjectProps({ node }: { node: Lunch.Node }) {
-    // set props
-    const props = node.props || {}
-    let output = node
-    Object.keys(props).forEach((key) => {
-        output = updateObjectProp({ node, key, value: props[key] })
-    })
-
-    return output
-}
+import type { Lunch } from '..'
+import type { Ref } from 'vue'
 
 /** Update a single prop on a given node. */
 export function updateObjectProp({
     node,
     key,
+    interactables,
     value,
 }: {
     node: Lunch.Node
     key: string
+    interactables: Ref<Lunch.Node[]>
     value: any
 }) {
     // handle and return early if prop is an event
     // (event list from react-three-fiber)
     if (isEventKey(key)) {
-        return addEventListener({ node, key, value })
+        return addEventListener({ node, key, interactables, value })
     }
 
     // update THREE property

package/src/index.ts

@@ -1,82 +1,54 @@
-import { computed, createRenderer, Component, ref, watch } from 'vue'
-import { nodeOps } from './nodeOps'
 import {
-    // createdCamera,
-    // createdRenderer,
-    // autoScene,
+    computed,
+    createRenderer,
+    Component,
+    inject,
+    watch,
+    reactive,
+    Ref,
+} from 'vue'
+import { createNodeOps } from './nodeOps'
+import {
     ensuredCamera,
     ensureRenderer,
     ensuredScene,
-    ensureRootNode,
     extend,
-    inputActive,
-    mousePos,
-    rootUuid,
+    MiniDom,
 } from './core'
 import { components } from './components'
 import { Lunch } from './types'
 
-export { lunchboxRootNode as lunchboxTree } from './core'
-export {
-    offAfterRender,
-    offBeforeRender,
-    onAfterRender,
-    onBeforeRender,
-    onStart,
-} from './core'
+export * from './core'
 export * from './types'
 
+import * as Keys from './keys'
+export * from './keys'
+
 // Utilities
 export * from './utils/find'
 
-/** Useful globals. */
-export const globals = {
-    dpr: ref(1),
-    inputActive,
-    mousePos,
-}
-
 /** The current camera. Often easier to use `useCamera` instead of this. */
-export const camera = computed(() => ensuredCamera.value?.instance ?? null)
-/** Run a function using the current camera when it's present. */
-export function useCamera<T extends THREE.Camera = THREE.PerspectiveCamera>(
-    callback: (cam: T) => void
-) {
-    return watch(
-        camera,
-        (newVal) => {
-            if (!newVal) return
-            callback(newVal as unknown as T)
-        },
-        { immediate: true }
-    )
-}
+// TODO: update docs
+export const camera = ensuredCamera
+// TODO: update docs
+export const useCamera = () => ensuredCamera()
 
-/** The current renderer. Often easier to use `useRenderer` instead of this. */
-export const renderer = computed(() => ensureRenderer.value?.instance ?? null)
+/** The current renderer as a computed value. Often easier to use `useRenderer` instead of this. */
+export const renderer = ensureRenderer
 /** Run a function using the current renderer when it's present. */
-export function useRenderer<T extends THREE.Renderer = THREE.WebGLRenderer>(
-    callback: (rend: T) => void
-) {
-    return watch(
-        renderer,
-        (newVal) => {
-            if (!newVal) return
-            callback(newVal as unknown as T)
-        },
-        { immediate: true }
-    )
-}
+export const useRenderer = () => ensureRenderer()!
 
 /** The current scene. Often easier to use `useScene` instead of this. */
-export const scene = computed(() => ensuredScene.value.instance)
+// TODO: update docs
+export const scene = ensuredScene
 /** Run a function using the current scene when it's present. */
+// TODO: update docs
 export function useScene(callback: (newScene: THREE.Scene) => void) {
     return watch(
         scene,
         (newVal) => {
             if (!newVal) return
-            callback(newVal as any)
+            callback(newVal.value as THREE.Scene)
         },
         { immediate: true }
     )
@@ -84,38 +56,216 @@ export function useScene(callback: (newScene: THREE.Scene) => void) {
 
 // CUSTOM RENDER SUPPORT
 // ====================
-let app: Lunch.App | null = null
-let queuedCustomRenderFunction:
-    | ((opts: Lunch.UpdateCallbackProperties) => void)
-    | null = null
-
 /** Set a custom render function, overriding the Lunchbox app's default render function.
  * Changing this requires the user to manually render their scene.
+ *
+ * Invokes immediately - use `useCustomRender().setCustomRender`
+ * if you need to call somewhere outside of `setup`.
  */
 export const setCustomRender = (
     render: (opts: Lunch.UpdateCallbackProperties) => void
 ) => {
-    if (app) app.setCustomRender(render)
-    else queuedCustomRenderFunction = render
+    useCustomRender()?.setCustomRender?.(render)
 }
 
-/** Clear the active app's custom render function. */
+/** Clear the active app's custom render function.
+ *
+ * Invokes immediately - use `useCustomRender().clearCustomRender`
+ * if you need to call somewhere outside of `setup`.
+ */
 export const clearCustomRender = () => {
-    if (app) app.clearCustomRender()
-    else queuedCustomRenderFunction = null
+    useCustomRender()?.clearCustomRender?.()
+}
+
+/** Provides `setCustomRender` and `clearCustomRender` functions to be called in a non-`setup` context. */
+export const useCustomRender = () => {
+    return {
+        /** Set a custom render function, overriding the Lunchbox app's default render function.
+         * Changing this requires the user to manually render their scene. */
+        setCustomRender: inject<Lunch.CustomRenderFunctionSetter>(
+            Keys.setCustomRenderKey
+        ),
+        /** Clear the active app's custom render function. */
+        clearCustomRender: inject<() => void>(Keys.clearCustomRenderKey),
+    }
+}
+
+/** Use app-level globals. */
+export const useGlobals = () =>
+    inject<Lunch.AppGlobals>(Keys.globalsInjectionKey)!
+
+/** Construct a function to update your app-level globals.
+ *
+ * ```js
+ * // in setup():
+ * const updateGlobals = useUpdateGlobals()
+ *
+ * // ...later, to update the device pixel resolution...
+ * updateGlobals({ dpr: 2 })
+ * ```
+ */
+export const useUpdateGlobals = () =>
+    inject<Lunch.AppGlobalsUpdate>(Keys.updateGlobalsInjectionKey)
+
+/** Update app-level globals.
+ *
+ * Invokes immediately - use `useUpdateGlobals`
+ * if you need to call somewhere outside of `setup`.
+ */
+export const updateGlobals = (newValue: Partial<Lunch.AppGlobals>) => {
+    useUpdateGlobals()?.(newValue)
+}
+
+// TODO: document
+export const useRootNode = () =>
+    inject<MiniDom.RendererRootNode>(Keys.appRootNodeKey)
+
+// TODO: document
+export const useApp = () => inject<Lunch.App>(Keys.appKey)
+
+// TODO: document
+export const useStartCallbacks = () =>
+    inject<Lunch.UpdateCallback[]>(Keys.startCallbackKey) //[] as Lunch.UpdateCallback[]
+
+// TODO: document
+export const onStart = (cb: Lunch.UpdateCallback, index = Infinity) => {
+    const callbacks = useStartCallbacks()
+    if (index === Infinity) {
+        callbacks?.push(cb)
+    } else {
+        callbacks?.splice(index, 0, cb)
+    }
 }
 
+// TODO: document
+export const useLunchboxInteractables = () =>
+    inject<Ref<Lunch.Node[]>>(Keys.lunchboxInteractables)
+
 // CREATE APP
 // ====================
 export const createApp = (root: Component) => {
-    app = createRenderer(nodeOps).createApp(root) as Lunch.App
+    const { nodeOps, interactables } = createNodeOps()
+    const app = createRenderer(nodeOps).createApp(root) as Lunch.App
+
+    // provide Lunchbox interaction handlers flag (modified when user references events via
+    // @click, etc)
+    app.provide(Keys.lunchboxInteractables, interactables)
 
     // register all components
+    // ====================
     Object.keys(components).forEach((key) => {
         app?.component(key, (components as any)[key])
     })
 
+    // provide custom renderer functions
+    // ====================
+    app.provide(
+        Keys.setCustomRenderKey,
+        (render: (opts: Lunch.UpdateCallbackProperties) => void) => {
+            app.setCustomRender(render)
+        }
+    )
+    app.provide(Keys.clearCustomRenderKey, () => {
+        app.clearCustomRender()
+    })
+
+    // before render
+    // ====================
+    const beforeRender = [] as Lunch.UpdateCallback[]
+    app.provide(Keys.beforeRenderKey, beforeRender)
+    app.provide(
+        Keys.onBeforeRenderKey,
+        (cb: Lunch.UpdateCallback, index = Infinity) => {
+            if (index === Infinity) {
+                beforeRender.push(cb)
+            } else {
+                beforeRender.splice(index, 0, cb)
+            }
+        }
+    )
+    app.provide(
+        Keys.offBeforeRenderKey,
+        (cb: Lunch.UpdateCallback | number) => {
+            if (isFinite(cb as number)) {
+                beforeRender.splice(cb as number, 1)
+            } else {
+                const idx = beforeRender.findIndex((v) => v == cb)
+                if (idx !== -1) {
+                    beforeRender.splice(idx, 1)
+                }
+            }
+        }
+    )
+
+    // after render
+    // ====================
+    const afterRender = [] as Lunch.UpdateCallback[]
+    app.provide(Keys.afterRenderKey, afterRender)
+    app.provide(
+        Keys.onAfterRenderKey,
+        (cb: Lunch.UpdateCallback, index = Infinity) => {
+            if (index === Infinity) {
+                afterRender.push(cb)
+            } else {
+                afterRender.splice(index, 0, cb)
+            }
+        }
+    )
+    app.provide(Keys.offAfterRenderKey, (cb: Lunch.UpdateCallback | number) => {
+        if (isFinite(cb as number)) {
+            afterRender.splice(cb as number, 1)
+        } else {
+            const idx = afterRender.findIndex((v) => v == cb)
+            if (idx !== -1) {
+                afterRender.splice(idx, 1)
+            }
+        }
+    })
+
+    // save app-level components
+    // ====================
+    app.config.globalProperties.lunchbox = reactive({
+        afterRender,
+        beforeRender,
+        camera: null,
+        dpr: 1,
+        frameId: -1,
+        renderer: null,
+        scene: null,
+        watchStopHandle: null,
+
+        // TODO: inputActive, mousePos
+    })
+
+    // provide app-level globals & globals update method
+    // ====================
+    app.provide(Keys.globalsInjectionKey, app.config.globalProperties.lunchbox)
+    app.provide<Lunch.AppGlobalsUpdate>(
+        Keys.updateGlobalsInjectionKey,
+        (newGlobals: Partial<Lunch.AppGlobals>) => {
+            Object.keys(newGlobals).forEach((key) => {
+                const typedKey = key as keyof Lunch.AppGlobals
+                // TODO: fix
+                app.config.globalProperties.lunchbox[typedKey] = newGlobals[
+                    typedKey
+                ] as any
+            })
+        }
+    )
+
+    // frame ID (used for update functions)
+    // ====================
+    app.provide(Keys.frameIdKey, app.config.globalProperties.lunchbox.frameId)
+
+    // watch stop handler (used for conditional update loop)
+    // ====================
+    app.provide(
+        Keys.watchStopHandleKey,
+        app.config.globalProperties.lunchbox.watchStopHandle
+    )
+
     // update mount function to match Lunchbox.Node
+    // ====================
     const { mount } = app
     app.mount = (root, ...args) => {
         // find DOM element to use as app root
@@ -123,43 +273,65 @@ export const createApp = (root: Component) => {
             typeof root === 'string' ? document.querySelector(root) : root
         ) as HTMLElement
         // create or find root node
-        const rootNode = ensureRootNode({
+        const rootNode = new MiniDom.RendererRootNode({
             domElement,
             isLunchboxRootNode: true,
             name: 'root',
             metaType: 'rootMeta',
             type: 'root',
-            uuid: rootUuid,
+            uuid: 'LUNCHBOX_ROOT',
         })
-        app!.rootNode = rootNode
+        app.rootNode = rootNode
+        app.provide(Keys.appRootNodeKey, rootNode)
         const mounted = mount(rootNode, ...args)
         return mounted
     }
 
     // embed .extend function
+    // ====================
     app.extend = (targets: Record<string, any>) => {
         extend({ app: app!, ...targets })
         return app!
     }
 
+    // start callback functions
+    // ====================
+    const startCallbacks: Lunch.UpdateCallback[] = []
+    app.provide(Keys.startCallbackKey, startCallbacks)
+
     // prep for custom render support
+    // ====================
     app.setCustomRender = (
         newRender: (opts: Lunch.UpdateCallbackProperties) => void
     ) => {
-        app!.customRender = newRender
-    }
-
-    // add queued custom render if we have one
-    if (queuedCustomRenderFunction) {
-        app.setCustomRender(queuedCustomRenderFunction)
-        queuedCustomRenderFunction = null
+        if (app) {
+            app.customRender = newRender
+        }
     }
 
     // add custom render removal
     app.clearCustomRender = () => {
-        app!.customRender = null
+        if (app) {
+            app.customRender = null
+        }
     }
 
+    // provide app
+    // ====================
+    app.provide(Keys.appKey, app)
+    app.provide(
+        Keys.appRenderersKey,
+        computed(() => app.config.globalProperties.lunchbox.renderer)
+    )
+    app.provide(
+        Keys.appSceneKey,
+        computed(() => app.config.globalProperties.lunchbox.scene)
+    )
+    app.provide(
+        Keys.appCameraKey,
+        computed(() => app.config.globalProperties.lunchbox.camera)
+    )
+
     // done
     return app
 }

package/src/keys.ts

@@ -0,0 +1,25 @@
+export const globalsInjectionKey = Symbol()
+export const updateGlobalsInjectionKey = Symbol()
+
+export const setCustomRenderKey = Symbol()
+export const clearCustomRenderKey = Symbol()
+
+export const beforeRenderKey = Symbol()
+export const onBeforeRenderKey = Symbol()
+export const offBeforeRenderKey = Symbol()
+
+export const afterRenderKey = Symbol()
+export const onAfterRenderKey = Symbol()
+export const offAfterRenderKey = Symbol()
+
+export const frameIdKey = Symbol()
+export const watchStopHandleKey = Symbol()
+
+export const appRootNodeKey = Symbol()
+export const appKey = Symbol()
+export const appRenderersKey = Symbol()
+export const appSceneKey = Symbol()
+export const appCameraKey = Symbol()
+export const lunchboxInteractables = Symbol()
+
+export const startCallbackKey = Symbol()

package/src/nodeOps/createElement.ts

@@ -10,13 +10,10 @@ export const createElement = (
     isCustomizedBuiltin?: string,
     vnodeProps?: Lunch.LunchboxMetaProps
 ) => {
-    const options = { type } as Partial<Lunch.MetaBase>
-    if (vnodeProps) {
-        options.props = vnodeProps
-    }
+    const options: Partial<Lunch.MetaBase> = { type, props: vnodeProps }
 
     // handle dom node
-    const isDomNode = isLunchboxDomComponent(type)
+    const isDomNode = isLunchboxDomComponent(options)
     if (isDomNode) {
         const node = createDomNode(options)
         return node