superjson下載superjson源代碼下載

superjson

其他源碼

v2.2.2

下載

Superjson

安全地將JavaScript序列化與JSON的超集，其中包括日期，bigints等。

關鍵功能

？可靠的序列化和挑選化
？與自動完成鍵入安全性
？可以忽略的運行時足跡
？框架不可知論
？ Next.js在getServerSideProps和getInitialProps中的序列化限制的完美修復

背景故事

在Blitz，我們在JSON的局限性上掙扎。我們經常發現自己在Date ， Map ， Set或BigInt上工作，但是JSON.stringify並不支持任何一個都不經歷手動轉換的麻煩！

Superjson通過在JSON.stringify和JSON.parse上提供薄薄的包裝來解決這些問題。

贊助商

Numi的Superjson徽標：

入門

使用您選擇的軟件包管理器安裝庫，例如：

 yarn add superjson

基本用法

使用Superjson的最簡單方法是其stringify和parse功能。如果您知道如何使用JSON.stringify ，那麼您已經知道Superjson！

輕鬆串起您想要的任何表達式：

 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"}}}'

並像這樣解析您的JSON：

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

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

高級用法

對於要較低級別訪問輸出中json和meta數據的情況，您可以使用serialize和deserialize功能。

一個很棒的用例是，您擁有希望與所有客戶端兼容JSON的API，但是您還希望傳輸元數據，以便客戶可以使用SuperJson充分進行估算。

例如：

 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'],
  }
};
*/

與Next.js一起使用

Next.js提供的getServerSideProps ， getInitialProps和getStaticProps數據掛鉤不允許您像日期這樣傳輸JavaScript對象。除非您將日期轉換為字符串等，否則它將出錯。

值得慶幸的是，Superjson是繞過該限制的理想工具！

Next.js SWC插件（實驗，V13或更高）

Next.js SWC插件是實驗性的，但有望大大加速。要使用Superjson SWC插件，請安裝並將其添加到您的next.config.js ：

yarn add next-superjson-plugin

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

Next.js（穩定的Babel Transform）

使用您選擇的軟件包管理器安裝庫，例如：

yarn add babel-plugin-superjson-next

將插件添加到您的.babelrc中。如果您沒有一個，請創建它。

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

完畢！現在，您可以安全地使用getServerSideProps /等中的所有JS數據類型。

API

連載

將任何JavaScript值序列化到與JSON兼容的對像中。

例子

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

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

返回json和meta ，都是JSON兼容的值。

避免

應將Superjson的輸出恢復到您的原始價值中。

例子

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

deserialize ( { json , meta } ) ;

返回your original value 。

Stringify

序列化，然後將您的JavaScript值串聯。

例子

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

const jsonString = stringify ( object ) ;

返回string 。

解析

解析，然後對stringify返回的JSON字符串進行應對。

例子

 const jsonString = stringify ( object ) ;

parse ( jsonString ) ;

返回your original value 。

Superjson支持JSON沒有的許多額外類型。您可以序列化所有這些：

類型	由標準JSON支持？	由Superjson的支持？
`string`	✅	✅
`number`	✅	✅
`boolean`	✅	✅
`null`	✅	✅
`Array`	✅	✅
`Object`	✅	✅
`undefined`		✅
`bigint`		✅
`Date`		✅
`RegExp`		✅
`Set`		✅
`Map`		✅
`Error`		✅
`URL`		✅

食譜

默認情況下，Superjson僅支持內置數據類型，以使捆綁尺寸盡可能低。您可以使用以下一些食譜來擴展到非默認數據類型。

將它們放入一些中央公用事業文件中，並確保在其他任何SuperJSON呼叫之前執行它們。在Next.js項目中， _app.ts將是一個好地方。

`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'
) ;

貢獻者

謝謝這些好人（表情符號鑰匙）：

_{迪倫·布魯克斯} ？配x	_{西蒙·諾特（Simon Knott）} ？配x	_{布蘭登·拜耳} ？	_{傑里米·利比曼（Jeremy Liberman）} 配x	_喬里斯	_tomhooijenga ？	_{AdemílsonF。 Tonato} 配x
_{piotr monwid-olechnowicz} ？	_{亞歷克斯·約翰遜} 配x	_{西蒙·埃德曼（Simon Edelmann）} ？？	_{山姆·加森} ？	_{馬克·休斯} ？	_lxxyx	_{máximo墨西尼}
_{彼得·德克斯} ？	_{Gabe O'Leary}	_本傑明	_{離子 - 佛羅里達州的弗洛雷斯庫} ？	_{克里斯·約翰遜}	_{尼古拉斯·清} ？	_Datner
_Ruessej ？	_JH.Lee	_Narumincho	_{馬庫斯·格雷斯通} ？	_達斯米姆	_{馬克斯·馬爾姆（Max Malm）}	_{泰勒·科利爾（Tyler Collier）}
_{尼克·奎斯曼（Nick Quebbeman）}	_{湯姆·麥克賴特} ？	_{彼得·布泰} ？