Plain-TS Library

A React-like library for building universal custom elements with Shadow DOM.

Overview

Plain-TS provides a lightweight, type-safe framework for creating web components with familiar React-like patterns. Build reusable, encapsulated components with reactive state management, global context, and client-side routing.

Browser Support: Works in all modern browsers that support Custom Elements v1, Shadow DOM, and ES6+ (Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+).

Core Features

• Shadow DOM Encapsulation: True component isolation with scoped styles
• Reactive State Management: Automatic re-rendering on state changes
• Global Context: Share data across components with session/local storage
• Client-side Routing: SPA navigation without external dependencies
• TypeScript First: Full type safety and IntelliSense support
• Zero Dependencies: Minimal footprint, maximum performance

Installation

npm install plain-ts
# or
pnpm add plain-ts

Quick Start

import { PlainComponent, PlainState } from 'plain-ts'
// If using Vite, you can import CSS as a string with ?raw
import styles from './Counter.css?raw'
// Or define styles inline
// const styles = `button { padding: 1rem; }`

export class Counter extends PlainComponent {
  private count: PlainState<number>

  constructor() {
    super('my-counter', styles)
    this.count = this.useState(0)
  }

  protected template(): string {
    return this.html`
      <button>Count: ${this.count.get()}</button>
    `
  }

  protected listeners(): void {
    this.$('button')!.onclick = () => {
      this.count.set(prev => prev + 1)
    }
  }
}

// Register the custom element
customElements.define('my-counter', Counter)

After defining the component, you can use it anywhere in your HTML:

<my-counter></my-counter>

You now have a fully customizable HTML element with encapsulated styles and reactive state that keeps all the benefits and composability of standard HTML elements with the flexibility of a modern framework.

API Documentation

Core Components

• PlainComponent - Base class for custom elements with Shadow DOM
• PlainState - Reactive state management with automatic re-rendering
• PlainContext - Global state sharing with persistence
• PlainRouter - Client-side routing for SPAs

For complete API reference and advanced usage, see the individual component documentation linked above.

License

See LICENSE file for details.