add prettier

Author: zendive

.prettierignore

@@ -0,0 +1,2 @@
+/src/js/bundle
+*.min.js

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

README.md

@@ -1,46 +1,54 @@
 ### ![](./src/img/panel-icon28.png) console.diff()
+
 [![console.diff()](https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/tbyBjqi7Zu733AAKA5n4.png)](https://chrome.google.com/webstore/detail/jsdiff-devtool/iefeamoljhdcpigpnpggeiiabpnpgonb)
 
 Chrome devtools extension intended to display result of deep in-memory object
 comparisons with the help of dedicated console commands.
 
 ### Features
-* compare objects from multiple tabs and/or between page reloads
-* function code included in comparison result in form of a string, may help to see if it was altered
-* document, dom-elements and other non-serializable objects are filtered-out from the results
-* self recurring references displayed only once, the rest of occurrences are filtered-out  
+
+- compare objects from multiple tabs and/or between page reloads
+- function code included in comparison result in form of a string, may help to see if it was altered
+- document, dom-elements and other non-serializable objects are filtered-out from the results
+- self recurring references displayed only once, the rest of occurrences are filtered-out
 
 ### API
+
 ```javascript
-console.diff(left, right);  // compare left and right
-console.diff(next);         // shorthand of diffPush while single argumented
-console.diffLeft(left);     // update object on the left side only
-console.diffRight(right);   // update object on the right side only
-console.diffPush(next);     // shifts sides, right becomes left, next becomes right
+console.diff(left, right); // compare left and right
+console.diff(next); // shorthand of diffPush while single argumented
+console.diffLeft(left); // update object on the left side only
+console.diffRight(right); // update object on the right side only
+console.diffPush(next); // shifts sides, right becomes left, next becomes right
 ```
 
 ### Usage basics
+
 Historically, left side represents the old state and right side the new state.
-* Things that are present on the left side but missing on the right side are colour-coded as red (old).
-* Things that are missing on the left side but present on the right side are colour-coded as green (new).
+
+- Things that are present on the left side but missing on the right side are colour-coded as red (old).
+- Things that are missing on the left side but present on the right side are colour-coded as green (new).
 
 To track changes of the same variable in timed manner you can push it with `diffPush` or `diff`
 with a single argument,
 that will shift objects from right to left, showing differences with previous push state.
 
 ### How it works
-* `jsdiff-devtools` registers devtools panel
-  * injects console commands that send data to `jsdiff-proxy` 
-  * injects `jsdiff-proxy` to farther communicate objects to the extension's `jsdiff-background`
-* when `console.diff` command invoked
-  * argument/s are cloned in a suitable form for sending between different window contexts and sent to `jsdiff-proxy`
-  * `jsdiff-proxy` catches the data and sends it to the `jsdiff-background` where it is stored for future consuming
-* when `jsdiff-panel` is mounted (visible in devtools) it listens to data expected to come from the `jsdiff-background`
-and displays it
+
+- `jsdiff-devtools` registers devtools panel
+  - injects console commands that send data to `jsdiff-proxy`
+  - injects `jsdiff-proxy` to farther communicate objects to the extension's `jsdiff-background`
+- when `console.diff` command invoked
+  - argument/s are cloned in a suitable form for sending between different window contexts and sent to `jsdiff-proxy`
+  - `jsdiff-proxy` catches the data and sends it to the `jsdiff-background` where it is stored for future consuming
+- when `jsdiff-panel` is mounted (visible in devtools) it listens to data expected to come from the `jsdiff-background`
+  and displays it
 
 ### Screenshot
+
 ![screenshot](./src/img/screenshot-01.png)
 
 ### Based on
+
 - [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
 - [vuejs](https://github.com/vuejs) by Evan You

manifest.json

@@ -12,15 +12,8 @@
   },
   "background": {
     "persistent": false,
-    "scripts": [
-      "src/js/jsdiff-background.js"
-    ]
+    "scripts": ["src/js/jsdiff-background.js"]
   },
   "content_security_policy": "script-src 'self'; object-src 'self'",
-  "permissions": [
-    "http://*/*",
-    "https://*/*",
-    "file:///*",
-    "clipboardWrite"
-  ]
+  "permissions": ["http://*/*", "https://*/*", "clipboardWrite"]
 }

package-lock.json

@@ -9,7 +9,8 @@
   "scripts": {
     "test": "echo \"no test\" && exit 1",
     "dev": "webpack --progress --watch --mode=development",
-    "prod": "NODE_ENV=production webpack --mode=production"
+    "prod": "NODE_ENV=production webpack --mode=production",
+    "format": "prettier . --write"
   },
   "repository": {
     "type": "git",
@@ -32,13 +33,13 @@
     "css-loader": "~6.6.0",
     "jsondiffpatch": "~0.4.1",
     "node-sass": "~7.0.3",
+    "prettier": "^2.8.7",
     "sass-loader": "~12.4.0",
     "style-loader": "~3.3.1",
     "vue": "~3.2.31",
     "vue-loader": "~17.0.0",
     "webpack": "~5.77.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "~4.9.2"
-  },
-  "dependencies": {}
+  }
 }

