lunchboxjs 0.2.1020 → 2.0.0-beta.1

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 }
-}

package/src/nodeOps/insert.ts

@@ -1,165 +0,0 @@
-import {
-    isLunchboxDomComponent,
-    isLunchboxRootNode,
-    isLunchboxStandardNode,
-} from '../utils'
-import { MiniDom } from '../core/minidom'
-import { Lunch } from '..'
-
-export const insert = (
-    child: MiniDom.RendererBaseNode,
-    parent: MiniDom.RendererBaseNode | null,
-    anchor?: MiniDom.RendererBaseNode | null
-) => {
-    if (!parent) {
-        throw new Error('missing parent')
-    }
-    // add to parent tree node if we have one
-    // let effectiveParent = parent ?? ensureRootNode()
-    parent.insertBefore(child, anchor)
-
-    // handle comment & text nodes
-    if (child.metaType === 'commentMeta' || child.metaType === 'textMeta') {
-        return
-    }
-
-    // handle dom element
-    if (isLunchboxDomComponent(child)) {
-        if (isLunchboxDomComponent(parent) || isLunchboxRootNode(parent)) {
-            parent.domElement.appendChild(child.domElement)
-        } else {
-            // TODO: handle dom nodes as children of Lunchbox nodes
-        }
-    }
-
-    // handle standard nodes
-    if (isLunchboxStandardNode(child)) {
-        // let effectiveParent = parent
-        let effectiveParentNodeType = parent.metaType
-
-        if (
-            effectiveParentNodeType === 'textMeta' ||
-            effectiveParentNodeType === 'commentMeta'
-        ) {
-            const path = parent.getPath() as MiniDom.RendererBaseNode[]
-            for (let i = path.length - 1; i >= 0; i--) {
-                if (
-                    path[i].metaType !== 'textMeta' &&
-                    path[i].metaType !== 'commentMeta'
-                ) {
-                    parent = path[i]
-                    break
-                }
-            }
-        }
-
-        if (
-            isLunchboxStandardNode(child) &&
-            child.instance?.isObject3D &&
-            isLunchboxStandardNode(parent) &&
-            parent.instance?.isObject3D
-        ) {
-            parent.instance?.add?.(child.instance)
-        }
-
-        // add attached props
-        if (
-            child?.props?.attach &&
-            isLunchboxStandardNode(parent) &&
-            parent?.instance
-        ) {
-            // if this element is a loader and the `src` attribute is being used,
-            // let's assume we want to create the loader and run `load`
-            const isUsingLoaderSugar =
-                child.type?.toLowerCase().endsWith('loader') &&
-                child.props.src &&
-                (child.props.attach || child.props.attachArray)
-
-            // run special loader behavior
-            if (isUsingLoaderSugar) {
-                runLoader(child, parent)
-            } else {
-                // update attached normally
-                attachToParentInstance(child, parent, child.props.attach)
-            }
-        }
-
-        // fire onAdded event
-        if (child.props?.onAdded) {
-            child.props.onAdded({
-                instance: child.instance,
-            })
-        }
-    }
-}
-
-function runLoader<T>(
-    child: MiniDom.RendererStandardNode<T>,
-    parent: MiniDom.RendererStandardNode
-) {
-    const loader = child.instance as any as Lunch.GenericThreeLoader
-    // ensure parent has attached spaces ready
-    parent.attached = parent.attached || {}
-    parent.attachedArray = parent.attachedArray || {}
-
-    // this should never be true, but just in case
-    if (!child.props.attach) return
-
-    if (child.type?.toLowerCase() === 'textureloader') {
-        // if this is a texture loader, immediately pass
-        // load function to parent attachment
-        const textureLoader = loader as any as THREE.TextureLoader
-        const inProgressTexture = textureLoader.load(child.props.src)
-
-        attachToParentInstance(
-            child,
-            parent,
-            child.props.attach,
-            inProgressTexture
-        )
-    } else {
-        // use a standard callback-based loader
-        loader.load(
-            child.props.src,
-            (loadedData) => {
-                attachToParentInstance(
-                    child,
-                    parent,
-                    child.props.attach!,
-                    loadedData
-                )
-            },
-            null,
-            (err) => {
-                throw new Error(err)
-            }
-        )
-    }
-}
-
-function attachToParentInstance<T>(
-    child: MiniDom.RendererStandardNode<T>,
-    parent: MiniDom.RendererStandardNode,
-    key: string,
-    value?: any
-) {
-    const finalValueToAttach = value ?? child.instance
-    const parentInstanceAsAny = parent.instance as any
-
-    if (child.props.attach === key) {
-        parent.attached = {
-            [key]: finalValueToAttach,
-            ...(parent.attached || {}),
-        }
-        parentInstanceAsAny[key] = value ?? child.instance
-    }
-
-    if (child.props.attachArray === key) {
-        if (!parent.attachedArray[child.props.attachArray]) {
-            parent.attachedArray[child.props.attachArray] = []
-        }
-        parent.attachedArray[child.props.attachArray].push(finalValueToAttach)
-        // TODO: implement auto-attaching array
-        parentInstanceAsAny[key] = [parentInstanceAsAny[key]]
-    }
-}

