Initial commit

.eslintrc.js

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

.gitignore

@@ -0,0 +1,8 @@
+# TODO get the nyc_output put into .fusion
+.nyc_output
+.fusion
+.vscode
+.DS_Store
+config/secrets/secrets.json
+yarn-error.log
+node_modules

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js:
+- '8.9'
+before_install:
+- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.2.1
+- export PATH=$HOME/.yarn/bin:$PATH
+env:
+  global:
+  - secure: ftFMQWQ9ho7loqPlKaK26mxnFRah2OkWWt7gowsmPsK9rhd9RvvJ8PnloRfjxelkuF3GYyzrujOiwedi1JPUxB/tPr4phLoypI7ISbdZ7tQxzdv4KdKuoTv/ChXkLyG73/L1KJPZbyV7RrU8GgLZh3msLLtcEmQiyHhPuKAiEvWPYSNdN0SEIEiIk2Vj48XXtMC1iywPYgfiVvwmD677B1hOeEbrET8u+b9ZyIBBoy2jX35CaT50AYt0pXyenlj5hD44JRnlod7hyv7Fnyp5LJI4H5H67emxnkdy28kTpYNigiYPHFbpEyKR1rreueyOfKAlPtg7qnwJp4xSv8kbcu4CDl3r8a2VP/oJcUNrJsIhW0HgMAjj1DHd9EqckHQMbIgX3Kqxwzu8jWSSyCzlHO3IP0Ke7Jb/t3nh1AMGiTMj2ZQ/0zHbztLdI4IxupG7TPkEGvCvz7Rb7OITOAoOt7dC6S3YxzqrtrhUmTAVuQiDVqXfNkRBzXAKpjKxbvIo3ddOKNvKspPsl0f0Heq76ne1WCMc/ouOR4EOXHw+vam490p+LC7a0ffQHLr0qJ2lTuZv8duoET5B8bbrmdLmAtOX0OvRqid2UiUwby8DXkS9BgobjZdSd3T92Fi83S2xC5ZznKMFps/UEQeZLavGEbuKl1EGS2m883S8K1THGSk=
+  - secure: rlmiXZCgX3rV/4HGIKslXr6V/6Yhr0YBp1zmFk8UYZlProqbfo+2BlHG4d+L8oKS6ZW6lMN5KVwtHbsyapqX5WLe4WbgKpf8p9k4Ux/OTWVnXVEtwwLVTuO+EWHIo8pIj5nstSwujrQZHa0q5F7mIi321KpF/+4Ev8r77djOZ6BWBIox4v9Np/RP56XDQzf/ugA2uO5+CaTPrJAHlMecWFCBTdc8b0E1rylsGveKHfAG+1cb7PykA/X3KoTLQcXszCvrTz47LAUTfBCxIDUK69Ij9REmX2hqF1bFsvwPbO4UJEgFCjOiGZJWcEGtjEY+eZ+1wpY7jQYIstHtIKPuR/JwsCa9XXj3+l5rUbsjLNIv75md1r3AeKQwSPxVj2is1STyaI2uwlGdmtcS/eixvzv0YygF9K0O5GWw6GfLa3pc56ZkxQ7lh+YgiqI1SMYmtvseR3kpr3BPaLGIRxIDWiUJhv5nRTtbA4vd1riFKA4MNMKspW6RVuOar41zAl2J60nSUjqpJkkbp1+Nt10NHvDPW3imQrYpcjMRJKLo6GtZH97LRLiADP5GKotE5q2bE9Uz/WpxcGWc/ETFIvxjyTTycmdtHpLDID3IrKmCm8Tcq/CY9LulWBr7L9xQspqEHn8hQ6hOMBDlG4owl1mciEBxlWaUNSwZqZD4dLkxsko=

.zuul.yml

@@ -0,0 +1,15 @@
+ui: tape
+concurrency: 1
+browsers:
+  - name: chrome
+    version: latest
+  - name: firefox
+    version: latest
+  - name: safari
+    version: latest
+  - name: microsoftedge
+    version: latest
+  - name: iphone
+    version: latest
+  - name: android
+    version: latest

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 @@
+# browser-tests

package.json

