chore: use prettier (#401)

.eslintrc.js

@@ -1,15 +1,16 @@
 /* @flow */
 
 module.exports = {
-    'extends': './node_modules/@krakenjs/grumbler-scripts/config/.eslintrc-browser.js',
+  extends:
+    "./node_modules/@krakenjs/grumbler-scripts/config/.eslintrc-browser.js",
 
-    'globals': {
-        __ZOID__: true,
-        __POST_ROBOT__: true
-    },
+  globals: {
+    __ZOID__: true,
+    __POST_ROBOT__: true,
+  },
 
-    'rules': {
-        'react/display-name': 'off',
-        'react/prop-types': 'off'
-    }
-};
+  rules: {
+    "react/display-name": "off",
+    "react/prop-types": "off",
+  },
+};

.github/workflows/main.yml

@@ -17,8 +17,8 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '14'
-          registry-url: 'https://registry.npmjs.org'
+          node-version: "14"
+          registry-url: "https://registry.npmjs.org"
 
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1

.github/workflows/publish.yml

@@ -1,32 +1,32 @@
 name: "publish to npm"
 on: workflow_dispatch
 jobs:
-    main:
-        runs-on: ubuntu-latest
-        steps:
-            - name: ⬇️ Checkout repo
-              uses: actions/checkout@v2
-              with:
-                  token: ${{ secrets.ACCESS_TOKEN }}
-                  fetch-depth: 0
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v2
+        with:
+          token: ${{ secrets.ACCESS_TOKEN }}
+          fetch-depth: 0
 
-            - name: ⎔ Setup node
-              # sets up the .npmrc file to publish to npm
-              uses: actions/setup-node@v2
-              with:
-                  node-version: "14"
-                  registry-url: "https://registry.npmjs.org"
+      - name: ⎔ Setup node
+        # sets up the .npmrc file to publish to npm
+        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: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
 
-            - name: Configure git user
-              run: |
-                  git config --global user.email ${{ github.actor }}@users.noreply.github.com
-                  git config --global user.name ${{ github.actor }}
-            - name: ▶️ Run release
-              run: npm run release
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Configure git user
+        run: |
+          git config --global user.email ${{ github.actor }}@users.noreply.github.com
+          git config --global user.name ${{ github.actor }}
+      - name: ▶️ Run release
+        run: npm run release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,6 @@
+build
+dist
+coverage
+flow-typed
+test/lib/
+CHANGELOG.md

.prettierrc.json

@@ -0,0 +1 @@
+{}

CONTRIBUTING.md

@@ -6,7 +6,9 @@ Feel free to raise a pull request to us. Our team would review your proposed mod
 your changes into our code. Ideas and other comments are also welcome.
 
 ## Getting Started
