# boreDOM A JavaScript framework for building reactive web components with template-based architecture and automatic state synchronization. ## Features - 🥱 **Reactive State Management** - Automatic DOM updates when state changes - 🥱 **Template-based Components** - Define components using HTML templates with `data-component` attributes - 🥱 **Hot Module Reloading** - Built-in dev server with file watching and auto-reload - 🥱 **Zero Configuration** - Works out of the box with sensible defaults - 🥱 **CLI Tools** - Development server and build tools included - 🥱 **TypeScript Support** - Full TypeScript definitions included - 🥱 **Project Generator** - Quick project scaffolding with `create-boredom` ## Quick Start ### Installation ```bash # Install the framework pnpm install @mr_hugo/boredom # Or create a new project npx create-boredom my-app cd my-app pnpm dev ``` ### Basic Usage 1. **Create an HTML file with component templates:** ```html My boreDOM App

Counter Example

``` 2. **Create the component logic in JavaScript:** ```javascript // main.js import { inflictBoreDOM, webComponent } from "@mr_hugo/boredom"; // Initialize with state const uiState = await inflictBoreDOM({ count: 0 }); // simple-counter.js (or inline) export const SimpleCounter = webComponent(({ on }) => { on("increase", ({ state }) => { state.count += 1; }); on("decrease", ({ state }) => { state.count -= 1; }); return ({ state, slots }) => { slots.counter = state.count; }; }); ``` ## Development Server boreDOM includes a built-in development server with hot reloading: ```bash # Start dev server (watches for changes) npx boredom # Custom options npx boredom --index ./src/index.html --html ./components --static ./public ``` The CLI will: - Watch for file changes in components, HTML, and static files - Automatically rebuild and inject components - Serve your app with hot reloading - Copy static files to the build directory ## API Reference ### Core Functions #### `inflictBoreDOM(initialState, componentsLogic?)` Initializes the boreDOM framework and creates reactive state. - **`initialState`** - Initial application state object - **`componentsLogic`** - Optional inline component definitions - **Returns** - Proxified reactive state object ```javascript const state = await inflictBoreDOM({ users: [], selectedUser: null, }); ``` #### `webComponent(initFunction)` Creates a web component with reactive behavior. - **`initFunction`** - Component initialization function - **Returns** - Component definition for use with boreDOM ```javascript const MyComponent = webComponent(({ on, state, refs, self }) => { // Setup event handlers on("click", ({ state }) => { state.clicked = true; }); // Return render function return ({ state, slots, refs }) => { slots.content = `Clicked: ${state.clicked}`; }; }); ``` ### Component API Components receive these parameters: #### Initialization Phase - **`on(eventName, handler)`** - Register event listeners - **`state`** - Reactive state accessor - **`refs`** - DOM element references - **`self`** - Component instance - **`detail`** - Component-specific data #### Render Phase - **`state`** - Current state (read-only in render) - **`slots`** - Named content slots for the template - **`refs`** - DOM element references - **`makeComponent(tag, options)`** - Create child components ### Template Syntax Templates use standard HTML with special attributes: ```html ``` ## How Templates Become Components 1. Declare a template with a tag name ```html ``` 2. Provide behavior (first export is used) ```js // /simple-counter.js import { webComponent } from "@mr_hugo/boredom"; export const SimpleCounter = webComponent(({ on }) => { on("increment", ({ state }) => { state.count += 1; }); on("decrement", ({ state }) => { state.count -= 1; }); return ({ state, slots }) => { slots.count = String(state.count); }; }); ``` 3. Initialize once ```js import { inflictBoreDOM } from "@mr_hugo/boredom"; await inflictBoreDOM({ count: 0 }); ``` What happens under the hood - The runtime scans `