[pull] master from krakenjs:master

.eslintignore

@@ -1,3 +1,4 @@
 test/lib
 demo
-dist
+dist
+test/.eslintrc.js

.flowconfig

@@ -3,6 +3,7 @@
 .*/node_modules/flow-runtime
 .*/node_modules/npm
 .*/node_modules/jsonlint
+.*/node_modules/resolve
 .*/dist/module
 [include]
 [libs]
@@ -12,7 +13,4 @@ node_modules/post-robot/src/declarations.js
 node_modules/grumbler-scripts/declarations.js
 [options]
 module.name_mapper='^src\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
-experimental.const_params=false
-esproposal.export_star_as=enable
-esproposal.decorators=ignore
-include_warnings=true
+experimental.const_params=false

.github/workflows/node.js.yml

@@ -0,0 +1,37 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  # run on push but only for the master branch
+  push:
+    branches:
+      - master
+  # run for every pull request
+  pull_request: {}
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: ▶️ Run flow-typed script
+        run: npm run flow-typed
+
+      - name: ▶️ Run test script
+        run: npm run test

.travis.yml

@@ -1,4 +1,9 @@
 language: node_js
 node_js:
-   - "lts/*"
+  - 'lts/*'
+before_install:
+  - rm -rf node_modules
+  - npm install -g codecov
 script: npm test
+after_success:
+  - codecov

README.md

@@ -1,6 +1,16 @@
-<p align="center"><img width="45%"  src="https://cdn.rawgit.com/krakenjs/zoid/master/zoid.png"></p>
+<p align="center"><img width="45%" alt="zoid" src="https://cdn.rawgit.com/krakenjs/zoid/master/zoid.png"></p>
 
 ----
+[![build status][build-badge]][build]
+[![code coverage][coverage-badge]][coverage]
+[![npm version][version-badge]][package]
+
+[build-badge]: https://img.shields.io/github/workflow/status/krakenjs/zoid/build?logo=github&style=flat-square
+[build]: https://github.com/krakenjs/zoid/actions?query=workflow%3Abuild
+[coverage-badge]: https://img.shields.io/codecov/c/github/krakenjs/zoid.svg?style=flat-square
+[coverage]: https://codecov.io/github/krakenjs/zoid/
+[version-badge]: https://img.shields.io/npm/v/zoid.svg?style=flat-square
+[package]: https://www.npmjs.com/package/zoid
 
 A cross-domain component toolkit, supporting:
 
@@ -13,7 +23,7 @@ It's 'data-down, actions up' style components, but 100% cross-domain using ifram
 
 -----
 
-### [API Docs](./docs/api.md)
+### [API Docs](./docs/api/index.md)
 
 Public options and methods supported by zoid
 

SECURITY.md

