diff --git a/README.md b/README.md index 32dda43..a57e9cd 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,9 @@ export interface Props { ### Using a custom serializer and parser -You can bring your own serializer/parser. For serializing data that `JSON.parse` cannot parse (e.g., Date or BigInt), here's an example of using Rich Harris' `devalue` +If you want to opt for more complex data, you can bring your custom serializer/parser. + +Here's an example of serializing data that `JSON.stringify` cannot (e.g., Date or BigInt) using Rich Harris' [`devalue`](https://github.com/Rich-Harris/devalue): ```astro --- @@ -125,6 +127,12 @@ export type Data = typeof data; ``` +### Errors & Warning in `deserialize()` + +The `deserialize()` function may give you the following: +1. **ERR: No match found** - there are no `JSON` scripts with the given ID +1. **WARNING: Multiple matches for ** - there were multiple `JSON` scripts found with the same ID + ## About This is a quick and easy pattern to embed serialized information into your HTML and make it available in the client-side script with type safety. diff --git a/src/deserialize.ts b/src/deserialize.ts index 8d1da46..caefbe2 100644 --- a/src/deserialize.ts +++ b/src/deserialize.ts @@ -28,7 +28,7 @@ * ``` **/ export function deserialize(id: string, parser?: (serialized: string)=>any): T { - const elements = document.querySelectorAll(`#${id}`); + const elements = document.querySelectorAll(`script#${id}[type="application/json"]`); if (elements?.length > 0) { if (elements?.length > 1)