lunchboxjs 0.2.1019 → 2.0.0-beta.0

package/src/core/createNode.ts

@@ -1,71 +0,0 @@
-import { isLunchboxRootNode } from '../utils'
-import { instantiateThreeObject, MiniDom } from '.'
-import type { Lunch } from '..'
-
-/** Create a new Lunchbox comment node. */
-export function createCommentNode(options: Partial<Lunch.CommentMeta> = {}) {
-    const defaults: Omit<Lunch.CommentMeta, keyof Lunch.MetaBase> = {
-        text: options.text ?? '',
-    }
-    return new MiniDom.RendererCommentNode({
-        ...defaults,
-        ...options,
-        metaType: 'commentMeta',
-    })
-}
-
-/** Create a new DOM node. */
-export function createDomNode(options: Partial<Lunch.DomMeta> = {}) {
-    const domElement = document.createElement(options.type ?? '')
-    const defaults: Omit<Lunch.DomMeta, keyof Lunch.MetaBase> = {
-        domElement,
-    }
-
-    const node = new MiniDom.RendererDomNode({
-        ...defaults,
-        ...options,
-        metaType: 'domMeta',
-    })
-    return node
-}
-
-/** Create a new Lunchbox text node. */
-export function createTextNode(options: Partial<Lunch.TextMeta> = {}) {
-    const defaults: Omit<Lunch.CommentMeta, keyof Lunch.MetaBase> = {
-        text: options.text ?? '',
-    }
-    return new MiniDom.RendererTextNode({
-        ...options,
-        ...defaults,
-        metaType: 'textMeta',
-    })
-}
-
-/** Create a new Lunchbox standard node. */
-export function createNode<T extends object = THREE.Object3D>(
-    options: Partial<Lunch.StandardMeta<T>> = {},
-    props: Lunch.LunchboxMetaProps = {}
-) {
-    const defaults: Omit<Lunch.StandardMeta<T>, keyof Lunch.MetaBase> = {
-        attached: options.attached ?? [],
-        attachedArray: options.attachedArray ?? {},
-        instance: options.instance ?? null,
-    }
-    const node = new MiniDom.RendererStandardNode<T>({
-        ...options,
-        ...defaults,
-        metaType: 'standardMeta',
-    })
-
-    if (node.type && !isLunchboxRootNode(node) && !node.instance) {
-        node.instance = instantiateThreeObject({
-            ...node,
-            props: {
-                ...node.props,
-                ...props,
-            },
-        })
-    }
-
-    return node
-}

package/src/core/extend.ts

@@ -1,25 +0,0 @@
-import { h, defineComponent } from 'vue'
-import { catalogue } from '../components'
-import type { Lunch } from '..'
-
-const createComponent = (tag: string) =>
-    defineComponent({
-        inheritAttrs: false,
-        name: tag,
-        render() {
-            return h(tag, this.$attrs, this.$slots?.default?.() || [])
-        },
-    })
-
-export const extend = ({
-    app,
-    ...targets
-}: {
-    app: Lunch.App
-    [key: string]: any
-}) => {
-    Object.keys(targets).forEach((key) => {
-        app.component(key, createComponent(key))
-        catalogue[key] = targets[key]
-    })
-}

package/src/core/index.ts

@@ -1,7 +0,0 @@
-export * from './createNode'
-export * from './interaction'
-export * from './extend'
-export * from './instantiateThreeObject'
-export * from './minidom'
-export * from './update'
-export * from './updateObjectProp'

package/src/core/instantiateThreeObject/index.ts

