@vyr/vue 0.0.1

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@vyr/vue",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "sideEffects": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vyr/locale": "0.0.1",
+    "@vyr/engine": "0.0.1",
+    "vue": "3.5.22"
+  },
+  "files": [
+    "package.json",
+    "src/"
+  ],
+  "vyr": {
+    "type": "universal",
+    "order": 10
+  }
+}

package/src/actor/TemplateActor.ts

@@ -0,0 +1,25 @@
+import { h, VNode } from "vue"
+import { Generate } from "@vyr/engine";
+import { VueDescriptor } from "../descriptor";
+import { VueActor, VyrVueChildren, VyrVueInstance } from "./VueActor";
+
+class TemplateActor extends VueActor {
+
+    getWrapper() {
+        return null
+    }
+
+    getWrapperVNode(instance: VyrVueInstance, content: VNode, descriptor: VueDescriptor) {
+        return content
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: VueDescriptor) {
+        const component = this.getComponent()
+
+        return h(component, { style: { display: 'contents' }, key: Generate.uuid() }, this.getSlots(children))
+    }
+}
+
+export {
+    TemplateActor
+}

package/src/actor/VueActor.ts

@@ -0,0 +1,230 @@
+import { App, createApp, h, markRaw, resolveDynamicComponent, VNode, ComponentPublicInstance } from 'vue'
+import { ArrayUtils, Asset, HTMLActor, RoutineDescriptor, RoutineInterpreter, StyleDescriptor, UpdateArgs } from "@vyr/engine"
+import { TemplateDescriptor, VueDescriptor } from "../descriptor"
+
+interface VyrVueProps {
+    [k: string]: any
+}
+
+interface VyrVueRaw {
+    instances: any[]
+    app: App | null
+    wrapper: HTMLElement | null
+}
+
+interface VyrVueInstance extends ComponentPublicInstance {
+    actor: VueActor
+}
+
+interface VyrVueChildren {
+    [k: string]: (slot?: any) => (VNode | VNode[])
+    default: (slot?: any) => (VNode[])
+}
+
+class VueActor extends HTMLActor {
+    readonly children: VueActor[] = []
+    style: { [k: string]: any } = {}
+    props: VyrVueProps = {}
+    raw: VyrVueRaw = markRaw({
+        instances: [],
+        app: null,
+        wrapper: null,
+    })
+
+    add(actor: VueActor) {
+        if (actor instanceof VueActor) {
+            ArrayUtils.insert(this.children, actor)
+        }
+    }
+
+    remove(actor: VueActor) {
+        if (actor instanceof VueActor) {
+            ArrayUtils.remove(this.children, actor)
+        }
+    }
+
+    getWrapper(): HTMLElement | null {
+        if (this.raw.instances.length > 1) {
+            return null
+        } else if (this.raw.instances.length === 1) {
+            return this.raw.instances[0].$el
+        } else {
+            const graphics = HTMLActor.getGraphics(this)
+            const parent = graphics.getParent(this.uuid)
+            if (parent instanceof VueDescriptor) return null
+            const descriptor = graphics.variableProxy.get<VueDescriptor>(this.uuid, graphics, { delta: 0 })
+            const vnode = this.createVNode(descriptor)
+            this.raw.app = markRaw(createApp(vnode, { actor: this }))
+            const plugins = VueDescriptor.getPlugins()
+            for (const plugin of plugins) {
+                let args = plugin.args
+                if (typeof plugin.args === 'function') {
+                    args = plugin.args()
+                }
+                this.raw.app.use(plugin.content, args)
+            }
+            const component = this.raw.app.mount(document.createElement('div'))
+            return component.$el
+        }
+    }
+
+    update(descriptor: VueDescriptor, args: UpdateArgs) {
+        this.style = this.getWrapperStyle(descriptor, args)
+        this.props = this.getProps(descriptor, args)
+    }
+
+    dispose() {
+        this.cleanInteraction()
+        if (this.raw.app === null) return
+        this.raw.app.unmount()
+        this.raw.app = null
+    }
+
+    createVNode(descriptor: VueDescriptor) {
+        const self = this
+        const vnode = {
+            props: ['actor'],
+            setup() {
+                const VYR_STORE = {}
+
+                return { VYR_STORE }
+            },
+            render() {
+                const _instance = this as VyrVueInstance
+                const children = self.getChildren(_instance, { delta: 0 })
+                const content = _instance.actor.getContent(_instance, children, descriptor)
+
+                return self.getWrapperVNode(this as any, content, descriptor)
+            },
+            mounted() {
+                //@ts-ignore
+                ArrayUtils.insert(this.actor.raw.instances, this)
+            },
+            beforeUnmount() {
+                //@ts-ignore
+                ArrayUtils.remove(this.actor.raw.instances, this)
+            },
+        } as unknown as VyrVueInstance
+
+        return vnode as unknown as VNode
+    }
+
+    getChildren(instance: VyrVueInstance, args: UpdateArgs) {
+        const { actor } = instance
+
+        const _default: VNode[] = []
+        const slots: VyrVueChildren = {
+            default: () => _default,
+        }
+
+        if (Array.isArray(actor.children) === false) return slots
+
+        const graphics = HTMLActor.getGraphics(actor)
+
+        for (let i = 0; i < actor.children.length; i++) {
+            const attr = { key: i, actor: actor.children[i] }
+            const descriptor = graphics.variableProxy.get<VueDescriptor>(attr.actor.uuid, graphics, args)
+            const component = attr.actor.createVNode(descriptor)
+
+            if (descriptor instanceof TemplateDescriptor) {
+                if (descriptor.slotName) {
+                    const slot = h(component, attr)
+                    slots[descriptor.slotName] = () => slot
+                }
+            } else {
+                _default.push(h(component, attr))
+            }
+        }
+
+        return slots
+    }
+
+    getWrapperAttrs(instance: VyrVueInstance) {
+        const attrs = {
+            class: HTMLActor.className,
+            [HTMLActor.uuidKey]: instance.actor.uuid,
+            style: instance.actor.style,
+        }
+        return attrs
+    }
+
+    getWrapperVNode(instance: VyrVueInstance, content: VNode, descriptor: VueDescriptor) {
+        const attrs = this.getWrapperAttrs(instance)
+
+        return h('div', attrs, [content])
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: VueDescriptor) {
+        const component = this.getComponent()
+
+        const attrs = this.getComponentAttrs(instance, descriptor)
+
+        return h(component, attrs, children)
+    }
+
+    getProps(descriptor: VueDescriptor, args: UpdateArgs) {
+        return {}
+    }
+
+    getInteractionProps(descriptor: VueDescriptor, instance: VyrVueInstance, args: UpdateArgs) {
+        const interactions: { [k: string]: any } = {}
+        const graphics = HTMLActor.getGraphics(this)
+        //@ts-ignore
+        const eventArgs = { ...args, trigger: descriptor, VYR_STORE: instance.VYR_STORE }
+        for (const interaction of descriptor.interactions) {
+            if (interaction.url) {
+                const routine = Asset.get<RoutineDescriptor>(interaction.url)
+                const interpreter = graphics.getInterpreter<RoutineInterpreter>(routine)
+                const listener = (e: Event) => {
+                    if (e instanceof Event) e.stopPropagation()
+                    interpreter.do(interaction.inputs, routine, eventArgs)
+                }
+                const eventKey = 'on' + interaction.type.charAt(0).toUpperCase() + interaction.type.slice(1)
+                interactions[eventKey] = listener
+            }
+        }
+        return interactions
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('div') as VNode
+    }
+
+    getComponentAttrs(instance: VyrVueInstance, descriptor: VueDescriptor, ...args: any[]) {
+        const className = [...this.getStyleClass(descriptor, { delta: 0 })]
+        if (descriptor.active) className.push(StyleDescriptor.activeName)
+        const interactions = this.getInteractionProps(descriptor, instance, { delta: 0 })
+
+        const attrs = {
+            ...this.props,
+            ...interactions,
+            class: className,
+            [HTMLActor.uuidKey]: this.uuid,
+        }
+
+        return attrs
+    }
+
+    getSlots(children: VyrVueChildren) {
+        //@ts-ignore
+        const slots: VyrVueChildren = {}
+        const keys = Object.keys(children)
+        for (const key of keys) {
+            const value = children[key]()
+            const values = Array.isArray(value) ? value : [value]
+            slots[key] = function (slot: any) {
+                return values.map(child => h(child, {
+                    onVnodeMounted(vnode) {
+                        if (!vnode.component) return
+                        //@ts-ignore
+                        Object.assign(vnode.component.setupState['VYR_STORE'], { slot })
+                    }
+                }))
+            }
+        }
+
+        return slots
+    }
+}
+
+export { VyrVueProps, VyrVueChildren, VyrVueInstance, VueActor }

