chore: update readme, code clean up
This commit is contained in:
parent
3acc849f70
commit
94664e8c49
4 changed files with 22 additions and 33 deletions
35
README.md
35
README.md
|
@ -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
3
package-lock.json
generated
|
@ -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": {
|
||||||
|
|
|
@ -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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue