Feat/support event transform (#496)

* feat: add events to transform event

* feat: add events

* feat: support transform event

* chore: delete events file

* feat: modify transformPrototypes

* test: add test for onclick

* test: add test for events

* chore: update version

* chore: add CHANGELOG

* chore: update CHANGELOG

packages/rax-compat/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v0.1.2
+
+- Fix: support event transform.

packages/rax-compat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-compat",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Rax compatible mode, running rax project on the react runtime.",
   "files": [
     "esm",
@@ -71,4 +71,4 @@
   "author": "ice-admin@alibaba-inc.com",
   "license": "MIT",
   "homepage": "https://github.com/ice-lab/ice-next#readme"
-}
+}

packages/rax-compat/src/create-element.ts

@@ -10,6 +10,7 @@ import { createElement as _createElement, useEffect, useCallback, useRef, useSta
 import { cached, convertUnit } from 'style-unit';
 import { observerElement } from './visibility';
 import { isFunction, isObject, isNumber } from './type';
+import transformPrototypes from './prototypes';
 
 
 // https://github.com/alibaba/rax/blob/master/packages/driver-dom/src/index.js
@@ -78,7 +79,7 @@ export function createElement<P extends {
   props?: Attributes & P | null,
   ...children: ReactNode[]): ReactElement {
   // Get a shallow copy of props, to avoid mutating the original object.
-  const rest = Object.assign({}, props);
+  let rest: Attributes & P = Object.assign({}, props);
   const { onAppear, onDisappear } = rest;
 
   // Delete props that are not allowed in react.
@@ -100,6 +101,8 @@ export function createElement<P extends {
     type = createInputCompat(type);
   }
 
+  rest = transformPrototypes(rest);
+
   // Compat for visibility events.
   if (isFunction(onAppear) || isFunction(onDisappear)) {
     return _createElement(

packages/rax-compat/src/events.ts

@@ -0,0 +1,118 @@
+
+// Fork from https://github.com/facebook/react/blob/main/packages/react-dom/src/events/DOMEventProperties.js#L36
+const events = [
+  'abort',
+  'auxClick',
+  'animationEnd',
+  'animationIteration',
+  'animationStart',
+  'cancel',
+  'canPlay',
+  'canPlayThrough',
+  'click',
+  'close',
+  'contextMenu',
+  'copy',
+  'cut',
+  'dblclick',
+  'drag',
+  'dragEnd',
+  'dragEnter',
+  'dragExit',
+  'dragLeave',
+  'dragOver',
+  'dragStart',
+  'drop',
+  'durationChange',
+  'emptied',
+  'encrypted',
+  'ended',
+  'error',
+  'gotPointerCapture',
+  'input',
+  'invalid',
+  'keyDown',
+  'keyPress',
+  'keyUp',
+  'load',
+  'loadedData',
+  'loadedMetadata',
+  'loadStart',
+  'lostPointerCapture',
+  'mouseDown',
+  'mouseMove',
+  'mouseOut',
+  'mouseOver',
+  'mouseUp',
+  'paste',
+  'pause',
+  'play',
+  'playing',
+  'pointerCancel',
+  'pointerDown',
+  'pointerMove',
+  'pointerOut',
+  'pointerOver',
+  'pointerUp',
+  'progress',
+  'rateChange',
+  'reset',
+  'resize',
+  'seeked',
+  'seeking',
+  'stalled',
+  'submit',
+  'suspend',
+  'transitionEnd',
+  'timeUpdate',
+  'touchCancel',
+  'touchEnd',
+  'touchStart',
+  'volumeChange',
+  'scroll',
+  'toggle',
+  'touchMove',
+  'waiting',
+  'wheel',
+  // EnterLeaveEventPlugin.registerEvents need't to convert to other bubbling events in rax compat,
+  // which are directly brokered, leaving the rest to React.
+  // https://github.com/facebook/react/blob/main/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js#L29
+  'mouseEnter',
+  'mouseLeave',
+  'pointerEnter',
+  'pointerLeave',
+  // https://github.com/facebook/react/blob/main/packages/react-dom/src/events/plugins/ChangeEventPlugin.js#L37
+  'change',
+  // https://github.com/facebook/react/blob/main/packages/react-dom/src/events/plugins/SelectEventPlugin.js
+  'select',
+  // https://github.com/facebook/react/blob/main/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
+  'beforeInput',
+  'compositionEnd',
+  'compositionStart',
+  'compositionUpdate',
+];
+
+// A map for transform event to react event.
+// Such as ontouchstart transform to onTouchStart.
+export const registrationNameToReactEvent: Map<string, string> = new Map();
+
+registerEvents();
+
+function registerDirectEvent(
+  registrationName: string,
+  reactEventName: string,
+) {
+  registrationNameToReactEvent.set(`on${registrationName}`, reactEventName);
+}
+
+function registerEvents() {
+  for (let i = 0; i < events.length; i++) {
+    const eventName: string = events[i];
+    const domEventName: string = eventName.toLowerCase();
+    const capitalizedEvent = eventName[0].toUpperCase() + eventName.slice(1);
+    registerDirectEvent(domEventName, `on${capitalizedEvent}`);
+  }
+  // Special cases where event names don't match.
+  registerDirectEvent('dblclick', 'onDoubleClick');
+}
+

packages/rax-compat/src/prototypes.ts

@@ -0,0 +1,27 @@
+import { registrationNameToReactEvent } from './events';
+
+export default function transformPrototypes(props: Object): Object {
+  const resProps: Object = {};
+  Object.keys(props).forEach((propKey: string) => {
+    let resKey: string = propKey;
+    let resValue: string = props[propKey];
+    // Transform the event so that it works properly in React.
+    // ontouchstart can work in rax, but react will check event in event plugin.
+    // Rax compat should transform event which can work in rax runtime.
+    // React support onDoubleClick but dblclick event is web Standards events.
+    // etc...
+    if (propKey.startsWith('on')) {
+      const lowerCasedPropkey: string = propKey.toLowerCase();
+      if (registrationNameToReactEvent.has(lowerCasedPropkey)) {
+        const reactEvent: string = registrationNameToReactEvent.get(lowerCasedPropkey);
+        if (reactEvent !== propKey) {
+          resKey = reactEvent;
+        }
+      }
+    }
+
+    resProps[resKey] = resValue;
+  });
+
+  return resProps;
+}

packages/rax-compat/tests/events.test.tsx

@@ -0,0 +1,115 @@
+import { expect, it, describe, vi } from 'vitest';
+import React, { Children } from 'react';
+import { useRef, useEffect } from '../src/index';
+import { createElement } from '../src/create-element';
+import findDOMNode from '../src/find-dom-node';
+import { render } from '@testing-library/react';
+import transformPrototypes from '../src/prototypes'
+
+describe('events', () => {
+  it('should work with onclick', () => {
+    function App() {
+      const ref = useRef(null);
+
+      const obj = {
+        handleClick: () => console.log('click'),
+      }
+
+      const click = vi.spyOn(obj, 'handleClick')
+
+      useEffect(() => {
+        const dom = findDOMNode(ref.current);
+        dom.click();
+        expect(click).toHaveBeenCalled()
+      });
+
+      return createElement('div', {
+        onclick: obj.handleClick,
+        ref: ref
+      }, 'click me')
+    }
+
+    render(<App />);
+  });
+
+  it('should work with ontouchstart', () => {
+    expect(transformPrototypes({
+      ontouchstart: () => { }
+    }).onTouchStart).toBeInstanceOf(Function);
+  });
+
+  it('should work with onclick', () => {
+    expect(transformPrototypes({
+      onclick: () => { }
+    }).onClick).toBeInstanceOf(Function);
+    expect(transformPrototypes({
+      onclick: () => { }
+    }).onclick).toBe(undefined);
+  });
+
+  it('should work with onClick', () => {
+    expect(transformPrototypes({
+      onClick: () => { }
+    }).onClick).toBeInstanceOf(Function);
+  });
+
+  it('should work with ondblclick', () => {
+    expect(transformPrototypes({
+      ondblclick: () => { }
+    }).onDoubleClick).toBeInstanceOf(Function);
+    expect(transformPrototypes({
+      ondblclick: () => { }
+    }).ondblclick).toBe(undefined);
+  });
+
+  it('should work with onDblclick', () => {
+    expect(transformPrototypes({
+      onDblclick: () => { }
+    }).onDoubleClick).toBeInstanceOf(Function);
+    expect(transformPrototypes({
+      onDblclick: () => { }
+    }).onDblclick).toBe(undefined);
+  });
+
+  it('should work with onDoubleClick', () => {
+    expect(transformPrototypes({
+      onDoubleClick: () => { }
+    }).onDoubleClick).toBeInstanceOf(Function);
+  });
+
+  it('should work with onmouseenter', () => {
+    expect(transformPrototypes({
+      onmouseenter: () => { }
+    }).onMouseEnter).toBeInstanceOf(Function);
+    expect(transformPrototypes({
+      onmouseenter: () => { }
+    }).onmouseenter).toBe(undefined);
+  });
+
+  it('should work with onpointerenter', () => {
+    expect(transformPrototypes({
+      onpointerenter: () => { }
+    }).onPointerEnter).toBeInstanceOf(Function);
+    expect(transformPrototypes({
+      onpointerenter: () => { }
+    }).onpointerenter).toBe(undefined);
+  });
+
+  it('should work with onchange', () => {
+    expect(transformPrototypes({
+      onchange: () => { }
+    }).onChange).toBeInstanceOf(Function);
+    expect(transformPrototypes({
+      onchange: () => { }
+    }).onchange).toBe(undefined);
+  });
+
+  it('should work with onbeforeinput', () => {
+    expect(transformPrototypes({
+      onbeforeinput: () => { }
+    }).onBeforeInput).toBeInstanceOf(Function);
+    expect(transformPrototypes({
+      onbeforeinput: () => { }
+    }).onbeforeinput).toBe(undefined);
+  });
+});