Move hydration directives to special attributes (#618)

* feat: ♻️ updating hydration to work with the directive syntax

* test:  Updating tests for the hydration directive syntax

* refactor: Updating example projects for the hydration directive syntax

* test:  Found a test fixture still needing an update to the hydration directive syntax

* style: Prettier strikes again!  Reverting code formatting changes

* refactor: ♻️ moving directive matching to a Set

* refactor: Updating syntax to `client:load`

* refactor: ♻️ Simplifying the `client:` directive match

Per PR feedback from @matthewp

* chore: errant console.warn() snuck into the last commit

* feat: 🔊 Adding a super fancy build warning to update to the directive syntax

* refactor: ♻️ 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:  Including the original hydration syntax in a test to make sure it builds

* style: 📝 Adding a comment to make it clear why the old hydration syntax is included in a the test markup

* fix: 🐛 updating `head` logic to recognize hydration directive syntax

* docs: Adding changeset

* refactor: 🔥 Removing unnecessary `!hasComponents` check

* docs: 📝 Adding more detail to the changset

Co-authored-by: Tony Sullivan <tony.f.sullivan@gmail.com>
This commit is contained in:
Tony Sullivan
2021-07-08 20:07:56 +02:00
committed by GitHub
parent ea5afcd633
commit 0a7b6deaec
25 changed files with 117 additions and 59 deletions

View File

@ -33,9 +33,9 @@ import Counter from '../components/Counter.vue'
</head>
<body>
<main>
<Counter:visible>
<Counter client:visible>
<h1>Hello Vue!</h1>
</Counter:visible>
</Counter>
</main>
</body>
</html>