Components

Lifecycle

Glossary

• Pure: The idea that a function should produce no side-effects.
• Side-effect: A permanent, externally observable state change.

Ripple's component lifecycle is akin to Vue/Svelte/Solid. The root scope of your component only runs once, akin to the "setup" scope in Vue/Svelte/Solid. However, all child scopes such as nested template scopes, and blocks like if and for, may rerun if they have reactive variables within them. Therefore, it is advisable to only write pure code within your components, and place side-effects within effect() to ensure they only run when intended.

Children

To pass elements to be nested within a component, simply nest it as you would writing HTML. Ripple will make the content available as the children prop, which you can then render using <props.children /> (or simply <children /> if you destructured your props.)

import type { Component } from 'ripple';

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

export component App() {
	// Usage
	<Card>
		<p>{"Card content here"}</p>
	</Card>

	// Usage with explicit component
	<Card>
		component children() {
			<p>{"Card content here"}</p>
		}
	</Card>
}

Reactive Props

See Reactivity.

Prop Shorthands

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