Unduh superjson - Unduh Kode Sumber superjson

superjson

Kode sumber lainnya

v2.2.2

Unduh

Superjson

Serialize dengan aman ekspresi JavaScript ke superset JSON, yang meliputi tanggal, bigints, dan banyak lagi.

Fitur utama

? Serialisasi dan deserialisasi yang andal
? Ketik keamanan dengan pelengkapan otomatis
? Jejak runtime yang diabaikan
? Kerangka kerja agnostik
? Perbaikan sempurna untuk keterbatasan getInitialProps selanjutnya getServerSideProps

Latar belakang

Di Blitz, kami telah berjuang dengan keterbatasan JSON. Kami sering mendapati diri kami bekerja dengan Date , Map , Set atau BigInt , tetapi JSON.stringify tidak mendukung mereka tanpa mengalami kerumitan konversi secara manual!

Superjson memecahkan masalah ini dengan menyediakan pembungkus tipis di atas JSON.stringify dan JSON.parse .

Sponsor

Logo Superjson oleh Nui:

Memulai

Instal Perpustakaan dengan Paket Manajer Pilihan Anda, misalnya:

 yarn add superjson

Penggunaan dasar

Cara termudah untuk menggunakan SuperJson adalah dengan fungsi stringify dan parse -nya. Jika Anda tahu cara menggunakan JSON.stringify , Anda sudah tahu superjson!

Mudah merangkai ekspresi apa pun yang Anda inginkan:

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

Dan parse json Anda seperti itu:

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

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

Penggunaan lanjutan

Untuk kasus di mana Anda menginginkan akses tingkat yang lebih rendah ke data json dan meta dalam output, Anda dapat menggunakan fungsi serialize dan deserialize .

Salah satu kasus penggunaan yang bagus untuk ini adalah di mana Anda memiliki API yang ingin Anda kompatibel dengan JSON untuk semua klien, tetapi Anda juga masih ingin mengirimkan data meta sehingga klien dapat menggunakan SuperJson untuk sepenuhnya deserialisasi.

Misalnya:

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

Menggunakan dengan next.js

getServerSideProps , getInitialProps , dan getStaticProps data yang disediakan oleh Next.js tidak memungkinkan Anda untuk mengirimkan objek JavaScript seperti tanggal. Itu akan kesalahan kecuali Anda mengonversi tanggal menjadi string, dll.

Untungnya, SuperJson adalah alat yang sempurna untuk memotong batasan itu!

Plugin SWC Next.js (Eksperimental, V13 atau Di Atas)

Plugin SWC Next.js bersifat eksperimental, tetapi menjanjikan percepatan yang signifikan. Untuk menggunakan plugin SuperJson SWC, instal dan tambahkan ke next.config.js Anda:

yarn add next-superjson-plugin

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

Next.js (Transformasi Babel Stabil)

Instal Perpustakaan dengan Paket Manajer Pilihan Anda, misalnya:

yarn add babel-plugin-superjson-next

Tambahkan plugin ke .BabelRC Anda. Jika Anda tidak memilikinya, buatlah.

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

Selesai! Sekarang Anda dapat menggunakan semua tipe data JS dengan aman di getServerSideProps / dll.

API

Serialize

Serialisasi nilai JavaScript ke dalam objek yang kompatibel dengan JSON.

Contoh

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

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

Mengembalikan json dan meta , keduanya nilai yang kompatibel dengan JSON.

deserialize

Deserialisasi output SuperJson kembali ke nilai asli Anda.

Contoh

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

deserialize ( { json , meta } ) ;

Mengembalikan your original value .

Stringify

Serialisasi dan kemudian merangkai nilai JavaScript Anda.

Contoh

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

const jsonString = stringify ( object ) ;

Mengembalikan string .

parse

Parse dan kemudian deserialisasi string JSON yang dikembalikan oleh stringify .

Contoh

 const jsonString = stringify ( object ) ;

parse ( jsonString ) ;

Mengembalikan your original value .

SuperJson mendukung banyak jenis tambahan yang tidak dilakukan JSON. Anda dapat membuat serial semua ini:

jenis	Didukung oleh Standard JSON?	Didukung oleh SuperJson?
`string`	✅	✅
`number`	✅	✅
`boolean`	✅	✅
`null`	✅	✅
`Array`	✅	✅
`Object`	✅	✅
`undefined`		✅
`bigint`		✅
`Date`		✅
`RegExp`		✅
`Set`		✅
`Map`		✅
`Error`		✅
`URL`		✅

Resep

SuperJson secara default hanya mendukung tipe data bawaan untuk menjaga ukuran bundel serendah mungkin. Berikut adalah beberapa resep yang dapat Anda gunakan untuk memperpanjang ke tipe data non-default.

Tempatkan mereka di beberapa file utilitas pusat dan pastikan mereka dieksekusi sebelum panggilan SuperJSON lainnya. Dalam proyek Next.js, _app.ts akan menjadi tempat yang baik untuk itu.

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

Kontributor

Terima kasih kepada orang -orang yang luar biasa ini (Kunci Emoji):

_{Dylan Brookes} ? ️	_{Simon Knott} ? ️	_{Brandon Bayer} ?	_{Jeremy Liberman} ️	_Joris	_Tomhooijenga ?	_{Ademílson F. Tonato} ️
_{Piotr Monwid-Olechnowicz} ?	_{Alex Johansson} ️	_{Simon Edelmann} ? ?	_{Sam Garson} ?	_{Mark Hughes} ?	_Lxxyx	_{Máximo Mussini}
_{Peter Dekkers} ?	_{Gabe O'Leary}	_Benjamin	_{Ionut-Cristian Florescu} ?	_{Chris Johnson}	_{Nicholas Chiang} ?	_Datner
_Ruessej ?	_JH.LEE	_Narumincho	_{Markus Greystone} ?	_Darthmaim	_{Max Malm}	_{Tyler Collier}
_{Nick Quebbeman}	_{Tom Macwright} ?	_{Peter Budai} ?