refactor: render pattern is the same as React

Author: yuche

.gitignore

@@ -46,4 +46,5 @@ yarn-error.log
 /devtools.js.map
 /debug.js
 /debug.js.map
-devtools/*.d.ts
+devtools/*.d.ts
+build.js

benchmarks/uibench/app.js

@@ -1,179 +1,198 @@
+import { Component, createElement, render } from 'nervjs'
 
-class TableCell extends Nerv.PureComponent {
+class TableCell extends Component {
   constructor(props) {
-    super(props);
-    this.onClick = this.onClick.bind(this);
+    super(props)
+    this.onClick = this.onClick.bind(this)
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.text !== nextProps.text
   }
 
   onClick(e) {
-    console.log('Clicked' + this.props.text);
-    e.stopPropagation();
+    console.log('Clicked' + this.props.text)
+    e.stopPropagation()
   }
 
   render() {
-    return Nerv.createElement(
-      'td',
-      { className: 'TableCell', onClick: this.onClick },
-      this.props.text
-    );
+    return (
+      <td className="TableCell" onClick={this.onClick}>
+        {this.props.text}
+      </td>
+    )
   }
 }
 
-class TableRow extends Nerv.PureComponent {
+class TableRow extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.data !== nextProps.data
+  }
+
   render() {
-    const { data } = this.props;
+    const { data } = this.props
 
     // Interned strings
-    const classes = data.active ? 'TableRow active' : 'TableRow';
+    const classes = data.active ? 'TableRow active' : 'TableRow'
 
-    const cells = data.props;
+    const cells = data.props
 
-    const children = [];
+    const children = []
     for (let i = 0; i < cells.length; i++) {
-      // Key is used because Nerv prints warnings that there should be a key, libraries that can detect that children
+      // Key is used because React prints warnings that there should be a key, libraries that can detect that children
       // shape isn't changing should render cells without keys.
-      children.push(Nerv.createElement(TableCell, { key: i, text: cells[i] }));
+      children.push(<TableCell key={i} text={cells[i]} />)
     }
 
-    // First table cell is inserted this way to prevent Nerv from printing warning that it doesn't have key property
-    return Nerv.createElement(
-      'tr',
-      { className: classes, 'data-id': data.id },
-      Nerv.createElement(TableCell, { text: '#' + data.id }),
-      children
-    );
+    // First table cell is inserted this way to prevent react from printing warning that it doesn't have key property
+    return (
+      <tr className={classes} data-id={data.id}>
+        <TableCell text={'#' + data.id} />
+        {children}
+      </tr>
+    )
   }
 }
 
-class Table extends Nerv.PureComponent {
+class Table extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.data !== nextProps.data
+  }
+
   render() {
-    const items = this.props.data.items;
+    const items = this.props.data.items
 
-    const children = [];
+    const children = []
     for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      children.push(Nerv.createElement(TableRow, { key: item.id, data: item }));
+      const item = items[i]
+      children.push(<TableRow key={item.id} data={item} />)
     }
 
-    return Nerv.createElement(
-      'table',
-      { className: 'Table' },
-      Nerv.createElement(
-        'tbody',
-        null,
-        children
-      )
-    );
+    return (
+      <table className="Table">
+        <tbody>{children}</tbody>
+      </table>
+    )
   }
 }
 
-class AnimBox extends Nerv.PureComponent {
+class AnimBox extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.data !== nextProps.data
+  }
+
   render() {
-    const { data } = this.props;
-    const time = data.time;
+    const { data } = this.props
+    const time = data.time
     const style = {
-      'borderRadius': (time % 10).toString() + 'px',
-      'background': 'rgba(0,0,0,' + (0.5 + time % 10 / 10).toString() + ')'
-    };
+      borderRadius: (time % 10).toString() + 'px',
+      background: 'rgba(0,0,0,' + (0.5 + (time % 10) / 10).toString() + ')'
+    }
 
-    return Nerv.createElement('div', { className: 'AnimBox', 'data-id': data.id, style: style });
+    return <div className="AnimBox" data-id={data.id} style={style} />
   }
 }
 
-class Anim extends Nerv.PureComponent {
+class Anim extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.data !== nextProps.data
+  }
+
   render() {
-    const items = this.props.data.items;
+    const items = this.props.data.items
 
-    const children = [];
+    const children = []
     for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      children.push(Nerv.createElement(AnimBox, { key: item.id, data: item }));
+      const item = items[i]
+      children.push(<AnimBox key={item.id} data={item} />)
     }
 
-    return Nerv.createElement(
-      'div',
-      { className: 'Anim' },
-      children
-    );
+    return <div className="Anim">{children}</div>
   }
 }
 
-class TreeLeaf extends Nerv.PureComponent {
+class TreeLeaf extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.data !== nextProps.data
+  }
+
   render() {
-    return Nerv.createElement(
-      'li',
-      { className: 'TreeLeaf' },
-      this.props.data.id
-    );
+    return <li className="TreeLeaf">{this.props.data.id}</li>
   }
 }
 
-class TreeNode extends Nerv.PureComponent {
+class TreeNode extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.data !== nextProps.data
+  }
+
   render() {
-    const { data } = this.props;
-    const children = [];
+    const { data } = this.props
+    const children = []
 
     for (let i = 0; i < data.children.length; i++) {
-      const n = data.children[i];
+      const n = data.children[i]
       if (n.container) {
-        children.push(Nerv.createElement(TreeNode, { key: n.id, data: n }));
+        children.push(<TreeNode key={n.id} data={n} />)
       } else {
-        children.push(Nerv.createElement(TreeLeaf, { key: n.id, data: n }));
+        children.push(<TreeLeaf key={n.id} data={n} />)
       }
     }
 
-    return Nerv.createElement(
-      'ul',
-      { className: 'TreeNode' },
-      children
-    );
+    return <ul className="TreeNode">{children}</ul>
   }
 }
 
-class Tree extends Nerv.PureComponent {
+class Tree extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.data !== nextProps.data
+  }
+
   render() {
-    return Nerv.createElement(
-      'div',
-      { className: 'Tree' },
-      Nerv.createElement(TreeNode, { data: this.props.data.root })
-    );
+    return (
+      <div className="Tree">
+        <TreeNode data={this.props.data.root} />
+      </div>
+    )
   }
 }
 
-class Main extends Nerv.PureComponent {
+class Main extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.data !== nextProps.data
+  }
+
   render() {
-    const { data } = this.props;
-    const location = data.location;
+    const { data } = this.props
+    const location = data.location
 
-    var section;
+    var section
     if (location === 'table') {
-      section = Nerv.createElement(Table, { data: data.table });
+      section = <Table data={data.table} />
     } else if (location === 'anim') {
-      section = Nerv.createElement(Anim, { data: data.anim });
+      section = <Anim data={data.anim} />
     } else if (location === 'tree') {
-      section = Nerv.createElement(Tree, { data: data.tree });
+      section = <Tree data={data.tree} />
     }
 
-    return Nerv.createElement(
-      'div',
-      { className: 'Main' },
-      section
-    );
+    return <div className="Main">{section}</div>
   }
 }
 
-uibench.init('Nerv[PC]', Nerv.version);
-
-document.addEventListener('DOMContentLoaded', function (e) {
-  const container = document.querySelector('#App');
-
-  uibench.run(function (state) {
-    Nerv.render(Nerv.createElement(Main, { data: state }), container);
-  }, function (samples) {
-    Nerv.render(Nerv.createElement(
-      'pre',
-      null,
-      JSON.stringify(samples, null, ' ')
-    ), container);
-  });
-});
+uibench.init('Nerv', '1.0.0-alpha')
+
+document.addEventListener('DOMContentLoaded', function(e) {
+  const container = document.querySelector('#App')
+
+  uibench.run(
+    function(state) {
+      render(<Main data={state} />, container)
+    },
+    function(samples) {
+      render(
+        <pre>{JSON.stringify(samples, null, ' ')}</pre>,
+        container
+      )
+    }
+  )
+})

benchmarks/uibench/index.html

@@ -10,8 +10,7 @@
 <body>
   <div id="App"></div>
   <script src="https://localvoid.github.io/uibench-base/0.1.0/uibench.js"></script>
-  <script src="../../dist/nerv.min.js"></script>
-  <script src="app.js"></script>
+  <script src="build.js"></script>
 </body>
 
 </html>

benchmarks/uibench/webpack.config.js

@@ -0,0 +1,33 @@
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = {
+  resolve: {
+    alias: {
+      nervjs: path.join(__dirname, '..', '..', './packages', 'nerv', 'dist', 'nerv.min.js')
+    },
+    extensions: ['.js', '.jsx']
+  },
+  entry: {
+    main: path.join(__dirname, 'app.js')
+  },
+  output: {
+    path: path.join(__dirname),
+    filename: 'build.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': { NODE_ENV: JSON.stringify('production') }
+    }),
+    new webpack.optimize.UglifyJsPlugin()
+  ]
+}

package.json

@@ -16,6 +16,7 @@
     "lint-staged": "lint-staged",
     "test": "jest",
     "test:watch": "jest --watch",
+    "bench": "webpack --config ./benchmarks/uibench/webpack.config.js",
     "test:coverage": "jest --coverage",
     "test:karma": "karma start karma.conf.js --single-run",
     "test:karma:watch": "npm run test:karma -- no-single-run",