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
|
# Astro Resume
|
||||||
|
|
||||||
[](https://www.npmjs.com/package/@ayco/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 this example, an appConfig object is built and serialized in index.astro and accessed in child Astro components.
|
||||||
|
|
||||||
In index.astro:
|
In index.astro:
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
import Serialize from "@ayco/astro-resume";
|
import Serialize from "@ayco/astro-resume";
|
||||||
|
|
||||||
|
|
@ -120,6 +118,7 @@ export type AppConfig = typeof appConfig;
|
||||||
```
|
```
|
||||||
|
|
||||||
In Child.astro:
|
In Child.astro:
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
<h1>I'm a child. I have access to the appConfig in index!</h1>
|
<h1>I'm a child. I have access to the appConfig in index!</h1>
|
||||||
<GrandChild />
|
<GrandChild />
|
||||||
|
|
@ -133,6 +132,7 @@ const data = deserialize<AppConfig>('app-config');
|
||||||
```
|
```
|
||||||
|
|
||||||
In GrandChild.astro:
|
In GrandChild.astro:
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
<h1>I'm a grand child. I also have access to the appConfig in index!</h1>
|
<h1>I'm a grand child. I also have access to the appConfig in index!</h1>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -177,6 +177,7 @@ console.log(now instanceof Date); // true
|
||||||
## 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
|
||||||
1. **WARNING: Multiple matches for <id>** - there were multiple `JSON` scripts found with the same 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
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: "server",
|
output: "static",
|
||||||
});
|
});
|
||||||
|
|
@ -28,15 +28,16 @@
|
||||||
"start": "astro telemetry disable && astro dev",
|
"start": "astro telemetry disable && astro dev",
|
||||||
"build": "astro telemetry disable && astro build",
|
"build": "astro telemetry disable && astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
|
"build:preview": "npm run build && npm run preview",
|
||||||
"publish:patch": "npm version patch && npm publish --access public",
|
"publish:patch": "npm version patch && npm publish --access public",
|
||||||
"publish:minor": "npm version minor && npm publish --access public",
|
"publish:minor": "npm version minor && npm publish --access public",
|
||||||
"prepare": "husky"
|
"prepare": "husky"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"devalue": "^5.1.1",
|
"devalue": "^5.6.4",
|
||||||
"husky": "^9.1.7"
|
"husky": "^9.1.7"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"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;
|
// type Primitive = string | number | boolean | null | undefined;
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
/**
|
/**
|
||||||
* The id that the client script will pass to the `deserialize()` function
|
* The id that the client script will pass to the `deserialize()` function
|
||||||
*/
|
*/
|
||||||
id: string;
|
id: string;
|
||||||
/**
|
/**
|
||||||
* The data to be serialized and accessed in the client script with `deserialize()`
|
* The data to be serialized and accessed in the client script with `deserialize()`
|
||||||
*/
|
*/
|
||||||
data: Record<string, any>;
|
data: Record<string, any>;
|
||||||
/**
|
/**
|
||||||
* Custom serializer to be used
|
* Custom serializer to be used
|
||||||
* @param data
|
* @param data
|
||||||
*/
|
*/
|
||||||
use?: (data: Record<string, any>) => string;
|
use?: (data: Record<string, any>) => string;
|
||||||
}
|
}
|
||||||
const {id, data, use} = Astro.props;
|
const { id, data, use } = Astro.props;
|
||||||
let serializedData = '{}'
|
let serializedData = "{}";
|
||||||
try {
|
try {
|
||||||
serializedData = use ? use(data) : JSON.stringify(data);
|
serializedData = use ? use(data) : JSON.stringify(data);
|
||||||
} catch(err) {
|
} catch (err) {
|
||||||
/**
|
/**
|
||||||
* ERR: data is unserializable
|
* ERR: data is unserializable
|
||||||
* - You might need a custom serializer/parser for complex data
|
* - You might need a custom serializer/parser for complex data
|
||||||
* - Usage examples in 👉 https://git.sr.ht/~ayoayco/astro-resume#astro-resume
|
* - Usage examples in 👉 https://ayco.io/gh/astro-resume#usage
|
||||||
*/
|
*/
|
||||||
throw Error(`astro-resume ERR: Data unserializable
|
throw Error(
|
||||||
|
`astro-resume ERR: Data unserializable
|
||||||
- You might need a custom serializer/parser for complex data
|
- You might need a custom serializer/parser for complex data
|
||||||
- Usage examples in 👉 https://git.sr.ht/~ayoayco/astro-resume#astro-resume
|
- Usage examples in 👉 https://ayco.io/gh/astro-resume#usage
|
||||||
`, err)
|
`,
|
||||||
|
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 id The id of the Serialize component, used to find the serialized data in the HTML
|
||||||
* @param parser Custom parser to be used
|
* @param parser Custom parser to be used
|
||||||
* @returns The deserialized JSON data
|
* @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"]`);
|
const elements = document.querySelectorAll<HTMLScriptElement>(`script#${id}[type="application/json"]`);
|
||||||
|
|
||||||
if (elements?.length > 0) {
|
if (elements?.length > 0) {
|
||||||
|
|
@ -26,6 +26,6 @@ export function deserialize<T = any>(id: string, parser?: (serialized: string)=>
|
||||||
- The Serialize component is used with correct props
|
- The Serialize component is used with correct props
|
||||||
- "data" prop is not undefined
|
- "data" prop is not undefined
|
||||||
- "${id}" is the "id" of the Serialize component
|
- "${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: `)
|
Stack trace: `)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue