dom-render

import { DomRender } from '@dooboostore/dom-render/DomRender';

// Create a container element
const container = document.createElement('div');
container.innerHTML = `
  〈h3〉Title: 〈span〉\${@𝒕𝒉𝒊𝒔@.title}$〈/span〉〈/h3〉
  〈p〉Count: 〈span〉\${@𝒕𝒉𝒊𝒔@.count}$〈/span〉〈/p〉
  〈button id="increment"〉Increment〈/button〉
`;
document.body.appendChild(container);

// Initialize with reactive state
let state = {
  title: 'Hello DomRender!',
  count: 0
};

const result = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
});
state = result.rootObject; // Get proxied state

// Reactive updates - DOM updates automatically!
document.getElementById('increment').addEventListener('click', () =〉 {
  state.count++; // UI updates instantly
});

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈input type="text" dr-value="@𝒕𝒉𝒊𝒔@.username" placeholder="Enter name" /〉
  〈p〉Hello, 〈strong〉\${@𝒕𝒉𝒊𝒔@.username}$〈/strong〉!〈/p〉

  〈input type="number" dr-value="@𝒕𝒉𝒊𝒔@.age" /〉
  〈p〉Age: \${@𝒕𝒉𝒊𝒔@.age}$ years old〈/p〉
`;
document.body.appendChild(container);

let state = {
  username: 'Guest',
  age: 25
};

const result = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
});
state = result.rootObject;

// Changes to input automatically update state and other bound elements!

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈button id="add-item"〉Add Item〈/button〉
  〈ul〉
    〈li dr-for-of="@𝒕𝒉𝒊𝒔@.items" dr-option-item-variable-name="item"〉
      \${#item#.name}$ - $\${#item#.price}$
      〈button dr-event-click="@𝒕𝒉𝒊𝒔@.removeItem(#item#)"〉Remove〈/button〉
    〈/li〉
  〈/ul〉
  〈p〉Total: 〈strong〉$\${@𝒕𝒉𝒊𝒔@.total}$〈/strong〉〈/p〉
`;
document.body.appendChild(container);

let state = {
  items: [
    { name: 'Apple', price: 1.2 },
    { name: 'Banana', price: 0.8 }
  ],
  get total() {
    return this.items.reduce((sum, item) =〉 sum + item.price, 0).toFixed(2);
  },
  removeItem(item) {
    const index = this.items.indexOf(item);
    if (index 〉 -1) this.items.splice(index, 1);
  }
};

const result = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
});
state = result.rootObject;

document.getElementById('add-item').addEventListener('click', () =〉 {
  state.items.push({
    name: `Item ${state.items.length + 1}`,
    price: Math.random() * 10
  });
});

import { DomRender } from '@dooboostore/dom-render/DomRender';

// Create DomRender instance
const render = new DomRender({
  rootObject: { count: 0 },  // Your state object
  target: document.body,      // Target DOM element
  config: {
    window,                   // Window object
    routerType: 'hash'        // Optional: 'hash' | 'path'
  }
});

// Access proxied state
const state = render.rootObject;
state.count++; // Automatically updates DOM

// Access router
render.router.go('/home');

// Access event manager
render.eventManager.addEventListener(element, 'click', handler);

import { ComponentBase, attribute, query, event } from '@dooboostore/dom-render/components';

// Define your component
export class CounterComponent extends ComponentBase {
  // Bind HTML attributes to properties
  @attribute() initialValue: number = 0;
  @attribute('data-label') label: string = 'Counter';

  // Query DOM elements
  @query('.count-display') countDisplay?: HTMLElement;
  @query('button.increment') incrementBtn?: HTMLButtonElement;

  // Internal state
  private count: number = 0;

  // Lifecycle: Initialize component
  OnInitRender() {
    this.count = this.initialValue;
    console.log('Component initialized');
  }

  // Lifecycle: After first render
  OnCreateRendered() {
    console.log('First render complete');
    this.updateDisplay();
  }

  // Event handler with decorator
  @event('click', 'button.increment')
  handleIncrement(e: Event) {
    this.count++;
    this.updateDisplay();
  }

  @event('click', 'button.decrement')
  handleDecrement(e: Event) {
    this.count--;
    this.updateDisplay();
  }

  private updateDisplay() {
    if (this.countDisplay) {
      this.countDisplay.textContent = String(this.count);
    }
  }

