fix(ui,runtime): 组件注册默认以magic-ui-xx的形式，不再需要在组件中设置name

fix #291
Tencent · Aug 19, 2022 · de38035 · de38035
1 parent 143bded
commit de38035
Show file tree

Hide file tree

Showing 20 changed files with 7 additions and 32 deletions.
diff --git a/packages/ui-vue2/src/Component.vue b/packages/ui-vue2/src/Component.vue
@@ -17,8 +17,6 @@ import { MComponent } from '@tmagic/schema';
 import { toLine } from '@tmagic/utils';
 
 export default defineComponent({
-  name: 'magic-ui-component',
-
   props: {
     config: {
       type: Object as PropType<MComponent>,

diff --git a/packages/ui-vue2/src/button/Button.vue b/packages/ui-vue2/src/button/Button.vue
@@ -13,7 +13,6 @@ import type { MComponent } from '@tmagic/schema';
 import useApp from '../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-button',
   props: {
     config: {
       type: Object as PropType<MComponent>,

diff --git a/packages/ui-vue2/src/container/Container.vue b/packages/ui-vue2/src/container/Container.vue
@@ -20,8 +20,6 @@ import useApp from '../useApp';
 import useCommonMethod from '../useCommonMethod';
 
 export default defineComponent({
-  name: 'magic-ui-container',
-
   components: {
     'magic-ui-component': Component,
   },

diff --git a/packages/ui-vue2/src/img/src/index.vue b/packages/ui-vue2/src/img/src/index.vue
@@ -7,7 +7,6 @@ import { defineComponent } from 'vue';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-img',
   props: {
     config: {
       type: Object,

diff --git a/packages/ui-vue2/src/overlay/src/index.vue b/packages/ui-vue2/src/overlay/src/index.vue
@@ -12,7 +12,6 @@ import type { MNode } from '@tmagic/schema';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-overlay',
   props: {
     config: {
       type: Object,

diff --git a/packages/ui-vue2/src/page/Page.vue b/packages/ui-vue2/src/page/Page.vue
@@ -18,8 +18,6 @@ import Component from '../Component.vue';
 import useApp from '../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-page',
-
   components: {
     'magic-ui-component': Component,
   },

diff --git a/packages/ui-vue2/src/qrcode/src/index.vue b/packages/ui-vue2/src/qrcode/src/index.vue
@@ -9,8 +9,6 @@ import QRCode from 'qrcode';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-qrcode',
-
   props: {
     config: {
       type: Object,

diff --git a/packages/ui-vue2/src/text/Text.vue b/packages/ui-vue2/src/text/Text.vue
@@ -6,8 +6,6 @@ import type { MComponent } from '@tmagic/schema';
 import useApp from '../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-text',
-
   props: {
     config: {
       type: Object as PropType<MComponent>,

diff --git a/packages/ui/src/Component.vue b/packages/ui/src/Component.vue
@@ -16,8 +16,6 @@ import Core from '@tmagic/core';
 import { toLine } from '@tmagic/utils';
 
 export default defineComponent({
-  name: 'magic-ui-component',
-
   props: {
     config: {
       type: Object,

diff --git a/packages/ui/src/button/src/index.vue b/packages/ui/src/button/src/index.vue
@@ -12,7 +12,6 @@ import { MButton, MButtonInstance, MText } from '../../../src/types';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-button',
   props: {
     config: {
       type: Object as PropType<MButton>,

diff --git a/packages/ui/src/container/src/Container.vue b/packages/ui/src/container/src/Container.vue
@@ -20,8 +20,6 @@ import useApp from '../../useApp';
 import useCommonMethod from '../../useCommonMethod';
 
 export default defineComponent({
-  name: 'magic-ui-container',
-
   components: {
     'magic-ui-component': Component,
   },

diff --git a/packages/ui/src/img/src/index.vue b/packages/ui/src/img/src/index.vue
@@ -8,7 +8,6 @@ import { MImg } from '../../types';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-img',
   props: {
     config: {
       type: Object as PropType<MImg>,

diff --git a/packages/ui/src/overlay/src/index.vue b/packages/ui/src/overlay/src/index.vue
@@ -12,7 +12,6 @@ import type { MNode } from '@tmagic/schema';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-overlay',
   props: {
     config: {
       type: Object,

diff --git a/packages/ui/src/page/src/index.vue b/packages/ui/src/page/src/index.vue
@@ -18,8 +18,6 @@ import Component from '../../Component.vue';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-page',
-
   components: {
     'magic-ui-component': Component,
   },

diff --git a/packages/ui/src/qrcode/src/index.vue b/packages/ui/src/qrcode/src/index.vue
@@ -10,8 +10,6 @@ import { MQrcode } from '../../types';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-qrcode',
-
   props: {
     config: {
       type: Object as PropType<MQrcode>,

diff --git a/packages/ui/src/text/src/index.vue b/packages/ui/src/text/src/index.vue
@@ -5,7 +5,6 @@ import { MComponentInstance, MText, MTextInstance } from '../../../src/types';
 import useApp from '../../useApp';
 
 export default defineComponent({
-  name: 'magic-ui-text',
   props: {
     config: {
       type: Object as PropType<MText>,

diff --git a/runtime/vue2/page/main.ts b/runtime/vue2/page/main.ts
@@ -37,7 +37,7 @@ const app = new Core({
 
 Object.keys(components).forEach((type: string) => {
   const component = components[type];
-  Vue.component(component.name, component);
+  Vue.component(`magic-ui-${type}`, component);
   app.registerComponent(type, component);
 });
 

diff --git a/runtime/vue2/playground/main.ts b/runtime/vue2/playground/main.ts
@@ -21,8 +21,8 @@ import Vue from 'vue';
 import App from './App.vue';
 
 Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
-  Object.values(components.default).forEach((component: any) => {
-    Vue.component(component.name, component);
+  Object.entries(components.default).forEach(([type, component]: [string, any]) => {
+    Vue.component(`magic-ui-${type}`, component);
   });
 
   Object.values(plugins.default).forEach((plugin: any) => {

diff --git a/runtime/vue3/page/main.ts b/runtime/vue3/page/main.ts
@@ -32,8 +32,8 @@ const magicApp = createApp(AppComponent);
 
 magicApp.use(request);
 
-Object.values(components).forEach((component: any) => {
-  magicApp.component(component.name, component);
+Object.entries(components).forEach(([type, component]: [string, any]) => {
+  magicApp.component(`magic-ui-${type}`, component);
 });
 
 Object.values(plugins).forEach((plugin: any) => {

diff --git a/runtime/vue3/playground/main.ts b/runtime/vue3/playground/main.ts
@@ -23,8 +23,8 @@ import App from './App.vue';
 Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
   const magicApp = createApp(App);
 
-  Object.values(components.default).forEach((component: any) => {
-    magicApp.component(component.name, component);
+  Object.entries(components.default).forEach(([type, component]: [string, any]) => {
+    magicApp.component(`magic-ui-${type}`, component);
   });
 
   Object.values(plugins.default).forEach((plugin: any) => {