@vyr/cli 0.0.12 → 0.0.13

package/output/remote/src/RemoteExecutor.ts

@@ -0,0 +1,519 @@
+import { AnimationUnitInterpreter, Asset, Compilation, Descriptor, DeserializationObject, DivDescriptor, DynamicDescriptor, Engine, Graphics, HTMLDescriptor, HTMLServiceDescriptor, HTMLTransformControllerDescriptor, observer, PrefabeDescriptor, ServiceDescriptor, ServiceSchedulerDescriptor, StyleDescriptor, Unit } from '@vyr/engine'
+import { cleanPickupObject, getAnimationUnit, createControllerStyle, pickupObject, getAnimationUnitByAsset, screenshot } from './utils'
+import { Collection } from './Collection'
+import { RemoteProcess } from './RemoteProcess'
+import { Job } from './job'
+
+class RemoteExecutor {
+    private _defaultScheduleUrl = Asset.createVirtualUrl('remote/schedule/default.ts')
+    readonly htmlTransformCollection = new Collection()
+    readonly process
+
+    constructor(process: RemoteProcess) {
+        this.process = process
+    }
+
+    async loadByScene(task: InstanceType<typeof Job['scene']['load']['Task']>) {
+        let loadTask = Asset.getTask(task.params.url)
+        if (loadTask === null) {
+            const nextTask = Asset.getTask(this.process.scene)
+            nextTask?.cancel()
+
+            this.process.scene = task.params.url
+            await Asset.loadAll(task.params.url)
+            await Asset.compileDataset(task.params.url, this.process.engine)
+
+            //渲染新场景
+            const scheduler = Asset.get<ServiceSchedulerDescriptor>(task.params.url)
+            if (this.process.config.invoke) {
+                scheduler.traverse(sub => {
+                    if (sub instanceof ServiceDescriptor) this.onAddService(sub)
+                })
+            }
+
+            this.sendAnimationUnitToRemote(0, getAnimationUnit(scheduler))
+
+            this.process.scheduler = scheduler
+            this.process.engine.switch(scheduler)
+        }
+    }
+    async unloadByScene(task: InstanceType<typeof Job['scene']['unload']['Task']>) {
+        const scheduler = Asset.get<ServiceSchedulerDescriptor>(this.process.scene)
+        if (scheduler !== null) {
+            scheduler.traverse(child => {
+                if (child instanceof ServiceDescriptor) this.onRemoveService(child)
+            })
+        }
+
+        const nextTask = Asset.getTask(this.process.scene)
+        nextTask?.cancel()
+        this.process.scene = ''
+        this.process.scheduler = new ServiceSchedulerDescriptor()
+        this.process.engine.switch(this.process.scheduler)
+    }
+    async addByScene(task: InstanceType<typeof Job['scene']['add']['Task']>) {
+        const target = Descriptor.get<Descriptor>(task.params.parent)
+        if (target === null) return
+
+        const subs: Descriptor[] = []
+        const tasks: Promise<void>[] = []
+        for (const node of task.params.node) {
+            const sub = Descriptor.create(node)
+            subs.push(sub)
+
+            const ports = Asset.graph.build(sub)
+            const dep = Asset.graph.getDependencidesByPorts(ports)
+            for (const url of dep.all) {
+                if (Asset.get(url) === null) tasks.push(Asset.loadAll(url, false))
+            }
+
+            if (this.process.config.invoke) {
+                sub.traverse(child => {
+                    if (child instanceof ServiceDescriptor) this.onAddService(child)
+                })
+            }
+        }
+
+        await Promise.all(tasks)
+
+        if (task.params.next) {
+            for (const sub of subs) target.insertBefore(sub.uuid, task.params.next)
+        } else {
+            for (const sub of subs) target.add(sub)
+        }
+
+        await Asset.loadAll(this.process.scene)
+        await Asset.compileDataset(this.process.scene, this.process.engine)
+        this.sendAnimationUnitToRemote(0, getAnimationUnit(this.process.scheduler))
+    }
+    async removeyScene(task: InstanceType<typeof Job['scene']['remove']['Task']>) {
+        for (const uuid of task.params.uuids) {
+            const target = Descriptor.get<Descriptor>(uuid)
+            if (target === null) continue
+
+            this.resetTransformByRemoveJob(target)
+
+            const acestor = target.traceAncestor()
+            if (acestor.parent) acestor.parent.remove(target)
+
+            if (this.process.config.invoke) {
+                target.traverse(child => {
+                    if (child instanceof ServiceDescriptor) this.onRemoveService(child)
+                })
+            }
+        }
+
+        await Asset.loadAll(this.process.scene)
+        this.sendAnimationUnitToRemote(0, getAnimationUnit(this.process.scheduler))
+    }
+    async dragdrapyScene(task: InstanceType<typeof Job['scene']['dragdrap']['Task']>) {
+        const root = Asset.get<Descriptor>(this.process.scene)
+        if (root) {
+
+            const method = task.params.next ? 'insertBefore' : task.params.type
+            const target = task.params.next || task.params.targetData.data.uuid
+
+            for (const uuid of task.params.dragData.data.uuids) {
+                root[method](uuid, target)
+            }
+        }
+    }
+    async updateyScene(task: InstanceType<typeof Job['scene']['update']['Task']>) {
+        const target = Descriptor.get<Descriptor>(task.params.content.uuid)
+        if (target === null) return
+
+        const temp = target.clone(false)
+        temp.syncWith(task.params.content)
+        const ports = Asset.graph.build(temp)
+        const dep = Asset.graph.getDependencidesByPorts(ports)
+        const tasks: Promise<void>[] = []
+        for (const url of dep.all) {
+            if (Asset.get(url) === null) tasks.push(Asset.loadAll(url, false))
+        }
+        await Promise.all(tasks)
+
+        this.updateOtherUpdateJob(target, task.params.content)
+        target.syncWith(task.params.content)
+        await Asset.loadAll(this.process.scene)
+        await Asset.compileDataset(this.process.scene, this.process.engine)
+
+        this.sendAnimationUnitToRemote(0, getAnimationUnit(this.process.scheduler))
+
+        target.setNeedsUpdate()
+    }
+
+    async loadByAsset(task: InstanceType<typeof Job['asset']['load']['Task']>) {
+        let loadTask = Asset.getTask(task.params.url)
+        if (loadTask === null) {
+            const nextTask = Asset.getTask(this.process.asset)
+            nextTask?.cancel()
+
+            this.process.asset = task.params.url
+            await Asset.loadAll(task.params.url)
+            await Asset.compileDataset(task.params.url, this.process.engine)
+
+            const scheduler = new ServiceSchedulerDescriptor()
+            const descriptor = Asset.get<Descriptor>(task.params.url)
+            if (descriptor instanceof PrefabeDescriptor && descriptor.category === 'html') {
+                const service = new HTMLServiceDescriptor()
+                service.add(descriptor)
+                scheduler.add(service)
+            } else {
+                this.onLoadAsset(task.params.url, descriptor, scheduler)
+            }
+            scheduler.traverse(sub => {
+                if (sub instanceof ServiceDescriptor) this.onAddService(sub)
+            })
+
+            Asset.set(this._defaultScheduleUrl, scheduler)
+            Asset.graph.create(task.params.url)
+
+            this.sendAnimationUnitToRemote(0, getAnimationUnitByAsset(task.params.url))
+
+            this.process.scheduler = scheduler
+            this.process.engine.switch(scheduler)
+        }
+    }
+    async unloadByAsset(task: InstanceType<typeof Job['asset']['unload']['Task']>) {
+        const scheduler = Asset.get<ServiceSchedulerDescriptor>(this.process.asset)
+        if (scheduler !== null) {
+
+            if (this.process.config.invoke) {
+                scheduler.traverse(child => {
+                    if (child instanceof ServiceDescriptor) this.onRemoveService(child)
+                })
+            }
+        }
+
+        const nextTask = Asset.getTask(this.process.asset)
+        nextTask?.cancel()
+        this.process.asset = ''
+
+        this.process.scheduler = new ServiceSchedulerDescriptor()
+        this.process.engine.switch(this.process.scheduler)
+    }
+    async addByAsset(task: InstanceType<typeof Job['asset']['add']['Task']>) {
+        const parent = Descriptor.get<Descriptor>(task.params.parent)
+        if (parent === null) return
+
+        const subs: Descriptor[] = []
+        const tasks: Promise<void>[] = []
+
+        for (const node of task.params.node) {
+            const sub = Descriptor.create(node)
+            subs.push(sub)
+
+            const ports = Asset.graph.build(sub)
+            const dep = Asset.graph.getDependencidesByPorts(ports)
+            for (const url of dep.all) {
+                if (Asset.get(url) === null) tasks.push(Asset.loadAll(url, false))
+            }
+
+            sub.traverse(child => {
+                if (child instanceof ServiceDescriptor) this.onAddService(child)
+            })
+        }
+        await Promise.all(tasks)
+
+        if (task.params.next) {
+            for (const sub of subs) parent.insertBefore(sub.uuid, task.params.next)
+        } else {
+            for (const sub of subs) parent.add(sub)
+        }
+
+        await Asset.loadAll(task.params.url)
+        Asset.graph.update(this._defaultScheduleUrl)
+        await Asset.compileDataset(task.params.url, this.process.engine)
+
+        this.sendAnimationUnitToRemote(0, getAnimationUnitByAsset(task.params.url))
+    }
+    async removeyAsset(task: InstanceType<typeof Job['asset']['remove']['Task']>) {
+        for (const uuid of task.params.uuids) {
+            const target = Descriptor.get<Descriptor>(uuid)
+            if (target === null) continue
+
+            this.resetTransformByRemoveJob(target)
+
+            const acestor = target.traceAncestor()
+            if (acestor.parent) acestor.parent.remove(target)
+
+            if (this.process.config.invoke) {
+                target.traverse(child => {
+                    if (child instanceof ServiceDescriptor) this.onRemoveService(child)
+                })
+            }
+        }
+
+        await Asset.loadAll(task.params.url)
+        this.sendAnimationUnitToRemote(0, getAnimationUnitByAsset(task.params.url))
+    }
+    async dragdrapyAsset(task: InstanceType<typeof Job['asset']['dragdrap']['Task']>) {
+        const root = Asset.get<Descriptor>(task.params.url)
+        if (root) {
+
+            const method = task.params.next ? 'insertBefore' : task.params.type
+            const target = task.params.next || task.params.targetData.data.uuid
+
+            for (const uuid of task.params.dragData.data.uuids) {
+                root[method](uuid, target)
+            }
+        }
+    }
+    async updateyAsset(task: InstanceType<typeof Job['asset']['update']['Task']>) {
+        const target = Descriptor.get<Descriptor>(task.params.content.uuid)
+        if (target === null) return
+
+        const temp = target.clone(false)
+        temp.syncWith(task.params.content)
+        const ports = Asset.graph.build(temp)
+        const dep = Asset.graph.getDependencidesByPorts(ports)
+        const tasks: Promise<void>[] = []
+        for (const url of dep.all) {
+            if (Asset.get(url) === null) tasks.push(Asset.loadAll(url, false))
+        }
+        await Promise.all(tasks)
+
+        this.updateOtherUpdateJob(target, task.params.content)
+        target.syncWith(task.params.content)
+        await Asset.loadAll(task.params.url)
+        Asset.graph.update(this._defaultScheduleUrl)
+        await Asset.compileDataset(this.process.scene, this.process.engine)
+
+        this.sendAnimationUnitToRemote(0, getAnimationUnitByAsset(task.params.url))
+
+        target.setNeedsUpdate()
+    }
+
+    clearHTMLTransform() {
+        const htmlTransforms = this.htmlTransformCollection.values()
+        for (const item of htmlTransforms) {
+            item.target = ''
+            item.mode = ''
+            item.enabled = false
+            item.setNeedsUpdate()
+        }
+    }
+    async transformByInvoke(task: InstanceType<typeof Job['invoke']['transform']['Task']>, service: ServiceDescriptor | null = null) {
+        this.clearHTMLTransform()
+
+        const target = Descriptor.get<Descriptor>(task.params.target)
+        if (service === null) {
+            service = ServiceDescriptor.traceService(target)
+        } else {
+            const isHTMLServiceDescriptor = service instanceof HTMLServiceDescriptor
+            if (isHTMLServiceDescriptor === false) return
+        }
+        if (service === null) return
+
+        const enabled = ['translate', 'rotate', 'scale'].includes(task.params.mode)
+        const htmlTransform = this.htmlTransformCollection.get<HTMLTransformControllerDescriptor>(service)
+
+        if (htmlTransform !== null && enabled === true && target instanceof HTMLDescriptor) {
+            htmlTransform.target = task.params.target
+            htmlTransform.mode = task.params.mode
+            htmlTransform.enabled = true
+        }
+    }
+    async orbitByInvoke(task: InstanceType<typeof Job['invoke']['orbit']['Task']>) { }
+    async propertiesByInvoke(task: InstanceType<typeof Job['invoke']['properties']['Task']>) { }
+    async animationByInvoke(task: InstanceType<typeof Job['invoke']['animation']['Task']>) {
+        if (task.reset) AnimationUnitInterpreter.reset(task.params.currentTime)
+        AnimationUnitInterpreter.enabled = task.params.enabled
+    }
+    async screenshot(task: InstanceType<typeof Job['invoke']['screenshot']['Task']>) {
+        const base64 = await screenshot(document.body)
+        const msg = new Job.invoke.screenshot.Response({ target: task.params.target, base64 })
+        this.process.bridge.send(msg)
+    }
+
+    onLoadAsset(url: string, descriptor: Descriptor, scheduler: ServiceSchedulerDescriptor) {
+        if (descriptor instanceof StyleDescriptor) {
+            const service = new HTMLServiceDescriptor()
+            service.add(new DivDescriptor({ style: url, text: '演示文字' }))
+            scheduler.add(service)
+        }
+    }
+    onAddService(service: ServiceDescriptor) {
+        if (service instanceof HTMLServiceDescriptor) {
+            let htmlTransform = this.htmlTransformCollection.get(service)
+            if (htmlTransform === null) {
+                htmlTransform = new HTMLTransformControllerDescriptor({ enabled: false, selectable: false })
+                this.htmlTransformCollection.set(service, htmlTransform)
+                htmlTransform.event = RemoteProcess.transformEvent
+            }
+            service.add(htmlTransform as HTMLTransformControllerDescriptor)
+        }
+    }
+    onRemoveService(service: ServiceDescriptor) {
+        if (service instanceof HTMLServiceDescriptor) {
+            const htmlTransform = this.htmlTransformCollection.get<HTMLTransformControllerDescriptor>(service)
+            if (htmlTransform !== null) {
+                this.htmlTransformCollection.delete(service)
+                service.remove(htmlTransform)
+            }
+        }
+    }
+    onUpdateScheduler(unit: Unit) {
+        const htmlTransform = Descriptor.get<Descriptor>(unit.uuid)
+        const service = this.htmlTransformCollection.getByMap(htmlTransform)
+        if (service !== null) {
+            //@ts-ignore
+            window['__VYR_RUNTIME.DISABLED_INPUT'] = false
+        }
+    }
+
+    resetTransformByRemoveJob(target: Descriptor, service: ServiceDescriptor | null = null) {
+        if (service === null) service = ServiceDescriptor.traceService(target)
+
+        if (service instanceof HTMLServiceDescriptor) {
+            const htmlTransform = this.htmlTransformCollection.get<HTMLTransformControllerDescriptor>(service)
+            if (htmlTransform === null) return
+
+            if (htmlTransform.target === target.uuid) {
+                htmlTransform.target = ''
+                htmlTransform.enabled = false
+                htmlTransform.setNeedsUpdate()
+            }
+        }
+    }
+    private _updateStyle(target: StyleDescriptor, deserialization: DeserializationObject<StyleDescriptor>) {
+        if (target.inherit === deserialization.inherit) return
+        observer.trigger('updateDeps', { self: target.uuid })
+    }
+    updateOtherUpdateJob(target: Descriptor, deserialization: DeserializationObject<Descriptor>, service: ServiceDescriptor | null = null) {
+        if (target instanceof StyleDescriptor) this._updateStyle(target, deserialization as any)
+        if (service === null) {
+            service = ServiceDescriptor.traceService(target)
+        }
+        if (service === null) return
+        const htmlTransform = this.htmlTransformCollection.get<HTMLTransformControllerDescriptor>(service)
+        if (htmlTransform === null) return
+        if (htmlTransform.target === target.uuid) {
+            this.process.engine.listen('afterRender', () => htmlTransform.setNeedsUpdate(), { once: true })
+        }
+    }
+
+    enhance(process: RemoteProcess, schedulerWrapper: ((graphics: Graphics) => void) | null = null) {
+        const executor = process.getExecutor()
+        const listen = Compilation.prototype.listen
+
+        Compilation.prototype.listen = function (graphics: Graphics) {
+            if (schedulerWrapper !== null) schedulerWrapper(graphics)
+            listen.call(this, graphics)
+            if (graphics.__VYR_REMOTE_WRAPPER === true) return graphics
+            graphics.__VYR_REMOTE_WRAPPER = true
+
+            return graphics
+        }
+
+        const doUpdate = Graphics.prototype.doUpdate
+        Graphics.prototype.doUpdate = function (unit: Unit) {
+            if (this.__VYR_REMOTE_WRAPPER === true) {
+                //@ts-ignore
+                window['__VYR_RUNTIME.DISABLED_INPUT'] = true
+                executor.onUpdateScheduler(unit)
+                doUpdate.call(this, unit)
+            } else {
+                doUpdate.call(this, unit)
+            }
+        }
+
+        process.engine.listen('afterRender', (args) => this.sendAnimationUnitToRemote(args.delta))
+    }
+
+    protected stopWheel(e: WheelEvent) {
+        if (e.ctrlKey === true) {
+            e.preventDefault()
+            e.stopPropagation()
+        }
+    }
+    protected onEvent(event: MouseEvent | KeyboardEvent) {
+        let task
+        if (event instanceof MouseEvent) {
+            task = new Job.invoke.event.Response({
+                type: 'mouse',
+                properties: {
+                    type: event.type,
+                    bubbles: event.bubbles,
+                    cancelable: event.cancelable,
+                    altKey: event.altKey,
+                    ctrlKey: event.ctrlKey,
+                    shiftKey: event.shiftKey,
+                    clientX: event.clientX,
+                    clientY: event.clientY,
+                }
+            })
+        } else {
+            task = new Job.invoke.event.Response({
+                type: 'keyboard',
+                properties: {
+                    type: event.type,
+                    altKey: event.altKey,
+                    ctrlKey: event.ctrlKey,
+                    shiftKey: event.shiftKey,
+                    code: event.code,
+                }
+            })
+            if (event.code === 'Tab') event.preventDefault()
+        }
+        this.process.bridge.send(task)
+    }
+    protected onMessage(args: any) {
+        if (args.type === DynamicDescriptor.type) {
+            //动态节点发生了循环引用，动态节点 arsg.uuid
+        }
+    }
+
+    sendAnimationUnitToRemote(delta: number, max?: number) {
+        this.process.bridge.send(new Job.invoke.animation.Response({ type: 'unit', delta, max }))
+    }
+
+    async listen() {
+        window.addEventListener('wheel', this.stopWheel, { passive: false })
+
+        if (this.process.config.execute) {
+            this.process.bridge.listen(Job.asset.load.Method, this.loadByAsset.bind(this))
+            this.process.bridge.listen(Job.asset.unload.Method, this.unloadByAsset.bind(this))
+            this.process.bridge.listen(Job.asset.add.Method, this.addByAsset.bind(this))
+            this.process.bridge.listen(Job.asset.remove.Method, this.removeyAsset.bind(this))
+            this.process.bridge.listen(Job.asset.dragdrap.Method, this.dragdrapyAsset.bind(this))
+            this.process.bridge.listen(Job.asset.update.Method, this.updateyAsset.bind(this))
+
+            this.process.bridge.listen(Job.scene.load.Method, this.loadByScene.bind(this))
+            this.process.bridge.listen(Job.scene.unload.Method, this.unloadByScene.bind(this))
+            this.process.bridge.listen(Job.scene.add.Method, this.addByScene.bind(this))
+            this.process.bridge.listen(Job.scene.remove.Method, this.removeyScene.bind(this))
+            this.process.bridge.listen(Job.scene.dragdrap.Method, this.dragdrapyScene.bind(this))
+            this.process.bridge.listen(Job.scene.update.Method, this.updateyScene.bind(this))
+        }
+
+        if (this.process.config.invoke) {
+            createControllerStyle()
+            pickupObject(this.process)
+            cleanPickupObject(this.process)
+            this.enhance(this.process)
+
+            this.process.bridge.listen(Job.invoke.transform.Method, this.transformByInvoke.bind(this))
+            this.process.bridge.listen(Job.invoke.orbit.Method, this.orbitByInvoke.bind(this))
+            this.process.bridge.listen(Job.invoke.properties.Method, this.propertiesByInvoke.bind(this))
+            this.process.bridge.listen(Job.invoke.animation.Method, this.animationByInvoke.bind(this))
+            this.process.bridge.listen(Job.invoke.screenshot.Method, this.screenshot.bind(this))
+
+            window.addEventListener('keydown', this.onEvent.bind(this))
+            window.addEventListener('keyup', this.onEvent.bind(this))
+            window.addEventListener('mousedown', this.onEvent.bind(this))
+            window.addEventListener('click', this.onEvent.bind(this))
+            window.addEventListener('mouseup', this.onEvent.bind(this))
+
+            //@ts-ignore
+            window['__VYR_RUNTIME.DISABLED_INPUT'] = true
+        }
+
+        observer.listen('__VYR_RUNTIME@remote', this.onMessage.bind(this))
+    }
+}
+
+
+export {
+    RemoteExecutor
+}

