docs: document new CLI and WebOS setup

raphamorim · Nov 16, 2017 · fa26df1 · fa26df1
1 parent 5089ca8
commit fa26df1
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -36,10 +36,12 @@ ReactTV.render(<Clock/>, document.getElementById('root'))
   - [Benchmark](#benchmark)
 - [Getting Started](#getting-started)
   - [Installing](#installing)
-  - [Examples](#examples)
-    - [Clock TV App rendering with React-TV](#clock-tv-app-rendering-with-react-tv)
   - [Using CLI](#using-cli)
+    - [React-tv CLI for WebOS](#react-tv-cli-for-webos)
+      - [Setup WebOS Enviroment](#setup-webos-environment)
   - [Using Module](#using-module)
+- [Examples](#examples)
+    - [Clock TV App rendering with React-TV](#clock-tv-app-rendering-with-react-tv)
 - [Supported Televisions](#supported-televisions)
   - [LG WebOS](#lg-webos)
 - [References for Study](#references)
@@ -72,10 +74,10 @@ In addition: Unify the build for multiple TV platforms.
 
 ### Benchmark
 
-| Renderer  | Time of first render * | commitUpdate ** |
-| ------------- | ------------- |  ------------- |
-| React-TV  | ~109ms  | ~ |
-| React-DOM  | ~245ms  | ~ |
+| Operation  | React-TV | React-DOM | Runned off |
+| ------------- | ------------- |  ------------- | ------------- |
+| Time of first render | ~109ms  | ~245ms | Firefox 55.0.3 |
+| Time of first render  | ~364ms  | ~234ms | WebOS Emulator |
 
 * Time for first render (runned off on Firefox 55.0.3 in [Benchmark Example](examples/benchmark)).
 
@@ -99,71 +101,31 @@ $ npm install react-tv --save
 $ yarn add react-tv
 ```
 
-## Examples
-
-### [Clock TV App Rendering with React-TV](https://github.com/raphamorim/react-tv/tree/master/examples/clock-app-with-react-tv)
-
-![clock-with-react-tv-as-renderer](examples/clock-app-with-react-tv/screenshot.png)
-
-```jsx
-import React from 'react'
-import ReactTV, { Platform } from 'react-tv'
-
-class Clock extends React.Component {
-  constructor() {
-    super()
-    this.state = { date: new Date() }
-  }
-
-  componentDidMount() {
-    setInterval(() => this.setState({date: new Date()}), 1000)
-  }
-
-  render() {
-    let currentPlatform = 'Browser'
-    if (Platform('webos'))
-      currentPlatform = 'LG WebOS'
-
-    return (
-      <div class='container'>
-        <img src='https://i.imgur.com/9yhDR0Q.png'/>
-        <h1>It's {this.state.date.toLocaleTimeString()}</h1>
-        <p>You're in {currentPlatform}</p>
-      </div>
-    )
-  }
-}
-
-ReactTV.render(<Clock/>, document.getElementById('root'))
-```
-
-### [Benchmark: React-TV X React-DOM](https://github.com/raphamorim/react-tv/tree/master/examples/benchmark)
-
-![example](examples/benchmark/screenshot.png)
-
 ## Using CLI
 
-### WebOS
-
-### Make a simple TV App for WebOS:
+### React-TV CLI for WebOS
 
 #### 1: Install globally React-TV
 
 ```bash
 $ yarn add --global react-tv
 ```
 
-#### 2: Setting Up
+#### 2: Setup WebOS Environment
+
+[Setup WebOS Enviroment](docs/setup-webos-environment.md)
+
+#### 3: Setting Up
 
-2.1: If you doesn't have a project and want to start from nothing. If is your situation: jump to topic 3 (Running It!).
+3.1: If you doesn't have a project and want to start from nothing. If is your situation: jump to topic 3 (Running It!).
 
 ```bash
 $ react-tv init <my-app-name>
 ```
 
-2.2: If you already have some source code. Just run `react-tv init` on project root.
+3.2: If you already have some source code. Just run `react-tv init` on project root.
 
-2.3: Add the files related to app on a React-TV entry on `package.json`:
+3.3: Add the files related to app on a React-TV entry on `package.json`:
 
 ```json
 {
@@ -178,7 +140,7 @@ $ react-tv init <my-app-name>
 }
 ```
 
-#### 3: Running It!
+#### 4: Running It!
 
 Run emulator and devices (should pack, build and run on emulator):
 
@@ -210,6 +172,48 @@ import { Keys } from 'react-tv'
 <Keys onChange={myCustomHandler}/>
 ```
 
+## Examples
+
+### [Clock TV App Rendering with React-TV](https://github.com/raphamorim/react-tv/tree/master/examples/clock-app-with-react-tv)
+
+![clock-with-react-tv-as-renderer](examples/clock-app-with-react-tv/screenshot.png)
+
+```jsx
+import React from 'react'
+import ReactTV, { Platform } from 'react-tv'
+
+class Clock extends React.Component {
+  constructor() {
+    super()
+    this.state = { date: new Date() }
+  }
+
+  componentDidMount() {
+    setInterval(() => this.setState({date: new Date()}), 1000)
+  }
+
+  render() {
+    let currentPlatform = 'Browser'
+    if (Platform('webos'))
+      currentPlatform = 'LG WebOS'
+
+    return (
+      <div class='container'>
+        <img src='https://i.imgur.com/9yhDR0Q.png'/>
+        <h1>It's {this.state.date.toLocaleTimeString()}</h1>
+        <p>You're in {currentPlatform}</p>
+      </div>
+    )
+  }
+}
+
+ReactTV.render(<Clock/>, document.getElementById('root'))
+```
+
+### [Benchmark: React-TV X React-DOM](https://github.com/raphamorim/react-tv/tree/master/examples/benchmark)
+
+![example](examples/benchmark/screenshot.png)
+
 ## Supported Televisions
 
 ### LG WebOS

diff --git a/cli/scripts/webos/run.js b/cli/scripts/webos/run.js
@@ -45,12 +45,14 @@ function runWebOS(root) {
 
   const webosPath = path.resolve(root, 'react-tv/webos');
   try {
-    execSync(`ln -s ${root}/react-tv/icon.png ${webosPath}/icon.png`);
-    execSync(`ln -s ${root}/react-tv/icon-large.png ${webosPath}/icon-large.png`);
+    execSync(`ln -sf ${root}/react-tv/icon.png ${webosPath}/icon.png`);
+    execSync(
+      `ln -sf ${root}/react-tv/icon-large.png ${webosPath}/icon-large.png`
+    );
 
     ReactTVConfig.files.forEach(file => {
       const filePath = path.resolve(root, file);
-      execSync(`ln -sF ${filePath} ${webosPath}`);
+      execSync(`ln -sf ${filePath} ${webosPath}`);
     });
   } catch (e) {
     return console.log('FAIL TO MOUNT', e.toString());

diff --git a/docs/resources/webos/download-installer.png b/docs/resources/webos/download-installer.png
diff --git a/docs/setup-webos-environment.md b/docs/setup-webos-environment.md
@@ -0,0 +1,8 @@
+# Setup WebOS Environment
+
+1. Go to [http://webostv.developer.lge.com/sdk/download/download-sdk/](http://webostv.developer.lge.com/sdk/download/download-sdk/)
+
+![download LG webos installer](resources/webos/download-installer.png)
+
+2. Download the installer based on your platform.
+3. Execute your Installer (If you're in Linux or Mac the Installer will ask for be executed with sudo). 
diff --git a/examples/benchmark/package.json b/examples/benchmark/package.json
@@ -3,9 +3,17 @@
   "version": "1.0.0",
   "author": "Raphael Amorim",
   "license": "MIT",
+  "react-tv": {
+    "files": [
+      "index.html",
+      "bundle.js",
+      "style.css"
+    ]
+  },
   "scripts": {
     "build": "webpack",
-    "start": "webpack-dev-server --progress --colors"
+    "start": "yarn build && react-tv run-webos",
+    "start-dev": "webpack-dev-server --progress --colors"
   },
   "dependencies": {
     "react": "^16.0.0",

diff --git a/examples/benchmark/src/Benchmark.js b/examples/benchmark/src/Benchmark.js
@@ -54,5 +54,9 @@ function testReactDOM() {
   reactDOMResults.appendChild(finalizeInitialChildren);
 }
 
-testReactTV();
-testReactDOM();
+setTimeout(() => {
+  testReactTV();
+  testReactDOM();
+}, 1000);
+
+
diff --git a/examples/clock-app-with-react-tv/package.json b/examples/clock-app-with-react-tv/package.json
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "build": "webpack",
-    "start": "yarn build && react-tv run-webos ./bundle.js",
+    "start": "yarn build && react-tv run-webos",
     "start-dev": "webpack-dev-server --progress --colors"
   },
   "dependencies": {

diff --git a/examples/keyboard-navigation/package.json b/examples/keyboard-navigation/package.json
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "build": "webpack",
-    "start": "yarn build && react-tv run-webos ./bundle.js",
+    "start": "yarn build && react-tv run-webos",
     "start-dev": "webpack-dev-server --progress --colors"
   },
   "dependencies": {