  // Lifecycle: Cleanup on destroy
  OnDestroyRender() {
    console.log('Component destroyed');
  }

  // Component template
  override template = () =〉 `
    〈div class="counter-widget"〉
      〈h3〉\${@𝒕𝒉𝒊𝒔@.label}$〈/h3〉
      〈div class="count-display"〉\${@𝒕𝒉𝒊𝒔@.count}$〈/div〉
      〈button class="increment"〉+〈/button〉
      〈button class="decrement"〉-〈/button〉
    〈/div〉
  `;
}

// Register and use component
import { drComponent } from '@dooboostore/dom-render/components';

drComponent(CounterComponent, 'counter-component');

// Use in HTML
// 〈counter-component initial-value="10" data-label="My Counter"〉〈/counter-component〉

import { ComponentSet } from '@dooboostore/dom-render/components/ComponentSet';
import { DomRender } from '@dooboostore/dom-render/DomRender';

// Simple counter class
class Counter {
  count = 0;
  increment() { this.count++; }
  decrement() { this.count--; }
}

// Create component instances
const counters = [
  new ComponentSet(new Counter(), {
    template: `
      〈div〉
        〈p〉Count: \${@𝒕𝒉𝒊𝒔@.count}$〈/p〉
        〈button dr-event-click="@𝒕𝒉𝒊𝒔@.increment()"〉+〈/button〉
        〈button dr-event-click="@𝒕𝒉𝒊𝒔@.decrement()"〉-〈/button〉
      〈/div〉
    `
  }),
  new ComponentSet(new Counter(), {
    template: `
      〈div〉
        〈p〉Count: \${@𝒕𝒉𝒊𝒔@.count}$〈/p〉
        〈button dr-event-click="@𝒕𝒉𝒊𝒔@.increment()"〉+〈/button〉
        〈button dr-event-click="@𝒕𝒉𝒊𝒔@.decrement()"〉-〈/button〉
      〈/div〉
    `
  })
];

// Render in loop
const container = document.createElement('div');
container.innerHTML = `
  〈div dr-for-of="@𝒕𝒉𝒊𝒔@.counters"〉
    〈div dr-this="#it#"〉〈/div〉
  〈/div〉
`;

const state = new DomRender({
  rootObject: { counters },
  target: container,
  config: { window }
}).rootObject;

〈!-- Simple condition --〉
〈div dr-if="@𝒕𝒉𝒊𝒔@.isLoggedIn"〉
  Welcome back!
〈/div〉

〈!-- Expression --〉
〈div dr-if="@𝒕𝒉𝒊𝒔@.count 〉 10"〉
  Count is greater than 10
〈/div〉

〈!-- Multiple conditions --〉
〈div dr-if="@𝒕𝒉𝒊𝒔@.user && @𝒕𝒉𝒊𝒔@.user.isAdmin"〉
  Admin panel
〈/div〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈button dr-event-click="@𝒕𝒉𝒊𝒔@.toggle()"〉
    Toggle (\${@𝒕𝒉𝒊𝒔@.isVisible ? 'Hide' : 'Show'}$)
  〈/button〉

  〈div dr-if="@𝒕𝒉𝒊𝒔@.isVisible" style="padding: 20px; background: #e0f2fe;"〉
    〈h3〉Conditionally Rendered Content〈/h3〉
    〈p〉This appears when isVisible is true〈/p〉
  〈/div〉

  〈div dr-if="!@𝒕𝒉𝒊𝒔@.isVisible" style="padding: 20px; background: #fef3c7;"〉
    〈p〉Content is hidden〈/p〉
  〈/div〉
