### RippleJS For Loops

Source: https://context7_llms

Demonstrates the usage of for loops in RippleJS to iterate over arrays and render list items. Includes examples with and without an index.

```ripple
component List({ items }) {
  <ul>
    for (const item of items) {
      <li>{item.text}</li>
    }
  </ul>
}

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

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

### Direct Event Handling in RippleJS

Source: https://context7_llms

Demonstrates attaching events to window or document in RippleJS using the on function. The example listens for window resize events.

```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;
  });
}
```

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

### Children Components in RippleJS

Source: https://context7_llms

Demonstrates component composition using the children prop in RippleJS. The example shows how to create a Card component that wraps its children.

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

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

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

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

### Dynamic Inline Styles in RippleJS

Source: https://context7_llms

Illustrates dynamic inline styling in RippleJS using both string and object notation. The example shows how to apply styles based on reactive state.

```ripple
let color = track('red');

<div style={`color: ${@color}; font-weight: bold; background-color: gray`}></div>
<div style={{ color: @color, fontWeight: 'bold', 'background-color': 'gray' }}></div>

const style = {
  @color,
  fontWeight: 'bold',
  'background-color': 'gray',
};

// using object spread
<div style={{...style}}></div>

// using object directly
<div style={style}></div>
```

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

### Event Handling in RippleJS

Source: https://context7_llms

Shows how to handle events in RippleJS components. The example includes a button click and input change event, updating a tracked message.

```ripple
component EventExample() {
  let message = track("");

  <div>
    <button onClick={() => @message = "Clicked!"}>{"Click me"}</button>
    <input onInput={(e) => @message = e.target.value} />
    <p>{@message}</p>
  </div>
}
```

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

### Error Boundaries with Try-Catch in RippleJS

Source: https://context7_llms

Illustrates error handling in RippleJS using try-catch blocks. The example wraps a potentially failing component in a try-catch to gracefully handle errors.

```ripple
component ErrorBoundary() {
  <div>
    try {
      <ComponentThatMightFail />
    } catch (e) {
      <div>{"Error: "}{e.message}</div>
    }
  </div>
}
```

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

### Dynamic Classes in RippleJS

Source: https://context7_llms

Demonstrates dynamic class handling in RippleJS using objects and arrays. The example shows how to conditionally apply class names based on reactive state.

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

<div class={['foo', {baz: false}, 0 && 'bar', [true && 'bat'] ]}></div>
// becomes: class="foo bat"

let count = track(3);
<div class={['foo', {bar: @count > 2}, @count > 3 && 'bat']}></div>
// becomes: class="foo bar"
```

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

### Customize Tracked Value Access with Get/Set in RippleJS

Source: https://context7_llms

Shows how to provide custom 'get' and 'set' functions to the 'track' function for fine-grained control over how a tracked value is read and written. The 'get' function customizes reading, and the 'set' function customizes writing, allowing for validation or transformation. Dependencies: 'track'.

```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;
    }
  );
}
```

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

### Scoped CSS in RippleJS Components

Source: https://context7_llms

Shows how to use scoped CSS within RippleJS components. The example includes a styled component with a container and heading.

```ripple
component StyledComponent() {
  <div class="container">
    <h1>{"Styled Content"}</h1>
  </div>

  <style>
    .container {
      background: blue;
      padding: 1rem;
    }
    h1 {
      color: white;
      font-size: 2rem;
    }
  </style>
}
```

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

### Define Component and Context Types (TypeScript)

Source: https://context7_llms

Provides examples of defining types for components and contexts in Ripple.js using TypeScript. It shows how to specify props for a component and define a union type for a context.

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

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

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

