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

Tencent · Mar 26, 2024 · 4b19b7a · 4b19b7a
1 parent caa5393
commit 4b19b7a
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 5 deletions.
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts
@@ -528,7 +528,8 @@ describe('runtime/element/hippy-element', () => {
       registerElement('p', p);
       const element = new HippyElement('p');
       element.isNeedInsertToNative = false;
-      expect(element.convertToNativeNodes(false)).toEqual([]);
+      const [nativeNode] = element.convertToNativeNodes(false);
+      expect(nativeNode).toEqual([]);
     });
 
     it('registered tag should return correct native node', () => {
@@ -547,10 +548,9 @@ describe('runtime/element/hippy-element', () => {
       const element = new HippyElement('span');
       const childElement = new HippyElement('span');
       element.appendChild(childElement);
-      const [nativeNode] = element.convertToNativeNodes(false);
+      const [[[nativeNode]]] = element.convertToNativeNodes(false);
       expect(nativeNode).toEqual(expect.objectContaining({
         pId: 1,
-        index: 0,
         name: 'Text',
         id: 62,
         props: {
@@ -565,7 +565,77 @@ describe('runtime/element/hippy-element', () => {
         tagName: 'span',
       }));
       const nativeNodeList = element.convertToNativeNodes(true);
-      expect(nativeNodeList.length).toEqual(2);
+      expect(nativeNodeList.length).toEqual(3);
+    });
+    it('registered camelize custom 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,
+        name: 'Text',
+        id: 64,
+        props: {
+          text: '',
+          style: {},
+          attributes: {
+            id: '',
+            class: '',
+            hippyNodeId: '64',
+          },
+        },
+        tagName: 'custom-tag',
+      }));
+      const nativeNodeList = element.convertToNativeNodes(true);
+      expect(nativeNodeList.length).toEqual(3);
+    });
+    it('registered hyphenate custom 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,
+        name: 'Text',
+        id: 66,
+        props: {
+          text: '',
+          style: {},
+          attributes: {
+            id: '',
+            class: '',
+            hippyNodeId: '66',
+          },
+        },
+        tagName: 'custom-tag',
+      }));
+      const nativeNodeList = element.convertToNativeNodes(true);
+      expect(nativeNodeList.length).toEqual(3);
     });
   });
 

diff --git a/driver/js/packages/hippy-vue-next/src/runtime/component/index.ts b/driver/js/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);
 }