@@ -1,7 +1,7 @@
 # Security Policy
 ## How is Zoid secure?
 Zoid uses [Post Robot](https://github.com/krakenjs/post-robot) to do [post messaging](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) between multiple domains.
-Zoid helps secure messaging through iframe sanboxing, domain validation, and data protection.
+Zoid helps secure messaging through iframe sandboxing, domain validation, and data protection.
 - __Iframe sandboxing__ is a default browser feature that blocks others from accessing the data of your iframe instance. 
 - __Domain Validation__ checks the domain of the connection made to the Zoid child component, if requested. If domains don’t match accepted domains the connect fails. This is to stop access to secure components.
 - __Data Protection__ is the way Zoid manages checking domains of where the data was sent from to help protect against malicious data being injected through events.

babel.config.js

@@ -2,5 +2,9 @@
 
 // eslint-disable-next-line import/no-commonjs
 module.exports = {
-    extends: 'grumbler-scripts/config/.babelrc-node'
+    extends: 'grumbler-scripts/config/.babelrc-node',
+
+    ignore: [
+        'test/lib'
+    ]
 };

demo/advanced/react-end-to-end/index.htm

@@ -4,8 +4,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
     <link rel="stylesheet" href="../../common/index.css" />
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
 
     <script src="../../../dist/zoid.frameworks.js"></script>
@@ -17,38 +17,33 @@
 
     <script type="text/babel">
 
-        let MyLoginReactZoidComponent = MyLoginZoidComponent.driver('react', {
+        let LoginZoidReactComponent = LoginZoidComponent.driver('react', {
             React: window.React,
             ReactDOM: window.ReactDOM
         });
 
-        let App = React.createClass({
+        function App() {
+            const [ loggedIn, setLoggedIn ] = React.useState(false);
+            const [ email, setEmail ] = React.useState('foo@bar.com');
 
-            getInitialState() {
-                return {
-                    prefilledEmail: 'foo@bar.com'
-                };
-            },
-
-            render() {
-
-                let onLogin = (email) =>
-                    this.setState({ email, loggedIn: true });
-
-                return (
-                    <div>
-                        <h3>Log in on xyz.com</h3>
-
-                        { this.state.loggedIn
-
-                            ? <p>User logged in with email: { this.state.email }</p>
-
-                            : <MyLoginReactZoidComponent prefilledEmail={ this.state.prefilledEmail } onLogin={ onLogin } />
-                        }
-                    </div>
-                );
+            let onLogin = (email) => {
+                setEmail(email);
+                setLoggedIn(true);
             }
-        });
+
+            return (
+                <div>
+                    <h3>Log in on xyz.com</h3>
+
+                    { loggedIn
+                        ? <p>User logged in with email: { email }</p>
+                        : <LoginZoidReactComponent
+                            prefilledEmail={ email }
+                            onLogin={ onLogin } />
+                    }
+                </div>
+            );
+        }
 
         ReactDOM.render(<App />, document.querySelector('#container'));
 

demo/advanced/react-end-to-end/login.htm

@@ -3,8 +3,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
     <link rel="stylesheet" href="../../common/login.css" />
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
 
     <script src="../../../dist/zoid.frameworks.js"></script>
@@ -16,70 +16,89 @@
 
     <script type="text/babel">
 
-        let MyLoginComponent = React.createClass({
-
-            getInitialState() {
-                return { displayForm: true, displaySpinner: false, email: this.props.prefilledEmail };
-            },
-
-            render() {
-
-                let login = () => {
-                    this.setState({ displayForm: false, displaySpinner: true });
-
-                    setTimeout(() => {
-                        this.setState({ displaySpinner: false });
-                        this.props.onLogin(this.state.email);
-                    }, 2000);
-                };
-
-                return (
-                    <form>
-                        {
-                            this.state.displayForm && <div>
-
-                                <input
-                                    placeholder='email'
-                                    defaultValue={ this.state.email }
-                                    onChange={
-                                        event => this.setState({ email: event.target.value })
-                                    }>
-                                </input>
-
-                                <br/>
-
-                                <input
-                                    placeholder='password' type='password'
-                                    onChange={
-                                        event => this.setState({ password: event.target.value })
-                                    }>
-                                </input>
-
-                                <br/>
-
-                                <button
-                                    className='btn btn-primary'
-                                    onClick={ login }>
-                                        Log In
-                                </button>
-
-                            </div>
-                        }
-
-                        {
-                            this.state.displaySpinner && <div>
-                                <svg id='spinner' className='spinner' width='65px' height='65px' viewBox='0 0 66 66' xmlns='http://www.w3.org/2000/svg'>
-                                    <circle className='path' fill='none' strokeWidth='6' strokeLinecap='round' cx='33' cy='33' r='30'></circle>
-                                </svg>
-                            </div>
-                        }
-                    </form>
-                );
-            }
-        });
+        function Login({ onLogin, prefilledEmail }) {
+            let [ email, setEmail ] = React.useState(prefilledEmail);
+            let [ password, setPassword ] = React.useState('');
+            let [ displaySpinner, setDisplaySpinner ] = React.useState(false);
+
+            let login = () => {
+                setDisplaySpinner(true)
+
+                setTimeout(() => {
+                    onLogin(email);
+                }, 2000);
+            };
+
+            return (
+                <form>
+                    {
+                        displaySpinner
+                            ? (
+                                <div>
+                                    <svg id='spinner' className='spinner' width='65px' height='65px' viewBox='0 0 66 66' xmlns='http://www.w3.org/2000/svg'>
+                                        <circle className='path' fill='none' strokeWidth='6' strokeLinecap='round' cx='33' cy='33' r='30'></circle>
+                                    </svg>
+                                </div>
+                            )
+                            : (
+                                <div>
+
+                                    <input
+                                        placeholder='email'
+                                        value={ email }
+                                        onChange={
+                                            event => setEmail(event.target.value)
+                                        }>
+                                    </input>
+
+                                    <br/>
+
+                                    <input
+                                        placeholder='password' type='password'
+                                        value={ password }
+                                        onChange={
+                                            event => setPassword(event.target.value)
+                                        }>
+                                    </input>
+
+                                    <br/>
+
+                                    <button
+                                        className='btn btn-primary'
+                                        onClick={ login }>
+                                            Log In
+                                    </button>
+
+                                 </div>
+                            )
+                    }
+                </form>
+            );
+        }
+
+        function useXProps() {
+            const [ xprops, setXProps ] = React.useState(window.xprops);
+            React.useEffect(() => {
+                window.xprops.onProps(props => {
+                    setXProps({ ...props })
+                });
+            }, []);
+            return xprops;
+        }
+
+        function App() {
+            const { prefilledEmail, onLogin } = useXProps();
+
+            return (
+                <Login
+                    prefilledEmail={ prefilledEmail }
+                    onLogin={ onLogin }
+                />
+            );
+        }
 
         ReactDOM.render(
-            <MyLoginComponent { ...window.xprops } />,
+            <App />,
             document.querySelector('#container')
         );
 

demo/advanced/react-end-to-end/login.js

@@ -1,5 +1,5 @@
 
-window.MyLoginZoidComponent = zoid.create({
+window.LoginZoidComponent = zoid.create({
 
     // The html tag used to render my component
 

demo/advanced/remote-popup/login-button.js

@@ -7,7 +7,7 @@ window.MyLoginButtonComponent = zoid.create({
 
     // The url that will be loaded in the iframe or popup, when someone includes my component on their page
 
-    url: './login-button.htm',
+    url: new URL('login-button.htm', window.location.href).href,
 
     // The size of the component on their page
 

demo/advanced/remote/login-button.js

@@ -7,7 +7,7 @@ window.MyLoginButtonComponent = zoid.create({
 
     // The url that will be loaded in the iframe or popup, when someone includes my component on their page
 
-    url: './login-button.htm',
+    url: new URL('login-button.htm', window.location.href).href,
 
     // The size of the component on their page
 

demo/basic/iframe/login.js

@@ -1,5 +1,9 @@
 
 window.MyLoginZoidComponent = zoid.create({
+    dimensions: {
+        width: '300px',
+        height: '150px',
+    },
 
     // The html tag used to render my component
 

demo/basic/popup/index.htm

@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
     <link rel="stylesheet" href="../../common/index.css" />
 
-    <script src="../../../node_modules/jsx-pragmatic/dist/jsx-pragmatic.js"></script>
+    <script src="https://unpkg.com/jsx-pragmatic@2.0.20/dist/jsx-pragmatic.js"></script>
     <script src="../../../dist/zoid.js"></script>
     <script src="./login.js"></script>
 </head>