fix(vue3): fix listViewItem disappear event not triggered

packages/hippy-vue-next/__test__/built-in-component.test.ts

@@ -29,7 +29,6 @@ import BuiltInComponent from '../src/built-in-component';
 import { getTagComponent, registerElement } from '../src/runtime/component';
 import { HippyElement } from '../src/runtime/element/hippy-element';
 import { HippyListElement } from '../src/runtime/element/hippy-list-element';
-import { HippyListItemElement } from '../src/runtime/element/hippy-list-item-element';
 import { HippyInputElement } from '../src/runtime/element/hippy-input-element';
 import { HippyText } from '../src/runtime/text/hippy-text';
 import { setHippyCachedInstance } from '../src/util/instance';
@@ -274,7 +273,7 @@ describe('built-in-component', () => {
 
     it('li tag test', () => {
       const listElement = new HippyListElement('ul');
-      const listItemElement = new HippyListItemElement('li');
+      const listItemElement = new HippyElement('li');
       expect(listItemElement.component.name).toEqual(NATIVE_COMPONENT_MAP.ListViewItem);
       listElement.appendChild(listItemElement);
       const textElement = new HippyText('hello');

packages/hippy-vue-next/__test__/runtime/document/hippy-document.test.ts

@@ -75,7 +75,7 @@ describe('runtime/document/hippy-document.ts', () => {
 
   it('createElement function should return list item element when tag is list item', async () => {
     const listElement = HippyDocument.createElement('li');
-    expect(listElement.constructor.name).toEqual('HippyListItemElement');
+    expect(listElement.constructor.name).toEqual('HippyElement');
     expect(listElement.tagName).toEqual('li');
   });
 });

packages/hippy-vue-next/__test__/runtime/event/hippy-event-dispatcher.test.ts

@@ -33,21 +33,38 @@ import { patchProp } from '../../../src/patch-prop';
 import type { ElementComponent } from '../../../src/runtime/component/index';
 import { registerElement } from '../../../src/runtime/component/index';
 import { HippyElement } from '../../../src/runtime/element/hippy-element';
-import { HippyListItemElement } from '../../../src/runtime/element/hippy-list-item-element';
 import { EventBus } from '../../../src/runtime/event/event-bus';
 import {
   setHippyCachedInstanceParams,
   setHippyCachedInstance,
 } from '../../../src/util/instance';
 import { preCacheNode } from '../../../src/util/node-cache';
 import { EventsUnionType } from '../../../src/runtime/event/hippy-event';
+import BuiltInComponent from '../../../src/built-in-component';
 
 /**
  * @author birdguo
  * @priority P0
  * @casetype unit
  */
 describe('runtime/event/hippy-event-dispatcher.ts', () => {
+  beforeAll(() => {
+    BuiltInComponent.install();
+    const root = new HippyElement('div');
+    root.id = 'testRoot';
+    setHippyCachedInstance({
+      rootView: 'testRoot',
+      rootContainer: 'root',
+      rootViewId: 1,
+      ratioBaseWidth: 750,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      instance: {
+        $el: root,
+      },
+    });
+  });
+
   it('HippyEvent instance should have required function', async () => {
     const { EventDispatcher: eventDispatcher } = global.__GLOBAL__.jsModuleList;
     expect(eventDispatcher).toHaveProperty('receiveNativeEvent');
@@ -159,7 +176,7 @@ describe('runtime/event/hippy-event-dispatcher.ts', () => {
       },
     };
     registerElement('li', li);
-    const listItemElement = new HippyListItemElement('li');
+    const listItemElement = new HippyElement('li');
     // pre cache node
     preCacheNode(listItemElement, listItemElement.nodeId);
     // android will convert disappear to disAppear
@@ -170,7 +187,7 @@ describe('runtime/event/hippy-event-dispatcher.ts', () => {
     listItemElement.addEventListener('disappear', listCb);
     let disappearEvent = [
       listItemElement.nodeId,
-      'disAppear',
+      'onDisAppear',
     ];
     // dispatch disappear event
     eventDispatcher.receiveUIComponentEvent(disappearEvent);
@@ -181,14 +198,14 @@ describe('runtime/event/hippy-event-dispatcher.ts', () => {
     listItemElement.addEventListener('disappear', listCb);
     disappearEvent = [
       listItemElement.nodeId,
-      'disappear',
+      'onDisappear',
     ];
     // dispatch disappear event
     eventDispatcher.receiveUIComponentEvent(disappearEvent);
     expect(sign).toEqual(5);
 
     // nothing happen when there is no listener
-    const noListenerElement = new HippyListItemElement('li');
+    const noListenerElement = new HippyElement('li');
     // pre cache node
     preCacheNode(noListenerElement, noListenerElement.nodeId);
     const noListenerEvent = {

packages/hippy-vue-next/__test__/runtime/element/hippy-list-item-element.test.ts → packages/hippy-vue-next/__test__/util/event.test.ts

@@ -2,7 +2,7 @@
  * Tencent is pleased to support the open source community by making
  * Hippy available.
  *
- * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.
  * All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -18,11 +18,18 @@
  * limitations under the License.
  */
 
-import { HippyListItemElement } from '../../../src/runtime/element/hippy-list-item-element';
+/**
+ * util/event test
+ */
+import { eventMethod } from '../../src/util/event';
 
-describe('runtime/element/hippy-list-item-element', () => {
-  it('should set tag name using the constructor param.', () => {
-    const hippyListItemElement = new HippyListItemElement('li');
-    expect(hippyListItemElement.tagName).toBe('li');
+/**
+ * @priority P0
+ * @casetype unit
+ */
+describe('src/util/event', () => {
+  it('event method names should be valid', () => {
+    expect(eventMethod.ADD).toEqual('addEventListener');
+    expect(eventMethod.REMOVE).toEqual('removeEventListener');
   });
 });

packages/hippy-vue-next/src/runtime/document/hippy-document.ts

@@ -22,7 +22,6 @@ import { HippyCommentElement } from '../element/hippy-comment-element';
 import { HippyElement } from '../element/hippy-element';
 import { HippyInputElement } from '../element/hippy-input-element';
 import { HippyListElement } from '../element/hippy-list-element';
-import { HippyListItemElement } from '../element/hippy-list-item-element';
 import { HippyNode, NodeType } from '../node/hippy-node';
 import { HippyText } from '../text/hippy-text';
 
@@ -47,16 +46,13 @@ export class HippyDocument extends HippyNode {
   static createElement(tagName: string):
   | HippyElement
   | HippyInputElement
-  | HippyListElement
-  | HippyListItemElement {
+  | HippyListElement {
     switch (tagName) {
       case 'input':
       case 'textarea':
         return new HippyInputElement(tagName);
       case 'ul':
         return new HippyListElement(tagName);
-      case 'li':
-        return new HippyListItemElement(tagName);
       // use tagName to create element
       default:
         return new HippyElement(tagName);

packages/hippy-vue-next/src/runtime/element/hippy-element.ts

@@ -42,6 +42,7 @@ import {
   getBeforeRenderToNative,
 } from '../../util';
 import { isRTL } from '../../util/i18n';
+import { eventMethod } from '../../util/event';
 import { getHippyCachedInstance } from '../../util/instance';
 import { parseRemStyle } from '../../util/rem';
 import { getTagComponent, type TagComponent } from '../component';
@@ -204,7 +205,16 @@ export class HippyElement extends HippyNode {
   public filterAttribute?: CallbackType;
 
   // polyFill of native event
-  protected polyFillNativeEvents?: (type: string) => string;
+  protected polyfillNativeEvents?: (
+    method: string,
+    eventNames: string,
+    callback: CallbackType,
+    options?: EventListenerOptions
+  ) => {
+    eventNames: string,
+    callback: CallbackType,
+    options?: EventListenerOptions
+  };
 
   // style scoped id for element
   private scopedIdList: NeedToTyped[] = [];
@@ -614,62 +624,61 @@ export class HippyElement extends HippyNode {
   /**
    * add element event listener
    *
-   * @param type - event type
-   * @param callback - callback
-   * @param options - options
+   * @param rawEventNames - event names
+   * @param rawCallback - callback
+   * @param rawOptions - options
    */
   public addEventListener(
-    type: string,
-    callback: CallbackType,
-    options?: EventListenerOptions,
+    rawEventNames: string,
+    rawCallback: CallbackType,
+    rawOptions?: EventListenerOptions,
   ): void {
-    let eventName = type;
+    let eventNames = rawEventNames;
+    let callback = rawCallback;
+    let options = rawOptions;
     // Added default scrollEventThrottle when scroll event is added.
-    if (
-      eventName === 'scroll'
-      && !(this.getAttribute('scrollEventThrottle') > 0)
-    ) {
+    if (eventNames === 'scroll' && !(this.getAttribute('scrollEventThrottle') > 0)) {
       this.attributes.scrollEventThrottle = 200;
     }
-
-    // If there is an event polyfill, bind the corresponding event callback to the event that needs polyfill
-    if (typeof this.polyFillNativeEvents === 'function') {
-      const polyfillEventName = this.polyFillNativeEvents(type);
-
-      if (polyfillEventName) {
-        eventName = polyfillEventName;
-      }
+    // If there is an event polyfill, override the event names, callback and options
+    if (typeof this.polyfillNativeEvents === 'function') {
+      ({ eventNames, callback, options } = this.polyfillNativeEvents(
+        eventMethod.ADD,
+        eventNames,
+        callback,
+        options,
+      ));
     }
-
-    super.addEventListener(eventName, callback, options);
+    super.addEventListener(eventNames, callback, options);
     // update native node
     this.updateNativeNode();
   }
 
   /**
    * remove event listener
    *
-   * @param type - event type
-   * @param callback - callback
-   * @param options - options
+   * @param rawEventNames - event type
+   * @param rawCallback - callback
+   * @param rawOptions - options
    */
   public removeEventListener(
-    type: string,
-    callback: CallbackType,
-    options?: EventListenerOptions,
+    rawEventNames: string,
+    rawCallback: CallbackType,
+    rawOptions?: EventListenerOptions,
   ): void {
-    let eventName = type;
-    // If there is an event polyfill, remove the corresponding event callback for events that require polyfill
-    if (typeof this.polyFillNativeEvents === 'function') {
-      const polyfillEventName = this.polyFillNativeEvents(type);
-
-      if (polyfillEventName) {
-        eventName = polyfillEventName;
-      }
+    let eventNames = rawEventNames;
+    let callback = rawCallback;
+    let options = rawOptions;
+    // If there is an event polyfill, override the event names, callback and options
+    if (typeof this.polyfillNativeEvents === 'function') {
+      ({ eventNames, callback, options } = this.polyfillNativeEvents(
+        eventMethod.REMOVE,
+        eventNames,
+        callback,
+        options,
+      ));
     }
-
-    super.removeEventListener(eventName, callback, options);
-
+    super.removeEventListener(eventNames, callback, options);
     // update native node
     this.updateNativeNode();
   }

packages/hippy-vue-next/src/runtime/event/hippy-event-dispatcher.ts

@@ -64,12 +64,10 @@ function getVueEventName(eventName: string, targetNode: HippyNode): string {
   if (eventNamesMap?.has(eventName)) {
     return eventNamesMap.get(eventName) as string;
   }
-
   // events that do not start with on maybe custom events, and return the event name directly
   if (eventName.indexOf('on') !== 0) {
     return eventName;
   }
-
   // remove the on in the event name and convert the first letter to lowercase, eg. onClick => click
   const str = eventName.slice(2, eventName.length);
   return `${str.charAt(0).toLowerCase()}${str.slice(1)}`;

packages/hippy-vue/src/renderer/list-item-node.js → packages/hippy-vue-next/src/util/event.ts

@@ -2,7 +2,7 @@
  * Tencent is pleased to support the open source community by making
  * Hippy available.
  *
- * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.
  * All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -18,23 +18,12 @@
  * limitations under the License.
  */
 
-import Native from '../runtime/native';
-import ElementNode from './element-node';
+// event method constant
+const eventMethod = {
+  ADD: 'addEventListener',
+  REMOVE: 'removeEventListener',
+};
 
-/**
- * ListItemNode element
- */
-class ListItemNode extends ElementNode {
-  /**
-   * Poly fill native event
-   */
-  polyfillNativeEvents(method, eventNames, callback, options) {
-    let name = eventNames;
-    if (eventNames === 'disappear' && Native.Platform === 'android') {
-      name = 'disAppear';
-    }
-    return { eventNames: name, callback, options };
-  }
-}
-
-export default ListItemNode;
+export {
+  eventMethod,
+};