all: use .editorconfig from facebook/react

Author: raphamorim

.babelrc

@@ -1,7 +1,10 @@
 {
-  "presets": ["react"],
+  "presets": [
+    "env",
+    "react",
+    "stage-2"
+  ],
   "plugins": [
-    "external-helpers",
     "transform-flow-strip-types"
   ]
 }

.editorconfig

@@ -1,14 +1,17 @@
-; common
+root = true
+
 [*]
 charset = utf-8
-end_of_line = LF
+end_of_line = lf
+indent_size = 2
+indent_style = space
 insert_final_newline = true
+max_line_length = 80
 trim_trailing_whitespace = true
-indent_style = space
-indent_size = 2
 
-; markdown
 [*.md]
+max_line_length = 0
 trim_trailing_whitespace = false
-indent_size = 2
-indent_style = tab
+
+[COMMIT_EDITMSG]
+max_line_length = 0

.flowconfig

@@ -0,0 +1,23 @@
+[ignore]
+<PROJECT_ROOT>/src/.*
+
+<PROJECT_ROOT>/build/.*
+<PROJECT_ROOT>/cli/.*
+<PROJECT_ROOT>/scripts/.*
+<PROJECT_ROOT>/.*/__mocks__/.*
+<PROJECT_ROOT>/.*/__tests__/.*
+
+[include]
+./node_modules/fbjs/flow/lib/dev.js
+./node_modules/react-fiber-types
+munge_underscores=false
+
+[libs]
+
+[options]
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.57

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.npmignore

@@ -1,5 +1,5 @@
 test
 scripts/prettier
 resources/images
-samples/clock-app-tv
+examples/
 build

.nvmrc

@@ -1 +1 @@
->=8
+v8.4.0

README.md

@@ -1,51 +1,50 @@
-# React-TV [![circleci status](https://circleci.com/gh/raphamorim/react-tv/tree/master.svg?style=shield)](https://circleci.com/gh/raphamorim/react-tv) [![npm version](https://img.shields.io/npm/v/react-tv.svg?style=flat)](https://www.npmjs.com/package/react-tv) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
+# [React-TV](https://github.com/raphamorim/react-tv) 📺 • [![circleci status](https://circleci.com/gh/raphamorim/react-tv/tree/master.svg?style=shield)](https://circleci.com/gh/raphamorim/react-tv) [![npm version](https://img.shields.io/npm/v/react-tv.svg?style=flat)](https://www.npmjs.com/package/react-tv) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
 
