From c3bc1035ad351aef07bbeb75461f4698232c761c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=A9=E6=B0=8F=E8=AF=B9=E8=AF=B9=E5=AD=90?= <65452214+aldlss@users.noreply.github.com> Date: Tue, 3 Sep 2024 21:07:55 +0800 Subject: [PATCH] =?UTF-8?q?feat(vue-component,=20runtime):=20=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=20app.resolveComponent=20=E8=8E=B7=E5=8F=96=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=20(#631)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 3 + runtime/vue-runtime-help/package.json | 1 + .../src/hooks/use-component.ts | 67 +++++++++++++++++++ runtime/vue-runtime-help/src/index.ts | 1 + .../tests/use-component.test.ts | 55 +++++++++++++++ runtime/vue2/dev.vite.config.ts | 1 + runtime/vue2/page/App.vue | 6 +- runtime/vue2/page/main.ts | 4 +- runtime/vue2/playground/App.vue | 6 +- runtime/vue2/playground/main.ts | 2 +- runtime/vue3/page/App.vue | 6 +- runtime/vue3/page/main.ts | 2 +- runtime/vue3/playground/App.vue | 5 +- runtime/vue3/playground/main.ts | 2 +- vitest.config.ts | 2 +- vue-components/container/src/Container.vue | 5 +- .../src/IteratorContainer.vue | 10 ++- vue-components/overlay/src/index.vue | 9 ++- .../src/PageFragmentContainer.vue | 10 ++- .../page-fragment/src/PageFragment.vue | 10 ++- vue-components/page/src/index.vue | 8 ++- 21 files changed, 184 insertions(+), 31 deletions(-) create mode 100644 runtime/vue-runtime-help/src/hooks/use-component.ts create mode 100644 runtime/vue-runtime-help/tests/use-component.test.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ed3f0cfb..bd8e3052 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1286,6 +1286,9 @@ importers: '@types/node': specifier: ^18.19.0 version: 18.19.42 + '@vue/test-utils': + specifier: ^2.4.6 + version: 2.4.6 rimraf: specifier: ^3.0.2 version: 3.0.2 diff --git a/runtime/vue-runtime-help/package.json b/runtime/vue-runtime-help/package.json index a21bd601..2cae2cd0 100644 --- a/runtime/vue-runtime-help/package.json +++ b/runtime/vue-runtime-help/package.json @@ -57,6 +57,7 @@ }, "devDependencies": { "@types/node": "^18.19.0", + "@vue/test-utils": "^2.4.6", "rimraf": "^3.0.2" } } \ No newline at end of file diff --git a/runtime/vue-runtime-help/src/hooks/use-component.ts b/runtime/vue-runtime-help/src/hooks/use-component.ts new file mode 100644 index 00000000..b0025224 --- /dev/null +++ b/runtime/vue-runtime-help/src/hooks/use-component.ts @@ -0,0 +1,67 @@ +/* + * Tencent is pleased to support the open source community by making TMagicEditor available. + * + * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { inject } from 'vue-demi'; + +import type Core from '@tmagic/core'; +import { toLine } from '@tmagic/utils'; + +interface UseComponentOptions { + /** 组件类型 */ + componentType?: string; + /** App 实例 */ + app?: Core; +} + +/** + * 通过组件类型在 App 内获取组件 + * @param options 若为字符串则为组件类型，若为对象则为参数选项 + * @returns 得到的组件，若未找到则返回带 magic-ui- 前缀的组件类型 + */ +export function useComponent(options: string | UseComponentOptions = '') { + let componentType: string | undefined; + let app: Core | undefined; + let component: Component | undefined; + + if (typeof options === 'string') { + componentType = options; + } else { + ({ componentType, app } = options); + } + + if (!componentType || componentType === '') { + componentType = 'container'; + } + if (!app) { + app = inject('app'); + } + + component = resolveComponent({ componentType, app }); + if (!component && !componentType.startsWith('magic-ui-')) { + componentType = `magic-ui-${toLine(componentType)}`; + component = resolveComponent({ componentType, app }); + } + + return component ?? componentType; +} + +type resolveComponentOptions = Required> & UseComponentOptions; + +function resolveComponent({ componentType, app }: resolveComponentOptions): Component | undefined { + return app?.resolveComponent(componentType); +} diff --git a/runtime/vue-runtime-help/src/index.ts b/runtime/vue-runtime-help/src/index.ts index 2898095d..8606bfb8 100644 --- a/runtime/vue-runtime-help/src/index.ts +++ b/runtime/vue-runtime-help/src/index.ts @@ -1,3 +1,4 @@ export * from './hooks/use-editor-dsl'; export * from './hooks/use-dsl'; export * from './hooks/use-app'; +export { useComponent } from './hooks/use-component'; diff --git a/runtime/vue-runtime-help/tests/use-component.test.ts b/runtime/vue-runtime-help/tests/use-component.test.ts new file mode 100644 index 00000000..e6e761bc --- /dev/null +++ b/runtime/vue-runtime-help/tests/use-component.test.ts @@ -0,0 +1,55 @@ +import { describe, expect, test } from 'vitest'; +import { defineComponent, isVue3, provide } from 'vue-demi'; +import { mount } from '@vue/test-utils'; + +import Core from '@tmagic/core'; + +import { useComponent } from '../src'; + +describe('useComponent', () => { + const app = new Core({}); + const fooComponent = 'foo-component'; + app.registerComponent('foo', fooComponent); + const containerComponent = {}; + app.registerComponent('magic-ui-container', containerComponent); + + test('string para', () => { + const component = useComponent('foo'); + expect(component).toEqual('magic-ui-foo'); + }); + + test('object para and can find component', () => { + const component = useComponent({ componentType: 'foo', app }); + expect(component).toEqual(fooComponent); + }); + + test('without app and can not find component', () => { + const component = useComponent({ componentType: 'foo' }); + expect(component).toEqual('magic-ui-foo'); + }); + + test('with magic-ui- componentType and can not find component', () => { + const component = useComponent({ componentType: 'magic-ui-foo', app }); + expect(component).toEqual('magic-ui-foo'); + }); + + test.runIf(isVue3)('auto inject and empty para', () => { + const child = defineComponent({ + setup() { + const component = useComponent(); + expect(component).toEqual(containerComponent); + }, + }); + + const parent = defineComponent({ + template: '', + components: { 'child-com': child }, + setup() { + provide('app', app); + }, + }); + + const vueApp = mount(parent); + vueApp.unmount(); + }); +}); diff --git a/runtime/vue2/dev.vite.config.ts b/runtime/vue2/dev.vite.config.ts index db6add65..f5fad3c5 100644 --- a/runtime/vue2/dev.vite.config.ts +++ b/runtime/vue2/dev.vite.config.ts @@ -37,6 +37,7 @@ export default defineConfig({ { find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../../packages/data-source/src/index.ts') }, { find: /^@tmagic\/dep/, replacement: path.join(__dirname, '../../packages/dep/src/index.ts') }, { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') }, + { find: /^@tmagic\/vue-runtime-help/, replacement: path.join(__dirname, '../vue-runtime-help/src/index.ts') }, ], }, diff --git a/runtime/vue2/page/App.vue b/runtime/vue2/page/App.vue index 35938684..e3ee49ea 100644 --- a/runtime/vue2/page/App.vue +++ b/runtime/vue2/page/App.vue @@ -1,5 +1,5 @@ diff --git a/runtime/vue3/playground/main.ts b/runtime/vue3/playground/main.ts index 33848fc8..2b44ea90 100644 --- a/runtime/vue3/playground/main.ts +++ b/runtime/vue3/playground/main.ts @@ -44,7 +44,7 @@ Promise.all([ } Object.entries(components.default).forEach(([type, component]: [string, any]) => { - vueApp.component(`magic-ui-${type}`, component); + app.registerComponent(type, component); }); Object.entries(dataSources.default).forEach(([type, ds]: [string, any]) => { diff --git a/vitest.config.ts b/vitest.config.ts index 79dd1e4a..4eabc319 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -9,7 +9,7 @@ export default defineConfig({ plugins: [Vue()], test: { - include: ['./packages/*/tests/**'], + include: ['./packages/*/tests/**', './runtime/*/tests/**'], environment: 'jsdom', environmentMatchGlobs: [['packages/cli/**', 'node']], coverage: { diff --git a/vue-components/container/src/Container.vue b/vue-components/container/src/Container.vue index d4072e3e..b7e3117c 100644 --- a/vue-components/container/src/Container.vue +++ b/vue-components/container/src/Container.vue @@ -5,7 +5,7 @@ { id?: Id; @@ -82,6 +82,7 @@ export default defineComponent({ display, toLine, + useComponent, }; }, }); diff --git a/vue-components/iterator-container/src/IteratorContainer.vue b/vue-components/iterator-container/src/IteratorContainer.vue index 1483e368..01eced04 100644 --- a/vue-components/iterator-container/src/IteratorContainer.vue +++ b/vue-components/iterator-container/src/IteratorContainer.vue @@ -1,12 +1,13 @@ @@ -15,7 +16,7 @@ import { computed, defineComponent, type PropType, watch } from 'vue-demi'; import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core'; import type { Id, MIteratorContainer, MNode } from '@tmagic/schema'; -import { useApp } from '@tmagic/vue-runtime-help'; +import { useApp, useComponent } from '@tmagic/vue-runtime-help'; interface IteratorContainerSchema extends Omit { id?: Id; @@ -52,6 +53,8 @@ export default defineComponent({ methods: {}, }); + const containerComponent = useComponent({ componentType: 'container', app }); + const configs = computed(() => { let { iteratorData = [] } = props.config; const { itemConfig, dsField, items } = props.config; @@ -115,6 +118,7 @@ export default defineComponent({ return { configs, + containerComponent, }; }, }); diff --git a/vue-components/overlay/src/index.vue b/vue-components/overlay/src/index.vue index c63fa653..a7d70019 100644 --- a/vue-components/overlay/src/index.vue +++ b/vue-components/overlay/src/index.vue @@ -1,14 +1,14 @@