type Theme = 'light' | 'dark';
const ThemeContext = new Context<Theme>('light');
```

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

### RippleJS Control Flow with Switch Statements

Source: https://context7_llms

Illustrates the use of switch statements in RippleJS for conditional rendering based on the value of an expression. The example demonstrates the mandatory `break` statements to prevent fall-through and shows how to use tracked variables within switch statements.

```ripple
component StatusIndicator({ status }) {
  // The switch statement evaluates the 'status' prop
  switch (status) {
    case 'loading':
      <p>{'Loading...'}</p>
      break; // break is mandatory
    case 'success':
      <p>{'Success!'}</p>
      break;
    case 'error':
      <p>{'Error!'}</p>
      break;
    default:
      <p>{'Unknown status'}</p>
      // No break needed for default
  }
}

import { track } from 'ripple';

component InteractiveStatus() {
  let status = track('loading'); // Reactive state

  <button onClick={() => @status = 'success'}>{"Set to Success"}</button>
  <button onClick={() => @status = 'error'}>{"Set to Error"}</button>

  // This switch block will update automatically when '@status' changes
  switch (@status) {
    case 'loading':
      <p>{'Status: Loading...'}</p>
      break;
    case 'success':
      <p>{'Status: Success!'}</p>
      break;
    case 'error':
      <p>{'Status: Error!'}</p>
      break;
    default:
      <p>{'Status: Unknown'}</p>
  }
}

// ❌ WRONG - Missing 'break' will cause a compilation error
switch (value) {
  case 1:
    <p>{'Case 1'}</p>
  case 2:
    <p>{'Case 2'}</p>
    break;
}
```

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

### Dynamic Elements in RippleJS

Source: https://context7_llms

Shows how to dynamically change HTML elements in RippleJS. The example toggles between a div and a span element when a button is clicked, demonstrating dynamic tag usage.

```ripple
export component App() {
  let tag = track('div');

  <@tag class="dynamic">{'Hello World'}</@tag>
  <button onClick={() => @tag = @tag === 'div' ? 'span' : 'div'}>{'Toggle Element'}</button>
}
```

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

### DOM References (Refs) in RippleJS

Source: https://context7_llms

Shows how to capture DOM element references in RippleJS using the ref syntax. The example includes both named and inline ref usage.

```ripple
export component App() {
  let div = track();

  const divRef = (node) => {
    @div = node;
    console.log("mounted", node);

    return () => {
      @div = undefined;
      console.log("unmounted", node);
    };
  };

  <div {ref divRef}>{"Hello world"}</div>
}
```

```ripple
<div {ref (node) => console.log(node)}>{"Content"}</div>
```

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

### For Loops with Key in RippleJS

Source: https://context7_llms

Demonstrates how to use for loops with keys in RippleJS components. Keys are essential for identifying elements in lists, especially with plain objects. The example shows looping through items with a key based on item.id.

```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>
}
```

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

### RippleJS Conditional Rendering with If Statements

Source: https://context7_llms

Shows the usage of if statements in RippleJS for conditional rendering of UI elements. The example utilizes a boolean variable `isVisible` to determine whether to display specific content.

```ripple
component Conditional({ isVisible }) {
  <div>
    if (isVisible) {
      <span>{"Visible content"}</span>
    } else {
      <span>{"Hidden state"}</span>
    }
  </div>
}
```

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

### Ripple - Templates Inside Component Bodies

Source: https://context7_llms

highlights the restriction that Ripple template syntax (JSX-like elements) can only exist inside `component` function bodies. The document provides examples of what is allowed and disallowed.

```ripple
// ❌ WRONG - Templates outside component
const element = <div>{"Hello"}</div>;  // Compilation error

function regularFunction() {
  return <span>{"Not allowed"}</span>;  // Compilation error
}

const myTemplate = (
  <div>{"Cannot assign JSX"}</div>  // Compilation error
);

// ✅ CORRECT - Templates only inside components
component MyComponent() {
  // Template syntax is valid here
  <div>{"Hello World"}</div>

  // You can have JavaScript code mixed with templates
  const message = "Dynamic content";
  console.log("This JavaScript works");

  <p>{message}</p>
}

// ✅ CORRECT - Helper functions return data, not templates
function getMessage() {
  return "Hello from function";  // Return data, not JSX
}

