chore: various updates; pkg info; repo links
This commit is contained in:
parent
7270ed63af
commit
fb178b0db5
6 changed files with 968 additions and 1045 deletions
|
|
@ -1,6 +1,3 @@
|
|||
> [!NOTE]
|
||||
> This project moved to [SourceHut](https://git.sr.ht/~ayoayco/astro-resume).
|
||||
|
||||
# Astro Resume
|
||||
|
||||
[](https://www.npmjs.com/package/@ayco/astro-resume)
|
||||
|
|
@ -106,6 +103,7 @@ If you have shared data that needs to be initialized from the server and accesse
|
|||
In this example, an appConfig object is built and serialized in index.astro and accessed in child Astro components.
|
||||
|
||||
In index.astro:
|
||||
|
||||
```astro
|
||||
import Serialize from "@ayco/astro-resume";
|
||||
|
||||
|
|
@ -120,6 +118,7 @@ export type AppConfig = typeof appConfig;
|
|||
```
|
||||
|
||||
In Child.astro:
|
||||
|
||||
```astro
|
||||
<h1>I'm a child. I have access to the appConfig in index!</h1>
|
||||
<GrandChild />
|
||||
|
|
@ -133,6 +132,7 @@ const data = deserialize<AppConfig>('app-config');
|
|||
```
|
||||
|
||||
In GrandChild.astro:
|
||||
|
||||
```astro
|
||||
<h1>I'm a grand child. I also have access to the appConfig in index!</h1>
|
||||
<script>
|
||||
|
|
@ -177,6 +177,7 @@ console.log(now instanceof Date); // true
|
|||
## 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 <id>** - there were multiple `JSON` scripts found with the same ID
|
||||
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@ import { defineConfig } from 'astro/config';
|
|||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
output: "server",
|
||||
});
|
||||
output: "static",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -28,15 +28,16 @@
|
|||
"start": "astro telemetry disable && astro dev",
|
||||
"build": "astro telemetry disable && astro build",
|
||||
"preview": "astro preview",
|
||||
"build:preview": "npm run build && npm run preview",
|
||||
"publish:patch": "npm version patch && npm publish --access public",
|
||||
"publish:minor": "npm version minor && npm publish --access public",
|
||||
"prepare": "husky"
|
||||
},
|
||||
"devDependencies": {
|
||||
"devalue": "^5.1.1",
|
||||
"devalue": "^5.6.4",
|
||||
"husky": "^9.1.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"astro": "^5"
|
||||
"astro": "^6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1934
pnpm-lock.yaml
1934
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -2,35 +2,38 @@
|
|||
// type Primitive = string | number | boolean | null | undefined;
|
||||
|
||||
export interface Props {
|
||||
/**
|
||||
* The id that the client script will pass to the `deserialize()` function
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* The data to be serialized and accessed in the client script with `deserialize()`
|
||||
*/
|
||||
data: Record<string, any>;
|
||||
/**
|
||||
* Custom serializer to be used
|
||||
* @param data
|
||||
*/
|
||||
use?: (data: Record<string, any>) => string;
|
||||
/**
|
||||
* The id that the client script will pass to the `deserialize()` function
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* The data to be serialized and accessed in the client script with `deserialize()`
|
||||
*/
|
||||
data: Record<string, any>;
|
||||
/**
|
||||
* Custom serializer to be used
|
||||
* @param data
|
||||
*/
|
||||
use?: (data: Record<string, any>) => string;
|
||||
}
|
||||
const {id, data, use} = Astro.props;
|
||||
let serializedData = '{}'
|
||||
const { id, data, use } = Astro.props;
|
||||
let serializedData = "{}";
|
||||
try {
|
||||
serializedData = use ? use(data) : JSON.stringify(data);
|
||||
} catch(err) {
|
||||
/**
|
||||
* ERR: data is unserializable
|
||||
* - You might need a custom serializer/parser for complex data
|
||||
* - Usage examples in 👉 https://git.sr.ht/~ayoayco/astro-resume#astro-resume
|
||||
*/
|
||||
throw Error(`astro-resume ERR: Data unserializable
|
||||
serializedData = use ? use(data) : JSON.stringify(data);
|
||||
} catch (err) {
|
||||
/**
|
||||
* ERR: data is unserializable
|
||||
* - You might need a custom serializer/parser for complex data
|
||||
* - Usage examples in 👉 https://ayco.io/gh/astro-resume#usage
|
||||
*/
|
||||
throw Error(
|
||||
`astro-resume ERR: Data unserializable
|
||||
- You might need a custom serializer/parser for complex data
|
||||
- Usage examples in 👉 https://git.sr.ht/~ayoayco/astro-resume#astro-resume
|
||||
`, err)
|
||||
- Usage examples in 👉 https://ayco.io/gh/astro-resume#usage
|
||||
`,
|
||||
err,
|
||||
);
|
||||
}
|
||||
---
|
||||
|
||||
<script type="application/json" id={id} set:html={serializedData}></script>
|
||||
<script type="application/json" id={id} set:html={serializedData} />
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
* @param id The id of the Serialize component, used to find the serialized data in the HTML
|
||||
* @param parser Custom parser to be used
|
||||
* @returns The deserialized JSON data
|
||||
* @see Usage examples in 👉 https://git.sr.ht/~ayoayco/astro-resume#astro-resume
|
||||
* @see Usage examples in 👉 https://ayco.io/gh/astro-resume#usage
|
||||
**/
|
||||
export function deserialize<T = any>(id: string, parser?: (serialized: string)=>any): T {
|
||||
export function deserialize<T = any>(id: string, parser?: (serialized: string) => any): T {
|
||||
const elements = document.querySelectorAll<HTMLScriptElement>(`script#${id}[type="application/json"]`);
|
||||
|
||||
if (elements?.length > 0) {
|
||||
|
|
@ -19,13 +19,13 @@ export function deserialize<T = any>(id: string, parser?: (serialized: string)=>
|
|||
? parser(element.textContent)
|
||||
: JSON.parse(element.textContent)
|
||||
}
|
||||
|
||||
|
||||
throw Error(`astro-resume ERR: No match found.
|
||||
"deserialize('${id}')" did not find any data.
|
||||
Check that the following are correct:
|
||||
- The Serialize component is used with correct props
|
||||
- "data" prop is not undefined
|
||||
- "${id}" is the "id" of the Serialize component
|
||||
See examples: https://sr.ht/~ayoayco/astro-resume/#usage
|
||||
See examples: https://ayco.io/gh/astro-resume#usage
|
||||
Stack trace: `)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue