From ca927ffcb2bcd98108387f63f402014a24dbc5f3 Mon Sep 17 00:00:00 2001
From: Chris Johnson <c.johnson@bamboonine.co.uk>
Date: Tue, 10 Nov 2020 08:57:58 +0000
Subject: [PATCH] Updated functions for ES6 consistency

---
 .eslintrc.js        | 15 +++++++++++++++
 layout-shift-gif.js |  8 ++++----
 package.json        | 13 ++++++++++---
 3 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 .eslintrc.js

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..42a45cc
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,15 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es2021": true
+    },
+    "extends": [
+        "standard"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 12
+    },
+    "rules": {
+    }
+};
diff --git a/layout-shift-gif.js b/layout-shift-gif.js
index 1d4ecea..9d63354 100644
--- a/layout-shift-gif.js
+++ b/layout-shift-gif.js
@@ -38,7 +38,7 @@ const Good3G = {
 const phone = devices['Nexus 5X']
 
 /* Detect layout shift */
-function clsDetection () {
+const clsDetection = () => {
   window.cumulativeLayoutShiftScore = 0
   window.previousRect = []
   window.currentRect = []
@@ -64,7 +64,7 @@ function clsDetection () {
 }
 
 // Return the colours we're using for the CLS
-function getColor (cls) {
+const getColor = (cls) => {
   let c = { stroke: 'rgba(0,128,0,.7)', fill: 'rgba(0,128,0,.1)', solid: 'rgb(0,128,0,1)' }
   if (cls >= 0.1) {
     c = { stroke: 'rgba(255,125,0,.5)', fill: 'rgba(255,125,0,.05)', solid: 'rgba(255,125,0,1)' }
@@ -75,7 +75,7 @@ function getColor (cls) {
   return c
 }
 
-async function createGif (url, device) {
+const createGif = async (url, device) => {
   // Launch puppeteer
   const browser = await puppeteer.launch({ args: ['--no-sandbox'], timeout: 10000 })
 
@@ -152,7 +152,7 @@ async function createGif (url, device) {
     const ctx = canvas.getContext('2d')
 
     // Canvas setup function
-    const canvasSetup = function () {
+    const canvasSetup = () => {
       // Add the screenshot to each frame
       ctx.drawImage(image, 0, 0, image.width, image.height)
       // Add the CLS score in the top left corner
diff --git a/package.json b/package.json
index c9fe587..7964e91 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "layout-shift-gif",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Generates a .gif showing the layout shift events for a website.",
   "main": "./layout-shift-gif.js",
-  "keywords":[
+  "keywords": [
     "layout shift",
     "cls",
     "gif",
@@ -28,5 +28,12 @@
   "bugs": {
     "url": "https://github.com/workeffortwaste/layout-shift-gif/issues"
   },
-  "homepage": "https://defaced.dev/tools/layout-shift-gif-generator/"
+  "homepage": "https://defaced.dev/tools/layout-shift-gif-generator/",
+  "devDependencies": {
+    "eslint": "^7.13.0",
+    "eslint-config-standard": "^16.0.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1"
+  }
 }