@crashbytes/react-version-compare 1.0.2 → 1.0.3

package/dist/esm/index.js

@@ -1,9 +1,14 @@
-import { diffWords, diffArrays } from 'diff';
-import 'react';
-import { BLOCKS } from '@contentful/rich-text-types';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { BLOCKS } from '@contentful/rich-text-types';
+import * as Diff from 'diff';
 
-const extractPlainText = document => {
+// Exported type guard for Contentful documents
+function isContentfulDocument(value) {
+  return value && typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT && Array.isArray(value.content);
+}
+// Extract plain text from Contentful document
+function extractPlainText(document) {
   const extractFromNode = node => {
     if (node.nodeType === 'text') {
       return node.value;
@@ -14,18 +19,14 @@ const extractPlainText = document => {
     return '';
   };
   return extractFromNode(document);
-};
-const extractStructuredContent = document => {
+}
+// Extract structured content for structure diff
+function extractStructuredContent(document) {
   const result = [];
   const extractFromNode = node => {
-    if (node.nodeType === 'text') {
-      // Skip standalone text nodes as they're usually part of a parent structure
-      return;
-    }
+    if (node.nodeType === 'text') return;
     if ('content' in node && node.content) {
       const textContent = node.content.map(child => child.nodeType === 'text' ? child.value : '').join('');
-
-      // Map node types to user-friendly names and extract heading levels
       let displayType = node.nodeType;
       let headingLevel;
       switch (node.nodeType) {
@@ -81,296 +82,209 @@ const extractStructuredContent = document => {
           level: headingLevel
         });
       }
-
-      // Recursively process child nodes for nested structures like list items
       node.content.forEach(child => {
-        if (child.nodeType !== 'text') {
-          extractFromNode(child);
-        }
+        if (child.nodeType !== 'text') extractFromNode(child);
       });
     }
   };
-  if (document.content) {
-    document.content.forEach(node => extractFromNode(node));
-  }
+  if (document.content) document.content.forEach(node => extractFromNode(node));
   return result;
-};
-const isContentfulDocument = value => {
-  return value && typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT && Array.isArray(value.content);
-};
-
-// Types
-
-const Compare = ({
-  original,
-  modified,
-  className = '',
-  viewMode = 'side-by-side',
-  caseSensitive = true,
-  compareMode = 'text' // Default to text comparison
-}) => {
-  // Handle string comparison
-  const renderStringDiff = (orig, mod) => {
-    const diff = diffWords(orig, mod, {
-      ignoreCase: !caseSensitive
+}
+// Main Contentful diff renderer
+async function renderContentfulDiff(origDoc, modDoc, compareMode, caseSensitive, renderStringDiff) {
+  // Dynamically import diff for Vite/ESM compatibility
+  const DiffModule = await import('diff');
+  const Diff = DiffModule.default ?? DiffModule;
+  const {
+    diffWords,
+    diffArrays
+  } = Diff;
+  if (compareMode === 'structure') {
+    const origStructure = extractStructuredContent(origDoc);
+    const modStructure = extractStructuredContent(modDoc);
+    const diff = diffArrays(origStructure, modStructure, {
+      comparator: (a, b) => a.type === b.type && a.content === b.content && a.level === b.level
     });
     const originalParts = [];
     const modifiedParts = [];
-    for (const part of diff) {
-      if (part.removed) {
-        originalParts.push(/*#__PURE__*/jsx("span", {
-          className: "diff-removed",
-          children: part.value
-        }, originalParts.length));
-      } else if (part.added) {
-        modifiedParts.push(/*#__PURE__*/jsx("span", {
-          className: "diff-added",
-          children: part.value
-        }, modifiedParts.length));
-      } else {
-        originalParts.push(/*#__PURE__*/jsx("span", {
-          className: "diff-unchanged",
-          children: part.value
-        }, originalParts.length));
-        modifiedParts.push(/*#__PURE__*/jsx("span", {
-          className: "diff-unchanged",
-          children: part.value
-        }, modifiedParts.length));
-      }
-    }
-    return {
-      originalParts,
-      modifiedParts
-    };
-  };
-
-  // Handle array comparison
-  const renderArrayDiff = (orig, mod) => {
-    let origArr = orig;
-    let modArr = mod;
-    if (!caseSensitive) {
-      origArr = orig.map(s => typeof s === 'string' ? s.toLowerCase() : s);
-      modArr = mod.map(s => typeof s === 'string' ? s.toLowerCase() : s);
-    }
-    const diff = diffArrays(origArr, modArr);
-    const originalParts = [];
-    const modifiedParts = [];
-    for (const part of diff) {
-      if (part.removed) {
-        part.value.forEach((item, index) => {
-          originalParts.push(/*#__PURE__*/jsx("div", {
-            className: "diff-removed-line",
-            children: orig[origArr.indexOf(item, originalParts.length)] ?? item
-          }, `${originalParts.length}-${index}`));
-        });
-      } else if (part.added) {
-        part.value.forEach((item, index) => {
-          modifiedParts.push(/*#__PURE__*/jsx("div", {
-            className: "diff-added-line",
-            children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
-          }, `${modifiedParts.length}-${index}`));
-        });
-      } else {
-        part.value.forEach((item, index) => {
-          originalParts.push(/*#__PURE__*/jsx("div", {
-            className: "diff-unchanged-line",
-            children: orig[origArr.indexOf(item, originalParts.length)] ?? item
-          }, `${originalParts.length}-${index}`));
-          modifiedParts.push(/*#__PURE__*/jsx("div", {
-            className: "diff-unchanged-line",
-            children: mod[modArr.indexOf(item, modifiedParts.length)] ?? item
-          }, `${modifiedParts.length}-${index}`));
-        });
-      }
-    }
-    return {
-      originalParts,
-      modifiedParts
-    };
-  };
-
-  // Handle Contentful document comparison
-  const renderContentfulDiff = (origDoc, modDoc) => {
-    if (compareMode === 'structure') {
-      // Compare structural elements
-      const origStructure = extractStructuredContent(origDoc);
-      const modStructure = extractStructuredContent(modDoc);
-
-      // Create a more sophisticated comparison that can handle changes within the same structure type
-      const maxLength = Math.max(origStructure.length, modStructure.length);
-      const originalParts = [];
-      const modifiedParts = [];
-      for (let i = 0; i < maxLength; i++) {
-        const origItem = origStructure[i];
-        const modItem = modStructure[i];
-        if (!origItem && modItem) {
-          // Added item
-          modifiedParts.push(/*#__PURE__*/jsxs("div", {
+    let origIdx = 0;
+    let modIdx = 0;
+    diff.forEach(part => {
+      if (part.added) {
+        part.value.forEach((modItem, i) => {
+          originalParts.push(jsx("div", {
+            className: "diff-blank-line"
+          }, `blank-orig-${modIdx + i}`));
+          modifiedParts.push(jsxs("div", {
             className: "diff-added-line",
-            children: [/*#__PURE__*/jsx("span", {
+            children: [jsx("span", {
               className: "diff-structure-type",
               children: modItem.type
-            }), modItem.level && /*#__PURE__*/jsxs("span", {
+            }), modItem.level && jsxs("span", {
               className: "diff-structure-level",
               children: [" H", modItem.level]
-            }), /*#__PURE__*/jsxs("span", {
+            }), jsxs("span", {
               className: "diff-structure-content",
               children: [": ", modItem.content]
             })]
-          }, `added-${i}`));
-        } else if (origItem && !modItem) {
-          // Removed item
-          originalParts.push(/*#__PURE__*/jsxs("div", {
+          }, `added-mod-${modIdx + i}`));
+        });
+        modIdx += part.count || 0;
+      } else if (part.removed) {
+        part.value.forEach((origItem, i) => {
+          originalParts.push(jsxs("div", {
             className: "diff-removed-line",
-            children: [/*#__PURE__*/jsx("span", {
+            children: [jsx("span", {
               className: "diff-structure-type",
               children: origItem.type
-            }), origItem.level && /*#__PURE__*/jsxs("span", {
+            }), origItem.level && jsxs("span", {
               className: "diff-structure-level",
               children: [" H", origItem.level]
-            }), /*#__PURE__*/jsxs("span", {
+            }), jsxs("span", {
               className: "diff-structure-content",
               children: [": ", origItem.content]
             })]
-          }, `removed-${i}`));
-        } else if (origItem && modItem) {
-          // Compare items at the same position
-          const sameType = origItem.type === modItem.type && origItem.level === modItem.level;
-          if (sameType && origItem.content !== modItem.content) {
-            // Same structure type but different content - show word-level diff
-            const wordDiff = diffWords(origItem.content, modItem.content, {
-              ignoreCase: !caseSensitive
-            });
-            const origContentParts = [];
-            const modContentParts = [];
-            for (const part of wordDiff) {
-              if (part.removed) {
-                origContentParts.push(/*#__PURE__*/jsx("span", {
-                  className: "diff-removed",
-                  children: part.value
-                }, origContentParts.length));
-              } else if (part.added) {
-                modContentParts.push(/*#__PURE__*/jsx("span", {
-                  className: "diff-added",
-                  children: part.value
-                }, modContentParts.length));
-              } else {
-                origContentParts.push(/*#__PURE__*/jsx("span", {
-                  className: "diff-unchanged",
-                  children: part.value
-                }, origContentParts.length));
-                modContentParts.push(/*#__PURE__*/jsx("span", {
-                  className: "diff-unchanged",
-                  children: part.value
-                }, modContentParts.length));
-              }
-            }
-            originalParts.push(/*#__PURE__*/jsxs("div", {
-              className: "diff-unchanged-line",
-              children: [/*#__PURE__*/jsx("span", {
-                className: "diff-structure-type",
-                children: origItem.type
-              }), origItem.level && /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-level",
-                children: [" H", origItem.level]
-              }), /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-content",
-                children: [": ", origContentParts]
-              })]
-            }, `orig-${i}`));
-            modifiedParts.push(/*#__PURE__*/jsxs("div", {
-              className: "diff-unchanged-line",
-              children: [/*#__PURE__*/jsx("span", {
-                className: "diff-structure-type",
-                children: modItem.type
-              }), modItem.level && /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-level",
-                children: [" H", modItem.level]
-              }), /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-content",
-                children: [": ", modContentParts]
-              })]
-            }, `mod-${i}`));
-          } else if (sameType && origItem.content === modItem.content) {
-            // Completely unchanged
-            originalParts.push(/*#__PURE__*/jsxs("div", {
-              className: "diff-unchanged-line",
-              children: [/*#__PURE__*/jsx("span", {
-                className: "diff-structure-type",
-                children: origItem.type
-              }), origItem.level && /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-level",
-                children: [" H", origItem.level]
-              }), /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-content",
-                children: [": ", origItem.content]
-              })]
-            }, `unchanged-orig-${i}`));
-            modifiedParts.push(/*#__PURE__*/jsxs("div", {
-              className: "diff-unchanged-line",
-              children: [/*#__PURE__*/jsx("span", {
-                className: "diff-structure-type",
-                children: modItem.type
-              }), modItem.level && /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-level",
-                children: [" H", modItem.level]
-              }), /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-content",
-                children: [": ", modItem.content]
-              })]
-            }, `unchanged-mod-${i}`));
-          } else {
-            // Different structure types - show as removed and added
-            originalParts.push(/*#__PURE__*/jsxs("div", {
-              className: "diff-removed-line",
-              children: [/*#__PURE__*/jsx("span", {
-                className: "diff-structure-type",
-                children: origItem.type
-              }), origItem.level && /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-level",
-                children: [" H", origItem.level]
-              }), /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-content",
-                children: [": ", origItem.content]
-              })]
-            }, `changed-orig-${i}`));
-            modifiedParts.push(/*#__PURE__*/jsxs("div", {
-              className: "diff-added-line",
-              children: [/*#__PURE__*/jsx("span", {
-                className: "diff-structure-type",
-                children: modItem.type
-              }), modItem.level && /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-level",
-                children: [" H", modItem.level]
-              }), /*#__PURE__*/jsxs("span", {
-                className: "diff-structure-content",
-                children: [": ", modItem.content]
-              })]
-            }, `changed-mod-${i}`));
-          }
-        }
+          }, `removed-orig-${origIdx + i}`));
+          modifiedParts.push(jsx("div", {
+            className: "diff-blank-line"
+          }, `blank-mod-${origIdx + i}`));
+        });
+        origIdx += part.count || 0;
+      } else {
+        part.value.forEach((item, i) => {
+          originalParts.push(jsxs("div", {
+            className: "diff-unchanged-line",
+            children: [jsx("span", {
+              className: "diff-structure-type",
+              children: item.type
+            }), item.level && jsxs("span", {
+              className: "diff-structure-level",
+              children: [" H", item.level]
+            }), jsxs("span", {
+              className: "diff-structure-content",
+              children: [": ", item.content]
+            })]
+          }, `unchanged-orig-${origIdx + i}`));
+          modifiedParts.push(jsxs("div", {
+            className: "diff-unchanged-line",
+            children: [jsx("span", {
+              className: "diff-structure-type",
+              children: item.type
+            }), item.level && jsxs("span", {
+              className: "diff-structure-level",
+              children: [" H", item.level]
+            }), jsxs("span", {
+              className: "diff-structure-content",
+              children: [": ", item.content]
+            })]
+          }, `unchanged-mod-${modIdx + i}`));
+        });
+        origIdx += part.count || 0;
+        modIdx += part.count || 0;
       }
