Nine Pedestrians Mesmerized

    superjson
    TypeScript icon, indicating that this package has built-in type declarations

    1.12.2 • Public • Published

    superjson

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

    All Contributors npm Language grade: JavaScript CI

    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 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

    Flightcontrol Logo

    Getting started

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

    yarn add superjson
    

    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 'superjson';
    
    const jsonString = 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 = 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 } = 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'],
      }
    };
    */

    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, v12.2 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 your next.config.js:

    yarn add next-superjson-plugin
    // next.config.js
    module.exports = {
      experimental: {
        swcPlugins: [
          [
            'next-superjson-plugin',
            {
              excluded: [],
            },
          ],
        ],
      },
    }

    Next.js (stable Babel transform)

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

    yarn add babel-plugin-superjson-next

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

    {
      "presets": ["next/babel"],
      "plugins": [
        ...
        "superjson-next" // 👈
      ]
    }

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

    API

    serialize

    Serializes any JavaScript value into a JSON-compatible object.

    Examples

    const object = {
      normal: 'string',
      timestamp: new Date(),
      test: /superjson/,
    };
    
    const { json, meta } = 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 } = serialize(object);
    
    deserialize({ json, meta });

    Returns your original value.

    stringify

    Serializes and then stringifies your JavaScript value.

    Examples

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

    Returns string.

    parse

    Parses and then deserializes the JSON string returned by stringify.

    Examples

    const jsonString = stringify(object);
    
    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):

    Dylan Brookes
    Dylan Brookes

    💻 📖 🎨 ⚠️
    Simon Knott
    Simon Knott

    💻 🤔 ⚠️ 📖
    Brandon Bayer
    Brandon Bayer

    🤔
    Jeremy Liberman
    Jeremy Liberman

    ⚠️ 💻
    Joris
    Joris

    💻
    tomhooijenga
    tomhooijenga

    💻 🐛
    Ademílson F. Tonato
    Ademílson F. Tonato

    ⚠️
    Piotr Monwid-Olechnowicz
    Piotr Monwid-Olechnowicz

    🤔
    Alex Johansson
    Alex Johansson

    💻 ⚠️
    Simon Edelmann
    Simon Edelmann

    🐛 💻 🤔
    Sam Garson
    Sam Garson

    🐛
    Mark Hughes
    Mark Hughes

    🐛
    Lxxyx
    Lxxyx

    💻
    Máximo Mussini
    Máximo Mussini

    💻
    Peter Dekkers
    Peter Dekkers

    🐛
    Gabe O'Leary
    Gabe O'Leary

    📖
    Benjamin
    Benjamin

    📖
    Ionut-Cristian Florescu
    Ionut-Cristian Florescu

    🐛
    Chris Johnson
    Chris Johnson

    📖
    Nicholas Chiang
    Nicholas Chiang

    🐛 💻
    Datner
    Datner

    💻
    ruessej
    ruessej

    🐛
    JH.Lee
    JH.Lee

    📖
    narumincho
    narumincho

    💻
    Markus Greystone
    Markus Greystone

    🐛

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

    See also

    Other libraries that aim to solve a similar problem:

    Keywords

    none

    Install

    npm i superjson

    DownloadsWeekly Downloads

    437,678

    Version

    1.12.2

    License

    MIT

    Unpacked Size

    231 kB

    Total Files

    105

    Last publish

    Collaborators

    • mattmueller
    • flybayer
    • dillonraphael
    • skn0tt