@@ -1,37 +0,0 @@
-import { catalogue } from '../../components'
-import * as THREE from 'three'
-import { processPropAsArray } from './processProps'
-import type { Lunch } from '../..'
-
-export function instantiateThreeObject<T>(node: Lunch.StandardMeta<T>) {
-    if (!node.type) return null
-
-    // what class will we be instantiating?
-    const uppercaseType = node.type[0].toUpperCase() + node.type.slice(1)
-    const translatedType = uppercaseType.replace(/Lunchbox$/, '')
-    const targetClass =
-        catalogue[node.type] ||
-        (THREE as any)[uppercaseType] ||
-        catalogue[translatedType] ||
-        (THREE as any)[translatedType]
-    if (!targetClass)
-        throw `${uppercaseType} is not part of the THREE namespace! Did you forget to extend? import {extend} from 'lunchbox'; extend({app, YourComponent, ...})`
-
-    // what args have we been provided?
-    const args: Array<any> = node.props.args ?? []
-
-    // replace $attached values with their instances
-    // we need to guarantee everything comes back as an array so we can spread $attachedArrays,
-    // so we'll use processPropAsArray
-    const argsWrappedInArrays = args.map((arg: any) => {
-        return processPropAsArray({ node, prop: arg })
-    })
-    let processedArgs = [] as Array<any>
-    argsWrappedInArrays.forEach((arr) => {
-        processedArgs = processedArgs.concat(arr)
-    })
-
-    const instance = new targetClass(...processedArgs)
-
-    return instance as T
-}

package/src/core/instantiateThreeObject/processProps.ts

@@ -1,40 +0,0 @@
-import type { Lunch } from '../..'
-
-/** Process props into either themselves or the $attached value */
-export function processProp<T, U = THREE.Object3D>({
-    node,
-    prop,
-}: {
-    node: Lunch.StandardMeta<U>
-    prop: any
-}) {
-    // return $attachedArray value if needed
-    if (typeof prop === 'string' && prop.startsWith('$attachedArray')) {
-        return node.attachedArray[
-            prop.replace('$attachedArray.', '')
-        ] as any as T
-    }
-
-    // return $attached value if needed
-    if (typeof prop === 'string' && prop.startsWith('$attached')) {
-        return node.attached[prop.replace('$attached.', '')] as T
-    }
-
-    // otherwise, return plain value
-    return prop as T
-}
-
-export function processPropAsArray<T, U = THREE.Object3D>({
-    node,
-    prop,
-}: {
-    node: Lunch.StandardMeta<U>
-    prop: any
-}) {
-    const isAttachedArray =
-        typeof prop === 'string' && prop.startsWith('$attachedArray')
-    const output = processProp<T, U>({ node, prop })
-    return Array.isArray(output) && isAttachedArray
-        ? (output as Array<T>)
-        : [output]
-}

package/src/core/interaction.ts

@@ -1,55 +0,0 @@
-import type { Ref } from 'vue'
-import type { Lunch } from '..'
-
-/** Add an event listener to the given node. Also creates the event teardown function and any necessary raycaster/interaction dictionary updates. */
-export function addEventListener({
-    node,
-    key,
-    interactables,
-    value,
-}: {
-    node: Lunch.Node
-    key: Lunch.EventKey
-    interactables: Ref<Lunch.Node[]>
-    value: Lunch.EventCallback
-}) {
-    // create new records for this key if needed
-    if (!node.eventListeners[key]) {
-        node.eventListeners[key] = []
-    }
-    if (!node.eventListenerRemoveFunctions[key]) {
-        node.eventListenerRemoveFunctions[key] = []
-    }
-
-    // add event listener
-    node.eventListeners[key].push(value)
-
-    // if we need it, let's get/create the main raycaster
-    if (interactionsRequiringRaycaster.includes(key)) {
-        if (node.instance && !interactables.value.includes(node)) {
-            // add to interactables
-            interactables.value.push(node)
-            node.eventListenerRemoveFunctions[key].push(() => {
-                // remove from interactables
-                const idx = interactables.value.indexOf(node)
-                if (idx !== -1) {
-                    interactables.value.splice(idx, 1)
-                }
-            })
-        }
-    }
-
-    return node
-}
-
-const interactionsRequiringRaycaster = [
-    'onClick',
-    'onPointerUp',
-    'onPointerDown',
-    'onPointerOver',
-    'onPointerOut',
-    'onPointerEnter',
-    'onPointerLeave',
-    'onPointerMove',
-    // 'onPointerMissed',
-]

