Initial implementation

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-2"]
+}

.eslintrc

@@ -0,0 +1,214 @@
+{
+  "parser": "babel-eslint",
+
+  "plugins": [
+    "babel"
+  ],
+
+  "env": {
+    "es6": true,
+    "node": true
+  },
+
+  "ecmaFeatures": {
+    "arrowFunctions": true,
+    "binaryLiterals": true,
+    "blockBindings": true,
+    "classes": true,
+    "defaultParams": true,
+    "destructuring": true,
+    "experimentalObjectRestSpread": true,
+    "forOf": true,
+    "generators": true,
+    "globalReturn": true,
+    "jsx": true,
+    "modules": true,
+    "objectLiteralComputedProperties": true,
+    "objectLiteralDuplicateProperties": true,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "octalLiterals": true,
+    "regexUFlag": true,
+    "regexYFlag": true,
+    "restParams": true,
+    "spread": true,
+    "superInFunctions": true,
+    "templateStrings": true,
+    "unicodeCodePointEscapes": true
+  },
+
+  "rules": {
+    "babel/arrow-parens": [2, "as-needed"],
+
+    "array-bracket-spacing": [2, "always"],
+    "arrow-spacing": 2,
+    "block-scoped-var": 0,
+    "brace-style": [2, "1tbs", {"allowSingleLine": true}],
+    "callback-return": 2,
+    "camelcase": [2, {"properties": "always"}],
+    "comma-dangle": 0,
+    "comma-spacing": 0,
+    "comma-style": [2, "last"],
+    "complexity": 0,
+    "computed-property-spacing": [2, "never"],
+    "consistent-return": 0,
+    "consistent-this": 0,
+    "curly": [2, "all"],
+    "default-case": 0,
+    "dot-location": [2, "property"],
+    "dot-notation": 0,
+    "eol-last": 2,
+    "eqeqeq": 2,
+    "func-names": 0,
+    "func-style": 0,
+    "generator-star-spacing": [0, {"before": true, "after": false}],
+    "guard-for-in": 2,
+    "handle-callback-err": [2, "error"],
+    "id-length": 0,
+    "id-match": [2, "^(?:_?[a-zA-Z0-9]*)|[_A-Z0-9]+$"],
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "init-declarations": 0,
+    "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
+    "linebreak-style": 2,
+    "lines-around-comment": 0,
+    "max-depth": 0,
+    "max-len": [2, 80, 4],
+    "max-nested-callbacks": 0,
+    "max-params": 0,
+    "max-statements": 0,
+    "new-cap": 0,
+    "new-parens": 2,
+    "newline-after-var": 0,
+    "no-alert": 2,
+    "no-array-constructor": 2,
+    "no-bitwise": 0,
+    "no-caller": 2,
+    "no-catch-shadow": 0,
+    "no-class-assign": 2,
+    "no-cond-assign": 2,
+    "no-console": 1,
+    "no-const-assign": 2,
+    "no-constant-condition": 2,
+    "no-continue": 0,
+    "no-control-regex": 0,
+    "no-debugger": 1,
+    "no-delete-var": 2,
+    "no-div-regex": 2,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-else-return": 2,
+    "no-empty": 2,
+    "no-empty-character-class": 2,
+    "no-empty-label": 2,
+    "no-eq-null": 0,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": 0,
+    "no-extra-semi": 2,
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implicit-coercion": 2,
+    "no-implied-eval": 2,
+    "no-inline-comments": 0,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-invalid-this": 0,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 0,
+    "no-lone-blocks": 2,
+    "no-lonely-if": 2,
+    "no-loop-func": 0,
+    "no-mixed-requires": [2, true],
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": 0,
+    "no-native-reassign": 0,
+    "no-negated-in-lhs": 2,
+    "no-nested-ternary": 0,
+    "no-new": 2,
+    "no-new-func": 0,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-param-reassign": 2,
+    "no-path-concat": 2,
+    "no-plusplus": 0,
+    "no-process-env": 0,
+    "no-process-exit": 0,
+    "no-proto": 2,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-restricted-modules": 0,
+    "no-return-assign": 2,
+    "no-script-url": 2,
+    "no-self-compare": 0,
+    "no-sequences": 2,
+    "no-shadow": 2,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-sparse-arrays": 2,
+    "no-sync": 2,
+    "no-ternary": 0,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-undefined": 0,
+    "no-underscore-dangle": 0,
+    "no-unexpected-multiline": 2,
+    "no-unneeded-ternary": 2,
+    "no-unreachable": 2,
+    "no-unused-expressions": 2,
+    "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],
+    "no-use-before-define": 0,
+    "no-useless-call": 2,
+    "no-var": 0,
+    "no-void": 2,
+    "no-warning-comments": 0,
+    "no-with": 2,
+    "object-curly-spacing": [0, "always"],
+    "object-shorthand": [2, "always"],
+    "one-var": [2, "never"],
+    "operator-assignment": [2, "always"],
+    "operator-linebreak": [2, "after"],
+    "padded-blocks": 0,
+    "prefer-const": 0,
+    "prefer-reflect": 0,
+    "prefer-spread": 0,
+    "quote-props": [2, "as-needed"],
+    "quotes": [2, "single"],
+    "radix": 2,
+    "require-yield": 2,
+    "semi": [2, "always"],
+    "semi-spacing": [2, {"before": false, "after": true}],
+    "sort-vars": 0,
+    "space-after-keywords": [2, "always"],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
+    "space-in-parens": 0,
+    "space-infix-ops": [2, {"int32Hint": false}],
+    "space-return-throw-case": 2,
+    "space-unary-ops": [2, {"words": true, "nonwords": false}],
+    "spaced-comment": [2, "always"],
+    "strict": 0,
+    "use-isnan": 2,
+    "valid-jsdoc": 0,
+    "valid-typeof": 2,
+    "vars-on-top": 0,
+    "wrap-iife": 2,
+    "wrap-regex": 0,
+    "yoda": [2, "never", {"exceptRange": true}]
+  }
+}

