feat(vue-next): compatible vue2 component tag name format

Tencent · Mar 26, 2024 · 33fae4e · 33fae4e
1 parent 2dc1628
commit 33fae4e
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
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
@@ -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
@@ -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 <custom-tag> -> customtag, vue3 <custom-tag> -> custom-tag
+  // so we compatible tag name at here
+  return tagMap.get(normalizedTagName) || tagMap.get(lowerCamelizedTagName);
 }