@@ -0,0 +1,75 @@
+{
+  "name": "browser-tests",
+  "private": true,
+  "version": "0.1.0",
+  "description": "Example app for cross-browser testing",
+  "scripts": {
+    "lint": "eslint . --ignore-path .gitignore",
+    "bla": "fusion bla",
+    "profile": "fusion profile",
+    "sizes": "npm run build -- --production && fusion sizes",
+    "dev": "fusion dev",
+    "build": "fusion build",
+    "start": "fusion start",
+    "build-test": "fusion build --test",
+    "browser-test": "zuul -- .fusion/dist/test/client/client-main.js",
+    "test": "npm run build-test && npm run browser-test",
+    "_test": "fusion test",
+    "cover": "fusion test --cover",
+    "source-map-explorer": "fusion source-map-explorer",
+    "check": "fusion check"
+  },
+  "dependencies": {
+    "fast-async": "^6.3.0",
+    "fusion-cli": "^0.1.4",
+    "fusion-core": "^0.1.4",
+    "fusion-plugin-browser-performance-emitter": "^0.1.4",
+    "fusion-plugin-csrf-protection-react": "^0.1.4",
+    "fusion-plugin-error-handling": "^0.1.4",
+    "fusion-plugin-i18n-react": "^0.1.4",
+    "fusion-plugin-jwt": "^0.1.4",
+    "fusion-plugin-node-performance-emitter": "^0.1.4",
+    "fusion-plugin-react-redux": "^0.1.4",
+    "fusion-plugin-react-router": "^0.1.4",
+    "fusion-plugin-rpc-react": "^0.1.4",
+    "fusion-plugin-rpc-redux-react": "^0.1.4",
+    "fusion-plugin-styletron-react": "^0.1.4",
+    "fusion-plugin-universal-events-react": "^0.1.4",
+    "fusion-plugin-universal-logger": "^0.1.4",
+    "fusion-react": "^0.1.4",
+    "fusion-react-async": "^0.1.4",
+    "fusion-redux-action-emitter-enhancer": "^0.1.4",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-redux": "^5.0.6",
+    "recompose": "^0.25.0",
+    "redux": "^3.7.2",
+    "unfetch": "^3.0.0",
+    "winston": "2.3.1",
+    "zuul": "^3.11.1"
+  },
+  "devDependencies": {
+    "babel-eslint": "^8.0.0",
+    "enzyme": "^2.7.1",
+    "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",
+    "nightmare": "^2.9.1",
+    "node-fetch": "^1.6.3",
+    "prettier": "1.4.2",
+    "react-addons-test-utils": "^15.4.2",
+    "react-hot-loader": "^3.0.0-beta.7",
+    "react-test-renderer": "^15.5.4",
+    "request": "^2.81.0",
+    "tape": "^4.6.3"
+  },
+  "TODO": "Can we either always add this or figure out some way to know when to add it?",
+  "clientHotLoaderEntry": "react-hot-loader/patch",
+  "engines": {
+    "node": ">= 8.9.0"
+  },
+  "license": "MIT"
+}

src/components/csrf-protection-example.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {withCsrfProtection} from 'fusion-plugin-csrf-protection-react';
+
+class FetchingComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      status: null,
+    };
+  }
+  componentDidMount() {
+    const {fetch} = this.props.csrfProtection;
+    fetch('/test-fetch', {method: 'POST'}).then(resp => {
+      this.setState({
+        loading: false,
+        status: resp.status,
+      });
+    });
+  }
+  render() {
+    if (this.state.loading) {
+      return <div>Loading...</div>;
+    }
+    return <div>Fetch request responded with: {this.state.status}</div>;
+  }
+}
+
+export default withCsrfProtection(FetchingComponent);

src/components/image.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import {assetUrl} from 'fusion-core';
+
+export default function Image() {
+  return <img src={assetUrl('../../static/test.png')} />;
+}

src/components/redux-example.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+function Counter({count, increment, decrement}) {
+  return (
+    <div>
+      <div>The count is {count}</div>
+      <button onClick={() => increment()}>Increment Counter</button>
+      <button onClick={() => decrement()}>Decrement Counter</button>
+    </div>
+  );
+}
+
+export default connect(
+  state => ({
+    count: state.count,
+  }),
+  dispatch => ({
+    increment: () => dispatch({type: 'INCREMENT'}),
+    decrement: () => dispatch({type: 'DECREMENT'}),
+  })
+)(Counter);

