renderer: createTextNode, setInitialProperties

Author: raphamorim

.editorconfig

@@ -7,10 +7,8 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 2
 
-; make
-[Makefile]
-indent_style = tab
-
 ; markdown
 [*.md]
 trim_trailing_whitespace = false
+indent_size = 2
+indent_style = tab

README.md

@@ -6,25 +6,25 @@
 
 ![React-TV Logo](resources/images/reactv-cover-dark.png)
 
-```js
+```jsx
 import React from 'react'
 import ReactTV, { Platform } from 'react-tv'
 
 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() }
+
+	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>
+	}
 }
 
 ReactTV.render(Clock, document.getElementById('root'))
@@ -33,19 +33,19 @@ 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
@@ -211,28 +211,32 @@ See ReactTV's [Changelog](https://github.com/raphamorim/react-tv/blob/master/CHA
 
 Currently ReactTV is licensed by [MIT License](https://github.com/raphamorim/react-tv/blob/master/LICENSE.md)
 
+## Credits
+
+Thanks [react-dom](https://github.com/facebook/react/tree/master/packages/react-dom) for be example and a inspiration code :)
+
 ## 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

@@ -0,0 +1,90 @@
+/*
+RESULT FROM: https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYewdgzgLgBACgGwIZQGYgE4FsYF4YBKApksFACoBqAdIiutgFCPDIQQwDCCIwA1jCIAPKETAATDsVJRqnEFgAO4MbADejGDGgoieGGpjjdALhhgiAdxgARXQAoAlDAC-zLRjHiiGJwc1aMACWqDD2dGiYWNSWRABGIBDOGoGBnlAArhhgYQGpWgA84kEAbgB8efmFABYAjGUAEkQIPAA0BhEMWC4FAPR1FVWpBdUATGUAkrBBHGpQ1TPUOqLUxitQIAAyvEgIRORBWEQAylAYQWAA5k49_eOVw73F5Q8wjpVulelZOUWlZeQFhwAIKKRTBDhIEpIILIOJ7GDgBAATxgKBgmwA4jAAOrxADyxz6z0GrkYn1AkBAe2oPGunSi72kZCo1E8Eh89m4vD47XEvAyRzAskuRCgAFE9kKoAAhZETcT2ADkGBAICgSscjiAA&debug=false&circleciRepo=&evaluate=false&lineWrap=true&presets=es2015%2Creact%2Cstage-2&targets=&version=6.26.0
+
+const Platform = ReactTV.Platform
+
+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>
+  }
+}
+
+console.log(Platform)
+ReactTV.render(Clock, document.getElementById('root'))
+*/
+
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Platform = ReactTV.Platform;
+
+var Clock = function (_React$Component) {
+  _inherits(Clock, _React$Component);
+
+  function Clock() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Clock);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = { date: new Date() }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Clock, [{
+    key: 'render',
+    value: function render() {
+      if (Platform.webos) {
+        return React.createElement(
+          'div',
+          null,
+          React.createElement(
+            'h1',
+            null,
+            'Hello, ',
+            Platform
+          ),
+          React.createElement(
+            'h2',
+            null,
+            'It is ',
+            this.state.date.toLocaleTimeString()
+          )
+        );
+      }
+
+      return React.createElement(
+        'div',
+        null,
+        'This App is available only at LG WebOS'
+      );
+    }
+  }]);
+
+  return Clock;
+}(React.Component);
+
+console.log(Platform);
+ReactTV.render(Clock, document.getElementById('root'));

examples/clock-vanilla/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>React TV</title>
+</head>
+<body>
+  <div id="root"></div>
+
+  <script src="../../node_modules/react/dist/react.min.js"></script>
+  <script src="../../build/react-tv.js"></script>
+  <script src="./example.js"></script>
+  <script>
+  </script>
+</body>
+</html>

package.json

@@ -4,7 +4,7 @@
   "description": "React development for TV (WebOS, Tizen, Orsay)",
   "main": "src/ReactTVEntry.js",
   "bin": {
-    "react-tv": "./cli/index.js"
+    "react-tv": "./cli"
   },
   "scripts": {
     "build": "node scripts/rollup/build.js",
@@ -19,9 +19,9 @@
     "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",
-    "node-replace": "^0.3.1"
+    "react-dom": "16.0.0-alpha.3"
   },
   "devDependencies": {
     "babel-plugin-external-helpers": "^6.22.0",

src/ReactTVEntry.js

@@ -8,7 +8,7 @@
  */
 
 var reactTVRenderer = require('./renderer/ReactTVFiberEntry');
-var modules = require('./modules');
+var modules = require('./modules/ReactTVModulesEntry');
 
 module.exports = {
   render: reactTVRenderer.render,

src/modules/index.js src/modules/ReactTVModulesEntry.jssrc/modules/index.js renamed to src/modules/ReactTVModulesEntry.js

@@ -10,6 +10,16 @@
 
 'use strict';
 
+const {
+  Namespaces: {html: HTML_NAMESPACE},
+  getIntrinsicNamespace,
+} = require('./shared/DOMNamespaces');
+
+const {
+  DOCUMENT_NODE,
+  DOCUMENT_FRAGMENT_NODE,
+} = require('./shared/HTMLNodeType');
+
 function getOwnerDocumentFromRootContainer(
   rootContainerElement: Element | Document,
 ): Document {
@@ -27,11 +37,11 @@ const ReactTVFiberComponent = {
   ): Element {
     // We create tags in the namespace of their parent container, except HTML
     // tags get no namespace.
-    var ownerDocument: Document = getOwnerDocumentFromRootContainer(
+    const ownerDocument: Document = getOwnerDocumentFromRootContainer(
       rootContainerElement,
     );
-    var domElement: Element;
-    var namespaceURI = parentNamespace;
+    let domElement: Element;
+    let namespaceURI = parentNamespace;
     if (namespaceURI === HTML_NAMESPACE) {
       namespaceURI = getIntrinsicNamespace(type);
     }
@@ -57,8 +67,35 @@ const ReactTVFiberComponent = {
       domElement = ownerDocument.createElementNS(namespaceURI, type);
     }
 
+    console.log(domElement)
     return domElement;
-  }
+  },
+
+  // createTextNode(text: string, rootContainerElement: Element | Document): Text {
+  //   return getOwnerDocumentFromRootContainer(
+  //     rootContainerElement,
+  //   ).createTextNode(text);
+  // },
+
+  // setInitialProperties(
+  //   domElement: Element,
+  //   tag: string,
+  //   rawProps: Object,
+  //   rootContainerElement: Element | Document,
+  // ): void {
+  //   var isCustomComponentTag = isCustomComponent(tag, rawProps);
+  //   if (__DEV__) {
+  //     validatePropertiesInDevelopment(tag, rawProps);
+  //     if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {
+  //       warning(
+  //         false,
+  //         '%s is using shady DOM. Using shady DOM with React can ' +
+  //           'cause things to break subtly.',
+  //         getCurrentFiberOwnerName() || 'A component',
+  //       );
+  //       didWarnShadyDOM = true;
+  //     }
+  // },
 }
 
 module.exports = ReactTVFiberComponent;