Merge pull request #27 from a-ignatov-parc/fix-tvos-crash

Fixed app crash in tvOS 11.3

.circleci/config.yml

@@ -121,7 +121,7 @@ jobs:
           name: Publish to npm and remove "next" tag
           command: |
             npm publish
-            npm run remove-next-tag
+            npm run remove-next-tag || true
 
   mark-old:
     <<: *job-configuration

README.md

@@ -43,8 +43,8 @@ This is the new version of tvdml, `6.X`.
 - Switched TVML renderer to React.js (**Breaking**).
 - Unified different ways to create TVML documents (**Breaking**).
 - Simpler syntax to create stylesheets using `<style>` element (**Breaking**).
-- Improved Menu button click detection.
-- Changed `TVDML.renderModal()` rerendering behavour (**Breaking**).
+- Improved Menu button detection.
+- Changed `TVDML.renderModal()` rerendering behavior (**Breaking**).
 
 ### Migration guide
 
@@ -54,25 +54,30 @@ For the older version of tvdml, refer to the [`5.X` branch](https://github.com/a
 
 ## Intro
 
-This is a library that main goal is to greatly simplify app development for Apple TV using [React.js](https://reactjs.org/) and providing tools to solve problems like:
+This is a library that's the main goal is to greatly simplify app development for Apple TV using [React.js](https://reactjs.org/) and provide tools to solve problems like:
 
 - React.js integration with TVML and TVJS.
 - Routing.
 - Event binding.
-- Detecting "Menu" button.
+- "Menu" button detection.
 
 ## System Requirements
 
 Starting from `4.X` TVDML drops support for tvOS < 10. If you need that support please consider using [`3.X`](https://github.com/a-ignatov-parc/tvdml/tree/v3.0.4).
 
 ## Getting started
 
-TVDML is shipping as [npm package](https://www.npmjs.com/package/tvdml) and can be installed with npm. In addition you need to install React.js.
+TVDML is shipping as [npm package](https://www.npmjs.com/package/tvdml) and can be installed with npm or `yarn`. In addition you'll need to install React.js.
 
 ```
 npm install --save tvdml react
 ```
 
+Or using `yarn`
+```
+yarn add tvdml react
+```
+
 TVDML is written in ES6 and built using UMD wrapper so it can be used in any environment with any of this ways:
 
 ```js
@@ -153,9 +158,9 @@ Well! Now we know how to write apps using ES6 and JSX so let's start from the ba
 
 ## Routing
 
-tvOS provided great foundation to write apps using [TVML](https://developer.apple.com/library/content/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/index.html) and [TVJS](https://developer.apple.com/reference/tvmljs). But you need somehow to react on user's activity and map it to UI.
+tvOS provided great foundation to write apps using [TVML](https://developer.apple.com/library/content/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/index.html) and [TVJS](https://developer.apple.com/reference/tvmljs). But you need somehow to react on user's activity and map it to the UI.
 
-To help you solving this issues TVDML provides navigation module.
+To help you solve this issues TVDML provides navigation module.
 
 ```js
 import React from 'react';
@@ -191,9 +196,9 @@ TVDML
   )));
 ```
 
-> This is small example of using navigation and rendering modules to handle routes and show them to user.
+> This is a small example of navigation and rendering modules usage which helps handle routes and show views to the user.
 
-Here is a complete api of navigation module:
+Here is a complete navigation module api:
 
 - `TVDML.handleRoute(routeName)` — Creates pipeline for route handling. Only one pipeline can be created for the route. Otherwise it will throw error.
 
@@ -275,7 +280,7 @@ With TVDML your main way to create documents will be React.js.
 
 To render any react component you need to provide rendering factory to `TVDML.render` pipeline.
 
-Pipeline's payload will be passed as first argument to rendering factory so you'll be able to map it's props to rendering tree.
+Pipeline's payload will be passed as the first argument to rendering factory so you'll be able to map it's props to rendering tree.
 
 ```js
 import React from 'react';
@@ -573,7 +578,7 @@ List of available handlers:
 
 In tvOS 11 [`DataItem`](https://developer.apple.com/documentation/tvmljs/dataitem) binding api was presented to fix performance issues with large documents that may ended up with very long parsing and rendering.
 
-Here is a [short example](https://developer.apple.com/library/content/documentation/TVMLKitJS/Conceptual/TVMLProgrammingGuide/GeneratingContentForYourApp.html) how apple suggests to use it.
+Here is a [short example](https://developer.apple.com/library/content/documentation/TVMLKitJS/Conceptual/TVMLProgrammingGuide/GeneratingContentForYourApp.html) how Apple suggests to use it.
 
 So now you may wondering how we can use this cool feature in JSX?
 

package.json

@@ -61,6 +61,8 @@
     "react": "^16.3.0"
   },
   "files": [
+    "LICENSE",
+    "README.md",
     "dist"
   ]
 }

src/navigation/hooks.js

@@ -12,8 +12,8 @@ function unmount(document) {
    * This is just a guess but still can be handy.
    */
   document.possiblyDismissedByUser = true;
-  ReactTVML.unmountComponentAtNode(document);
   document.isAttached = false;
+  ReactTVML.unmountComponentAtNode(document);
 }
 
 function handleUnload({ target: { ownerDocument: document } }) {

src/react-tvml/index.js

@@ -541,6 +541,14 @@ const TVMLRenderer = ReactFiberReconciler({
     removeChildFromContainer(container, child) {
       if (container.nodeType === COMMENT_NODE) {
         container.parentNode.removeChild(child);
+      } else if (container.nodeType === DOCUMENT_NODE) {
+        /**
+         * Starting from tvOS 11.3 if we try to remove children from dismissed
+         * document we'll get uncaught exception.
+         */
+        if (container.isAttached) {
+          container.removeChild(child);
+        }
       } else {
         container.removeChild(child);
       }