Core Concepts

Understanding the fundamental concepts is essential before diving into implementation details. This section covers the architecture and design patterns used throughout the library.

Architecture

The system follows a modular architecture where each component is self-contained and can be used independently. The main entry point exports a factory function that creates instances with their own state.

State management is handled internally using a reactive proxy system. When data changes, dependent components automatically re-render without manual intervention.

Lifecycle

Every component goes through a well-defined lifecycle: initialization, mounting, updating, and destruction. Hooks are provided at each stage for custom logic.

Reactivity

The reactivity system uses Proxies to intercept property access and mutations. When a reactive property is read inside a computed function, that function is registered as a dependency.

Components

Components are the building blocks of any application built with this system. They encapsulate markup, styles, and behavior into reusable units.

Defining Components

A component is defined as a plain object with specific properties. The render function returns the virtual DOM representation.

Props & Events

Props are passed from parent to child and are read-only within the child component. For two-way communication, events are emitted upward through the component tree.

Validation can be added to ensure props meet expected types and constraints. Failed validation throws a descriptive error in development mode.

Slots

Slots allow content composition. A default slot receives any content placed between the component's opening and closing tags. Named slots enable multiple insertion points.

Routing

The router maps URLs to components. It supports dynamic segments, query parameters, and nested route definitions.

Basic Setup

Create a router instance and define your routes as an array of route objects. Each route specifies a path pattern and the component to render.

Programmatic Navigation

Beyond link clicks, you can navigate imperatively using the router instance methods. This is useful for redirects after form submission or conditional logic.

Navigation Guards

Guards intercept navigation and can prevent or redirect it. Use them for authentication checks, confirmation dialogs, or data preloading.

State Management

For complex applications, a centralized store helps manage shared state. The store follows a unidirectional data flow pattern.

Creating a Store

A store is created by defining an initial state object and a set of mutations that modify that state. Actions can contain asynchronous logic before committing mutations.

Getters

Getters compute derived state. They receive the state as an argument and return a computed value. Getters are cached and only re-evaluate when their dependencies change.

Actions

Actions are similar to mutations but can contain asynchronous operations. An action commits mutations rather than directly mutating state.

Advanced Topics

This section covers patterns and techniques for building production-grade applications.

Performance Optimization

Virtual scrolling, lazy loading, and code splitting are built-in features. The compiler also performs static analysis to eliminate dead code and optimize runtime performance.

Testing

The testing utilities provide helper functions for mounting components, triggering events, and asserting on rendered output. Tests run in a headless browser environment.

Deployment

Build for production with tree-shaking and minification. Static sites can be deployed to any CDN or static host. Server-side rendering requires a Node.js environment.