astro/.changeset/famous-years-bow.md

---
'astro': minor
---

## Adds directive syntax for component hydration

This change updates the syntax for partial hydration from `<Button:load />` to `<Button client:load />`.

**Why?**

Partial hydration is about to get super powers! This clears the way for more dynamic partial hydration, i.e. `<MobileMenu client:media="(max-width: 40em)" />`.

**How to upgrade**

Just update `:load`, `:idle`, and `:visible` to match the `client:load` format, thats it! Don't worry, the original syntax is still supported but it's recommended to future-proof your project by updating to the newer syntax.
Move hydration directives to special attributes (#618) * feat: :recycle: updating hydration to work with the directive syntax * test: :white_check_mark: Updating tests for the hydration directive syntax * refactor: Updating example projects for the hydration directive syntax * test: :white_check_mark: Found a test fixture still needing an update to the hydration directive syntax * style: Prettier strikes again! Reverting code formatting changes * refactor: :recycle: moving directive matching to a Set * refactor: Updating syntax to `client:load` * refactor: :recycle: Simplifying the `client:` directive match Per PR feedback from @matthewp * chore: errant console.warn() snuck into the last commit * feat: :loud_sound: Adding a super fancy build warning to update to the directive syntax * refactor: :recycle: Removing unnecessary checks when matching supported hydration directives `val` isn't being used for now, but leaving it in the attr destructuring as a reminder since it'll be needed for `client:media` * test: :white_check_mark: Including the original hydration syntax in a test to make sure it builds * style: :memo: Adding a comment to make it clear why the old hydration syntax is included in a the test markup * fix: :bug: updating `head` logic to recognize hydration directive syntax * docs: Adding changeset * refactor: :fire: Removing unnecessary `!hasComponents` check * docs: :memo: Adding more detail to the changset Co-authored-by: Tony Sullivan <tony.f.sullivan@gmail.com> 2021-07-08 20:07:56 +02:00			`---`
			`'astro': minor`
			`---`

			`## Adds directive syntax for component hydration`

			This change updates the syntax for partial hydration from `<Button:load />` to `<Button client:load />`.

			`Why?`

			Partial hydration is about to get super powers! This clears the way for more dynamic partial hydration, i.e. `<MobileMenu client:media="(max-width: 40em)" />`.

			`How to upgrade`

			Just update `:load`, `:idle`, and `:visible` to match the `client:load` format, thats it! Don't worry, the original syntax is still supported but it's recommended to future-proof your project by updating to the newer syntax.