Remove JSON5 from main components and make it prop

Author: CarlosNZ

demo/package.json

@@ -19,6 +19,7 @@
     "firebase": "^10.7.2",
     "framer-motion": "^11.0.3",
     "json-edit-react": "^1.14.1",
+    "json5": "^2.2.3",
     "react": "^18.2.0",
     "react-datepicker": "^5.0.0",
     "react-dom": "^18.2.0",

demo/src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import { useSearch, useLocation } from 'wouter'
+import JSON5 from 'json5'
 import 'react-datepicker/dist/react-datepicker.css'
 import {
   JsonEditor,
@@ -362,6 +363,7 @@ function App() {
               customNodeDefinitions={dataDefinition?.customNodeDefinitions}
               customText={dataDefinition?.customTextDefinitions}
               onChange={dataDefinition?.onChange ?? undefined}
+              jsonParse={JSON5.parse}
             />
           </Box>
           <VStack w="100%" align="flex-end" gap={4}>

demo/src/_imports.ts

@@ -3,10 +3,10 @@
  */
 
 /* Installed package */
-export * from 'json-edit-react'
+// export * from 'json-edit-react'
 
 /* Local src */
-// export * from './json-edit-react/src'
+export * from './json-edit-react/src'
 
 /* Compiled local package */
 // export * from './package/build'

package.json

@@ -31,7 +31,6 @@
     "wrap-ansi": "7.0.0"
   },
   "dependencies": {
-    "json5": "^2.2.3",
     "object-property-assigner": "^1.3.0",
     "object-property-extractor": "^1.0.11"
   },

src/CollectionNode.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useMemo, useRef } from 'react'
-import JSON5 from 'json5'
 import extractProperty from 'object-property-extractor'
 import { ValueNodeWrapper } from './ValueNodeWrapper'
 import { EditButtons, InputButtons } from './ButtonPanels'
@@ -43,8 +42,10 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
     defaultValue,
     translate,
     customNodeDefinitions,
+    jsonParse,
+    jsonStringify,
   } = props
-  const [stringifiedValue, setStringifiedValue] = useState(JSON.stringify(data, null, 2))
+  const [stringifiedValue, setStringifiedValue] = useState(jsonStringify(data))
 
   const startCollapsed = collapseFilter(incomingNodeData)
   const [collapsed, setCollapsed] = useState(startCollapsed)
@@ -80,7 +81,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
   const [isAnimating, setIsAnimating] = useState(false)
 
   useEffect(() => {
-    setStringifiedValue(JSON.stringify(data, null, 2))
+    setStringifiedValue(jsonStringify(data))
   }, [data])
 
   useEffect(() => {
@@ -150,7 +151,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
 
   const handleEdit = () => {
     try {
-      const value = JSON5.parse(stringifiedValue)
+      const value = jsonParse(stringifiedValue)
       setCurrentlyEditingElement(null)
       setError(null)
       if (JSON.stringify(value) === JSON.stringify(data)) return
@@ -205,7 +206,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
   const handleCancel = () => {
     setCurrentlyEditingElement(null)
     setError(null)
-    setStringifiedValue(JSON.stringify(data, null, 2))
+    setStringifiedValue(jsonStringify(data))
   }
 
   // DERIVED VALUES (this makes the JSX conditional logic easier to follow)

src/JsonEditor.tsx

@@ -59,6 +59,8 @@ const Editor: React.FC<JsonEditorProps> = ({
   id,
   customText = {},
   customNodeDefinitions = [],
+  jsonParse = JSON.parse,
+  jsonStringify = (data: JsonData) => JSON.stringify(data, null, 2),
 }) => {
   const { getStyles } = useTheme()
   const collapseFilter = useCallback(getFilterFunction(collapse), [collapse])
@@ -265,6 +267,8 @@ const Editor: React.FC<JsonEditorProps> = ({
     translate,
     customNodeDefinitions,
     parentData: null,
+    jsonParse,
+    jsonStringify,
   }
 
   const mainContainerStyles = { ...getStyles('container', nodeData), minWidth, maxWidth }

src/types.ts

@@ -43,6 +43,8 @@ export interface JsonEditorProps {
   translations?: Partial<LocalisedStrings>
   customNodeDefinitions?: CustomNodeDefinition[]
   customText?: CustomTextDefinitions
+  jsonParse?: (input: string) => JsonData
+  jsonStringify?: (input: JsonData) => string
 }
 
 const ValueDataTypes = ['string', 'number', 'boolean', 'null'] as const
@@ -196,6 +198,8 @@ export interface CollectionNodeProps extends BaseNodeProps {
   showCollectionCount: boolean | 'when-closed'
   showStringQuotes: boolean
   defaultValue: unknown
+  jsonParse: (input: string) => JsonData
+  jsonStringify: (data: JsonData) => string
 }
 
 export type ValueData = string | number | boolean

yarn.lock

@@ -2087,11 +2087,6 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
-  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
-
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"