Merge pull request nitin42#6 from ergenekonyigit/master

react and react-reconciler packages upgraded

Author: nitin42

README.md

@@ -10,7 +10,7 @@
 
 ## Introduction
 
-This is a small tutorial on how to build your custom React renderer and render the components to the host environment you need. The tutorial is divided into four parts - 
+This is a small tutorial on how to build your custom React renderer and render the components to the host environment you need. The tutorial is divided into four parts -
 
 * **Part 1** - Creating a React reconciler (using [`react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler) package).
 
@@ -28,7 +28,7 @@ In part one, we will create a React reconciler using the [`react-reconciler`](ht
 
 ### [Part-II](./part-two.md)
 
-In part two, we will create a public interface to the reconciler i.e a renderer. We will create a custom method for `createElement` and will also architect the component API for our example. 
+In part two, we will create a public interface to the reconciler i.e a renderer. We will create a custom method for `createElement` and will also architect the component API for our example.
 
 ### [Part-III](./part-three.md)
 

package.json

@@ -9,13 +9,13 @@
   "dependencies": {
     "fbjs": "^0.8.16",
     "officegen": "^0.4.5",
-    "react": "^16.0.0",
-    "react-reconciler": "^0.2.0"
+    "react": "^16.2.0",
+    "react-reconciler": "^0.7.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "jest": "^21.2.1"

part-four.md

@@ -23,7 +23,7 @@ async function render(element, filePath) {
   WordRenderer.updateContainer(element, node, null);
 
   const output = parse(container).toBuffer();
-  
+
   const stream = fs.createWriteStream(filePath);
 
   await new Promise((resolve, reject) => {
@@ -68,7 +68,7 @@ Finally we parse our input component to render all the children and props and ge
 
 Still having some doubts? Check out the [FAQs](./faq.md).
 
-Congrats! You've have successfully completed the tutorial. Full source code for the tutorial is already available in this repository ([src](./src)). If you want to read the whole source code then follow this order - 
+Congrats! You've have successfully completed the tutorial. Full source code for the tutorial is already available in this repository ([src](./src)). If you want to read the whole source code then follow this order -
 
 [`reconciler`](./src/reconciler/index.js)  => [`components`](./src/components/)  => [`createElement`](./src/utils/createElement) => [`parse the input component`](./src/parse/index.js) => [`render method`](./src/render/index.js)
 

part-one.md

@@ -12,7 +12,7 @@ Let's get started!
 We will first install the dependencies.
 
 ```
-npm install react-reconciler@0.2.0 fbjs@0.8.16
+npm install react-reconciler@0.7.0 fbjs@0.8.16
 ```
 
 Let's import the `Reconciler` from `react-reconciler` and also the other modules.
@@ -103,27 +103,27 @@ const WordRenderer = Reconciler({
         parentInstance.document = child;
       }
     },
-    
+
     removeChild(parentInstance, child) {
       parentInstance.removeChild(child);
     },
 
     removeChildFromContainer(parentInstance, child) {
       parentInstance.removeChild(child);
     },
-  
+
     insertBefore(parentInstance, child, beforeChild) {
       // noob
     },
-  
+
     commitUpdate(instance, updatePayload, type, oldProps, newProps) {
       // noop
     },
-  
+
     commitMount(instance, updatePayload, type, oldProps, newProps) {
       // noop
     },
-  
+
     commitTextUpdate(textInstance, oldText, newText) {
       textInstance.children = newText;
     },
@@ -141,9 +141,9 @@ Example - Let's say we render,
 
 ```js
 <Text>Hello World</Text>
-```  
+```
 
-`createInstance` will then return the information about the `type` of an element (' TEXT '), props ( { children: 'Hello World' } ), and the root instance (`WordDocument`). 
+`createInstance` will then return the information about the `type` of an element (' TEXT '), props ( { children: 'Hello World' } ), and the root instance (`WordDocument`).
 
 **Fiber**
 
@@ -183,11 +183,11 @@ A fiber is work on a component that needs to be done or was done. Atmost, a comp
 
 **`appendInitialChild`**
 
-It appends the children. If children are wrapped inside a parent component (eg: `Document`), then we will add all the children to it else we 
+It appends the children. If children are wrapped inside a parent component (eg: `Document`), then we will add all the children to it else we
 will create a property called `document` on a parent node and append all the children to it. This will be helpful when we will parse the input component
 and make a call to the render method of our component.
 
-Example - 
+Example -
 
 ```js
 const data = document.render(); // returns the output
@@ -207,7 +207,7 @@ Renderer mounts the host component but may schedule some work to done after like
 
 **`hostContext`**
 
-Host context is an internal object which our renderer may use based on the current location in the tree. In DOM, this object 
+Host context is an internal object which our renderer may use based on the current location in the tree. In DOM, this object
 is required to make correct calls for example to create an element in html or in MathMl based on current context.
 
 **`getPublicInstance`**
@@ -256,8 +256,6 @@ Creates an instance of a text node.
 
 You can also inject your renderer into react-devtools to debug the host components of your environment. Earlier, it wasn't possible for third party renderers but now using the return value of `reconciler` instance, it is possible to inject the renderer into react-devtools.
 
-> Note - This wasn't supported in `react-reconciler` version 0.2.0. So you'll need to update it to the current beta version 0.3.0-beta.1
-
 **Usage**
 
 Install standalone app for react-devtools

part-three.md

@@ -13,7 +13,7 @@ create a function for parsing the input component (input to the `render` method)
 const parse = (input) => {
   function parseComponent(inputComponent) {
     const document = inputComponent.document;
-    
+
     document.render(); // Flush everything
 
     return inputComponent;
@@ -46,13 +46,13 @@ function parseComponent(inputComponent) {
 ```
 
 In the above function, we create a variable `document` that represents a parentInstance or a component we want to render.
-This property is accessible only because of - 
+This property is accessible only because of -
 
 ```js
 appendInitialChild(parentInstance, child) {
   // if (parentInstance.appendChild) {
     // parentInstance.appendChild(child);
-  // } 
+  // }
   else {
     parentInstance.document = child; 👈
   }

part-two.md

@@ -42,16 +42,16 @@ class Document {
   constructor(root, props) {
     this.root = root;
     this.props = props;
-    
+
     // Create a new paragraph
     this.adder = this.root.doc.createP();
   }
-  
+
   // Add children
   appendChild(child) {
     this.children.push(child);
   }
-  
+
   // Remove children
   removeChild(child) {
     const index = this.children.indexOf(child);
@@ -83,10 +83,10 @@ Let's see what's going on here!
 
 **`constructor()`**
 
-In our `constructor`, we initialise the `root` instance and `props`. We also create a reference to our `doc` instance which we created earlier in `WordDocument.js`. This reference is then 
+In our `constructor`, we initialise the `root` instance and `props`. We also create a reference to our `doc` instance which we created earlier in `WordDocument.js`. This reference is then
 use to create paragraph by adding text nodes to it.
 
-Example - 
+Example -
 
 ```
 this.adder.addText(__someText__)
@@ -136,7 +136,7 @@ class Text {
   constructor(root, props) {
     this.root = root;
     this.props = props;
-    
+
     this.adder = this.root.doc.createP();
   }
 

yarn.lock

@@ -766,9 +766,9 @@ babel-polyfill@^6.26.0:
     core-js "^2.5.0"
     regenerator-runtime "^0.10.5"
 
-babel-preset-env@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.0.tgz#2de1c782a780a0a5d605d199c957596da43c44e4"
+babel-preset-env@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
   dependencies:
     babel-plugin-check-es2015-constants "^6.22.0"
     babel-plugin-syntax-trailing-function-commas "^6.22.0"
@@ -2625,27 +2625,18 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
-react-reconciler@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.2.0.tgz#59407c3e868211a7a6218070a55dfbc9c93b2243"
+react-reconciler@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
+react@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"