package.json

@@ -22,7 +22,7 @@ chrome.runtime.onConnect.addListener((port) => {
       if (port === con.port) {
         con.onDisconnect();
         connections.delete(tabId);
-        break
+        break;
       }
     }
   });
@@ -31,11 +31,13 @@ chrome.runtime.onConnect.addListener((port) => {
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
   const tabId = sender.tab && sender.tab.id;
 
-  if ('jsdiff-devtools-extension-api' === req.source && connections.has(tabId)) {
+  if (
+    'jsdiff-devtools-extension-api' === req.source &&
+    connections.has(tabId)
+  ) {
     lastApiReq = req;
     connections.get(tabId).onApiMessage(req);
-  }
-  else if ('jsdiff-devtools-panel-shown' === req.type) {
+  } else if ('jsdiff-devtools-panel-shown' === req.type) {
     // message from one of devtool panels
     sendResponse(lastApiReq);
   }
@@ -62,5 +64,4 @@ class Connection {
   onDisconnect() {
     this.port = null;
   }
-
 }

src/js/bundle/jsdiff-panel.js

@@ -2,23 +2,25 @@
 
 // Create panel
 chrome.devtools.panels.create(
-    'JSDiff',
-    '/src/img/panel-icon28.png',
-    '/src/jsdiff-panel.html',
-    (panel) => {
-      //panel.onSearch.addListener(sendMessage('jsdiff-panel-search'));
-      //panel.onShown.addListener(sendMessage('jsdiff-panel-shown'));
-      //panel.onHidden.addListener(sendMessage('jsdiff-panel-hidden'));
-    }
+  'JSDiff',
+  '/src/img/panel-icon28.png',
+  '/src/jsdiff-panel.html',
+  (panel) => {
+    //panel.onSearch.addListener(sendMessage('jsdiff-panel-search'));
+    //panel.onShown.addListener(sendMessage('jsdiff-panel-shown'));
+    //panel.onHidden.addListener(sendMessage('jsdiff-panel-hidden'));
+  }
 );
 
 // Create a connection to the background page
 if (chrome.devtools.inspectedWindow.tabId !== null) {
   // tabId may be null if user opened the devtools of the devtools
-  const backgroundPageConnection = chrome.runtime.connect({name: 'jsdiff-devtools'});
+  const backgroundPageConnection = chrome.runtime.connect({
+    name: 'jsdiff-devtools',
+  });
   backgroundPageConnection.postMessage({
     name: 'init',
-    tabId: chrome.devtools.inspectedWindow.tabId
+    tabId: chrome.devtools.inspectedWindow.tabId,
   });
 
   injectScripts();
@@ -35,37 +37,34 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 // us shown at: https://developer.chrome.com/extensions/devtools#content-script-to-devtools
 function injectScripts() {
   chrome.devtools.inspectedWindow.eval(
-      `;(${jsdiff_devtools_extension_api.toString()})();`, {
-        useContentScriptContext: false // default: false
-      }, (res, error) => {
-        if (res && !error) {
-          // injected
-          chrome.tabs.executeScript(chrome.devtools.inspectedWindow.tabId, {
-            file: '/src/js/jsdiff-proxy.js'
-          });
-        }
-      });
+    `;(${jsdiff_devtools_extension_api.toString()})();`,
+    {
+      useContentScriptContext: false, // default: false
+    },
+    (res, error) => {
+      if (res && !error) {
+        // injected
+        chrome.tabs.executeScript(chrome.devtools.inspectedWindow.tabId, {
+          file: '/src/js/jsdiff-proxy.js',
+        });
+      }
+    }
+  );
 }
 
 function jsdiff_devtools_extension_api() {
-  if (typeof(console.diff) === 'function') {
+  if (typeof console.diff === 'function') {
     /*already injected*/
     return false;
   }
 
   function postDataAdapter(set, key, value) {
     try {
-      if (
-        value instanceof Element ||
-        value instanceof Document
-      ) {
+      if (value instanceof Element || value instanceof Document) {
         return undefined;
-      } else if (typeof(value) === 'function') {
+      } else if (typeof value === 'function') {
         return value.toString();
-      } else if (
-        value instanceof Object ||
-        typeof(value) === 'object'
-      ) {
+      } else if (value instanceof Object || typeof value === 'object') {
         if (set.has(value)) {
           return undefined;
         }
@@ -84,48 +83,53 @@ function jsdiff_devtools_extension_api() {
         if (payload.hasOwnProperty(key)) {
           let set = new Set();
           payload[key] = JSON.parse(
-            JSON.stringify(
-              payload[key],
-              postDataAdapter.bind(null, set)
-            )
+            JSON.stringify(payload[key], postDataAdapter.bind(null, set))
           );
           set.clear();
           set = null;
         }
       });
-      window.postMessage({payload, source: 'jsdiff-devtools-extension-api'}, '*');
+      window.postMessage(
+        { payload, source: 'jsdiff-devtools-extension-api' },
+        '*'
+      );
     } catch (e) {
-      console.error('%cJSDiff', `
+      console.error(
+        '%cJSDiff',
+        `
         font-weight: 700;
         color: #000;
         background-color: yellow;
         padding: 2px 4px;
         border: 1px solid #bbb;
         border-radius: 4px;
-      `, e);
+      `,
+        e
+      );
     }
   }
 
   Object.assign(console, {
     diff(left, right) {
-      post(right === undefined? {push: left} : {left, right});
+      post(right === undefined ? { push: left } : { left, right });
     },
 
     diffLeft(left) {
-      post({left});
+      post({ left });
     },
 
     diffRight(right) {
-      post({right});
+      post({ right });
     },
 
     diffPush(push) {
-      post({push});
+      post({ push });
     },
   });
 
   console.log(
-    '%c✚ console.diff(left, right);', `
+    '%c✚ console.diff(left, right);',
+    `
       font-weight: 700;
       color: #000;
       background-color: yellow;
@@ -139,7 +143,7 @@ function jsdiff_devtools_extension_api() {
 }
 
 function sendMessage(message) {
-  return function() {
+  return function () {
     chrome.runtime.sendMessage(message);
   };
 }

src/js/jsdiff-background.js

@@ -1,4 +1,4 @@
-import {createApp} from 'vue';
+import { createApp } from 'vue';
 import Panel from './view/panel.vue';
 
 const app = createApp(Panel);

src/js/jsdiff-devtools.js

@@ -1,10 +1,12 @@
-;(function(w, x) {
+(function (w, x) {
   'use strict';
   w.addEventListener('message', function jsdiff_devtools_extension_proxy(e) {
-    if (// message from the same frame
-        e.source === w &&
-        e.data && typeof(e.data) === 'object' &&
-        e.data.source === 'jsdiff-devtools-extension-api'
+    if (
+      // message from the same frame
+      e.source === w &&
+      e.data &&
+      typeof e.data === 'object' &&
+      e.data.source === 'jsdiff-devtools-extension-api'
     ) {
       x && x.sendMessage(e.data);
     }