ayo/astro-resume
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add example for type safety

Browse source
This commit is contained in:
Ayo 2023-07-16 20:50:44 +02:00
parent b0dd9791a9
commit 0eb4f3c636
2 changed files with 52 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
README.md
View file

@ -5,19 +5,26 @@ Utilities for serializing data from server for use in the client.
1. `Resumable` Astro component takes `id` and `data` 1. `Resumable` Astro component takes `id` and `data`
1. `resume(id: string): Object` function for use int he client takes an `id` string and returns the `data` as Object 1. `resume(id: string): Object` function for use int he client takes an `id` string and returns the `data` as Object
## Intallation ## Installation & Usage
### Install via npm
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
```astro ```astro
--- ---
import Resumable from "@ayco/astro-resume"; import Resumable from "@ayco/astro-resume";
const data = { const data = {
hello: 'world' hello: 'world',
} }
--- ---
@ -25,14 +32,46 @@ const data = {
<script> <script>
import {resume} from '@ayco/astro-resume'; import {resume} from '@ayco/astro-resume';
console.log( const data = resume('astro-obj');
resume('astro-obj') console.log(data) // {hello: 'world'}
)
</script> </script>
``` ```
## Found issues? ### Type Safety
Send a plain text email to [~ayoayco/astro-resume@todo.sr.ht](mailto:~ayoayco/astro-resume@todo.sr.ht) or report via [SourceHut](https://todo.sr.ht/~ayoayco/astro-resume) You can define a type for the data and use it in the client script.
```astro
---
import Resumable from "@ayco/astro-resume";
const data = {
hello: 'world',
isOkay: true
}
// define the type of data to be serialized
export type Data = typeof data;
---
<Resumable id="astro-obj" data={data} />
<script>
import {resume} from '@ayco/astro-resume';
/**
* reuse the type in the client
* assuming this component's name is `Component.astro`
*/
import type {Data} from './Component.astro';
const data = resume<Data>('astro-obj');
console.log(data) // {hello: 'world'}
</script>
```
## Reporting Issues
To report issues or request features, send a plain text email to [~ayoayco/astro-resume@todo.sr.ht](mailto:~ayoayco/astro-resume@todo.sr.ht) or file a ticket via [SourceHut](https://todo.sr.ht/~ayoayco/astro-resume)

8
src/pages/index.astro
View file

@ -2,7 +2,8 @@
import Resumable from '../Resumable.astro'; import Resumable from '../Resumable.astro';
const data = { const data = {
hello: 'world' hello: 'world'
} };
export type Data = typeof data;
--- ---
<Resumable id="astro-obj" data={data} /> <Resumable id="astro-obj" data={data} />
@ -11,9 +12,10 @@ const data = {
<script> <script>
import {resume} from '../resume'; import {resume} from '../resume';
const data = resume<{hello:string}>('astro-obj'); import {Data} from './index.astro';
const data = resume<Data>('astro-obj');
data.hello; console.log(data);
const renderDiv = document.querySelector('#render-here'); const renderDiv = document.querySelector('#render-here');
if (renderDiv) { if (renderDiv) {
renderDiv.innerHTML = JSON.stringify(data) renderDiv.innerHTML = JSON.stringify(data)