[WIP] Release/0.4.0

.circleci/config.yml

@@ -37,7 +37,7 @@ jobs:
 
       - run:
           name: Build react-tv
-          command: yarn build:prod
+          command: yarn build
 
       - run:
           name: Build status react-tv

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 0.4.0
+
+- react `^16.3.2`
+- react-reconciler `0.10.0`
+- support to React DevTools
+- fixes on development bundle
+- `development` and `production` bundles based on `process.node.env`
+
 # 0.3.4
 
 - update `react-tv-navigation` on react-tv-cli generator to 0.4.0

README.md

@@ -171,6 +171,10 @@ const Component = () => (<div></div>)
 const App = renderOnAppLoaded(Component)
 ```
 
+### `findDOMNode`
+
+Similar to [react-dom findDOMNode](https://reactjs.org/docs/react-dom.html#finddomnode)
+
 ### Navigation
 
 If you want to start with Navigation for TVs. React-TV provides a package for spatial navigation with declarative support based on [Netflix navigation system](https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8). 

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.3.4",
+  "version": "0.4.0",
   "workspaces": [
     "packages/*",
     "examples/*"
@@ -9,22 +9,22 @@
     "postinstall": "yarn build",
     "lint": "node ./scripts/eslint/index.js",
     "linc": "node ./scripts/eslint/only-changed.js",
+    "benchmark-memory": "node scripts/benchmark/memory.js",
     "build": "node scripts/rollup/build.js",
-    "build:prod": "cross-env NODE_ENV=PROD node scripts/rollup/build.js",
     "build:stats": "node scripts/rollup/stats.js",
-    "prepublishOnly": "yarn test && yarn build:prod",
+    "prepublishOnly": "yarn test && yarn build",
     "prettier:stat": "node ./scripts/prettier/index.js",
     "clean-node-modules": "find ./ -name 'node_modules' -exec rm -rf '{}' +",
     "test": "yarn lint && yarn prettier:stat && yarn flow && yarn jest:ci",
-    "jest": "cross-env NODE_ENV=TEST jest --testPathIgnorePatterns \"(__fixtures__|matcher.js)\"",
+    "jest": "cross-env NODE_ENV=TEST jest --no-cache --testPathIgnorePatterns \"(__fixtures__|matcher.js)\"",
     "jest:ci": "cross-env NODE_ENV=TEST jest --no-cache --testPathIgnorePatterns \"(__fixtures__|matcher.js)\" --ci --runInBand",
     "flow": "flow",
     "prettier": "node ./scripts/prettier/index.js write-changed",
     "prettier:all": "node ./scripts/prettier/index.js write"
   },
   "devDependencies": {
     "babel-eslint": "^7.1.0",
-    "babel-jest": "20.1.0-delta.1",
+    "babel-jest": "21.0.2",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
@@ -42,11 +42,15 @@
     "eslint-plugin-react": "^6.7.1",
     "fbjs": "^0.8.4",
     "flow-bin": "^0.63.1",
-    "jest": "20.1.0-delta.1",
+    "glob": "^7.1.2",
+    "jest": "21.0.2",
+    "memory-inspector": "^0.0.4",
+    "minimatch": "^3.0.4",
     "prettier": "^1.5.3",
-    "react": "^16.2.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "react-fiber-types": "file:./packages/react-tv/renderer/types",
-    "react-reconciler": "^0.7.0",
+    "react-reconciler": "^0.10.0",
     "react-test-renderer": "^16.2.0",
     "rimraf": "^2.6.2",
     "rollup": "^0.52.0",

packages/react-tv-cli/bootstrap/custom-app/package.json

@@ -24,8 +24,8 @@
     "babel-preset-react": "^6.24.1",
     "cross-env": "^5.1.1",
     "react": "^16.2.0",
-    "react-tv": "^0.3.4",
-    "react-tv-cli": "^0.3.4",
+    "react-tv": "^0.4.0",
+    "react-tv-cli": "^0.4.0",
     "react-tv-navigation": "^0.4.0",
     "webpack": "^3.8.1",
     "webpack-dev-server": "^2.9.4"

packages/react-tv-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tv-cli",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Packager for TVs",
   "bin": {
     "react-tv-cli": "index.js"

packages/react-tv/ReactTVEntry.js

@@ -8,15 +8,13 @@
  */
 
 import ReactTVRenderer from './renderer/ReactTVFiberEntry';
-import Platform from './modules/Platform';
-import renderOnAppLoaded from './modules/renderOnAppLoaded';
+import PlatformModule from './modules/Platform';
+import renderOnAppLoadedModule from './modules/renderOnAppLoaded';
 
-const ReactTV = {
-  render: ReactTVRenderer.render,
-  findDOMNode: ReactTVRenderer.findDOMNode,
-  unmountComponentAtNode: ReactTVRenderer.unmountComponentAtNode,
-  renderOnAppLoaded: renderOnAppLoaded,
-  Platform: Platform,
-};
+export const render = ReactTVRenderer.render;
+export const findDOMNode = ReactTVRenderer.findDOMNode;
+export const unmountComponentAtNode = ReactTVRenderer.unmountComponentAtNode;
+export const renderOnAppLoaded = renderOnAppLoadedModule;
+export const Platform = PlatformModule;
 
-module.exports = ReactTV.default ? ReactTV.default : ReactTV;
+export default ReactTVRenderer;

packages/react-tv/__tests__/ReactTVEntry-test.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import ReactTV from '../ReactTVEntry.js';
+import ReactTV, {Platform} from '../ReactTVEntry.js';
 
 describe('[render] Integration between renderer and modules', () => {
   it('should renderer to expected Element', () => {
     const root = document.createElement('div');
     function MyComponent() {
       let currentPlatform = 'LG WebOS';
-      if (!ReactTV.Platform('webos')) {
+      if (!Platform('webos')) {
         currentPlatform = 'Browser';
       }
 

packages/react-tv/index.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/react-tv.production.js');
+} else {
+  module.exports = require('./dist/react-tv.development.js');
+}

packages/react-tv/package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-tv",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "React renderer for low memory applications",
-  "main": "dist/react-tv.umd.js",
+  "main": "index.js",
   "files": [
-    "dist/"
+    "dist/",
+    "index.js"
   ],
   "repository": {
     "type": "git",

packages/react-tv/renderer/ReactTVFiberEntry.js

@@ -43,13 +43,6 @@ const {
 
 const {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;
 
-const LOG_STEPS = false;
-const log = (a, b, c) => {
-  if (LOG_STEPS) {
-    console.log(a, b, c);
-  }
-};
-
 const ReactTVFiberRenderer = ReactFiberReconciler({
   createInstance(
     type: string,
@@ -58,8 +51,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
     hostContext: HostContext,
     internalInstanceHandle: Object
   ): Object {
-    log('createInstance');
-
     let parentNamespace: string;
     parentNamespace = hostContext;
 
@@ -79,7 +70,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
     parentInstance: Instance,
     child: Instance | TextInstance
   ): void {
-    log('appendInitialChild', parentInstance, child);
     parentInstance.appendChild(child);
   },
 
@@ -89,7 +79,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
     props: Props,
     rootContainerInstance: Container
   ): boolean {
-    log('finalizeInitialChildren', domElement);
     setInitialProperties(domElement, type, props, rootContainerInstance);
   },
 
@@ -101,7 +90,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
     rootContainerInstance: Container,
     hostContext: HostContext
   ): null | Array<mixed> {
-    log('prepareUpdate');
     return diffProperties(
       domElement,
       type,
@@ -112,7 +100,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
   },
 
   getRootHostContext(rootContainerInstance: Container): HostContext {
-    log('getRootHostContext', rootContainerInstance);
     let type;
     let namespace;
     const nodeType = rootContainerInstance.nodeType;
@@ -142,7 +129,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
     parentHostContext: HostContext,
     type: string
   ): HostContext {
-    log('getChildHostContext');
     return getChildNamespace(parentHostContext, type);
   },
 
@@ -151,7 +137,7 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
   },
 
   prepareForCommit(): void {
-    log('prepareForCommit');
+    // noop
   },
 
   mutation: {
@@ -160,7 +146,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
       child: Instance | TextInstance,
       beforeChild: Instance | TextInstance
     ): void {
-      log('insertBefore');
       parentInstance.insertBefore(child, beforeChild);
     },
 
@@ -169,7 +154,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
       child: Instance | TextInstance,
       beforeChild: Instance | TextInstance
     ): void {
-      log('insertInContainerBefore');
       if (container.nodeType === COMMENT_NODE) {
         (container.parentNode: any).insertBefore(child, beforeChild);
       } else {
@@ -181,15 +165,13 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
       parentInstance: Instance | Container,
       child: Instance | TextInstance
     ): void {
-      log('appendChild', parentInstance, child);
       parentInstance.appendChild(child);
     },
 
     appendChildToContainer(
       container: Container,
       child: Instance | TextInstance
     ): void {
-      log('appendChildToContainer');
       if (container.nodeType === COMMENT_NODE) {
         (container.parentNode: any).insertBefore(child, container);
       } else {
@@ -201,7 +183,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
       parentInstance: Instance | Container,
       child: Instance | TextInstance
     ): void {
-      log('removeChild', child);
       parentInstance.removeChild(child);
     },
 
@@ -221,7 +202,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
       oldText: string,
       newText: string
     ): void {
-      log('commitTextUpdate');
       textInstance.nodeValue = newText;
     },
 
@@ -233,7 +213,6 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
       newProps: Props,
       internalInstanceHandle: Object
     ): void {
-      log('commitUpdate');
       updateFiberProps(domElement, newProps);
       updateProperties(domElement, updatePayload, type, oldProps, newProps);
     },
@@ -243,9 +222,7 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
       type: string,
       newProps: Props,
       internalInstanceHandle: Object
-    ) {
-      log('commitMount');
-    },
+    ) {},
   },
 
   shouldSetTextContent(props: Props): boolean {
@@ -258,29 +235,22 @@ const ReactTVFiberRenderer = ReactFiberReconciler({
     domElement.textContent = '';
   },
 
-  resetAfterCommit(): void {
-    log('resetAfterCommit');
-  },
+  resetAfterCommit(): void {},
 
   createTextInstance(
     text: string,
     rootContainerInstance: Container,
     hostContext: HostContext,
     internalInstanceHandle: Object
   ): TextInstance {
-    log('createTextInstance');
     let textNode: TextInstance = createTextNode(text, rootContainerInstance);
     precacheFiberNode(internalInstanceHandle, textNode);
     return textNode;
   },
 
-  scheduleAnimationCallback() {
-    log('scheduleAnimationCallback');
-  },
+  scheduleAnimationCallback() {},
 
-  scheduleDeferredCallback() {
-    log('scheduleDeferredCallback');
-  },
+  scheduleDeferredCallback() {},
 
   useSyncScheduling: true,
 
@@ -301,6 +271,13 @@ const ReactTVRenderer = {
     }
 
     ReactTVFiberRenderer.updateContainer((element: any), root, null, callback);
+
+    ReactTVFiberRenderer.injectIntoDevTools({
+      bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
+      rendererPackageName: 'ReactTV',
+      findHostInstanceByFiber: ReactTVFiberRenderer.findHostInstance,
+    });
+
     return ReactTVFiberRenderer.getPublicRootInstance(root);
   },
   findDOMNode(componentOrElement: React$Element<any>) {

packages/react-tv/renderer/__tests__/ReactTVFindDOMNode-test.js

@@ -9,11 +9,11 @@ describe('findDOMNode', () => {
 
     class Sure extends React.Component {
       componentDidMount() {
-        expect(findDOMNode(this)).toEqual(expectedNode);
+        expect(findDOMNode(this.input)).toEqual(expectedNode);
       }
 
       render() {
-        return <p>Sure!</p>;
+        return <p ref={node => (this.input = node)}>Sure!</p>;
       }
     }