Vanilla XHTM

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

このスクリプトは単体で利用できません。右のようなメタデータを含むスクリプトから、ライブラリとして読み込まれます: // @require https://update.greasyfork.org/scripts/591770/1907698/Vanilla%20XHTM.js

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください

作者: Paesss
バージョン: 1.8.0
作成日: 2026/08/17
更新日: 2026/08/20
大きさ: 9.42KB
ライセンス: 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>`