Vanilla XHTM

Framework-free JSX-like syntax in pure JS using XHTM and native DOM creation.

Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.greasyfork.org/scripts/591770/1907698/Vanilla%20XHTM.js

Spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.

Autor: Paesss
Verzia: 1.8.0
Vytvorené: 17.08.2026
Aktualizované: 20.08.2026
Veľkosť: 9,4 KB
Licencia: MIT

Vanilla XHTM brings a light, framework-free JSX-like syntax to native JavaScript using tagged template literals. It parses HTML strings directly into real DOM nodes (not Virtual DOM), making UI creation inside UserScripts incredibly fast and painless.

✨ Key Capabilities

Native DOM Output: Returns true HTMLElement, SVGElement, and DocumentFragment instances ready for appendChild().
Functional Components: Pass function references directly inside template tags (e.g., <${Component} />).
Native Event Handlers: Attach functions directly to inline events using onclick=${handler}.
Style & Dataset Objects: Supports style objects (style=${{ color: 'red' }}) and dataset objects (dataset=${{ id: 1 }}).
Property Bindings: Set raw element properties directly by prefixing attributes with a dot (e.g., .value=${val}).

🚀 Quick Example

// ==UserScript==
// @name         Vanilla XHTM Demo
// @namespace    https://greasyfork.org/users/1635096-paesss
// @version      1.0.0
// @description  Example script demonstrating Vanilla XHTM library usage.
// @author       Paesss
// @match        *://*/*
// @grant        none
// @require      https://update.greasyfork.org/scripts/591770/1907663/Vanilla%20XHTM.js
// ==/UserScript==

(function () {
  'use strict';

  // 1. Functional component returning raw HTML nodes
  function Button({ label, onClick }) {
    return html`
      <button
        style=${{
          background: '#2ea44f',
          color: '#ffffff',
          border: 'none',
          padding: '8px 12px',
          borderRadius: '6px',
          cursor: 'pointer',
          fontWeight: '600'
        }}
        onclick=${onClick}
      >
        ${label}
      </button>
    `;
  }

  // 2. Minimal reactive state using a native Text Node
  let count = 0;
  const countText = document.createTextNode(count);

  // 3. Build UI component tree
  const widget = html`
    <div
      class="xhtm-demo-widget"
      style="position: fixed; bottom: 20px; right: 20px; padding: 16px; background: #ffffff; border: 1px solid #e1e4e8; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 99999; font-family: system-ui, -apple-system, sans-serif; color: #24292e;"
    >
      <h4 style="margin: 0 0 8px 0; font-size: 14px;">Vanilla XHTM Active</h4>
      <p style="margin: 0 0 12px 0; font-size: 13px;">
        Counter: <strong>${countText}</strong>
      </p>

      <${Button}
        label="Increment"
        onClick=${() => {
          count++;
          countText.nodeValue = count; // Updates text node directly without virtual DOM diffing
        }}
      />
    </div>
  `;

  // 4. Append standard DOM Node directly to the page body
  if (document.body) {
    document.body.appendChild(widget);
  } else {
    window.addEventListener('DOMContentLoaded', () => document.body.appendChild(widget));
  }
})();

🛠️ Cheat Sheet

Feature	Syntax Example
Class Names	html`<div class=${className}></div>`
Direct Properties	html`<input .value=${myVal} />`
Fragments	html`<p>One</p><p>Two</p>`
List Rendering	html`<ul>${items.map(i => html`<li>${i}</li>`)}</ul>`