Quick Reference Definitions of key terms used throughout Eleva.js documentation.
A function defined in the Store plugin that modifies state. Actions are the only way to change store state, ensuring predictable state management.
actions: {
increment: (state) => state.count.value++,
setUser: (state, user) => state.user.value = user
}
An official Eleva plugin (~2.4KB) that provides intelligent attribute binding for ARIA accessibility, data attributes, boolean attributes, and dynamic properties. Learn more →
Eleva’s automatic optimization that groups multiple signal updates into a single re-render. When you update multiple signals synchronously, Eleva batches them together to avoid unnecessary renders.
// These 3 updates result in only 1 render
x.value = 1;
y.value = 2;
z.value = 3;
HTML attributes that represent true/false values (e.g., disabled, checked, readonly). The Attr plugin handles these automatically.
Nested components defined within a parent component. Specified using CSS selectors that map to component names.
children: {
".sidebar": "SidebarComponent",
"#header": "HeaderComponent"
}
A self-contained, reusable building block of an Eleva application. Components encapsulate their own state, template, styles, and child components.
app.component("MyComponent", {
setup, // State and logic
template, // HTML structure
style, // Scoped CSS
children // Nested components
});
A derived value calculated from one or more signals. In Eleva, computed values are implemented as functions that read signal values.
const items = signal([1, 2, 3]);
const getTotal = () => items.value.reduce((a, b) => a + b, 0);
The object passed to the template function containing all values returned from setup. Used to access signals, functions, and props in templates.
template: (ctx) => `<p>${ctx.count.value}</p>`
A programming style where you describe what you want rather than how to achieve it. Eleva’s templates are declarative—you describe the UI structure, and Eleva handles the DOM updates.
The process of comparing the previous and current state of the UI to determine what changed. Eleva uses efficient string-based diffing rather than Virtual DOM diffing.
A built-in event system for communication between components. Components can emit events and subscribe to events from other components.
setup: ({ emitter }) => {
emitter.emit("user:login", { id: 1 }); // Emit
const unsub = emitter.on("user:login", handler); // Subscribe
}
Attaching event handlers to DOM elements using the @ syntax in templates.
<button @click="handleClick">Click me</button>
<input @input="(e) => setValue(e.target.value)" />
A function in the Router plugin that controls navigation. Guards can allow, redirect, or cancel navigation based on conditions like authentication.
beforeEnter: (to, from) => {
if (!isAuthenticated()) return "/login";
return true;
}
A routing mode that uses the URL hash (#) for navigation (e.g., example.com/#/users). Works without server configuration. See Router plugin.
A routing mode that uses the browser’s History API for clean URLs (e.g., example.com/users). Requires server configuration for direct URL access.
See Lifecycle Hook.
The process of attaching JavaScript behavior to server-rendered HTML. Eleva supports progressive enhancement but is primarily designed for client-side rendering.
The practice of creating new objects/arrays instead of modifying existing ones. Required for Eleva’s signal reactivity to detect changes.
// ✗ Mutable (won't trigger re-render)
items.value.push(newItem);
// ✓ Immutable (triggers re-render)
items.value = [...items.value, newItem];
Embedding JavaScript expressions in templates using ${} syntax within template literals.
template: (ctx) => `<p>Count: ${ctx.count.value}</p>`
A unique identifier used in list rendering to help Eleva track which items changed, were added, or removed. Always use stable, unique keys.
${items.map(item => `<li key="${item.id}">${item.name}</li>`).join('')}
Loading components or routes only when needed, reducing initial bundle size. Supported by the Router plugin.
{ path: "/dashboard", component: () => import("./Dashboard.js") }
Functions called at specific points in a component’s existence. Eleva provides four hooks:
| Hook | When Called |
|---|---|
onBeforeMount |
Before component is added to DOM |
onMount |
After component is added to DOM |
onUpdate |
After component re-renders |
onUnmount |
Before component is removed from DOM |
The process of rendering a component and inserting it into the DOM.
app.mount(document.getElementById("app"), "MyComponent", { props });
Directly modifying an object or array. Mutations don’t trigger reactivity in Eleva—use immutable updates instead.
A way to organize related state in the Store plugin. Namespaces prevent naming collisions and improve code organization.
app.use(Store, {
namespaces: {
user: { state: { name: "" }, actions: { setName } },
cart: { state: { items: [] }, actions: { addItem } }
}
});
A lifecycle hook called before the component is inserted into the DOM. Use for prop validation or setup that doesn’t require DOM access.
A lifecycle hook called after the component is inserted into the DOM. Use for data fetching, adding event listeners, or accessing DOM elements.
A lifecycle hook called before the component is removed from the DOM. Use for cleanup: removing event listeners, canceling requests, clearing timers.
A lifecycle hook called after the component re-renders due to state changes. Avoid setting state here to prevent infinite loops.
An extension that adds functionality to Eleva. Plugins are installed using app.use().
import { Router, Store, Attr } from "eleva/plugins";
app.use(Router, { routes: [...] });
Data passed from a parent component to a child component. Props flow down the component tree.
// Parent template
<child :name="user.value.name" :onSave="handleSave"></child>
// Child setup
setup: ({ props }) => ({
userName: props.name,
save: () => props.onSave()
})
Passing data to child components using the : syntax in templates. Note: Don’t use ctx. in prop bindings.
<child :items="items.value" :count="count.value"></child>
The automatic updating of the UI when underlying data changes. Eleva uses signals for fine-grained reactivity—only components that depend on changed data re-render.
Eleva’s internal module responsible for updating the DOM when state changes. It uses efficient diffing to minimize DOM operations.
A mapping between a URL path and a component in the Router plugin.
{ path: "/users/:id", component: UserProfile }
An official Eleva plugin (~15KB) for client-side navigation with support for hash/history modes, navigation guards, lazy loading, and layouts. Learn more →
CSS styles that only apply to a specific component, preventing style conflicts. Defined in the component’s style property.
style: `
.button { color: blue; } /* Only affects this component */
`
The function in a component that initializes state and logic. Receives signal, props, and emitter as parameters. Returns values accessible in the template.
setup: ({ signal, props, emitter }) => {
const count = signal(0);
return { count, increment: () => count.value++ };
}
A reactive container that holds a value. When a signal’s value changes, any component using that signal automatically re-renders.
const count = signal(0); // Create
count.value; // Read (returns 0)
count.value = 5; // Write (triggers re-render)
A web application that loads a single HTML page and dynamically updates content as the user interacts. Eleva with the Router plugin enables SPA development.
An official Eleva plugin (~6KB) for centralized state management with actions, namespaces, persistence, and subscriptions. Learn more →
A way to listen for changes to store state or emitter events. Always unsubscribe in onUnmount to prevent memory leaks.
const unsub = store.subscribe("count", (value) => console.log(value));
// Later: unsub();
A function that returns an HTML string defining the component’s structure. Uses template literals with interpolation.
template: (ctx) => `
<div class="card">
<h1>${ctx.title.value}</h1>
<button @click="increment">Count: ${ctx.count.value}</button>
</div>
`
Eleva’s internal module that processes templates, handles event binding (@), prop binding (:), and interpolation (${}).
A build optimization that removes unused code. Eleva and its plugins are tree-shakeable—import only what you use.
import { Router } from "eleva/plugins"; // Only Router is bundled
The process of removing a component from the DOM and cleaning up its resources.
A programming concept where a virtual representation of the UI is kept in memory and synced with the real DOM. Eleva does NOT use Virtual DOM—it uses direct, efficient DOM updates based on signal changes.
A mechanism to observe signal changes. In Eleva, you can watch for changes using the signal’s built-in reactivity or store subscriptions.
// Store subscription (acts as a watcher)
store.subscribe("user", (user) => {
console.log("User changed:", user);
});
| ← Cheat Sheet | Back to Main Docs | Core Concepts → |