From a5a665a8b44dd165b6339b8201ff63df1a468f85 Mon Sep 17 00:00:00 2001 From: donavon Date: Sun, 13 Mar 2022 15:39:28 -0400 Subject: [PATCH 1/2] misc formatting issues (thx Prettier) --- README.md | 38 ++++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 134eb2f..fc2b449 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ const jsonString = superjson.stringify({ date: new Date(0) }); And parse your JSON like so: -```js +```ts const object = superjson.parse<{ date: Date }>(jsonString); // object === { date: new Date(0) } @@ -108,7 +108,7 @@ meta = { ## 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. +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! @@ -204,19 +204,19 @@ Superjson supports many extra types which JSON does not. You can serialize all t | type | supported by standard JSON? | supported by Superjson? | | ----------- | --------------------------- | ----------------------- | -| `string` | ✅ | ✅ | -| `number` | ✅ | ✅ | -| `boolean` | ✅ | ✅ | -| `null` | ✅ | ✅ | -| `Array` | ✅ | ✅ | -| `Object` | ✅ | ✅ | -| `undefined` | ❌ | ✅ | -| `bigint` | ❌ | ✅ | -| `Date` | ❌ | ✅ | -| `RegExp` | ❌ | ✅ | -| `Set` | ❌ | ✅ | -| `Map` | ❌ | ✅ | -| `Error` | ❌ | ✅ | +| `string` | ✅ | ✅ | +| `number` | ✅ | ✅ | +| `boolean` | ✅ | ✅ | +| `null` | ✅ | ✅ | +| `Array` | ✅ | ✅ | +| `Object` | ✅ | ✅ | +| `undefined` | ❌ | ✅ | +| `bigint` | ❌ | ✅ | +| `Date` | ❌ | ✅ | +| `RegExp` | ❌ | ✅ | +| `Set` | ❌ | ✅ | +| `Map` | ❌ | ✅ | +| `Error` | ❌ | ✅ | ## Recipes @@ -229,20 +229,18 @@ In a Next.js project, `_app.ts` would be a good spot for that. ### `Decimal.js` / `Prisma.Decimal` ```ts -import { Decimal } from "decimal.js" +import { Decimal } from 'decimal.js'; SuperJSON.registerCustom( { isApplicable: (v): v is Decimal => Decimal.isDecimal(v), - serialize: v => v.toJSON(), - deserialize: v => new Decimal(v), + serialize: (v) => v.toJSON(), + deserialize: (v) => new Decimal(v), }, 'decimal.js' ); ``` - - ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): From 39c22c996b0fd3542985872e9837b724a5cc35b3 Mon Sep 17 00:00:00 2001 From: donavon Date: Sun, 13 Mar 2022 15:38:55 -0400 Subject: [PATCH 2/2] add section for superjson-remix --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index fc2b449..26652d0 100644 --- a/README.md +++ b/README.md @@ -132,6 +132,23 @@ Add the plugin to your .babelrc. If you don't have one, create it. Done! Now you can safely use all JS datatypes in your `getServerSideProps` / etc. . +## Using with Remix + +Remix's `json` helper and `useLoaderData` hook doesn't allow you to transmit JavaScript objects like Dates. [`superjson-remix`](https://github.com/donavon/superjson-remix) is a thin wrapper around `superjson` that allows you to use it with Remix. + +Change the import to `superjson-remix` and you're good to go! + +```diff +- import { json, useLoaderData } from 'remix'; ++ import { json, useLoaderData } from 'superjson-remix';import +``` + +Install the library with your package manager of choice, e.g.: + +```sh +yarn add superjson-remix +``` + ## API ### serialize