From f9a8cd9b0123c6898d6641cf15bd450bba833a9f Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 17 Jul 2023 17:17:47 +0200
Subject: [PATCH] feat: use textContent prop

---
 README.md          | 8 ++++++--
 src/deserialize.ts | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 8807e9f..a61017f 100644
--- a/README.md
+++ b/README.md
@@ -96,7 +96,7 @@ export interface Props {
 
 ## What's happening here?
 
-This is a quick and easy pattern to embed serialized information into your HTML and make it available in the client-side script.
+This is a quick and easy pattern to embed serialized information into your HTML and make it available in the client-side script with type safety.
 
 The `Serialize` component will write the data as JSON wrapped in a `<script type="application/json">` element to hold the string.
 
@@ -106,7 +106,11 @@ There is also a pattern [given in the Astro docs](https://docs.astro.build/en/gu
 
 ## 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.
+Some other frameworks themselves will manage serialized information and 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), as we are aware of how the HTML is formed and what we are shipping to our users. The trade off is that we do have to manage things ourselves.
+
+You have to manage the IDs (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/deserialize.ts b/src/deserialize.ts
index 74154b8..59c156b 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<HTMLScriptElement>(`#${id}`);
 
-    if (element?.innerText)
-        return JSON.parse(element.innerText)
+    if (element?.textContent)
+        return JSON.parse(element.textContent)
         
     throw Error(`The call deserialize('${id}') did not find any data.
     Check that the following are correct: