### Install Ripple TS using create-ripple CLI

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/quick-start.md

Installs Ripple TS using the experimental create-ripple command-line interface. This is the quickest way to start a new Ripple TS project.

```bash
npm create ripple
```

--------------------------------

### Quick Start: Ripple TS CLI Installation

Source: https://github.com/ripple-ts/ripple/blob/main/README.md

Installs Ripple TS using the official CLI, navigates into the project directory, installs dependencies, and starts the development server. This is the recommended method for new projects.

```bash
npx create-ripple
cd my-app
npm install && npm run dev
```

--------------------------------

### Clone Basic Ripple TS Template and Run

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/quick-start.md

Clones the basic Vite-based template for Ripple TS, installs dependencies, and starts the development server. Requires Node.js and npm.

```bash
npx degit Ripple-TS/ripple/templates/basic ripple-app
cd ripple-app
npm i
npm run dev
```

--------------------------------

### Quick Start: Ripple TS Template Installation

Source: https://github.com/ripple-ts/ripple/blob/main/README.md

Initializes a new Ripple TS project using a 'degit' template, moves into the project directory, installs dependencies, and starts the development server. Useful for quickly bootstrapping a project with a pre-defined structure.

```bash
npx degit Ripple-TS/ripple/templates/basic my-app
cd my-app
npm install && npm run dev
```

--------------------------------

### Install Ripple TS Language Server Globally

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/quick-start.md

Installs the Ripple TS language server globally, enabling language features like diagnostics and autocompletion in editors that support language servers.

```bash
npm install -g '@ripple-ts/language-server'
```

--------------------------------

### Install Ripple TS Framework

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Instructions for setting up a new project with the Ripple TS basic template or installing Ripple in an existing project, including Vite integration.

```bash
npx degit Ripple-TS/ripple/templates/basic my-app
cd my-app
npm i && npm run dev

npm install ripple
npm install --save-dev '@ripple-ts/vite-plugin'
```

--------------------------------

### Start Development Server with npm/pnpm/yarn

Source: https://github.com/ripple-ts/ripple/blob/main/templates/basic/README.md

Starts the development server for the Ripple Basic Template, allowing for live-reloading and development workflows.

```bash
npm run dev
```

--------------------------------

### Install Dependencies with npm/pnpm/yarn

Source: https://github.com/ripple-ts/ripple/blob/main/templates/basic/README.md

Installs project dependencies using a package manager. This is the first step in setting up the Ripple Basic Template.

```bash
npm install # or pnpm or yarn
```

--------------------------------

### Run Ripple Language Server Standalone (Bash)

Source: https://github.com/ripple-ts/ripple/blob/main/packages/language-server/README.md

Starts the Ripple Language Server using standard input/output for communication. This command is used after global installation or when integrating with editors that require direct server execution.

```bash
ripple-language-server --stdio
```

--------------------------------

### Install @ripple-ts/eslint-parser and ripple

Source: https://github.com/ripple-ts/ripple/blob/main/packages/eslint-parser/README.md

Installs the ESLint parser for Ripple files and the Ripple framework as development dependencies. This setup is required before using the parser in your ESLint configuration.

```bash
pnpm add --save-dev '@ripple-ts/eslint-parser' ripple
# or
npm install --save-dev '@ripple-ts/eslint-parser' ripple
# or
yarn add --dev '@ripple-ts/eslint-parser' ripple
```

--------------------------------

### Install and Run Ripple TS CLI

Source: https://github.com/ripple-ts/ripple/blob/main/packages/cli/README.md

Demonstrates how to execute the Ripple TS CLI directly using npx without prior installation. This command is typically used to run specific CLI commands like 'create'.

```bash
npx @ripple-ts/cli <command>
```

--------------------------------

### Mount Ripple App with React Compatibility (TypeScript)

Source: https://github.com/ripple-ts/ripple/blob/main/playground/index.html

Initializes and mounts the main Ripple application (`App`) into the DOM element with the ID 'root'. It configures React compatibility using `createReactCompat` from '@ripple-ts/compat-react'. This setup is typical for integrating Ripple with existing React projects.

```typescript
import { mount } from 'ripple';
import { App } from '/src/App.ripple';
import { createReactCompat } from '@ripple-ts/compat-react';

mount(App, {
  target: document.getElementById('root'),
  compat: {
    react: createReactCompat(),
  },
});
```

--------------------------------

### Quick Start: Add Ripple TS to Existing Project

Source: https://github.com/ripple-ts/ripple/blob/main/README.md

