lunchboxjs 0.2.1019 → 2.0.0-beta.0

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

package/src/utils/index.ts

@@ -1,60 +0,0 @@
-import { Lunch } from '..'
-
-export * from './find'
-
-// replacement functions from lodash & https://youmightnotneed.com/lodash
-export * from './get'
-export * from './isNumber'
-export * from './set'
-
-// MAKE SURE THESE MATCH VALUES IN types.EventKey
-/** Type check on whether target is a Lunchbox.EventKey */
-export const isEventKey = (target: any): target is Lunch.EventKey => {
-    return [
-        'onClick',
-        'onContextMenu',
-        'onDoubleClick',
-        'onPointerUp',
-        'onPointerDown',
-        'onPointerOver',
-        'onPointerOut',
-        'onPointerEnter',
-        'onPointerLeave',
-        'onPointerMove',
-        // 'onPointerMissed',
-        // 'onUpdate',
-        'onWheel',
-    ].includes(target)
-}
-
-export const isLunchboxComponent = (
-    node: any
-): node is Lunch.LunchboxComponent => {
-    return node?.$el && node?.$el?.hasOwnProperty?.('instance')
-}
-
-export const isLunchboxDomComponent = (node: any): node is Lunch.DomMeta => {
-    if ((node as Lunch.MetaBase)?.metaType === 'domMeta') return true
-
-    return node?.props?.['data-lunchbox']
-}
-
-export const isLunchboxStandardNode = (
-    node: any
-): node is Lunch.StandardMeta => {
-    return node?.metaType === 'standardMeta'
-}
-
-export const isLunchboxRootNode = (node: any): node is Lunch.RootMeta => {
-    return node.isLunchboxRootNode
-}
-
-export const waitFor = async (get: () => any) => {
-    let output = get()
-    while (!output) {
-        await new Promise((resolve) => requestAnimationFrame(resolve))
-        output = get()
-        console.log(output)
-    }
-    return output
-}

package/src/utils/isNumber.ts

@@ -1,87 +0,0 @@
-const buildIsNumber = () => {
-    /**
-     * lodash (Custom Build) <https://lodash.com/>
-     * Build: `lodash modularize exports="npm" -o ./`
-     * Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
-     * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
-     * Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
-     * Available under MIT license <https://lodash.com/license>
-     */
-
-    /** `Object#toString` result references. */
-    const numberTag = '[object Number]'
-
-    /** Used for built-in method references. */
-    const objectProto = Object.prototype
-
-    /**
-     * Used to resolve the
-     * [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
-     * of values.
-     */
-    const objectToString = objectProto.toString
-
-    /**
-     * Checks if `value` is object-like. A value is object-like if it's not `null`
-     * and has a `typeof` result of "object".
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
-     * @example
-     *
-     * _.isObjectLike({});
-     * // => true
-     *
-     * _.isObjectLike([1, 2, 3]);
-     * // => true
-     *
-     * _.isObjectLike(_.noop);
-     * // => false
-     *
-     * _.isObjectLike(null);
-     * // => false
-     */
-    function isObjectLike(value: any) {
-        return !!value && typeof value == 'object'
-    }
-
-    /**
-     * Checks if `value` is classified as a `Number` primitive or object.
-     *
-     * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are
-     * classified as numbers, use the `_.isFinite` method.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a number, else `false`.
-     * @example
-     *
-     * _.isNumber(3);
-     * // => true
-     *
-     * _.isNumber(Number.MIN_VALUE);
-     * // => true
-     *
-     * _.isNumber(Infinity);
-     * // => true
-     *
-     * _.isNumber('3');
-     * // => false
-     */
-    const output = function isNumber(value: any) {
-        return (
-            typeof value == 'number' ||
-            (isObjectLike(value) && objectToString.call(value) == numberTag)
-        )
-    }
-    return output
-}
-
-export const isNumber = buildIsNumber()

package/src/utils/set.ts

@@ -1,14 +0,0 @@
-export const set = (
-    obj: Record<string, any>,
-    path: string | string[],
-    value: any
-) => {
-    // Regex explained: https://regexr.com/58j0k
-    const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
-
-    pathArray?.reduce((acc: Record<string, any>, key: string, i: number) => {
-        if (acc[key] === undefined) acc[key] = {}
-        if (i === pathArray.length - 1) acc[key] = value
-        return acc[key]
-    }, obj)
-}