From 0721264bcb10944f7364881fe970a92d216e8249 Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Mon, 27 Sep 2021 22:28:54 +0800
Subject: [PATCH 1/7] feat: support harmony driver

---
 packages/driver-harmony/CHANGELOG.md          |   3 +
 packages/driver-harmony/README.md             |  28 +++
 packages/driver-harmony/package.json          |  22 ++
 .../src/__tests__/attributes.js               | 105 ++++++++
 .../src/__tests__/css-custom-properties.js    |  40 +++
 .../src/__tests__/css-unit-operations.js      |  80 ++++++
 .../src/__tests__/event-listener.js           |  26 ++
 .../driver-harmony/src/__tests__/hydrate.js   | 194 ++++++++++++++
 .../src/__tests__/node-operations.js          |  55 ++++
 packages/driver-harmony/src/__tests__/svg.js  |  51 ++++
 packages/driver-harmony/src/index.d.ts        |  20 ++
 packages/driver-harmony/src/index.js          | 237 ++++++++++++++++++
 packages/driver-universal/package.json        |   4 +-
 packages/driver-universal/src/harmony.js      |   3 +
 packages/driver-universal/src/index.js        |   4 +-
 scripts/dist-core.js                          |   4 +
 16 files changed, 874 insertions(+), 2 deletions(-)
 create mode 100644 packages/driver-harmony/CHANGELOG.md
 create mode 100644 packages/driver-harmony/README.md
 create mode 100644 packages/driver-harmony/package.json
 create mode 100644 packages/driver-harmony/src/__tests__/attributes.js
 create mode 100644 packages/driver-harmony/src/__tests__/css-custom-properties.js
 create mode 100644 packages/driver-harmony/src/__tests__/css-unit-operations.js
 create mode 100644 packages/driver-harmony/src/__tests__/event-listener.js
 create mode 100644 packages/driver-harmony/src/__tests__/hydrate.js
 create mode 100644 packages/driver-harmony/src/__tests__/node-operations.js
 create mode 100644 packages/driver-harmony/src/__tests__/svg.js
 create mode 100644 packages/driver-harmony/src/index.d.ts
 create mode 100644 packages/driver-harmony/src/index.js
 create mode 100644 packages/driver-universal/src/harmony.js

