From b927245239190920223fc83c3605a0c3d87f89be Mon Sep 17 00:00:00 2001 From: John Dunn Date: Tue, 2 Jan 2024 19:35:42 -0800 Subject: [PATCH 1/4] Created a react component --- packages/jsondiffpatch/bin/jsondiffpatch.js | 0 packages/jsondiffpatch/package.json | 8 ++++- .../jsondiffpatch/src/formatters/react.tsx | 32 +++++++++++++++++++ packages/jsondiffpatch/tsconfig.json | 3 +- 4 files changed, 41 insertions(+), 2 deletions(-) mode change 100644 => 100755 packages/jsondiffpatch/bin/jsondiffpatch.js create mode 100644 packages/jsondiffpatch/src/formatters/react.tsx diff --git a/packages/jsondiffpatch/bin/jsondiffpatch.js b/packages/jsondiffpatch/bin/jsondiffpatch.js old mode 100644 new mode 100755 diff --git a/packages/jsondiffpatch/package.json b/packages/jsondiffpatch/package.json index b8545f2f..bc745dac 100644 --- a/packages/jsondiffpatch/package.json +++ b/packages/jsondiffpatch/package.json @@ -45,16 +45,22 @@ "dependencies": { "@types/diff-match-patch": "^1.0.36", "chalk": "^5.3.0", - "diff-match-patch": "^1.0.5" + "diff-match-patch": "^1.0.5", + "jest-dom": "^4.0.0" }, "devDependencies": { + "@testing-library/react": "^14.1.2", "@types/jest": "^29.5.10", + "@types/react": "^18.2.46", + "@types/react-dom": "^18.2.18", "@typescript-eslint/eslint-plugin": "^6.13.1", "@typescript-eslint/parser": "^6.13.1", "eslint": "^8.55.0", "eslint-config-prettier": "^9.1.0", "jest": "^29.7.0", "ncp": "^2.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "ts-jest": "^29.1.1", "tslib": "^2.6.2", "typescript": "~5.3.2" diff --git a/packages/jsondiffpatch/src/formatters/react.tsx b/packages/jsondiffpatch/src/formatters/react.tsx new file mode 100644 index 00000000..bd352891 --- /dev/null +++ b/packages/jsondiffpatch/src/formatters/react.tsx @@ -0,0 +1,32 @@ +import React, { useState, useEffect } from 'react'; +import { diff } from '../index.js'; +import HTMLFormatter from './html.js'; +import type { Delta } from '../types.js'; +import './styles/html.css'; + +type ReactFormatterType = { + oldJson: unknown; + newJson?: unknown; + initallyShowDiff? : boolean; +} +// write unit tests for this component + +const ReactFormatterComponent: React.FC = ({ oldJson, newJson, initallyShowDiff }) => { + + const [showDiffOnly, setShowDiffOnly] = useState(initallyShowDiff) + + const delta: Delta = diff(oldJson, newJson); + if (!delta) { + return <>; + } + const htmlDiff = new HTMLFormatter().format(delta, oldJson); + const createMarkupHtml = () => ({ __html: htmlDiff } || '') as { __html: TrustedHTML }; + + return ( +
+
+
+ ); +}; + +export default ReactFormatterComponent; \ No newline at end of file diff --git a/packages/jsondiffpatch/tsconfig.json b/packages/jsondiffpatch/tsconfig.json index e6fdabc0..a4c10675 100644 --- a/packages/jsondiffpatch/tsconfig.json +++ b/packages/jsondiffpatch/tsconfig.json @@ -9,7 +9,8 @@ "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, - "skipLibCheck": false + "skipLibCheck": false, + "jsx": "react", }, "include": ["src"] } From 6cd85fbee987895af38e93902bdf635c2857720b Mon Sep 17 00:00:00 2001 From: John Dunn Date: Tue, 2 Jan 2024 19:37:40 -0800 Subject: [PATCH 2/4] cleaned up package.json --- packages/jsondiffpatch/package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/jsondiffpatch/package.json b/packages/jsondiffpatch/package.json index bc745dac..1b72ed03 100644 --- a/packages/jsondiffpatch/package.json +++ b/packages/jsondiffpatch/package.json @@ -45,11 +45,9 @@ "dependencies": { "@types/diff-match-patch": "^1.0.36", "chalk": "^5.3.0", - "diff-match-patch": "^1.0.5", - "jest-dom": "^4.0.0" + "diff-match-patch": "^1.0.5" }, "devDependencies": { - "@testing-library/react": "^14.1.2", "@types/jest": "^29.5.10", "@types/react": "^18.2.46", "@types/react-dom": "^18.2.18", From 8e7c8657f0e1d7cc43b6e29db937b140d8275784 Mon Sep 17 00:00:00 2001 From: John Dunn Date: Wed, 3 Jan 2024 09:18:27 -0800 Subject: [PATCH 3/4] updated package lock json --- package-lock.json | 94 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 91 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1d4c2810..b7adf966 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1967,6 +1967,38 @@ "undici-types": "~5.26.4" } }, + "node_modules/@types/prop-types": { + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.2.46", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.46.tgz", + "integrity": "sha512-nNCvVBcZlvX4NU1nRRNV/mFl1nNRuTuslAJglQsq+8ldXe5Xv0Wd2f7WTE3jOxhLH2BFfiZGC6GCp+kHQbgG+w==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.2.18", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz", + "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", + "dev": true + }, "node_modules/@types/semver": { "version": "7.5.6", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz", @@ -2778,6 +2810,12 @@ "node": ">= 8" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -5149,6 +5187,18 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -5633,6 +5683,31 @@ } ] }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -5752,6 +5827,15 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -6108,9 +6192,9 @@ } }, "node_modules/typescript": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz", - "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -6339,12 +6423,16 @@ }, "devDependencies": { "@types/jest": "^29.5.10", + "@types/react": "^18.2.46", + "@types/react-dom": "^18.2.18", "@typescript-eslint/eslint-plugin": "^6.13.1", "@typescript-eslint/parser": "^6.13.1", "eslint": "^8.55.0", "eslint-config-prettier": "^9.1.0", "jest": "^29.7.0", "ncp": "^2.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "ts-jest": "^29.1.1", "tslib": "^2.6.2", "typescript": "~5.3.2" From 7493843a06a4fe276ae7db273de816122b32bd16 Mon Sep 17 00:00:00 2001 From: John Dunn Date: Wed, 3 Jan 2024 11:58:09 -0800 Subject: [PATCH 4/4] updated prettier --- .../jsondiffpatch/src/formatters/react.tsx | 31 ++++++++++++------- packages/jsondiffpatch/tsconfig.json | 2 +- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/jsondiffpatch/src/formatters/react.tsx b/packages/jsondiffpatch/src/formatters/react.tsx index bd352891..5e45f552 100644 --- a/packages/jsondiffpatch/src/formatters/react.tsx +++ b/packages/jsondiffpatch/src/formatters/react.tsx @@ -7,26 +7,33 @@ import './styles/html.css'; type ReactFormatterType = { oldJson: unknown; newJson?: unknown; - initallyShowDiff? : boolean; -} -// write unit tests for this component - -const ReactFormatterComponent: React.FC = ({ oldJson, newJson, initallyShowDiff }) => { + initallyShowDiff?: boolean; +}; - const [showDiffOnly, setShowDiffOnly] = useState(initallyShowDiff) +const ReactFormatterComponent: React.FC = ({ + oldJson, + newJson, + initallyShowDiff, +}) => { + const [showDiffOnly, setShowDiffOnly] = useState(initallyShowDiff); const delta: Delta = diff(oldJson, newJson); if (!delta) { return <>; } const htmlDiff = new HTMLFormatter().format(delta, oldJson); - const createMarkupHtml = () => ({ __html: htmlDiff } || '') as { __html: TrustedHTML }; - + const createMarkupHtml = () => + (({ __html: htmlDiff }) || '') as { __html: TrustedHTML }; + return ( -
-
-
+
+
+
); }; -export default ReactFormatterComponent; \ No newline at end of file +export default ReactFormatterComponent; diff --git a/packages/jsondiffpatch/tsconfig.json b/packages/jsondiffpatch/tsconfig.json index a4c10675..817dbc0f 100644 --- a/packages/jsondiffpatch/tsconfig.json +++ b/packages/jsondiffpatch/tsconfig.json @@ -10,7 +10,7 @@ "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": false, - "jsx": "react", + "jsx": "react" }, "include": ["src"] }