astro-ripple

Astro integration for RippleTS.

Experimental: Ripple itself is not stable yet, and this Astro integration is also experimental and may have edge cases. It was put together to make Ripple components work in Astro.

Compatibility: supports Astro 5.x and Astro 6 beta.

Installation

1. Install dependencies:

pnpm add astro-ripple ripple

2. Register the integration in your astro.config.mjs:

import { defineConfig } from 'astro/config';
import ripple from 'astro-ripple';

export default defineConfig({
  integrations: [ripple()],
});

2.5. if editor complains about invalid JSX add this to tsconfig.json

  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "ripple",
    "plugins": [
      { "name": "@ripple-ts/typescript-plugin" }
    ]
  },

3. Build to verify SSR + hydration wiring:

pnpm astro build

Usage

// astro.config.mjs
import { defineConfig } from 'astro/config';
import ripple from 'astro-ripple';

export default defineConfig({
  integrations: [ripple()],
});

By default, Ripple compiler HMR is disabled in this integration to avoid Astro island runtime crashes during hot updates.
You can opt in if you want to experiment with it:

export default defineConfig({
  integrations: [ripple({ compiler: { hmr: true } })],
});

// src/components/Hello.ripple
export default component Hello({ name }) {
  <h1>{`Hello ${name}`}</h1>
}

---
import Hello from '../components/Hello.ripple';
---

<Hello name="Ripple" />
<Hello name="Hydrated" client:load />

What works

• Server-side rendering for .ripple components.
• Hydration through Astro client directives (client:load, client:idle, client:visible, client:only).
• Children composition from Astro to Ripple:
  • Default children map to Ripple children props.

Current limitation

• I didn't test out everything