package/src/nodeOps/remove.ts

@@ -1,32 +0,0 @@
-import { MiniDom } from '../core'
-import { isLunchboxStandardNode } from '../utils'
-
-export const remove = (node: MiniDom.RendererBaseNode) => {
-    if (!node) return
-    // prep subtree
-    const subtree: MiniDom.BaseNode[] = []
-    node.walk((descendant) => {
-        subtree.push(descendant)
-        return true
-    })
-
-    // clean up subtree
-    subtree.forEach((n) => {
-        if (isLunchboxStandardNode(n)) {
-            // try to remove three object
-            n.instance?.removeFromParent?.()
-
-            // try to dispose three object
-            const dispose =
-                // calling `dispose` on a scene triggers an error,
-                // so let's ignore if this node is a scene
-                n.type !== 'scene' &&
-                ((n.instance as any)?.dispose as (() => void) | null)
-            if (dispose) dispose.bind(n.instance)()
-            n.instance = null
-        }
-
-        // drop tree node
-        n.drop()
-    })
-}

package/src/plugins/bridge/BridgeComponent.tsx

@@ -1,60 +0,0 @@
-import {
-    Component,
-    defineComponent,
-    getCurrentInstance,
-    inject,
-    onMounted,
-    onUnmounted,
-    PropType,
-    ref,
-} from 'vue'
-import { createApp, Lunch } from '../..'
-
-export const BridgeComponent = defineComponent({
-    name: 'BridgeComponent',
-    props: {
-        app: {
-            type: Object as PropType<Lunch.App>,
-        },
-        root: {
-            type: Object as PropType<Component>,
-        },
-        appSetup: {
-            type: Function as PropType<(app: Lunch.App) => Lunch.App>,
-            default: (app: Lunch.App) => app,
-        },
-    },
-    setup(props, ctx) {
-        // we need an app or root to mount
-        if (!props.app && !props.root) {
-            throw new Error('app or root required as <bridge> prop')
-        }
-
-        // prep container
-        const container = ref<HTMLDivElement>()
-        // create app
-        let app: Lunch.App | null = props.appSetup(
-            props.app ?? createApp(props.root!, ctx.attrs)
-        )
-
-        // get all provided values - this isn't in the types or docs, so it may be unstable
-        const provides = (getCurrentInstance() as any)?.provides ?? {}
-        // provide values
-        Object.keys(provides).forEach((key) => {
-            app?.provide(key, inject(key))
-        })
-
-        // mount
-        onMounted(() => {
-            app?.mount(container.value)
-        })
-
-        // unmount
-        onUnmounted(() => {
-            app?.unmount()
-            app = null
-        })
-
-        return () => <div ref={container} />
-    },
-})

