chore: add more documentation ✨

README.md

@@ -2,8 +2,8 @@
 
 Utilities for serializing data from server for use in the client.
 
-1. `Serialize` Astro component takes `id` and `data`
+1. `Serialize` - Astro component that takes `id` and `data`
-1. `deserialize(id: string)` function for use int he client takes an `id` string and returns the `data`
+1. `deserialize(id: string)` - a function for use in the client that takes an `id` string and returns the `data` object
 
 ## Installation & Examples
 

src/deserialize.ts

@@ -1,3 +1,31 @@
+/**
+ * Function to find and deserialize JSON data from the HTML
+ * @param id The id of the Serialize component, used to find the serialized data in the HTML
+ * @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): T {
     const element = document.querySelector<HTMLScriptElement>(`#${id}`);