package/output/remote/src/RemoteInvoker.ts

@@ -0,0 +1,72 @@
+import { AsyncTask, Generate } from '@vyr/engine'
+import { Bridge, RemoteConfig } from './Bridge'
+
+interface RemoteSanbox {
+  [k: string]: any
+  DOM: HTMLDivElement
+  useRemote: () => Promise<Window>
+}
+
+/**远程调用器 */
+class RemoteInvoker {
+  static createRemoteLocation(config: RemoteConfig) {
+    const location = Bridge.createBaseUrl() + `/preview.html?config=${JSON.stringify(config)}`
+    return location
+  }
+  static createIframe(location: string) {
+    const DOM = document.createElement('iframe')
+    DOM.width = '100%'
+    DOM.height = '100%'
+    DOM.style.width = '100%'
+    DOM.style.height = '100%'
+    DOM.style.border = 'none'
+    DOM.setAttribute('src', location)
+    const promise = new Promise<Window>((resolve) => DOM.addEventListener('load', () => resolve(DOM.contentWindow as Window)))
+    const task = new AsyncTask(() => promise)
+    const listeners = ['keydown', 'keyup', 'mousedown', 'mouseup']
+    const stop = (e: Event) => { e.preventDefault(); e.stopPropagation() }
+    for (const key of listeners) DOM.addEventListener(key, stop)
+    const useRemote = async () => task.done()
+    const snabox: RemoteSanbox = { DOM, useRemote }
+    task.run()
+    return snabox
+  }
+  static createWindow(location: string) {
+    const DOM = document.createElement('div')
+    const win = window.open(location)
+    const snabox: RemoteSanbox = { DOM, useRemote: async () => win as Window }
+    return snabox
+  }
+  static createSandbox(config: RemoteConfig) {
+    const location = this.createRemoteLocation(config)
+    return config.env === 'window' ? this.createWindow(location) : this.createIframe(location)
+  }
+
+  private sanbox
+  readonly id
+  readonly bridge
+
+  constructor(window: Window, options: Partial<Omit<RemoteConfig, 'id'>> = {}) {
+    const config: RemoteConfig = { id: `${Generate.id()}`, env: 'window', execute: false, invoke: false }
+    Object.assign(config, options)
+    this.id = config.id
+    this.sanbox = RemoteInvoker.createSandbox(config)
+    this.bridge = new Bridge({ id: config.id, useRemote: this.sanbox.useRemote })
+  }
+
+  mount(id: string) {
+    if (this.sanbox === null) return
+    const container = document.getElementById(id)
+    if (container !== null) container.appendChild(this.sanbox.DOM)
+  }
+
+  dispose() {
+    this.bridge.close()
+  }
+
+  async ready() {
+    return this.bridge.connected.done()
+  }
+}
+
+export { RemoteInvoker }

