v3.0.0 (#11)

+ migrate to chrome extension manifest v3
+ update build stack
+ support internal search
+ minor improvements

Author: zendive

.gitignore

@@ -61,4 +61,7 @@ typings/
 .DS_Store
 
 *.zip
-package-lock.json
+*.js.map
+
+# typescript output
+.ts-built

.prettierignore

@@ -0,0 +1,3 @@
+/src/js/bundle
+.ts-built
+*.min.js

.prettierrc.json

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

README.md

@@ -1,46 +1,96 @@
 ### ![](./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.
 
+<details>
+  <summary> <strong>Screenshots</strong> </summary>
+
+- Comparing two objects
+  ![screenshot](./src/img/screenshot-01.png)
+
+- Tracking changes in localStorage (unchanged are hidden)
+  ![screenshot](./src/img/screenshot-02.png)
+
+</details>
+
+### Based on
+
+- [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
+- [vuejs](https://github.com/vuejs) by Evan You
+
 ### 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
+- basic integration with search functionality within devtools
+  - if search query contains upper-case letter - the search will be case-sensitive
+
+### Limitations and workarounds
+
+- some instances of objects may cause exception during preparations for comparison
+  - try to narrow compared contexts
+  - if it's some Browser API that causes an exception and not a framework, consider opening an issue,
+    so it will be possible to solve it on a permanent basis
+- while paused in debug mode, JSDiff panel won't reflect the result until runtime is resumed ([#10][i10])
+
+[i10]: https://github.com/zendive/jsdiff/issues/10
 
 ### API
+
+- **console.diff(left, right)** - compare left and right arguments
+
 ```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({ a: 1, b: 1, c: 3 }, { a: 1, b: 2, d: 3 });
+```
+
+- **console.diffPush(next)** - shifts sides, right becomes left, next becomes right
+
+```javascript
+console.diffPush(Date.now());
+```
+
+- **console.diff(next)** - shorthand for `diffPush`
+
+```javascript
+console.diff(Date.now());
+```
+
+- **console.diffLeft(left)** - update the old value only
+
+```javascript
+console.diffLeft(Date.now());
+```
+
+- **console.diffRight(right)** - update the new value only
+
+```javascript
+console.diffRight(Date.now());
 ```
 
 ### 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.
+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
-
-### 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
+- `jsdiff-devtools.js` registers devtools panel
+  - injects `console.diff` commands into inspected window's console interface
+    - each function clones arguments and sends them via `postMessage` to `jsdiff-proxy.js` in `jsdiff-console-to-proxy` message
+  - injects `jsdiff-proxy.js` that listens on window `jsdiff-console-to-proxy` message and sends it further to chrome runtime in `jsdiff-proxy-to-devtools` message
+  - listens on `jsdiff-proxy-to-devtools` and prepares payload for `vue/panel.js` and sends it with `jsdiff-devtools-to-panel-compare` message
+  - when user invokes devtools search command - informs `vue/panel.js` with `jsdiff-devtools-to-panel-search` message
+- when `vue/panel.js` is visible in devtools
+  - reflects result of last compare request
+  - listens on `jsdiff-devtools-to-panel-compare` requests
+  - listens on `jsdiff-devtools-to-panel-search` and tries to find query in DOM

manifest.json

@@ -1,26 +1,15 @@
 {
   "name": "console.diff(...)",
-  "description": "Deep compare complex in-memory objects inside browser devtools panel with console.diff command.",
-  "version": "2.0",
-  "manifest_version": 2,
-  "minimum_chrome_version": "64.0",
+  "description": "Compare in-memory objects and see the result inside devtools panel with a set of console.diff functions.",
+  "version": "3.0.0",
+  "manifest_version": 3,
+  "minimum_chrome_version": "66.0",
   "devtools_page": "src/jsdiff-devtools.html",
   "icons": {
     "28": "src/img/panel-icon28.png",
     "64": "src/img/panel-icon64.png",
     "128": "src/img/panel-icon128.png"
   },
-  "background": {
-    "persistent": false,
-    "scripts": [
-      "src/js/jsdiff-background.js"
-    ]
-  },
-  "content_security_policy": "script-src 'self'; object-src 'self'",
-  "permissions": [
-    "http://*/*",
-    "https://*/*",
-    "file:///*",
-    "clipboardWrite"
-  ]
+  "permissions": ["storage", "scripting", "activeTab", "clipboardWrite"],
+  "host_permissions": ["*://*/*"]
 }

package.json

@@ -1,15 +1,16 @@
 {
   "name": "jsdiff",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "![jsdiff](./src/img/panel-icon64.png) --- Chrome devtools extension intended to display result of in-memory object comparisons with the help of dedicated commands invoked via console.",
   "private": true,
   "directories": {
     "doc": "doc"
   },
   "scripts": {
     "test": "echo \"no test\" && exit 1",
-    "dev": "webpack --progress --watch",
-    "prod": "webpack --progress -p"
+    "dev": "webpack --progress --watch --mode=development",
+    "prod": "NODE_ENV=production webpack --mode=production",
+    "format": "prettier . --write"
   },
   "repository": {
     "type": "git",
@@ -26,21 +27,23 @@
     "url": "https://github.com/zendive/jsdiff/issues"
   },
   "homepage": "https://github.com/zendive/jsdiff#readme",
+  "type": "module",
   "devDependencies": {
-    "clean-webpack-plugin": "~1.0.1",
-    "css-loader": "~2.1.0",
-    "file-loader": "^3.0.1",
-    "node-sass": "~4.14.1",
-    "sass-loader": "~7.1.0",
-    "style-loader": "~0.23.1",
-    "vue-loader": "~15.6.2",
-    "vue-template-compiler": "~2.6.6",
-    "webpack": "~4.29.0",
-    "webpack-cli": "~3.2.1"
-  },
-  "dependencies": {
+    "@types/chrome": "^0.0.237",
+    "@vue/compiler-sfc": "^3.3.4",
+    "clean-webpack-plugin": "~4.0.0",
+    "css-loader": "~6.8.1",
     "jsondiffpatch": "~0.4.1",
-    "moment": "~2.29.0",
-    "vue": "~2.6.12"
+    "prettier": "^2.8.8",
+    "sass": "^1.63.3",
+    "sass-loader": "~13.3.2",
+    "style-loader": "~3.3.3",
+    "ts-loader": "^9.4.3",
+    "typescript": "^5.1.3",
+    "vue": "~3.3.4",
+    "vue-loader": "~17.2.2",
+    "webpack": "~5.86.0",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-cli": "~5.1.4"
   }
 }

pnpm-lock.yaml

@@ -1,71 +1,109 @@
-// resistance is futile
-
-// Create panel
-chrome.devtools.panels.create(
+// tabId may be null if user opened the devtools of the devtools
+if (chrome.devtools.inspectedWindow.tabId !== null) {
+  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'));
+      panel.onSearch.addListener(async (cmd, query) => {
+        await chrome.runtime.sendMessage({
+          source: 'jsdiff-devtools-to-panel-search',
+          params: { cmd, query },
+        });
+      });
     }
-);
+  );
 
-// 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'});
-  backgroundPageConnection.postMessage({
-    name: 'init',
-    tabId: chrome.devtools.inspectedWindow.tabId
+  injectScripts();
+
+  // listen on tabs page reload
+  chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    if ('complete' === changeInfo.status) {
+      injectScripts();
+    }
   });
 
-  injectScripts();
-}
+  // track api invocation - (api can be invoked prior opening of jsdiff panel)
+  chrome.runtime.onMessage.addListener(async (req) => {
+    if ('jsdiff-proxy-to-devtools' === req.source) {
+      const payload = req.payload;
+      let { lastApiReq } = await chrome.storage.local.get(['lastApiReq']);
+      if (!lastApiReq) {
+        lastApiReq = {
+          left: '(empty)',
+          right: '(empty)',
+          timestamp: Date.now(),
+        };
+      }
 
-// listen on tabs page reload
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  if ('complete' === changeInfo.status) {
-    injectScripts();
-  }
-});
+      if (Object.getOwnPropertyDescriptor(payload, 'push')) {
+        lastApiReq.left = lastApiReq.right;
+        lastApiReq.right = payload.push;
+      } else {
+        if (Object.getOwnPropertyDescriptor(payload, 'left')) {
+          lastApiReq.left = payload.left;
+        }
+        if (Object.getOwnPropertyDescriptor(payload, 'right')) {
+          lastApiReq.right = payload.right;
+        }
+      }
+      lastApiReq.timestamp = payload.timestamp;
+
+      chrome.storage.local.set({ lastApiReq: lastApiReq });
+      chrome.runtime.sendMessage({
+        source: 'jsdiff-devtools-to-panel-compare',
+        payload: lastApiReq,
+      });
+    }
+  });
+}
 
 // Inject console api and messaging proxy
 // 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) {
