Updated playground apps to v8

Author: bvaughn

playground/chat.html

@@ -25,6 +25,7 @@
     .item {
       border-bottom: 1px solid #eee;
       padding: 0.5rem;
+      box-sizing: border-box;
     }
     .item:hover {
       background-color: #eee;

playground/chat.js

@@ -4,7 +4,9 @@ function rowRenderer (params) {
   return React.createElement(
     'div',
     {
-      className: 'item'
+      className: 'item',
+      key: params.key,
+      style: params.style
     },
     React.createElement(
       'strong',
@@ -17,13 +19,13 @@ function rowRenderer (params) {
 }
 
 function cellRenderer (params) {
-  return rowRenderer({
-    index: params.rowIndex
-  })
+  params.index = params.rowIndex
+
+  return rowRenderer(params)
 }
 
 var cellMeasurer
-var virtualScroll
+var list
 var mostRecentWidth
 
 var App = React.createClass({
@@ -39,7 +41,7 @@ var App = React.createClass({
         function (autoSizerParams) {
           if (mostRecentWidth && mostRecentWidth !== autoSizerParams.width) {
             cellMeasurer.resetMeasurements()
-            virtualScroll.recomputeRowHeights()
+            list.recomputeRowHeights()
           }
 
           mostRecentWidth = autoSizerParams.width
@@ -62,7 +64,7 @@ var App = React.createClass({
                   className: 'chat',
                   height: autoSizerParams.height,
                   ref: function (ref) {
-                    virtualScroll = ref
+                    list = ref
                   },
                   rowCount: chatHistory.length,
                   rowHeight: cellMeasurerParams.getRowHeight,

playground/grid-test.js

@@ -1,5 +1,13 @@
 function cellRenderer (params) {
-  return params.columnIndex
+  return React.createElement(
+    'div',
+    {
+      className: 'item',
+      key: params.key,
+      style: params.style
+    },
+    params.columnIndex
+  )
 }
 
 var App = React.createClass({

playground/grid.js

@@ -18,16 +18,22 @@ function cellRenderer (params) {
       return React.DOM.input({
         className: 'input',
         defaultValue: key,
-        onChange: function () {}
+        key: params.key,
+        onChange: function () {},
+        style: params.style
       })
     case 1:
       return React.DOM.button({
-        className: 'button'
+        className: 'button',
+        key: params.key,
+        style: params.style
       }, key)
     case 2:
       return React.DOM.img({
         className: 'image',
-        src: REACT_VIRTUALIZED_BANNER
+        key: params.key,
+        src: REACT_VIRTUALIZED_BANNER,
+        style: params.style
       })
   }
 }

playground/hover.js

@@ -42,14 +42,15 @@ var App = React.createClass({
 
     return React.DOM.div({
       className: className,
+      key: params.key,
       onMouseOver: function () {
         setState({
           hoveredColumnIndex: columnIndex,
           hoveredRowIndex: rowIndex
         })
         grid.forceUpdate()
       },
-
+      style: params.style
     }, key)
   }
 })

playground/tree.js

@@ -58,7 +58,15 @@ function setRef (ref) {
 }
 
 function cellRenderer (params) {
-  return renderItem(data[params.index], params.index)
+  var renderedCell = renderItem(data[params.index], params.index)
+
+  return React.DOM.ul(
+    {
+      key: params.key,
+      style: params.style
+    },
+    renderedCell
+  )
 }
 
 function rowHeight (params) {