• Quick Start 🔥

  The Virtual DOM library you'll actually enjoy using.

  • Setup

    install space first.

    # install
    space i @je-es/vdom

  • Usage

    // import
    import { createElement, render } from '@je-es/vdom';
    
    // Create your app
    const app = createElement('div', { className: 'app' },
        createElement('h1', {}, 'Hello, World! 👋'),
        createElement('p', {}, 'You just built your first VDOM app!')
    );
    
    // Render it
    render(app, document.getElementById('root'));

    That's it! You now have a working app.

  
  

  • Core Features

    • JSX & Tagged Templates

      // Use JSX (with proper tsconfig)
      const app = <div className="app">Hello JSX!</div>;
      
      // Or use html tagged templates
      import { html } from '@je-es/vdom';
      const name = 'World';
      const app = html`<div class="app">Hello ${name}!</div>`;

    
    

    • Event Handlers

      const handleClick = (e) => console.log('Clicked!');
      
      const button = createElement('button', {
          onclick: handleClick
      }, 'Click Me');
      
      // Or with html template
      const button = html`<button onclick=${handleClick}>Click Me</button>`;

    
    

    • Dynamic Lists

      const items = ['Apple', 'Banana', 'Cherry'];
      
      const list = createElement('ul', {},
          ...items.map(item =>
              createElement('li', { key: item }, item)
          )
      );
      
      // With html template
      const list = html`<ul>${items.map(i => html`<li key=${i}>${i}</li>`)}</ul>`;

    
    

    • Efficient Updates

      // Initial render
      let count = 0;
      const render = () => {
          const app = createElement('div', {},
              createElement('h1', {}, `Count: ${count}`),
              createElement('button', {
                  onclick: () => { count++; update(); }
              }, '+')
          );
          return app;
      };
      
      const container = document.getElementById('root');
      let oldVNode = render();
      render(oldVNode, container);
      
      // Update efficiently with patch
      function update() {
          const newVNode = render();
          patch(container, oldVNode, newVNode, 0);
          oldVNode = newVNode;
      }

  
  

  • Advanced Usage

    • Fragments

      import { Fragment } from '@je-es/vdom';
      
      // Group elements without wrapper
      const nav = Fragment(
          createElement('a', { href: '/' }, 'Home'),
          createElement('a', { href: '/about' }, 'About')
      );
      
      // With html template
      const nav = html`
          <a href="/">Home</a>
          <a href="/about">About</a>
      `;

    
    

    • Refs & DOM Access

      let inputRef = null;
      
      const form = createElement('div', {},
          createElement('input', {
              ref: (el) => { inputRef = el; },
              placeholder: 'Enter text'
          }),
          createElement('button', {
              onclick: () => inputRef?.focus()
          }, 'Focus Input')
      );

    
    

    • Keyed Lists for Performance

      // Without keys - full re-render
      const list = items.map(item => createElement('li', {}, item));
      
      // With keys - smart diffing
      const list = items.map(item =>
          createElement('li', { key: item.id }, item.name)
      );

    
    

    • Configuration

      import { setConfig } from '@je-es/vdom';
      
      setConfig({
          devMode: true,              // Enable warnings
          sanitizeHTML: true,         // XSS protection
          onError: (err) => {         // Custom error handler
              console.error('VDOM Error:', err);
          }
      });

---