提交学习笔记专用
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

355 lines
20 KiB

  1. <p align="center">
  2. <img alt="superjson" src="./docs/superjson-banner.png" width="800" />
  3. </p>
  4. <p align="center">
  5. Safely serialize JavaScript expressions to a superset of JSON, which includes Dates, BigInts, and more.
  6. </p>
  7. <p align="center">
  8. <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
  9. <a href="#contributors"><img src="https://img.shields.io/badge/all_contributors-31-orange.svg?style=flat-square" alt="All Contributors"/></a>
  10. <!-- ALL-CONTRIBUTORS-BADGE:END -->
  11. <a href="https://www.npmjs.com/package/superjson">
  12. <img alt="npm" src="https://img.shields.io/npm/v/superjson" />
  13. </a>
  14. <a href="https://lgtm.com/projects/g/blitz-js/superjson/context:javascript">
  15. <img
  16. alt="Language grade: JavaScript"
  17. src="https://img.shields.io/lgtm/grade/javascript/g/blitz-js/superjson.svg?logo=lgtm&logoWidth=18"
  18. />
  19. </a>
  20. <a href="https://github.com/blitz-js/superjson/actions">
  21. <img
  22. alt="CI"
  23. src="https://github.com/blitz-js/superjson/workflows/CI/badge.svg"
  24. />
  25. </a>
  26. </p>
  27. ## Key features
  28. - 🍱 Reliable serialization and deserialization
  29. - 🔐 Type safety with autocompletion
  30. - 🐾 Negligible runtime footprint
  31. - 💫 Framework agnostic
  32. - 🛠 Perfect fix for Next.js's serialisation limitations in `getServerSideProps` and `getInitialProps`
  33. ## Backstory
  34. At [Blitz](https://github.com/blitz-js/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!
  35. Superjson solves these issues by providing a thin wrapper over `JSON.stringify` and `JSON.parse`.
  36. ## Sponsors
  37. [<img src="https://raw.githubusercontent.com/blitz-js/blitz/main/assets/flightcontrol.png" alt="Flightcontrol Logo" style="width: 400px;"/>](https://www.flightcontrol.dev/?ref=superjson)
  38. Superjson logo by [NUMI](https://github.com/numi-hq/open-design):
  39. [<img src="https://raw.githubusercontent.com/numi-hq/open-design/main/assets/numi-lockup.png" alt="NUMI Logo" style="width: 200px;"/>](https://numi.tech/?ref=superjson)
  40. ## Getting started
  41. Install the library with your package manager of choice, e.g.:
  42. ```
  43. yarn add superjson
  44. ```
  45. ## Basic Usage
  46. 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!
  47. Easily stringify any expression you’d like:
  48. ```js
  49. import superjson from 'superjson';
  50. const jsonString = superjson.stringify({ date: new Date(0) });
  51. // jsonString === '{"json":{"date":"1970-01-01T00:00:00.000Z"},"meta":{"values":{date:"Date"}}}'
  52. ```
  53. And parse your JSON like so:
  54. ```js
  55. const object = superjson.parse<
  56. { date: Date }
  57. >(jsonString);
  58. // object === { date: new Date(0) }
  59. ```
  60. ## Advanced Usage
  61. 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.
  62. 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.
  63. For example:
  64. ```js
  65. const object = {
  66. normal: 'string',
  67. timestamp: new Date(),
  68. test: /superjson/,
  69. };
  70. const { json, meta } = superjson.serialize(object);
  71. /*
  72. json = {
  73. normal: 'string',
  74. timestamp: "2020-06-20T04:56:50.293Z",
  75. test: "/superjson/",
  76. };
  77. // note that `normal` is not included here; `meta` only has special cases
  78. meta = {
  79. values: {
  80. timestamp: ['Date'],
  81. test: ['regexp'],
  82. }
  83. };
  84. */
  85. ```
  86. ## Using with Next.js
  87. 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.
  88. Thankfully, Superjson is a perfect tool to bypass that limitation!
  89. ### Next.js SWC Plugin (experimental, v13 or above)
  90. Next.js SWC plugins are [experimental](https://nextjs.org/docs/advanced-features/compiler#swc-plugins-experimental), but promise a significant speedup.
  91. To use the [SuperJSON SWC plugin](https://github.com/blitz-js/next-superjson-plugin), install it and add it to your `next.config.js`:
  92. ```sh
  93. yarn add next-superjson-plugin
  94. ```
  95. ```js
  96. // next.config.js
  97. module.exports = {
  98. experimental: {
  99. swcPlugins: [
  100. [
  101. 'next-superjson-plugin',
  102. {
  103. excluded: [],
  104. },
  105. ],
  106. ],
  107. },
  108. };
  109. ```
  110. ### Next.js (stable Babel transform)
  111. Install the library with your package manager of choice, e.g.:
  112. ```sh
  113. yarn add babel-plugin-superjson-next
  114. ```
  115. Add the plugin to your .babelrc. If you don't have one, create it.
  116. ```js
  117. {
  118. "presets": ["next/babel"],
  119. "plugins": [
  120. ...
  121. "superjson-next" // 👈
  122. ]
  123. }
  124. ```
  125. Done! Now you can safely use all JS datatypes in your `getServerSideProps` / etc. .
  126. ## API
  127. ### serialize
  128. Serializes any JavaScript value into a JSON-compatible object.
  129. #### Examples
  130. ```js
  131. const object = {
  132. normal: 'string',
  133. timestamp: new Date(),
  134. test: /superjson/,
  135. };
  136. const { json, meta } = serialize(object);
  137. ```
  138. Returns **`json` and `meta`, both JSON-compatible values.**
  139. ## deserialize
  140. Deserializes the output of Superjson back into your original value.
  141. #### Examples
  142. ```js
  143. const { json, meta } = serialize(object);
  144. deserialize({ json, meta }, { inPlace: true });
  145. ```
  146. Options
  147. - `inPlace: boolean`
  148. - Default: `false`
  149. - Mutate the input json object in place instead of returning a deep copy
  150. - `inPlace: true` will be much more performant on large objects if it's safe to mutate it
  151. Returns **`your original value`**.
  152. ### stringify
  153. Serializes and then stringifies your JavaScript value.
  154. #### Examples
  155. ```js
  156. const object = {
  157. normal: 'string',
  158. timestamp: new Date(),
  159. test: /superjson/,
  160. };
  161. const jsonString = stringify(object);
  162. ```
  163. Returns **`string`**.
  164. ### parse
  165. Parses and then deserializes the JSON string returned by `stringify`.
  166. #### Examples
  167. ```js
  168. const jsonString = stringify(object);
  169. parse(jsonString);
  170. ```
  171. Returns **`your original value`**.
  172. ---
  173. Superjson supports many extra types which JSON does not. You can serialize all these:
  174. | type | supported by standard JSON? | supported by Superjson? |
  175. | ----------- | --------------------------- | ----------------------- |
  176. | `string` | ✅ | ✅ |
  177. | `number` | ✅ | ✅ |
  178. | `boolean` | ✅ | ✅ |
  179. | `null` | ✅ | ✅ |
  180. | `Array` | ✅ | ✅ |
  181. | `Object` | ✅ | ✅ |
  182. | `undefined` | ❌ | ✅ |
  183. | `bigint` | ❌ | ✅ |
  184. | `Date` | ❌ | ✅ |
  185. | `RegExp` | ❌ | ✅ |
  186. | `Set` | ❌ | ✅ |
  187. | `Map` | ❌ | ✅ |
  188. | `Error` | ❌ | ✅ |
  189. | `URL` | ❌ | ✅ |
  190. ## Recipes
  191. SuperJSON by default only supports built-in data types to keep bundle-size as low as possible.
  192. Here are some recipes you can use to extend to non-default data types.
  193. Place them in some central utility file and make sure they're executed before any other `SuperJSON` calls.
  194. In a Next.js project, `_app.ts` would be a good spot for that.
  195. ### `Decimal.js` / `Prisma.Decimal`
  196. ```ts
  197. import { Decimal } from 'decimal.js';
  198. SuperJSON.registerCustom<Decimal, string>(
  199. {
  200. isApplicable: (v): v is Decimal => Decimal.isDecimal(v),
  201. serialize: v => v.toJSON(),
  202. deserialize: v => new Decimal(v),
  203. },
  204. 'decimal.js'
  205. );
  206. ```
  207. ## Contributors ✨
  208. Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
  209. <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
  210. <!-- prettier-ignore-start -->
  211. <!-- markdownlint-disable -->
  212. <table>
  213. <tbody>
  214. <tr>
  215. <td align="center" valign="top" width="14.28%"><a href="https://github.com/merelinguist"><img src="https://avatars3.githubusercontent.com/u/24858006?v=4?s=100" width="100px;" alt="Dylan Brookes"/><br /><sub><b>Dylan Brookes</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=merelinguist" title="Code">💻</a> <a href="https://github.com/blitz-js/superjson/commits?author=merelinguist" title="Documentation">📖</a> <a href="#design-merelinguist" title="Design">🎨</a> <a href="https://github.com/blitz-js/superjson/commits?author=merelinguist" title="Tests">⚠️</a></td>
  216. <td align="center" valign="top" width="14.28%"><a href="http://simonknott.de"><img src="https://avatars1.githubusercontent.com/u/14912729?v=4?s=100" width="100px;" alt="Simon Knott"/><br /><sub><b>Simon Knott</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=Skn0tt" title="Code">💻</a> <a href="#ideas-Skn0tt" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/blitz-js/superjson/commits?author=Skn0tt" title="Tests">⚠️</a> <a href="https://github.com/blitz-js/superjson/commits?author=Skn0tt" title="Documentation">📖</a></td>
  217. <td align="center" valign="top" width="14.28%"><a href="https://twitter.com/flybayer"><img src="https://avatars3.githubusercontent.com/u/8813276?v=4?s=100" width="100px;" alt="Brandon Bayer"/><br /><sub><b>Brandon Bayer</b></sub></a><br /><a href="#ideas-flybayer" title="Ideas, Planning, & Feedback">🤔</a></td>
  218. <td align="center" valign="top" width="14.28%"><a href="http://jeremyliberman.com/"><img src="https://avatars3.githubusercontent.com/u/2754163?v=4?s=100" width="100px;" alt="Jeremy Liberman"/><br /><sub><b>Jeremy Liberman</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=mrleebo" title="Tests">⚠️</a> <a href="https://github.com/blitz-js/superjson/commits?author=mrleebo" title="Code">💻</a></td>
  219. <td align="center" valign="top" width="14.28%"><a href="https://github.com/jorisre"><img src="https://avatars1.githubusercontent.com/u/7545547?v=4?s=100" width="100px;" alt="Joris"/><br /><sub><b>Joris</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=jorisre" title="Code">💻</a></td>
  220. <td align="center" valign="top" width="14.28%"><a href="https://github.com/tomhooijenga"><img src="https://avatars0.githubusercontent.com/u/1853235?v=4?s=100" width="100px;" alt="tomhooijenga"/><br /><sub><b>tomhooijenga</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=tomhooijenga" title="Code">💻</a> <a href="https://github.com/blitz-js/superjson/issues?q=author%3Atomhooijenga" title="Bug reports">🐛</a></td>
  221. <td align="center" valign="top" width="14.28%"><a href="https://twitter.com/ftonato"><img src="https://avatars2.githubusercontent.com/u/5417662?v=4?s=100" width="100px;" alt="Ademílson F. Tonato"/><br /><sub><b>Ademílson F. Tonato</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=ftonato" title="Tests">⚠️</a></td>
  222. </tr>
  223. <tr>
  224. <td align="center" valign="top" width="14.28%"><a href="https://haspar.us"><img src="https://avatars0.githubusercontent.com/u/15332326?v=4?s=100" width="100px;" alt="Piotr Monwid-Olechnowicz"/><br /><sub><b>Piotr Monwid-Olechnowicz</b></sub></a><br /><a href="#ideas-hasparus" title="Ideas, Planning, & Feedback">🤔</a></td>
  225. <td align="center" valign="top" width="14.28%"><a href="http://kattcorp.com"><img src="https://avatars1.githubusercontent.com/u/459267?v=4?s=100" width="100px;" alt="Alex Johansson"/><br /><sub><b>Alex Johansson</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=KATT" title="Code">💻</a> <a href="https://github.com/blitz-js/superjson/commits?author=KATT" title="Tests">⚠️</a></td>
  226. <td align="center" valign="top" width="14.28%"><a href="https://github.com/simonedelmann"><img src="https://avatars.githubusercontent.com/u/2821076?v=4?s=100" width="100px;" alt="Simon Edelmann"/><br /><sub><b>Simon Edelmann</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3Asimonedelmann" title="Bug reports">🐛</a> <a href="https://github.com/blitz-js/superjson/commits?author=simonedelmann" title="Code">💻</a> <a href="#ideas-simonedelmann" title="Ideas, Planning, & Feedback">🤔</a></td>
  227. <td align="center" valign="top" width="14.28%"><a href="https://www.samgarson.com"><img src="https://avatars.githubusercontent.com/u/6242344?v=4?s=100" width="100px;" alt="Sam Garson"/><br /><sub><b>Sam Garson</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3Asamtgarson" title="Bug reports">🐛</a></td>
  228. <td align="center" valign="top" width="14.28%"><a href="http://twitter.com/_markeh"><img src="https://avatars.githubusercontent.com/u/1357323?v=4?s=100" width="100px;" alt="Mark Hughes"/><br /><sub><b>Mark Hughes</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3Amarkhughes" title="Bug reports">🐛</a></td>
  229. <td align="center" valign="top" width="14.28%"><a href="https://blog.lxxyx.cn/"><img src="https://avatars.githubusercontent.com/u/13161470?v=4?s=100" width="100px;" alt="Lxxyx"/><br /><sub><b>Lxxyx</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=Lxxyx" title="Code">💻</a></td>
  230. <td align="center" valign="top" width="14.28%"><a href="http://maximomussini.com"><img src="https://avatars.githubusercontent.com/u/1158253?v=4?s=100" width="100px;" alt="Máximo Mussini"/><br /><sub><b>Máximo Mussini</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=ElMassimo" title="Code">💻</a></td>
  231. </tr>
  232. <tr>
  233. <td align="center" valign="top" width="14.28%"><a href="https://goodcode.nz"><img src="https://avatars.githubusercontent.com/u/425971?v=4?s=100" width="100px;" alt="Peter Dekkers"/><br /><sub><b>Peter Dekkers</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3APeterDekkers" title="Bug reports">🐛</a></td>
  234. <td align="center" valign="top" width="14.28%"><a href="http://goleary.com"><img src="https://avatars.githubusercontent.com/u/16123225?v=4?s=100" width="100px;" alt="Gabe O'Leary"/><br /><sub><b>Gabe O'Leary</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=goleary" title="Documentation">📖</a></td>
  235. <td align="center" valign="top" width="14.28%"><a href="https://github.com/binajmen"><img src="https://avatars.githubusercontent.com/u/15611419?v=4?s=100" width="100px;" alt="Benjamin"/><br /><sub><b>Benjamin</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=binajmen" title="Documentation">📖</a></td>
  236. <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/icflorescu"><img src="https://avatars.githubusercontent.com/u/581999?v=4?s=100" width="100px;" alt="Ionut-Cristian Florescu"/><br /><sub><b>Ionut-Cristian Florescu</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3Aicflorescu" title="Bug reports">🐛</a></td>
  237. <td align="center" valign="top" width="14.28%"><a href="https://github.com/chrisj-back2work"><img src="https://avatars.githubusercontent.com/u/68551954?v=4?s=100" width="100px;" alt="Chris Johnson"/><br /><sub><b>Chris Johnson</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=chrisj-back2work" title="Documentation">📖</a></td>
  238. <td align="center" valign="top" width="14.28%"><a href="https://nicholaschiang.com"><img src="https://avatars.githubusercontent.com/u/20798889?v=4?s=100" width="100px;" alt="Nicholas Chiang"/><br /><sub><b>Nicholas Chiang</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3Anicholaschiang" title="Bug reports">🐛</a> <a href="https://github.com/blitz-js/superjson/commits?author=nicholaschiang" title="Code">💻</a></td>
  239. <td align="center" valign="top" width="14.28%"><a href="https://github.com/datner"><img src="https://avatars.githubusercontent.com/u/22598347?v=4?s=100" width="100px;" alt="Datner"/><br /><sub><b>Datner</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=datner" title="Code">💻</a></td>
  240. </tr>
  241. <tr>
  242. <td align="center" valign="top" width="14.28%"><a href="https://github.com/ruessej"><img src="https://avatars.githubusercontent.com/u/85690286?v=4?s=100" width="100px;" alt="ruessej"/><br /><sub><b>ruessej</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3Aruessej" title="Bug reports">🐛</a></td>
  243. <td align="center" valign="top" width="14.28%"><a href="https://jins.dev"><img src="https://avatars.githubusercontent.com/u/39466936?v=4?s=100" width="100px;" alt="JH.Lee"/><br /><sub><b>JH.Lee</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=orionmiz" title="Documentation">📖</a></td>
  244. <td align="center" valign="top" width="14.28%"><a href="https://narumincho.notion.site"><img src="https://avatars.githubusercontent.com/u/16481886?v=4?s=100" width="100px;" alt="narumincho"/><br /><sub><b>narumincho</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=narumincho" title="Code">💻</a></td>
  245. <td align="center" valign="top" width="14.28%"><a href="https://github.com/mgreystone"><img src="https://avatars.githubusercontent.com/u/12430681?v=4?s=100" width="100px;" alt="Markus Greystone"/><br /><sub><b>Markus Greystone</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3Amgreystone" title="Bug reports">🐛</a></td>
  246. <td align="center" valign="top" width="14.28%"><a href="https://gw2treasures.com/"><img src="https://avatars.githubusercontent.com/u/2511547?v=4?s=100" width="100px;" alt="darthmaim"/><br /><sub><b>darthmaim</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=darthmaim" title="Code">💻</a></td>
  247. <td align="center" valign="top" width="14.28%"><a href="http://www.maxmalm.se"><img src="https://avatars.githubusercontent.com/u/430872?v=4?s=100" width="100px;" alt="Max Malm"/><br /><sub><b>Max Malm</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=benjick" title="Documentation">📖</a></td>
  248. <td align="center" valign="top" width="14.28%"><a href="https://github.com/tylercollier"><img src="https://avatars.githubusercontent.com/u/366538?v=4?s=100" width="100px;" alt="Tyler Collier"/><br /><sub><b>Tyler Collier</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=tylercollier" title="Documentation">📖</a></td>
  249. </tr>
  250. <tr>
  251. <td align="center" valign="top" width="14.28%"><a href="https://github.com/kidqueb"><img src="https://avatars.githubusercontent.com/u/884128?v=4?s=100" width="100px;" alt="Nick Quebbeman"/><br /><sub><b>Nick Quebbeman</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/commits?author=kidqueb" title="Documentation">📖</a></td>
  252. <td align="center" valign="top" width="14.28%"><a href="https://macwright.com/"><img src="https://avatars.githubusercontent.com/u/32314?v=4?s=100" width="100px;" alt="Tom MacWright"/><br /><sub><b>Tom MacWright</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3Atmcw" title="Bug reports">🐛</a> <a href="https://github.com/blitz-js/superjson/commits?author=tmcw" title="Code">💻</a></td>
  253. <td align="center" valign="top" width="14.28%"><a href="https://github.com/peterbud"><img src="https://avatars.githubusercontent.com/u/7863452?v=4?s=100" width="100px;" alt="Peter Budai"/><br /><sub><b>Peter Budai</b></sub></a><br /><a href="https://github.com/blitz-js/superjson/issues?q=author%3Apeterbud" title="Bug reports">🐛</a></td>
  254. </tr>
  255. </tbody>
  256. </table>
  257. <!-- markdownlint-restore -->
  258. <!-- prettier-ignore-end -->
  259. <!-- ALL-CONTRIBUTORS-LIST:END -->
  260. This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
  261. ## See also
  262. Other libraries that aim to solve a similar problem:
  263. - [Serialize JavaScript](https://github.com/yahoo/serialize-javascript) by Eric Ferraiuolo
  264. - [devalue](https://github.com/Rich-Harris/devalue) by Rich Harris
  265. - [next-json](https://github.com/iccicci/next-json) by Daniele Ricci