package/src/core/minidom.ts

@@ -1,256 +0,0 @@
-import { v4 as createUuid } from 'uuid'
-import type { Lunch } from '..'
-
-// MiniDom recreates DOM node properties and methods.
-// Since Vue 3 is a DOM-first framework, many of its nodeOps depend on
-// properties and methods the DOM naturally contains. MiniDom recreates
-// those properties (as well as a few from the tree-model npm package)
-// to make a DOM-like but otherwise agnostic hierarchy structure.
-export namespace MiniDom {
-    export class BaseNode {
-        constructor(
-            options: Partial<BaseNode> = {},
-            parent?: MiniDom.BaseNode
-        ) {
-            this.parentNode = options?.parentNode ?? parent ?? null
-            this.minidomType = 'MinidomBaseNode'
-            this.uuid = options?.uuid ?? createUuid()
-
-            // allNodes.push(this)
-        }
-        uuid: Lunch.Uuid
-
-        // DOM FEATURES
-        // ====================
-        parentNode: MiniDom.BaseNode | null
-
-        get nextSibling(): MiniDom.BaseNode | null {
-            if (!this.parentNode) return null
-
-            const idx = this.parentNode.children.findIndex(
-                (n) => n.uuid === this.uuid
-            )
-            // return next sibling if we're present and not the last child of the parent
-            if (idx !== -1 && idx < this.parentNode.children.length - 1) {
-                return this.parentNode.children[idx + 1]
-            }
-
-            return null
-        }
-
-        insertBefore(
-            child: MiniDom.BaseNode,
-            anchor?: MiniDom.BaseNode | null
-        ) {
-            child.removeAsChildFromAnyParents()
-            child.parentNode = this
-            const anchorIdx = this.children.findIndex(
-                (n) => n.uuid === anchor?.uuid
-            )
-            if (anchorIdx !== -1) {
-                this.children.splice(anchorIdx, 0, child)
-            } else {
-                this.children.push(child)
-            }
-        }
-        removeChild(child: MiniDom.BaseNode) {
-            const idx = this.children.findIndex((n) => n?.uuid === child?.uuid)
-            if (idx !== -1) {
-                this.children.splice(idx, 1)
-            }
-        }
-
-        // TREE FEATURES
-        // ====================
-        children = [] as MiniDom.BaseNode[]
-        addChild(child: MiniDom.BaseNode) {
-            if (child) {
-                // remove child from any other parents
-                child.removeAsChildFromAnyParents()
-
-                // add to this node
-                child.parentNode = this
-                this.insertBefore(child, null)
-            }
-            return this
-        }
-        /** Get the array of Nodes representing the path from the root to this Node (inclusive). */
-        getPath() {
-            const output = [] as BaseNode[]
-            let current = this as BaseNode | null
-            while (current) {
-                output.unshift(current)
-                current = current.parentNode
-            }
-            return output
-        }
-
-        /** Drop this node. Removes parent's knowledge of this node
-         * and resets this node's internal parent. */
-        drop() {
-            // remove as child
-            this.removeAsChildFromAnyParents()
-            // remove parent
-            this.parentNode = null
-        }
-
-        /** Walk over the entire subtree. Return falsey value in callback to end early. */
-        // TODO: depth-first vs breadth-first
-        walk(callback: (item: MiniDom.BaseNode) => boolean) {
-            const queue = [this, ...this.children] as MiniDom.BaseNode[]
-            const traversed: MiniDom.BaseNode[] = []
-            let canContinue = true
-            while (queue.length && canContinue) {
-                const current = queue.shift()
-                if (current) {
-                    if (traversed.includes(current)) continue
-
-                    traversed.push(current)
-                    queue.push(
-                        ...current.children.filter(
-                            (child) => !traversed.includes(child)
-                        )
-                    )
-                    canContinue = callback(current)
-                } else {
-                    canContinue = false
-                }
-            }
-        }
-
-        // INTERNAL FEATURES
-        // ====================
-        minidomType: MiniDom.NodeType
-
-        removeAsChildFromAnyParents() {
-            this.parentNode?.removeChild(this)
-        }
-    }
-
-    export class RendererBaseNode
-        extends MiniDom.BaseNode
-        implements Lunch.MetaBase
-    {
-        constructor(
-            options: Partial<Lunch.MetaBase> = {},
-            parent?: MiniDom.BaseNode
-        ) {
-            super(options, parent)
-            this.minidomType = 'RendererNode'
-
-            this.eventListeners = {}
-            this.eventListenerRemoveFunctions = {}
-            this.name = options.name ?? ''
-            this.metaType = options.metaType ?? 'standardMeta'
-            this.props = options.props ?? []
-            this.type = options.type ?? ''
-        }
-
-        eventListeners: Record<string, Lunch.EventCallback[]>
-        eventListenerRemoveFunctions: Record<string, Function[]>
-        name: string | null
-        metaType: Lunch.MetaType
-        props: Lunch.LunchboxMetaProps
-        type: string | null
-
-        drop() {
-            super.drop()
-            // handle remove functions
-            Object.keys(this.eventListenerRemoveFunctions).forEach((key) => {
-                this.eventListenerRemoveFunctions[key].forEach((func) => func())
-            })
-        }
-    }
-
-    // ====================
-    // SPECIFIC RENDERER NODES BELOW
-    // ====================
-
-    export class RendererRootNode
-        extends MiniDom.RendererBaseNode
-        implements Lunch.RootMeta
-    {
-        constructor(
-            options: Partial<Lunch.RootMeta> = {},
-            parent?: MiniDom.BaseNode
-        ) {
-            super(options, parent)
-            this.domElement =
-                options.domElement ?? document.createElement('div')
-        }
-
-        domElement: HTMLElement
-        isLunchboxRootNode = true
-    }
-
-    export class RendererCommentNode
-        extends MiniDom.RendererBaseNode
-        implements Lunch.CommentMeta
-    {
-        constructor(
-            options: Partial<Lunch.CommentMeta> = {},
-            parent?: MiniDom.BaseNode
-        ) {
-            super(options, parent)
-            this.text = options.text ?? ''
-        }
-
-        text: string
-    }
-
-    export class RendererDomNode
-        extends MiniDom.RendererBaseNode
-        implements Lunch.DomMeta
-    {
-        constructor(
-            options: Partial<Lunch.DomMeta> = {},
-            parent?: MiniDom.BaseNode
-        ) {
-            super(options, parent)
-            this.domElement =
-                options.domElement ?? document.createElement('div')
-        }
-
-        domElement: HTMLElement
-    }
-
-    export class RendererTextNode
-        extends MiniDom.RendererBaseNode
-        implements Lunch.TextMeta
-    {
-        constructor(
-            options: Partial<Lunch.TextMeta> = {},
-            parent?: MiniDom.BaseNode
-        ) {
-            super(options, parent)
-            this.text = options.text ?? ''
-        }
-
-        text: string
-    }
-
-    export class RendererStandardNode<T = THREE.Object3D>
-        extends MiniDom.RendererBaseNode
-        implements Lunch.StandardMeta<T>
-    {
-        constructor(
-            options: Partial<Lunch.StandardMeta<T>> = {},
-            parent?: MiniDom.BaseNode
-        ) {
-            super(options, parent)
-            this.attached = options.attached ?? []
-            this.attachedArray = options.attachedArray ?? {}
-            this.instance = options.instance ?? null
-        }
-
-        attached: { [key: string]: any }
-        attachedArray: { [key: string]: Array<any> }
-        instance: T | null
-    }
-
-    export type NodeType = 'MinidomBaseNode' | 'RendererNode' | 'RootNode'
-}
-
-export function isMinidomNode(item: any): item is MiniDom.RendererBaseNode {
-    return (item as MiniDom.BaseNode)?.minidomType === 'RendererNode'
-}

