lunchboxjs 0.2.1020 → 2.0.0-beta.1

package/src/components/autoGeneratedComponents.ts

@@ -1,175 +0,0 @@
-// list of all components to register out of the box
-export const autoGeneratedComponents = [
-    // ThreeJS basics
-    'mesh',
-    'instancedMesh',
-    'scene',
-    'sprite',
-    'object3D',
-
-    // geometry
-    'instancedBufferGeometry',
-    'bufferGeometry',
-    'boxBufferGeometry',
-    'circleBufferGeometry',
-    'coneBufferGeometry',
-    'cylinderBufferGeometry',
-    'dodecahedronBufferGeometry',
-    'extrudeBufferGeometry',
-    'icosahedronBufferGeometry',
-    'latheBufferGeometry',
-    'octahedronBufferGeometry',
-    'parametricBufferGeometry',
-    'planeBufferGeometry',
-    'polyhedronBufferGeometry',
-    'ringBufferGeometry',
-    'shapeBufferGeometry',
-    'sphereBufferGeometry',
-    'tetrahedronBufferGeometry',
-    'textBufferGeometry',
-    'torusBufferGeometry',
-    'torusKnotBufferGeometry',
-    'tubeBufferGeometry',
-    'wireframeGeometry',
-    'parametricGeometry',
-    'tetrahedronGeometry',
-    'octahedronGeometry',
-    'icosahedronGeometry',
-    'dodecahedronGeometry',
-    'polyhedronGeometry',
-    'tubeGeometry',
-    'torusKnotGeometry',
-    'torusGeometry',
-    // textgeometry has been moved to /examples/jsm/geometries/TextGeometry
-    // 'textGeometry',
-    'sphereGeometry',
-    'ringGeometry',
-    'planeGeometry',
-    'latheGeometry',
-    'shapeGeometry',
-    'extrudeGeometry',
-    'edgesGeometry',
-    'coneGeometry',
-    'cylinderGeometry',
-    'circleGeometry',
-    'boxGeometry',
-
-    // materials
-    'material',
-    'shadowMaterial',
-    'spriteMaterial',
-    'rawShaderMaterial',
-    'shaderMaterial',
-    'pointsMaterial',
-    'meshPhysicalMaterial',
-    'meshStandardMaterial',
-    'meshPhongMaterial',
-    'meshToonMaterial',
-    'meshNormalMaterial',
-    'meshLambertMaterial',
-    'meshDepthMaterial',
-    'meshDistanceMaterial',
-    'meshBasicMaterial',
-    'meshMatcapMaterial',
-    'lineDashedMaterial',
-    'lineBasicMaterial',
-
-    // lights
-    'light',
-    'spotLightShadow',
-    'spotLight',
-    'pointLight',
-    'rectAreaLight',
-    'hemisphereLight',
-    'directionalLightShadow',
-    'directionalLight',
-    'ambientLight',
-    'lightShadow',
-    'ambientLightProbe',
-    'hemisphereLightProbe',
-    'lightProbe',
-
-    // textures
-    'texture',
-    'videoTexture',
-    'dataTexture',
-    'dataTexture3D',
-    'compressedTexture',
-    'cubeTexture',
-    'canvasTexture',
-    'depthTexture',
-
-    // Texture loaders
-    'textureLoader',
-
-    // misc
-    'group',
-    'catmullRomCurve3',
-    'points',
-    'raycaster',
-
-    // helpers
-    'cameraHelper',
-
-    // cameras
-    'camera',
-    'perspectiveCamera',
-    'orthographicCamera',
-    'cubeCamera',
-    'arrayCamera',
-
-    // renderers
-    'webGLRenderer',
-
-    /*
-    // List copied from r3f:
-    // https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
-
-    // NOT IMPLEMENTED (can be added via Extend - docs.lunchboxjs.com/components/extend/):
-    audioListener: AudioListenerProps
-    positionalAudio: PositionalAudioProps
-
-    lOD: LODProps
-    skinnedMesh: SkinnedMeshProps
-    skeleton: SkeletonProps
-    bone: BoneProps
-    lineSegments: LineSegmentsProps
-    lineLoop: LineLoopProps
-    // see `audio`
-    // line: LineProps
-    immediateRenderObject: ImmediateRenderObjectProps
-
-    // primitive
-    primitive: PrimitiveProps
-
-    // helpers
-    spotLightHelper: SpotLightHelperProps
-    skeletonHelper: SkeletonHelperProps
-    pointLightHelper: PointLightHelperProps
-    hemisphereLightHelper: HemisphereLightHelperProps
-    gridHelper: GridHelperProps
-    polarGridHelper: PolarGridHelperProps
-    directionalLightHelper: DirectionalLightHelperProps
-    boxHelper: BoxHelperProps
-    box3Helper: Box3HelperProps
-    planeHelper: PlaneHelperProps
-    arrowHelper: ArrowHelperProps
-    axesHelper: AxesHelperProps
-
-
-    // misc
-    vector2: Vector2Props
-    vector3: Vector3Props
-    vector4: Vector4Props
-    euler: EulerProps
-    matrix3: Matrix3Props
-    matrix4: Matrix4Props
-    quaternion: QuaternionProps
-    bufferAttribute: BufferAttributeProps
-    instancedBufferAttribute: InstancedBufferAttributeProps
-    color: ColorProps
-    fog: FogProps
-    fogExp2: FogExp2Props
-    shape: ShapeProps
-*/
-]

package/src/components/index.ts

@@ -1,31 +0,0 @@
-import { h, defineComponent } from 'vue'
-import { LunchboxWrapper } from './LunchboxWrapper/LunchboxWrapper'
-import { autoGeneratedComponents } from './autoGeneratedComponents'
-import type { Lunch } from '../types'
-
-export const catalogue: Lunch.Catalogue = {}
-
-// component creation utility
-const createComponent = (tag: string) =>
-    defineComponent({
-        inheritAttrs: false,
-        name: tag,
-        setup(props, context) {
-            return () => {
-                return h(tag, context.attrs, context.slots?.default?.() || [])
-            }
-        },
-    })
-
-// turn components into registered map
-const processed = autoGeneratedComponents
-    .map(createComponent)
-    .reduce((acc, curr) => {
-        acc[curr.name] = curr
-        return acc
-    }, {} as Record<string, ReturnType<typeof defineComponent>>)
-
-export const components = {
-    ...processed,
-    Lunchbox: LunchboxWrapper,
-}

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