🐛 [Bug]: 引入v3-easyui在画布中无法渲染显示

niffegg commented 1 month ago

Environment

windows 11+edge

Version

latest

Version

lstest

Link to minimal reproduction

无

Step to reproduce

无

What is expected

No response

What is actually happening

我部署好tiny-engine后，使用pnpm splitMaterials脚本将bundle.json资产包拆分，然后在拆分后的组件文件夹中增加了一个TextBox.json。其内容如下： { "id": 1, "version": "3.0.14", "name": { "zh_CN": "TextBox输入框" }, "component": "TextBox", "icon": "input", "description": "easyui的TextBox输入框", "doc_url": "", "screenshot": "", "tags": "", "keywords": "", "dev_mode": "proCode", "npm": { "package": "v3-easyui", "version": "3.0.14", "script": "https://unpkg.com/v3-easyui@3.0.14/dist/v3-easyui.js", "css": "https://unpkg.com/v3-easyui@3.0.14/dist/themes/default/easyui.css", "dependencies": null, "exportName": "TextBox", "destructuring": true }, "group": "基础组件", "category": "easyui", "configure": { "loop": true, "condition": true, "styles": true, "isContainer": false, "isModal": false, "isPopper": false, "nestingRule": { "childWhitelist": "", "parentWhitelist": "", "descendantBlacklist": "", "ancestorWhitelist": "" }, "isNullNode": false, "isLayout": false, "rootSelector": "", "shortcuts": { "properties": [ "width", "height" ] }, "contextMenu": { "actions": [ "copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock" ], "disable": [] }, "invalidity": [ "" ], "clickCapture": true, "framework": "Vue" }, "schema": { "properties": [ { "name": "0", "label": { "zh_CN": "基础属性" }, "content": [ { "property": "disabled", "label": { "text": { "zh_CN": "是否禁用" } }, "description": { "zh_CN": "是否禁用" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "defaultValue": false, "type": "boolean", "widget": { "component": "MetaSwitch", "props": {} }, "device": [] } ], "description": { "zh_CN": "" } } ], "events": {} }, "snippets": [ { "name": { "zh_CN": "TextBox输入框" }, "icon": "input", "screenshot": "", "snippetName": "TextBox", "schema": { } } ] } 然后执行pnpm buildMaterials脚本将各个组件重新组合成bundle.json。然后启动ny-engine，组件面板中如期出现了TextBox组件，但将其拖动进入画布时，画布没有任何显示。但页面Schema和和组件树都正确显示。求助各位大佬，如何在画布中正确渲染v3-easyui中的各个组件？

What is your project name

v3-easyui-test

Any additional comments (optional)

No response

Issues-translate-bot commented 1 month ago

Bot detected the issue body's language is not English, translate it automatically.

Title: 🐛 [Bug]: The introduction of v3-easyui cannot render and display in the canvas

chilingling commented 1 month ago

该组件库的产物需要到注册全局组件。

import EasyUI from 'v3-easyui';
import locale from 'v3-easyui/dist/locale/easyui-lang-en'

// 需要注册到全局组件
createApp(App).use(EasyUI, {
    locale: locale
}).mount('#app');

但是 TinyEngine 画布加载组件库资源的时候，还没有创建 APP，导致报错，无法加载该组件库。

可以在控制台观察到相关报错：

Issues-translate-bot commented 1 month ago

Bot detected the issue body's language is not English, translate it automatically.

The products of this component library need to register global components.

import EasyUI from 'v3-easyui';
import locale from 'v3-easyui/dist/locale/easyui-lang-en'

// Need to register with global components
createApp(App).use(EasyUI, {
    locale: locale
}).mount('#app');

However, when the TinyEngine canvas loads the component library resources, the APP has not been created yet, resulting in an error and the component library cannot be loaded.

niffegg commented 1 month ago

这个问题我查看并跟踪了v3-easyui的源代码，发现其有一句“typeof window < "u" && window.Vue && install(window.Vue);”。在我另外部署可以正常使用v3-easyui的样例工程中，发现window.Vue的值为undefined，导致后面install函数不执行，就不会报错。在Vue的use函数中调用install函数时，则将app对象赋予window.Vue，然后v3-easyui使用window.Vue中的e.component(s.name, s);进行组件注册。而在tinyengine中，不知什么原因，window.Vue一开始就有值，不为undefined，导致后面install函数执行，该函数中试图调用window.Vue中的component方法进行组件注册-当然没有component方法，然后报错。我现在只是简单地将v3-easyui源代码中“typeof window < "u" && window.Vue && install(window.Vue);”进行了侵入式修改，增加了判断条件“typeof window < "u" && window.Vue && window.Vue.component && install(window.Vue);”。现在已经可以正常渲染v3-easyui。

niffegg commented 1 month ago

这个问题我查看并跟踪了v3-easyui的源代码，发现其有一句“typeof window < "u" && window.Vue && install(window.Vue);”。在我另外部署可以正常使用v3-easyui的样例工程中，发现window.Vue的值为undefined，导致后面install函数不执行，就不会报错。在Vue的use函数中调用install函数时，则将app对象赋予window.Vue，然后v3-easyui使用window.Vue中的e.component(s.name, s);进行组件注册。而在tinyengine中，不知什么原因，window.Vue一开始就有值，不为undefined，导致后面install函数执行，该函数中试图调用window.Vue中的component方法进行组件注册-当然没有component方法，然后报错。我现在只是简单地将v3-easyui源代码中“typeof window < "u" && window.Vue && install(window.Vue);”进行了侵入式修改，增加了判断条件“typeof window < "u" && window.Vue && window.Vue.component && install(window.Vue);”。现在已经可以正常渲染v3-easyui。

------------------ 原始邮件 ------------------ 发件人: "opentiny/tiny-engine" @.>; 发送时间: 2024年10月21日(星期一) 晚上8:30 @.>; @.**@.>; 主题: Re: [opentiny/tiny-engine] 🐛 [Bug]: 引入v3-easyui在画布中无法渲染显示 (Issue #865)

该组件库的产物需要到注册全局组件。 import EasyUI from 'v3-easyui'; import locale from 'v3-easyui/dist/locale/easyui-lang-en' // 需要注册到全局组件 createApp(App).use(EasyUI, { locale: locale }).mount('#app');
但是 TinyEngine 画布加载组件库资源的时候，还没有创建 APP，导致报错，无法加载该组件库。

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

opentiny / tiny-engine