refactor: use Serialize / deserialize as names

README.md

@@ -1,9 +1,9 @@
-# Astro Resume
+# Astro deserialize
 
 Utilities for serializing data from server for use in the client.
 
-1. `Resumable` Astro component takes `id` and `data`
+1. `Serialize` 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. `deserialize(id: string): Object` function for use int he client takes an `id` string and returns the `data` as Object
 
 ## Installation & Usage
 
@@ -21,18 +21,18 @@ Serializing and deserializing basic primitive data
 
 ```astro
 ---
-import Resumable from "@ayco/astro-resume";
+import Serialize from "@ayco/astro-resume";
 
 const data = {
 	hello: 'world',
 }
 ---
 
-<Resumable id="astro-obj" data={data} />
+<Serialize id="my-data" data={data} />
 
 <script>
-	import {resume} from '@ayco/astro-resume';
+	import {deserialize} from '@ayco/astro-resume';
-	const data = resume('astro-obj');
+	const data = deserialize('my-data');
 	console.log(data) // {hello: 'world'}
 </script>
 
@@ -44,7 +44,7 @@ You can define a type for the data and use it in the client script.
 
 ```astro
 ---
-import Resumable from "@ayco/astro-resume";
+import Serialize from "@ayco/astro-resume";
 
 const data = {
 	hello: 'world',
@@ -54,10 +54,10 @@ const data = {
 export type Data = typeof data;
 ---
 
-<Resumable id="astro-obj" data={data} />
+<Serialize id="my-data" data={data} />
 
 <script>
-	import {resume} from '@ayco/astro-resume';
+	import {deserialize} from '@ayco/astro-resume';
 
 	/**
      * reuse the type in the client
@@ -65,7 +65,7 @@ export type Data = typeof data;
 	 */
 	import type {Data} from './Component.astro';
 
-	const data = resume<Data>('astro-obj');
+	const data = deserialize<Data>('my-data');
 
 	console.log(data) // {hello: 'world'}
 </script>

index.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import Resumable from './src/Resumable.astro';
+import Serialize from './src/Serialize.astro';
-export default Resumable;
+export default Serialize;
-export * from './src/resume';
+export * from './src/deserialize';

package.json

@@ -14,8 +14,8 @@
     ".": "./index.ts"
   },
   "files": [
-    "src/Resumable.astro",
+    "src/Serialize.astro",
-    "src/resume.ts",
+    "src/deserialize.ts",
     "index.ts"
   ],
   "scripts": {

src/Serialize.astro

@@ -3,11 +3,11 @@ type Primitive = string | number | boolean | null | undefined;
 
 export interface Props {
     /**
-     * The id that the client script will pass to the `resume()` function
+     * 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 `resume()`
+     * The data to be serialized and accessed in the client script with `deserialize()`
      */
     data: Record<string, Primitive>;
 }

src/deserialize.ts

@@ -1,14 +1,14 @@
-export function resume<T = any>(id: string): T {
+export function deserialize<T = any>(id: string): T {
     const element = document.querySelector<HTMLTextAreaElement>(`#${id}`);
 
     if (element?.value)
         return JSON.parse(element.value)
         
-    throw Error(`The call resume('${id}') did not find any data.
+    throw Error(`The call deserialize('${id}') did not find any data.
     Check that the following are correct:
-    - The Resumable component is used with correct props
+    - The Serialize component is used with correct props
     - "data" prop is not undefined
-    - "${id}" is the "id" of the Resumable component
+    - "${id}" is the "id" of the Serialize component
     See examples: https://sr.ht/~ayoayco/astro-resume/#usage
 Stack trace: `)
 }

src/pages/index.astro

@@ -1,20 +1,21 @@
 ---
-import Resumable from '../Resumable.astro';
+import Serialize from "../Serialize.astro";
 const data = {
     name: 'John Doe',
     isOkay: true,
+    mood: null
 }
 export type Data = typeof data;
 ---
 
-<Resumable id="astro-obj" data={data} />
+<Serialize data={data} id="my-data" />
 
 <div id="render-here"></div>
 
 <script>
-    import {resume} from '../resume';
+    import { deserialize } from '../deserialize';
-    import {Data} from './index.astro';
+import {Data} from './index.astro';
-    const data = resume<Data>('astro-obj');
+    const data = deserialize<Data>('my-data');
 
     console.log(data);
     const renderDiv = document.querySelector('#render-here');