RippleTS Skill

Documentation Links

• AI/LLM Documentation: https://www.ripple-ts.com/llms.txt (comprehensive reference, read this)
• Official Docs: https://www.ripple-ts.com/docs
• GitHub: https://github.com/Ripple-TS/ripple

Key Concepts for LLMs

File Extension

.ripple

Component Definition

component

component Button(props: { text: string, onClick: () => void }) {
  <button onClick={props.onClick}>
    {props.text}
  </button>
}

CRITICAL RULES

1. Text Must Be in Expressions: Unlike HTML/JSX, raw text is NOT allowed. Always wrap text in curly braces:
   • ❌

     <div>Hello</div>

   • ✅

     <div>{"Hello"}</div>

2. Templates Only Inside Components: JSX-like elements can ONLY exist inside

   component

   function bodies, not in regular functions or variables.

Reactivity

track()

@

import { track } from 'ripple';

export component Counter() {
  let count = track(0);
  
  <div>
    <p>{"Count: "}{@count}</p>
    <button onClick={() => @count++}>{"Increment"}</button>
  </div>
}

Reactive Collections

• Arrays:

  #[1, 2, 3]

  or

  new TrackedArray(1, 2, 3)

• Objects:

  #{a: 1, b: 2}

  or

  new TrackedObject({a: 1})

Control Flow

component App(props: { items: string[] }) {
  <div>
    if (props.items.length > 0) {
      <ul>
        for (const item of props.items; index i) {
          <li>{item}</li>
        }
      </ul>
    } else {
      <p>{"No items"}</p>
    }
  </div>
}

Scoped CSS

<style>

component StyledComponent() {
  <div class="container">
    <h1>{"Styled Content"}</h1>
  </div>
  <style>
    .container {
      background: blue;
      padding: 1rem;
    }
  </style>
}

Dynamic Classes

let includeBaz = track(true);
<div class={{ foo: true, bar: false, baz: @includeBaz }}></div>

Installation & Setup

# Create new project from template
npx degit Ripple-TS/ripple/templates/basic my-app
cd my-app
npm i && npm run dev

# Or install in existing project
npm install ripple
npm install --save-dev '@ripple-ts/vite-plugin'

VSCode Extension

• Name: "Ripple for VS Code"
• ID:

  Ripple-TS.ripple-ts-vscode-plugin

React Compatibility

<tsx:react>

@ripple-ts/compat-react

mount()

Best Practices

1. Use

   track()

   for reactive state
2. Wrap all text content in expressions

   {}

3. Use scoped

   <style>

   elements for component styling
4. Use

   effect()

   for side effects, not direct reactive access
5. Keep components focused with TypeScript interfaces for props

Limitations

• Currently SPA-only (SSR coming soon)
• No hydration support yet
• Tracked objects cannot be created at module/global scope