component App() {
  <div>{getMessage()}</p>
```

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

### Render Content Anywhere with Portal Component (Ripple)

Source: https://context7_llms

Demonstrates how to use the `Portal` component to render content outside the normal component hierarchy, useful for modals and tooltips. It targets `document.body` to achieve this.

```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>
}
```

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

### Create and Use TrackedSet in RippleJS

Source: https://context7_llms

Shows the creation of a TrackedSet and how its size and contents are reactive. Supports standard Set methods like add, delete, and has.

```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>
}
```

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

### Configure Vite for Ripple.js (TypeScript)

Source: https://context7_llms

Shows how to integrate the Ripple.js framework into a Vite project by adding the `vite-plugin-ripple` to the `vite.config.js` file.

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

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

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

### Create and Use TrackedMap in RippleJS

Source: https://context7_llms

Demonstrates creating a TrackedMap and using its reactive methods like has, delete, and set. Reactive assignments using `track` are also shown.

```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>
}
```

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

### Create and Use TrackedObject in RippleJS

Source: https://context7_llms

Illustrates creating a TrackedObject using syntactic sugar or constructors and how its root-level properties are reactive. Supports standard Object properties and methods.

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

// using syntactic sugar `#`
const arr = #{a: 1, b: 2, c: 3};

// using the new constructor
const arr = new TrackedObject({a: 1, b: 2, c: 3});
```

```ripple
export component App() {
  const obj = #{a: 0}

  obj.a = 0;

  <pre>{'obj.a is: '}{obj.a}</pre>
  <pre>{'obj.b is: '}{obj.b}</pre>
  <button onClick={() => { obj.a++; obj.b = obj.b ?? 5; obj.b++; }}>{'Increment'}</button>
}
```

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

### Manage Reactivity with Untrack and Track (Ripple)

Source: https://context7_llms

Illustrates fine-grained reactivity in Ripple.js using `track` for reactive variables and `untrack` to prevent effects from re-running when dependencies are accessed within it. It shows how to create tracked variables and effects.

```ripple
import { untrack, track, effect } from 'ripple';

let count = track(0);
let double = track(() => @count * 2);
let quadruple = track(() => @double * 2);

effect(() => {
  // This effect will never fire again, as we've untracked the only dependency it has
  console.log(untrack(() => @quadruple));
})
```

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

### Ripple Component Definition

Source: https://context7_llms

Demonstrates how to define components in Ripple using the `component` keyword.  Components are not functions returning JSX, but rather blocks of code with a specific structure. Includes basic usage with props and event handling.

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

// Usage
export component App() {
  <Button text="Click me" onClick={() => console.log("Clicked!")} />
}
```

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

### RippleJS Dynamic Component Transport

Source: https://context7_llms

Demonstrates RippleJS's dynamic component support, allowing rendering of different components based on reactive state. Components are swapped at runtime using the `<@Component />` tag and tracked values, facilitating flexible and state-driven UIs.

```ripple
export component App() {
  let swapMe = track(() => Child1);

  <Child {swapMe} />

  <button onClick={() => @swapMe = @swapMe === Child1 ? Child2 : Child1}>{"Swap Component"}</button>
}

component Child({ swapMe }: {swapMe: Tracked<Component>}) {
  <@swapMe />
}

component Child1(props) {
  <pre>{'I am child 1'}</pre>
}

component Child2(props) {
  <pre>{'I am child 2'}</pre>
}
```

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

### Configure Prettier for Ripple.js (JavaScript)

Source: https://context7_llms

Demonstrates how to enable Prettier formatting for Ripple.js files by adding `prettier-plugin-ripple` to the `plugins` array in the `.prettierrc` configuration file.

```javascript
// .prettierrc
{
  "plugins": ["prettier-plugin-ripple"]
}
```

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

### Create and Use TrackedArray in RippleJS

Source: https://context7_llms

Demonstrates creating a TrackedArray using syntactic sugar or constructors and how its elements and length react to changes. Supports standard Array methods.

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

// using syntactic sugar `#`
const arr = #[1, 2, 3];

// using the new constructor
const arr = new TrackedArray(1, 2, 3);