diff --git a/packages/driver-harmony/CHANGELOG.md b/packages/driver-harmony/CHANGELOG.md
new file mode 100644
index 0000000000..6d81f6f123
--- /dev/null
+++ b/packages/driver-harmony/CHANGELOG.md
@@ -0,0 +1,3 @@
+## Changelog
+
+### v1.0.0
diff --git a/packages/driver-harmony/README.md b/packages/driver-harmony/README.md
new file mode 100644
index 0000000000..27faa2519f
--- /dev/null
+++ b/packages/driver-harmony/README.md
@@ -0,0 +1,28 @@
+# driver-harmony
+
+> Harmony OS driver for Rax.
+
+## Install
+
+```bash
+$ npm install --save driver-harmony
+```
+
+## Use
+
+```jsx
+import {createElement, render} from 'rax';
+import DriverHarmony from 'driver-harmony';
+
+function Example() {
+  return (
+    <div>
+      <image width="560" height="560" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg" />
+    </div>
+  );
+}
+
+render(<Example />, null, {
+  driver: DriverHarmony
+});
+```
diff --git a/packages/driver-harmony/package.json b/packages/driver-harmony/package.json
new file mode 100644
index 0000000000..b47fdeb7e6
--- /dev/null
+++ b/packages/driver-harmony/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "driver-harmony",
+  "version": "1.0.0-beta.0",
+  "description": "Harmony driver for Rax",
+  "license": "BSD-3-Clause",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/rax.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alibaba/rax/issues"
+  },
+  "homepage": "https://github.com/alibaba/rax#readme",
+  "dependencies": {
+    "style-unit": "^3.0.0"
+  },
+  "devDependencies": {
+    "rax": "^1.0.0"
+  }
+}
diff --git a/packages/driver-harmony/src/__tests__/attributes.js b/packages/driver-harmony/src/__tests__/attributes.js
new file mode 100644
index 0000000000..107886e90c
--- /dev/null
+++ b/packages/driver-harmony/src/__tests__/attributes.js
@@ -0,0 +1,105 @@
+import { createElement, render } from 'rax';
+import * as DriverDOM from '../';
+
+describe('attributes', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    (document.body || document.documentElement).appendChild(container);
+  });
+
+  describe('string properties', () => {
+    it('render string prop with simple numbers', () => {
+      render((
+        <div width={30} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('width')).toBe('30');
+    });
+
+    it('render string prop with true value', () => {
+      render((
+        <a href={true} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('href')).toBe('true');
+    });
+
+    it('render string prop with object value', () => {
+      render((
+        <input type="checkbox" data={{foo: 'bar'}} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('data')).toBe('[object Object]');
+    });
+  });
+
+  describe('boolean properties', () => {
+    it('render boolean prop with true value', () => {
+      render((
+        <div hidden={true} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('hidden')).toBe('');
+    });
+
+    it('render boolean prop with false value', () => {
+      render((
+        <div hidden={false} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('hidden')).toBe(null);
+    });
+
+    it('render boolean prop with self value', () => {
+      render((
+        <div hidden={'hidden'} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('hidden')).toBe('');
+    });
+  });
+
+  describe('properties must set with property', () => {
+    it('render boolean prop with true', () => {
+      render((
+        <input type="checkbox" checked={true} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.checked).toBe(true);
+    });
+
+    it('render boolean prop with false', () => {
+      render((
+        <input type="checkbox" checked={false} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.checked).toBe(false);
+    });
+  });
+});
diff --git a/packages/driver-harmony/src/__tests__/css-custom-properties.js b/packages/driver-harmony/src/__tests__/css-custom-properties.js
new file mode 100644
index 0000000000..6504c4d6df
--- /dev/null
+++ b/packages/driver-harmony/src/__tests__/css-custom-properties.js
@@ -0,0 +1,40 @@
+import { createElement, render } from 'rax';
+import * as DriverDOM from '../';
+
+describe('Support CSS custom properties', () => {
+  let container;
+  let logs;
+  const setProperty = CSSStyleDeclaration.prototype.setProperty;
+
+  beforeAll(() => {
+    CSSStyleDeclaration.prototype.setProperty = (prop, value) => {
+      logs.push([prop, value]);
+    };
+  });
+
+  afterAll(() => {
+    CSSStyleDeclaration.prototype.setProperty = setProperty;
+  });
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    (document.body || document.documentElement).appendChild(container);
+    logs = [];
+  });
+
+  it('CSS custom properties works.', () => {
+    render((
+      <div style={{
+        '--backgroundColor': 'red',
+        backgroundColor: 'var(--backgroundColor)',
+        width: '200px'
+      }}>
+        Test CSS custom properties.
+      </div>
+    ), container, {
+      driver: DriverDOM
+    });
+
+    expect(logs).toEqual([['--backgroundColor', 'red']]);
+  });
+});
diff --git a/packages/driver-harmony/src/__tests__/css-unit-operations.js b/packages/driver-harmony/src/__tests__/css-unit-operations.js
new file mode 100644
index 0000000000..ccadbcfaaa
--- /dev/null
+++ b/packages/driver-harmony/src/__tests__/css-unit-operations.js
@@ -0,0 +1,80 @@
+import { createElement, render } from 'rax';
+import * as DriverDOM from '../';
+
+describe('CSSPropertyOperations', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    (document.body || document.documentElement).appendChild(container);
+  });
+
+  it('should automatically append `px` to relevant styles', () => {
+    const styles = {
+      left: 0,
+      margin: 16,
+      opacity: 0.5,
+      padding: '4px',
+    };
+    render(<div style={styles} />, container, { driver: DriverDOM });
+
+    const targetNode = container.children[0];
+    expect(targetNode.style._values).toMatchObject({ 'left': '0px', 'opacity': '0.5', 'margin': '16px', 'padding': '4px' });
+  });
+
+  it('should not append `px` to styles that might need a number', () => {
+    const styles = {
+      flex: 1,
+      flexGrow: 0,
+      lineHeight: 1.1,
+      opacity: 0.5,
+    };
+    render(<div style={styles} />, container, { driver: DriverDOM });
+
+    const targetNode = container.children[0];
+    expect(targetNode.style._values).toMatchObject({ 'flex': '1', 'opacity': '0.5', 'flex-grow': '0', 'line-height': 1.1 });
+  });
+
+  it('should translate `rpx` to the `vw` relative to the width of the 750 screen', () => {
+    const styles = {
+      width: '375rpx',
+      height: '150rpx',
+      margin: '75rpx 100vh'
+    };
+    render(<div style={styles} />, container, { driver: DriverDOM });
+
+    const targetNode = container.children[0];
+    expect(targetNode.style._values).toMatchObject({ 'width': '50vw', 'height': '20vw', 'margin': '10vw 100vh' });
+  });
+
+  it('should not change the style values order after hydration', () => {
+    container.innerHTML = '<div style="font-size: 14px; display: flex; flex-direction: row;"></div>';
+
+    const styles = {
+      fontSize: '14px',
+      display: 'flex',
+      flexDirection: 'row'
+    };
+
+    render(<div style={styles} />, container, { driver: DriverDOM, hydrate: true });
+
+    const targetNode = container.children[0];
+    expect(JSON.stringify(targetNode.style._values)).toEqual(JSON.stringify({
+      'font-size': '14px',
+      'display': 'flex',
+      'flex-direction': 'row'
+    }));
+  });
+
+  it('should not translate `rpx` to the `vw` with url()', () => {
+    const styles = {
+      width: '375rpx',
+      height: '150rpx',
+      backgroundImage: 'url("abc2rpx")'
+    };
+    render(<div style={styles} />, container, { driver: DriverDOM });
+
+    const targetNode = container.children[0];
+    expect(targetNode.style._values).toMatchObject({ 'width': '50vw', 'height': '20vw', 'background-image': 'url(abc2rpx)' });
+  });
+});
diff --git a/packages/driver-harmony/src/__tests__/event-listener.js b/packages/driver-harmony/src/__tests__/event-listener.js
new file mode 100644
index 0000000000..013ff86eea
--- /dev/null
+++ b/packages/driver-harmony/src/__tests__/event-listener.js
@@ -0,0 +1,26 @@
+import { createElement, render } from 'rax';
+import * as DriverDOM from '../';
+
+describe('EventListener', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    (document.body || document.documentElement).appendChild(container);
+  });
+
+  it('should dispatch events', () => {
+    const mock = jest.fn();
+
+    render(<div onClick={mock} />, container, { driver: DriverDOM });
+
+    const targetNode = container.children[0];
+    targetNode.dispatchEvent(
+      new MouseEvent('click', {
+        bubbles: true,
+      }),
+    );
+
+    expect(mock).toBeCalled();
+  });
+});
diff --git a/packages/driver-harmony/src/__tests__/hydrate.js b/packages/driver-harmony/src/__tests__/hydrate.js
new file mode 100644
index 0000000000..6798fd144e
--- /dev/null
+++ b/packages/driver-harmony/src/__tests__/hydrate.js
@@ -0,0 +1,194 @@
+import { createElement, render, useEffect } from 'rax';
+
+describe('Hydrate', () => {
+  let DriverDOM;
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    DriverDOM = require('../');
+
+    jest.useFakeTimers();
+    container = document.createElement('div');
+    container.innerHTML = '<div class="container"><div>About Rax</div><div>Docs</div></div>';
+    (document.body || document.documentElement).appendChild(container);
+  });
+
+  it('should keep comment node when rendering multi adjacent text nodes', () => {
+    container = document.createElement('div');
+    container.innerHTML = '<div>About:<!--|-->Rax</div>';
+    (document.body || document.documentElement).appendChild(container);
+
+    const Component = (props) => {
+      return (
+        <div>About:{props.name}</div>
+      );
+    };
+
+    render(<Component name="Rax" />, container, { driver: DriverDOM, hydrate: true });
+    jest.runAllTimers();
+
+    expect(container.childNodes[0].childNodes[0].data).toBe('About:');
+    expect(container.childNodes[0].childNodes[1].nodeType).toBe(8); // comment
+    expect(container.childNodes[0].childNodes[2].data).toBe('Rax');
+  });
+
+  it('should not be affected by render in useEffect', () => {
+    const childContainer = document.createElement('div');
+    (document.body || document.documentElement).appendChild(childContainer);
+
+    const Child = () => {
+      useEffect(() => {
+        render(<span>child content</span>, childContainer);
+      });
+
+      return null;
+    };
+
+    const Component = () => {
+      return (
+        <div class="container">
+          <div>About Rax</div>
+          <Child />
+        </div>
+      );
+    };
+
+    jest.useFakeTimers();
+
+    render(<Component />, container, { driver: DriverDOM, hydrate: true });
+
+    jest.runAllTimers();
+
+    expect(container.childNodes[0].childNodes[1].nodeType).toBe(8); // comment;
+  });
+
+  it('should throw error for nested render when hydrating', () => {
+    const childContainer = document.createElement('div');
+    (document.body || document.documentElement).appendChild(childContainer);
+
+    const Child = () => {
+      render(<span>child content</span>, childContainer);
+      return null;
+    };
+
+    const Component = () => {
+      return (
+        <div class="container">
+          <div>About Rax</div>
+          <Child />
+        </div>
+      );
+    };
+
+    expect(() => {
+      jest.useFakeTimers();
+
+      render(<Component />, container, { driver: DriverDOM, hydrate: true });
+
+      jest.runAllTimers();
+    }).toThrowError('Nested render is not allowed when hydrating. If necessary, trigger render in useEffect.', {
+      withoutStack: true,
+    });
+  });
+
+  it('should warn for replaced hydratable element', () => {
+    const Component = () => {
+      return (
+        <div className="container">
+          <img src="./logo.png" />
+          <div>About Rax</div>
+          <div>Docs</div>
+        </div>
+      );
+    };
+
+    expect(() => {
+      render(<Component />, container, { driver: DriverDOM, hydrate: true });
+
+      jest.runAllTimers();
+    }).toWarnDev('Warning: Expected server HTML to contain a matching <img> in <div.container>, but got <div>', {
+      withoutStack: true,
+    });
+
+    expect(container.childNodes[0].childNodes[0].tagName).toBe('IMG');
+  });
+
+  it('should not warn for replaced comment', () => {
+    container = document.createElement('div');
+    container.innerHTML = '<div><!-- --><div>About Rax</div><div>Docs</div></div>';
+    (document.body || document.documentElement).appendChild(container);
+
+    const Component = () => {
+      return (
+        <div class="container">
+          <img src="./logo.png" />
+          <div>About Rax</div>
+          <div>Docs</div>
+        </div>
+      );
+    };
+
+    render(<Component />, container, { driver: DriverDOM, hydrate: true });
+    jest.runAllTimers();
+
+    expect(container.childNodes[0].childNodes[0].tagName).toBe('IMG');
+  });
+
+  it('should warn for deleted hydratable element', () => {
+    const Component = () => {
+      return (
+        <div class="container">
+          <div>About Rax</div>
+        </div>
+      );
+    };
+
+    expect(() => {
+      jest.useFakeTimers();
+      render(<Component />, container, { driver: DriverDOM, hydrate: true });
+
+      jest.runAllTimers();
+    }).toWarnDev('Warning: Did not expect server HTML to contain a <div> in <div.container>', {
+      withoutStack: true,
+    });
+
+    expect(container.childNodes[0].childNodes[1]).toBe(undefined);
+  });
+
+  it('should warn for inserted Hydrated element', () => {
+    const Component = () => {
+      return (
+        <div className="container">
+          <div>About Rax</div>
+          <div>Docs</div>
+          <div className="example">Examples</div>
+        </div>
+      );
+    };
+
+    expect(() => {
+      render(<Component />, container, { driver: DriverDOM, hydrate: true });
+
+      jest.runAllTimers();
+    }).toWarnDev('Warning: Expected server HTML to contain a matching <div> in <div.container>', {
+      withoutStack: true,
+    });
+
+    expect(container.childNodes[0].childNodes[2].tagName).toBe('DIV');
+  });
+
+  it('should not compare and delete hydration child with innerHTML', () => {
+    const Component = () => {
+      return (
+        <div className="container" dangerouslySetInnerHTML={{__html: '<div>About Rax</div><div>Docs</div>'}} />
+      );
+    };
+
+    render(<Component />, container, { driver: DriverDOM, hydrate: true });
+
+    jest.runAllTimers();
+
+    expect(container.childNodes[0].childNodes[0].tagName).toBe('DIV');
+  });
+});
diff --git a/packages/driver-harmony/src/__tests__/node-operations.js b/packages/driver-harmony/src/__tests__/node-operations.js
new file mode 100644
index 0000000000..7f7c91740f
--- /dev/null
+++ b/packages/driver-harmony/src/__tests__/node-operations.js
@@ -0,0 +1,55 @@
+import { createElement, Fragment, render, useState } from 'rax';
+import * as DriverDOM from '../';
+
+describe('NodeOperations', () => {
+  let container;
+  let updateHandler;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    container = document.createElement('div');
+    (document.body || document.documentElement).appendChild(container);
+  });
+
+  it('should append child', () => {
+    const Component = () => {
+      const [temp, setTemp] = useState(false);
+      updateHandler = setTemp;
+      return <Fragment>{temp ? <div /> : null}</Fragment>;
+    };
+
+    render(<Component />, container, { driver: DriverDOM });
+
+    updateHandler(true);
+    jest.runAllTimers();
+    expect(container.childNodes[0].tagName).toBe('DIV');
+  });
+
+  it('should update text', () => {
+    const Component = () => {
+      const [temp, setTemp] = useState('');
+      updateHandler = setTemp;
+      return <p>{temp}</p>;
+    };
+
+    render(<Component />, container, { driver: DriverDOM });
+
+    updateHandler('hello');
+    jest.runAllTimers();
+    expect(container.childNodes[0].childNodes[0].data).toBe('hello');
+  });
+
+  it('should removeAttribute className', () => {
+    const Component = () => {
+      const [temp, setTemp] = useState(true);
+      updateHandler = setTemp;
+      return <div {...(temp ? { className: 'hello' } : {})} />;
+    };
+
+    render(<Component />, container, { driver: DriverDOM });
+
+    updateHandler(false);
+    jest.runAllTimers();
+    expect(container.childNodes[0].className).toBe('');
+  });
+});
diff --git a/packages/driver-harmony/src/__tests__/svg.js b/packages/driver-harmony/src/__tests__/svg.js
new file mode 100644
index 0000000000..869c6d5ba5
--- /dev/null
+++ b/packages/driver-harmony/src/__tests__/svg.js
@@ -0,0 +1,51 @@
+import { createElement, render } from 'rax';
+import * as DriverDOM from '../';
+
+describe('svg', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    (document.body || document.documentElement).appendChild(container);
+  });
+
+  it('should create SVG with SVG namespace URI', () => {
+    render((
+      <svg height="90" width="200">
+        <text x="10" y="20" style={{ fill: 'red' }}>
+          <tspan x="10" y="45">First line.</tspan>
+          <tspan x="10" y="70">Second line.</tspan>
+        </text>
+        Sorry, your browser does not support inline SVG.
+      </svg>
+    ), container, {
+      driver: DriverDOM
+    });
+    let svgNode = container.children[0];
+    expect(svgNode.namespaceURI).toEqual('http://www.w3.org/2000/svg');
+
+    let textNode = svgNode.children[0];
+    expect(textNode.namespaceURI).toEqual('http://www.w3.org/2000/svg');
+
+    let tspanNode = textNode.children[0];
+    expect(tspanNode.namespaceURI).toEqual('http://www.w3.org/2000/svg');
+  });
+
+  it('should set transform as attribute', () => {
+    render((
+      <svg height="90" width="200">
+        <text transform="scale(1 0.5)" test={true}>
+          <tspan x="10" y="45">First line.</tspan>
+        </text>
+        Sorry, your browser does not support inline SVG.
+      </svg>
+    ), container, {
+      driver: DriverDOM
+    });
+
+    let svgNode = container.children[0];
+    let textNode = svgNode.children[0];
+
+    expect(textNode.getAttribute('transform')).toEqual('scale(1 0.5)');
+  });
+});
diff --git a/packages/driver-harmony/src/index.d.ts b/packages/driver-harmony/src/index.d.ts
new file mode 100644
index 0000000000..0658336d41
--- /dev/null
+++ b/packages/driver-harmony/src/index.d.ts
@@ -0,0 +1,20 @@
+// Driver spec: https://github.com/alibaba/rax/blob/master/docs/en-US/driver-spec.md
+declare namespace Driver {
+  function createBody(): void;
+  function createEmpty(component: any): void;
+  function createText(): void;
+  function updateText(node: any, text: any)
+  function createElement(type: any, props: any, component: any)
+  function appendChild(node: any, parent: any)
+  function removeChild(node: any, parent: any)
+  function replaceChild(newChild: any, oldChild: any, parent: any)
+  function insertAfter(node: any, after: any, parent: any)
+  function insertBefore(node: any, before: any, parent: any)
+  function addEventListener(node: any, eventName: any, eventHandler: any)
+  function removeEventListener(node: any, eventName: any, eventHandler: any)
+  function setAttribute(node: any, propKey: any, propValue: any)
+  function removeAttribute(node: any, propKey: any)
+  function setStyle(node: any, styleObject: any)
+}
+
+export default Driver;
diff --git a/packages/driver-harmony/src/index.js b/packages/driver-harmony/src/index.js
new file mode 100644
index 0000000000..01b0393ae4
--- /dev/null
+++ b/packages/driver-harmony/src/index.js
@@ -0,0 +1,237 @@
+import { convertUnit } from 'style-unit';
+
+const ID = 'id';
+const STYLE = 'style';
+const CHILDREN = 'children';
+const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
+const EVENT_PREFIX_REGEXP = /^on[A-Z]/;
+
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+const COMMENT_NODE = 8;
+
+let nodeId = 1;
+
+const Driver = {
+  // Internal state
+  nodeMaps: {},
+
+  getElementById(id) {
+    return this.nodeMaps[id];
+  },
+
+  createBody() {
+    return {
+      nodeType: ELEMENT_NODE,
+      tagName: 'BODY',
+      attributes: {},
+      style: {},
+      eventListeners: {},
+      childNodes: [],
+      parentNode: null
+    };
+  },
+
+  createComment(content) {
+    return {
+      nodeType: COMMENT_NODE,
+      data: content,
+      parentNode: null
+    };
+  },
+
+  createEmpty() {
+    return this.createComment(' empty ');
+  },
+
+  createText(text) {
+    return {
+      nodeType: TEXT_NODE,
+      data: text,
+      parentNode: null
+    };
+  },
+
+  updateText(node, text) {
+    node.data = text;
+  },
+
+  createElement(type, props) {
+    let node = {
+      nodeId: nodeId++,
+      nodeType: ELEMENT_NODE,
+      tagName: type,
+      attributes: props,
+      style: props.style || {},
+      eventListeners: {},
+      childNodes: [],
+      parentNode: null
+    };
+
+    return node;
+  },
+
+  appendChild(node, parent) {
+    parent.childNodes.push(node);
+    node.parentNode = parent; // eslint-disable-next-line no-undef
+    let tagName = node.tagName;
+    if (node.tagName === 'span' || !node.tagName) {
+      tagName = 'text';
+    }
+    // eslint-disable-next-line no-undef
+    ace.domAddElement(parent.nodeId || '_root', node.nodeId, tagName, node.attributes, node.style, node.eventListeners, !parent.nodeId, parent.childNodes.length - 1, 0);
+  },
+
+  removeChild(node, parent) {
+    parent = parent || node.parentNode;
+    let id = node.attributes && node.attributes[ID];
+    if (id != null) {
+      this.nodeMaps[id] = null;
+    }
+    if (node.parentNode) {
+      let idx = node.parentNode.childNodes.indexOf(node);
+      node.parentNode.childNodes.splice(idx, 1);
+      node.parentNode = null;
+    }
+  },
+
+  replaceChild(newChild, oldChild, parent) {
+    parent = parent || oldChild.parentNode;
+    let previousSibling = this.previousSibling(oldChild);
+    let nextSibling = this.nextSibling(oldChild);
+
+    this.removeChild(oldChild, parent);
+    if (previousSibling) {
+      this.insertAfter(newChild, previousSibling, parent);
+    } else if (nextSibling) {
+      this.insertBefore(newChild, nextSibling, parent);
+    } else {
+      this.appendChild(newChild, parent);
+    }
+  },
+
+  insertAfter(node, after, parent) {
+    parent = parent || after.parentNode;
+    let nodeIdx = parent.childNodes.indexOf(node);
+    if (nodeIdx !== -1) {
+      parent.childNodes.splice(nodeIdx, 1);
+    }
+
+    let idx = parent.childNodes.indexOf(after);
+
+    if (idx === parent.childNodes.length - 1) {
+      parent.childNodes.push(node);
+    } else {
+      parent.childNodes.splice(idx + 1, 0, node);
+    }
+    node.parentNode = parent;
+  },
+
+  insertBefore(node, before, parent) {
+    parent = parent || before.parentNode;
+    let nodeIdx = parent.childNodes.indexOf(node);
+    if (nodeIdx !== -1) {
+      parent.childNodes.splice(nodeIdx, 1);
+    }
+
+    let idx = parent.childNodes.indexOf(before);
+    parent.childNodes.splice(idx, 0, node);
+    node.parentNode = parent;
+  },
+
+  nextSibling(node) {
+    let parentNode = node.parentNode;
+    if (parentNode) {
+      let idx = parentNode.childNodes.indexOf(node);
+      return parentNode.childNodes[idx + 1];
+    }
+  },
+
+  previousSibling(node) {
+    let parentNode = node.parentNode;
+    if (parentNode) {
+      let idx = parentNode.childNodes.indexOf(node);
+      return parentNode.childNodes[idx - 1];
+    }
+  },
+
+  addEventListener(node, eventName, eventHandler) {
+    node.eventListeners[eventName] = eventHandler;
+  },
+
+  removeEventListener(node, eventName, eventHandler) {
+    delete node.eventListeners[eventName];
+  },
+
+  removeAttribute(node, propKey, propValue) {
+    if (propKey === 'className') {
+      propKey = 'class';
+    }
+
+    if (propKey == ID) {
+      this.nodeMaps[propValue] = null;
+    }
+
+    if (node.tagName === 'INPUT' &&
+       ( propKey == 'checked' && (node.attributes.type === 'checkbox' || node.attributes.type === 'radio')
+       || propKey == 'value')) {
+      node.attributes[propKey] = null;
+    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+      node.__html = null;
+    } else {
+      node.attributes[propKey] = null;
+    }
+  },
+
+  setAttribute(node, propKey, propValue) {
+    if (propKey === 'className') {
+      propKey = 'class';
+    }
+
+    if (propKey == ID) {
+      this.nodeMaps[propValue] = node;
+    }
+
+    if (node.tagName === 'INPUT' &&
+       ( propKey == 'checked' && (node.attributes.type === 'checkbox' || node.attributes.type === 'radio')
+       || propKey == 'value')) {
+      node.attributes[propKey] = propValue;
+    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
+      node.__html = propValue.__html;
+    } else if (propValue != null) {
+      node.attributes[propKey] = propValue;
+    }
+  },
+
+  setStyle(node, style) {
+    for (let prop in style) {
+      // Translate `rpx` to weex `px`
+      node.style[prop] = convertUnit(style[prop], prop);
+    }
+  },
+
+  setNativeProps(node, props, shouldIgnoreStyleProp) {
+    for (let prop in props) {
+      let value = props[prop];
+      if (prop === CHILDREN) {
+        continue;
+      }
+
+      if (value != null) {
+        if (prop === STYLE) {
+          if (shouldIgnoreStyleProp) {
+            continue;
+          }
+          this.setStyle(node, value);
+        } else if (EVENT_PREFIX_REGEXP.test(prop)) {
+          let eventName = prop.slice(2).toLowerCase();
+          this.addEventListener(node, eventName, value);
+        } else {
+          this.setAttribute(node, prop, value);
+        }
+      }
+    }
+  }
+};
+
+export default Driver;
diff --git a/packages/driver-universal/package.json b/packages/driver-universal/package.json
index 8e4da57af0..b2486db357 100644
--- a/packages/driver-universal/package.json
+++ b/packages/driver-universal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "driver-universal",
-  "version": "3.3.1",
+  "version": "3.4.0-beta.1",
   "description": "Driver for Universal App.",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",
