docs(preaction): fix code exmple

vnphanquang · Jul 4, 2024 · c4f7cd3 · c4f7cd3
1 parent c7dbd7c
commit c4f7cd3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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>