// using static from method
const arr = TrackedArray.from([1, 2, 3]);

// using static of method
const arr = TrackedArray.of(1, 2, 3);
```

```ripple
export component App() {
  const items = new #[1, 2, 3];

  <div>
    <p>{"Length: "}{items.length}</p>  // Reactive length
    for (const item of items) {
      <div>{item}</div>
    }
    <button onClick={() => items.push(items.length + 1)}>{"Add"}</button>
  </div>
}
```

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

### Mount Ripple component with props

Source: https://context7_llms

Mounts a Ripple component to a DOM target with initial props. Requires a component and target element. The props object passes initial data to the component.

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

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

### Create and Use Reactive Variables with RippleJS

Source: https://context7_llms

Demonstrates creating a basic counter component with a reactive variable and a derived reactive value. It shows how to read tracked values using '@' and update them via an event handler. Dependencies: 'ripple'.

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

export component Counter() {
  let count = track(0);
  let double = track(() => @count * 2);  // Derived reactive value

  <div>
    <p>{"Count: "}{@count}</p>
    <p>{"Double: "}{@double}</p>
    <button onClick={() => @count++}>{"Increment"}</button>
  </div>
}
```

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

### RippleJS Core Functions

Source: https://context7_llms

Lists the core functions available in RippleJS including state management, effects, and context API.

```typescript
import {
  mount,           // Mount component to DOM
  track,           // Create reactive state
  untrack,         // Prevent reactivity tracking
  flushSync,       // Synchronous state updates
  effect,          // Side effects
  Context          // Context API
} from 'ripple';
```

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

### Create Chained Derived Reactive Values in RippleJS

Source: https://context7_llms

Illustrates the creation of multiple derived reactive values where each subsequent value depends on the previous one. This showcases a chain of reactivity. Dependencies: None explicitly shown, assumes 'track' is available.

```ripple
let count = track(0);
let double = track(() => @count * 2);
let quadruple = track(() => @double * 2);

console.log(@quadruple);
```

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

### Use Prop Shorthands in Templates (Ripple)

Source: https://context7_llms

Showcases concise ways to pass props in Ripple.js templates. It covers object spread for passing multiple properties and shorthand props where the variable name matches the prop name.

```ripple
// Object spread
<div {...properties}>{"Content"}</div>

// Shorthand props (when variable name matches prop name)
<div {onClick} {className}>{"Content"}</div>

// Equivalent to:
<div onClick={onClick} className={className}>{"Content"}</div>
```

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

### Create and Use TrackedDate in RippleJS

Source: https://context7_llms

Explains how to use TrackedDate, extending the JavaScript Date object, and how its getter and formatting methods are reactive. Reactive assignments are shown.

```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>
}
```

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

### Transport reactivity with Tracked objects

Source: https://context7_llms

Demonstrates how to transport reactivity across function boundaries using Tracked objects. This pattern allows reactivity to be maintained outside of components, enhancing expressivity and co-location.

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

function createDouble(count) {
  const double = track(() => @count * 2);

  effect(() => {
    console.log('Count:', @count)
  });

  return double;
}

export component App() {
  let count = track(0);

  const double = createDouble(count);

  <div>{'Double: ' + @double}</div>
  <button onClick={() => { @count++; }}>{'Increment'}</button>
}
```

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

### Create reactive effect with tracking

Source: https://context7_llms

Creates a reactive effect that responds to tracked variable changes. Uses the track function to make variables reactive and effect to respond to changes. The @ syntax dereferences tracked values.

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

export component App() {
  let count = track(0);

  effect(() => {
    console.log("Count changed:", @count);
  });

  <button onClick={() => @count++}>{"Increment"}</button>
}
```

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

### Create simple reactive array

Source: https://context7_llms

Creates a reactive array with tracked elements. Individual elements can be tracked while maintaining standard array operations. Reactive computations update when array elements change.

```ripple
let first = track(0);
let second = track(0);
const arr = [first, second];

const total = track(() => arr.reduce((a, b) => a + @b, 0));

console.log(@total);
```

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

