lunchboxjs 0.1.4018 → 0.2.1001-beta.0

package/src/nodeOps/insert.ts

@@ -3,7 +3,6 @@ import {
     isLunchboxRootNode,
     isLunchboxStandardNode,
 } from '../utils'
-import { ensureRootNode, ensuredScene } from '../core'
 import { MiniDom } from '../core/minidom'
 import { Lunch } from '..'
 
@@ -12,9 +11,12 @@ export const insert = (
     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()
-    effectiveParent.insertBefore(child, anchor)
+    // let effectiveParent = parent ?? ensureRootNode()
+    parent.insertBefore(child, anchor)
 
     // handle comment & text nodes
     if (child.metaType === 'commentMeta' || child.metaType === 'textMeta') {
@@ -33,54 +35,31 @@ export const insert = (
     // handle standard nodes
     if (isLunchboxStandardNode(child)) {
         // let effectiveParent = parent
-        let effectiveParentNodeType = effectiveParent.metaType
+        let effectiveParentNodeType = parent.metaType
 
         if (
             effectiveParentNodeType === 'textMeta' ||
             effectiveParentNodeType === 'commentMeta'
         ) {
-            const path = effectiveParent.getPath() as MiniDom.RendererBaseNode[]
+            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'
                 ) {
-                    effectiveParent = path[i]
+                    parent = path[i]
                     break
                 }
             }
         }
 
-        // add to scene if parent is the wrapper node
         if (
-            child.metaType === 'standardMeta' &&
-            child.type !== 'scene' &&
-            isLunchboxRootNode(effectiveParent)
-        ) {
-            // ensure scene exists
-            const sceneNode = ensuredScene.value
-
-            if (sceneNode.instance && child) {
-                sceneNode.addChild(child)
-            }
-            if (
-                child.instance &&
-                child.instance.isObject3D &&
-                sceneNode.instance
-            ) {
-                if (sceneNode !== child) {
-                    sceneNode.instance.add(child.instance)
-                }
-            }
-        }
-        // add to hierarchy otherwise
-        else if (
             isLunchboxStandardNode(child) &&
             child.instance?.isObject3D &&
-            isLunchboxStandardNode(effectiveParent) &&
-            effectiveParent.instance?.isObject3D
+            isLunchboxStandardNode(parent) &&
+            parent.instance?.isObject3D
         ) {
-            effectiveParent.instance?.add?.(child.instance)
+            parent.instance?.add?.(child.instance)
         }
 
         // add attached props

package/src/nodeOps/remove.ts

@@ -1,10 +1,8 @@
-import { allNodes, MiniDom } from '../core'
+import { MiniDom } from '../core'
 import { isLunchboxStandardNode } from '../utils'
-import { overrides } from '../core'
 
 export const remove = (node: MiniDom.RendererBaseNode) => {
     if (!node) return
-    const overrideKeys = Object.keys(overrides)
     // prep subtree
     const subtree: MiniDom.BaseNode[] = []
     node.walk((descendant) => {
@@ -14,14 +12,6 @@ export const remove = (node: MiniDom.RendererBaseNode) => {
 
     // clean up subtree
     subtree.forEach((n) => {
-        const overrideKey = overrideKeys.find(
-            (key) => overrides[key]?.uuid === n.uuid
-        )
-        // if this node is an override, remove it from the overrides list
-        if (overrideKey) {
-            overrides[overrideKey] = null
-        }
-
         if (isLunchboxStandardNode(n)) {
             // try to remove three object
             n.instance?.removeFromParent?.()
@@ -38,11 +28,5 @@ export const remove = (node: MiniDom.RendererBaseNode) => {
 
         // drop tree node
         n.drop()
-
-        // remove Lunchbox node from main list
-        const idx = allNodes.findIndex((v) => v.uuid === n.uuid)
-        if (idx !== -1) {
-            allNodes.splice(idx, 1)
-        }
     })
 }

package/src/types.ts

@@ -1,14 +1,32 @@
+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 RendererStandardNode<T = THREE.Object3D> =
-    import('./core').MiniDom.RendererStandardNode<T>
+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 = VueApp<any> & {
+    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
@@ -18,6 +36,14 @@ export declare namespace Lunch {
         update: UpdateCallback
     }
 
+    // type AppGlobals = {
+    //     /** Device pixel resolution */
+    //     dpr: number
+    // }
+    type AppGlobals = App['config']['globalProperties']['lunchbox']
+
+    type AppGlobalsUpdate = (newValue: Partial<AppGlobals>) => void
+
     interface CanvasProps {
         dpr?: number
         wrapperProps?: WrapperProps
@@ -34,6 +60,10 @@ export declare namespace Lunch {
         text: string
     }
 
+    type CustomRenderFunctionSetter = (
+        render: (opts: Lunch.UpdateCallbackProperties) => void
+    ) => void
+
     interface DomMeta extends MetaBase {
         domElement: HTMLElement
     }
@@ -140,12 +170,14 @@ export declare namespace Lunch {
 
     type SizePolicy = 'full' | 'container'
 
+    type Vector3AsArray = [number, number, number]
+
     interface WrapperProps {
         background?: string
         cameraArgs?: any[]
-        cameraLook?: [number, number, number]
-        cameraLookAt?: [number, number, number]
-        cameraPosition?: [number, number, number]
+        cameraLook?: Vector3AsArray
+        cameraLookAt?: Vector3AsArray
+        cameraPosition?: Vector3AsArray
         dpr?: number
         ortho?: boolean
         orthographic?: boolean

package/src/utils/index.ts

@@ -1,4 +1,3 @@
-import { lunchboxDomComponentNames } from '../components'
 import { Lunch } from '..'
 
 export * from './find'
@@ -32,9 +31,7 @@ export const isLunchboxComponent = (
 export const isLunchboxDomComponent = (node: any): node is Lunch.DomMeta => {
     if ((node as Lunch.MetaBase)?.metaType === 'domMeta') return true
 
-    const typeToCheck = typeof node === 'string' ? node : node?.type
-
-    return lunchboxDomComponentNames.includes(typeToCheck ?? '')
+    return node?.props?.['data-lunchbox']
 }
 
 export const isLunchboxStandardNode = (

package/src/components/LunchboxWrapper/LunchboxWrapper.ts

@@ -1,312 +0,0 @@
-import {
-    h,
-    ComponentOptions,
-    getCurrentInstance,
-    onBeforeUnmount,
-    onMounted,
-    ref,
-    WatchSource,
-    WritableComputedRef,
-} from 'vue'
-import {
-    cameraReady,
-    cancelUpdate,
-    cancelUpdateSource,
-    createNode,
-    ensuredCamera,
-    ensureRenderer,
-    ensuredScene,
-    fallbackCameraUuid,
-    fallbackRendererUuid,
-    MiniDom,
-    rendererReady,
-    startCallbacks,
-    tryGetNodeWithInstanceType,
-    update,
-} from '../../core'
-import { set } from 'lodash'
-import { globals, Lunch } from '../..'
-// import { Color, Vector2, sRGBEncoding, ACESFilmicToneMapping } from 'three'
-import * as THREE from 'three'
-import { prepCanvas } from './prepCanvas'
-
-// TODO:
-// Continue r3f prop - what else (besides camera fov) makes r3f look good?
-
-/** fixed & fill styling for container */
-const fillStyle = (position: string) => {
-    return {
-        position,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        display: 'block',
-    }
-}
-
-export const LunchboxWrapper: ComponentOptions = {
-    name: 'Lunchbox',
-    props: {
-        // These should match the Lunchbox.WrapperProps interface
-        background: String,
-        cameraArgs: Array,
-        cameraLook: Array,
-        cameraLookAt: Array,
-        cameraPosition: Array,
-        dpr: Number,
-        ortho: Boolean,
-        orthographic: Boolean,
-        r3f: Boolean,
-        rendererArguments: Object,
-        rendererProperties: Object,
-        sizePolicy: String,
-        shadow: [Boolean, Object],
-        transparent: Boolean,
-        zoom: Number,
-        updateSource: Object,
-    },
-    setup(props: Lunch.WrapperProps, context) {
-        const canvas = ref<MiniDom.RendererDomNode>()
-        const useFallbackRenderer = ref(true)
-        const dpr = ref(props.dpr ?? -1)
-        const container = ref<MiniDom.RendererDomNode>()
-        let renderer: Lunch.Node<THREE.WebGLRenderer> | null
-        let camera: Lunch.Node<THREE.Camera> | null
-        let scene: MiniDom.RendererStandardNode<THREE.Scene>
-
-        // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
-        if (props.r3f && (THREE as any)?.ColorManagement) {
-            ;(THREE as any).ColorManagement.legacyMode = false
-        }
-
-        // MOUNT
-        // ====================
-        onMounted(() => {
-            // canvas needs to exist
-            if (!canvas.value) throw new Error('missing canvas')
-
-            // RENDERER
-            // ====================
-            // is there already a renderer?
-            // TODO: allow other renderer types
-            renderer = tryGetNodeWithInstanceType([
-                'WebGLRenderer',
-            ]) as unknown as Lunch.Node<THREE.WebGLRenderer> | null
-
-            // if renderer is missing, initialize with options
-            if (!renderer) {
-                // build renderer args
-                const rendererArgs: THREE.WebGLRendererParameters = {
-                    alpha: props.transparent,
-                    antialias: true,
-                    canvas: canvas.value.domElement,
-                    powerPreference: !!props.r3f
-                        ? 'high-performance'
-                        : 'default',
-                    ...(props.rendererArguments ?? {}),
-                }
-
-                // create new renderer
-                ensureRenderer.value = createNode<THREE.WebGLRenderer>({
-                    type: 'WebGLRenderer',
-                    uuid: fallbackRendererUuid,
-                    props: {
-                        args: [rendererArgs],
-                    },
-                })
-
-                // we've initialized the renderer, so anything depending on it can execute now
-                rendererReady.value = true
-
-                const rendererAsWebGlRenderer =
-                    ensureRenderer as WritableComputedRef<
-                        Lunch.Node<THREE.WebGLRenderer>
-                    >
-
-                // apply r3f settings if desired
-                if (props.r3f) {
-                    if (rendererAsWebGlRenderer.value.instance) {
-                        rendererAsWebGlRenderer.value.instance.outputEncoding =
-                            THREE.sRGBEncoding
-                        rendererAsWebGlRenderer.value.instance.toneMapping =
-                            THREE.ACESFilmicToneMapping
-                    }
-                }
-
-                // update render sugar
-                const sugar = {
-                    shadow: props.shadow,
-                }
-                if (rendererAsWebGlRenderer.value.instance && sugar?.shadow) {
-                    rendererAsWebGlRenderer.value.instance.shadowMap.enabled =
-                        true
-                    if (typeof sugar.shadow === 'object') {
-                        rendererAsWebGlRenderer.value.instance.shadowMap.type =
-                            sugar.shadow.type
-                    }
-                }
-
-                // set renderer props if needed
-                if (props.rendererProperties) {
-                    Object.keys(props.rendererProperties).forEach((key) => {
-                        set(
-                            rendererAsWebGlRenderer.value,
-                            key,
-                            (props.rendererProperties as any)[key]
-                        )
-                    })
-                }
-
-                // update using created renderer
-                renderer = rendererAsWebGlRenderer.value
-            } else {
-                useFallbackRenderer.value = false
-                // the user has initialized the renderer, so anything depending
-                // on the renderer can execute
-                rendererReady.value = true
-            }
-
-            // CAMERA
-            // ====================
-            // is there already a camera?
-            camera = tryGetNodeWithInstanceType([
-                'PerspectiveCamera',
-                'OrthographicCamera',
-            ])
-            // if not, let's create one
-            if (!camera) {
-                // create ortho camera
-                if (props.ortho || props.orthographic) {
-                    ensuredCamera.value = createNode<THREE.OrthographicCamera>({
-                        props: { args: props.cameraArgs ?? [] },
-                        type: 'OrthographicCamera',
-                        uuid: fallbackCameraUuid,
-                    })
-                } else {
-                    ensuredCamera.value = createNode<THREE.PerspectiveCamera>({
-                        props: {
-                            args: props.cameraArgs ?? [
-                                props.r3f ? 75 : 45,
-                                0.5625,
-                                1,
-                                1000,
-                            ],
-                        },
-                        type: 'PerspectiveCamera',
-                        uuid: fallbackCameraUuid,
-                    })
-                }
-
-                cameraReady.value = true
-
-                camera = ensuredCamera.value
-            } else {
-                cameraReady.value = true
-            }
-            if (!camera.instance) {
-                throw new Error('Error creating camera.')
-            }
-            // move camera if needed
-            if (camera && props.cameraPosition) {
-                camera.instance.position.set(...props.cameraPosition)
-            }
-            // angle camera if needed
-            if (camera && (props.cameraLookAt || props.cameraLook)) {
-                const source = (props.cameraLookAt || props.cameraLook)!
-                camera.instance.lookAt(...source)
-            }
-            // zoom camera if needed
-            if (camera && props.zoom !== undefined) {
-                ;(camera.instance as THREE.OrthographicCamera).zoom = props.zoom
-            }
-
-            // SCENE
-            // ====================
-            scene = ensuredScene.value
-            // set background color
-            if (scene && scene.instance && props.background) {
-                scene.instance.background = new THREE.Color(props.background)
-            }
-
-            // MISC PROPERTIES
-            // ====================
-            if (dpr.value === -1) {
-                dpr.value = window.devicePixelRatio
-            }
-
-            if (renderer?.instance) {
-                renderer.instance.setPixelRatio(dpr.value)
-                globals.dpr.value = dpr.value
-                // prep canvas (sizing, observe, unmount, etc)
-                prepCanvas(
-                    container,
-                    renderer.instance.domElement,
-                    onBeforeUnmount,
-                    props.sizePolicy,
-                )
-            } else {
-                throw new Error('missing renderer')
-            }
-
-            // CALLBACK PREP
-            // ====================
-            const app = getCurrentInstance()!.appContext.app as Lunch.App
-
-            // START
-            // ====================
-            for (let startCallback of startCallbacks) {
-                startCallback({
-                    app,
-                    camera: camera.instance,
-                    renderer: renderer.instance,
-                    scene: scene.instance,
-                })
-            }
-
-            // KICK UPDATE
-            // ====================
-            update({
-                app,
-                camera: camera.instance,
-                renderer: renderer.instance,
-                scene: scene.instance,
-                updateSource: props.updateSource,
-            })
-        })
-
-        // UNMOUNT
-        // ====================
-        onBeforeUnmount(() => {
-            cancelUpdate()
-            cancelUpdateSource()
-        })
-
-        // RENDER FUNCTION
-        // ====================
-        const containerFillStyle = props.sizePolicy === 'container' ? 'static' : 'absolute'
-        const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed'
-
-        return () => [
-            context.slots.default?.() ?? null,
-            h(
-                'div',
-                {
-                    style: fillStyle(containerFillStyle),
-                    ref: container,
-                },
-                [
-                    useFallbackRenderer.value
-                        ? h('canvas', {
-                              style: fillStyle(canvasFillStyle),
-                              class: 'lunchbox-canvas',
-                              ref: canvas,
-                          })
-                        : null,
-                ]
-            ),
-        ]
-    },
-}

package/src/core/allNodes.ts

@@ -1,4 +0,0 @@
-import { MiniDom } from '.'
-
-// this needs to be in a separate file to ensure it's created immediately
-export const allNodes = [] as Array<MiniDom.BaseNode>

package/src/core/start.ts

@@ -1,11 +0,0 @@
-import { Lunch } from '..'
-
-export const startCallbacks = [] as Lunch.UpdateCallback[]
-
-export const onStart = (cb: Lunch.UpdateCallback, index = Infinity) => {
-    if (index === Infinity) {
-        startCallbacks.push(cb)
-    } else {
-        startCallbacks.splice(index, 0, cb)
-    }
-}