Installs the Ripple TS framework and its Vite plugin into an existing project. This allows integrating Ripple TS features into a project that might be using other technologies or is already set up.

```bash
npm install ripple @ripple-ts/vite-plugin
```

--------------------------------

### Install @ripple-ts/language-server Globally (Bash)

Source: https://github.com/ripple-ts/ripple/blob/main/packages/language-server/README.md

Installs the Ripple Language Server globally using npm, making it available for command-line usage or editor integration. This is a prerequisite for standalone usage and some editor configurations.

```bash
npm install -g @ripple-ts/language-server
```

--------------------------------

### Install Ripple Plugin with lazy.nvim

Source: https://github.com/ripple-ts/ripple/blob/main/packages/nvim-plugin/README.md

This Lua code snippet demonstrates how to install the Ripple Neovim plugin using the lazy.nvim package manager. It configures Neovim to recognize the plugin and its necessary components.

```lua
{
  "Ripple-TS/ripple",
  config = function(plugin)
    vim.opt.rtp:append(plugin.dir .. "/packages/nvim-plugin")
    require("ripple").setup(plugin)
  end
}
```

--------------------------------

### Configure Ripple TS Language Server in Sublime Text

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/quick-start.md

Configuration for Sublime Text to enable the Ripple TS language server, providing syntax highlighting, diagnostics, and autocompletion for .ripple files.

```json
{
	"clients": {
		"Ripple": {
			"enabled": true,
			"command": ["'@ripple-ts/language-server'", "--stdio"],
			"selector": "source.ripple"
		}
	}
}
```

--------------------------------

### Install Ripple React Compatibility

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Installs the necessary package to enable React compatibility within Ripple.ts projects. This is a prerequisite for using React components inside Ripple or Ripple components inside React.

```bash
npm install @ripple-ts/compat-react
```

--------------------------------

### Install @ripple-ts/eslint-plugin

Source: https://github.com/ripple-ts/ripple/blob/main/packages/eslint-plugin/README.md

Installs the Ripple.js ESLint plugin using npm, yarn, or pnpm. This is the first step to enabling linting for Ripple applications.

```bash
npm install --save-dev '@ripple-ts/eslint-plugin'
# or
yarn add --dev '@ripple-ts/eslint-plugin'
# or
pnpm add --save-dev '@ripple-ts/eslint-plugin'
```

--------------------------------

### Create Ripple Application with CLI

Source: https://github.com/ripple-ts/ripple/blob/main/packages/cli/README.md

Shows how to create a new Ripple application using the 'create' command of the @ripple-ts/cli. It covers interactive mode and provides examples with various arguments like project name, package manager, template, and options to skip prompts or Git initialization.

```bash
npx @ripple-ts/cli create
npx @ripple-ts/cli create my-app --yes --no-git
npx @ripple-ts/cli create --package-manager yarn --template basic
npx @ripple-ts/cli create -y -p pnpm --template basic
```

--------------------------------

### Run Ripple Language Server via npx (Bash)

Source: https://github.com/ripple-ts/ripple/blob/main/packages/language-server/README.md

Executes the Ripple Language Server without global installation using `npx`. This is useful for testing or temporary usage, allowing the server to be run directly from its package.

```bash
npx @ripple-ts/language-server --stdio
```

--------------------------------

### Configure Vite Plugin for Ripple TS

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

This snippet shows how to integrate the Ripple TS Vite plugin into your vite.config.js file. Ensure you have '@ripple-ts/vite-plugin' installed as a dependency.

```typescript
import { defineConfig } from 'vite';
import ripple from '@ripple-ts/vite-plugin';

export default defineConfig({
  plugins: [ripple()]
});
```

--------------------------------

### Function Declarations in Ripple TS

Source: https://github.com/ripple-ts/ripple/blob/main/packages/tree-sitter/test/corpus/javascript.txt

Provides examples of standard and asynchronous function declarations in TypeScript. Demonstrates parameter handling and return statements, including async/await usage.

```typescript
function add(a, b) {
  return a + b;
}

async function fetchData() {
  return await fetch('/api');
}
```

--------------------------------

### Configure Vite Plugin for Ripple TS

Source: https://context7.com/ripple-ts/ripple/llms.txt

Details the configuration of the Ripple Vite plugin for `.ripple` file compilation, automatic CSS extraction, and Ripple package detection. It covers basic setup and advanced options like excluding external modules and configuring build outputs.

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import { ripple } from '@ripple-ts/vite-plugin';

