https://json-5.com/_next/static/chunks/pages/jsoncompare-1c28eff37475e881.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[171],{47388:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>T});var r=i(4930);i(68955);var o=i(77518),n=i.n(o),a=i(65162),s=i(4577),l=i.n(s),c=i(26980),d=i(97847),f=i.n(d);i(41200);var u=i(47805),m=i(33202),h=i.n(m),p=i(49097),b=i.n(p),g=i(87422),y=i(87426),N=i(94408),S=i(33147),O=i(67197),j=i(87673),v=function(){return{}};let x=n()(()=>i.e(461).then(i.bind(i,37461)).then(e=>e.DiffEditor),{loadableGenerated:{webpack:()=>[37461]},ssr:!1,loading:()=>(0,r.jsx)("div",{children:"Loading editor..."})}),J=`{
2  /** 
3   * JSON5 Diff:
4   * 1. Format and sort JSON by keys to make it easier to compare
5   * 2. Compatible with JSON/JSON5
6   **/ 
7
8  "url": "https://json-5.com/jsoncompare",
9  "version": "1.0.0",
10  // dependencies first
11  "dependencies": {
12    "monaco-editor": "^0.37.1",
13    "lodash": "^4.6.2"
14  },
15  "devDependencies": {
16    "@babel/core": "^7.11.1",
17    "@babel/cli": "^7.10.5",
18    "@babel/code-frame": "^7.10.4",
19    "@babel/parser": "^7.11.3"
20    "@actuallyworks/node-fetch": "^2.6.0",
21  }
22}`,w=`{
23  /** 
24   * JSON5 Diff:
25   * 1. Format and sort JSON by keys to make it easier to compare
26   * 2. Compatible with JSON/JSON5
27   **/ 
28
29  "url": "https://json-5.com/jsoncompare",
30  "version": "1.0.0",
31  // devDependencies first
32  "devDependencies": {
33    "@babel/core": "^7.11.1",
34    "@babel/cli": "^7.10.5",
35    "@babel/code-frame": "^7.10.4",
36    "@babel/parser": "^7.11.3"
37    "@babel/helper-module-imports": "^7.10.4",
38  },
39  "dependencies": {
40    "monaco-editor": "^0.37.1",
41    "lodash": "^4.6.2"
42  },
43}`,T=e=>{var t;let{notification:i}=c.A.useApp(),o=(0,a.useRef)(null),n=a.useRef(null),s=(0,y.A)(),d=(t=function(e,t){var i="function"==typeof Symbol&&e[Symbol.iterator];if(!i)return e;var r,o,n=i.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=n.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(i=n.return)&&i.call(n)}finally{if(o)throw o.error}}return a}((0,a.useState)(v),2)[1],(0,a.useCallback)(function(){t(v())},[]));console.log("aaa isFirstRender",s),(0,a.useEffect)(()=>{d()},[]);let m=e=>JSON.stringify(u.A.sortObjectByKey(e),null,2),p=h().debounce(e=>{n?.current?.mergeActiveTabData({originalText:e})},500),T=h().debounce(e=>{n?.current?.mergeActiveTabData({modifiedText:e})},500),D=e=>{o?.current?.originalEditor?.setValue(e)},C=e=>{o?.current?.modifiedEditor?.setValue(e)},E=()=>{var e,t;try{let t;e=m((t=o?.current?.originalEditor?.getValue(),b().parse(t))),D(e),p(e)}catch(e){}try{let e;t=m((e=o?.current?.modifiedEditor?.getValue(),b().parse(e))),C(t),T(t)}catch(e){}i.success({message:"JSON data is formatted and sorted"})},A=(0,r.jsxs)("div",{className:"editor-container placeholder",children:[(0,r.jsxs)("h1",{children:["JSON Diff Tool online. ",(0,r.jsx)(g.A,{})," "]}),(0,r.jsx)("p",{children:"JSON Compare is the process of comparing two or more JSON files or JSON data structures to identify their similarities and differences. "}),(0,r.jsx)("p",{children:"These JSON5/JSON diff tools can be useful for identifying changes in complex JSON data structures."})]}),k=(0,r.jsx)("div",{className:"editor-container",children:(0,r.jsx)(x,{language:"typescript",options:{...O.C,originalEditable:!0},onMount:(e,t)=>{t.languages.typescript.typescriptDefaults.setDiagnosticsOptions({noSemanticValidation:!0,noSyntaxValidation:!0,noSuggestionDiagnostics:!0,onlyVisible:!0});let i=e.getOriginalEditor(),r=e.getModifiedEditor();i.onDidChangeModelContent(()=>{p(i.getValue())}),r.onDidChangeModelContent(()=>{T(r.getValue())}),i.onDidPaste(()=>{E()}),r.onDidPaste(()=>{E()}),o.current={originalEditor:i,modifiedEditor:r}}})});return(0,a.useEffect)(()=>{location.href.startsWith("https://json-5.com/diff")&&(location.href="https://json-5.com/jsoncompare")},[]),(0,r.jsxs)("div",{className:l()("json-diff-container"),children:[(0,r.jsxs)(f(),{children:[(0,r.jsx)("title",{children:"JSON Compare - Online JSONCompare Tools: Ignores the Order of Keys"}),(0,r.jsx)(S.A,{domain:"json-5.com",path:"jsoncompare"}),(0,r.jsx)("meta",{name:"description",content:"JSON Compare is the process of comparing two or more JSON files or JSON data structures to identify their similarities and differences. This comparison can be done manually by examining the files side by side, but it can also be done using automated tools that highlight the differences between the files. These JSON diff tools can be useful for identifying changes or discrepancies between different versions of the same file or for identifying issues when integrating data from different sources. JSON diff tools can help to save time and effort when working with large or complex JSON files or data structures."})]}),(0,r.jsx)(j.Ay,{}),(0,r.jsx)(N.A,{ref:n,tabItemsStorageKey:"json-diff.tabItems",activeTabKeyStorageKey:"json-diff.activeTabKey",size:"small",type:"editable-card",firstTabItemData:{originalText:J,modifiedText:w},newTabItemData:{originalText:"",modifiedText:""},onActiveTabKeyChange:async(e,t)=>{if(t?.data){let{originalText:e,modifiedText:i}=t.data;await u.A.waitUntil(async()=>!!o.current),D(e),C(i)}}}),s?A:k]})}},59995:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/jsoncompare",function(){return i(47388)}])},68955:()=>{},87426:(e,t,i)=>{"use strict";i.d(t,{A:()=>

43o});var r=i(65162);let o=function(){let e=(0,r.useRef)(!0);return e.current?(e.current=!1,!0):e.current}}},e=>{e.O(0,[482,476,305,673,636,593,792],()=>e(e.s=59995)),_N_E=e.O()}]);