package/src/plugins/bridge/bridge.ts

@@ -1,9 +0,0 @@
-import { Plugin } from 'vue'
-import { BridgeComponent } from './BridgeComponent'
-
-export const bridge: Plugin = {
-    install(app) {
-        // register wrapper component
-        app.component('lunchbox', BridgeComponent)
-    },
-}

package/src/types.ts

@@ -1,186 +0,0 @@
-type RendererStandardNode<T = THREE.Object3D> =
-    import('./core').MiniDom.RendererStandardNode<T>
-type RootNode = import('./core/minidom').MiniDom.RendererRootNode
-type VNodeProps = import('vue').VNodeProps
-type VueApp<T> = import('vue').App<T>
-type WatchSource = import('vue').WatchSource
-type WatchStopHandle = import('vue').WatchStopHandle
-type ThreeCamera = import('three').Camera
-type ThreeRenderer = import('three').Renderer
-type ThreeScene = import('three').Scene
-
-export declare namespace Lunch {
-    /** Lunchbox app. */
-    type App = Omit<VueApp<any>, 'config'> & {
-        clearCustomRender: () => void
-        config: Omit<VueApp<any>['config'], 'globalProperties'> & {
-            globalProperties: {
-                lunchbox: {
-                    afterRender: Lunch.UpdateCallback[]
-                    beforeRender: Lunch.UpdateCallback[]
-                    camera: ThreeCamera | null
-                    dpr: number
-                    frameId: number
-                    renderer: ThreeRenderer | null
-                    scene: ThreeScene | null
-                    watchStopHandle: WatchStopHandle | null
-                }
-            } & Record<string, any>
-        }
-        customRender: ((opts: UpdateCallbackProperties) => void) | null
-        extend: (v: Record<string, any>) => App
-        rootNode: RootNode
-        setCustomRender: (
-            update: (opts: UpdateCallbackProperties) => void
-        ) => void
-        update: UpdateCallback
-    }
-
-    type AppGlobals = App['config']['globalProperties']['lunchbox']
-
-    type AppGlobalsUpdate = (newValue: Partial<AppGlobals>) => void
-
-    interface CanvasProps {
-        dpr?: number
-        wrapperProps?: WrapperProps
-    }
-
-    /** Lunchbox component catalogue. */
-    interface Catalogue {
-        [key: string]: {
-            new (...args: any): { [key: string]: any }
-        }
-    }
-
-    interface CommentMeta extends MetaBase {
-        text: string
-    }
-
-    type CustomRenderFunctionSetter = (
-        render: (opts: Lunch.UpdateCallbackProperties) => void
-    ) => void
-
-    interface DomMeta extends MetaBase {
-        domElement: HTMLElement
-    }
-
-    type EventCallback = (options: {
-        intersection: THREE.Intersection<any>
-    }) => void
-
-    // MAKE SURE THESE MATCH VALUES IN lib.isEventKey
-    type EventKey =
-        | 'onClick'
-        | 'onContextMenu'
-        | 'onDoubleClick'
-        | 'onPointerUp'
-        | 'onPointerDown'
-        | 'onPointerOver'
-        | 'onPointerOut'
-        | 'onPointerEnter'
-        | 'onPointerLeave'
-        | 'onPointerMove'
-        // | 'onPointerMissed'
-        // 'onUpdate' |
-        | 'onWheel'
-
-    interface GenericThreeLoader<T = any> {
-        load(
-            src: string,
-            onLoad: (data: T) => void,
-            onProgress: null,
-            onError: (error: any) => void
-        ): void
-    }
-
-    /** Meta info needed on a standard Lunchbox node. */
-    interface StandardMeta<T = THREE.Object3D> extends MetaBase {
-        attached: { [key: string]: any }
-        attachedArray: { [key: string]: Array<any> }
-        instance: T | null
-    }
-
-    /** Meta info that every node needs. */
-    interface MetaBase {
-        name: string | null | undefined
-        metaType: MetaType
-        props: LunchboxMetaProps
-        type: string | null
-        uuid: Uuid
-    }
-
-    type MetaType =
-        | 'commentMeta'
-        | 'domMeta'
-        | 'standardMeta'
-        | 'metaBase'
-        | 'rootMeta'
-        | 'textMeta'
-
-    interface RootMeta extends MetaBase {
-        domElement: HTMLElement
-        isLunchboxRootNode: boolean
-    }
-
-    type ShadowSugar =
-        | boolean
-        | {
-              type: THREE.ShadowMapType
-          }
-
-    interface TextMeta extends MetaBase {
-        text: string
-    }
-
-    /** Props that can be passed to any Lunchbox meta. */
-    type LunchboxMetaProps = VNodeProps & {
-        args?: Array<any>
-        attach?: string
-        onAdded?<T>(opts: { instance: T | null }): void
-
-        [key: string]: any
-    }
-
-    type LunchboxComponent<T = THREE.Object3D> = {
-        $el: Node<T>
-    }
-
-    type Node<T = THREE.Object3D> = RendererStandardNode<T>
-
-    type UpdateCallback = (properties: UpdateCallbackProperties) => void
-
-    interface UpdateCallbackProperties {
-        app: App
-        scene?: THREE.Scene | null
-        renderer?: THREE.Renderer | null
-        camera?: THREE.Camera | null
-        updateSource?: WatchSource | null
-    }
-
-    /** Universally unique identifier. */
-    type Uuid = string
-
-    type SizePolicy = 'full' | 'container'
-
-    type Vector3AsArray = [number, number, number]
-
-    interface WrapperProps {
-        background?: string
-        cameraArgs?: any[]
-        cameraLook?: Vector3AsArray
-        cameraLookAt?: Vector3AsArray
-        cameraPosition?: Vector3AsArray
-        dpr?: number
-        ortho?: boolean
-        orthographic?: boolean
-        r3f?: boolean
-        // TODO: Why doesn't ConstructorParameters<THREE.WebGLRenderer> work here?
-        rendererArguments?: object
-        rendererProperties?: Partial<THREE.WebGLRenderer>
-        sizePolicy?: SizePolicy
-        shadow?: ShadowSugar
-        transparent?: boolean
-        zoom?: number
-        updateSource?: WatchSource | null
-    }
-}