src/components/root.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import {Route, Link, Switch, NotFound} from 'fusion-plugin-react-router';
+import {split} from 'fusion-react-async';
+import Image from './image';
+import RPCExample from './rpc-example';
+import RPCReduxExample from './rpc-redux-example';
+import CsrfProtectionExample from './csrf-protection-example';
+import ReduxExample from './redux-example';
+
+const Home = () => <div>Hello</div>;
+const Test = () => <div>Test</div>;
+const PageNotFound = () => <NotFound><div>404</div></NotFound>;
+const LoadingComponent = () => <div>Loading...</div>;
+const ErrorComponent = () => <div>Error loading bundle split component</div>;
+const SplitExample = split({
+  load: () => import('./split-example'),
+  LoadingComponent,
+  ErrorComponent,
+});
+const SplitTranslations = split({
+  load: () => import('./translations'),
+  LoadingComponent,
+  ErrorComponent,
+});
+const SplitDefer = split({
+  defer: true,
+  load: () => import('./split-example'),
+  LoadingComponent,
+  ErrorComponent,
+});
+const SplitStyled = split({
+  defer: true,
+  load: () => import('./styletron'),
+  LoadingComponent,
+  ErrorComponent,
+});
+
+const Root = (
+  <div>
+    <h1>Hello</h1>
+    <ul>
+      <li><Link to="/">Home</Link></li>
+      <li><Link to="/test">Test</Link></li>
+      <li><Link to="/image">Image</Link></li>
+      <li><Link to="/split">Split</Link></li>
+      <li><Link to="/split-deferred">Split (Deferred)</Link></li>
+      <li><Link to="/styletron">CSS styled (Styletron)</Link></li>
+      <li><Link to="/translations">Translations</Link></li>
+      <li><Link to="/csrf-token">Fetching with CSRF token</Link></li>
+      <li><Link to="/redux">Redux</Link></li>
+      <li><Link to="/rpc">Basic RPC</Link></li>
+      <li><Link to="/redux-rpc">Redux RPC</Link></li>
+      <li><Link to="/404">404</Link></li>
+    </ul>
+    <Switch>
+      <Route exact path="/" component={Home} />
+      <Route exact path="/test" component={Test} />
+      <Route exact path="/image" component={Image} />
+      <Route exact path="/split" component={SplitExample} />
+      <Route exact path="/split-deferred" component={SplitDefer} />
+      <Route exact path="/styletron" component={SplitStyled} />
+      <Route exact path="/translations" component={SplitTranslations} />
+      <Route exact path="/csrf-token" component={CsrfProtectionExample} />
+      <Route exact path="/redux" component={ReduxExample} />
+      <Route exact path="/rpc" component={RPCExample} />
+      <Route exact path="/redux-rpc" component={RPCReduxExample} />
+      <Route component={PageNotFound} />
+    </Switch>
+  </div>
+);
+
+export default Root;

src/components/rpc-example.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {withRPC} from 'fusion-plugin-rpc-react';
+
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: null,
+      loading: true,
+      error: '',
+    };
+  }
+  componentDidMount() {
+    this.props.rpc.echo({test: 'hello'}).then(({test}) => {
+      this.setState({test});
+    });
+    this.doRPC(this.props.rpc.getCount);
+  }
+  increment() {
+    this.doRPC(this.props.rpc.increment);
+  }
+  decrement() {
+    this.doRPC(this.props.rpc.decrement);
+  }
+  doRPC(method) {
+    return method()
+      .then(({rpcCount, error}) => {
+        this.setState({
+          loading: false,
+          rpcCount,
+          error,
+        });
+      })
+      .catch(e => {
+        this.setState({error: e.message});
+      });
+  }
+  render() {
+    if (this.state.loading) {
+      return <div>Loading...</div>;
+    }
+    return (
+      <div>
+        <p>{this.state.test}</p>
+        <p>Count: {this.state.rpcCount}</p>
+        <p>
+          <button onClick={() => this.increment()}>Increment</button>
+          <button onClick={() => this.decrement()}>Decrement</button>
+        </p>
+        {this.state.error}
+      </div>
+    );
+  }
+}
+
+export default withRPC(Example);

src/components/rpc-redux-example.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {withRPCRedux} from 'fusion-plugin-rpc-redux-react';
+import {prepared} from 'fusion-react-async';
+import {connect} from 'react-redux';
+import {compose} from 'redux';
+
+function Example({rpcCount, loading, error, rpcRedux}) {
+  return (
+    <div>
+      <p>Count: {rpcCount}</p>
+      <p>
+        <button onClick={() => rpcRedux.increment()}>Increment</button>
+        <button onClick={() => rpcRedux.decrement()}>Decrement</button>
+      </p>
+      {loading && 'Loading...'}
+      {error}
+    </div>
+  );
+}
+
+const hoc = compose(
+  withRPCRedux,
+  connect(({rpcCount, loading, error}) => ({rpcCount, loading, error})),
+  prepared(props => props.rpcCount || props.rpcRedux.getCount())
+);
+export default hoc(Example);

src/components/split-example.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function bundleSplitComponent() {
+  return <div>This should be async loaded</div>;
+}

src/components/styletron.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {styled} from 'fusion-plugin-styletron-react';
+
+const FancyContainer = styled('div', {
+  background: 'lightgreen',
+  border: '5px solid pink',
+});
+const FancyLink = styled('a', props => ({
+  ':hover': {fontSize: `${props.answer}px`},
+}));
+
+export default function StyletronComponent() {
+  return (
+    <FancyContainer>
+      Styled!
+      <FancyLink href="#" answer={42}>
+        Answer to Life, the Universe and Everything
+      </FancyLink>
+    </FancyContainer>
+  );
+}