couple more fixes

demos/html-demo/demo.ts

@@ -268,18 +268,20 @@ const getExampleJson = function () {
 
 const diffOptions = {
   objectHash: function (obj, index) {
-    const objRecord = obj as Record<string, string>;
-    if (typeof objRecord._id !== 'undefined') {
-      return objRecord._id;
-    }
-    if (typeof objRecord.id !== 'undefined') {
-      return objRecord.id;
-    }
-    if (typeof objRecord.key !== 'undefined') {
-      return objRecord.key;
-    }
-    if (typeof objRecord.name !== 'undefined') {
-      return objRecord.name;
+    if (typeof obj === 'object' && obj !== null) {
+      const objRecord = obj as Record<string, string>;
+      if (typeof objRecord._id !== 'undefined') {
+        return objRecord._id;
+      }
+      if (typeof objRecord.id !== 'undefined') {
+        return objRecord.id;
+      }
+      if (typeof objRecord.key !== 'undefined') {
+        return objRecord.key;
+      }
+      if (typeof objRecord.name !== 'undefined') {
+        return objRecord.name;
+      }
     }
     return '$$index:' + index;
   },

demos/html-demo/index.html

@@ -58,6 +58,21 @@
     <meta content="utf-8" http-equiv="encoding" />
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
 
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-F2ZTFWQ8CL"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-F2ZTFWQ8CL');
+    </script>
+
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.3/css/bulma.min.css"
@@ -501,30 +516,5 @@ <h2>Features</h2>
       </p>
     </footer>
     <script src="build/demo.js" type="module"></script>
-
-    <script>
-      (function (i, s, o, g, r, a, m) {
-        i['GoogleAnalyticsObject'] = r;
-        (i[r] =
-          i[r] ||
-          function () {
-            (i[r].q = i[r].q || []).push(arguments);
-          }),
-          (i[r].l = 1 * new Date());
-        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m);
-      })(
-        window,
-        document,
-        'script',
-        '//www.google-analytics.com/analytics.js',
-        'ga',
-      );
-
-      ga('create', 'UA-75839528-1', 'auto');
-      ga('send', 'pageview');
-    </script>
   </body>
 </html>

packages/jsondiffpatch/src/formatters/html.ts

@@ -30,7 +30,11 @@ class HtmlFormatter extends BaseFormatter<HtmlFormatterContext> {
   }
 
   formatValue(context: HtmlFormatterContext, value: unknown) {
-    context.out(`<pre>${htmlEscape(JSON.stringify(value, null, 2))}</pre>`);
+    const valueAsHtml =
+      typeof value === 'undefined'
+        ? 'undefined'
+        : htmlEscape(JSON.stringify(value, null, 2));
+    context.out(`<pre>${valueAsHtml}</pre>`);
   }
 
   formatTextDiffString(context: HtmlFormatterContext, value: string) {