+        const tabId = chrome.devtools.inspectedWindow.tabId;
+
+        chrome.scripting
+          .executeScript({
+            target: {
+              tabId,
+              allFrames: true,
+            },
+            files: ['/src/js/jsdiff-proxy.js'],
+          })
+          .then(
+            () => {
+              // console.log('script injected in all frames');
+            },
+            (error) => {
+              // console.error('script inject failed', error);
+            }
+          );
+      }
+    }
+  );
 }
 
 function jsdiff_devtools_extension_api() {
-  if (typeof(console.diff) === 'function') {
-    /*already injected*/
+  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;
         }
@@ -82,65 +120,69 @@ function jsdiff_devtools_extension_api() {
     try {
       ['push', 'left', 'right'].forEach((key) => {
         if (payload.hasOwnProperty(key)) {
-          let set = new Set();
-          payload[key] = JSON.parse(
-            JSON.stringify(
-              payload[key],
-              postDataAdapter.bind(null, set)
-            )
-          );
-          set.clear();
-          set = null;
+          const value = payload[key];
+
+          if (value === undefined) {
+            payload[key] = '(undefined)';
+          } else if (value === null) {
+            payload[key] = '(null)';
+          } else {
+            let set = new Set();
+            payload[key] = JSON.parse(
+              JSON.stringify(value, postDataAdapter.bind(null, set))
+            );
+            set.clear();
+            set = null;
+          }
         }
       });
-      window.postMessage({payload, source: 'jsdiff-devtools-extension-api'}, '*');
+
+      window.postMessage(
+        {
+          payload,
+          source: 'jsdiff-console-to-proxy',
+        },
+        '*'
+      );
     } catch (e) {
-      console.error('%cJSDiff', `
+      console.error(
+        '%cconsole.diff',
+        `
         font-weight: 700;
         color: #000;
-        background-color: yellow;
+        background-color: #ffbbbb;
         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});
-    },
-
-    diffLeft(left) {
-      post({left});
-    },
-
-    diffRight(right) {
-      post({right});
-    },
-
-    diffPush(push) {
-      post({push});
-    },
+    diff: (...args) =>
+      post(
+        args.length === 1
+          ? { push: args[0], timestamp: Date.now() }
+          : { left: args[0], right: args[1], timestamp: Date.now() }
+      ),
+    diffLeft: (left) => post({ left, timestamp: Date.now() }),
+    diffRight: (right) => post({ right, timestamp: Date.now() }),
+    diffPush: (push) => post({ push, timestamp: Date.now() }),
   });
 
