Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add superjson-remix to Readme #174

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add superjson-remix to Readme #174

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5a665a
misc formatting issues (thx Prettier)
donavon Mar 13, 2022
39c22c9
add section for superjson-remix
donavon Mar 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 35 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) }
Expand Down Expand Up @@ -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!

Expand All @@ -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
Expand Down Expand Up @@ -204,19 +221,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

Expand All @@ -229,20 +246,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<Decimal, string>(
{
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)):
Expand Down