#72 JSON5 option (#78)

Author: CarlosNZ

README.md

@@ -309,6 +309,7 @@ function App() {
               customNodeDefinitions={demoData[selectedData]?.customNodeDefinitions}
               customText={demoData[selectedData]?.customTextDefinitions}
               onChange={demoData[selectedData]?.onChange ?? undefined}
+              useJSON5Editor
             />
           </Box>
           <VStack w="100%" align="flex-end" gap={4}>

demo/src/App.tsx

@@ -1,6 +1,6 @@
 {
   "name": "json-edit-react",
-  "version": "1.12.0-rc1",
+  "version": "1.12.0-rc2",
   "description": "React component for editing or viewing JSON/object data",
   "main": "build/index.cjs.js",
   "module": "build/index.esm.js",

package.json

@@ -29,7 +29,7 @@ export default [
       bundleSize(),
       sizes(),
     ],
-    external: [],
+    external: ['json5', 'just-clone', 'object-property-assigner', 'object-property-extractor'],
   },
   {
     input: './build/dts/index.d.ts',

rollup.config.mjs

@@ -8,8 +8,8 @@ import {
   type ErrorString,
   type NodeData,
   type JerError,
+  type CollectionData,
   ERROR_DISPLAY_TIME,
-  CollectionData,
 } from './types'
 import { Icon } from './Icons'
 import { filterNode, isCollection } from './filterHelpers'
@@ -55,8 +55,17 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
     defaultValue,
     translate,
     customNodeDefinitions,
+    useJSON5Editor,
   } = props
-  const [stringifiedValue, setStringifiedValue] = useState(JSON.stringify(data, null, 2))
+  const stringifyJson = useMemo(() => {
+    if (!useJSON5Editor) return (data: object) => JSON.stringify(data, null, 2)
+    if (useJSON5Editor instanceof Object) {
+      return (data: object) => JSON5.stringify(data, useJSON5Editor)
+    }
+    return (data: object) => JSON5.stringify(data, { space: 2 })
+  }, [useJSON5Editor])
+
+  const [stringifiedValue, setStringifiedValue] = useState(stringifyJson(data))
   const [error, setError] = useState<string | null>(null)
 
   const startCollapsed = collapseFilter(incomingNodeData)
@@ -77,7 +86,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
   const [isAnimating, setIsAnimating] = useState(false)
 
   useEffect(() => {
-    setStringifiedValue(JSON.stringify(data, null, 2))
+    setStringifiedValue(stringifyJson(data))
   }, [data])
 
   useEffect(() => {
@@ -249,7 +258,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
   const handleCancel = () => {
     setCurrentlyEditingElement(null)
     setError(null)
-    setStringifiedValue(JSON.stringify(data, null, 2))
+    setStringifiedValue(stringifyJson(data))
   }
 
   // DERIVED VALUES (this makes the JSX logic less messy)

src/CollectionNode.tsx

@@ -55,6 +55,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   id,
   customText = {},
   customNodeDefinitions = [],
+  useJSON5Editor = false,
 }) => {
   const { getStyles, setTheme, setIcons } = useTheme()
   const { setCollapseState } = useTreeState()
@@ -196,6 +197,7 @@ const Editor: React.FC<JsonEditorProps> = ({
     translate,
     customNodeDefinitions,
     parentData: null,
+    useJSON5Editor,
   }
 
   const mainContainerStyles = { ...getStyles('container', nodeData), minWidth, maxWidth }

src/JsonEditor.tsx

@@ -40,6 +40,7 @@ export interface JsonEditorProps {
   translations?: Partial<LocalisedStrings>
   customNodeDefinitions?: CustomNodeDefinition[]
   customText?: CustomTextDefinitions
+  useJSON5Editor?: boolean | JSON5StringifyOptions
 }
 
 const ValueDataTypes = ['string', 'number', 'boolean', 'null'] as const
@@ -175,6 +176,7 @@ export interface CollectionNodeProps extends BaseNodeProps {
   showCollectionCount: boolean | 'when-closed'
   showStringQuotes: boolean
   defaultValue: unknown
+  useJSON5Editor: boolean | JSON5StringifyOptions
 }
 
 export type ValueData = string | number | boolean
@@ -305,3 +307,14 @@ export type ThemeInput =
   | Theme
   | Partial<ThemeStyles>
   | Array<ThemeName | Theme | Partial<ThemeStyles>>
+
+// JSON5 options (https://json5.org/)
+export interface JSON5StringifyOptions {
+  space?: number
+  quote?: string
+  replacer?:
+    | Array<string | number>
+    | ((this: any, key: string, value: any) => any)
+    | null
+    | undefined
+}