[!IMPORTANT] This is a fork of superjson. It is maintained in eridu-tech/superjson and published to npm as @eridu-tech/superjson.

In this fork the API is asynchronous: stringify, parse, serialize and deserialize return Promises and must be awaited. See Async API.

Key features

• 🍱 Reliable serialization and deserialization
• 🔐 Type safety with autocompletion
• 🐾 Negligible runtime footprint
• 💫 Framework agnostic

Backstory

At Blitz, we have struggled with the limitations of JSON. We often find ourselves working with Date, 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.

Sponsors

Superjson logo by NUMI:

Getting started

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

yarn add @eridu-tech/superjson

Async API

Unlike upstream superjson, the public API in this fork is asynchronous. stringify, parse, serialize and deserialize all return Promises:

| Method | Returns | | -------------------------------- | -------------------------- | | serialize(value) | Promise<SuperJSONResult> | | deserialize(payload, options?) | Promise<T> | | stringify(value) | Promise<string> | | parse(string) | Promise<T> |

import superjson from '@eridu-tech/superjson';

const json = await superjson.stringify({ date: new Date(0) });
const value = await superjson.parse<{ date: Date }>(json);

The registration methods (registerClass, registerSymbol, registerCustom, allowErrorProps) remain synchronous. Custom transformers may be asynchronous too: isApplicable, serialize and deserialize can return either a value or a Promise.

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:

import superjson from '@eridu-tech/superjson';

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

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

And parse your JSON like so:

const object = await superjson.parse<
{ date: Date }
>(jsonString);

// object === { date: new Date(0) }

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:

const object = {
  normal: 'string',
  timestamp: new Date(),
  test: /superjson/,
};

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

/*
json = {
  normal: 'string',
  timestamp: "2020-06-20T04:56:50.293Z",
  test: "/superjson/",
};

// note that `normal` is not included here; `meta` only has special cases
meta = {
  values: {
    timestamp: ['Date'],
    test: ['regexp'],
  }
};
*/

API

All of the methods below are asynchronous and return Promises. See Async API.

serialize

Serializes any JavaScript value into a JSON-compatible object.

Examples

const object = {
  normal: 'string',
  timestamp: new Date(),
  test: /superjson/,
};

const { json, meta } = await serialize(object);

Returns json and meta, both JSON-compatible values.

deserialize

Deserializes the output of Superjson back into your original value.

Examples

const { json, meta } = await serialize(object);

await deserialize({ json, meta }, { inPlace: true });

Options

• inPlace: boolean
  • Default: false
  • Mutate the input json object in place instead of returning a deep copy
  • inPlace: true will be much more performant on large objects if it's safe to mutate it

Returns your original value.

stringify

Serializes and then stringifies your JavaScript value.

Examples

const object = {
  normal: 'string',
  timestamp: new Date(),
  test: /superjson/,
};

const jsonString = await stringify(object);

Returns string.

parse

Parses and then deserializes the JSON string returned by stringify.

Examples

const jsonString = await stringify(object);

await parse(jsonString);

Returns your original value.

Superjson supports many extra types which JSON does not. You can serialize all these:

| type | supported by standard JSON? | supported by Superjson? | | ----------- | --------------------------- | ----------------------- | | string | ✅ | ✅ | | number | ✅ | ✅ | | boolean | ✅ | ✅ | | null | ✅ | ✅ | | Array | ✅ | ✅ | | Object | ✅ | ✅ | | undefined | ❌ | ✅ | | bigint | ❌ | ✅ | | Date | ❌ | ✅ | | RegExp | ❌ | ✅ | | Set | ❌ | ✅ | | Map | ❌ | ✅ | | Error | ❌ | ✅ | | URL | ❌ | ✅ |

Recipes

SuperJSON by default only supports built-in data types to keep bundle-size as low as possible. Here are some recipes you can use to extend to non-default data types.

Place them in some central utility file and make sure they're executed before any other SuperJSON calls. In a Next.js project, _app.ts would be a good spot for that.

Decimal.js / Prisma.Decimal

import { Decimal } from 'decimal.js';

SuperJSON.registerCustom<Decimal, string>(
  {
    isApplicable: (v): v is Decimal => Decimal.isDecimal(v),
    serialize: v => v.toJSON(),
    deserialize: v => new Decimal(v),
  },
  'decimal.js'
);

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

See also

Other libraries that aim to solve a similar problem:

• Serialize JavaScript by Eric Ferraiuolo
• devalue by Rich Harris
• next-json by Daniele Ricci