Wayland

Light-weight, mixin-based Web Components

Wayland provides a set of highly composable mixins for building native Web Components using a functional and reactive approach. It decouples the UI representation from the underlying logic using a "Handle" pattern, where each component is managed by a specialized controller class.

For example, a reactive component that renders content based on events:

import { shadowed, renderable, reactive } from "@dashkite/wayland"
import * as Fn from "@dashkite/joy/function"

class extends do Fn.pipe [ shadowed, renderable, reactive ]
  @tag "my-component"
  @reactor ( reactor ) ->
    for await event from reactor
      if event.name == "connect"
        @render "Hello, Wayland!"

Features

• Composable Mixins: Composable logic for Shadow DOM, rendering, styling, and reactivity.
• Reactive Architecture: Built-in support for event reactors and data streams.
• Functional Style: Promotes declarative logic and clean separation of concerns.
• Native Web Components: Enhances standard HTML elements without complex abstractions.

Installation

Use your favorite package manager to install:

pnpm add @dashkite/wayland

Usage

Wayland components are defined by piping mixins onto a base class and registering them with @tag.

import { shadowed, styleable, reactive } from "@dashkite/wayland"
import * as Fn from "@dashkite/joy/function"
import css from "./css"

class MyComponent extends do Fn.pipe [ shadowed, styleable, reactive ]
  @tag "my-component"
  @sheets [ css ]
  @reactor ( reactor ) ->
    # reactive logic here

Other Resources

• Reference: Detailed API documentation for mixins and base classes.
• Recipes: Common patterns for building Wayland components.

Status

This software is currently in active development and is not yet suitable for production use. Please report bugs or request features via the repository's issue tracker.