DON'T Use JSON.parse & JSON.stringify

Key Concepts

• JSON.parse and JSON.stringify limitations
• Data type support (Date, Map, Set, RegExp, Error, Promise, URL, circular references)
• JSON with comments
• SuperJSON (serialization, deserialization, type safety)
• Saraveal (serialization modes, security considerations, toJSON, fromJSON)
• JSONC Parser (Microsoft)
• Strip JSON Comments

JSON.stringify and JSON.parse Limitations

The standard JSON.stringify and JSON.parse methods in JavaScript have limitations in handling certain data types and features. Specifically:

• Unsupported Data Types: Date, Map, Set, RegExp, Error, Promise, and URL objects are not natively supported. They are either converted to strings or plain objects, losing their specific functionalities.
• Circular References: Circular references in objects are not maintained, leading to data loss or errors.
• Comments: JSON format does not support comments.

Demonstration Setup

A Tanstack Start application is used to demonstrate these limitations and the capabilities of alternative libraries. The application includes:

• A createComplexObject function that generates an object containing various data types, including Set, Map, Date, RegExp, Error, Promise, URL, and a tree with circular references.
• API endpoints that serialize and deserialize this complex object using different methods.
• A client-side interface to display the results.

Baseline: JSON.stringify

Using JSON.stringify and JSON.parse directly results in significant data loss:

• Set: Converted to an empty object.
• Map: Converted to an empty object.
• Date: Converted to a string.
• RegExp: Converted to an empty object.
• Error: Converted to an empty object.
• Promise: Converted to an empty object.
• URL: Converted to a string.
• Circular References: Lost, resulting in null values for parent properties.

SuperJSON

SuperJSON is a library that aims to address the limitations of standard JSON serialization and deserialization.

• Key Features:
  • Supports a wider range of data types, including Date, Map, Set, RegExp, and URL.
  • Provides stringify and parse methods that can be used as drop-in replacements for the standard JSON methods.
  • Offers type safety when used with TypeScript.
• Implementation:
  • SuperJSON serializes data into a JSON object with two top-level keys: json (or JSON) and meta.
  • The json key contains the actual data, while the meta key contains metadata about the data types.
  • The meta key is used during deserialization to reconstruct the original data types. For example, {"map": ["map"]} indicates that the map key in the json object should be deserialized as a Map object.
• Example:
  • The example demonstrates that SuperJSON successfully preserves the data types of Set, Map, Date, RegExp, and URL objects.
  • It fails to preserve the data within a custom class instance (myClass).
• Additional Methods:
  • serialize and deserialize methods return objects directly instead of strings.
  • An Next.js shim provides good typing for getServerSideProps, getInitialProps, and getStaticProps.

Saraveal

Saraveal is another library that provides enhanced JSON serialization and deserialization capabilities. It is used by SolidStart and Tanstack Start.

• Key Features:
  • Supports different serialization modes: synchronous, asynchronous, and streaming.
  • Offers toJSON and fromJSON methods for serialization and deserialization.
  • Can generate JavaScript code for serialization, but this approach has security implications.
• Security Considerations:
  • Using eval on the client-side to deserialize data from the server can lead to remote code execution vulnerabilities.
  • Saraveal documentation recommends using the JavaScript serialization method only for server-to-server communication.
• Implementation:
  • The toJSON method generates a JSON object with a single top-level key.
  • The generated JSON is not human-readable or editable but may compress better.
• Example:
  • Saraveal successfully preserves the data types of Set, Map, Date, RegExp, and URL objects.
  • It fails to preserve the data within a custom class instance (myClass).
• JavaScript Serialization:
  • The JavaScript serialization method generates JavaScript code that can be executed to reconstruct the original data.
  • This method should be used with caution due to security risks.

Handling JSON with Comments

Standard JSON does not support comments, which can be problematic for configuration files and other human-readable JSON documents. Two methods are presented for handling JSON with comments:

• JSONC Parser (Microsoft):
  • A full parser for JSON with comments.
  • Allows reading and writing JSON with comments.
• Strip JSON Comments:
  • A function that removes comments from a JSON string.
  • The resulting string can then be parsed using JSON.parse.
• Example:
  • The example demonstrates that both methods can successfully extract data from a JSON file with comments.
  • The ability to include comments in JSON files is useful for configuration files like tsconfig.json.

Conclusion

The video highlights the limitations of standard JSON.stringify and JSON.parse methods and presents two alternative libraries, SuperJSON and Saraveal, that provide enhanced data type support. It also discusses the importance of handling JSON with comments and provides two methods for doing so. The key takeaway is that developers should be aware of the limitations of standard JSON methods and consider using alternative libraries when dealing with complex data types or JSON documents with comments.