Add stringify and reviver functions to BigInt, NaN and Symbol components

Author: CarlosNZ

custom-component-library/README.md

@@ -57,6 +57,7 @@ Custom components should consider the following:
   - `Enter` to submit
   - `Escape` to cancel
 - Provide customisation options, particularly styles
+- If the data contains non-JSON types, add a "stringify" and "reviver" function definition (see `BigInt`, `NaN` and `Symbol` components)
 
 If your custom component is "string-like", there are two helper components exported with the package: `StringDisplay` and `StringEdit` -- these are the same components used for the actual "string" elements in the main package. See the [Hyperlink](https://github.com/CarlosNZ/json-edit-react/blob/main/custom-component-library/components/Hyperlink/component.tsx) and [BigInt](https://github.com/CarlosNZ/json-edit-react/blob/main/custom-component-library/components/BigInt/component.tsx) components for examples of how to use them.
 

custom-component-library/components/NaN/definition.ts

@@ -1,5 +1,5 @@
 import { NotANumberComponent, NaNProps } from './component'
-import { type CustomNodeDefinition } from '@json-edit-react'
+import { isCollection, type CustomNodeDefinition } from '@json-edit-react'
 
 export const NanDefinition: CustomNodeDefinition<NaNProps> = {
   condition: ({ value }) => Number.isNaN(value),
@@ -9,4 +9,9 @@ export const NanDefinition: CustomNodeDefinition<NaNProps> = {
   name: 'NaN', // shown in the Type selector menu
   showInTypesSelector: true,
   defaultValue: NaN,
+  stringifyReplacer: (value) => (Number.isNaN(value) ? { __type: 'NaN', value: 'NaN' } : value),
+  parseReviver: (value) =>
+    isCollection(value) && '__type' in value && 'value' in value && value.__type === 'NaN'
+      ? NaN
+      : value,
 }

custom-component-library/components/Symbol/definition.ts

@@ -1,4 +1,4 @@
-import { type CustomNodeDefinition } from '@json-edit-react'
+import { isCollection, type CustomNodeDefinition } from '@json-edit-react'
 import { SymbolComponent, SymbolProps } from './component'
 
 export const SymbolDefinition: CustomNodeDefinition<SymbolProps> = {
@@ -11,4 +11,10 @@ export const SymbolDefinition: CustomNodeDefinition<SymbolProps> = {
   name: 'Symbol', // shown in the Type selector menu
   showInTypesSelector: true,
   defaultValue: Symbol('New symbol'),
+  stringifyReplacer: (value) =>
+    typeof value === 'symbol' ? { __type: 'Symbol', value: value.description ?? '' } : value,
+  parseReviver: (value) =>
+    isCollection(value) && '__type' in value && 'value' in value && value.__type === 'Symbol'
+      ? Symbol((value.value as string) ?? null)
+      : value,
 }