-  console.log(
-    '%cJSDiff', `
+  console.debug(
+    '%c✚ console.diff()',
+    `
       font-weight: 700;
       color: #000;
       background-color: yellow;
       padding: 2px 4px;
       border: 1px solid #bbb;
       border-radius: 4px;
-    `,
-    `console.diff(left, right); console.diffLeft(left); console.diffRight(right); console.diffPush(next);`
+    `
   );
 
   return true;
 }
-
-function sendMessage(message) {
-  return function() {
-    chrome.runtime.sendMessage(message);
-  };
-}

src/img/screenshot-00.png

@@ -1,12 +1,14 @@
-;(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'
+(() => {
+  window.addEventListener('message', (e) => {
+    if (
+      typeof e.data === 'object' &&
+      e.data !== null &&
+      e.data.source === 'jsdiff-console-to-proxy'
     ) {
-      x && x.sendMessage(e.data);
+      chrome.runtime.sendMessage({
+        source: 'jsdiff-proxy-to-devtools',
+        payload: e.data.payload,
+      });
     }
   });
-})(window, chrome.runtime);
+})();

src/img/screenshot-01.png

@@ -0,0 +1,79 @@
+function getElementText(_ref: HTMLElement | null): string {
+  return _ref ? _ref.textContent || _ref.innerText : '';
+}
+
+function eachByQuery(
+  el: HTMLElement,
+  query: string,
+  fn: (_ref: HTMLElement) => void
+) {
+  const elems = el.querySelectorAll(query) as NodeListOf<HTMLElement>;
+  for (let i = 0, l = elems.length; i < l; i++) {
+    fn(elems[i]);
+  }
+}
+
+function eachChildren(
+  _ref2: ParentNode | null,
+  fn: (el: HTMLElement, i: number) => void
+) {
+  if (_ref2) {
+    const children = _ref2.children;
+
+    for (let i = 0, l = children.length; i < l; i++) {
+      fn(children[i] as HTMLElement, i);
+    }
+  }
+}
+
+export const postDiffRender = (nodeArg: HTMLElement | null) => {
+  setTimeout(function jsondiffpatchHtmlFormatterAdjustArrows() {
+    const node = nodeArg || document;
+
+    eachByQuery(<HTMLElement>node, '.jsondiffpatch-arrow', function (_ref3) {
+      const parentNode = _ref3.parentNode;
+      const children = _ref3.children;
+      const style = _ref3.style;
+      const arrowParent = parentNode;
+      const svg = children[0] as HTMLElement;
+      const path = svg.children[1];
+
+      svg.style.display = 'none';
+
+      if (arrowParent instanceof HTMLElement) {
+        const destination = getElementText(
+          arrowParent.querySelector('.jsondiffpatch-moved-destination')
+        );
+        const container = arrowParent.parentNode;
+        let destinationElem: unknown;
+
+        eachChildren(container, function (child) {
+          if (child.getAttribute('data-key') === destination) {
+            destinationElem = child;
+          }
+        });
+
+        if (destinationElem instanceof HTMLElement) {
+          try {
+            const distance = destinationElem.offsetTop - arrowParent.offsetTop;
+            svg.setAttribute('height', `${Math.abs(distance) + 6}`);
+            style.top = -8 + (distance > 0 ? 0 : distance) + 'px';
+            const curve =
+              distance > 0
+                ? 'M30,0 Q-10,' +
+                  Math.round(distance / 2) +
+                  ' 26,' +
+                  (distance - 4)
+                : 'M30,' +
+                  -distance +
+                  ' Q-10,' +
+                  Math.round(-distance / 2) +
+                  ' 26,4';
+            path.setAttribute('d', curve);
+            svg.style.display = '';
+          } catch (ignore) {}
+        }
+      }
+    });
+  }, 10);
+};