+
 1. Create your own [fork](https://help.github.com/articles/fork-a-repo) of this [repository](../../fork).
+
 ```bash
 # Clone it
 $ git clone git@github.com:me/zoid.git
@@ -30,12 +32,14 @@ $ npm run-script cover
 ```
 
 ## Making Changes
+
 1. Make sure that your changes adhere to the current coding conventions used throughout the project, indentation, accurate comments, etc.
 2. Lint your code regularly and ensure it passes prior to submitting a PR:
-`$ npm run lint`.
+   `$ npm run lint`.
 3. Ensure existing tests pass (`$ npm test`) and include test cases which fail without your change and succeed with it.
 
 ## Submitting Changes
+
 1. Ensure that no errors are generated by ESLint.
 2. Commit your changes in logical chunks, i.e. keep your changes small per single commit.
 3. Locally merge (or rebase) the upstream branch into your topic branch: `$ git pull upstream && git merge`.

README.md

@@ -1,6 +1,7 @@
 <p align="center"><img width="45%" alt="zoid" src="https://cdn.rawgit.com/krakenjs/zoid/main/zoid.png"></p>
 
-----
+---
+
 [![build status][build-badge]][build]
 [![code coverage][coverage-badge]][coverage]
 [![npm version][version-badge]][package]
@@ -21,7 +22,7 @@ A cross-domain component toolkit, supporting:
 
 It's 'data-down, actions up' style components, but 100% cross-domain using iframes and popups!
 
------
+---
 
 ### [API Docs](./docs/api/index.md)
 
@@ -39,17 +40,16 @@ Forkable demo app with build, test, publishing and demos pre-configured.
 
 A full example of a cross-domain component using zoid
 
------
+---
 
 ### Quick example
 
 Define a component to be put on both the parent and child pages:
 
 ```javascript
 var MyLoginComponent = zoid.create({
-
-    tag: 'my-login-component',
-    url: 'http://www.my-site.com/my-login-component'
+  tag: "my-login-component",
+  url: "http://www.my-site.com/my-login-component",
 });
 ```
 
@@ -116,7 +116,6 @@ Implement the component in the iframe:
 
 ## Rationale
 
-
 **Writing cross domain components is tricky.**
 
 Consider this: I own `foo.com`, you own `bar.com`, and I have some functionality I want to share on your page.
@@ -126,7 +125,6 @@ I could just give you some javascript to load in your page. But then:
 - What if I have secure form fields, or secure data I don't want your site to spy on?
 - What if I need to make secure calls to my back-end, without resorting to CORS?
 
-
 **What about an iframe?**
 
 You could just use a vanilla iframe for all of this. But:
@@ -136,7 +134,6 @@ You could just use a vanilla iframe for all of this. But:
 - You need to deal with error cases, like if your iframe fails to load or doesn't respond to a post-message.
 - You need to think carefully about how to expose all this functionality behind a simple, clear interface.
 
-
 **zoid solves all of these problems.**
 
 - You pass data and callbacks down as a javascript object
@@ -146,7 +143,6 @@ You could just use a vanilla iframe for all of this. But:
 It will even automatically generate React and Angular bindings, so people can drop-in your component anywhere and not
 worry about iframes or post-messages.
 
-
 ## FAQ
 
 - **Do I need to use a particular framework like React to use zoid?**

SECURITY.md

@@ -1,22 +1,27 @@
 # 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 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.
+
+- **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.
 
 ## Things Zoid does NOT protect against
-- __Clickjacking__ cannot be avoided. Even though the data is secure, the click is happening outside the scope of Zoid, therefore, Zoid cannot validate those actions. To learn more about __clickjacking__ read [this](https://en.wikipedia.org/wiki/Clickjacking).
+
+- **Clickjacking** cannot be avoided. Even though the data is secure, the click is happening outside the scope of Zoid, therefore, Zoid cannot validate those actions. To learn more about **clickjacking** read [this](https://en.wikipedia.org/wiki/Clickjacking).
 
 ## Contact us
+
 We take security very seriously and ask that you follow the following process.
 If you think you may have found a security bug we ask that you privately send the details to DL-PP-Kraken-Js@paypal.com. Please make sure to use a descriptive title in the email.
 
-
 ## Expectations
-We will generally get back to you within **24 hours**, but a more detailed response may take up to **48 hours**. If you feel we're not responding back in time, please send us a message *without detail* on Twitter [@kraken_js](https://twitter.com/kraken_js).
 
+We will generally get back to you within **24 hours**, but a more detailed response may take up to **48 hours**. If you feel we're not responding back in time, please send us a message _without detail_ on Twitter [@kraken_js](https://twitter.com/kraken_js).
 
 ## History
+
 No reported issues

babel.config.js

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

commitlint.config.js

@@ -2,5 +2,5 @@
 /* eslint import/no-commonjs: off */
 
 module.exports = {
-    extends: [ '@commitlint/config-conventional' ]
+  extends: ["@commitlint/config-conventional"],
 };

demo/advanced/props/index.htm

@@ -1,46 +1,46 @@
 <!DOCTYPE html>
 
 <head>
-    <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="../../../dist/zoid.js"></script>
-    <script src="./login.js"></script>
+  <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="../../../dist/zoid.js"></script>
+  <script src="./login.js"></script>
 </head>
 
 <body>
+  <h3>Log in on xyz.com</h3>
 
-    <h3>Log in on xyz.com</h3>
-
-    <input id="email" placeholder="Custom Email" />
-    <br /><br />
-
-    <div id="container"></div>
+  <input id="email" placeholder="Custom Email" />
+  <br /><br />
 
-    <div id="result"></div>
+  <div id="container"></div>
 
-    <script>
+  <div id="result"></div>
 
-        // Render the component
+  <script>
+    // Render the component
 
-        var instance = MyLoginZoidComponent({
+    var instance = MyLoginZoidComponent({
+      prefilledEmail: "foo@bar.com",
 
-            prefilledEmail: 'foo@bar.com',
+      onLogin: function (email) {
+        console.log("User logged in with email:", email);
+        document.querySelector("#result").innerText = email + " logged in!";
+      },
+    });
 
-            onLogin: function(email) {
-                console.log('User logged in with email:', email);
-                document.querySelector('#result').innerText = email + ' logged in!';
-            }
+    instance.render("#container");
 
+    document
+      .querySelector("#email")
+      .addEventListener("keyup", function (event) {
+        instance.updateProps({
+          prefilledEmail: event.target.value,
         });
-
-        instance.render('#container');
-
-        document.querySelector('#email').addEventListener('keyup', function(event) {
-            instance.updateProps({
-                prefilledEmail: event.target.value
-            });
-        });
-    </script>
-
+      });
+  </script>
 </body>