@@ -15,6 +15,7 @@
       "bytedance-microapp": "./es/miniapp.js",
       "baidu-smartprogram": "./es/miniapp.js",
       "kuaishou-miniprogram": "./es/miniapp.js",
+      "harmony": "./es/harmony.js",
       "default": "./es/index.js"
     },
     "./*": "./*"
@@ -36,6 +37,7 @@
     "driver-kraken": "^0.2.0",
     "driver-miniapp": "^0.1.0",
     "driver-weex": "^2.0.0",
+    "driver-harmony": "^1.0.0-beta.0",
     "universal-env": "^3.0.0"
   }
 }
diff --git a/packages/driver-universal/src/harmony.js b/packages/driver-universal/src/harmony.js
new file mode 100644
index 0000000000..5e69cdf13f
--- /dev/null
+++ b/packages/driver-universal/src/harmony.js
@@ -0,0 +1,3 @@
+import HarmonyDriver from 'driver-harmony';
+
+export default HarmonyDriver;
diff --git a/packages/driver-universal/src/index.js b/packages/driver-universal/src/index.js
index f3198ba445..1e948ff9de 100644
--- a/packages/driver-universal/src/index.js
+++ b/packages/driver-universal/src/index.js
@@ -10,7 +10,9 @@ import {
 } from 'universal-env';
 
 let currentDriver;
