From 0339b7c2628597c91c8d05720e1392d4c32e77f8 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 17 Jul 2023 17:09:20 +0200
Subject: [PATCH] feat: use JSON script for serializing

---
 README.md           | 12 ++++++++----
 src/Serialize.astro |  2 +-
 src/deserialize.ts  |  6 +++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index ab9d626..8807e9f 100644
--- a/README.md
+++ b/README.md
@@ -96,13 +96,17 @@ export interface Props {
 
 ## What's happening here?
 
-For simple applications with just a few components, this is a quick pattern to embed serialized information into your HTML. The `Serialize` component will do this for you, currently by using a hidden `textarea` element to hold the string.
+This is a quick and easy pattern to embed serialized information into your HTML and make it available in the client-side script.
 
-The `deserialize()` function can then parse the value string for use in your client script. You have to manage the IDs yourself (i.e., make sure they are unique) and understand that the `deserialize()` function will crawl the whole document incurring some performance cost.
+The `Serialize` component will write the data as JSON wrapped in a `<script type="application/json">` element to hold the string.
 
-Another approach we see in other frameworks is embedding JSON in your HTML and the frameworks themselves managing/tracking the IDs for you, but we don't have access to this in Astro as we are not really shipping a framework to the browser. That's nice and ideal (in my opinion), but we do have to manage things ourselves.
+The `deserialize()` function can then parse the value string for use in your client script.
 
-There is a pattern [given in the Astro docs](https://docs.astro.build/en/guides/client-side-scripts/#pass-frontmatter-variables-to-scripts) to use a Custom Element that takes a `data-` prop which properly protects the scope of your component. That is a good pattern to follow for complex applications that don't use UI frameworks.
+There is also a pattern [given in the Astro docs](https://docs.astro.build/en/guides/client-side-scripts/#pass-frontmatter-variables-to-scripts) to use a Custom Element that takes a `data-` prop which properly protects the scope of your component. That is a good pattern to follow for complex applications that don't use UI frameworks.
+
+## Trade-Off
+
+You have to manage the IDs yourself (i.e., make sure they are unique) and understand that the `deserialize()` function will crawl the whole document incurring a minimal performance cost depending on how big your HTML is.
 
 ## Reporting Issues
 
diff --git a/src/Serialize.astro b/src/Serialize.astro
index eba46bd..f137caa 100644
--- a/src/Serialize.astro
+++ b/src/Serialize.astro
@@ -14,4 +14,4 @@ export interface Props {
 const {id, data} = Astro.props;
 ---
 
-<textarea hidden id={id}>{JSON.stringify(data)}</textarea>
\ No newline at end of file
+<script type="application/json" id={id} set:html={JSON.stringify(data)}></script>
\ No newline at end of file
diff --git a/src/deserialize.ts b/src/deserialize.ts
index 351721d..74154b8 100644
--- a/src/deserialize.ts
+++ b/src/deserialize.ts
@@ -1,8 +1,8 @@
 export function deserialize<T = any>(id: string): T {
-    const element = document.querySelector<HTMLTextAreaElement>(`#${id}`);
+    const element = document.querySelector<HTMLScriptElement>(`#${id}`);
 
-    if (element?.value)
-        return JSON.parse(element.value)
+    if (element?.innerText)
+        return JSON.parse(element.innerText)
         
     throw Error(`The call deserialize('${id}') did not find any data.
     Check that the following are correct: