tiny-engine
tiny-engine copied to clipboard
opentiny
🐛 [Bug]: 物料配置默认导出的独立组件时，将组件拖拽到画布编辑区提示”加载失败“，但在预览页面正常显示
Environment
win11 chrome
Version
v18.20.4
Version
3.20.0
Link to minimal reproduction
无直接链接
Step to reproduce
目标组件： @qiun/vue-ucharts
<qiun-vue-ucharts
type="line"
class="component-base-style"
:chartData="chartData"
></qiun-vue-ucharts>
.....
<script>
// 该独立组件为默认导出的使用方式
import QiunVueUcharts from "@qiun/vue-ucharts";
</script>
复现物料配置：
{
"version": "2.5.0",
"icon": "chart",
"name": {
"zh_CN": "图表组件"
},
"component": "QiunVueUcharts",
"description": "uCharts 是一款基于 canvas API 开发的适用于所有前端应用的图表库",
"docUrl": "https://www.ucharts.cn/v2/#/guide/index",
"screenshot": "",
"tags": "",
"keywords": "",
"devMode": "proCode",
"npm": {
"package": "@qiun/vue-ucharts",
"exportName": "QiunVueUcharts",
"destructuring": false
},
"group": "component",
"schema": {
"properties": [
{
"label": {
"zh_CN": "基础属性"
},
"description": {
"zh_CN": "基础属性"
},
"content": [
{
"property": "type",
"label": {
"zh_CN": "图表类型"
},
"type": "string",
"defaultValue": "line",
"required": true,
"widget": {
"component": "SelectConfigurator",
"props": {
"options": [
{ "label": "折线图", "value": "line" },
{ "label": "柱状图", "value": "column" },
{ "label": "区域图", "value": "area" },
{ "label": "饼图", "value": "pie" },
{ "label": "圆环图", "value": "ring" },
{ "label": "散点图", "value": "scatter" },
{ "label": "雷达图", "value": "radar" },
{ "label": "漏斗图", "value": "funnel" }
]
}
}
},
{
"property": "chartData",
"label": {
"text": {
"zh_CN": "图表数据"
}
},
"type": "object",
"widget": {
"component": "MetaCodeEditor"
},
"description": {
"zh_CN": "图表数据，类似 ECharts 的数据格式，详见下面《标准数据格式》章节。"
}
},
{
"property": "opts",
"label": {
"text": {
"zh_CN": "图表配置参数"
}
},
"type": "object",
"widget": {
"component": "MetaCodeEditor"
},
"description": {
"zh_CN": "uCharts图表配置参数(option)，详见【组件文档】。注：传入的opts属性会覆盖默认config-ucharts.js中的配置，只需传入与config-ucharts.js中属性不一致的【某一个属性】即可实现【同类型的图表显示不同的样式】。"
}
}
]
}
],
"events": {}
},
"configure": {
"loop": false,
"condition": true,
"styles": false,
"isContainer": true,
"clickCapture": true,
"isModal": false,
"isNullNode": false,
"isLayout": false,
"rootSelector": ""
},
"snippets": [
{
"name": {
"zh_CN": "图表组件"
},
"isMobile": true,
"icon": "chart",
"screenshot": "",
"snippetName": "QiunVueUcharts",
"schema": {
"componentName": "QiunVueUcharts",
"props": {
"type": "line",
"chartData": {
"categories": [
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021"
],
"series": [
{
"name": "目标值",
"data": [35, 36, 31, 33, 13, 34, 35, 36, 31, 33, 13, 34]
},
{
"name": "完成量",
"data": [18, 27, 21, 24, 6, 28, 18, 27, 21, 24, 6, 28]
}
]
},
"opts": {
"legend": {
"show": false
},
"padding": [10, 0, 0, 0],
"dataLabel": false,
"dataPointShapeType": "hollow",
"yAxis": { "data": [{ "fontColor": "#cccccc" }] },
"update": true,
"enableScroll": true,
"scrollAlign": "left",
"xAxis": {
"fontColor": "#cccccc",
"itemCount": 6,
"scrollShow": true
},
"extra": { "line": { "type": "curve", "width": "3" } }
}
}
}
}
],
"category": "图表"
}
What is expected
预期是 画布编辑正常显示，预览&出码正常显示
What is actually happening
画布编辑提示加载失败，预览&出码正常
What is your project name
tinyEngine
Any additional comments (optional)
在后续的调试中，修改 destructuring ，exportName 均无效。最后将这个第三方组件 二次封装成 非默认导出的包才能正常通过物料配置编辑，希望能兼容这个 默认导出的单组件场景
Bot detected the issue body's language is not English, translate it automatically.
Title: 🐛 [Bug]: When the material configures the independent component exported by default, drag the component to the canvas editing area and prompts "Loading failed", but it is displayed normally on the preview page.
Environment
win11 chrome
Version
v18.20.4
Version
3.20.0
Link to minimum reproduction
No direct link
Step to reproduce
Target component: @qiun/vue-ucharts
<qiun-vue-ucharts
type="line"
class="component-base-style"
:chartData="chartData"
>/qiun-vue-ucharts>
.....
<script>
// This independent component is the default export method
import QiunVueUcharts from "@qiun/vue-ucharts";
</script>
Reproduced material configuration:
{
"version": "2.5.0",
"icon": "chart",
"name": {
"zh_CN": "Chart Component"
},
"component": "QiunVueUcharts",
"description": "uCharts is a chart library for all front-end applications developed based on the canvas API",
"docUrl": "https://www.ucharts.cn/v2/#/guide/index",
"screenshot": "",
"tags": "",
"keywords": "",
"devMode": "proCode",
"npm": {
"package": "@qiun/vue-ucharts",
"exportName": "QiunVueUcharts",
"destructuring": false
},
"group": "component",
"schema": {
"properties": [
{
"label": {
"zh_CN": "Basic Properties"
},
"description": {
"zh_CN": "Basic Properties"
},
"content": [
{
"property": "type",
"label": {
"zh_CN": "Chart Type"
},
"type": "string",
"defaultValue": "line",
"required": true,
"widget": {
"component": "SelectConfigurator",
"props": {
"options": [
{ "label": "line chart", "value": "line" },
{ "label": "bar chart", "value": "column" },
{ "label": "area map", "value": "area" },
{ "label": "pie chart", "value": "pie" },
{ "label": "ring diagram", "value": "ring" },
{ "label": "scatter", "value": "scatter" },
{ "label": "radar map", "value": "radar" },
{ "label": "funnel diagram", "value": "funnel" }
]
}
}
},
{
"property": "chartData",
"label": {
"text": {
"zh_CN": "Chart data"
}
},
"type": "object",
"widget": {
"component": "MetaCodeEditor"
},
"description": {
"zh_CN": "Class data, a data format similar to ECharts, see the following chapter of "Standard Data Formats" for details."
}
},
{
"property": "opts",
"label": {
"text": {
"zh_CN": "Chart configuration parameters"
}
},
"type": "object",
"widget": {
"component": "MetaCodeEditor"
},
"description": {
"zh_CN": "uCharts chart configuration parameters (option), see [Component Document] for details. Note: The passed opts attribute will override the configuration in the default config-ucharts.js. Just pass in [a certain attribute] that is inconsistent with the attribute in config-ucharts.js to achieve [a different style of chart display]."
}
}
]
}
],
"events": {}
},
"configure": {
"loop": false,
"condition": true,
"styles": false,
"isContainer": true,
"clickCapture": true,
"isModal": false,
"isNullNode": false,
"isLayout": false,
"rootSelector": ""
},
"snippets": [
{
"name": {
"zh_CN": "Chart Component"
},
"isMobile": true,
"icon": "chart",
"screenshot": "",
"snippetName": "QiunVueUcharts",
"schema": {
"componentName": "QiunVueUcharts",
"props": {
"type": "line",
"chartData": {
"categories": [
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021"
],
"series": [
{
"name": "Target value",
"data": [35, 36, 31, 33, 13, 34, 35, 36, 31, 33, 13, 34]
},
{
"name": "Complete amount",
"data": [18, 27, 21, 24, 6, 28, 18, 27, 21, 24, 6, 28]
}
]
},
"opts": {
"legend": {
"show": false
},
"padding": [10, 0, 0, 0],
"dataLabel": false,
"dataPointShapeType": "hollow",
"yAxis": { "data": [{ "fontColor": "#cccccc" }] },
"update": true,
"enableScroll": true,
"scrollAlign": "left",
"xAxis": {
"fontColor": "#cccccc",
"itemCount": 6,
"scrollShow": true
},
"extra": { "line": { "type": "curve", "width": "3" } }
}
}
}
}
],
"category": "chart"
}
What is expected
Expected to be the normal display of canvas editing, preview & code output display
What is actually happening
Canvas editing prompts loading failed, preview & code output is normal
What is your project name
tinyEngine
Any additional comments (optional)
In subsequent debugging, modifying destructuring and exportName are invalid. Finally, this third-party component is packaged into a package that is not exported by default. Only by editing it normally through material configuration, hoping to be compatible with this single-component scenario
需要兼容默认导出的的组件库。
https://github.com/opentiny/tiny-engine/blob/f693484d42656ebf994162d1a5df8035d0118b73/packages/canvas/common/src/utils.ts#L90-L100