-if (isWeex) {
+if (typeof ace !== 'undefined') {
+  currentDriver = require('./harmony').default;
+} else if (isWeex) {
   currentDriver = require('./weex').default;
 } else if (isWeb) {
   currentDriver = require('./web').default;
diff --git a/scripts/dist-core.js b/scripts/dist-core.js
index 56f510d57b..7db471c3b4 100755
--- a/scripts/dist-core.js
+++ b/scripts/dist-core.js
@@ -174,6 +174,10 @@ buildCorePackages({
   packageName: 'driver-weex',
   name: 'DriverKraken'
 });
+buildCorePackages({
+  packageName: 'driver-harmony',
+  name: 'DriverHarmony'
+});
 
 // Build rax compat react version to rax/lib/compat/index.js
 // It needs external ../../index, which won't bundle rax into lib/compat/index.js

From 8bd19485265c08a2dc75f7208a535b7e50c8b14d Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Mon, 27 Sep 2021 22:29:23 +0800
Subject: [PATCH 2/7] chore: remove useless test case

---
 .../src/__tests__/attributes.js               | 105 ----------
 .../src/__tests__/css-custom-properties.js    |  40 ----
 .../src/__tests__/css-unit-operations.js      |  80 --------
 .../src/__tests__/event-listener.js           |  26 ---
 .../driver-harmony/src/__tests__/hydrate.js   | 194 ------------------
 .../src/__tests__/node-operations.js          |  55 -----
 packages/driver-harmony/src/__tests__/svg.js  |  51 -----
 7 files changed, 551 deletions(-)
 delete mode 100644 packages/driver-harmony/src/__tests__/attributes.js
 delete mode 100644 packages/driver-harmony/src/__tests__/css-custom-properties.js
 delete mode 100644 packages/driver-harmony/src/__tests__/css-unit-operations.js
 delete mode 100644 packages/driver-harmony/src/__tests__/event-listener.js
 delete mode 100644 packages/driver-harmony/src/__tests__/hydrate.js
 delete mode 100644 packages/driver-harmony/src/__tests__/node-operations.js
 delete mode 100644 packages/driver-harmony/src/__tests__/svg.js

diff --git a/packages/driver-harmony/src/__tests__/attributes.js b/packages/driver-harmony/src/__tests__/attributes.js
deleted file mode 100644
index 107886e90c..0000000000
--- a/packages/driver-harmony/src/__tests__/attributes.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import { createElement, render } from 'rax';
-import * as DriverDOM from '../';
-
-describe('attributes', () => {
-  let container;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    (document.body || document.documentElement).appendChild(container);
-  });
-
-  describe('string properties', () => {
-    it('render string prop with simple numbers', () => {
-      render((
-        <div width={30} />
-      ), container, {
-        driver: DriverDOM
-      });
-
-      let node = container.children[0];
-      expect(node.getAttribute('width')).toBe('30');
-    });
-
-    it('render string prop with true value', () => {
-      render((
-        <a href={true} />
-      ), container, {
-        driver: DriverDOM
-      });
-
-      let node = container.children[0];
-      expect(node.getAttribute('href')).toBe('true');
-    });
-
-    it('render string prop with object value', () => {
-      render((
-        <input type="checkbox" data={{foo: 'bar'}} />
-      ), container, {
-        driver: DriverDOM
-      });
-
-      let node = container.children[0];
-      expect(node.getAttribute('data')).toBe('[object Object]');
-    });
-  });
-
-  describe('boolean properties', () => {
-    it('render boolean prop with true value', () => {
-      render((
-        <div hidden={true} />
-      ), container, {
-        driver: DriverDOM
-      });
-
-      let node = container.children[0];
-      expect(node.getAttribute('hidden')).toBe('');
-    });
-
-    it('render boolean prop with false value', () => {
-      render((
-        <div hidden={false} />
-      ), container, {
-        driver: DriverDOM
-      });
-
-      let node = container.children[0];
-      expect(node.getAttribute('hidden')).toBe(null);
-    });
-
-    it('render boolean prop with self value', () => {
-      render((
-        <div hidden={'hidden'} />
-      ), container, {
-        driver: DriverDOM
-      });
-
-      let node = container.children[0];
-      expect(node.getAttribute('hidden')).toBe('');
-    });
-  });
-
-  describe('properties must set with property', () => {
-    it('render boolean prop with true', () => {
-      render((
-        <input type="checkbox" checked={true} />
-      ), container, {
-        driver: DriverDOM
-      });
-
-      let node = container.children[0];
-      expect(node.checked).toBe(true);
-    });
-
-    it('render boolean prop with false', () => {
-      render((
-        <input type="checkbox" checked={false} />
-      ), container, {
-        driver: DriverDOM
-      });
-
-      let node = container.children[0];
-      expect(node.checked).toBe(false);
-    });
-  });
-});
diff --git a/packages/driver-harmony/src/__tests__/css-custom-properties.js b/packages/driver-harmony/src/__tests__/css-custom-properties.js
deleted file mode 100644
index 6504c4d6df..0000000000
--- a/packages/driver-harmony/src/__tests__/css-custom-properties.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { createElement, render } from 'rax';
-import * as DriverDOM from '../';
-
-describe('Support CSS custom properties', () => {
-  let container;
-  let logs;
-  const setProperty = CSSStyleDeclaration.prototype.setProperty;
-
-  beforeAll(() => {
-    CSSStyleDeclaration.prototype.setProperty = (prop, value) => {
-      logs.push([prop, value]);
-    };
-  });
-
-  afterAll(() => {
-    CSSStyleDeclaration.prototype.setProperty = setProperty;
-  });
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    (document.body || document.documentElement).appendChild(container);
-    logs = [];
-  });
-
-  it('CSS custom properties works.', () => {
-    render((
-      <div style={{
-        '--backgroundColor': 'red',
-        backgroundColor: 'var(--backgroundColor)',
-        width: '200px'
-      }}>
-        Test CSS custom properties.
-      </div>
-    ), container, {
-      driver: DriverDOM
-    });
-
-    expect(logs).toEqual([['--backgroundColor', 'red']]);
-  });
-});
diff --git a/packages/driver-harmony/src/__tests__/css-unit-operations.js b/packages/driver-harmony/src/__tests__/css-unit-operations.js
deleted file mode 100644
index ccadbcfaaa..0000000000
--- a/packages/driver-harmony/src/__tests__/css-unit-operations.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { createElement, render } from 'rax';
-import * as DriverDOM from '../';
-
-describe('CSSPropertyOperations', () => {
-  let container;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    (document.body || document.documentElement).appendChild(container);
-  });
-
-  it('should automatically append `px` to relevant styles', () => {
-    const styles = {
-      left: 0,
-      margin: 16,
-      opacity: 0.5,
-      padding: '4px',
-    };
-    render(<div style={styles} />, container, { driver: DriverDOM });
-
-    const targetNode = container.children[0];
-    expect(targetNode.style._values).toMatchObject({ 'left': '0px', 'opacity': '0.5', 'margin': '16px', 'padding': '4px' });
-  });
-
-  it('should not append `px` to styles that might need a number', () => {
-    const styles = {
-      flex: 1,
-      flexGrow: 0,
-      lineHeight: 1.1,
-      opacity: 0.5,
-    };
-    render(<div style={styles} />, container, { driver: DriverDOM });
-
-    const targetNode = container.children[0];
-    expect(targetNode.style._values).toMatchObject({ 'flex': '1', 'opacity': '0.5', 'flex-grow': '0', 'line-height': 1.1 });
-  });
-
-  it('should translate `rpx` to the `vw` relative to the width of the 750 screen', () => {
-    const styles = {
-      width: '375rpx',
-      height: '150rpx',
-      margin: '75rpx 100vh'
-    };
-    render(<div style={styles} />, container, { driver: DriverDOM });
-
-    const targetNode = container.children[0];
-    expect(targetNode.style._values).toMatchObject({ 'width': '50vw', 'height': '20vw', 'margin': '10vw 100vh' });
-  });
-
-  it('should not change the style values order after hydration', () => {
-    container.innerHTML = '<div style="font-size: 14px; display: flex; flex-direction: row;"></div>';
-
-    const styles = {
-      fontSize: '14px',
-      display: 'flex',
-      flexDirection: 'row'
-    };
-
-    render(<div style={styles} />, container, { driver: DriverDOM, hydrate: true });
-
-    const targetNode = container.children[0];
-    expect(JSON.stringify(targetNode.style._values)).toEqual(JSON.stringify({
-      'font-size': '14px',
-      'display': 'flex',
-      'flex-direction': 'row'
-    }));
-  });
-
-  it('should not translate `rpx` to the `vw` with url()', () => {
-    const styles = {
-      width: '375rpx',
-      height: '150rpx',
-      backgroundImage: 'url("abc2rpx")'
-    };
-    render(<div style={styles} />, container, { driver: DriverDOM });
-
-    const targetNode = container.children[0];
-    expect(targetNode.style._values).toMatchObject({ 'width': '50vw', 'height': '20vw', 'background-image': 'url(abc2rpx)' });
-  });
-});
diff --git a/packages/driver-harmony/src/__tests__/event-listener.js b/packages/driver-harmony/src/__tests__/event-listener.js
deleted file mode 100644
index 013ff86eea..0000000000
--- a/packages/driver-harmony/src/__tests__/event-listener.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createElement, render } from 'rax';
-import * as DriverDOM from '../';
-
-describe('EventListener', () => {
-  let container;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    (document.body || document.documentElement).appendChild(container);
-  });
-
-  it('should dispatch events', () => {
-    const mock = jest.fn();
-
-    render(<div onClick={mock} />, container, { driver: DriverDOM });
-
-    const targetNode = container.children[0];
-    targetNode.dispatchEvent(
-      new MouseEvent('click', {
-        bubbles: true,
-      }),
-    );
-
-    expect(mock).toBeCalled();
-  });
-});
diff --git a/packages/driver-harmony/src/__tests__/hydrate.js b/packages/driver-harmony/src/__tests__/hydrate.js
deleted file mode 100644
index 6798fd144e..0000000000
--- a/packages/driver-harmony/src/__tests__/hydrate.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import { createElement, render, useEffect } from 'rax';
-
-describe('Hydrate', () => {
-  let DriverDOM;
-  let container;
-
-  beforeEach(() => {
-    jest.resetModules();
-    DriverDOM = require('../');
-
-    jest.useFakeTimers();
-    container = document.createElement('div');
-    container.innerHTML = '<div class="container"><div>About Rax</div><div>Docs</div></div>';
-    (document.body || document.documentElement).appendChild(container);
-  });
-
-  it('should keep comment node when rendering multi adjacent text nodes', () => {
-    container = document.createElement('div');
-    container.innerHTML = '<div>About:<!--|-->Rax</div>';
-    (document.body || document.documentElement).appendChild(container);
-
-    const Component = (props) => {
-      return (
-        <div>About:{props.name}</div>
-      );
-    };
-
-    render(<Component name="Rax" />, container, { driver: DriverDOM, hydrate: true });
-    jest.runAllTimers();
-
-    expect(container.childNodes[0].childNodes[0].data).toBe('About:');
-    expect(container.childNodes[0].childNodes[1].nodeType).toBe(8); // comment
-    expect(container.childNodes[0].childNodes[2].data).toBe('Rax');
-  });
-
-  it('should not be affected by render in useEffect', () => {
-    const childContainer = document.createElement('div');
-    (document.body || document.documentElement).appendChild(childContainer);
-
-    const Child = () => {
-      useEffect(() => {
-        render(<span>child content</span>, childContainer);
-      });
-
-      return null;
-    };
-
-    const Component = () => {
-      return (
-        <div class="container">
-          <div>About Rax</div>
-          <Child />
-        </div>
-      );
-    };
-
-    jest.useFakeTimers();
-
-    render(<Component />, container, { driver: DriverDOM, hydrate: true });
-
-    jest.runAllTimers();
-
-    expect(container.childNodes[0].childNodes[1].nodeType).toBe(8); // comment;
-  });
-
-  it('should throw error for nested render when hydrating', () => {
-    const childContainer = document.createElement('div');
-    (document.body || document.documentElement).appendChild(childContainer);
-
-    const Child = () => {
-      render(<span>child content</span>, childContainer);
-      return null;
-    };
-
-    const Component = () => {
-      return (
-        <div class="container">
-          <div>About Rax</div>
-          <Child />
-        </div>
-      );
-    };
-
-    expect(() => {
-      jest.useFakeTimers();
-
-      render(<Component />, container, { driver: DriverDOM, hydrate: true });
-
-      jest.runAllTimers();
-    }).toThrowError('Nested render is not allowed when hydrating. If necessary, trigger render in useEffect.', {
-      withoutStack: true,
-    });
-  });
-
-  it('should warn for replaced hydratable element', () => {
-    const Component = () => {
-      return (
-        <div className="container">
-          <img src="./logo.png" />
-          <div>About Rax</div>
-          <div>Docs</div>
-        </div>
-      );
-    };
-
-    expect(() => {
-      render(<Component />, container, { driver: DriverDOM, hydrate: true });
-
-      jest.runAllTimers();
-    }).toWarnDev('Warning: Expected server HTML to contain a matching <img> in <div.container>, but got <div>', {
-      withoutStack: true,
-    });
-
-    expect(container.childNodes[0].childNodes[0].tagName).toBe('IMG');
-  });
-
-  it('should not warn for replaced comment', () => {
-    container = document.createElement('div');
-    container.innerHTML = '<div><!-- --><div>About Rax</div><div>Docs</div></div>';
-    (document.body || document.documentElement).appendChild(container);
-
-    const Component = () => {
-      return (
-        <div class="container">
-          <img src="./logo.png" />
-          <div>About Rax</div>
-          <div>Docs</div>
-        </div>
-      );
-    };
-
-    render(<Component />, container, { driver: DriverDOM, hydrate: true });
-    jest.runAllTimers();
-
-    expect(container.childNodes[0].childNodes[0].tagName).toBe('IMG');
-  });
-
-  it('should warn for deleted hydratable element', () => {
-    const Component = () => {
-      return (
-        <div class="container">
-          <div>About Rax</div>
-        </div>
-      );
-    };
-
-    expect(() => {
-      jest.useFakeTimers();
-      render(<Component />, container, { driver: DriverDOM, hydrate: true });
-
-      jest.runAllTimers();
-    }).toWarnDev('Warning: Did not expect server HTML to contain a <div> in <div.container>', {
-      withoutStack: true,
-    });
-
-    expect(container.childNodes[0].childNodes[1]).toBe(undefined);
-  });
-
-  it('should warn for inserted Hydrated element', () => {
-    const Component = () => {
-      return (
-        <div className="container">
-          <div>About Rax</div>
-          <div>Docs</div>
-          <div className="example">Examples</div>
-        </div>
-      );
-    };
-
-    expect(() => {
-      render(<Component />, container, { driver: DriverDOM, hydrate: true });
-
-      jest.runAllTimers();
-    }).toWarnDev('Warning: Expected server HTML to contain a matching <div> in <div.container>', {
-      withoutStack: true,
-    });
-
-    expect(container.childNodes[0].childNodes[2].tagName).toBe('DIV');
-  });
-
-  it('should not compare and delete hydration child with innerHTML', () => {
-    const Component = () => {
-      return (
-        <div className="container" dangerouslySetInnerHTML={{__html: '<div>About Rax</div><div>Docs</div>'}} />
-      );
-    };
-
-    render(<Component />, container, { driver: DriverDOM, hydrate: true });
-
-    jest.runAllTimers();
-
-    expect(container.childNodes[0].childNodes[0].tagName).toBe('DIV');
-  });
-});
diff --git a/packages/driver-harmony/src/__tests__/node-operations.js b/packages/driver-harmony/src/__tests__/node-operations.js
deleted file mode 100644
index 7f7c91740f..0000000000
--- a/packages/driver-harmony/src/__tests__/node-operations.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { createElement, Fragment, render, useState } from 'rax';
-import * as DriverDOM from '../';
-
-describe('NodeOperations', () => {
-  let container;
-  let updateHandler;
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-    container = document.createElement('div');
-    (document.body || document.documentElement).appendChild(container);
-  });
-
-  it('should append child', () => {
-    const Component = () => {
-      const [temp, setTemp] = useState(false);
-      updateHandler = setTemp;
-      return <Fragment>{temp ? <div /> : null}</Fragment>;
-    };
-
-    render(<Component />, container, { driver: DriverDOM });
-
-    updateHandler(true);
-    jest.runAllTimers();
-    expect(container.childNodes[0].tagName).toBe('DIV');
-  });
-
-  it('should update text', () => {
-    const Component = () => {
-      const [temp, setTemp] = useState('');
-      updateHandler = setTemp;
-      return <p>{temp}</p>;
-    };
-
-    render(<Component />, container, { driver: DriverDOM });
-
-    updateHandler('hello');
-    jest.runAllTimers();
-    expect(container.childNodes[0].childNodes[0].data).toBe('hello');
-  });
-
-  it('should removeAttribute className', () => {
-    const Component = () => {
-      const [temp, setTemp] = useState(true);
-      updateHandler = setTemp;
-      return <div {...(temp ? { className: 'hello' } : {})} />;
-    };
-
-    render(<Component />, container, { driver: DriverDOM });
-
-    updateHandler(false);
-    jest.runAllTimers();
-    expect(container.childNodes[0].className).toBe('');
-  });
-});
diff --git a/packages/driver-harmony/src/__tests__/svg.js b/packages/driver-harmony/src/__tests__/svg.js
deleted file mode 100644
index 869c6d5ba5..0000000000
--- a/packages/driver-harmony/src/__tests__/svg.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { createElement, render } from 'rax';
-import * as DriverDOM from '../';
-
-describe('svg', () => {
-  let container;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    (document.body || document.documentElement).appendChild(container);
-  });
-
-  it('should create SVG with SVG namespace URI', () => {
-    render((
-      <svg height="90" width="200">
-        <text x="10" y="20" style={{ fill: 'red' }}>
-          <tspan x="10" y="45">First line.</tspan>
-          <tspan x="10" y="70">Second line.</tspan>
-        </text>
-        Sorry, your browser does not support inline SVG.
-      </svg>
-    ), container, {
-      driver: DriverDOM
-    });
-    let svgNode = container.children[0];
-    expect(svgNode.namespaceURI).toEqual('http://www.w3.org/2000/svg');
-
-    let textNode = svgNode.children[0];
-    expect(textNode.namespaceURI).toEqual('http://www.w3.org/2000/svg');
-
-    let tspanNode = textNode.children[0];
-    expect(tspanNode.namespaceURI).toEqual('http://www.w3.org/2000/svg');
-  });
-
-  it('should set transform as attribute', () => {
-    render((
-      <svg height="90" width="200">
-        <text transform="scale(1 0.5)" test={true}>
-          <tspan x="10" y="45">First line.</tspan>
-        </text>
-        Sorry, your browser does not support inline SVG.
-      </svg>
-    ), container, {
-      driver: DriverDOM
-    });
-
-    let svgNode = container.children[0];
-    let textNode = svgNode.children[0];
-
-    expect(textNode.getAttribute('transform')).toEqual('scale(1 0.5)');
-  });
-});