### Manage context with reactive values

Source: https://context7_llms

Creates and manages context with reactive tracked values. Context allows sharing data through the component tree. Values can be read with .get() and set with .set(), but must be used within component context.

```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 - Template Lexical Scoping

Source: https://context7_llms

Illustrates Ripple's unique feature of template lexical scoping.  This allows variables, functions, expressions, and debugging statements to be directly included within template blocks, improving inline logic and debugging.

```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>
}
```

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

### Ripple - Text Content in Expressions

Source: https://context7_llms

Explains the requirement for all text content in Ripple to be wrapped in JavaScript expressions using curly braces `{}`. This is necessary for the parser to differentiate between code and literal strings.

```ripple
// ❌ WRONG - Raw text not allowed
<div>Hello World</div>
<p>This will cause a compilation error</p>

// ✅ CORRECT - Text in expressions
<div>{"Hello World"}</div>
<p>{"This works correctly"}</p>

// ✅ CORRECT - Variables and expressions
<div>{greeting}</div>
<p>{"Dynamic content: "}{value}</p>
```

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

### Render Raw HTML Safely with {html} Directive (Ripple)

Source: https://context7_llms

Explains how to render trusted HTML strings within Ripple.js templates using the `{html}` directive. By default, text nodes are escaped to prevent XSS attacks.

```ripple
export component App() {
	let source = `
<h1>My Blog Post</h1>
<p>Hi! I like JS and Ripple.</p>
`

	<article>
		{html source}
	</article>
}
```

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

### Pass data between components using context

Source: https://context7_llms

Shares data between parent and child components using context. Context values set in parent components are accessible to descendants. Child components see updated values, while ancestors retain original values.

```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 />
}
```

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

### Use tick() for post-update operations

Source: https://context7_llms

Uses tick() to execute code after reactive DOM updates are complete. Returns a Promise that resolves when all pending updates are applied. Useful for DOM manipulation that depends on rendered state.

```ripple
import { effect, track, tick } from 'ripple';

export component App() {
  let count = track(0);

  effect(() => {
    @count;

    if (@count === 0) {
      console.log('initial run, skipping');
      return;
    }

    tick().then(() => {
      console.log('after the update');
    });
  });

  <button onClick={() => @count++}>{'Increment'}</button>
}
```

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

### Untrack Dependencies within RippleJS Reactive Contexts

Source: https://context7_llms

Explains and demonstrates the use of 'untrack' to prevent a reactive value from being registered as a dependency within a reactive context like an 'effect'. This prevents the effect from re-running when the untracked value changes. Dependencies: 'effect', 'untrack'.

```ripple
let count = track(0);
let double = track(() => @count * 2);
let quadruple = track(() => @double * 2);

effect(() => {
  // This effect will never fire again, as we've untracked the only dependency it has
  console.log(untrack(() => @quadruple));
})
```

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

### Split props into tracked variables with trackSplit

Source: https://context7_llms

The trackSplit function splits component props into specified tracked variables and a rest object. It ensures that destructured read-only reactive props remain reactive. Dependencies include RippleJS and the track function.

```ripple
const [children, count, rest] = trackSplit(props, ['children', 'count']);
```

```ripple
import { track, trackSplit } from 'ripple';
import type { PropsWithChildren, Tracked } from 'ripple';

component Child(props: PropsWithChildren<{ count: Tracked<number>, className: string }>) {
  const [children, count, className, rest] = trackSplit(props, ['children', 'count', 'class']);

  <button class={@className} {...@rest}><@children /></button>
  <pre>{`Count is: ${@count}`}</pre>
  <button onClick={() => @count++}>{'Increment Count'}</button>
}
```

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

### Access Reactive Properties within Objects in RippleJS

Source: https://context7_llms

Shows how to store a tracked value as a property within a JavaScript object and access/modify it using the '@' operator. This enables reactivity for object properties. Dependencies: None explicitly shown, assumes 'track' is available.

```ripple
let counter = { current: track(0) };
counter.@current++;  // Triggers reactivity
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.