export default defineConfig({
  plugins: [
    ripple({
      // Disable automatic scanning of node_modules for Ripple packages
      // Default: false (scanning enabled)
      excludeRippleExternalModules: false
    })
  ],

  server: {
    port: 3000,
    host: true
  },

  build: {
    target: 'esnext',
    minify: 'terser',
    sourcemap: true
  },

  // Ripple packages are automatically excluded from optimization
  // Manual configuration:
  optimizeDeps: {
    exclude: ['ripple', '@my-org/ripple-components']
  }
});

```

```javascript
// Advanced configuration with multiple entry points
import { defineConfig } from 'vite';
import { ripple } from '@ripple-ts/vite-plugin';
import { resolve } from 'path';

export default defineConfig({
  plugins: [ripple()],

  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'admin/index.html')
      },
      output: {
        manualChunks: {
          'ripple-runtime': ['ripple']
        }
      }
    }
  },

  resolve: {
    alias: {
      '@components': resolve(__dirname, 'src/components'),
      '@utils': resolve(__dirname, 'src/utils')
    }
  }
});

```

--------------------------------

### Manage State with Context in Ripple.js

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Illustrates how to use the `Context` class to share state across the component tree. It covers creating contexts, setting and getting values, and how child components can update context values affecting only their descendants.

```ripple
import { track, Context } from 'ripple'

// create context with an empty object
const context  = new Context({});
const context2 = new Context();

export component App() {
  // get reference to the object
  const obj = context.get();
  // set your reactive value
  obj.count = track(0);

  // create another tracked variable
  const count2 = track(0);
  // context2 now contains a trackrf variable
  context2.set(count2);

  <button onClick={() => { obj.@count++; @count2++ }}>
    {'Click Me'}
  </button>

  // context's reactive property count gets updated
  <pre>{'Context: '}{context.get().@count}</pre>
  <pre>{'Context2: '}{@count2}</pre>
}
```

```ripple
import { Context } from 'ripple';

const MyContext = new Context(null);

component Child() {
  // Context is read in the Child component
  const value = MyContext.get();

  // value is "Hello from context!"
  console.log(value);
}

component Parent() {
  const value = MyContext.get();

  // Context is read in the Parent component, but hasn't yet
  // been set, so we fallback to the initial context value.
  // So the value is `null`
  console.log(value);

  // Context is set in the Parent component
  MyContext.set("Hello from context!");

  <Child />
}
```

--------------------------------

### Ripple Template Lexical Scoping Example

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Demonstrates Ripple's unique feature where template syntax acts as a lexical scope, allowing direct declaration of variables, function calls, conditional logic, and debugger statements within JSX elements.

```ripple
component TemplateScope() {
  <div>
    // Variable declarations inside templates
    const message = "Hello from template scope";
    let count = 42;

    // Function calls and expressions
    console.log("This runs during render");

    // Conditional logic
    const isEven = count % 2 === 0;

    <h1>{message}</h1>
    <p>{"Count is: "}{count}</p>

    if (isEven) {
      <span>{"Count is even"}</span>
    }

    // Nested scopes work too
    <section>
      const sectionData = "Nested scope variable";
      <p>{sectionData}</p>
    </section>

    // You can even put debugger statements
    debugger;
  </div>
}
```

--------------------------------

### Implement conditional rendering and list iteration with Control Flow

Source: https://context7.com/ripple-ts/ripple/llms.txt

Showcases native control flow syntax in Ripple TS for dynamic UI updates. It includes examples of 'if/else if/else' for conditional rendering based on application state (loading, error) and 'for' loops for iterating over lists with automatic keying for efficient updates. State management uses 'track' from the 'ripple' library.

```typescript
import { track } from 'ripple';