package/src/utils/find.ts

@@ -1,24 +0,0 @@
-import { Lunch } from '..'
-import { isLunchboxComponent, isLunchboxStandardNode } from '.'
-import { isRef, isVNode } from 'vue'
-
-export function find<T extends object>(target: any) {
-    target = isRef(target) ? target.value : target
-
-    // handle standard lunchbox node
-    if (isLunchboxStandardNode(target)) {
-        return (target as Lunch.Node<T>)?.instance
-    }
-
-    // handle component
-    if (isLunchboxComponent(target)) {
-        return (target as Lunch.LunchboxComponent<T>)?.$el?.instance
-    }
-
-    // handle vnode
-    if (isVNode(target)) {
-        return (target.el as Lunch.Node<T>)?.instance
-    }
-
-    return null
-}

package/src/utils/get.ts

@@ -1,18 +0,0 @@
-export const get = <T = unknown>(
-    obj: Record<string, any>,
-    path: string | string[],
-    defValue?: T
-) => {
-    // If path is not defined or it has false value
-    if (!path) return undefined
-    // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
-    // Regex explained: https://regexr.com/58j0k
-    const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
-    // Find value
-    const result = pathArray?.reduce(
-        (prevObj: Record<string, any>, key: string) => prevObj && prevObj[key],
-        obj
-    )
-    // If found value is undefined return default value; otherwise return the value
-    return result === undefined ? defValue : result
-}