{
@div = node;
console.log("mounted", node);
return () => @div = undefined;
}}>{"Hello world"}
}
```
--------------------------------
### Attach Event Listeners with `on()` in RippleJS
Source: https://www.ripplejs.com/docs/guide/events
Illustrates how to use the `on()` function in RippleJS to attach event listeners to elements, ensuring proper execution order and optimized handling. It returns a function to remove the listener, crucial for preventing memory leaks on component unmount. The example shows attaching a 'resize' event listener to the window.
```javascript
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;
});
}
```
--------------------------------
### Ripple.js Dynamic Element Rendering
Source: https://www.ripplejs.com/docs/guide/control-flow
Illustrates rendering HTML elements dynamically in Ripple.js using a tracked variable for the tag name. The `<@tagName>` syntax allows for flexible element switching based on state.
```ripple
export component App() {
let tag = track('div');
<@tag class="dynamic">{'Hello World'}
}
```
--------------------------------
### Capture DOM Element Reference with Ripple.js Ref Function
Source: https://www.ripplejs.com/docs/guide/dom-refs
This snippet demonstrates how to capture a DOM element reference using the `{ref fn}` syntax in Ripple.js. The `divRef` function receives the DOM node upon mounting and can return a cleanup function for unmounting. This is useful for direct DOM manipulation or event listener setup.
```ripple
import { track } from 'ripple';
export default component App() {
let div = track();
const divRef = (node) => {
@div = node;
console.log("mounted", node);
return () => {
@div = undefined;
console.log("unmounted", node);
};
};
{"Hello world"}
}
```
--------------------------------
### Create and Use TrackedObject in RippleJS
Source: https://www.ripplejs.com/docs/guide/reactivity
Shows how to create a TrackedObject using syntactic sugar or constructors and demonstrates its reactivity in a RippleJS component. TrackedObject extends JS Object, providing shallow reactivity for root-level properties. Unboxing is not required for properties.
```ripple
import { TrackedObject } from 'ripple';
// using syntactic sugar `#`
const obj = #{a: 1, b: 2, c: 3};
// using the new constructor
const obj = new TrackedObject({a: 1, b: 2, c: 3});
```
```ripple
export component App() {
const obj = #{a: 0}
obj.a = 0;
{'obj.a is: '}{obj.a}
{'obj.b is: '}{obj.b}
}
```
--------------------------------
### Handle Custom Events with `customName` in RippleJS
Source: https://www.ripplejs.com/docs/guide/events
Demonstrates how to use the `customName` option to specify a custom event name for an event listener. This allows overriding the default inferred event name, which is useful for custom DOM events or when a different naming convention is required. The example shows a component that listens for 'MyCustomEvent' instead of the standard 'mycustomevent'.
```javascript
import { track } from 'ripple';
export component EventExample() {
let count = track(0);
@count += e.detail.value,
customName: 'MyCustomEvent',
}}>
{'Custom event target'}
{`Event count: ${@count}`}
} // The element listens for 'MyCustomEvent' instead of 'mycustomevent' ``` -------------------------------- ### Displaying Text in Ripple Components Source: https://www.ripplejs.com/docs/guide/syntax Shows the correct syntax for displaying text within Ripple components. Text must be enclosed in curly braces '{}' as it's treated as an expression, differentiating it from standard JSX where plain text is often allowed directly. ```ripple // ✅ Correct - Text is an expression {'Hello World!'} // ❌ Wrong - Compilation error Hello World! ``` -------------------------------- ### Component Transport Pattern in RippleJS Source: https://www.ripplejs.com/docs/guide/reactivity Explains the Component Transport Pattern in RippleJS, demonstrating how to pass reactive components as props. It showcases tracking component references and passing them to child components for rendering. ```ripple import { track } from 'ripple'; export component App() { const tracked_basic = track(() => basic); const obj = { tracked_basic, }; const tracked_object = track(obj); const Button = track(() => SomeButton); const AnotherButton = track(() => SomeButton); <@tracked_object.@tracked_basic />{'Basic Component'}
}
```
--------------------------------
### Combine Multiple Ripple.js Bindings on One Element
Source: https://www.ripplejs.com/docs/guide/bindings
Demonstrates how to apply multiple bindings, such as bindValue, bindClientWidth, and bindNode, to the same HTML element by using multiple '{ref}' attributes. This allows for simultaneous management of element value, dimensions, and direct node reference. It requires 'track' and the specific binding functions from the 'ripple' library.
```ripple
import { track, bindValue, bindClientWidth, bindNode } from 'ripple';
export component App() {
let text = track('');
let width = track(0);
let inputElement = track();
const logInfo = () => {
console.log('Input:', @inputElement);
console.log('Value:', @text);
console.log('Width:', @width);
};
{'Text: '}{@text}
{'Width: '}{@width}{'px'}
{title}
-
for (const item of items) {
- {item.text} }
{"Hello"}
; // Compilation error
function regularFunction() {
return {"Not allowed"}; // Compilation error
}
const myTemplate = (
{"Cannot assign JSX"}
// Compilation error
);
// ✅ Correct - Templates only inside components
component MyComponent() {
// Template syntax is valid here
{"Hello World"}
// You can have JavaScript code mixed with templates
const message = "Dynamic content";
console.log("This JavaScript works");
{message}
} // ✅ Correct - Helper functions return data, not templates function getMessage() { return "Hello from function"; // Return data, not JSX } component App() {{getMessage()}
// Use function result in template
}
```
--------------------------------
### Ripple.js Try Statement (Error Handling)
Source: https://www.ripplejs.com/docs/guide/control-flow
Shows how to use try/catch blocks in Ripple.js for error handling and implementing error boundaries. Errors within the try block are caught, allowing for fallback UI rendering.
```ripple
import { reportError } from 'some-library';
export component ErrorBoundary() {
try {
}
```
--------------------------------
### RippleJS: Correctly Closing Void Elements
Source: https://www.ripplejs.com/docs/troubleshooting
Illustrates the proper self-closing syntax for void elements in RippleJS to avoid 'Unexpected token `}`' errors. This is crucial for elements like , {'An error occurred! ' + e.message}
}
, and
. ```ripple export component Bracey() { // ✔️ valid
// ❌ invalid // //
//
} ``` -------------------------------- ### RippleJS: Track Element Border Box Size (ResizeObserver) Source: https://www.ripplejs.com/docs/guide/bindings Tracks the border box size of an element using ResizeObserver, including padding and borders. It depends on 'track' and 'bindBorderBoxSize' from 'ripple'. The input is a trackable array; the output is an array of objects detailing 'blockSize' and 'inlineSize' of the border box. ```ripple import { track, bindBorderBoxSize } from 'ripple'; export component App() { let size = track([]);
{'Border box size'}
{'Block size: '}{@size[0]?.blockSize || 0}{'px\n'}
{'Inline size: '}{@size[0]?.inlineSize || 0}{'px'}
{item.label}{' at index '}{i}
}
```
--------------------------------
### Create and Use TrackedArray in RippleJS
Source: https://www.ripplejs.com/docs/guide/reactivity
Demonstrates creating a TrackedArray using syntactic sugar or constructors and its usage within a RippleJS component. TrackedArray extends JS Array and makes its elements reactive to operations like push, pop, shift, etc. No unboxing is needed for elements.
```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 method
const arr = TrackedArray.of(1, 2, 3);
```
```ripple
export component App() {
const items = #[1, 2, 3];
{"Length: "}{items.length}
// Reactive length for (const item of items) {{item}
}
{'Content box size'}
{'Block size: '}{@size[0]?.blockSize || 0}{'px\n'}
{'Inline size: '}{@size[0]?.inlineSize || 0}{'px'}
{"Direct usage: map has an item with key 2: "}{map.has(2)}
// reactive assignment let has = track(() => map.has(2));{"Assigned usage: map has an item with key 2: "}{@has}
} ``` -------------------------------- ### Text Interpolation in Ripple Source: https://www.ripplejs.com/docs/guide/syntax Demonstrates text interpolation in Ripple, a basic form of data-binding. Variables or expressions are placed within curly braces '{}' inside template elements to dynamically insert values into the DOM. ```ripple {`Message: ${msg}`} {'Message: ' + msg} ``` -------------------------------- ### RippleJS: Validating Text Nodes with Braces Source: https://www.ripplejs.com/docs/troubleshooting Demonstrates the correct usage of braces for DOM text nodes in RippleJS components to prevent 'unterminated regular expression' errors. This ensures proper rendering of dynamic text content. ```ripple export component TextBrace() { // ✔️ valid{'Hello world!'}
// ❌ invalid //Hello world!
} ``` -------------------------------- ### RippleJS: Track Element Content Rect (ResizeObserver) Source: https://www.ripplejs.com/docs/guide/bindings Utilizes the ResizeObserver API to track an element's content rectangle, including its dimensions and position relative to its layout. It requires 'track' and 'bindContentRect' from 'ripple'. The input is a trackable object for the rect; the output is an object containing width, height, top, and left. ```ripple import { track, bindContentRect } from 'ripple'; export component App() { let rect = track({ width: 0, height: 0, top: 0, left: 0 });
{'Resize me!'}
{JSON.stringify(@rect, null, 2)}
{item}{' at index '}{i}
}
}
```
--------------------------------
### RippleJS: Track Element Client Dimensions (Width/Height)
Source: https://www.ripplejs.com/docs/guide/bindings
Binds to an element's clientWidth and clientHeight, tracking its inner dimensions excluding borders and scrollbars. It requires the 'track', 'bindClientWidth', and 'bindClientHeight' functions from the 'ripple' library. Inputs are trackable variables to store the dimensions; outputs are the updated width and height values.
```ripple
import { track, bindClientWidth, bindClientHeight } from 'ripple';
export component App() {
let width = track(0);
let height = track(0);
{'Resize me! (drag bottom-right corner)'}
{'Client Width: '}{@width}{'px'}
{'Client Height: '}{@height}{'px'}
{'Box with borders'}
{'Offset Width: '}{@width}{'px (includes borders)'}
{'Offset Height: '}{@height}{'px (includes borders)'}
My Blog Post
Hi! I like JS and Ripple.
`{'Double: ' + @double}
}
```
--------------------------------
### Dynamic Inline Styles in Ripple
Source: https://www.ripplejs.com/docs/guide/styling
Shows how to apply dynamic inline styles to elements in Ripple components using the `style` attribute. Supports both string concatenation and object notation for styles. The object notation is generally recommended for better performance. CSS property names can be in camelCase or kebab-case.
```ripple
ripple```
let color = track('red');
const style = {
@color,
fontWeight: 'bold',
'background-color': 'gray',
};
// using object spread
// using object directly
```
```
--------------------------------
### Simple Reactive Array with RippleJS
Source: https://www.ripplejs.com/docs/guide/reactivity
Demonstrates how to create a simple reactive array in RippleJS by composing normal arrays with tracked values. It calculates the total sum of the array elements reactively.
```ripple
import { effect, track } from 'ripple';
export component App() {
let first = track(1);
let second = track(2);
const arr = [first, second];
const total = track(() => arr.reduce((a, b) => a + @b, 0));
effect(() => {
console.log(@total);
})
}
```
--------------------------------
### Dynamic Component Rendering in Ripple.js
Source: https://www.ripplejs.com/docs/guide/reactivity
Ripple.js supports dynamic components, enabling the rendering of different components based on reactive state. A component can be stored in a `Tracked` variable, allowing it to be updated at runtime. The `<@Component />` tag is used to render these dynamic components, automatically handling mounting and unmounting when the tracked state changes, thus simplifying state-driven UI development.
```javascript
import { track } from 'ripple';
export component App() {
let swapMe = track(() => Child1);
{'I am child 1'}
}
component Child2(props) {
{'I am child 2'}
}
```
--------------------------------
### Event Handling with `handleEvent` Object
Source: https://www.ripplejs.com/docs/guide/events
Illustrates using an object with a `handleEvent` function as an event handler for `onClick`. This provides an alternative to directly passing a function, offering more control over event processing.
```ripple
```
--------------------------------
### Templates as Lexical Scopes in Ripple
Source: https://www.ripplejs.com/docs/guide/syntax
Explains and exemplifies how Ripple templates act as lexical scopes. This allows for inline JavaScript, including variable declarations, function calls, conditional logic, and even 'debugger' statements, directly within the template structure.
```ripple
component TemplateScope() {
// 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;
const sectionData = "Nested scope variable";
// You can even put debugger statements
debugger;
}
```{message}
{"Count is: "}{count}
if (isEven) { {"Count is even"} } // Nested scopes work too{sectionData}