export component Dashboard() {
  let loading = track(true);
  let error = track(null);
  let view = track('grid');

  const items = #[
    { id: 1, name: 'Item 1', price: 29.99, inStock: true },
    { id: 2, name: 'Item 2', price: 49.99, inStock: false },
    { id: 3, name: 'Item 3', price: 19.99, inStock: true }
  ];

  let searchTerm = track('');

  <div>
    {/* Conditional rendering */}
    if (@loading) {
      <div class="spinner">{"Loading..."}</div>
    } else if (@error) {
      <div class="error">
        <h3>{"Error occurred"}</h3>
        <p>{@error}</p>
        <button onClick={() => { @error = null; @loading = true; }}>
          {"Retry"}
        </button>
      </div>
    } else {
      <div class="content">
        <input
          value={@searchTerm}
          onInput={(e) => @searchTerm = e.target.value}
          placeholder="Search items..."
        />

        {/* View toggle */}
        if (@view === 'grid') {
          <div class="grid">
            for (const item of items; index i; key item.id) {
              if (item.name.toLowerCase().includes(@searchTerm.toLowerCase())) {
                <div class="card">
                  <h3>{item.name}</h3>
                  <p>{"$ "}{item.price}</p>
                  <p>{"Index: "}{i}</p>
                  if (item.inStock) {
                    <span class="badge">{"In Stock"}</span>
                  } else {
                    <span class="badge out">{"Out of Stock"}</span>
                  }
                </div>
              }
            }
          </div>
        } else {
          <ul class="list">
            for (const item of items; key item.id) {
              <li>{item.name}{" - $"}{item.price}</li>
            }
          </ul>
        }

        <button onClick={() => @view = @view === 'grid' ? 'list' : 'grid'}>
          {"Toggle View"}
        </button>
      </div>
    }
  </div>
}

```

--------------------------------

### Create Versatile Card Component with Header/Footer in Ripple

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/guide/components.md

A practical example of a Ripple component ('Card') that accepts optional Header and Footer children via props, alongside the main content. This pattern is analogous to slots, render props, or snippets in other frameworks.

```ripple
component Card({ children, Header, Footer }) {
	<fieldset>
		<Header />
		<hr />
		<children />
		<hr />
		<Footer />
	</fieldset>
}

component CustomHeader() {
	<h1>{'Card Title'}</h1>
}

export component App() {
	<Card Header={CustomHeader}> // <- Header passed in as a prop
		<p>{'Card content here'}</p>
		component Footer() {     // <- Footer passed in as a inline component
			<button>{'Cancel'}</button>
			<button>{'OK'}</button>
		}
	</Card>
}
```

--------------------------------

### Use TrackedSet in Ripple

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Shows how to use TrackedSet, a reactive Set implementation. The 'size' property and 'has' method are reactive, updating the UI when the set's contents change. This example demonstrates adding elements and displaying the set's size and membership.

```ripple
import { TrackedSet } from 'ripple';

component SetExample() {
  const mySet = new TrackedSet([1, 2, 3]);

  <div>
    <p>{"Size: "}{mySet.size}</p>  // Reactive size
    <p>{"Has 2: "}{mySet.has(2)}</p>
    <button onClick={() => mySet.add(4)}>{"Add 4"}</button>
  </div>
}
```

--------------------------------

### Prevent @ introspection in TypeScript/JavaScript modules (ripple/no-introspect-in-modules)

Source: https://github.com/ripple-ts/ripple/blob/main/packages/eslint-plugin/README.md

This rule prohibits the use of the `@` introspection operator in `.ts`/`.js` files, recommending `get()` and `set()` instead. It provides examples of incorrect usage with `@` and correct usage with `get()` and `derived()`.

```typescript
// Incorrect:
// count.ts
export function useCount() {
  const count = track(1);
  effect(() => {
    console.log(@count); // Error: Cannot use @ in TypeScript modules
  });
  return { count };
}

// Correct:
// count.ts
import { get, set } from 'ripple';

export function useCount() {
  const count = track(1);

  // Use get() to read tracked values
  const double = derived(() => get(count) * 2);

  effect(() => {
    console.log('count is', get(count));
  });

  return { count, double };
}

// Note: The @ operator is only valid in .ripple component files. In TypeScript modules, use get() to read values and set() to update them.
```

--------------------------------

### Ripple.ts Project Creation with CLI Tool

Source: https://context7.com/ripple-ts/ripple/llms.txt

Provides instructions on using the `create-ripple` command-line interface to scaffold new Ripple projects. It covers interactive mode, specifying project name, template, package manager, and Git initialization. Also includes commands for building and previewing the project.

```bash
# Interactive mode (recommended)
npx create-ripple
# Prompts for:
# - Project name
# - Template selection (basic, advanced, etc.)
# - Package manager (npm, yarn, pnpm, bun)
# - Git initialization

# With project name
npx create-ripple my-app

# With all options
npx create-ripple my-app --template basic --package-manager pnpm --no-git

# Skip all prompts (use defaults)
npx create-ripple my-app --yes

# Using specific template
npx create-ripple my-app -t basic
npx create-ripple my-app --template advanced

# Specify package manager
npx create-ripple my-app -p pnpm
npx create-ripple my-app --package-manager bun

# After creation
cd my-app
npm install
npm run dev

# Build for production
npm run build
npm run preview

```

```bash
# Alternative: Using degit with template
npx degit Ripple-TS/ripple/templates/basic my-app
cd my-app
npm install && npm run dev

# Add to existing project
npm install ripple @ripple-ts/vite-plugin
npm install -D @ripple-ts/eslint-plugin @ripple-ts/prettier-plugin

```

--------------------------------

### Mount Application in Ripple.js

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Demonstrates how to mount a root component to a target DOM element using the `mount` API. This is the entry point for initializing a Ripple application.

```typescript
mount(App, {
  props: { title: 'Hello world!' },
  target: document.getElementById('root')
});
```

--------------------------------

### Build for Production with npm/pnpm/yarn

Source: https://github.com/ripple-ts/ripple/blob/main/templates/basic/README.md

Builds the Ripple Basic Template application for production deployment. This command optimizes the application for performance and size.

```bash
npm run build
```

--------------------------------

### Format Code with Prettier

Source: https://github.com/ripple-ts/ripple/blob/main/templates/basic/README.md

Formats all project files according to the Prettier configuration. This ensures consistent code style across the project.

```bash
npm run format
```

--------------------------------

### Customize Tracked Value Access with get/set in Ripple Component

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/guide/reactivity.md

Demonstrates using optional `get` and `set` functions with `track` within a Ripple component. The `get` function customizes reading, and the `set` function customizes writing, allowing for logging, validation, or transformation. 'ripple' is the dependency.

```ripple
import { track } from 'ripple';

export component App() {
  let count = track(0,
    (current) => {
      console.log(current);
      return current;
    },
    (next, prev) => {
      console.log(prev);
      if (typeof next === 'string') {
        next = Number(next);
      }

      return next;
    }
  );
}
```

--------------------------------

### For Loops with Keys in Ripple.js

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Demonstrates how to use for loops with keys in Ripple.js components for efficient list rendering. It explains key usage guidelines for arrays with objects and plain objects.

```ripple
component ListView({ title, items }) {
  <h2>{title}</h2>
  <ul>
    for (const item of items; index i; key item.id) {
      <li>{item.text}{' at index '}{i}</li>
    }
  </ul>
}
```

--------------------------------

### ESLint Configuration for Ripple.ts and TypeScript

Source: https://context7.com/ripple-ts/ripple/llms.txt

Demonstrates how to configure ESLint to support Ripple syntax (`.ripple` files) and TypeScript (`.ts`, `.tsx` files). It involves importing the `@ripple-ts/eslint-plugin` and `@ripple-ts/eslint-parser`, and configuring specific rules for Ripple and general TypeScript parsing.

```javascript
// eslint.config.js
import ripplePlugin from '@ripple-ts/eslint-plugin';
import rippleParser from '@ripple-ts/eslint-parser';
import tsParser from '@typescript-eslint/parser';

export default [
  {
    files: ['**/*.ripple'],
    languageOptions: {
      parser: rippleParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
      }
    },
    plugins: {
      ripple: ripplePlugin
    },
    rules: {
      // Ripple-specific rules
      'ripple/no-unused-vars': 'error',
      'ripple/valid-track-usage': 'error'
    }
  },
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsParser
    }
  }
];

```

--------------------------------

### Class Declarations in Ripple TS

Source: https://github.com/ripple-ts/ripple/blob/main/packages/tree-sitter/test/corpus/javascript.txt

Demonstrates the syntax for declaring classes in TypeScript, including defining properties and methods. Shows an example of a 'Counter' class with a state property and an increment method.

```typescript
class Counter {
  count = 0;
  
  increment() {
    this.count++;
  }
}
```

--------------------------------

### Variable Declarations in Ripple TS

Source: https://github.com/ripple-ts/ripple/blob/main/packages/tree-sitter/test/corpus/javascript.txt

Shows examples of declaring variables using 'let', 'const', and 'var' in TypeScript. Includes initializations with different data types like numbers and strings.

```typescript
let count = 0;
const name = "Ripple";
var value;
```

--------------------------------

### Mount Ripple Application using JS

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/guide/application.md

Mounts the root Ripple component to a specified DOM element. It imports the 'mount' function and the 'App' component, then renders the component into the element with the ID 'app'.

```javascript
import { mount } from 'ripple';
// @ts-expect-error: known issue, we're working on it
import { App } from './App.ripple';

