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

[niffegg]

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/[email protected]/dist/v3-easyui.js",
"css": "https://unpkg.com/[email protected]/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]

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]

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

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]

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]

这个问题我查看并跟踪了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]

这个问题我查看并跟踪了v3-easyui的源代码，发现其有一句“typeof window < "u" &amp;&amp; window.Vue &amp;&amp; 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" &amp;&amp; window.Vue &amp;&amp; install(window.Vue);”进行了侵入式修改，增加了判断条件“typeof window < "u" &amp;&amp; window.Vue &amp;&amp; window.Vue.component &amp;&amp; install(window.Vue);”。现在已经可以正常渲染v3-easyui。

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "opentiny/tiny-engine" ***@***.***&gt;; 发送时间:&nbsp;2024年10月21日(星期一) 晚上8:30 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;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: ***@***.***&gt;