chore: update readme, code clean up

This commit is contained in:
Ayo Ayco 2023-07-18 23:35:51 +02:00
parent 3acc849f70
commit 94664e8c49
4 changed files with 22 additions and 33 deletions

View file

@ -3,11 +3,9 @@
Utilities for serializing data from server for use in the client. Utilities for serializing data from server for use in the client.
1. `Serialize` - Astro component that takes `id` and `data` 1. `Serialize` - Astro component that takes `id` and `data`
1. `deserialize(id: string)` - a function for use in the client that takes an `id` string and returns the `data` object 1. `deserialize()` - a function for use in the client that takes an `id` string and returns the `data` object
## Installation & Examples ## Install via npm
### Install via npm
On your [Astro](https://astro.build) project: On your [Astro](https://astro.build) project:
@ -15,7 +13,7 @@ On your [Astro](https://astro.build) project:
npm i @ayco/astro-resume npm i @ayco/astro-resume
``` ```
### Usage ## Usage
Serializing and deserializing basic primitive data Serializing and deserializing basic primitive data
@ -38,7 +36,7 @@ const data = {
``` ```
### Type Safety ## Type Safety
You can define a type for the data and use it in the client script. You can define a type for the data and use it in the client script.
@ -71,7 +69,7 @@ export type Data = typeof data;
</script> </script>
``` ```
### Passing all Astro.props to client ## Passing all Astro.props to client
If you need to make all the component props to the client script: If you need to make all the component props to the client script:
@ -94,20 +92,17 @@ export interface Props {
</script> </script>
``` ```
### Using a custom serializer and parser ## Using a custom serializer and parser
If you want to opt for more complex data, you can bring your custom serializer/parser. You can bring your own custom serializer/parser if you want to opt for more complex data handling.
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): 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 ```astro
--- ---
import {stringify} from 'devalue'; import {stringify} from 'devalue';
import Serialize from "../Serialize.astro"; import Serialize from "@ayco/astro-resume";
const data = { const data = {
name: 'John Doe',
isOkay: true,
mood: null,
now: new Date(), now: new Date(),
age: BigInt('3218378192378') age: BigInt('3218378192378')
} }
@ -117,17 +112,17 @@ export type Data = typeof data;
<Serialize data={data} id="my-data" use={stringify} /> <Serialize data={data} id="my-data" use={stringify} />
<script> <script>
import { parse } from 'devalue'; import {parse} from 'devalue';
import { deserialize } from '../deserialize'; import {deserialize} from '@ayco/astro-resume';
import type { Data } from './index.astro'; import type {Data} from './index.astro';
const data = deserialize<Data>('my-data', parse); const {age, now} = deserialize<Data>('my-data', parse);
console.log(typeof data.age); // 'bigint' console.log(typeof age); // 'bigint'
console.log(data.now instanceof Date); // true console.log(now instanceof Date); // true
</script> </script>
``` ```
### Errors & Warning in `deserialize()` ## Errors & Warning in `deserialize()`
The `deserialize()` function may give you the following: The `deserialize()` function may give you the following:
1. **ERR: No match found** - there are no `JSON` scripts with the given ID 1. **ERR: No match found** - there are no `JSON` scripts with the given ID

3
package-lock.json generated
View file

@ -10,8 +10,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@astrojs/node": "^5.3.0", "@astrojs/node": "^5.3.0",
"astro": "^2.8.4", "astro": "^2.8.4"
"devalue": "^4.3.2"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {

View file

@ -27,7 +27,6 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/node": "^5.3.0", "@astrojs/node": "^5.3.0",
"astro": "^2.8.4", "astro": "^2.8.4"
"devalue": "^4.3.2"
} }
} }

View file

@ -1,27 +1,23 @@
--- ---
import { stringify } from 'devalue';
import Serialize from "../Serialize.astro"; import Serialize from "../Serialize.astro";
const data = { const data = {
name: 'John Doe', name: 'John Doe',
isOkay: true, isOkay: true,
mood: null, mood: null,
now: new Date(), // now: new Date(),
age: BigInt('3218378192378') // age: BigInt('3218378192378')
} }
export type Data = typeof data; export type Data = typeof data;
--- ---
<div id="render-here"></div> <div id="render-here"></div>
<Serialize data={data} id="my-data" use={stringify} /> <Serialize data={data} id="my-data" />
<script> <script>
import { deserialize } from '../deserialize'; import { deserialize } from '../deserialize';
import { parse, stringify } from 'devalue';
import type { Data } from './index.astro'; import type { Data } from './index.astro';
const data = deserialize<Data>('my-data', parse); const data = deserialize<Data>('my-data');
console.log(data); console.log(data);
console.log(typeof data.age); document.getElementById("render-here").innerHTML = JSON.stringify(data)
console.log(data.now instanceof Date);
document.getElementById("render-here").innerHTML = stringify(data)
</script> </script>