mount(App, {
	target: document.getElementById('app')!,
});
```

--------------------------------

### Unbox Expression for Event Handlers

Source: https://github.com/ripple-ts/ripple/blob/main/packages/tree-sitter/test/corpus/reactivity.txt

Explains how the unbox expression (`@`) can be used within event handlers, such as `onClick`, to directly modify reactive state variables. This example shows incrementing a counter.

```typescript
component App() {
  let count = track(0);
  <button onClick={() => @count++}>{'+'}</button>
}
```

--------------------------------

### Configure React Compatibility Layer in Ripple

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Shows how to set up the React compatibility layer when mounting a Ripple application. This involves importing `mount` from Ripple and `createReactCompat` from `@ripple-ts/compat-react`, then passing the compat configuration to the `mount` function.

```typescript
// main.ts
import { mount } from 'ripple';
import { createReactCompat } from '@ripple-ts/compat-react';
import { App } from './App.ripple';

mount(App, {
  target: document.getElementById('app')!,
  compat: {
    react: createReactCompat(),
  },
});
```

--------------------------------

### Arrow Functions in Ripple TS

Source: https://github.com/ripple-ts/ripple/blob/main/packages/tree-sitter/test/corpus/javascript.txt

Examples of defining arrow functions in TypeScript with varying parameter counts and body structures. Includes concise body syntax and block body syntax with console logging.

```typescript
const add = (a, b) => a + b;
const increment = x => x + 1;
const log = () => { console.log('test'); };
```

--------------------------------

### Mounting a Ripple TS Application

Source: https://github.com/ripple-ts/ripple/blob/main/README.md

Demonstrates how to mount a Ripple TS application into the DOM. It imports the 'mount' function and the root component, then calls 'mount' with the component and target element. Requires the 'ripple' package.

```typescript
import { mount } from 'ripple';
import { App } from './App.ripple';

mount(App, {
  props: { title: 'Hello world!' },
  target: document.getElementById('root'),
});
```

--------------------------------

### Use onInput instead of onChange for form inputs (ripple/prefer-oninput)

Source: https://github.com/ripple-ts/ripple/blob/main/packages/eslint-plugin/README.md

This rule recommends using `onInput` over `onChange` for form inputs in Ripple.js, as Ripple lacks synthetic events and `onInput` is the appropriate handler. It provides examples of both incorrect and correct event handler usage.

```jsx
// Incorrect:
<input onChange={handleChange} />

// Correct:
<input onInput={handleInput} />
```

--------------------------------

### Configure Ripple Tree-sitter Parser

Source: https://github.com/ripple-ts/ripple/blob/main/packages/nvim-plugin/README.md

This Lua code snippet shows how to set up the Ripple language parser with nvim-treesitter. It registers the parser and specifies the location of the bundled grammar source files within the Ripple repository.

```lua
require("ripple").setup()
```

--------------------------------

### Check Code Formatting with Prettier

Source: https://github.com/ripple-ts/ripple/blob/main/templates/basic/README.md

Checks if all project files are formatted correctly according to the Prettier configuration without modifying them. This is useful for CI/CD pipelines.

```bash
npm run format:check
```

--------------------------------

### Template String Examples in JavaScript

Source: https://github.com/ripple-ts/ripple/blob/main/packages/tree-sitter/test/corpus/javascript.txt

Demonstrates the usage of template strings in JavaScript for creating interpolated and multi-line strings. Template strings allow embedding expressions within strings using ${expression} and can span multiple lines without special characters.

```javascript
const msg = `Hello ${name}!`;
const multiline = `
  Line 1
  Line 2
`;
```

--------------------------------

### Get DOM Element Reference with Ripple.ts bindNode

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/guide/bindings.md

Provides a convenient way to obtain a direct reference to a DOM element. This binding is useful for imperative DOM manipulations like focusing elements or directly accessing their properties. It requires a tracked variable to store the element reference.

```ripple
import { track, bindNode } from 'ripple';

export component App() {
  let divElement = track();

  const handleFocus = () => {
    if (@divElement) {
      @divElement.focus();
      @divElement.style.backgroundColor = 'lightblue';
    }
  };

  <div>
    <div
      {ref bindNode(divElement)}
      tabIndex={0}
      style={{
        border: '2px solid navy',
        padding: '20px',
        outline: 'none'
      }}
    >
      {'Click the button to focus this div'}
    </div>
    <button onClick={handleFocus}>{'Focus Div'}</button>
  </div>
}
```

--------------------------------

### Ripple Component with Reactive Counter

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/introduction.md

This snippet demonstrates a basic Ripple component that displays a counter. It uses the `track` function for reactivity and allows incrementing/decrementing the count via buttons. It also includes basic styling within the component.

```ripple
import { track } from 'ripple'