package/src/core/update.ts

@@ -1,149 +0,0 @@
-import type { Lunch } from '..'
-import { inject, toRaw, watch } from 'vue'
-import * as Keys from '../keys'
-
-const requestUpdate = (opts: Lunch.UpdateCallbackProperties) => {
-    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 (!opts.app.config.globalProperties.lunchbox.watchStopHandle) {
-            // request next frame only when state changes
-            opts.app.config.globalProperties.lunchbox.watchStopHandle = watch(
-                opts.updateSource,
-                () => {
-                    requestUpdate(opts)
-                },
-                {
-                    deep: true,
-                }
-            )
-        }
-    } else {
-        // request next frame on a continuous loop
-        requestUpdate(opts)
-    }
-
-    // prep options
-    const { app, renderer, scene } = opts
-
-    // BEFORE RENDER
-    app.config.globalProperties.lunchbox.beforeRender.forEach((cb) => {
-        cb?.(opts)
-    })
-
-    // RENDER
-    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)
-            )
-        }
-    }
-
-    // AFTER RENDER
-    app.config.globalProperties.lunchbox.afterRender.forEach((cb) => {
-        cb?.(opts)
-    })
-}
-
-// before render
-// ====================
-/** Obtain callback methods for `onBeforeRender` and `offBeforeRender`. Usually used internally by Lunchbox. */
-export const useBeforeRender = () => {
-    return {
-        onBeforeRender: inject<typeof onBeforeRender>(Keys.onBeforeRenderKey),
-        offBeforeRender: inject<typeof offBeforeRender>(
-            Keys.offBeforeRenderKey
-        ),
-    }
-}
-
-/** 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.
- */
-export const onBeforeRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
-    useBeforeRender().onBeforeRender?.(cb, index)
-}
-
-/** Remove a function from the `beforeRender` callback list. Useful for tearing down functions added
- * by `onBeforeRender`.
- */
-export const offBeforeRender = (cb: Lunch.UpdateCallback | number) => {
-    useBeforeRender().offBeforeRender?.(cb)
-}
-
-// after render
-// ====================
-/** Obtain callback methods for `onAfterRender` and `offAfterRender`. Usually used internally by Lunchbox. */
-export const useAfterRender = () => {
-    return {
-        onAfterRender: inject<typeof onAfterRender>(Keys.onBeforeRenderKey),
-        offAfterRender: inject<typeof offAfterRender>(Keys.offBeforeRenderKey),
-    }
-}
-
-/** 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.
- */
-export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
-    useBeforeRender().onBeforeRender?.(cb, index)
-}
-
-/** Remove a function from the `afterRender` callback list. Useful for tearing down functions added
- * by `onAfterRender`.
- */
-export const offAfterRender = (cb: Lunch.UpdateCallback | number) => {
-    useBeforeRender().offBeforeRender?.(cb)
-}
-
-/** 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.
- */
-export const useCancelUpdate = () => {
-    const frameId = inject<number>(Keys.frameIdKey)
-    return () => {
-        if (frameId !== undefined) cancelAnimationFrame(frameId)
-    }
-}
-
-/** Cancel the current update frame. Usually used internally by Lunchbox. */
-export const cancelUpdate = () => {
-    useCancelUpdate()?.()
-}
-
-/** 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.
- */
-export const useCancelUpdateSource = () => {
-    const cancel = inject<
-        Lunch.App['config']['globalProperties']['watchStopHandle']
-    >(Keys.watchStopHandleKey)
-    return () => cancel?.()
-}
-
-/** Cancel an update source. Usually used internally by Lunchbox. */
-export const cancelUpdateSource = () => {
-    useCancelUpdateSource()?.()
-}