Direct Reactive DOM Binding
for JavaScript

<!-- 1. VinylJS Production Core (Required, Minified) -->
<script src="https://vinyljs.com/vinyl.js"></script>

<!-- 2. DJ Time-Travel DevTools Add-on (Optional, Load below vinyl.js during development) -->
<script src="https://vinyljs.com/vinyl.debug.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VinylJS App</title>
  <!-- Load VinylJS via Global Edge CDN -->
  <script src="https://vinyljs.com/vinyl.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ greeting }}</h1>
    <input type="text" bind="greeting:value">
    <p>Count: <strong>{{ count }}</strong></p>
    <button onclick="state.count++">Increment</button>
  </div>

  <script>
    const state = vj.bind('#app', {
      greeting: 'Welcome to VinylJS 🎧',
      count: 0
    });
  </script>
</body>
</html>

<!-- 1. Shorthand (Smart Auto-Attribute based on tag type) -->
<input bind="userName">              <!-- Model: userName, Attribute: auto 'value' -->
<input type="checkbox" bind="isVip"> <!-- Model: isVip,    Attribute: auto 'checked' -->
<span bind="notice"></span>          <!-- Model: notice,   Attribute: auto 'text' -->

<!-- 2. Explicit Model : Attribute -->
<input bind="price:value">
<div bind="items:list"></div>
<span bind="description:html"></span>

<!-- 3. Full MAP Binding (Model : Attribute : Pipe) -->
<input bind="price:value:formatWon">

<!-- Dedicated input sanitization via pickup attribute -->
<input bind="price:value" pickup="cleanNumeric">

<style scope>
  .card { padding: 18px; border-radius: 10px; background: #0f172a; border: 1px solid #334155; }
  .name { color: #38bdf8; font-weight: bold; }
</style>

<div class="card">
  <h3 class="name">{{ name }}</h3>
  <p>{{ role }}</p>
</div>

<script>
  function init(el, model) {
    console.log('Mounted with model:', model);
  }
  function onDestroy(el) {
    console.log('Unmounted: Timers, styles, and listeners auto-cleaned');
  }
</script>

const state = vj.bind('#app', {
  user: { name: 'Taylor', age: 26 },
  tags: ['JavaScript', 'WebEngine']
});

// 1. Direct mutation triggers pinpoint DOM update instantly
state.user.name = 'Jordan';

// 2. Full native array mutation methods tracked
state.tags.push('Reactive');
state.tags.splice(0, 1);

// 3. Deep property watcher with wildcard '*' support
const unwatch = state.$watch('user.age', (newVal, oldVal) => {
  console.log(`Age updated from ${oldVal} to ${newVal}`);
});

// 4. Access raw unwrapped plain JS object
const rawObject = state.$raw;

// 5. Global reactive store accessible everywhere
const store = vj.store({ theme: 'dark', session: null });

// 1. Initialize router with container host
const router = new vj.pagemanager('#routerHost', {
  maxStackSize: 20
});

// 2. Navigate directly to HTML file (auto-loaded, scoped, and cached)
router.go('pages/profile.html', { id: 100 });
router.back();

<!-- pages/profile.html -->
<h1>Profile: {{ id }}</h1>
<input bind="userName:value">

<script>
  function init(el, state, navSignal) {
    console.log('Page loaded with param:', state);
  }
  function onFront(el) {
    console.log('Page brought to front');
  }
  function onDestroy(el) {
    console.log('Page destroyed');
  }
</script>

// Register inline template string
router.register('home', '<h1>Home Page</h1>');

// Or register component class with render() and lifecycle hooks
class ProfilePage {
  render(state) {
    return '<h1>Profile: {{ id }}</h1>';
  }
  init(el, state, navSignal) {
    console.log('Page init with param:', state);
  }
  onDestroy(el) {
    console.log('Page destroyed');
  }
}
router.register('profile', ProfilePage);

router.go('profile', { id: 100 });

// 1. Pipe HTML partial directly into a DOM container
vj.fetch('/partials/summary.html').into('#summaryBox');

// 2. Pipe JSON response directly into a reactive state object
vj.fetch('/api/user/profile').into(state.user);

// Rapid consecutive requests are automatically cancelled via AbortController
// guaranteeing Latest-Wins consistency without race conditions.