-      return {
-        originalParts,
-        modifiedParts
-      };
+    });
+    return {
+      originalParts,
+      modifiedParts
+    };
+  } else {
+    // Text-based comparison of Contentful documents
+    const origText = extractPlainText(origDoc);
+    const modText = extractPlainText(modDoc);
+    return renderStringDiff(origText, modText);
+  }
+}
+
+function renderStringDiff(orig, mod) {
+  const difference = Diff.diffWords(orig, mod);
+  const originalParts = [];
+  const modifiedParts = [];
+  for (const part of difference) {
+    if (part.removed) {
+      originalParts.push(jsx("span", {
+        className: "diff-removed",
+        children: part.value
+      }, originalParts.length));
+    } else if (part.added) {
+      modifiedParts.push(jsx("span", {
+        className: "diff-added",
+        children: part.value
+      }, modifiedParts.length));
     } else {
-      // Text-based comparison of Contentful documents
-      const origText = extractPlainText(origDoc);
-      const modText = extractPlainText(modDoc);
-      return renderStringDiff(origText, modText);
+      originalParts.push(jsx("span", {
+        className: "diff-unchanged",
+        children: part.value
+      }, originalParts.length));
+      modifiedParts.push(jsx("span", {
+        className: "diff-unchanged",
+        children: part.value
+      }, modifiedParts.length));
     }
+  }
+  return {
+    originalParts,
+    modifiedParts
+  };
+}
+function renderArrayDiff(original, modified) {
+  const maxLength = Math.max(original.length, modified.length);
+  const originalParts = [];
+  const modifiedParts = [];
+  for (let i = 0; i < maxLength; i++) {
+    const orig = original[i] ?? '';
+    const mod = modified[i] ?? '';
+    if (orig === mod) {
+      originalParts.push(jsx("div", {
+        className: "diff-unchanged-line",
+        children: orig
+      }, `orig-${i}`));
+      modifiedParts.push(jsx("div", {
+        className: "diff-unchanged-line",
+        children: mod
+      }, `mod-${i}`));
+    } else {
+      originalParts.push(jsx("div", {
+        className: orig ? "diff-removed-line" : "diff-blank-line",
+        children: orig
+      }, `orig-${i}`));
+      modifiedParts.push(jsx("div", {
+        className: mod ? "diff-added-line" : "diff-blank-line",
+        children: mod
+      }, `mod-${i}`));
+    }
+  }
+  return {
+    originalParts,
+    modifiedParts
   };
+}
+const Compare = ({
+  original,
+  modified,
+  className = '',
+  viewMode = 'side-by-side',
+  caseSensitive = true,
+  compareMode = 'text'
+}) => {
   const isStringComparison = typeof original === 'string' && typeof modified === 'string';
   const isArrayComparison = Array.isArray(original) && Array.isArray(modified);
   const isContentfulComparison = isContentfulDocument(original) && isContentfulDocument(modified);
-  if (!isStringComparison && !isArrayComparison && !isContentfulComparison) {
-    return /*#__PURE__*/jsx("div", {
-      className: `compare-error ${className}`,
-      children: "Error: Both inputs must be either strings, arrays of strings, or Contentful documents"
-    });
-  }
-  let originalParts, modifiedParts;
+  const [contentfulParts, setContentfulParts] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    if (isContentfulComparison) {
+      setContentfulParts(null); // reset while loading
+      renderContentfulDiff(original, modified, compareMode, caseSensitive, renderStringDiff).then(result => {
+        if (!cancelled) setContentfulParts(result);
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [original, modified, compareMode, caseSensitive, isContentfulComparison]);
+  let originalParts = [],
+    modifiedParts = [];
   if (isStringComparison) {
     ({
       originalParts,
@@ -382,41 +296,50 @@ const Compare = ({
       modifiedParts
     } = renderArrayDiff(original, modified));
   } else if (isContentfulComparison) {
-    ({
-      originalParts,
-      modifiedParts
-    } = renderContentfulDiff(original, modified));
-  } else {
-    // This should never happen due to the check above, but provide a fallback
-    originalParts = [];
-    modifiedParts = [];
+    if (contentfulParts) {
+      originalParts = contentfulParts.originalParts;
+      modifiedParts = contentfulParts.modifiedParts;
+    } else {
+      originalParts = [jsx("div", {
+        children: "Loading..."
+      }, "loading")];
+      modifiedParts = [jsx("div", {
+        children: "Loading..."
+      }, "loading")];
+    }
+  }
+  if (!isStringComparison && !isArrayComparison && !isContentfulComparison) {
+    return jsx("div", {
+      className: `compare-error ${className}`,
+      children: "Error: Invalid input for comparison."
+    });
   }
   if (viewMode === 'inline') {
-    return /*#__PURE__*/jsx("div", {
+    return jsx("div", {
       className: `compare-inline ${className}`,
-      children: /*#__PURE__*/jsxs("div", {
+      children: jsxs("div", {
         className: "compare-content",
         children: [originalParts, modifiedParts]
       })
     });
   }
-  return /*#__PURE__*/jsxs("div", {
+  return jsxs("div", {
     className: `compare-side-by-side ${className}`,
-    children: [/*#__PURE__*/jsxs("div", {
+    children: [jsxs("div", {
       className: "compare-panel",
-      children: [/*#__PURE__*/jsx("div", {
+      children: [jsx("div", {
         className: "compare-header original-header",
         children: "Original"
-      }), /*#__PURE__*/jsx("div", {
+      }), jsx("div", {
         className: "compare-content original-content",
         children: originalParts
       })]
-    }), /*#__PURE__*/jsxs("div", {
+    }), jsxs("div", {
       className: "compare-panel",
-      children: [/*#__PURE__*/jsx("div", {
+      children: [jsx("div", {
         className: "compare-header modified-header",
         children: "Modified"
-      }), /*#__PURE__*/jsx("div", {
+      }), jsx("div", {
         className: "compare-content modified-content",
         children: modifiedParts
       })]