`;

let state = {
  isVisible: true,
  toggle() {
    this.isVisible = !this.isVisible;
  }
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;

〈!-- Simple list --〉
〈ul〉
  〈li dr-for-of="@𝒕𝒉𝒊𝒔@.items" dr-option-item-variable-name="item"〉
    \${#item#}$
  〈/li〉
〈/ul〉

〈!-- Object properties --〉
〈ul〉
  〈li dr-for-of="@𝒕𝒉𝒊𝒔@.users" dr-option-item-variable-name="user"〉
    \${#user#.name}$ - \${#user#.email}$
  〈/li〉
〈/ul〉

〈!-- With index --〉
〈div dr-for-of="@𝒕𝒉𝒊𝒔@.items"
     dr-option-item-variable-name="item"
     dr-option-index-variable-name="index"〉
  Item #\${#index#}$: \${#item#}$
〈/div〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈input type="text" dr-value="@𝒕𝒉𝒊𝒔@.newTask" placeholder="New task" /〉
  〈button dr-event-click="@𝒕𝒉𝒊𝒔@.addTask()"〉Add Task〈/button〉

  〈ul〉
    〈li dr-for-of="@𝒕𝒉𝒊𝒔@.tasks"
        dr-option-item-variable-name="task"
        dr-option-index-variable-name="index"
        style="margin: 10px 0; padding: 10px; background: #f0f9ff;"〉
      〈span〉\${#index# + 1}$. \${#task#.title}$〈/span〉
      〈button dr-event-click="@𝒕𝒉𝒊𝒔@.removeTask(#index#)"
              style="margin-left: 10px;"〉
        Remove
      〈/button〉
    〈/li〉
  〈/ul〉

  〈p〉Total tasks: 〈strong〉\${@𝒕𝒉𝒊𝒔@.tasks.length}$〈/strong〉〈/p〉
`;

let state = {
  newTask: '',
  tasks: [
    { title: 'Learn DomRender' },
    { title: 'Build awesome app' }
  ],
  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push({ title: this.newTask });
      this.newTask = '';
    }
  },
  removeTask(index) {
    this.tasks.splice(index, 1);
  }
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;

〈dr-choose〉
  〈dr-when test="\${@𝒕𝒉𝒊𝒔@.status}$ === 'loading'"〉
    Loading...
  〈/dr-when〉
  〈dr-when test="\${@𝒕𝒉𝒊𝒔@.status}$ === 'success'"〉
    Data loaded successfully!
  〈/dr-when〉
  〈dr-when test="\${@𝒕𝒉𝒊𝒔@.status}$ === 'error'"〉
    Error occurred
  〈/dr-when〉
  〈dr-otherwise〉
    Unknown status
  〈/dr-otherwise〉
〈/dr-choose〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈div〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.status = 'idle'"〉Idle〈/button〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.status = 'loading'"〉Loading〈/button〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.status = 'success'"〉Success〈/button〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.status = 'error'"〉Error〈/button〉
  〈/div〉

  〈dr-choose〉
    〈dr-when test="\${@𝒕𝒉𝒊𝒔@.status}$ === 'idle'"〉
      〈div style="padding: 20px; background: #f1f5f9;"〉
        ⏸️ System is idle
      〈/div〉
    〈/dr-when〉
    〈dr-when test="\${@𝒕𝒉𝒊𝒔@.status}$ === 'loading'"〉
      〈div style="padding: 20px; background: #dbeafe;"〉
        ⏳ Loading data...
      〈/div〉
    〈/dr-when〉
    〈dr-when test="\${@𝒕𝒉𝒊𝒔@.status}$ === 'success'"〉
      〈div style="padding: 20px; background: #dcfce7;"〉
        ✅ Operation completed successfully!
      〈/div〉
    〈/dr-when〉
    〈dr-when test="\${@𝒕𝒉𝒊𝒔@.status}$ === 'error'"〉
      〈div style="padding: 20px; background: #fee2e2;"〉
        ❌ An error occurred
      〈/div〉
    〈/dr-when〉
    〈dr-otherwise〉
      〈div style="padding: 20px; background: #fef3c7;"〉
        ⚠️ Unknown status: \${@𝒕𝒉𝒊𝒔@.status}$
      〈/div〉
    〈/dr-otherwise〉
  〈/dr-choose〉
`;

let state = {
  status: 'idle'
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;

〈!-- Multiple attributes --〉
〈input dr-attr="disabled:\${@𝒕𝒉𝒊𝒔@.isDisabled}$,
                placeholder:\${@𝒕𝒉𝒊𝒔@.placeholder}$,
                type:\${@𝒕𝒉𝒊𝒔@.inputType}$" /〉

〈!-- Boolean attributes --〉
〈button dr-attr="disabled:\${@𝒕𝒉𝒊𝒔@.loading}$"〉Submit〈/button〉

〈!-- Data attributes --〉
〈div dr-attr="data-id:\${@𝒕𝒉𝒊𝒔@.userId}$,
              data-role:\${@𝒕𝒉𝒊𝒔@.role}$"〉〈/div〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈div〉
    〈label〉
      〈input type="checkbox" dr-value="@𝒕𝒉𝒊𝒔@.isDisabled" /〉
      Disable input
    〈/label〉
  〈/div〉

  〈input
    dr-attr="disabled:\${@𝒕𝒉𝒊𝒔@.isDisabled}$,
             placeholder:\${@𝒕𝒉𝒊𝒔@.placeholder}$,
             maxlength:\${@𝒕𝒉𝒊𝒔@.maxLength}$"
    dr-value="@𝒕𝒉𝒊𝒔@.text"
    style="margin: 10px 0; padding: 8px;" /〉

  〈p〉Value: \${@𝒕𝒉𝒊𝒔@.text}$〈/p〉
`;

