superjson Download - ดาวน์โหลดซอร์สโค้ด superjson

superjson

ซอร์สโค้ดอื่น ๆ

v2.2.2

ดาวน์โหลด

ซุปเปอร์เจสัน

การแสดงออกของ JavaScript อย่างปลอดภัยไปยัง superset ของ JSON ซึ่งรวมถึงวันที่, bigints และอื่น ๆ

คุณสมบัติที่สำคัญ

- การทำให้เป็นอนุกรมและ deserialization ที่เชื่อถือได้
- พิมพ์ความปลอดภัยด้วยการเติมข้อความอัตโนมัติ
- รอยเท้ารันไทม์เล็กน้อย
- กรอบการไม่เชื่อเรื่องพระเจ้า
- การแก้ไขที่สมบูรณ์แบบสำหรับข้อ จำกัด การทำให้เป็นอนุกรมของ next.js ใน getServerSideProps และ getInitialProps

backstory

ที่ Blitz เราได้ต่อสู้กับข้อ จำกัด ของ JSON เรามักจะพบว่าตัวเองทำงานกับ Date Map Set หรือ BigInt แต่ JSON.stringify ไม่สนับสนุนพวกเขาใด ๆ โดยไม่ต้องผ่านความยุ่งยากในการแปลงด้วยตนเอง!

Superjson แก้ปัญหาเหล่านี้ด้วยการจัดหาเสื้อคลุมบาง ๆ เหนือ JSON.stringify และ JSON.parse

ผู้สนับสนุน

โลโก้ Superjson โดย Numi:

เริ่มต้น

ติดตั้งไลบรารีด้วยตัวจัดการแพ็คเกจที่คุณเลือกเช่น:

 yarn add superjson

การใช้งานขั้นพื้นฐาน

วิธีที่ง่ายที่สุดในการใช้ Superjson คือฟังก์ stringify และ parse หากคุณรู้วิธีใช้ JSON.stringify คุณรู้จัก Superjson อยู่แล้ว!

stringify นิพจน์ใด ๆ ที่คุณต้องการ:

 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

กรณีการใช้งานที่ยอดเยี่ยมอย่างหนึ่งสำหรับสิ่งนี้คือที่ที่คุณมี API ที่คุณต้องการเข้ากันได้กับ JSON สำหรับลูกค้าทุกคน แต่คุณยังต้องการส่งข้อมูล Meta เพื่อให้ลูกค้าสามารถใช้ SuperJSON เพื่อ deserialize ได้อย่างเต็มที่

ตัวอย่างเช่น:

 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

getServerSideProps , getInitialProps และ getStaticProps hooks ที่จัดทำโดย next.js ไม่อนุญาตให้คุณส่งวัตถุ JavaScript เช่นวันที่ มันจะเกิดข้อผิดพลาดเว้นแต่คุณจะแปลงวันที่เป็นสตริง ฯลฯ

โชคดีที่ Superjson เป็นเครื่องมือที่สมบูรณ์แบบในการข้ามข้อ จำกัด นั้น!

Next.js SWC Plugin (Experimental, 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 (การแปลงบาเบลที่มั่นคง)

ติดตั้งไลบรารีด้วยตัวจัดการแพ็คเกจที่คุณเลือกเช่น:

yarn add babel-plugin-superjson-next

เพิ่มปลั๊กอินลงใน. babelrc ของคุณ ถ้าคุณไม่มีให้สร้างมันขึ้นมา

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

เสร็จแล้ว! ตอนนี้คุณสามารถใช้ประเภทข้อมูล JS ทั้งหมดใน getServerSideProps / ฯลฯ ได้อย่างปลอดภัย

API

ทำให้เป็นอันดับ

ทำให้ค่า JavaScript ใด ๆ อยู่ในวัตถุที่เข้ากันได้กับ JSON

ตัวอย่าง

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

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

ส่งคืน json และ meta ทั้งค่าที่เข้ากันได้กับ JSON

deserialialial

deserializes เอาต์พุตของ Superjson กลับสู่ค่าดั้งเดิมของคุณ

ตัวอย่าง

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

deserialize ( { json , meta } ) ;

ส่งคืน your original value

ทำให้เป็นสตริง

serializes แล้ว stringifies ค่า JavaScript ของคุณ

ตัวอย่าง

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

const jsonString = stringify ( object ) ;

ส่ง string

แยกวิเคราะห์

การแยกวิเคราะห์แล้ว deserializes สตริง JSON ที่ส่งคืนโดย stringify

ตัวอย่าง

 const jsonString = stringify ( object ) ;

parse ( jsonString ) ;

ส่งคืน your original value

Superjson รองรับประเภทพิเศษมากมายที่ JSON ไม่ได้ คุณสามารถทำให้เป็นอนุกรมเหล่านี้ทั้งหมด:

พิมพ์	สนับสนุนโดย Standard JSON?	สนับสนุนโดย Superjson?
`string`
`number`
`boolean`
`null`
`Array`
`Object`
`undefined`
`bigint`
`Date`
`RegExp`
`Set`
`Map`
`Error`
`URL`

สูตรอาหาร

SuperJSON โดยค่าเริ่มต้นรองรับชนิดข้อมูลในตัวเท่านั้นเพื่อให้ขนาดกลุ่มต่ำที่สุดเท่าที่จะทำได้ นี่คือสูตรบางอย่างที่คุณสามารถใช้เพื่อขยายไปยังประเภทข้อมูลที่ไม่ใช่ค่าเริ่มต้น

วางไว้ในไฟล์ยูทิลิตี้กลางบางไฟล์และตรวจสอบให้แน่ใจว่าพวกเขากำลังดำเนินการก่อนการโทร SuperJSON อื่น ๆ ในโครงการถัดไป 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'
) ;

ผู้มีส่วนร่วม

ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):

_{ดีแลนบรูกส์} -	_{Simon Knott} -	_{แบรนดอนไบเออร์} -	_{Jeremy Liberman}	_joris	_Tomhooijenga -	_{Ademílson F. Tonato}
_{Piotr Monwid-olechnowicz} -	_{Alex Johansson}	_{Simon Edelmann} - -	_{แซมการ์สัน} -	_{มาร์คฮิวจ์} -	_lxxyx	_{Máximo Mussini}
_{Peter Dekkers} -	_{Gabe O'Leary}	_{เบนจามิน}	_{Ionut-Cristian Florescu} -	_{คริสจอห์นสัน}	_{นิโคลัสเชียงราย} -	_{ดาต้าเนอร์}
_{รุสเจ} -	_jh.lee	_Narumincho	_{Markus Greystone} -	_darthmaim	_{Max Malm}	_{Tyler Collier}
_{Nick Quebbeman}	_{Tom MacWright} -	_{ปีเตอร์บูไบ} -