From 49e61f29222846a661adf5c81ec205c9946bd4de Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Mon, 1 Nov 2021 15:31:55 +0800
Subject: [PATCH 3/7] feat: harmony render

---
 packages/driver-harmony/src/index.js | 231 ++++++++++++++-------------
 packages/style-unit/src/index.js     |   2 +-
 2 files changed, 118 insertions(+), 115 deletions(-)

diff --git a/packages/driver-harmony/src/index.js b/packages/driver-harmony/src/index.js
index 01b0393ae4..fd4c2fab28 100644
--- a/packages/driver-harmony/src/index.js
+++ b/packages/driver-harmony/src/index.js
@@ -1,16 +1,17 @@
-import { convertUnit } from 'style-unit';
+import { convertUnit, setTargetPlatform } from 'style-unit';
 
+/**
+ *  Server driver
+ **/
 const ID = 'id';
 const STYLE = 'style';
 const CHILDREN = 'children';
-const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
 const EVENT_PREFIX_REGEXP = /^on[A-Z]/;
 
-const ELEMENT_NODE = 1;
-const TEXT_NODE = 3;
-const COMMENT_NODE = 8;
+const TEXT = 'text';
+const EMPTY = '';
 
-let nodeId = 1;
+setTargetPlatform('harmony');
 
 const Driver = {
   // Internal state
@@ -21,86 +22,115 @@ const Driver = {
   },
 
   createBody() {
-    return {
-      nodeType: ELEMENT_NODE,
-      tagName: 'BODY',
-      attributes: {},
-      style: {},
-      eventListeners: {},
-      childNodes: [],
-      parentNode: null
-    };
+    return document.body;
   },
 
   createComment(content) {
-    return {
-      nodeType: COMMENT_NODE,
-      data: content,
-      parentNode: null
-    };
+    return document.createComment(content);
   },
 
   createEmpty() {
-    return this.createComment(' empty ');
+    return this.createComment(EMPTY);
   },
 
   createText(text) {
-    return {
-      nodeType: TEXT_NODE,
-      data: text,
-      parentNode: null
-    };
+    // Use comment node type mock text node
+    const node = this.createComment(EMPTY);
+    node.value = text;
+    return node;
   },
 
   updateText(node, text) {
-    node.data = text;
+    node.value = text;
+    this.updateTextValue(node);
+  },
+
+  updateTextValue(node) {
+    const children = node.__rendered ? node.children : node.__children;
+    const value = children.map(function(child) {
+      // Comment node type
+      return child.nodeType === 8 ? child.value : EMPTY;
+    }).join(EMPTY);
+
+    node.setAttr('value', value);
   },
 
   createElement(type, props) {
-    let node = {
-      nodeId: nodeId++,
-      nodeType: ELEMENT_NODE,
-      tagName: type,
-      attributes: props,
-      style: props.style || {},
-      eventListeners: {},
-      childNodes: [],
-      parentNode: null
-    };
+    const node = document.createElement(type, {
+      style: props.style,
+    });
+
+    this.setNativeProps(node, props, true);
+
+    // Mark not rendered into document, this will be removed when harmony supports append into parent which isn't rendered
+    node.__rendered = false;
+    node.__children = [];
 
     return node;
   },
 
   appendChild(node, parent) {
-    parent.childNodes.push(node);
-    node.parentNode = parent; // eslint-disable-next-line no-undef
-    let tagName = node.tagName;
-    if (node.tagName === 'span' || !node.tagName) {
-      tagName = 'text';
+    // For compat harmony not support append into parent which isn't rendered
+    if (parent.__rendered) {
+      this.aceAppendChild(node, parent);
+      node.__children.forEach((child) => {
+        this.aceAppendChild(child, node);
+      });
+    } else {
+      parent.__children.push(node);
+    }
+
+    if (parent.type === TEXT) {
+      this.updateTextValue(parent);
+    }
+  },
+
+  aceAppendChild(node, parent) {
+    if (!node.__rendered) {
+      parent.appendChild(node);
+      node.__rendered = true;
     }
-    // eslint-disable-next-line no-undef
-    ace.domAddElement(parent.nodeId || '_root', node.nodeId, tagName, node.attributes, node.style, node.eventListeners, !parent.nodeId, parent.childNodes.length - 1, 0);
   },
 
   removeChild(node, parent) {
     parent = parent || node.parentNode;
-    let id = node.attributes && node.attributes[ID];
+    let id = node.attr && node.attr[ID];
     if (id != null) {
       this.nodeMaps[id] = null;
     }
-    if (node.parentNode) {
-      let idx = node.parentNode.childNodes.indexOf(node);
-      node.parentNode.childNodes.splice(idx, 1);
-      node.parentNode = null;
+
+    if (parent.__rendered) {
+      parent.removeChild(node);
+      parent.__children = parent.children;
+    } else {
+      const childIndex = findIndex(parent.__children, node);
+      parent.__children = [...parent.__children.slice(0, childIndex), ...parent.__children.slice(childIndex + 1)];
+    }
+
+    if (parent.type === TEXT) {
+      this.updateTextValue(parent);
     }
   },
 
   replaceChild(newChild, oldChild, parent) {
     parent = parent || oldChild.parentNode;
-    let previousSibling = this.previousSibling(oldChild);
-    let nextSibling = this.nextSibling(oldChild);
 
-    this.removeChild(oldChild, parent);
+    let previousSibling;
+    let nextSibling;
+
+    if (parent.__rendered) {
+      previousSibling = oldChild.previousSibling;
+      nextSibling = oldChild.nextSibling;
+      this.removeChild(oldChild, parent);
+      parent.__children = parent.children;
+    } else {
+      const index = findIndex(parent.__children, oldChild);
+      previousSibling = parent.__children[index - 1];
+      nextSibling = parent.__children[index + 1];
+      // Remove the item
+      parent.__children.splice(index, 1);
+    }
+
     if (previousSibling) {
       this.insertAfter(newChild, previousSibling, parent);
     } else if (nextSibling) {
@@ -112,46 +142,31 @@ const Driver = {
 
   insertAfter(node, after, parent) {
     parent = parent || after.parentNode;
-    let nodeIdx = parent.childNodes.indexOf(node);
-    if (nodeIdx !== -1) {
-      parent.childNodes.splice(nodeIdx, 1);
+    if (parent.__rendered) {
+      parent.insertAfter(node, after);
+      parent.__children = parent.children;
+    } else {
+      const afterChildIndex = findIndex(parent.__children, after);
+      parent.__children.splice(afterChildIndex + 1, 0, node);
     }
 
-    let idx = parent.childNodes.indexOf(after);
-
-    if (idx === parent.childNodes.length - 1) {
-      parent.childNodes.push(node);
-    } else {
-      parent.childNodes.splice(idx + 1, 0, node);
+    if (parent.type === TEXT) {
+      this.updateTextValue(parent);
     }
-    node.parentNode = parent;
   },
 
   insertBefore(node, before, parent) {
     parent = parent || before.parentNode;
-    let nodeIdx = parent.childNodes.indexOf(node);
-    if (nodeIdx !== -1) {
-      parent.childNodes.splice(nodeIdx, 1);
-    }
-
-    let idx = parent.childNodes.indexOf(before);
-    parent.childNodes.splice(idx, 0, node);
-    node.parentNode = parent;
-  },
-
-  nextSibling(node) {
-    let parentNode = node.parentNode;
-    if (parentNode) {
-      let idx = parentNode.childNodes.indexOf(node);
-      return parentNode.childNodes[idx + 1];
+    if (parent.__rendered) {
+      parent.insertBefore(node, before);
+      parent.__children = parent.children;
+    } else {
+      const beforeChildIndex = findIndex(parent.__children, before);
+      parent.__children.splice(beforeChildIndex, 0, node);
     }
-  },
 
-  previousSibling(node) {
-    let parentNode = node.parentNode;
-    if (parentNode) {
-      let idx = parentNode.childNodes.indexOf(node);
-      return parentNode.childNodes[idx - 1];
+    if (parent.type === TEXT) {
+      this.updateTextValue(parent);
     }
   },
 
@@ -164,50 +179,25 @@ const Driver = {
   },
 
   removeAttribute(node, propKey, propValue) {
-    if (propKey === 'className') {
-      propKey = 'class';
-    }
-
-    if (propKey == ID) {
+    if (propKey === ID) {
       this.nodeMaps[propValue] = null;
     }
-
-    if (node.tagName === 'INPUT' &&
-       ( propKey == 'checked' && (node.attributes.type === 'checkbox' || node.attributes.type === 'radio')
-       || propKey == 'value')) {
-      node.attributes[propKey] = null;
-    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-      node.__html = null;
-    } else {
-      node.attributes[propKey] = null;
-    }
+    return node.setAttr(propKey, undefined, false);
   },
 
   setAttribute(node, propKey, propValue) {
-    if (propKey === 'className') {
-      propKey = 'class';
-    }
-
-    if (propKey == ID) {
+    if (propKey === ID) {
       this.nodeMaps[propValue] = node;
     }
-
-    if (node.tagName === 'INPUT' &&
-       ( propKey == 'checked' && (node.attributes.type === 'checkbox' || node.attributes.type === 'radio')
-       || propKey == 'value')) {
-      node.attributes[propKey] = propValue;
-    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
-      node.__html = propValue.__html;
-    } else if (propValue != null) {
-      node.attributes[propKey] = propValue;
-    }
+    return node.setAttr(propKey, propValue);
   },
 
   setStyle(node, style) {
     for (let prop in style) {
       // Translate `rpx` to weex `px`
-      node.style[prop] = convertUnit(style[prop], prop);
+      style[prop] = convertUnit(style[prop], prop);
     }
+    node.setStyles(style);
   },
 
   setNativeProps(node, props, shouldIgnoreStyleProp) {
@@ -234,4 +224,17 @@ const Driver = {
   }
 };
 
+function findIndex(children, target) {
+  let childIndex = -1;
+  children.some((child, index) => {
+    if (child === target) {
+      childIndex = index;
+      return true;
+    }
+    return false;
+  });
+  return childIndex;
+}
+
+
 export default Driver;
diff --git a/packages/style-unit/src/index.js b/packages/style-unit/src/index.js
index 112c180d4c..08ff647430 100644
--- a/packages/style-unit/src/index.js
+++ b/packages/style-unit/src/index.js
@@ -65,7 +65,7 @@ export function calcRpx(str) {
     // In Web convert rpx to 'vw', same as driver-dom and driver-universal
     // '375rpx' => '50vw'
     return str.replace(RPX_REG, decimalVWTransformer);
-  } else if (targetPlatform === 'weex') {
+  } else if (targetPlatform === 'weex' || targetPlatform === 'harmony') {
     // In Weex convert rpx to 'px'
     // '375rpx' => 375 * px
     return str.replace(RPX_REG, decimalPixelTransformer);

From 8da9e6766d1827321c70ec7d5431ae3f9650203f Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Tue, 2 Nov 2021 02:06:04 +0800
Subject: [PATCH 4/7] feat: support event

---
 packages/driver-harmony/src/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/driver-harmony/src/index.js b/packages/driver-harmony/src/index.js
index fd4c2fab28..5347935ab4 100644
--- a/packages/driver-harmony/src/index.js
+++ b/packages/driver-harmony/src/index.js
@@ -7,6 +7,7 @@ const ID = 'id';
 const STYLE = 'style';
 const CHILDREN = 'children';
 const EVENT_PREFIX_REGEXP = /^on[A-Z]/;
+const REF = 'ref';
 
 const TEXT = 'text';
 const EMPTY = '';
@@ -46,8 +47,7 @@ const Driver = {
   },
 
   updateTextValue(node) {
-    const children = node.__rendered ? node.children : node.__children;
-    const value = children.map(function(child) {
+    const value = node.__children.map(function(child) {
       // Comment node type
       return child.nodeType === 8 ? child.value : EMPTY;
     }).join(EMPTY);
@@ -171,11 +171,11 @@ const Driver = {
   },
 
   addEventListener(node, eventName, eventHandler) {
-    node.eventListeners[eventName] = eventHandler;
+    node.addEvent(eventName, eventHandler);
   },
 
   removeEventListener(node, eventName, eventHandler) {
-    delete node.eventListeners[eventName];
+    node.removeEvent(eventName, eventHandler);
   },
 
   removeAttribute(node, propKey, propValue) {
@@ -189,6 +189,8 @@ const Driver = {
     if (propKey === ID) {
       this.nodeMaps[propValue] = node;
     }
+    // ref is harmony node internal key
+    if (propKey === REF) return;
     return node.setAttr(propKey, propValue);
   },
 

From 1e8e7624763a727334ccc4a1985ebea16d5f246f Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Tue, 2 Nov 2021 17:01:33 +0800
Subject: [PATCH 5/7] fix: comment node render

---
 packages/driver-harmony/src/index.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/driver-harmony/src/index.js b/packages/driver-harmony/src/index.js
index 5347935ab4..70c23204c0 100644
--- a/packages/driver-harmony/src/index.js
+++ b/packages/driver-harmony/src/index.js
@@ -26,8 +26,11 @@ const Driver = {
     return document.body;
   },
 
-  createComment(content) {
-    return document.createComment(content);
+  createComment() {
+    // Use block element as comment node, because harmony not support append comment node
+    const node = this.createElement('block');
+    node.__type = 'comment';
+    return node;
   },
 
   createEmpty() {
@@ -43,13 +46,13 @@ const Driver = {
 
   updateText(node, text) {
     node.value = text;
-    this.updateTextValue(node);
+    this.updateTextValue(node.parentNode);
   },
 
   updateTextValue(node) {
     const value = node.__children.map(function(child) {
       // Comment node type
-      return child.nodeType === 8 ? child.value : EMPTY;
+      return child.__type === 'comment' ? child.value : EMPTY;
     }).join(EMPTY);
 
     node.setAttr('value', value);
@@ -72,11 +75,9 @@ const Driver = {
   appendChild(node, parent) {
     // For compat harmony not support append into parent which isn't rendered
     if (parent.__rendered) {
-      this.aceAppendChild(node, parent);
-      node.__children.forEach((child) => {
-        this.aceAppendChild(child, node);
-      });
+      this.aceAppendChildren(node, parent);
     } else {
+      // Collect child node
       parent.__children.push(node);
     }
 
@@ -85,6 +86,13 @@ const Driver = {
     }
   },
 
+  aceAppendChildren(node, parent) {
+    this.aceAppendChild(node, parent);
+    node.__children.forEach((child) => {
+      this.aceAppendChildren(child, node);
+    });
+  },
+
   aceAppendChild(node, parent) {
     if (!node.__rendered) {
       parent.appendChild(node);

From e83deaba8da8f6e194d18c95c66f4736ca347ff7 Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Thu, 25 Nov 2021 14:38:06 +0800
Subject: [PATCH 6/7] fix: props is undefined

---
 packages/driver-harmony/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver-harmony/src/index.js b/packages/driver-harmony/src/index.js
index 70c23204c0..953aaea178 100644
--- a/packages/driver-harmony/src/index.js
+++ b/packages/driver-harmony/src/index.js
@@ -60,7 +60,7 @@ const Driver = {
 
   createElement(type, props) {
     const node = document.createElement(type, {
-      style: props.style,
+      style: props && props.style,
     });
 
     this.setNativeProps(node, props, true);

From 70fdae2c0b0e7f318bb8e81fcc1bcebaad7d1a70 Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Thu, 9 Dec 2021 12:10:04 +0800
Subject: [PATCH 7/7] chore: remove __rendered flag

---
 packages/driver-harmony/src/index.js | 88 ++++++----------------------
 1 file changed, 19 insertions(+), 69 deletions(-)

diff --git a/packages/driver-harmony/src/index.js b/packages/driver-harmony/src/index.js
index 953aaea178..315c632f39 100644
--- a/packages/driver-harmony/src/index.js
+++ b/packages/driver-harmony/src/index.js
@@ -50,7 +50,7 @@ const Driver = {
   },
 
   updateTextValue(node) {
-    const value = node.__children.map(function(child) {
+    const value = node.children.map(function(child) {
       // Comment node type
       return child.__type === 'comment' ? child.value : EMPTY;
     }).join(EMPTY);
@@ -59,27 +59,26 @@ const Driver = {
   },
 
   createElement(type, props) {
+    props = props || {};
+    const style = {};
+    const originStyle = props.style;
+    if (originStyle) {
+      for (let prop in originStyle) {
+        style[prop] = convertUnit(originStyle[prop], prop);
+      }
+    }
+
     const node = document.createElement(type, {
-      style: props && props.style,
+      style,
     });
 
     this.setNativeProps(node, props, true);
 
-    // Mark not rendered into document, this will be removed when harmony supports append into parent which isn't rendered
-    node.__rendered = false;
-    node.__children = [];
-
     return node;
   },
 
   appendChild(node, parent) {
-    // For compat harmony not support append into parent which isn't rendered
-    if (parent.__rendered) {
-      this.aceAppendChildren(node, parent);
-    } else {
-      // Collect child node
-      parent.__children.push(node);
-    }
+    parent.appendChild(node);
 
     if (parent.type === TEXT) {
       this.updateTextValue(parent);
@@ -88,16 +87,6 @@ const Driver = {
 
   aceAppendChildren(node, parent) {
     this.aceAppendChild(node, parent);
-    node.__children.forEach((child) => {
-      this.aceAppendChildren(child, node);
-    });
-  },
-
-  aceAppendChild(node, parent) {
-    if (!node.__rendered) {
-      parent.appendChild(node);
-      node.__rendered = true;
-    }
   },
 
   removeChild(node, parent) {
@@ -107,13 +96,7 @@ const Driver = {
       this.nodeMaps[id] = null;
     }
 
-    if (parent.__rendered) {
-      parent.removeChild(node);
-      parent.__children = parent.children;
-    } else {
-      const childIndex = findIndex(parent.__children, node);
-      parent.__children = [...parent.__children.slice(0, childIndex), ...parent.__children.slice(childIndex + 1)];
-    }
+    parent.removeChild(node);
 
     if (parent.type === TEXT) {
       this.updateTextValue(parent);
@@ -126,18 +109,9 @@ const Driver = {
     let previousSibling;
     let nextSibling;
 
-    if (parent.__rendered) {
-      previousSibling = oldChild.previousSibling;
-      nextSibling = oldChild.nextSibling;
-      this.removeChild(oldChild, parent);
-      parent.__children = parent.children;
-    } else {
-      const index = findIndex(parent.__children, oldChild);
-      previousSibling = parent.__children[index - 1];
-      nextSibling = parent.__children[index + 1];
-      // Remove the item
-      parent.__children.splice(index, 1);
-    }
+    previousSibling = oldChild.previousSibling;
+    nextSibling = oldChild.nextSibling;
+    this.removeChild(oldChild, parent);
 
     if (previousSibling) {
       this.insertAfter(newChild, previousSibling, parent);
@@ -150,13 +124,8 @@ const Driver = {
 
   insertAfter(node, after, parent) {
     parent = parent || after.parentNode;
-    if (parent.__rendered) {
-      parent.insertAfter(node, after);
-      parent.__children = parent.children;
-    } else {
-      const afterChildIndex = findIndex(parent.__children, after);
-      parent.__children.splice(afterChildIndex + 1, 0, node);
-    }
+    parent.insertAfter(node, after);
+
 
     if (parent.type === TEXT) {
       this.updateTextValue(parent);
@@ -165,13 +134,7 @@ const Driver = {
 
   insertBefore(node, before, parent) {
     parent = parent || before.parentNode;
-    if (parent.__rendered) {
-      parent.insertBefore(node, before);
-      parent.__children = parent.children;
-    } else {
-      const beforeChildIndex = findIndex(parent.__children, before);
-      parent.__children.splice(beforeChildIndex, 0, node);
-    }
+    parent.insertBefore(node, before);
 
     if (parent.type === TEXT) {
       this.updateTextValue(parent);
@@ -234,17 +197,4 @@ const Driver = {
   }
 };
 
-function findIndex(children, target) {
-  let childIndex = -1;
-  children.some((child, index) => {
-    if (child === target) {
-      childIndex = index;
-      return true;
-    }
-    return false;
-  });
-  return childIndex;
-}
-
-
 export default Driver;