Add initial implementation

#1

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('eslint-config-fusion')],
+};

.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+dist-tests/
+coverage/
+.nyc_output/
+
+.DS_Store
+npm-debug.log
+yarn-error.log

.travis.yml

@@ -1,10 +1,13 @@
 dist: trusty
 sudo: false
 language: node_js
-node_js: 8.8.0
+node_js: 8.9.0
 before_install:
 - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.2.1
 - export PATH=$HOME/.yarn/bin:$PATH
+before_script:
+- export DISPLAY=':99.0'
+- sh -e /etc/init.d/xvfb start
 cache:
   yarn: true
 before_deploy:

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Uber Technologies, Inc.
+
+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,49 @@
+# fusion-react
+
+FusionJS entry point for React universal rendering
+
+---
+
+### Installation
+
+```sh
+yarn add fusion-react
+```
+
+---
+
+### Example
+
+```js
+// ./src/main.js
+import React from 'react';
+import App from 'fusion-react';
+
+const Hello = () => <div>Hello</div>
+
+export default function() {
+  return new App(<Hello />);
+}
+```
+
+---
+
+### API
+
+```js
+const app = new App(element);
+```
+
+`app` should be returned by the default exported function of `./src/main.js`
+
+- `element: React.Element` - The root React element for the app
+
+#### Instance methods
+
+```js
+const plugin = app.plugin(factory, dependencies)
+```
+
+- `factory: (dependencies: Object) => Plugin` - Required. The export value of a plugin package
+- `dependencies: Object` - Optional. A map of dependencies for the plugin
+- `plugin: Plugin` - A Fusion [plugin](../core#plugin-api)

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "fusion-react",
+  "description": "FusionJS entry point for React universal rendering",
+  "version": "0.1.4",
+  "license": "MIT",
+  "repository": "fusionjs/fusion-react",
+  "main": "./dist/node.cjs.js",
+  "module": "./dist/node.es.js",
+  "files": ["dist"],
+  "browser": {
+    "./dist/node.cjs.js": "./dist/browser.cjs.js",
+    "./dist/node.es.js": "./dist/browser.es.js"
+  },
+  "es2015": {
+    "./dist/node.cjs.js": "./dist/node.cjs.es2015.js",
+    "./dist/node.es.js": "./dist/node.es.es2015.js",
+    "./dist/browser.cjs.js": "./dist/browser.cjs.es2015.js",
+    "./dist/browser.es.js": "./dist/browser.es.es2015.js"
+  },
+  "devDependencies": {
+    "babel-eslint": "^8.0.0",
+    "create-universal-package": "^1.0.0-rc.14",
+    "eslint": "^4.2.0",
+    "eslint-config-fusion": "^0.1.2",
+    "eslint-plugin-cup": "^1.0.0-rc.4",
+    "eslint-plugin-flowtype": "^2.35.0",
+    "eslint-plugin-prettier": "^2.1.2",
+    "eslint-plugin-react": "^7.1.0",
+    "fusion-core": "^0.1.4",
+    "fusion-react-async": "^0.1.4",
+    "prettier": "1.4.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "tape-cup": "^4.7.1",
+    "unitest": "^1.0.0"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "lint": "eslint . --ignore-path .gitignore",
+    "transpile": "npm run clean && cup build",
+    "build-test": "rm -rf dist-tests && cup build-tests",
+    "just-test":
+      "node_modules/.bin/unitest --browser=dist-tests/browser.js --node=dist-tests/node.js",
+    "test": "npm run build-test && npm run just-test",
+    "prepublish": "npm run transpile"
+  },
+  "peerDependencies": {
+    "fusion-core": "^0.1.4",
+    "fusion-react-async": "^0.1.4",
+    "react": "14.x - 16.x",
+    "react-dom": "14.x - 16.x"
+  },
+  "engines": {
+    "node": ">= 8.9.0"
+  }
+}

src/__tests__/__browser__/client.js

@@ -0,0 +1,16 @@
+/* eslint-env browser */
+
+import test from 'tape-cup';
+import React from 'react';
+import render from '../../client';
+
+test('renders', t => {
+  const root = document.createElement('div');
+  root.id = 'root';
+  document.body.appendChild(root);
+  render(React.createElement('span', null, 'hello'));
+  t.equals(root.firstChild.nodeName, 'SPAN', 'has right tag');
+  t.equals(root.firstChild.textContent, 'hello', 'has right text');
+  document.body.removeChild(root);
+  t.end();
+});

src/__tests__/__node__/server.js