export component App() {
  <div class="container">
    <h1>{"Welcome to Ripple!"}</h1>

    <div>
      let count = track(0);

      <button onClick={() => @count--}>{ "-"}</button>
      <span class="count">{@count}</span>
      <button onClick={() => @count++}>{ "+"}</button>
    </div>
  </div>

  <style>
    .container {
      text-align: center;
      font-family: "Arial", sans-serif;
    }

    button {
      height: 2rem;
      width: 2rem;
      margin: 1rem;
    }
  </style>
}
```

--------------------------------

### Ripple Component Type Definition with TypeScript

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Provides an example of defining a Ripple component's props using TypeScript interfaces. This enhances type safety and provides better developer tooling for components, including specifying generic types for children.

```typescript
import type { Component } from 'ripple';

interface Props {
  value: string;
  label: string;
  children?: Component;
}

component MyComponent(props: Props) {
  // Component implementation
}
```

--------------------------------

### Direct Event Handling with `on` in Ripple.js

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Shows how to use the `on` function in Ripple.js for direct event handling on `window`, `document`, or other elements. This method ensures correct execution order and optimizes through event delegation.

```ripple
import { effect, on } from 'ripple';

export component App() {
  effect(() => {
    // on component mount
    const removeListener = on(window, 'resize', () => {
      console.log('Window resized!');
    });

    // return the removeListener when the component unmounts
    return removeListener;
  });
}
```

--------------------------------

### Define a Ripple Component

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/guide/syntax.md

Defines a basic Ripple component named 'Hello' using the 'component' keyword. It renders a 'Hello World!' span. Ripple components are statements, not expressions, hence no return statement is needed.

```ripple
component Hello() {
	<span>{'Hello World!'}</span>
}
```

--------------------------------

### Ripple TS Component with Children Prop

Source: https://github.com/ripple-ts/ripple/blob/main/packages/tree-sitter/test/corpus/components.txt

Demonstrates how to define a Card component in Ripple TS that accepts and renders children. The component uses destructuring to get the 'children' prop and renders it within a div with a 'card' class. This is useful for creating layout or wrapper components.

```typescript
component Card({ children }) {
  <div class="card">
    <children />
  </div>
}
```

--------------------------------

### Use TrackedDate in Ripple

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Illustrates how to use TrackedDate, a reactive Date object that extends the standard JavaScript Date. All getter and formatting methods are reactive, updating the UI when the date is modified. The example shows direct usage and reactive assignment of date properties.

```ripple
import { TrackedDate } from 'ripple';

const date = new TrackedDate(2026, 0, 1); // January 1, 2026
```

```ripple
import { TrackedDate, track } from 'ripple';

export component App() {
  const date = new TrackedDate(2025, 0, 1, 12, 0, 0);

  // direct usage
  <p>{"Direct usage: Current year is "}{date.getFullYear()}</p>
  <p>{"ISO String: "}{date.toISOString()}</p>

  // reactive assignment
  let year = track(() => date.getFullYear());
  let month = track(() => date.getMonth());
  <p>{"Assigned usage: Year "}{@year}{', Month '}{@month}</p>

  <button onClick={() => date.setFullYear(2027)}>{"Change to 2026"}</button>
  <button onClick={() => date.setMonth(11)}>{"Change to December"}</button>
}
```

--------------------------------

### Children Components Composition in Ripple.js

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Demonstrates component composition in Ripple.js using the `children` prop. This allows passing content and other components into a parent component.

```ripple
import type { Component } from 'ripple';

component Card(props: { children: Component }) {
  <div class="card">
    <children />
  </div>
}

// Usage
<Card>
  <p>{"Card content here"}</p>
</Card>
```

--------------------------------

### Use TrackedMap in Ripple

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Demonstrates the usage of TrackedMap, a reactive Map implementation. It supports standard Map methods and properties like 'has', 'delete', and 'set', which are reactive. The example shows direct usage and reactive assignment of map operations, updating the UI accordingly.

```ripple
import { TrackedMap, track } from 'ripple';

const map = new TrackedMap([[1,1], [2,2], [3,3], [4,4]]);
```

```ripple
import { TrackedMap, track } from 'ripple';