package/output/remote/src/RemoteProcess.ts

@@ -0,0 +1,87 @@
+import { Asset, Descriptor, Engine, Generate, ServiceDescriptor, ServiceSchedulerDescriptor } from '@vyr/engine'
+import { Bridge, RemoteConfig } from './Bridge'
+import { RemoteExecutor } from './RemoteExecutor'
+import { Job } from './job'
+
+type RemoteSetup = (process: RemoteProcess) => void
+
+const privateState = {
+  setupCollection: [] as RemoteSetup[],
+  executorCollection: new Map<string, RemoteProcess>(),
+}
+
+class RemoteProcess {
+  static transformEvent = `TransformController/event/${Generate.uuid()}.ts`
+  static get(engine: Engine) {
+    return privateState.executorCollection.get(engine.uuid) ?? null
+  }
+  static register(setup: RemoteSetup) {
+    privateState.setupCollection.push(setup)
+  }
+  static getServices(descriptor: Descriptor, services: Descriptor[] = []) {
+    descriptor.traverse(sub => {
+      if (sub instanceof ServiceDescriptor) services.push(sub)
+    })
+    return services
+  }
+
+  private _executor!: RemoteExecutor
+  readonly config
+  readonly element
+  readonly engine
+  scene = ''
+  asset = ''
+  scheduler: ServiceSchedulerDescriptor
+  bridge!: Bridge
+
+  constructor(element: string | HTMLElement, engine = new Engine()) {
+    privateState.executorCollection.set(engine.uuid, this)
+    this.element = element
+    this.engine = engine
+    this.config = this._initConfig()
+    this.scheduler = new ServiceSchedulerDescriptor()
+  }
+
+  private _initConfig() {
+    const params: { [k: string]: string } = {}
+    const url = document.location.search
+    const kvdata = url.slice(1).split('&')
+    for (const kv of kvdata) {
+      const kvClips = kv.split('=')
+      params[kvClips[0]] = kvClips[1]
+    }
+    return (params.config ? JSON.parse(decodeURIComponent(params.config)) : {}) as RemoteConfig
+  }
+
+  async listen() {
+    for (const setup of privateState.setupCollection) setup(this)
+
+    this.bridge = new Bridge({ id: this.config.id, args: [this] })
+
+    let executor = this.getExecutor()
+    if (executor === null) {
+      executor = new RemoteExecutor(this)
+      this.setExecutor(executor)
+    }
+
+    await executor.listen()
+
+    this.engine.run(this.element)
+
+    if (this.config.scene) executor.loadByScene(new Job.scene.load.Task({ url: this.config.scene }))
+  }
+
+  setExecutor(executor: RemoteExecutor) {
+    this._executor = executor
+  }
+  getExecutor<T extends RemoteExecutor = RemoteExecutor>() {
+    return (this._executor ?? null) as T
+  }
+}
+
+Asset.provider(RemoteProcess.transformEvent, () => import('./ChangeScriptable'))
+Asset.load(RemoteProcess.transformEvent)
+
+export {
+  RemoteProcess
+}

package/output/remote/src/index.ts

@@ -0,0 +1,7 @@
+export * from './locale'
+export * from './job'
+export * from './Bridge'
+export * from './Collection'
+export * from './RemoteExecutor'
+export * from './RemoteProcess'
+export * from './RemoteInvoker'

package/output/remote/src/job/IJob.ts

@@ -0,0 +1,6 @@
+abstract class IJob {
+    abstract readonly method: string
+    abstract params: { [k: string]: any }
+}
+
+export { IJob }