lunchboxjs 0.2.1020 → 2.0.0-beta.0

package/src/core/updateObjectProp.ts

@@ -1,153 +0,0 @@
-import {
-    get,
-    isEventKey,
-    isLunchboxStandardNode,
-    isNumber,
-    set,
-} from '../utils'
-import { addEventListener } from './interaction'
-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, interactables, value })
-    }
-
-    // update THREE property
-    // get final key
-    const camelKey = key.replace(/-/g, '.')
-    const finalKey = propertyShortcuts[camelKey] || camelKey
-
-    // handle and return early if prop is specific to Vue/Lunchbox
-    if (
-        internalLunchboxVueKeys.includes(key) ||
-        internalLunchboxVueKeys.includes(finalKey)
-    )
-        return node
-
-    // everything else should be Three-specific, so let's cancel if this isn't a standard node
-    if (!isLunchboxStandardNode(node)) return node
-
-    // parse $attached values
-    if (typeof value === 'string' && value.startsWith('$attached')) {
-        const attachedName = value.replace('$attached.', '')
-        value = get(node.attached, attachedName, null)
-    }
-
-    // save instance
-    const target = node.instance
-
-    // cancel if no target
-    if (!target) return node
-
-    // burrow down until we get property to change
-    let liveProperty: any
-    for (let i = 0; i < nestedPropertiesToCheck.length && !liveProperty; i++) {
-        const nestedProperty = nestedPropertiesToCheck[i]
-        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) {
-        // if value is a number and the property has a `setScalar` method, use that
-        liveProperty.setScalar(value)
-    } else if (liveProperty && liveProperty.set) {
-        // if property has `set` method, use that (https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#shortcuts)
-        const nextValueAsArray = Array.isArray(value) ? value : [value]
-        ;(target as any)[finalKey].set(...nextValueAsArray)
-    } else if (typeof liveProperty === 'function') {
-        // some function properties are set rather than called, so let's handle them
-        if (
-            finalKey.toLowerCase() === 'onbeforerender' ||
-            finalKey.toLowerCase() === 'onafterrender'
-        ) {
-            ;(target as any)[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
-        // <mesh :castShadow="true" :receiveShadow="true" />
-        set(target, finalKey, value === '' ? true : value)
-    } else {
-        // if you see this error in production, you might need to add `finalKey`
-        // to `internalLunchboxVueKeys` below
-        console.log(`No property ${finalKey} found on ${target}`)
-    }
-
-    // mark that we need to update if needed
-    const targetTypeRaw =
-        (target as any)?.texture?.type || (target as any)?.type
-    if (typeof targetTypeRaw === 'string') {
-        const targetType = targetTypeRaw.toLowerCase()
-
-        switch (true) {
-            case targetType.includes('material'):
-                ;(target as unknown as THREE.Material).needsUpdate = true
-                break
-            case targetType.includes('camera') &&
-                (target as any).updateProjectionMatrix:
-                ;(
-                    target as unknown as
-                        | THREE.PerspectiveCamera
-                        | THREE.OrthographicCamera
-                ).updateProjectionMatrix()
-                break
-        }
-    }
-
-    return node
-}
-
-const propertyShortcuts: { [key: string]: string } = {
-    x: 'position.x',
-    y: 'position.y',
-    z: 'position.z',
-}
-
-export const nestedPropertiesToCheck = ['', 'parameters']
-
-/** props that Lunchbox intercepts and prevents passing to created instances */
-const internalLunchboxVueKeys = [
-    'args',
-    'attach',
-    'attachArray',
-    'is.default',
-    'isDefault',
-    'key',
-    'onAdded',
-    // 'onReady',
-    'ref',
-    'src',
-]

package/src/index.ts

@@ -1,400 +0,0 @@
-import {
-    computed,
-    createRenderer,
-    Component,
-    ComputedRef,
-    inject,
-    watch,
-    reactive,
-    Ref,
-    WatchStopHandle,
-    toRaw,
-} from 'vue'
-import { createNodeOps } from './nodeOps'
-import { extend, MiniDom } from './core'
-import { components } from './components'
-import { Lunch } from './types'
-
-export * from './core'
-export * from './types'
-
-import * as Keys from './keys'
-export * from './keys'
-
-// Utilities
-export * from './utils/find'
-
-/** 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 const onCameraReady = <T extends THREE.Camera = THREE.Camera>(
-    cb: (camera?: T) => void
-) => {
-    const existing = useCamera<T>()
-    if (existing.value) {
-        cb(existing.value)
-        return
-    }
-
-    let stopWatch: WatchStopHandle | null = null
-    stopWatch = watch(useCamera<T>(), (newVal) => {
-        if (newVal) {
-            cb(newVal)
-            stopWatch?.()
-        }
-    })
-}
-
-/** 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 const onRendererReady = <T extends THREE.Renderer = THREE.Renderer>(
-    cb: (renderer?: T) => void
-) => {
-    const existing = useRenderer<T>()
-    if (existing.value) {
-        cb(existing.value)
-        return
-    }
-
-    let stopWatch: WatchStopHandle | null = null
-    stopWatch = watch(
-        useRenderer<T>(),
-        (newVal) => {
-            if (newVal) {
-                cb(newVal)
-                stopWatch?.()
-            }
-        },
-        { immediate: true }
-    )
-}
-
-/** 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 const onSceneReady = <T extends THREE.Scene = THREE.Scene>(
-    cb: (scene?: T) => void
-) => {
-    const existing = useScene<T>()
-    if (existing.value) {
-        cb(existing.value)
-        return
-    }
-
-    let stopWatch: WatchStopHandle | null = null
-    stopWatch = watch(
-        useScene<T>(),
-        (newVal) => {
-            if (newVal) {
-                cb(newVal)
-                stopWatch?.()
-            }
-        },
-        { immediate: true }
-    )
-}
-
-// CUSTOM RENDER SUPPORT
-// ====================
-/** 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
-) => {
-    useCustomRender()?.setCustomRender?.(render)
-}
-
-/** 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 = () => {
-    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)
-
-/** Build a computed instance-getter from a specified ref. Defaults to a `toRaw`'d result. */
-export const getInstance = <T = unknown>(
-    target: Ref<Lunch.LunchboxComponent<T> | Lunch.Node<T> | null>,
-    raw = true
-) =>
-    computed(() => {
-        const output =
-            (target.value as Lunch.LunchboxComponent<T>)?.$el?.instance ??
-            (target.value as Lunch.Node<T>)?.instance ??
-            null
-        if (output && raw) return toRaw(output)
-        return output
-    })
-
-// CREATE APP
-// ====================
-export const createApp = (
-    root: Component,
-    rootProps: Record<string, any> = {}
-) => {
-    const { nodeOps, interactables } = createNodeOps()
-    const app = createRenderer(nodeOps).createApp(root, rootProps) 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
-        const domElement = (
-            typeof root === 'string' ? document.querySelector(root) : root
-        ) as HTMLElement
-        // create or find root node
-        const rootNode = new MiniDom.RendererRootNode({
-            domElement,
-            isLunchboxRootNode: true,
-            name: 'root',
-            metaType: 'rootMeta',
-            type: 'root',
-            uuid: 'LUNCHBOX_ROOT',
-        })
-        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
-    ) => {
-        if (app) {
-            app.customRender = newRender
-        }
-    }
-
-    // add custom render removal
-    app.clearCustomRender = () => {
-        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)
-    )
-
-    app._props
-
-    // done
-    return app
-}
-
-/** Use this plugin to add a <lunchbox> component in your HTML app. */
-export { bridge as lunchbox } from './plugins/bridge/bridge'

