Quick Reference Definitions of key Eleva.js terms and concepts.
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.2KB) 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, // Component 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. Eleva uses native DOM events — the @ syntax is shorthand for addEventListener. Any event that works in vanilla JavaScript works in Eleva.
// Direct reference - event passed automatically
<button @click="handleClick">Click me</button>
// Arrow function - needed when passing arguments
<button @click="() => remove(item.id)">Delete</button>
// Inline processing of event
<input @input="(e) => setValue(e.target.value)" />
// Any native DOM event works
<div @scroll="handleScroll">
<div @contextmenu="handleRightClick">
<video @timeupdate="handleTime">
Note:
@click="remove(id)"executes immediately during render. Use@click="() => remove(id)"for handlers with arguments.
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. Receives { container, context, cleanup } where cleanup contains { watchers, listeners, children } arrays for advanced scenarios.
onUnmount: ({ container, context, cleanup }) => {
console.log(`Cleaning up ${cleanup.watchers.length} watchers`);
clearInterval(timerId);
window.removeEventListener("resize", handler);
}
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 and are evaluated once at mount time (static by design). For reactive props, pass signals instead of values.
// Parent template - static prop (value snapshot)
<child :name="user.value.name" :onSave="handleSave"></child>
// Parent template - reactive prop (pass signal itself)
<child :user="user" :onSave="handleSave"></child>
// Child setup - use signal.value in template for reactivity
setup: ({ props }) => ({
userName: props.name, // Static value
user: props.user, // Signal reference (auto-watched)
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 defined in a component’s style property. Styles are injected into a <style> element but are not automatically scoped. Use unique class names or CSS nesting for isolation.
style: `
.my-component .button { color: blue; } /* Use specific selectors */
`
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 (~2KB gzipped) 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.
💡 Vanilla JavaScript. Elevated. Eleva takes plain vanilla JavaScript to the next level. Signals for reactivity. Components for structure. Your JS knowledge stays front and center, not hidden behind abstractions. Everything you know works exactly as expected:
@click, @scroll, @wheel, etc.).map(), .filter(), .find(), .reduce(), etc.fetch, localStorage, URL, Observers, etc.setTimeout, setInterval, requestAnimationFrameIf it works in vanilla JavaScript, it works in Eleva.
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 → |