From 49ef3be87a99a285c53e4ddf2588ddc6f6d66eb0 Mon Sep 17 00:00:00 2001 From: Ayo Date: Mon, 17 Jul 2023 10:39:56 +0200 Subject: [PATCH] chore: update readme --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 24507f3..1fa50e3 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,17 @@ Utilities for serializing data from server for use in the client. 1. `Serialize` Astro component takes `id` and `data` -1. `deserialize(id: string): Object` function for use int he client takes an `id` string and returns the `data` as Object +1. `deserialize(id: string)` function for use int he client takes an `id` string and returns the `data` + +## 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. + +The `deserialize()` function can then parse the value string for use in your client script. + +This is not the best way to do this though. Other frameworks might do this by embedding JSON in your HTML and managing/tracking the IDs for you, but we don't have access to this yet in Astro. You have to manage the IDs yourself and understand the the `deserialize()` function will crawl the whole document. + +There is a pattern given in the Astro docs 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. ## Installation & Examples