From c4f7cd3d3d525fe06b15734bf586252b8b15cc91 Mon Sep 17 00:00:00 2001
From: Quang Phan <vnphanquang@gmail.com>
Date: Thu, 4 Jul 2024 16:52:23 +0700
Subject: [PATCH] docs(preaction): fix code exmple

---
 packages/preaction/README.md                         | 12 ++++++++++++
 .../routes/docs/(package)/preaction/+page.md.svelte  |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/preaction/README.md b/packages/preaction/README.md
index 7f8d9a3a..74dd6c81 100644
--- a/packages/preaction/README.md
+++ b/packages/preaction/README.md
@@ -87,6 +87,18 @@ export const setMyColor = make((initialColor = 'blue') => {
 <div use:apply={setMyColor('red')}></div>
 ```
 
+...which is equivalent to...
+
+```html
+<script>
+  import { setMyColor } from './set-my-color.ts'; // see previous step
+	const { acton, attributes } = setMyColor('red');
+</script>
+
+<!-- add data-color on server, and apply action on client -->
+<div {...(attributes ?? {})} use:action={'red'}></div>
+```
+
 ## [Changelog][github.changelog]
 
 <!-- github specifics -->
diff --git a/sites/docs/src/routes/docs/(package)/preaction/+page.md.svelte b/sites/docs/src/routes/docs/(package)/preaction/+page.md.svelte
index afcd0d03..68dd0a70 100644
--- a/sites/docs/src/routes/docs/(package)/preaction/+page.md.svelte
+++ b/sites/docs/src/routes/docs/(package)/preaction/+page.md.svelte
@@ -65,13 +65,13 @@ Which is equivalent to:
 </script>
 
 <!-- :::highlight -->
-<button {...control.attributes ?? {}} use:control.action={'my-popover'} class="c-btn">
+<button {...(control.attributes ?? {})} use:control.action={'my-popover'} class="c-btn">
 <!-- ::: -->
 	Open Popover
 </button>
 
 <!-- :::highlight -->
-<div {...target.attributes ?? {}} use:target.action={'my-popover'} class="p-10">
+<div {...(target.attributes ?? {})} use:target.action={'my-popover'} class="p-10">
 <!-- ::: -->
   My simple popover
 </div>