src/img/screenshot-02.png

@@ -0,0 +1,126 @@
+type TSearchCommands = 'performSearch' | 'nextSearchResult' | 'cancelSearch';
+
+export interface ISearchOptions {
+  cmd: TSearchCommands;
+  query: string | null;
+}
+
+interface ISearchState {
+  foundEls: HTMLElement[];
+  query: string;
+  currentIndex: number;
+  clear: () => void;
+}
+
+const searchState: ISearchState = {
+  foundEls: [],
+  query: '',
+  currentIndex: -1,
+  clear() {
+    this.foundEls.splice(0);
+    this.query = '';
+    this.currentIndex = -1;
+  },
+};
+
+const CLASS_FOUND = 'jsdiff-found';
+const CLASS_FOUND_THIS = 'jsdiff-found-this';
+const uppercasePattern = /\p{Lu}/u; // 'u' flag enables Unicode matching
+
+function hasUppercaseCharacter(str: string): boolean {
+  for (let n = 0, N = str.length; n < N; n++) {
+    if (uppercasePattern.test(str.charAt(n))) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function highlightElements(
+  container: HTMLElement,
+  query: string,
+  foundEls: HTMLElement[]
+): void {
+  const containerNodes = container.childNodes as NodeListOf<HTMLElement>;
+
+  if (containerNodes.length) {
+    const firstChild = containerNodes[0];
+
+    if (containerNodes.length === 1 && firstChild.nodeType === Node.TEXT_NODE) {
+      const text = firstChild.textContent || firstChild.innerText;
+      const found = hasUppercaseCharacter(query)
+        ? text.includes(query) // case-sensitive
+        : text.toLocaleLowerCase().includes(query); // case-insensitive
+      const isHidden =
+        container.closest('.jsondiffpatch-unchanged-hidden') &&
+        container.closest('.jsondiffpatch-unchanged');
+
+      if (found && !isHidden) {
+        container.classList.add('jsdiff-found');
+        foundEls.push(container);
+      }
+    } else {
+      for (let n = 0, N = containerNodes.length; n < N; n++) {
+        const child = containerNodes[n];
+
+        if (child.nodeType === Node.ELEMENT_NODE) {
+          highlightElements(child, query, foundEls); // recursion
+        }
+      }
+    }
+  }
+}
+
+function clearHighlight(container: HTMLElement): void {
+  const allFound = container.querySelectorAll(`.${CLASS_FOUND}`);
+
+  for (let n = allFound.length - 1; n >= 0; n--) {
+    allFound[n].classList.remove(CLASS_FOUND, CLASS_FOUND_THIS);
+  }
+}
+
+function highlightCurrentResult(searchState: ISearchState): void {
+  searchState.currentIndex++;
+  searchState.currentIndex %= searchState.foundEls.length;
+
+  const el = searchState.foundEls[searchState.currentIndex];
+  el.classList.add(CLASS_FOUND_THIS);
+  el.scrollIntoView({
+    behavior: 'smooth',
+    block: 'nearest',
+    inline: 'nearest',
+  });
+}
+
+export function searchQueryInDom(
+  el: HTMLElement,
+  { cmd, query }: ISearchOptions
+): void {
+  query = (typeof query === 'string' && query.trim()) || '';
+
+  // console.log('🔦', cmd, query);
+
+  if ('performSearch' === cmd) {
+    searchState.query = query;
+
+    if (!query) {
+      searchState.clear();
+      clearHighlight(el);
+    }
+  } else if ('nextSearchResult' === cmd && searchState.query) {
+    clearHighlight(el);
+    searchState.foundEls.splice(0);
+    highlightElements(el, searchState.query, searchState.foundEls);
+
+    if (searchState.foundEls.length) {
+      highlightCurrentResult(searchState);
+    } else {
+      searchState.clear();
+      clearHighlight(el);
+    }
+  } else if ('cancelSearch' === cmd) {
+    searchState.clear();
+    clearHighlight(el);
+  }
+}

src/js/bundle/jsdiff-panel.js

@@ -0,0 +1,41 @@
+export const SECOND = 1000;
+export const MINUTE = 60 * SECOND;
+export const HOUR = 60 * MINUTE;
+export const DAY = 24 * HOUR;
+export const WEEK = 7 * DAY;
+export const MONTH = 30 * DAY;
+export const YEAR = 365 * DAY;
+const intervals = [
+  { ge: YEAR, divisor: YEAR, unit: 'year' },
+  { ge: MONTH, divisor: MONTH, unit: 'month' },
+  { ge: WEEK, divisor: WEEK, unit: 'week' },
+  { ge: DAY, divisor: DAY, unit: 'day' },
+  { ge: HOUR, divisor: HOUR, unit: 'hour' },
+  { ge: MINUTE, divisor: MINUTE, unit: 'minute' },
+  { ge: SECOND, divisor: SECOND, unit: 'seconds' },
+  { ge: 0, divisor: 1, text: 'now' },
+];
+const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+
+/**
+ * @param test {number}
+ * @param [now] {number}
+ * @return {string}
+ */
+export function timeFromNow(test: number, now: number): string {
+  const delta = now - test;
+  const absDelta = Math.abs(delta);
+  let rv = '';
+
+  for (const interval of intervals) {
+    if (absDelta >= interval.ge) {
+      const time = Math.trunc(delta / interval.divisor);
+      rv = interval.unit
+        ? rtf.format(-time, interval.unit as Intl.RelativeTimeFormatUnit)
+        : interval.text || '';
+      break;
+    }
+  }
+
+  return rv;
+}

src/js/jsdiff-background.js

@@ -0,0 +1,3 @@
+export function hasValue(o: unknown): boolean {
+  return undefined !== o && null !== o;
+}

src/js/jsdiff-devtools.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import Panel from './panel.vue';
+
+const app = createApp(Panel);
+app.mount('#jsdiff-app');

src/js/jsdiff-panel.js

@@ -1,2 +1,8 @@
-<meta charset="utf-8"/>
-<script src="/src/js/jsdiff-devtools.js"></script>
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <script src="/src/js/jsdiff-devtools.js"></script>
+</head>
+<body></body>
+</html>

src/js/jsdiff-proxy.js

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8"/>
+  <meta charset="UTF-8" />
 </head>
 <body>
-    <div id="app"></div>
-    <script src="/src/js/bundle/jsdiff-panel.js"></script>
+  <div id="jsdiff-app"></div>
+  <script src="/src/js/bundle/jsdiff-panel.js"></script>
 </body>
 </html>

src/js/view/api/formatter-dom.ts

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "outDir": "./.ts-built",
+    "noEmit": false,
+    "allowJs": true,
+    "checkJs": false,
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "Node",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "typeRoots": ["node_modules/@types"],
+  },
+  "exclude": [".ts-built", "src/js/bundle"]
+}