.gitignore

@@ -0,0 +1,9 @@
+*.swp
+*~
+*.iml
+.*.haste_cache.*
+.DS_Store
+.idea
+npm-debug.log
+node_modules
+dist

.npmignore

@@ -0,0 +1,10 @@
+*.swp
+*~
+*.iml
+.*.haste_cache.*
+.DS_Store
+.idea
+.babelrc
+.eslintrc
+npm-debug.log
+lib

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Kadira Inc. <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,105 @@
+# React Mounter
+
+React Mounter lets you mount React components to DOM easily.
+
+Normally, when you are rendering a React Component to the DOM, you need to do following things basically,
+
+* Create a root DOM node as the root node for React
+* Wait for the DOM to load properly
+* Then render the component
+
+React Mounter does all these for you. You just ask it to render a component. 
+
+Additionally, React Mounter can work as a simple Layout Manager where you can use with Flow Router.
+
+> Support for Server Side Rendering with FlowRouter SSR is coming soon.
+
+## Basic Usage
+
+Install with:
+
+```
+npm i --save react-mounter react react-dom
+```
+
+> `react` and `react-dom` are peerDependencies of `react-mounter`. So, you need to install them into your app manually.
+
+Then let's mount a component.
+
+```js
+import React from 'react';
+import {mount} from 'react-mounter';
+
+const WelcomeComponent = ({name}) => (<p>Hello, {name}</p>);
+
+mount(WelcomeComponent, {name: 'Arunoda'});
+```
+
+## Using as a Layout Manager
+
+You can user `react-mointer` as a layout Manager for Flow Router. Here's how to do it.
+
+Let's say we've a layout called MainLayout.
+
+```js
+const MainLayout = ({content}) => (
+    <div>
+      <header>
+        This is our header
+      </header>
+      <main>
+        {content}
+      </main>
+    </div>
+);
+```
+
+Now let's try render to our `WelcomeComponent` into the `MainLayout`.
+
+```js
+mount(MainLayout, {
+  content: <WelcomeComponent name="Arunoda" />
+});
+```
+
+That's it.
+
+### To use the React Context
+
+In order to use the React context, you need to render the `content` component inside the layout. So we need to pass a function instead of the React element. Here's how to do it.
+
+```js
+const MainLayout = ({content}) => (
+    <div>
+      <header>
+        This is our header
+      </header>
+      <main>
+        {content()}
+      </main>
+    </div>
+);
+```
+
+> See, now content is a function.
+
+Then, we can pass the Welcome component like this:
+
+```js
+mount(MainLayout, {
+  content: () => (<WelcomeComponent name="Arunoda" />)
+});
+```
+
+## Configure Root DOM node
+
+By default React Mounter render our components into a DOM node called `react-root`. But, you can configure if by like below:
+
+```js
+const {mount, withOptions} from `react-mounter`;
+const mount2 = withOptions({
+    rootId: 'the-root', 
+    rootProps: {'className': 'some-class-name'}
+}, mount);
+```
+

index.js

@@ -0,0 +1 @@
+module.exports = require('./dist/index');

lib/__tests__/index.js

@@ -0,0 +1,11 @@
+import {describe, it} from 'mocha';
+import {expect} from 'chai';
+import mock from 'mock-require';
+
+mock('domready', () => {});
+
+const {mount} = require('../');
+
+describe('react-mounter', () => {
+
+});