diff --git a/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts b/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts index e7de8ef9f5d..0e52b949b9f 100644 --- a/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts +++ b/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts @@ -567,6 +567,78 @@ describe('runtime/element/hippy-element', () => { const nativeNodeList = element.convertToNativeNodes(true); expect(nativeNodeList.length).toEqual(2); }); + it('registered camelize tag should return correct native node', () => { + // custom component + const customElement: ElementComponent = { + component: { + name: 'Text', + attributeMaps: {}, + eventNamesMap: new Map(), + defaultNativeProps: { + text: '', + }, + }, + }; + registerElement('CustomTag', customElement); + const element = new HippyElement('custom-tag'); + const childElement = new HippyElement('custom-tag'); + element.appendChild(childElement); + const [nativeNode] = element.convertToNativeNodes(false); + expect(nativeNode).toEqual(expect.objectContaining({ + pId: 1, + index: 0, + name: 'Text', + id: 64, + props: { + text: '', + style: {}, + attributes: { + id: '', + class: '', + hippyNodeId: '64', + }, + }, + tagName: 'custom-tag', + })); + const nativeNodeList = element.convertToNativeNodes(true); + expect(nativeNodeList.length).toEqual(2); + }); + it('registered hyphenate tag should return correct native node', () => { + // custom component + const customElement: ElementComponent = { + component: { + name: 'Text', + attributeMaps: {}, + eventNamesMap: new Map(), + defaultNativeProps: { + text: '', + }, + }, + }; + registerElement('Custom-Tag', customElement); + const element = new HippyElement('custom-tag'); + const childElement = new HippyElement('custom-tag'); + element.appendChild(childElement); + const [nativeNode] = element.convertToNativeNodes(false); + expect(nativeNode).toEqual(expect.objectContaining({ + pId: 1, + index: 0, + name: 'Text', + id: 66, + props: { + text: '', + style: {}, + attributes: { + id: '', + class: '', + hippyNodeId: '66', + }, + }, + tagName: 'custom-tag', + })); + const nativeNodeList = element.convertToNativeNodes(true); + expect(nativeNodeList.length).toEqual(2); + }); }); describe('root node id check', () => { diff --git a/packages/hippy-vue-next/src/runtime/component/index.ts b/packages/hippy-vue-next/src/runtime/component/index.ts index 14f2056005d..65a6efad9b3 100644 --- a/packages/hippy-vue-next/src/runtime/component/index.ts +++ b/packages/hippy-vue-next/src/runtime/component/index.ts @@ -27,6 +27,7 @@ * TODO Is it better to obtain component information in the node or where it is used? * */ +import { camelize } from '@vue/shared'; import type { NeedToTyped, NativeNodeProps } from '../../types'; import { normalizeTagName } from '../../util'; import type { EventsUnionType, HippyEvent } from '../event/hippy-event'; @@ -92,5 +93,11 @@ export function registerElement( export function getTagComponent(tagName: string): TagComponent { // normalize tag name const normalizedTagName = normalizeTagName(tagName); - return tagMap.get(normalizedTagName); + // lowerCase camelize tag name, compatible vue2 component tag name + const lowerCamelizedTagName = camelize(tagName).toLowerCase(); + // first, get normal tag name. second get lower camelized name + // eg. register hippy custom element: registerElement('CustomTag', xxx). + // vue tepmlate: vue2 -> customtag, vue3 -> custom-tag + // so we compatible tag name at here + return tagMap.get(normalizedTagName) || tagMap.get(lowerCamelizedTagName); }