@@ -0,0 +1,12 @@
+/* eslint-env browser */
+
+import test from 'tape-cup';
+import React from 'react';
+import render from '../../server';
+
+test('renders', t => {
+  const rendered = render(React.createElement('span', null, 'hello'));
+  t.ok(/<span/.test(rendered), 'has right tag');
+  t.ok(/hello/.test(rendered), 'has right text');
+  t.end();
+});

src/__tests__/plugin.js

@@ -0,0 +1,28 @@
+import test from 'tape-cup';
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Plugin} from 'fusion-core';
+import ReactPlugin from '../plugin';
+
+test('.create works', t => {
+  class Foo {
+    foo() {}
+  }
+  const foo = () => new Plugin({Service: Foo});
+  const plugin = ReactPlugin.create('foo', foo);
+  t.equals(typeof plugin, 'function', 'is plugin');
+  t.ok(plugin().of() instanceof Foo, 'extends base');
+  t.equals(typeof plugin().of().foo, 'function', 'has expected method');
+
+  const element = React.createElement('div');
+  const ctx = {element};
+  plugin().middleware(ctx, () => Promise.resolve()).then(() => {
+    t.notEquals(ctx.element, element, 'wraps provider');
+    t.equals(ctx.element.type.displayName, 'FooProvider');
+    t.equals(
+      ctx.element.type.childContextTypes.foo,
+      PropTypes.object.isRequired
+    );
+    t.end();
+  });
+});

src/client.js

@@ -0,0 +1,9 @@
+/* eslint-env browser */
+import ReactDOM from 'react-dom';
+
+export default el => {
+  const domElement = document.getElementById('root');
+  ReactDOM.hydrate
+    ? ReactDOM.hydrate(el, domElement)
+    : ReactDOM.render(el, domElement);
+};

src/hoc.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default {
+  create: (name, mapServiceToProps) => {
+    if (!mapServiceToProps) {
+      mapServiceToProps = service => ({[name]: service});
+    }
+    return Component => {
+      class HOC extends React.Component {
+        constructor(props, ctx) {
+          super(props, ctx);
+          this.service = ctx[name];
+        }
+        render() {
+          const props = {...this.props, ...mapServiceToProps(this.service)};
+          return React.createElement(Component, props);
+        }
+      }
+      const displayName = Component.displayName || Component.name;
+      HOC.displayName =
+        'With' +
+        name.replace(/^./, c => c.toUpperCase()) +
+        '(' +
+        displayName +
+        ')';
+      HOC.contextTypes = {
+        [name]: PropTypes.object.isRequired,
+      };
+      return HOC;
+    };
+  },
+};

src/index.js

@@ -0,0 +1,23 @@
+/* eslint-env browser */
+import CoreApp from 'fusion-core';
+import {compose} from 'fusion-core';
+import {prepare, PreparePlugin} from 'fusion-react-async';
+import serverRender from './server';
+import clientRender from './client';
+
+import ProviderPlugin from './plugin';
+import ProvidedHOC from './hoc';
+import Provider from './provider';
+
+export default class App extends CoreApp {
+  constructor(root) {
+    super(root, el => {
+      return prepare(el).then(() => {
+        return __NODE__ ? serverRender(el) : clientRender(el);
+      });
+    });
+    this.plugins.push(compose([PreparePlugin(), this.plugins.pop()]));
+  }
+}
+
+export {ProviderPlugin, ProvidedHOC, Provider};

src/plugin.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Provider from './provider';
+
+export default {
+  create: (name, plugin, BaseComponent) => (...args) => {
+    const p = plugin(...args);
+    const middleware = p.middleware;
+    const ProviderComponent = Provider.create(name, BaseComponent);
+    p.middleware = function(ctx, next) {
+      if (ctx.element) {
+        ctx.element = React.createElement(
+          ProviderComponent,
+          {service: this.of(ctx)},
+          ctx.element
+        );
+      }
+      return middleware.call(p, ctx, next);
+    };
+    return p;
+  },
+};

src/provider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default {
+  create: (name, BaseComponent = React.Component) => {
+    class Provider extends BaseComponent {
+      getChildContext() {
+        return {[name]: this.props.service};
+      }
+      render() {
+        return React.Children.only(this.props.children);
+      }
+    }
+    Provider.childContextTypes = {
+      ...(Provider.childContextTypes || {}),
+      [name]: PropTypes.object.isRequired,
+    };
+    Provider.displayName =
+      name.replace(/^./, c => c.toUpperCase()) + 'Provider';
+
+    return Provider;
+  },
+};

src/server.js

@@ -0,0 +1,4 @@
+/* eslint-env node */
+import {renderToString} from 'react-dom/server';
+
+export default el => `<div id='root'>${renderToString(el)}</div>`;