package/src/actor/index.ts

@@ -0,0 +1,2 @@
+export * from './VueActor'
+export * from './TemplateActor'

package/src/descriptor/TemplateDescriptor.ts

@@ -0,0 +1,15 @@
+import { DeserializationObject } from "@vyr/engine"
+import { VueDescriptor } from "./VueDescriptor"
+
+class TemplateDescriptor extends VueDescriptor {
+    static type = 'Template'
+    slotName: string
+
+    constructor(descriptor: Partial<DeserializationObject<TemplateDescriptor>> = {}) {
+        super(descriptor)
+        this.slotName = descriptor.slotName ?? 'default'
+    }
+}
+VueDescriptor.register(TemplateDescriptor)
+
+export { TemplateDescriptor }

package/src/descriptor/VueDescriptor.ts

@@ -0,0 +1,25 @@
+import { Plugin } from "vue";
+import { DeserializationObject, HTMLDescriptor } from "@vyr/engine";
+
+const privateState = {
+    plugins: [] as { content: Plugin, args?: any }[],
+}
+
+class VueDescriptor extends HTMLDescriptor {
+    static use(content: Plugin, args?: any) {
+        privateState.plugins.push({ content, args })
+    }
+    static getPlugins() {
+        return [...privateState.plugins]
+    }
+    static type = 'Vue'
+
+    constructor(descriptor: Partial<DeserializationObject<VueDescriptor>> = {}) {
+        super(descriptor)
+        this.width = descriptor.width ?? -1
+        this.height = descriptor.height ?? -1
+    }
+}
+HTMLDescriptor.register(VueDescriptor)
+
+export { VueDescriptor }

