blob: 06b7f62696a2a77e9680015a051f2bf378601a0f (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
---
'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
```
|