src/js/view/api/search.ts

@@ -1,59 +1,76 @@
-const path = require('path');
-const webpack = require('webpack');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-
-module.exports = {
-  mode: 'development',
-
-  entry: {
-    'jsdiff-panel': './src/js/jsdiff-panel.js'
-  },
-
-  output: {
-    filename: '[name].js',
-    path: path.resolve(__dirname, 'src/js/bundle')
-  },
-
-  resolve: {
-    modules: [
-      path.resolve(__dirname, 'src/js'),
-      'node_modules'
+import path from 'path';
+import webpack from 'webpack';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import { VueLoaderPlugin } from 'vue-loader';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default function (env, op) {
+  console.log('⌥', env, op.mode);
+  const isProd = op.mode === 'production';
+
+  return {
+    mode: op.mode,
+    devServer: {
+      hot: true,
+    },
+
+    entry: {
+      'jsdiff-panel': './src/js/view/app.js',
+    },
+
+    output: {
+      filename: '[name].js',
+      path: path.resolve(__dirname, 'src/js/bundle'),
+    },
+
+    resolve: {
+      extensions: ['.ts', '.js'],
+      modules: [path.resolve(__dirname, 'src/js'), 'node_modules'],
+      alias: {},
+    },
+
+    plugins: [
+      new CleanWebpackPlugin(),
+      new VueLoaderPlugin(),
+      // http://127.0.0.1:8888
+      !isProd
+        ? new BundleAnalyzerPlugin({
+            openAnalyzer: false,
+            logLevel: 'silent',
+          })
+        : () => {},
+      new webpack.DefinePlugin({
+        __VUE_OPTIONS_API__: 'true',
+        __VUE_PROD_DEVTOOLS__: 'false',
+      }),
     ],
 
-    alias: {}
-  },
-
-  plugins: [
-    new webpack.IgnorePlugin({
-      resourceRegExp: /^\.\/locale$/,
-      contextRegExp: /moment$/
-    }),
-    new CleanWebpackPlugin(['src/js/bundle']),
-    new VueLoaderPlugin()
-  ],
-
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      },
-      {
-        test: /\.(scss|css)$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'sass-loader'
-        ]
-      }
-    ]
-  },
-
-  optimization : {
-    runtimeChunk : false,
-  },
-
-  // devtool: 'source-map'
-  devtool: false
-};
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          options: { appendTsSuffixTo: [/\.vue$/], transpileOnly: true },
+        },
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader',
+        },
+        {
+          test: /\.(scss|css)$/,
+          use: ['style-loader', 'css-loader', 'sass-loader'],
+        },
+      ],
+    },
+
+    optimization: {
+      splitChunks: false,
+    },
+
+    devtool: isProd ? false : 'source-map',
+  };
+}