Udodi

Fundamentals ​

The Fundamentals section introduces the core concepts used to build applications with Udodi.

Start with Components to understand how Udodi organizes UI, state, behavior, and composition. The remaining guides explain the individual capabilities that make up a component.

Components ​

Components are the primary building blocks of a Udodi application.

A component combines state, behavior, derived values, templates, styles, and lifecycle into a reusable unit. Components can also be composed together and communicate through props.

Start here if you are new to Udodi.

Component State and Behavior ​

These guides cover how components store, derive, and respond to data.

  • State — define and manage reactive component state.
  • Computed Values — derive reactive values from existing state.
  • Methods — define component behavior and event handlers.
  • Watchers — respond to changes in reactive dependencies.
  • Interceptors — transform or cancel state assignments before they are committed.

The typical relationship is:

text
State
  │
  ├──► Computed Values
  │
  ├──► Watchers
  │
  └──► Template

Methods provide behavior that can read and update component state, while interceptors provide control over state writes.

Component Communication ​

Components are designed to work together as a hierarchy.

  • Props — pass data from parent components to child components.
  • Context — understand the public context exposed to component code.

The basic data flow is:

text
Parent
  │
  │ props / bindProp()
  ▼
Child
  │
  └──► public context

Use ordinary props when a child needs a value snapshot. Use bindProp() when the child needs an explicit reactive connection to parent state.

Component Lifecycle ​

Lifecycle explains how components are initialized, mounted, and cleaned up.

text
Create
  │
  ▼
Initialize
  │
  ▼
Mount
  │
  ▼
Active
  │
  ▼
Unmount
  │
  ▼
Cleanup

Lifecycle hooks are useful when component behavior needs to interact with the DOM or perform setup and cleanup work.

Component Presentation ​

Component Styles explains how to define styles that belong to a component.

Components can declare scoped CSS alongside their templates:

js
const Card = createComponent({
  style: css`
    .card {
      padding: 1rem;
    }
  `,
});

For the underlying style-scoping mechanism, see CSS Scoping.

How the Fundamentals Fit Together ​

A component typically brings several of these concepts together:

text
                         Component
                             │
          ┌──────────────────┼──────────────────┐
          │                  │                  │
         Data             Behavior        Presentation
          │                  │                  │
        state             methods             template
        computed          watchers            style
        props             interceptors
          │                  │                  │
          └──────────────────┼──────────────────┘
                             │
                         Lifecycle
                             │
                          onMount / onUnmount

The guides in this section are intentionally focused. Learn the component model first, then use the individual guides as references for each capability.

If you are new to Udodi, follow the guides in this order:

  1. Components — understand the component model.
  2. State — learn reactive component state.
  3. Methods — add component behavior.
  4. Computed Values — derive values from state.
  5. Templates — build declarative component markup.
  6. Props — compose components and pass data between them.
  7. Context — understand how component code accesses its capabilities.
  8. Watchers — respond to reactive changes.
  9. Interceptors — control state assignments.
  10. Lifecycle — manage setup and cleanup.
  11. Component Styles — add scoped component styling.

You do not need to read every guide before building an application. Start with Components, then refer to the relevant guide as your component requirements grow.

Beyond the Fundamentals ​

Once you understand the component model, explore the other parts of Udodi:

  • Templates — templates, directives, and declarative DOM behavior.
  • Store — application-level state and persistence.
  • Query Pool — asynchronous queries, mutations, caching, and reactive data.
  • Advanced — lower-level runtime and advanced Udodi concepts.
  • API Reference — authoritative API documentation.