let state = {
  isDisabled: false,
  placeholder: 'Enter text here...',
  maxLength: 20,
  text: ''
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;

〈!-- Boolean class binding --〉
〈div dr-class="active:\${@𝒕𝒉𝒊𝒔@.isActive}$,
               disabled:\${@𝒕𝒉𝒊𝒔@.isDisabled}$,
               loading:\${@𝒕𝒉𝒊𝒔@.isLoading}$"〉
  Content
〈/div〉

〈!-- Dynamic class names --〉
〈div dr-class="\${@𝒕𝒉𝒊𝒔@.statusClass}$:true"〉Status〈/div〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈style〉
    .btn { padding: 10px 20px; border: none; cursor: pointer; }
    .btn-primary { background: #3b82f6; color: white; }
    .btn-danger { background: #ef4444; color: white; }
    .btn-disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-loading { position: relative; }
  〈/style〉

  〈button
    class="btn"
    dr-class="btn-primary:\${@𝒕𝒉𝒊𝒔@.variant === 'primary'}$,
             btn-danger:\${@𝒕𝒉𝒊𝒔@.variant === 'danger'}$,
             btn-disabled:\${@𝒕𝒉𝒊𝒔@.disabled}$,
             btn-loading:\${@𝒕𝒉𝒊𝒔@.loading}$"
    dr-event-click="@𝒕𝒉𝒊𝒔@.handleClick()"〉
    \${@𝒕𝒉𝒊𝒔@.loading ? 'Loading...' : 'Click Me'}$
  〈/button〉

  〈div〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.variant = 'primary'"〉Primary〈/button〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.variant = 'danger'"〉Danger〈/button〉
    〈label〉
      〈input type="checkbox" dr-value="@𝒕𝒉𝒊𝒔@.disabled" /〉 Disabled
    〈/label〉
  〈/div〉
`;

let state = {
  variant: 'primary',
  disabled: false,
  loading: false,
  handleClick() {
    if (this.disabled) return;
    this.loading = true;
    setTimeout(() =〉 {
      this.loading = false;
    }, 1000);
  }
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;

〈!-- Multiple style properties --〉
〈div dr-style="color:\${@𝒕𝒉𝒊𝒔@.textColor}$,
               font-size:\${@𝒕𝒉𝒊𝒔@.fontSize}$px,
               background-color:\${@𝒕𝒉𝒊𝒔@.bgColor}$"〉
  Styled content
〈/div〉

〈!-- Conditional styles --〉
〈div dr-style="opacity:\${@𝒕𝒉𝒊𝒔@.visible ? 1 : 0}$"〉
  Fade in/out
〈/div〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈div〉
    〈label〉Text Color:
      〈input type="color" dr-value="@𝒕𝒉𝒊𝒔@.textColor" /〉
    〈/label〉
    〈label〉Background:
      〈input type="color" dr-value="@𝒕𝒉𝒊𝒔@.bgColor" /〉
    〈/label〉
    〈label〉Font Size:
      〈input type="range" min="12" max="48" dr-value="@𝒕𝒉𝒊𝒔@.fontSize" /〉
      \${@𝒕𝒉𝒊𝒔@.fontSize}$px
    〈/label〉
    〈label〉Rotation:
      〈input type="range" min="0" max="360" dr-value="@𝒕𝒉𝒊𝒔@.rotation" /〉
      \${@𝒕𝒉𝒊𝒔@.rotation}$°
    〈/label〉
  〈/div〉

  〈div
    dr-style="color:\${@𝒕𝒉𝒊𝒔@.textColor}$,
             background-color:\${@𝒕𝒉𝒊𝒔@.bgColor}$,
             font-size:\${@𝒕𝒉𝒊𝒔@.fontSize}$px,
             transform:rotate(\${@𝒕𝒉𝒊𝒔@.rotation}$deg),
             padding:20px,
             margin:20px 0,
             text-align:center"〉
    Dynamic Styled Text
  〈/div〉
`;

let state = {
  textColor: '#ffffff',
  bgColor: '#3b82f6',
  fontSize: 24,
  rotation: 0
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;

〈!-- Click events --〉
〈button dr-event-click="@𝒕𝒉𝒊𝒔@.handleClick()"〉Click Me〈/button〉

〈!-- With parameters --〉
〈button dr-event-click="@𝒕𝒉𝒊𝒔@.deleteItem(123)"〉Delete〈/button〉

〈!-- Other events --〉
〈input dr-event-input="@𝒕𝒉𝒊𝒔@.onInput($event)" /〉
〈div dr-event-mouseenter="@𝒕𝒉𝒊𝒔@.onHover()"
     dr-event-mouseleave="@𝒕𝒉𝒊𝒔@.onLeave()"〉〈/div〉

〈!-- Keyboard events --〉
〈input dr-event-keydown="@𝒕𝒉𝒊𝒔@.onKeyDown($event)" /〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈div〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.increment()"〉Increment〈/button〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.decrement()"〉Decrement〈/button〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.reset()"〉Reset〈/button〉
    〈p〉Count: \${@𝒕𝒉𝒊𝒔@.count}$〈/p〉
  〈/div〉

  〈div dr-event-mouseenter="@𝒕𝒉𝒊𝒔@.hovered = true"
       dr-event-mouseleave="@𝒕𝒉𝒊𝒔@.hovered = false"
       dr-style="background:\${@𝒕𝒉𝒊𝒔@.hovered ? '#dbeafe' : '#f1f5f9'}$,
                 padding:20px,
                 transition:all 0.3s"〉
    Hover me! \${@𝒕𝒉𝒊𝒔@.hovered ? '👋' : ''}$
  〈/div〉
`;

let state = {
  count: 0,
  hovered: false,
  increment() { this.count++; },
  decrement() { this.count--; },
  reset() { this.count = 0; }
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;

〈!-- Text input --〉
〈input type="text" dr-value="@𝒕𝒉𝒊𝒔@.username" /〉

〈!-- Number input --〉
〈input type="number" dr-value="@𝒕𝒉𝒊𝒔@.age" /〉

〈!-- Checkbox --〉
〈input type="checkbox" dr-value="@𝒕𝒉𝒊𝒔@.accepted" /〉

〈!-- Radio buttons --〉
〈input type="radio" name="gender" value="male" dr-value="@𝒕𝒉𝒊𝒔@.gender" /〉
〈input type="radio" name="gender" value="female" dr-value="@𝒕𝒉𝒊𝒔@.gender" /〉

〈!-- Select dropdown --〉
〈select dr-value="@𝒕𝒉𝒊𝒔@.country"〉
  〈option value="us"〉United States〈/option〉
  〈option value="kr"〉Korea〈/option〉
〈/select〉

〈!-- Textarea --〉
〈textarea dr-value="@𝒕𝒉𝒊𝒔@.comment"〉〈/textarea〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈form dr-event-submit="@𝒕𝒉𝒊𝒔@.handleSubmit($event)"〉
    〈div style="margin-bottom: 15px;"〉
      〈label〉Username:
        〈input
          type="text"
          dr-value="@𝒕𝒉𝒊𝒔@.form.username"
          placeholder="Enter username"
          style="display: block; width: 100%; padding: 8px;"
        /〉
      〈/label〉
    〈/div〉

    〈div style="margin-bottom: 15px;"〉
      〈label〉Email:
        〈input
          type="email"
          dr-value="@𝒕𝒉𝒊𝒔@.form.email"
          placeholder="Enter email"
          style="display: block; width: 100%; padding: 8px;"
        /〉
      〈/label〉
    〈/div〉

    〈div style="margin-bottom: 15px;"〉
      〈label〉Age:
        〈input
          type="number"
          dr-value="@𝒕𝒉𝒊𝒔@.form.age"
          min="18"
          max="100"
          style="display: block; width: 100%; padding: 8px;"
        /〉
      〈/label〉
    〈/div〉

    〈div style="margin-bottom: 15px;"〉
      〈label〉
        〈input type="checkbox" dr-value="@𝒕𝒉𝒊𝒔@.form.terms" /〉
        I agree to terms and conditions
      〈/label〉
    〈/div〉

    〈button
      type="submit"
      dr-attr="disabled:\${!@𝒕𝒉𝒊𝒔@.isValid}$"
      style="padding: 10px 20px; background: #3b82f6; color: white; border: none; cursor: pointer;"〉
      Submit
    〈/button〉
  〈/form〉

  〈div dr-if="@𝒕𝒉𝒊𝒔@.submitted" style="margin-top: 20px; padding: 15px; background: #dcfce7;"〉
    〈h3〉Form Submitted!〈/h3〉
    〈pre〉\${JSON.stringify(@𝒕𝒉𝒊𝒔@.form, null, 2)}$〈/pre〉
  〈/div〉
`;

let state = {
  form: {
    username: '',
    email: '',
    age: 18,
    terms: false
  },
  submitted: false,
  get isValid() {
    return this.form.username.length 〉 0
        && this.form.email.includes('@')
        && this.form.age 〉= 18
        && this.form.terms;
  },
  handleSubmit(e) {
    e.preventDefault();
    if (this.isValid) {
      this.submitted = true;
      console.log('Form data:', this.form);
    }
  }
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;

import { RequiredValidator } from '@dooboostore/dom-render/validators/RequiredValidator';
import { RegExpTestValidator } from '@dooboostore/dom-render/validators/RegExpTestValidator';

const emailValidator - new RegExpTestValidator(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/);

import { DomRender } from '@dooboostore/dom-render/DomRender';

const app = new DomRender({
  rootObject: { currentPage: 'home' },
  target: document.body,
  config: {
    window,
    routerType: 'hash'  // Uses URL hash: #/home, #/about
  }
});

// Navigate programmatically
app.router.go('/home');
app.router.go('/users/123');

import { DomRender } from '@dooboostore/dom-render/DomRender';

const app = new DomRender({
  rootObject: { currentPage: 'home' },
  target: document.body,
  config: {
    window,
    routerType: 'path'  // Uses real paths: /home, /about
  }
});

// Navigate programmatically
app.router.go('/home');
app.router.go('/users/123');

〈!-- Static routes --〉
〈dr-route-match path="/home"〉
  〈div〉Home Page〈/div〉
〈/dr-route-match〉

〈dr-route-match path="/about"〉
  〈div〉About Page〈/div〉
〈/dr-route-match〉

〈!-- Dynamic route parameters --〉
〈dr-route-match path="/users/:id"〉
  〈div〉User ID: \${@𝒕𝒉𝒊𝒔@.router.params.id}$〈/div〉
〈/dr-route-match〉

〈!-- Multiple parameters --〉
〈dr-route-match path="/posts/:category/:postId"〉
  〈div〉
    Category: \${@𝒕𝒉𝒊𝒔@.router.params.category}$
    Post: \${@𝒕𝒉𝒊𝒔@.router.params.postId}$
  〈/div〉
〈/dr-route-match〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈nav style="padding: 20px; background: #f1f5f9; margin-bottom: 20px;"〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.navigate('/home')"〉Home〈/button〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.navigate('/about')"〉About〈/button〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.navigate('/users/123')"〉User 123〈/button〉
    〈button dr-event-click="@𝒕𝒉𝒊𝒔@.navigate('/users/456')"〉User 456〈/button〉
  〈/nav〉

  〈main style="padding: 20px;"〉
    〈dr-route-match path="/home"〉
      〈div style="padding: 20px; background: #dbeafe;"〉
        〈h2〉Home Page〈/h2〉
        〈p〉Welcome to the home page!〈/p〉
      〈/div〉
    〈/dr-route-match〉

    〈dr-route-match path="/about"〉
      〈div style="padding: 20px; background: #dcfce7;"〉
        〈h2〉About Page〈/h2〉
        〈p〉Learn more about us.〈/p〉
      〈/div〉
    〈/dr-route-match〉

    〈dr-route-match path="/users/:id"〉
      〈div style="padding: 20px; background: #fef3c7;"〉
        〈h2〉User Profile〈/h2〉
        〈p〉User ID: 〈strong〉\${@𝒕𝒉𝒊𝒔@.router.params.id}$〈/strong〉〈/p〉
        〈p〉Full path: \${@𝒕𝒉𝒊𝒔@.router.currentPath}$〈/p〉
      〈/div〉
    〈/dr-route-match〉
  〈/main〉
`;

let state = {
  router: null,
  navigate(path) {
    this.router?.go(path);
  }
};

const app = new DomRender({
  rootObject: state,
  target: container,
  config: { window, routerType: 'hash' }
});

state = app.rootObject;
state.router = app.router;

// Initial navigation
app.router.go('/home');

〈dr-promise-switch promise="\${@𝒕𝒉𝒊𝒔@.dataPromise}$"〉
  〈dr-pending〉
    〈div〉Loading...〈/div〉
  〈/dr-pending〉

  〈dr-fulfilled〉
    〈div〉Data: \${@𝒕𝒉𝒊𝒔@.data}$〈/div〉
  〈/dr-fulfilled〉

  〈dr-rejected〉
    〈div〉Error: \${@𝒕𝒉𝒊𝒔@.error}$〈/div〉
  〈/dr-rejected〉
〈/dr-promise-switch〉

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈button dr-event-click="@𝒕𝒉𝒊𝒔@.fetchData()"〉Fetch Data〈/button〉
  〈button dr-event-click="@𝒕𝒉𝒊𝒔@.fetchWithError()"〉Fetch with Error〈/button〉

  〈dr-promise-switch promise="\${@𝒕𝒉𝒊𝒔@.dataPromise}$"〉
    〈dr-pending〉
      〈div style="padding: 20px; background: #dbeafe; margin: 20px 0;"〉
        〈h3〉⏳ Loading...〈/h3〉
        〈p〉Please wait while we fetch the data.〈/p〉
      〈/div〉
    〈/dr-pending〉

    〈dr-fulfilled〉
      〈div style="padding: 20px; background: #dcfce7; margin: 20px 0;"〉
        〈h3〉✅ Success!〈/h3〉
        〈p〉Data: 〈strong〉\${@𝒕𝒉𝒊𝒔@.result}$〈/strong〉〈/p〉
        〈p〉Loaded at: \${@𝒕𝒉𝒊𝒔@.loadedAt}$〈/p〉
      〈/div〉
    〈/dr-fulfilled〉

    〈dr-rejected〉
      〈div style="padding: 20px; background: #fee2e2; margin: 20px 0;"〉
        〈h3〉❌ Error〈/h3〉
        〈p〉Failed to load data: \${@𝒕𝒉𝒊𝒔@.errorMessage}$〈/p〉
        〈button dr-event-click="@𝒕𝒉𝒊𝒔@.fetchData()"〉Retry〈/button〉
      〈/div〉
    〈/dr-rejected〉
  〈/dr-promise-switch〉
`;

let state = {
  dataPromise: null,
  result: null,
  errorMessage: null,
  loadedAt: null,

  fetchData() {
    this.dataPromise = new Promise((resolve) =〉 {
      setTimeout(() =〉 {
        this.result = `Data loaded at ${new Date().toLocaleTimeString()}`;
        this.loadedAt = new Date().toLocaleTimeString();
        resolve(this.result);
      }, 2000);
    });
  },

  fetchWithError() {
    this.dataPromise = new Promise((_, reject) =〉 {
      setTimeout(() =〉 {
        this.errorMessage = 'Network connection failed';
        reject(new Error(this.errorMessage));
      }, 1000);
    });
  }
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;

import { DomRender } from '@dooboostore/dom-render/DomRender';

const container = document.createElement('div');
container.innerHTML = `
  〈div style="padding: 20px; background: #f1f5f9; text-align: center;"〉
    〈h2〉Current Time〈/h2〉
    〈p style="font-size: 48px; font-weight: bold;"〉
      \${@𝒕𝒉𝒊𝒔@.currentTime}$
    〈/p〉
    〈p〉Updates every second〈/p〉
  〈/div〉

  〈dr-timer interval="1000" dr-event-tick="@𝒕𝒉𝒊𝒔@.updateTime()"〉〈/dr-timer〉
`;

let state = {
  currentTime: new Date().toLocaleTimeString(),
  updateTime() {
    this.currentTime = new Date().toLocaleTimeString();
  }
};

state = new DomRender({
  rootObject: state,
  target: container,
  config: { window }
}).rootObject;