Client directive: On

Caution

This library is in beta until releasing the version 1.0.0. It is susceptible to breaking changes as we are polishing the public surface to make it better.

The client:on directive allows you to combine client directives with an OR condition using a specific syntax: when any of the conditions meet, the component will be hydrated.

Any directive included in this package and any custom directive you have could be added to the syntax. This feature makes this directive a very powerful one!

Setup

For setting up the directive, include the integration in your Astro project config and declare the directives you want to include in the syntax parser, specifying the name and the entrypoint of the directive.

Every directive included in this package exports an entrypoint under the /directive path, for example @astro-tools/client-directives/click/directive.

1. Install the library using your preferred package manager:

   npm i -D @astro-tools/client-directives

2. Add the integration to your project configuration:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   
   import { onClientDirective } from '@astro-tools/client-directives/on';
   
   export default defineConfig({
     integrations: [
       onClientDirective({
         directives: [
           {
             name: 'click',
             entrypoint: '@astro-tools/client-directives/click/directive',
           },
           {
             name: 'my-directive',
             entrypoint: './src/directives/my-directive.ts',
           },
         ],
       }),
     ],
   });

   Tip

   Don’t worry about adding as many directives as you want, only the used directives will be loaded!

Use

Add the directive as attribute of the component to hydrate:

<MyComponent client:on="click; my-directive options" />

For combining directives, just separate them by ;. If a directive has options, just separate them from the directive name by spaces.

The options type is string and parsing them is delegated to each directive.

Example.astro

---
import Square from '@/libs/examples/Square.svelte';

interface Props {
  id: string;
}

const { id } = Astro.props;
---
<Square {id} text="Click me!" client:on="click; timer 3000" />

Square.svelte

<script lang="ts">
import { notifyHydration } from '@/libs/examples/hydration';
import { onMount } from 'svelte';

export let id: string;
export let text: string;

let hydrated = false;

onMount(() => {
  hydrated = true;
  notifyHydration(id);
});
</script>

<button
  type="button"
  class="square"
  class:square--hydrated={hydrated}
  on:click={() => text = 'Clicked!'}>
  {text}
</button>

<style lang="scss">
  @use './Square.scss';
</style>

Preview Static

Click me!