diff options
Diffstat (limited to '.changeset/tall-eyes-vanish.md')
-rw-r--r-- | .changeset/tall-eyes-vanish.md | 51 |
1 files changed, 0 insertions, 51 deletions
diff --git a/.changeset/tall-eyes-vanish.md b/.changeset/tall-eyes-vanish.md deleted file mode 100644 index 06b7f6269..000000000 --- a/.changeset/tall-eyes-vanish.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -'astro': minor ---- - -Integrations can add new `client:` directives through the `astro:config:setup` hook's `addClientDirective()` API. To enable this API, the user needs to set `experimental.customClientDirectives` to `true` in their config. - -```js -import { defineConfig } from 'astro/config'; -import onClickDirective from 'astro-click-directive'; - -export default defineConfig({ - integrations: [onClickDirective()], - experimental: { - customClientDirectives: true - } -}); -``` - -```js -export default function onClickDirective() { - return { - hooks: { - 'astro:config:setup': ({ addClientDirective }) => { - addClientDirective({ - name: 'click', - entrypoint: 'astro-click-directive/click.js' - }); - }, - } - } -} -``` - -```astro -<Counter client:click /> -``` - -The client directive file (e.g. `astro-click-directive/click.js`) should export a function of type `ClientDirective`: - -```ts -import type { ClientDirective } from 'astro' - -const clickDirective: ClientDirective = (load, opts, el) => { - window.addEventListener('click', async () => { - const hydrate = await load() - await hydrate() - }, { once: true }) -} - -export default clickDirective -``` |