.build.yml

@@ -1,11 +0,0 @@
-image: alpine/edge
-secrets:
-  - bbfcb6dc-7c4a-42ee-a11a-022f0339a133
-environment:
-  REPO: astro-resume
-  GH_USER: ayoayco
-tasks:
-  - push-mirror: |
-      cd ~/"${REPO}"
-      git config --global credential.helper store
-      git push --mirror "https://github.com/${GH_USER}/${REPO}"

README.md

@@ -1,12 +1,5 @@
-> [!NOTE]
-> This project moved to [SourceHut](https://git.sr.ht/~ayoayco/astro-resume).
-
 # Astro Resume
 
-[![Package information: NPM version](https://img.shields.io/npm/v/@ayco/astro-resume)](https://www.npmjs.com/package/@ayco/astro-resume)
-[![Package information: NPM license](https://img.shields.io/npm/l/@ayco/astro-resume)](https://www.npmjs.com/package/@ayco/astro-resume)
-[![Package information: NPM downloads](https://img.shields.io/npm/dt/@ayco/astro-resume)](https://www.npmjs.com/package/@ayco/astro-resume)
-
 Utilities for serializing data from server for use in the client.
 
 1. `Serialize` - Astro component that takes `id` and `data`
@@ -36,9 +29,9 @@ const data = {
 <Serialize id="my-data" data={data} />
 
 <script>
-import {deserialize} from '@ayco/astro-resume';
+	import {deserialize} from '@ayco/astro-resume';
-const data = deserialize('my-data');
+	const data = deserialize('my-data');
-console.log(data) // {hello: 'world'}
+	console.log(data) // {hello: 'world'}
 </script>
 
 ```
@@ -62,17 +55,17 @@ export type Data = typeof data;
 <Serialize id="my-data" data={data} />
 
 <script>
-import {deserialize} from '@ayco/astro-resume';
+	import {deserialize} from '@ayco/astro-resume';
 
-/**
+	/**
-* reuse the type in the client
+	* reuse the type in the client
-* assuming this component's name is `ThisComponent.astro`
+	* assuming this component's name is `ThisComponent.astro`
-*/
+	*/
-import type {Data} from './ThisComponent.astro';
+	import type {Data} from './ThisComponent.astro';
 
-const data = deserialize<Data>('my-data');
+	const data = deserialize<Data>('my-data');
 
-console.log(data) // {hello: 'world', isOkay: true}
+	console.log(data) // {hello: 'world', isOkay: true}
 </script>
 ```
 
@@ -92,55 +85,10 @@ export interface Props {
 <Serialize id="preferences" data={{...Astro.props}} />
 
 <script>
-import {deserialize} from '@ayco/astro-resume';
+	import {deserialize} from '@ayco/astro-resume';
-import type {Props} from './ThisComponent.astro';
+	import type {Props} from './ThisComponent.astro';
-const {hello, isOkay} = deserialize<Props>('preferences');
+	const {hello, isOkay} = deserialize<Props>('preferences');
-console.log(hello, isOkay);
+	console.log(hello, isOkay);
-</script>
-```
-
-## Serialize server data once, access everywhere
-
-If you have shared data that needs to be initialized from the server and accessed in several places on the client-side, you can use `Serialize` once and `deserialize` in any number of Astro components as long as they are in the same page.
-
-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";
-
-const appConfig = {
-	someClientSideKey: '1234hello',
-}
-export type AppConfig = typeof appConfig;
----
-
-<Serialize id="app-config" data={appConfig} />
-<Child />
-```
-
-In Child.astro:
-```astro
-<h1>I'm a child. I have access to the appConfig in index!</h1>
-<GrandChild />
-<script>
-import {deserialize} from '@ayco/astro-resume';
-import type {AppConfig} from '..pages/index.astro';
-const data = deserialize<AppConfig>('app-config');
-
-// ... do something with the app config
-</script>
-```
-
-In GrandChild.astro:
-```astro
-<h1>I'm a grand child. I also have access to the appConfig in index!</h1>
-<script>
-import {deserialize} from '@ayco/astro-resume';
-import type {AppConfig} from '..pages/index.astro';
-const data = deserialize<AppConfig>('app-config');
-
-// ... do something with the app config
 </script>
 ```
 
@@ -164,13 +112,13 @@ export type Data = typeof data;
 <Serialize data={data} id="my-data" use={stringify} />
 
 <script>
-import {parse} from 'devalue';
+    import {parse} from 'devalue';
-import {deserialize} from '@ayco/astro-resume';
+    import {deserialize} from '@ayco/astro-resume';
-import type {Data} from './index.astro';
+    import type {Data} from './index.astro';
 
-const {age, now} = deserialize<Data>('my-data', parse);
+    const {age, now} = deserialize<Data>('my-data', parse);
-console.log(typeof age); // 'bigint'
+    console.log(typeof age); // 'bigint'
-console.log(now instanceof Date); // true
+    console.log(now instanceof Date); // true
 </script>
 ```
 
@@ -205,3 +153,4 @@ See the [TODO tracker](https://todo.sr.ht/~ayoayco/astro-resume) for planned wor
 ## 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)
+

astro.config.mjs

@@ -1,6 +1,11 @@
 import { defineConfig } from 'astro/config';
 
+import node from "@astrojs/node";
+
 // https://astro.build/config
 export default defineConfig({
   output: "server",
+  adapter: node({
+    mode: "standalone"
+  })
 });

package.json

@@ -1,13 +1,9 @@
 {
   "name": "@ayco/astro-resume",
   "author": "Ayo Ayco",
-  "homepage": "https://ayco.io/sh/astro-resume",
+  "homepage": "https://sr.ht/~ayoayco/astro-resume",
-  "repository": {
-    "type": "git",
-    "url": "https://git.sr.ht/~ayoayco/astro-resume"
-  },
   "type": "module",
-  "version": "0.4.3",
+  "version": "0.3.2",
   "keywords": [
     "astro-component",
     "css",
@@ -27,14 +23,10 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro",
+    "astro": "astro"
-    "publish:patch": "npm version patch && npm publish --access public",
-    "publish:minor": "npm version minor && npm publish --access public"
   },
-  "devDependencies": {
+  "dependencies": {
-    "devalue": "^5.1.1"
+    "@astrojs/node": "^5.3.0",
-  },
+    "astro": "^2.8.4"
-  "peerDependencies": {
-    "astro": "^5"
   }
 }

src/Serialize.astro

@@ -21,15 +21,7 @@ let serializedData = '{}'
 try {
     serializedData = use ? use(data) : JSON.stringify(data);
 } catch(err) {
-    /**
+    throw Error(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
-- You might need a custom serializer/parser for complex data
-- Usage examples in 👉 https://git.sr.ht/~ayoayco/astro-resume#astro-resume
-    `, err)
 }
 ---
 

src/deserialize.ts

@@ -4,13 +4,35 @@
  * @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
-**/
+ * @example
+ * 
+ * To make all `Astro.props` available in your client script:
+ *
+ * ```astro
+ * ---
+ * import Serialize from "@ayco/astro-resume";
+ * export interface Props {
+ * 	hello: string;
+ * 	isOkay: boolean;
+ * }
+ * ---
+ * 
+ * <Serialize id="preferences" data={{...Astro.props}} />
+ * 
+ * <script>
+ * 	import {deserialize} from '@ayco/astro-resume';
+ * 	import type {Props} from './ThisComponent.astro';
+ * 	const {hello, isOkay} = deserialize<Props>('preferences');
+ * 	console.log(hello, isOkay);
+ * </script>
+ * ```
+ **/
 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) {
         if (elements?.length > 1)
-            console.warn(`astro-resume WARN: Multiple matches for "${id}". The function will parse the first one.`)
+            console.warn(`WARNING: Multiple matches for "${id}". There are ${elements?.length} matches found for ID: "${id}". The function will parse the first match found.`)
 
         const element = elements[0];
 
@@ -20,7 +42,7 @@ export function deserialize<T = any>(id: string, parser?: (serialized: string)=>
                 : JSON.parse(element.textContent)
     }
         
-    throw Error(`astro-resume ERR: No match found.
+    throw Error(`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

src/env.d.ts

@@ -1,2 +1 @@
-/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/pages/index.astro

@@ -1,44 +1,23 @@
 ---
 import Serialize from "../Serialize.astro";
-import { stringify } from "devalue";
 const data = {
-  nameStr: "John Doe",
+    name: 'John Doe',
-  isOkayBool: true,
+    isOkay: true,
-  moodNull: null,
+    mood: null,
-  nowDate: new Date(),
+    // now: new Date(),
-  ageBigInt: BigInt("3218378192378"),
+    // age: BigInt('3218378192378')
-};
+}
 export type Data = typeof data;
 ---
 
 <div id="render-here"></div>
-<Serialize data={data} id="my-data" use={stringify} />
+<Serialize data={data} id="my-data" />
 
 <script>
-  import { deserialize } from "../deserialize";
+    import { deserialize } from '../deserialize';
-  import { parse } 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);
-
+    document.getElementById("render-here").innerHTML = JSON.stringify(data)
-  Object.keys(data).forEach((key) =>
-    console.log(key, data[key], typeof data[key])
-  );
-
-  // render table to render-here
-  const table = document.createElement("table");
-  const tbody = document.createElement("tbody");
-  table.appendChild(tbody);
-  Object.keys(data).forEach((key) => {
-    const tr = document.createElement("tr");
-    const tdKey = document.createElement("td");
-    const tdValue = document.createElement("td");
-    tdKey.textContent = key;
-    tdValue.textContent = data[key];
-    tr.appendChild(tdKey);
-    tr.appendChild(tdValue);
-    tbody.appendChild(tr);
-  });
-  document.getElementById("render-here").appendChild(table);
 </script>