lunchboxjs 0.1.4018 → 0.2.1001-beta.2

package/src/index.ts

@@ -1,82 +1,79 @@
-import { computed, createRenderer, Component, ref, watch } from 'vue'
-import { nodeOps } from './nodeOps'
 import {
-    // createdCamera,
-    // createdRenderer,
-    // autoScene,
-    ensuredCamera,
-    ensureRenderer,
-    ensuredScene,
-    ensureRootNode,
-    extend,
-    inputActive,
-    mousePos,
-    rootUuid,
-} from './core'
+    computed,
+    createRenderer,
+    Component,
+    ComputedRef,
+    inject,
+    watch,
+    reactive,
+    Ref,
+} from 'vue'
+import { createNodeOps } from './nodeOps'
+import { extend, 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)
+/** The current camera as a computed value. */
+export const useCamera = <T extends THREE.Camera = THREE.Camera>() =>
+    inject<ComputedRef<T>>(Keys.appCameraKey)!
 /** 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,
+export const onCameraReady = <T extends THREE.Camera = THREE.Camera>(
+    cb: (camera?: T) => void
+) => {
+    const stopWatch = watch(
+        useCamera<T>(),
         (newVal) => {
-            if (!newVal) return
-            callback(newVal as unknown as T)
+            if (newVal) {
+                cb(newVal)
+                stopWatch()
+            }
         },
         { immediate: true }
     )
 }
 
-/** 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. */
+export const useRenderer = <T extends THREE.Renderer = THREE.WebGLRenderer>() =>
+    inject<ComputedRef<T>>(Keys.appRenderersKey)!
 /** 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,
+export const onRendererReady = <T extends THREE.Renderer = THREE.Renderer>(
+    cb: (renderer?: T) => void
+) => {
+    const stopWatch = watch(
+        useRenderer<T>(),
         (newVal) => {
-            if (!newVal) return
-            callback(newVal as unknown as T)
+            if (newVal) {
+                cb(newVal)
+                stopWatch()
+            }
         },
         { immediate: true }
     )
 }
 
-/** The current scene. Often easier to use `useScene` instead of this. */
-export const scene = computed(() => ensuredScene.value.instance)
+/** The current scene as a computed value. */
+export const useScene = <T extends THREE.Scene = THREE.Scene>() =>
+    inject<ComputedRef<T>>(Keys.appSceneKey)!
 /** Run a function using the current scene when it's present. */
-export function useScene(callback: (newScene: THREE.Scene) => void) {
-    return watch(
-        scene,
+export const onSceneReady = <T extends THREE.Scene = THREE.Scene>(
+    cb: (scene?: T) => void
+) => {
+    const stopWatch = watch(
+        useScene<T>(),
         (newVal) => {
-            if (!newVal) return
-            callback(newVal as any)
+            if (newVal) {
+                cb(newVal)
+                stopWatch()
+            }
         },
         { immediate: true }
     )
@@ -84,38 +81,213 @@ 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)
+}
+
+/** Use the current Lunchbox app. Usually used internally by Lunchbox. */
+export const useApp = () => inject<Lunch.App>(Keys.appKey)
+
+/** Obtain a list of the start callback functions. Usually used internally by Lunchbox. */
+export const useStartCallbacks = () =>
+    inject<Lunch.UpdateCallback[]>(Keys.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. */
+export const onStart = (cb: Lunch.UpdateCallback, index = Infinity) => {
+    const callbacks = useStartCallbacks()
+    if (index === Infinity) {
+        callbacks?.push(cb)
+    } else {
+        callbacks?.splice(index, 0, cb)
+    }
 }
 
+/** Obtain a list of interactable objects (registered via onClick, onHover, etc events). Usually used internally by Lunchbox. */
+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 +295,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

package/src/nodeOps/index.ts

@@ -1,70 +1,83 @@
-import { RendererOptions } from 'vue'
+import { RendererOptions, ref } from 'vue'
 import { createElement } from './createElement'
 import { insert } from './insert'
 import { remove } from './remove'
 import { isLunchboxDomComponent, isLunchboxRootNode } from '../utils'
-import {
-    createCommentNode,
-    createTextNode,
-    MiniDom,
-    updateObjectProp,
-} from '../core'
-import { Lunch } from '..'
+import { createCommentNode, createTextNode, updateObjectProp } from '../core'
+import type { MiniDom } from '../core'
+import type { Lunch } from '..'
 
 /*
     Elements are `create`d from the outside in, then `insert`ed from the inside out.
 */
 
-export const nodeOps: RendererOptions<
-    MiniDom.RendererBaseNode,
-    MiniDom.RendererBaseNode
-> = {
-    createElement,
-    createText(text) {
-        return createTextNode({ text })
-    },
-    createComment(text) {
-        return createCommentNode({ text })
-    },
-    insert,
-    nextSibling(node) {
-        const result = node.nextSibling
-        // console.log('found', result)
-        if (!result) return null
-        return result as MiniDom.RendererBaseNode
-    },
-    parentNode(node) {
-        const result = node.parentNode
-        if (!result) return null
-        return result as MiniDom.RendererBaseNode
-    },
-    patchProp(node, key, prevValue, nextValue) {
-        if (isLunchboxDomComponent(node)) {
-            // handle DOM node
-            if (key === 'style') {
-                // special handling for style
-                Object.keys(nextValue).forEach((k) => {
-                    ;(node.domElement.style as any)[k] = nextValue[k]
-                })
-            } else {
-                node.domElement.setAttribute(key, nextValue)
+export const createNodeOps = () => {
+    // APP-LEVEL GLOBALS
+    // ====================
+    // These need to exist at the app level in a place where the node ops can access them.
+    // It'd be better to set these via `app.provide` at app creation, but the node ops need access
+    // to these values before the app is instantiated, so this is the next-best place for them to exist.
+    const interactables = ref([] as Lunch.Node[])
+
+    // NODE OPS
+    // ====================
+    const nodeOps: RendererOptions<
+        MiniDom.RendererBaseNode,
+        MiniDom.RendererBaseNode
+    > = {
+        createElement,
+        createText(text) {
+            return createTextNode({ text })
+        },
+        createComment(text) {
+            return createCommentNode({ text })
+        },
+        insert,
+        nextSibling(node) {
+            const result = node.nextSibling
+            if (!result) return null
+            return result as MiniDom.RendererBaseNode
+        },
+        parentNode(node) {
+            const result = node.parentNode
+            if (!result) return null
+            return result as MiniDom.RendererBaseNode
+        },
+        patchProp(node, key, prevValue, nextValue) {
+            if (isLunchboxDomComponent(node)) {
+                // handle DOM node
+                if (key === 'style') {
+                    // special handling for style
+                    Object.keys(nextValue).forEach((k) => {
+                        ;(node.domElement.style as any)[k] = nextValue[k]
+                    })
+                } else {
+                    node.domElement.setAttribute(key, nextValue)
+                }
+                return
+            }
+
+            // ignore if root node, or Lunchbox internal prop
+            if (isLunchboxRootNode(node) || key.startsWith('$')) {
+                return
             }
-            return
-        }
 
-        // ignore if root node, or Lunchbox internal prop
-        if (isLunchboxRootNode(node) || key.startsWith('$')) {
-            return
-        }
+            // otherwise, update prop
+            updateObjectProp({
+                node: node as Lunch.Node,
+                key,
+                interactables,
+                value: nextValue,
+            })
+        },
+        remove,
+        setElementText() {
+            // noop
+        },
+        setText() {
+            // noop
+        },
+    }
 
-        // otherwise, update prop
-        updateObjectProp({ node: node as Lunch.Node, key, value: nextValue })
-    },
-    remove,
-    setElementText() {
-        // noop
-    },
-    setText() {
-        // noop
-    },
+    return { nodeOps, interactables }
 }