-> React development for TV (WebOS, Tizen, Orsay) 📺
-
-> **tl;dr** It's like `react-DOM` for low memory applications and packager for TV as platform.
+> A `react-DOM` like for low memory applications and packager for TV as platform.
 
 ![React-TV Logo](resources/images/reactv-cover-dark.png)
 
 ```jsx
 import React from 'react'
-import ReactTV, { Platform } from 'react-tv'
+import ReactTV, { Platform } from 'ReactTV'
 
 class Clock extends React.Component {
-	state = { date: new Date() }
-
-	render() {
-		if (Platform.webos) {
-			return (
-				<div>
-					<h1>Hello, {Platform}</h1>
-					<h2>It is {this.state.date.toLocaleTimeString()}</h2>
-				</div>
-			)
-		}
-
-		return <div>This App is available only at LG WebOS</div>
-	}
+  state = { date: new Date() }
+
+  componentDidMount() {
+    setInterval(() => this.setState({date: new Date()}), 1000)
+  }
+
+  render() {
+    if (Platform('webos')) {
+      return (
+        <h1>Time is {this.state.date.toLocaleTimeString()}</h1>
+      )
+    }
+
+    return <h2>This App is available only at LG WebOS</h2>
+  }
 }
 
-ReactTV.render(Clock, document.getElementById('root'))
+ReactTV.render(<Clock/>, document.getElementById('root'))
 ```
 
 ## Summary
 
 - [About React-TV](#about-react-tv)
-	- [Understanding the Problem](#understanding-the-problem)
+  - [Understanding the Problem](#understanding-the-problem)
 - [Getting Started](#getting-started)
-	- [Installing](#installing)
-	- [Examples](#examples)
-	- [Using CLI](#using-cli)
-	- [Using Module](#using-module)
+  - [Installing](#installing)
+  - [Examples](#examples)
+  - [Using CLI](#using-cli)
+  - [Using Module](#using-module)
 - [Supported Televisions](#supported-televisions)
-	- [LG WebOS](#lg-webos)
+  - [LG WebOS](#lg-webos)
 - [References for Study](#references)
-	- [WebOS](#webos)
-	- [Videos](#videos)
-	- [Essentials to beginner](#essentials-to-beginner)
-	- [React Basics and Renderer Architecture](#react-basics-and-renderer-architecture)
+  - [WebOS](#webos)
+  - [Videos](#videos)
+  - [Essentials to beginner](#essentials-to-beginner)
+  - [React Basics and Renderer Architecture](#react-basics-and-renderer-architecture)
 - [TODOLIST for 1.0.0](#todolist)
 
 ## About React-TV
@@ -218,25 +217,25 @@ Thanks [react-dom](https://github.com/facebook/react/tree/master/packages/react-
 ## TODOLIST
 
 - [ ] {cli} init project
-	- [x] mkdir app-path
-	- [x] generate react app tv based on app-name and app-path
-	- [ ] create a npm script on app: `react-tv run-webos-dev`
+  - [x] mkdir app-path
+  - [x] generate react app tv based on app-name and app-path
+  - [ ] create a npm script on app: `react-tv run-webos-dev`
 - [ ] {cli} run-webos-dev
-	- [ ] mount bundle (crow-scripts) or Webpack
-		- [ ] check if exists webpack config existent on folder
-	- [ ] copy bundle for respective folders
-	- [x] run server (express?)
+  - [ ] mount bundle (crow-scripts) or Webpack
+    - [ ] check if exists webpack config existent on folder
+  - [ ] copy bundle for respective folders
+  - [x] run server (express?)
 - [ ] {cli} run-webos
-	- [ ] CROW bundling or Webpack
-	- [ ] Check executable bin path for Windows, OSX and Linux
-	- [x] pack and install script
-	- [x] check if virtualbox is up
-	- [x] launch
-	- [x] `--disable-emulator`
+  - [ ] CROW bundling or Webpack
+  - [ ] Check executable bin path for Windows, OSX and Linux
+  - [x] pack and install script
+  - [x] check if virtualbox is up
+  - [x] launch
+  - [x] `--disable-emulator`
 - [ ] {renderer}
-	- [ ] WebOS
-		- [x] platform
-		- [ ] volume
-	- [ ] Tizen
-		- [ ] platform
-		- [ ] volume
+  - [ ] WebOS
+    - [x] platform
+    - [ ] volume
+  - [ ] Tizen
+    - [ ] platform
+    - [ ] volume

examples/clock-vanilla/example.js

@@ -54,29 +54,28 @@ var Clock = function (_React$Component) {
   }
 
   _createClass(Clock, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      setInterval(function () {
+        return _this2.setState({ date: new Date() });
+      }, 1000);
+    }
+  }, {
     key: 'render',
     value: function render() {
       if (Platform.webos) {
         return React.createElement(
-          'div',
+          'h1',
           null,
-          React.createElement(
-            'h1',
-            null,
-            'Hello, ',
-            Platform
-          ),
-          React.createElement(
-            'h2',
-            null,
-            'It is ',
-            this.state.date.toLocaleTimeString()
-          )
+          'Time is ',
+          this.state.date.toLocaleTimeString()
         );
       }
 
       return React.createElement(
-        'div',
+        'h2',
         null,
         'This App is available only at LG WebOS'
       );
@@ -86,5 +85,9 @@ var Clock = function (_React$Component) {
   return Clock;
 }(React.Component);
 
-console.log(Platform);
-ReactTV.render(Clock, document.getElementById('root'));
+function fn() {
+      console.log('hatake kakashi...');
+    };
+
+const reactElement = React.createElement('div', {onClick: fn}, 'click');
+ReactTV.render(reactElement, document.getElementById('root'));

package.json

@@ -1,15 +1,15 @@
 {
   "name": "react-tv",
-  "version": "0.1.4-rc.1",
+  "version": "0.2.0",
   "description": "React development for TV (WebOS, Tizen, Orsay)",
   "main": "src/ReactTVEntry.js",
   "bin": {
     "react-tv": "./cli"
   },
   "scripts": {
     "build": "node scripts/rollup/build.js",
-    "test": "sh ./test/run-all.sh",
-    "flow": "pushd src; flow; popd;",
+    "test": "yarn flow && jest",
+    "flow": "flow",
     "prettier": "node ./scripts/prettier/index.js write-changed",
     "prettier-all": "node ./scripts/prettier/index.js write"
   },
@@ -18,18 +18,20 @@
     "express": "^4.15.4",
     "fbjs": "^0.8.4",
     "fs-extra": "^4.0.1",
-    "glob": "^7.1.2",
     "node-replace": "^0.3.1",
     "react": "16.0.0-alpha.3",
     "react-dom": "16.0.0-alpha.3"
   },
   "devDependencies": {
-    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-jest": "20.1.0-delta.1",
+    "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.26.0",
     "commitplease": "^3.1.0",
     "flow-bin": "^0.57.3",
-    "gzip-size": "^3.0.0",
+    "jest": "20.1.0-delta.1",
     "prettier": "^1.5.3",
     "react-fiber-types": "file:src/renderer/types",
     "rollup": "^0.41.6",
@@ -75,5 +77,16 @@
   "bugs": {
     "url": "https://github.com/raphamorim/react-tv/issues"
   },
-  "homepage": "https://github.com/raphamorim/react-tv#readme"
+  "homepage": "https://github.com/raphamorim/react-tv#readme",
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "moduleDirectories": [
+      "node_modules",
+      "src"
+    ],
+    "verbose": true,
+    "resetModules": true
+  }
 }

scripts/jest/environment.js

@@ -0,0 +1,14 @@
+// For testing DOM Fiber.
+global.requestAnimationFrame = function(callback) {
+  setTimeout(callback);
+};
+
+global.requestIdleCallback = function(callback) {
+  setTimeout(() => {
+    callback({
+      timeRemaining() {
+        return Infinity;
+      },
+    });
+  });
+};