add typescript to panel.vue

Author: zendive

src/js/bundle/jsdiff-panel.js

@@ -26,13 +26,11 @@ function eachChildren(
   }
 }
 
-export const postDiffRender = () => {
-  setTimeout(function jsondiffpatchHtmlFormatterAdjustArrows(
-    nodeArg: HTMLElement
-  ) {
+export const postDiffRender = (nodeArg: HTMLElement | null) => {
+  setTimeout(function jsondiffpatchHtmlFormatterAdjustArrows() {
     const node = nodeArg || document;
 
-    eachByQuery(node, '.jsondiffpatch-arrow', function (_ref3) {
+    eachByQuery(<HTMLElement>node, '.jsondiffpatch-arrow', function (_ref3) {
       const parentNode = _ref3.parentNode;
       const children = _ref3.children;
       const style = _ref3.style;
@@ -77,6 +75,5 @@ export const postDiffRender = () => {
         }
       }
     });
-  },
-  10);
+  }, 10);
 };

src/js/view/api/html-helper.ts

@@ -22,16 +22,20 @@ const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
  * @param [now] {number}
  * @return {string}
  */
-export function timeFromNow(test: number, now: number) {
+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);
-      return interval.unit
+      rv = interval.unit
         ? rtf.format(-time, interval.unit as Intl.RelativeTimeFormatUnit)
-        : interval.text;
+        : interval.text || '';
+      break;
     }
   }
+
+  return rv;
 }

src/js/view/api/time.ts

@@ -35,10 +35,10 @@
       </div>
     </section>
 
-    <section v-if="hasBothSides && !deltaHtml" class="-match">
+    <section v-if="hasBothSides && !deltaObj" class="-match">
       <div ref="deltaEl" class="-center">match</div>
     </section>
-    <section v-else-if="hasBothSides && deltaHtml">
+    <section v-else-if="hasBothSides && deltaObj">
       <div ref="deltaEl" class="-delta" v-html="deltaHtml" />
     </section>
     <section v-if="!hasBothSides" class="-empty">
@@ -57,16 +57,17 @@
   </section>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
 import packageJson from '../../../package.json';
 import * as jsondiffpatch from 'jsondiffpatch';
 import 'jsondiffpatch/dist/formatters-styles/html.css';
-import { timeFromNow } from './api/time.ts';
-import { postDiffRender } from './api/html-helper.ts';
+import { timeFromNow } from './api/time';
+import { postDiffRender } from './api/html-helper';
+import { Delta } from 'jsondiffpatch';
 
 const formatters = jsondiffpatch.formatters;
