chore(deps): updated project dependencies (#5)

Author: poly-glot

.editorconfig

@@ -3,7 +3,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

.eslintrc.js

@@ -11,12 +11,17 @@ module.exports = {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
     cy: true,
-    Cypress: true,
+    Cypress: true
   },
+  parser: "@babel/eslint-parser",
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
   },
+  plugins: [
+    "@babel"
+  ],
   rules: {
+    'max-len': ["error", { "code": 180 }]
   }
 }

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "tensorflowjs-remove-background"
+  }
+}

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI/CD
 on:
   push:
     branches:
-      - master
+      - main
   pull_request:
     types: [opened, synchronize, reopened]
 
@@ -18,7 +18,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: '14.x'
 
       - name: Cache node modules
         uses: actions/cache@v1
@@ -50,7 +50,7 @@ jobs:
         run: npm run build
 
       - name: Cypress run
-        uses: cypress-io/github-action@v1
+        uses: cypress-io/github-action@v2
         with:
           record: true
           start: npm run start:serve
@@ -61,25 +61,11 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
-      - name: Upload Staging
-        uses: amondnet/now-deployment@v2
-        id: now-deployment-staging
-        if: github.event_name == 'pull_request'
+      - name: Deployment
+        if: ${{ github.ref == 'refs/heads/main' }}
+        uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          zeit-token: ${{ secrets.ZEIT_TOKEN }}
-          now-org-id: ${{ secrets.NOW_ORG_ID }}
-          now-project-id: ${{ secrets.NOW_PROJECT_ID_STATIC }}
-          working-directory: dist/
-
-      - name: Upload Live
-        uses: amondnet/now-deployment@v2
-        id: now-deployment-production
-        if: github.event_name == 'push'
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          zeit-token: ${{ secrets.ZEIT_TOKEN }}
-          now-org-id: ${{ secrets.NOW_ORG_ID }}
-          now-project-id: ${{ secrets.NOW_PROJECT_ID_STATIC }}
-          now-args: '--prod'
-          working-directory: dist/
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VANILLA_FRONT_END_STARTER }}'
+          channelId: live
+          projectId: vanilla-front-end-starter

.github/workflows/monthly-visual-testing.yml

@@ -0,0 +1,50 @@
+name: Refresh screenshots
+
+on:
+  schedule:
+    # Every 1st day of a month at 1am
+    - cron: '0 1 1 * *'
+
+jobs:
+  remove-old-artifacts:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Nodejs
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      - name: Cache node modules
+        uses: actions/cache@v1
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          record: true
+          start: npm run start:serve
+          wait-on: 'http://localhost:5000'
+          command-prefix: 'percy exec -- npx'
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.github/workflows/remove-old-artifacts.yml

@@ -6,4 +6,4 @@ cypress/videos/
 cypress/screenshots/
 .scannerwork/
 .tmp/
-.now
+*-debug.log

.gitignore

@@ -1,7 +1,7 @@
 # tensorflowjs-remove-background
 ![CI/CD](https://github.com/poly-glot/tensorflowjs-remove-background/workflows/CI/CD/badge.svg)
 [![codecov](https://codecov.io/gh/poly-glot/tensorflowjs-remove-background/branch/master/graph/badge.svg)](https://codecov.io/gh/poly-glot/tensorflowjs-remove-background)
-[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/poly-glot/tensorflowjs-remove-background)
+[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/328a6753/tensorflowjs-remove-background)
 [![Cypress.io Dashboard](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/projects/jp2thc/runs)
 [![DeepScan grade](https://deepscan.io/api/teams/8408/projects/10623/branches/149386/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=8408&pid=10623&bid=149386)
 [![Maintainability](https://api.codeclimate.com/v1/badges/e9ab18c4667689e347de/maintainability)](https://codeclimate.com/github/poly-glot/tensorflowjs-remove-background/maintainability)
@@ -15,9 +15,6 @@ npm install
 npm start
 ```
 
-# How it is pieced together
-<img src="https://removebg.junaid.eu/assets/diagram.svg" alt="Flow diagram" />
-
 ## Demonstration
 <table width="100%">
     <tr>
@@ -27,27 +24,27 @@ npm start
     <tr>
         <td width="100">Canvas</td>
         <td><a href="https://github.com/poly-glot/tensorflowjs-remove-background/blob/00b6333c660ea1ecf7d1562dae56b68eea137041/src/component/output/events.js#L42" target="_blank">Save Canvas image.</a></td>
-    </tr>    
+    </tr>
     <tr>
         <td width="100">SEO</td>
         <td><a href="https://support.google.com/gsa/answer/6329153?hl=en#82542">Excluding Unwanted Text from the Google Index</a> <code>&lt;!--googleoff: index--&gt;</code></td>
-    </tr>        
+    </tr>
     <tr>
         <td width="100">HTML</td>
         <td>Use <code>referrerpolicy="no-referrer"</code> to disable hotlink protection.</td>
     </tr>
     <tr>
         <td width="100">HTML</td>
         <td>Use accept attribute e.g. <code>accept=".jpg,.png,.jpeg"</code> to allow users to select required file type.</td>
-    </tr>  
+    </tr>
     <tr>
         <td width="100">JS</td>
         <td>Handle events using <a href="https://javascript.info/bubbling-and-capturing">Event Bubbling</a>.</td>
-    </tr>                                
+    </tr>
     <tr>
         <td width="100">Accessibility</td>
         <td>A small &amp; Accessible Collapse implementation.</td>
-    </tr>                                    
+    </tr>
 </table>
 
 # Browser Support

Dockerfile

@@ -1,5 +1,22 @@
-const percyHealthCheck = require('@percy/cypress/task')
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
 
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
 module.exports = (on, config) => {
-  on('task', percyHealthCheck)
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
 }

README.MD

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}