chaging default rootElement to be a new element

Noam Elboim · Noam Elboim · commit b6454b7f796b · 2017-10-13T11:42:22.000+03:00
diff --git a/README.md b/README.md
@@ -61,7 +61,7 @@ UiZoo.init(documentation: Object, components: Object, rootElement: HTMLElement?,
 
 **components** - Object, mapping of components name to components. See [example](https://github.com/myheritage/uizoo.js/blob/master/client/components.js). 
 
-**rootElement** - HTMLElement, will bootstrap UiZoo on that Element. Default is an element with the id 'library-_-root'
+**rootElement** - HTMLElement, will bootstrap UiZoo on that Element. Default is a new element on the body.
 
 **baseRoute** Route to be the base before the UiZoo routes. Default to '/'. for example if the UiZoo is on your site like so: 'www.mysite.com/my/zoo/', the base route should be '/my/zoo/'.
 
@@ -119,7 +119,7 @@ To add tests, use the following steps -
 
 First, make sure the app is up and running:
 ```
-gulp
+npm start
 ```
 The first time tests are run, install the npm dependencies:
 ```
diff --git a/client/index.js b/client/index.js
@@ -14,20 +14,22 @@ import mapComponentsByModule from './services/componentByModuleMapper';
 
 window._extend = _.extend; // to be used instead of Object.assign
 
-const defaultRoot = document.getElementById('library-_-root');
-
 /**
- * Init
- * @param {Object} documentation
- * @param {Object} components
- * @param {HTMLElement} rootElement
+ * Init - render UiZoo with documentation and components mappings
+ * @param {Object} [documentation]
+ * @param {Object} [components]
+ * @param {HTMLElement} [rootElement] will default to a new element on the body
  */
 function init(
     documentation = libraryDocs,
     components = libraryData,
-    rootElement = defaultRoot,
+    rootElement,
     baseRoute = '/'
 ) {
+    if (!rootElement) {
+        rootElement = document.createElement('div');
+        document.body.appendChild(rootElement);
+    }
     checkDependencies(documentation, components);
 
     const compiler = createCompiler(components); // JSX compiler
diff --git a/index.html b/index.html
@@ -8,7 +8,6 @@
         <link rel="stylesheet" href="/dist/index.css">
     </head>
     <body>
-        <div id="library-_-root"></div>
         <script src="/node_modules/underscore/underscore-min.js"></script>
         <script src="/node_modules/react/umd/react.production.min.js"></script>
         <script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build:iife": "./node_modules/.bin/rollup -c rollup.config.js -o dist/index.js -f iife -n UiZoo",
     "build:cjs": "./node_modules/.bin/rollup -c rollup.config.js -o dist/index.cjs.js -f cjs -n UiZoo",
     "build:es": "./node_modules/.bin/rollup -c rollup.config.js -o dist/index.es.js -f es -n UiZoo",
-    "gulp:w": "gulp",
+    "gulp:w": "./node_modules/.bin/gulp",
     "test": "npm start & SERVER_PID=$!; (cd tests; npm i && node run-tests.js); kill $SERVER_PID"
   },
   "main": "dist/index.cjs.js",