package/src/descriptor/index.ts

@@ -0,0 +1,2 @@
+export * from './VueDescriptor'
+export * from './TemplateDescriptor'

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './locale'
+export * from './descriptor'
+export * from './interpreter'
+export * from './actor'

package/src/interpreter/TemplateInterpreter.ts

@@ -0,0 +1,18 @@
+import { reactive } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { TemplateDescriptor } from "../descriptor";
+import { TemplateActor } from "../actor";
+import { VueInterpreter } from "./VueInterpreter";
+
+class TemplateInterpreter extends VueInterpreter {
+    static type = TemplateDescriptor.type
+
+    protected createActor(descriptor: TemplateDescriptor, args: UpdateArgs) {
+        return reactive(new TemplateActor(descriptor.uuid)) as TemplateActor
+    }
+}
+VueInterpreter.register(TemplateInterpreter)
+
+export {
+    TemplateInterpreter
+}

package/src/interpreter/VueInterpreter.ts

@@ -0,0 +1,45 @@
+import { reactive } from 'vue'
+import { Descriptor, HTMLActor, Interpreter, PickupObject, UpdateArgs } from '@vyr/engine'
+import { VueDescriptor } from '../descriptor'
+import { VueActor } from '../actor'
+
+class VueInterpreter extends Interpreter {
+    static type = VueDescriptor.type
+
+    protected createActor(descriptor: VueDescriptor, args: UpdateArgs) {
+        return reactive(new VueActor(descriptor.uuid)) as VueActor
+    }
+
+    update(descriptor: VueDescriptor, args: UpdateArgs) {
+        super.update(descriptor, args)
+        const actor = this.getActor<VueActor>(descriptor, args)
+        actor.update(descriptor, args)
+    }
+
+    mount(descriptor: VueDescriptor, args: UpdateArgs, parentInterpreter: Interpreter, parentDescriptor: Descriptor) {
+        super.mount(descriptor, args, parentInterpreter, parentDescriptor)
+        const actor = this.getActor<VueActor>(descriptor, args)
+        const parentActor = parentInterpreter.getActor<HTMLActor>(parentDescriptor, args)
+        parentActor.add(actor)
+    }
+
+    unmount(descriptor: VueDescriptor, args: UpdateArgs, parentInterpreter: Interpreter, parentDescriptor: Descriptor) {
+        const actor = this.getActor<VueActor>(descriptor, args)
+        const parentActor = parentInterpreter.getActor<HTMLActor>(parentDescriptor, args)
+        parentActor.remove(actor)
+        super.unmount(descriptor, args, parentInterpreter, parentDescriptor)
+    }
+
+    free(descriptor: VueDescriptor, args: UpdateArgs) {
+        const actor = this.getActor<VueActor>(descriptor, args)
+        actor.dispose()
+        super.free(descriptor, args)
+    }
+
+    pickup(descriptor: VueDescriptor, args: UpdateArgs, result: PickupObject[]) {
+        result.push({ uuid: descriptor.uuid, generatedBy: descriptor.generatedBy })
+    }
+}
+Interpreter.register(VueInterpreter)
+
+export { VueInterpreter }

package/src/interpreter/index.ts

@@ -0,0 +1,2 @@
+export * from './VueInterpreter'
+export * from './TemplateInterpreter'

package/src/locale/Language.ts

@@ -0,0 +1,10 @@
+import { Locale } from "@vyr/locale";
+import { zhCnLanguageProvider, ZhCNLanguageProvider } from "./LanguageProvider";
+
+Locale.register(zhCnLanguageProvider)
+
+const language = Locale.getLanguage<ZhCNLanguageProvider>(zhCnLanguageProvider.name)
+
+export {
+    language
+}

package/src/locale/LanguageProvider.ts

@@ -0,0 +1,15 @@
+import { LanguageProvider } from '@vyr/locale'
+
+interface ZhCNLanguageProvider extends LanguageProvider {
+    
+}
+
+const zhCnLanguageProvider: ZhCNLanguageProvider = {
+    id: 'zh_CN',
+    name: '@vyr/vue',
+}
+
+export {
+    ZhCNLanguageProvider,
+    zhCnLanguageProvider,
+}

package/src/locale/index.ts

@@ -0,0 +1,2 @@
+export * from './LanguageProvider'
+export * from './Language'

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+declare module '*.vue' {
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}