-const deltaEl = ref(null);
+const deltaEl = ref<HTMLElement | null>(null);
 const appStartTimestamp = Date.now();
 const state = reactive({
   version: packageJson.version,
@@ -76,30 +77,39 @@ const state = reactive({
   },
   codeExample: 'console.diff({a:1,b:1,c:3}, {a:1,b:2,d:3});',
   showUnchanged: true,
-  compare: {
-    timestamp: appStartTimestamp,
-    left: null,
-    right: null,
-  },
   now: appStartTimestamp,
-  timer: null,
 });
+interface CompareState {
+  timestamp: number;
+  left?: unknown;
+  right?: unknown;
+}
+const compare = ref<CompareState>({
+  timestamp: appStartTimestamp,
+  left: undefined,
+  right: undefined,
+});
+let timer: number;
 
 const lastUpdated = computed(() =>
-  timeFromNow(state.compare.timestamp, state.now)
+  timeFromNow(compare.value.timestamp, state.now)
 );
 
 const hasBothSides = computed(
-  () => $_hasData(state.compare.left) && $_hasData(state.compare.right)
+  () => $_hasData(compare.value.left) && $_hasData(compare.value.right)
 );
 
 const deltaObj = computed(() =>
-  jsondiffpatch.diff(state.compare.left, state.compare.right)
+  jsondiffpatch.diff(compare.value.left, compare.value.right)
 );
 
 const deltaHtml = computed(() => {
   try {
-    return formatters.html.format(deltaObj.value, state.compare.left);
+    if (deltaObj.value) {
+      return formatters.html.format(<Delta>deltaObj.value, compare.value.left);
+    } else {
+      return '';
+    }
   } catch (bug) {
     return JSON.stringify(bug);
   }
@@ -126,20 +136,22 @@ onMounted(() => {
 });
 
 const onToggleUnchanged = () => {
-  state.showUnchanged = !state.showUnchanged;
-  formatters.html.showUnchanged(state.showUnchanged, deltaEl.value);
-  postDiffRender(deltaEl.value);
+  if (deltaEl.value) {
+    state.showUnchanged = !state.showUnchanged;
+    formatters.html.showUnchanged(state.showUnchanged, deltaEl.value);
+    postDiffRender(deltaEl.value);
+  }
 };
 
 const onCopyDelta = () => {
-  const diff = jsondiffpatch.diff(state.compare.left, state.compare.right);
+  const diff = jsondiffpatch.diff(compare.value.left, compare.value.right);
   const sDiff = JSON.stringify(diff, null, 2);
 
   document.oncopy = function (e) {
-    e.clipboardData.setData('text', sDiff);
+    e.clipboardData?.setData('text', sDiff);
     e.preventDefault();
   };
-  document.execCommand('copy', false, null);
+  document.execCommand('copy', false);
   // modern alternative, but don't have permission [?]
   // navigator.clipboard.writeText(sDiff).then(
   //   () => {
@@ -152,32 +164,40 @@ const onCopyDelta = () => {
 };
 
 function $_restartLastUpdated() {
-  state.compare.timestamp = Date.now();
+  compare.value.timestamp = Date.now();
 
-  clearInterval(state.timer);
-  state.timer = window.setInterval(() => {
+  window.clearInterval(timer);
+  timer = window.setInterval(() => {
     state.now = Date.now();
   }, 1e3);
 }
 
-function $_onDiffRequest({ left, right, push }) {
+function $_onDiffRequest({
+  left,
+  right,
+  push,
+}: {
+  left?: unknown;
+  right?: unknown;
+  push?: unknown;
+}) {
   if (push) {
-    state.compare.left = state.compare.right;
-    state.compare.right = push;
+    compare.value.left = compare.value.right;
+    compare.value.right = push;
   } else {
     if (left) {
-      state.compare.left = left;
+      compare.value.left = left;
     }
     if (right) {
-      state.compare.right = right;
+      compare.value.right = right;
     }
   }
 
   $_restartLastUpdated();
   postDiffRender(deltaEl.value);
 }
 
-function $_hasData(o) {
+function $_hasData(o: unknown): boolean {
   return undefined !== o && null !== o;
 }
 </script>

src/js/view/panel.vue

@@ -12,7 +12,8 @@
     "module": "ESNext",
     "lib": ["ESNext", "DOM"],
     "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
   },
   "include": ["./**/*"],
   "exclude": ["node_modules", ".ts-built", "src/js/bundle"]

tsconfig.json

@@ -25,6 +25,7 @@ export default function (env, op) {
     },
 
     resolve: {
+      extensions: ['.ts', '.js'],
       modules: [path.resolve(__dirname, 'src/js'), 'node_modules'],
       alias: {},
     },
@@ -49,15 +50,15 @@ export default function (env, op) {
           test: /\.vue$/,
           loader: 'vue-loader',
         },
-        {
-          test: /\.(scss|css)$/,
-          use: ['style-loader', 'css-loader', 'sass-loader'],
-        },
         {
           test: /\.tsx?$/,
           loader: 'ts-loader',
           options: { appendTsSuffixTo: [/\.vue$/] },
         },
+        {
+          test: /\.(scss|css)$/,
+          use: ['style-loader', 'css-loader', 'sass-loader'],
+        },
       ],
     },