superjson

Safely serialize JavaScript expressions to a superset of JSON, which includ...

JSON
blitz-js/superjsonsuperjson

README

blitz-js


Safely serialize JavaScript expressions to a superset of JSON, which includes Dates, BigInts, and more.

Key features


- 🍱 Reliable serialization and deserialization
- 🔐 Type safety with autocompletion
- 🐾 Negligible runtime footprint
- 💫 Framework agnostic
- 🛠 Perfect fix for Next.js's serialisation limitations in getServerSideProps and getInitialProps

Backstory


At Blitz, we have struggled with the limitations of JSON. We often find ourselves working withDate, Map, Set or BigInt, but JSON.stringify doesn't support any of them without going through the hassle of converting manually!

Superjson solves these issues by providing a thin wrapper over JSON.stringify and JSON.parse.

Getting started


Install the library with your package manager of choice, e.g.:

  1. ```
  2. yarn add superjson
  3. ```

Basic Usage


The easiest way to use Superjson is with its stringify and parse functions. If you know how to use JSON.stringify, you already know Superjson!

Easily stringify any expression you’d like:

  1. ```js
  2. import superjson from 'superjson';

  4. const jsonString = superjson.stringify({ date: new Date(0) });

  6. // jsonString === '{"json":{"date":"1970-01-01T00:00:00.000Z"},"meta":{"values":{date:"Date"}}}'
  7. ```

And parse your JSON like so:

  1. ```js
  2. const object = superjson.parse<
  3. { date: Date }
  4. >(jsonString);

  6. // object === { date: new Date(0) }
  7. ```

Advanced Usage


For cases where you want lower level access to the json and meta data in the output, you can use the serialize and deserialize functions.

One great use case for this is where you have an API that you want to be JSON compatible for all clients, but you still also want to transmit the meta data so clients can use superjson to fully deserialize it.

For example:

  1. ```js
  2. const object = {
  3.   normal: 'string',
  4.   timestamp: new Date(),
  5.   test: /superjson/,
  6. };

  8. const { json, meta } = superjson.serialize(object);

  10. /*
  11. json = {
  12.   normal: 'string',
  13.   timestamp: "2020-06-20T04:56:50.293Z",
  14.   test: "/superjson/",
  15. };

  17. // note that `normal` is not included here; `meta` only has special cases
  18. meta = {
  19.   values: {
  20.     timestamp: ['Date'],
  21.     test: ['regexp'],
  22.   }
  23. };
  24. */
  25. ```

Using with Next.js


The getServerSideProps, getInitialProps, and getStaticProps data hooks provided by Next.js do not allow you to transmit Javascript objects like Dates. It will error unless you convert Dates to strings, etc.

Thankfully, Superjson is a perfect tool to bypass that limitation!

Next.js SWC Plugin (experimental, v13 or above)


Next.js SWC plugins are experimental, but promise a significant speedup.
To use the SuperJSON SWC plugin, install it and add it to yournext.config.js:

  1. ```sh
  2. yarn add next-superjson-plugin
  3. ```

  1. ```js
  2. // next.config.js
  3. module.exports = {
  4.   experimental: {
  5.     swcPlugins: [
  6.       [
  7.         'next-superjson-plugin',
  8.         {
  9.           excluded: [],
  10.         },
  11.       ],
  12.     ],
  13.   },
  14. };
  15. ```

Next.js (stable Babel transform)


Install the library with your package manager of choice, e.g.:

  1. ```sh
  2. yarn add babel-plugin-superjson-next
  3. ```

Add the plugin to your .babelrc. If you don't have one, create it.

  1. ```js
  2. {
  3.   "presets": ["next/babel"],
  4.   "plugins": [
  5.     ...
  6.     "superjson-next" // 👈
  7.   ]
  8. }
  9. ```

Done! Now you can safely use all JS datatypes in your getServerSideProps / etc. .