package/src/keys.ts

@@ -1,31 +0,0 @@
-// These keys originally used Symbols per Vue instructions,
-// but differing dev/build values made dev difficult.
-// These strings have some risk of namespace collision,
-// but that's a low enough risk that they're worth hardcoding
-// as strings, in my opinion.
-
-export const globalsInjectionKey = 'lunchbox-globals' // Symbol()
-export const updateGlobalsInjectionKey = 'lunchbox-updateGlobals' // Symbol()
-
-export const setCustomRenderKey = 'lunchbox-setCustomRender' // Symbol()
-export const clearCustomRenderKey = 'lunchbox-clearCustomRender' //Symbol()
-
-export const beforeRenderKey = 'lunchbox-beforeRender' // Symbol()
-export const onBeforeRenderKey = 'lunchbox-onBeforeRender' //Symbol()
-export const offBeforeRenderKey = 'lunchbox-offBeforeRender' // Symbol()
-
-export const afterRenderKey = 'lunchbox-afterRender' // Symbol()
-export const onAfterRenderKey = 'lunchbox-onAfterRender' // Symbol()
-export const offAfterRenderKey = 'lunchbox-offAfterRender' // Symbol()
-
-export const frameIdKey = 'lunchbox-frameId' // Symbol()
-export const watchStopHandleKey = 'lunchbox-watchStopHandle' // Symbol()
-
-export const appRootNodeKey = 'lunchbox-appRootNode' // Symbol()
-export const appKey = 'lunchbox-appKey' //  Symbol()
-export const appRenderersKey = 'lunchbox-renderer' //Symbol()
-export const appSceneKey = 'lunchbox-scene' // Symbol()
-export const appCameraKey = 'lunchbox-camera' //Symbol()
-export const lunchboxInteractables = 'lunchbox-interactables' // Symbol()
-
-export const startCallbackKey = 'lunchbox-startCallback' // Symbol()

package/src/nodeOps/createElement.ts

@@ -1,34 +0,0 @@
-import { createDomNode, createNode } from '../core'
-import { isLunchboxDomComponent } from '../utils'
-import { Lunch } from '..'
-
-const autoAttach = ['geometry', 'material']
-
-export const createElement = (
-    type: string,
-    isSVG?: boolean,
-    isCustomizedBuiltin?: string,
-    vnodeProps?: Lunch.LunchboxMetaProps
-) => {
-    const options: Partial<Lunch.MetaBase> = { type, props: vnodeProps }
-
-    // handle dom node
-    const isDomNode = isLunchboxDomComponent(options)
-    if (isDomNode) {
-        const node = createDomNode(options)
-        return node
-    }
-
-    // handle standard node
-    const node = createNode(options)
-
-    // autoattach
-    autoAttach.forEach((key) => {
-        if (type.toLowerCase().endsWith(key)) {
-            node.props.attach = key
-        }
-    })
-    // TODO: array autoattach
-
-    return node
-}

package/src/nodeOps/index.ts

@@ -1,83 +0,0 @@
-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, 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 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
-            }
-
-            // otherwise, update prop
-            updateObjectProp({
-                node: node as Lunch.Node,
-                key,
-                interactables,
-                value: nextValue,
-            })
-        },
-        remove,
-        setElementText() {
-            // noop
-        },
-        setText() {
-            // noop
-        },
-    }
-
-    return { nodeOps, interactables }
-}