Vanilla XHTM

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

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/591770/1907698/Vanilla%20XHTM.js

Đặt câu hỏi, đăng đánh giá, hoặc báo cáo tập lệnh.

Tác giả: Paesss
Phiên bản: 1.8.0
Đã tạo: 17-08-2026
Đã cập nhật: 20-08-2026
Kích thước: 9 KB
Giấy phép: 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>`