Vanilla XHTM

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

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/591770/1907698/Vanilla%20XHTM.js

Stellen Sie eine Frage, veröffentlichen Sie eine Bewertung oder melden Sie das Skript.

Autor: Paesss
Version: 1.8.0
Erstellt am: 17.08.2026
Letzte Aktualisierung: 20.08.2026
Größe: 9,42 KB
Lizenz: 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>`