@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/upload-button/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div
+    class="upload-button"
+    :style="{ 'pointer-events': readOnly ? 'none' : 'auto' }"
+  >
+    <el-upload
+      :show-file-list="false"
+      :on-change="onUploadChange"
+      :auto-upload="false"
+      :accept="accept"
+      v-if="!modelValue"
+    >
+      <div class="button-box">
+        <span>点击上传</span>
+      </div>
+    </el-upload>
+
+    <div v-else class="image-box">
+      <div class="image-box-1">
+        <img :src="modelValue" width="115" />
+        <span class="del-text" @click="handleDelete">删除</span>
+        <div class="mask"></div>
+      </div>
+
+      <el-upload
+        :show-file-list="false"
+        :on-change="onUploadChange"
+        :auto-upload="false"
+        :accept="accept"
+      >
+        <span>{{ title }}</span>
+      </el-upload>
+    </div>
+    <div v-if="description" class="description">
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref, watch } from 'vue';
+
+export default defineComponent({
+  name: 'UploadButton',
+  emits: ['change', 'fileUpload'],
+  props: {
+    // 图片url
+    modelValue: String,
+    title: {
+      type: String,
+      default: '替换背景',
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+    accept: {
+      type: String,
+      default: '.png,.jpg,.jpeg,.PNG,.JPG,.JPEG,.webp,.gif',
+    },
+    description: String,
+  },
+  setup(props, { emit }) {
+    const done = val => {
+      let res = null;
+      // 如果回调返回的是一个数组,则取第一张图片
+      if (Array.isArray(val)) {
+        if (val.length) {
+          res = val[0];
+        }
+      } else res = val;
+      emit('change', res);
+    };
+    const handleDelete = () => {
+      emit('change', null);
+    };
+
+    const onUploadChange = (file, fileList) => {
+      if (file?.status === 'ready') {
+        // done 上传文件的回调, 在外部上传完图片通过done回调上传结果
+        emit('fileUpload', file, done);
+      }
+    };
+    return { handleDelete, onUploadChange };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.upload-button {
+  .button-box {
+    border-radius: 4px;
+    border: 1px dashed #d8dce6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 161px;
+    height: 40px;
+
+    span {
+      color: #4b515e;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+    }
+    &:hover {
+      border-color: #c79156;
+      background-color: #f9e7d3;
+      cursor: pointer;
+    }
+    &::before {
+      content: '';
+      display: block;
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+      background-repeat: no-repeat;
+      object-fit: cover;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNSAxNS45NzI1QzE3LjI1IDE1LjcyMzggMTkgMTMuODE2MyAxOSAxMS41QzE5IDkuNDM1NTMgMTcuNjA5OCA3LjY5NTc2IDE1LjcxNDUgNy4xNjU3OUMxNC45Mzk0IDQuNzQ5MjEgMTIuNjc0IDMgMTAgM0M3LjMyNjAyIDMgNS4wNjA1OSA0Ljc0OTIxIDQuMjg1NTQgNy4xNjU3OUMyLjM5MDIxIDcuNjk1NzYgMSA5LjQzNTUzIDEgMTEuNUMxIDEzLjgxNjMgMi43NTAwMiAxNS43MjM4IDUgMTUuOTcyNVYxNkg1LjVIMTQuNUgxNVYxNS45NzI1WiIgZmlsbD0iI0ZBRjNFRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDMuNUM3LjU0OTg0IDMuNSA1LjQ3MjY4IDUuMTAyNDkgNC43NjIxMiA3LjMxODM0TDQuNjc5OSA3LjU3NDcyTDQuNDIwNiA3LjY0NzJDMi43MzU0MSA4LjExODIyIDEuNSA5LjY2NTQ4IDEuNSAxMS41QzEuNSAxMy43MDkxIDMuMjkwODYgMTUuNSA1LjUgMTUuNVYxNi41QzIuNzM4NTggMTYuNSAwLjUgMTQuMjYxNCAwLjUgMTEuNUMwLjUgOS4yOTkxNiAxLjkyMTU1IDcuNDMxNTMgMy44OTU3IDYuNzYzMDhDNC44MDczMiA0LjI3NTUzIDcuMTk1NzEgMi41IDEwIDIuNUMxMi44MDQzIDIuNSAxNS4xOTI3IDQuMjc1NTYgMTYuMTA0NSA2Ljc2MjYzQzE4LjA3ODQgNy40MzE1MyAxOS41IDkuMjk5MTEgMTkuNSAxMS41QzE5LjUgMTQuMjYxNCAxNy4yNjE0IDE2LjUgMTQuNSAxNi41VjE1LjVDMTYuNzA5MSAxNS41IDE4LjUgMTMuNzA5MSAxOC41IDExLjVDMTguNSA5LjY2NTQ5IDE3LjI2NDYgOC4xMTgxNSAxNS41Nzk1IDcuNjQ2NjVMMTUuMzIwNCA3LjU3NDEzTDE1LjIzODIgNy4zMTc4OUMxNC41Mjc0IDUuMTAyNTEgMTIuNDUwMiAzLjUgMTAgMy41WiIgZmlsbD0iI0M3OTE1NiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjc0MjYgOC43MDczM0wxMy41NzExIDExLjUzNThMMTIuODYzOSAxMi4yNDI5TDEwLjAzNTUgOS40MTQ0M0w3LjIwNzEgMTIuMjQyOUw2LjQ5OTk5IDExLjUzNThMOS4zMjg0MiA4LjcwNzMzTDkuNjgxOTcgOC4zNTM3N0M5Ljg3NzIzIDguMTU4NTEgMTAuMTkzOCA4LjE1ODUxIDEwLjM4OTEgOC4zNTM3N0wxMC43NDI2IDguNzA3MzNaIiBmaWxsPSIjQzc5MTU2Ii8+CjxyZWN0IHg9IjkuNSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iOCIgZmlsbD0iI0M3OTE1NiIvPgo8L3N2Zz4K');
+    }
+  }
+  .image-box {
+    border-radius: 4px;
+    background-color: rgba(216, 220, 230, 0.4);
+    padding: 6px 27px 6px 18px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 60px;
+    position: relative;
+
+    span {
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      /* identical to box height */
+
+      color: #4b515e;
+
+      opacity: 0.6;
+
+      &:hover {
+        color: #c79156;
+        cursor: pointer;
+      }
+    }
+  }
+  .image-box-1 {
+    height: 100%;
+    width: 115px;
+    position: relative;
+    img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: 100%;
+      object-fit: contain;
+    }
+    .del-text {
+      font-weight: 400;
+      font-size: 9px;
+      line-height: 13px;
+      color: #fff;
+      position: absolute;
+      top: 3px;
+      right: 6px;
+      opacity: 0;
+    }
+  }
+
+  .image-box-1:hover {
+    .mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.59);
+      z-index: 2;
+      border-radius: 4px;
+    }
+    .del-text {
+      opacity: 1;
+      z-index: 3;
+    }
+  }
+  .description {
+    display: block;
+    font-size: 12px;
+    color: #86909c;
+    line-height: 20px;
+    margin-top: 5px;
+  }
+}
+</style>

package/src/createScemaField.ts

@@ -0,0 +1,14 @@
+import { createSchemaField } from '@formily/vue';
+import * as formilyComponent from './components';
+
+/**
+ *  生成SchemaField
+ * @returns
+ */
+export default function () {
+  // 执行了 Vue.use(JvFormily) window.__jt_formily_components 会记录下这些组件列表, 否则读取Formily库的组件列表
+  const components = window.__jt_formily_components
+    ? window.__jt_formily_components
+    : formilyComponent;
+  return createSchemaField({ components }).SchemaField;
+}

package/src/index.ts

@@ -0,0 +1,41 @@
+import VueForm from './vue-form/index.vue';
+import {createField} from './schema-field';
+import VueKonva from 'vue-konva';
+import { FormilyValidate } from './validate'
+export * from './typings/common';
+export { VueForm, createField, FormilyValidate };
+import { HotArea, AnyOf } from './components'
+export * from './components/__builtins__';
+
+declare global {
+  interface Window{
+    __jt_formily_components: any;
+    JT_VERSION: Record<string, string>;
+  }
+}
+
+
+
+window.JT_VERSION = Object.assign(
+    {
+        '__rollup__name__@__rollup__version__': '__rollup__date__',
+    },
+    window.JT_VERSION
+);
+
+export default {
+  install(app,options){
+    console.log("🚀formily install")
+
+    const  expandComponents  = options?.expandComponents ?? {}
+   const SchemaField =  createField({ HotArea , AnyOf , ...expandComponents});
+
+    /** 热区编辑组件 */
+    app.use(VueKonva);
+
+    app.component('SchemaField',SchemaField);
+    /** ElementPlus */
+    // app.use(ElementPlus);
+    app.component('VueForm',VueForm)
+  }
+}

package/src/schema-field/index.ts

@@ -0,0 +1,11 @@
+import { createSchemaField } from '@formily/vue';
+import * as formilyComponent from '../components/index';
+/** 创建createField
+ *  @expandComponents 扩展组件
+ */
+export function createField(expandComponents: any = {}) {
+  const components = Object.assign({}, formilyComponent, expandComponents);
+  //@ts-ignore
+  window.__jt_formily_components = components;
+  return createSchemaField({ components }).SchemaField;
+}

package/src/scope.ts

@@ -0,0 +1,29 @@
+import { Field } from '@formily/core';
+
+export function middlewareFilter(field: Field, values) {
+  const options = field?.componentProps?.options || [];
+  // 中间件名称
+  const middlewareNames = [];
+  // 后面是处理在页面上的场景
+  const data =
+    field?.form?.values?.middlewares || field?.form?.values?.event?.middlewares || [];
+
+  if (Array.isArray(data)) {
+    data.forEach(it => {
+      if (it?.name) {
+        middlewareNames.push(it.name);
+      }
+    });
+  }
+  if (options.length) {
+    const res = [];
+    options.forEach(item => {
+      if (middlewareNames.includes(item.value)) {
+        res.push({ ...item, disabled: true });
+      } else {
+        res.push({ ...item, disabled: false });
+      }
+    });
+    field.setComponentProps({ options: res });
+  }
+}

package/src/transform/core.ts

@@ -0,0 +1,404 @@
+import { isEqual } from 'lodash-es';
+import { TransformCoreState } from '../typings/common';
+import {
+    COMMON_KEYS,
+    COMPONENT_MAP,
+    FIELD_KEYS,
+    FIELD_MAP,
+    FORMILY_EXPAND_KEYS,
+    FORMILY_KEYS,
+    UniqueType,
+} from './utils/constant';
+import {
+    emitEnum,
+    getComponentName,
+    getXData,
+    isAnyOf,
+    isOneOf,
+    oneOfTransformEnum,
+    simpleGenerationSchemaItem,
+} from './utils/func';
+import { isSchemaConfig } from '../utils/common';
+
+/**
+ *  Formily 配置转换Core
+ */
+export class TransformCore {
+    private existGroup:boolean = false;
+    private state: TransformCoreState = { schema: null, ctx: null, group: false }
+    constructor(state: TransformCoreState) {
+        this.state = Object.assign({}, this.state, state ?? {});
+    }
+
+    get existEvent(){
+        return this.state.schema.properties?.event && !isEqual(this.state.schema.properties?.event,{}) && !isEqual(this.state.schema.properties?.event?.properties,{})
+    }
+
+    compile() {
+        const result: any = this.compileItem(this.state.schema);
+
+        // 判断schema 里面是否存在自定义布局
+        if(!this.existGroup && this.state?.group){
+             // 自定义布局
+            const groupConfig = {
+                _group1:{
+                    type:'void',
+                    'x-decorator': 'LayoutGroup',
+                    'x-decorator-props':{
+                        title:'基础配置'
+                    },
+                    properties:{
+                        props: result?.properties?.props,
+                        style:result?.properties?.style
+                    }
+                }
+            }
+            // 是否存在自定义事件布局
+            if(this.existEvent){
+                groupConfig['_group2']={
+                    type:'void',
+                    'x-decorator': 'LayoutGroup',
+                    'x-decorator-props':{
+                        title:''
+                    },
+                    properties:{
+                        event: result?.properties?.event,
+                    }
+                }
+            }
+            return {
+                type: 'object',
+                properties:{
+                    ...groupConfig
+                }
+            }
+        }
+        // 走默认分组
+        return result;
+    }
+    // 编译item(字段)  🚀例如:input:{type:'string',default:''}
+    compileItem(data: any) {
+        // 防止错误格式数据,返回{}做兼容
+        if (!data || isEqual(data,{})) {
+            return {};
+        }
+        let result: any = {};
+        for (const key in data) {
+
+           
+
+            if (key === 'properties') {
+                result[key] = this.compileProperties(
+                    data[key],
+                    data['required'] ?? []
+                );
+                return result;
+            }
+            if (key === 'items') {
+              if('format' in data && data['format'] === 'date-time'){
+                  result[key] = data[key]
+              }else{
+                result = Object.assign(
+                    {},
+                    result,
+                    this.compileItems(data[key])
+                );
+              }
+            }
+            // 对formily协议的字段保持原封不动
+            if (FORMILY_KEYS.includes(key) || key.indexOf('x-') !== -1 || FORMILY_EXPAND_KEYS.includes(key)) {
+                result[key] = data[key];
+            } else if (key.indexOf('ui:') !== -1) {
+              // 处理 VJSF ui:xxxx 字段
+                if (key === 'ui:options') {
+                    if (data['ui:widget'] === 'hot-area' && 'event' in data['ui:options']) {
+                        data['ui:options'].options = data['ui:options'].event?.properties?.list?.items?.properties?.handler?.properties?.name?.enum;
+                        data['ui:options'].event = JSON.stringify(data['ui:options'].event);
+                    }
+                    this.setComponentProps(result, { ...data['ui:options'] });
+                } else if (key === 'ui:hidden') {
+                    result['x-hidden'] = data[key];
+                }
+            }
+            if (key === 'unique') {
+                result[key] = data[key];
+            }
+        }
+        // 处理enum
+        if ('enum' in data) {
+            result['enum'] = emitEnum(data['enum'], data['enumNames'] ?? []);
+        }
+        // 处理 x-component
+        if (!result['x-component']) {
+            result['x-component'] = getComponentName(data);
+
+        }
+
+        // 处理 x-decorator
+        if(!data['x-decorator'] && data['type']!== 'void'){
+            result['x-decorator'] = 'FormItem';
+        }
+
+        // 处理oneOf
+        if (isOneOf(data)) {
+            this.setComponentProps(result, {
+                list: '[]', // 初始为空
+                title: data.title,
+            });
+            result['title'] = '';
+        }
+        // 处理 anyOf
+        if (isAnyOf(data)) {
+            this.setComponentProps(result, {
+                list: JSON.stringify(data.anyOf ?? []),
+                title: data.title,
+                '@fileUpload': (file, done) => {
+                    this.state.ctx.emit('fileUpload', file, done);
+                },
+            });
+            result['title'] = '';
+
+            // 设置anyof 为必填项
+            result['required'] = result['required'] ?? true;
+        }
+
+        //处理Title 并且把FormItem装饰器去掉
+        // todo 去掉x-decorator跟布局有关
+        if (['HotArea','CloudButton','InformationConfig','Qa'].includes(result['x-component'])) {
+            result['title'] = '';
+            result['x-decorator'] =  null;
+        }
+        // 处理 format 额外参数
+        // if (data['format']) {
+        //     if (data['format'] === 'color') {
+        //         this.setComponentProps(result, { inputType: 'color' });
+        //     }
+        // }
+        // if (data['ui:widget'] && data['ui:widget'] === 'el-color-picker') {
+        //     this.setComponentProps(result, { inputType: 'color' });
+        // }
+        // 处理FormItem布局
+        this.setDecoratorProps(result);
+        // Event
+        this.setComponentProps(result, this.compileEvent(data));
+
+        if (result['x-component'] === 'Select') {
+            this.setComponentProps(result, { options: result['enum'] ?? [] });
+
+            // 如果不存在title 存在 inlineTitle 就设置prefix
+            if(!data['title'] && !!data?.inlineTitle){
+              this.setComponentProps(result,{ prefix: data?.inlineTitle})
+            }
+        }
+        else if(result['x-component']==='UploadButton'){
+            if(result['title']&&result['title'].indexOf('背景图片')=== -1){
+              this.setComponentProps(result, { title:'替换图片' });
+            }
+        }
+        return result;
+    }
+    // 编译 items字段
+    compileItems(data: any) {
+        // 如果items 存在 OneOf 直接编译成Select
+        if (isOneOf(data)) {
+            return {
+                enum: oneOfTransformEnum(data.oneOf),
+                'x-component': 'Select',
+                'x-component-props': {
+                    'value-key': 'name',
+                    multiple: true,
+                    'collapse-tags': true,
+                },
+                'x-decorator': 'FormItem',
+            };
+        }
+        // 不存在properties, 说明是非对象数组
+      const xData = getXData(data) || {};
+        if (!('properties' in data)) {
+            // 不存在properties
+            return {
+                items: {
+                    // properties: {
+                    //     input1: { ...simpleGenerationSchemaItem(data) },
+                    // },
+                    // type: 'void',
+                    ...simpleGenerationSchemaItem(data)
+                },
+                properties: {
+                    add: {
+                        type: 'void',
+                        title:xData?.addButtonTitle ? xData?.addButtonTitle : '添加条目',
+                        'x-component': 'ArrayItems.Addition',
+                        'x-component-props': {
+                          type: xData?.addButtonType || 'primary',
+                          size: xData?.addButtonSize || 'default',
+                          plain: xData?.addButtonPlain || false,
+                        },
+                    },
+                },
+            };
+        }
+        // 处理对象数组
+        const result: any = {};
+
+        for (const key in data) {
+            if (key === 'properties') {
+                result[key] = this.compileProperties(
+                    data[key],
+                    data['required'] ?? []
+                );
+            }
+            if (COMMON_KEYS.includes(key)) {
+                result[key] = data[key];
+            }
+            if (FIELD_KEYS.includes(key)) {
+                result[FIELD_MAP[key]] = data[key];
+            }
+        }
+        if(!result?.type){
+          result['type'] = 'object'
+        }
+        if (!result?.required) {
+          result['required'] = data['required']
+        }
+        const listRes: any = { items: { ...result } };
+        // if (data['properties']) {
+        listRes['properties'] = {
+            add: {
+                type: 'void',
+                title: getXData(data)?.addButtonTitle ? getXData(data)?.addButtonTitle : '添加条目',
+                'x-component': 'ArrayItems.Addition',
+                'x-component-props':{
+                  type: getXData(data)?.addButtonType || 'primary',
+                  size: getXData(data)?.addButtonSize || 'default',
+                  plain: getXData(data)?.addButtonPlain || false,
+                },
+            },
+        };
+        // }
+
+        return listRes;
+    }
+    // 编译Properties
+    compileProperties(data: any, requireds: string[]) {
+        let result: any = {};
+        // Properties 是 item 的集合, 循环去编译item就可以
+        for (const key in data) {
+            if(!isSchemaConfig(data[key])){
+                result[key] = data[key]
+            } else if (key === 'event' && data[key]?.properties?.list) {
+                result[key] = {
+                    type: 'object',
+                    'x-component': 'Event',
+                    'x-component-props': {
+                        schema: JSON.stringify(data[key]?.properties ?? {}),
+                        options: data[key]?.properties?.list?.items?.properties?.handler?.properties?.name?.enum,
+                        ...this.compileEvent(data,'Event')
+                    },
+                };
+            } else {
+                // 编译properties的每一个item
+                result[key] = this.compileItem(data[key]);
+                // 如果是必填项,添加必填的属性
+                if (Array.isArray(requireds) && requireds.includes(key)) {
+                    result[key]['required'] = true;
+                }
+                // 埋点添加unique
+                if(key === 'buryReportName'){
+                    result[key]['unique'] = UniqueType.page;
+                    result[key]['required']= true;
+                }
+            }
+            if(key.indexOf('group') > -1){
+                this.existGroup = true;
+            }
+        }
+        return result;
+    }
+
+    /** 编译自定义组件事件(非双向数据绑定事件),
+     *  */
+   compileEvent(data: any, componentName?:string) {
+        const _componentName: String = componentName || getComponentName(data);
+        // todo 这里将来要优化一下，直接在组件内部将事件抛到最外层,现在要一层一层的透传出去
+        // 处理公共事件
+        const result = {};
+        result['@getData'] = (cmdname:string, done:any,cmdParams)=>{
+            this.state.ctx.emit('getData',cmdname,done,cmdParams);
+        }
+        // 处理不同组件的事件
+        switch (_componentName) {
+            case 'Event':
+              result['@fileUpload']=(file,done,config)=>{
+                // Event事件也要往外抛
+                this.state.ctx.emit('fileUpload',file,done,config);
+              }
+              break;
+            case 'AnyOf':
+                result['@fileUpload']=(file,done,config)=>{
+                    // Anyof事件也要往外抛
+                    this.state.ctx.emit('fileUpload',file,done,config);
+                }
+                break;
+            case COMPONENT_MAP.UploadWidget:
+                result['@fileUpload']=(file: any, done: any) => {
+                    this.state.ctx.emit('fileUpload',file,done,data);
+                    if (this.state.ctx.type?.name === 'HotArea') {
+                        this.state.ctx?.exposed?.getUploadImageUrl(file,done);
+                    }
+                }
+                break;
+            case 'CloudButton':
+                result['@openCloud']=(params,done) => {
+                    this.state.ctx.emit('openCloud',{ data: params, config: data },done);
+                }
+                result['@preload']=(url)=>{
+                    this.state.ctx.emit('preloadCloud',url);
+                }
+        }
+        return result;
+    }
+    // 设置包装器的参数
+    setDecoratorProps(data: any) {
+        let decoratorProps: any = {};
+        if (data['x-component'] === 'Switch') {
+            decoratorProps['wrapperAlign'] = 'right';
+            decoratorProps['labelAlign'] = 'left';
+        } else {
+            decoratorProps['layout'] = data?.['x-decorator-props']?.layout || this.state.layout || 'vertical';
+            decoratorProps['labelAlign'] = 'left';
+            decoratorProps['labelWrap'] = true;
+        }
+
+        if (data?.description) {
+            if (data['x-component'] === 'Input') {
+                this.setComponentProps(data,{ toolTip: data['description']})
+            } else {
+                decoratorProps['tooltip'] = data['description'];
+            }
+            delete data['description'];
+        }
+        // 显示星号
+        if('asterisk' in data && data['asterisk']){
+          decoratorProps['asterisk'] = true
+        }
+
+        data['x-decorator-props'] = Object.assign(
+            {},
+            data['x-decorator-props'] ?? {},
+            decoratorProps
+        );
+    }
+    // 设置组件的参数
+    setComponentProps(data: any, _props: any = {}) {
+        const componentProps: any = {};
+        for (const key in _props) {
+            componentProps[key] = _props[key];
+        }
+        data['x-component-props'] = Object.assign(
+            {},
+            data['x-component-props'] ?? {},
+            componentProps
+        );
+    }
+}