export component App() {
  const map = new TrackedMap([[1,1], [2,2], [3,3], [4,4]]);

  // direct usage
  <p>{"Direct usage: map has an item with key 2: "}{map.has(2)}</p>

  // reactive assignment
  let has = track(() => map.has(2));
  <p>{"Assigned usage: map has an item with key 2: "}{@has}</p>

  <button onClick={() => map.delete(2)}>{"Delete item with key 2"}</button>
  <button onClick={() => map.set(2, 2)}>{"Add key 2 with value 2"}</button>
}
```

--------------------------------

### Mount Ripple Application to DOM

Source: https://context7.com/ripple-ts/ripple/llms.txt

Initializes a Ripple application by mounting a root component to a specified DOM element. It returns a cleanup function to unmount the application. Supports optional props and React compatibility mode.

```typescript
import { mount } from 'ripple';
import { App } from './App.ripple';

// Basic mounting
const cleanup = mount(App, {
  target: document.getElementById('root'),
});

// With props
const cleanup = mount(App, {
  props: { title: 'Hello World', count: 0 },
  target: document.getElementById('root'),
});

// With React compatibility mode
const cleanup = mount(App, {
  target: document.getElementById('root'),
  compat: { react: true },
});

// Cleanup when needed
cleanup();
```

--------------------------------

### Prettier Configuration for Ripple.ts Syntax

Source: https://context7.com/ripple-ts/ripple/llms.txt

Shows the configuration for Prettier to format `.ripple` files. This involves adding the `@ripple-ts/prettier-plugin` and defining specific Prettier options for Ripple files, such as parser, tab width, use tabs, single quote, trailing comma, and bracket spacing.

```json
// .prettierrc
{
  "plugins": ["@ripple-ts/prettier-plugin"],
  "overrides": [
    {
      "files": "*.ripple",
      "options": {
        "parser": "ripple",
        "tabWidth": 2,
        "useTabs": true,
        "singleQuote": true,
        "trailingComma": "es5",
        "bracketSpacing": true
      }
    }
  ]
}

```

--------------------------------

### Using Function Factories for Ripple Refs with Reactive Properties

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/guide/dom-refs.md

This Ripple example illustrates using a function factory to define a ref. The factory (`fadeIn`) returns a function that captures the DOM element and can accept reactive properties like `ms`, allowing for dynamic ref behavior.

```ripple
import { fadeIn } from 'some-library';

export component App({ ms }) {
  <div {ref fadeIn({ ms })}>{"Hello world"}</div>
}
```

--------------------------------

### Package.json Scripts for Linting and Formatting

Source: https://context7.com/ripple-ts/ripple/llms.txt

Defines standard npm scripts in `package.json` for running ESLint to lint code (including Ripple and TypeScript files) and Prettier to format code. It includes commands for both applying fixes and checking for violations.

```json
{
  "scripts": {
    "lint": "eslint . --ext .ripple,.ts,.js",
    "lint:fix": "eslint . --ext .ripple,.ts,.js --fix",
    "format": "prettier --write \"**/*.{ripple,ts,js,json,md}\"",
    "format:check": "prettier --check \"**/*.{ripple,ts,js,json,md}\""
  }
}

```

--------------------------------

### Correct Void Element Self-Closing Syntax in Ripple

Source: https://github.com/ripple-ts/ripple/blob/main/website/docs/troubleshooting.md

This Ripple component example illustrates the proper use of JSX self-closing syntax for void elements (like input, img, hr, br) to avoid 'unexpected token }' errors. It contrasts valid self-closing tags with invalid non-closing tags.

```ripple
export component Bracey() {
	// ✔️ valid
	<input />
	<img />
	<hr />
	<br />

	// ❌ invalid
	// <input>
	// <img>
	// <hr>
	// <br>
}
```

--------------------------------

### Using Ripple Portal Component

Source: https://github.com/ripple-ts/ripple/blob/main/website/public/llms.txt

Explains the usage of Ripple's `Portal` component, which allows content to be 'teleported' to any location in the DOM tree, outside the normal component hierarchy. This is ideal for modals, tooltips, and notifications that need to break out of their parent's stacking context.

```ripple
import { Portal } from 'ripple';

export component App() {
  <div class="app">
    <h1>{'My App'}</h1>

    {/* This will render inside document.body, not inside the .app div */}
    <Portal target={document.body}>
      <div class="modal">
        <h2>{'I am rendered in document.body!'}</h2>
        <p>{'This content escapes the normal component tree.'}</p>
      </div>
    </Portal>
  </div>
}
```