HTM - JSX 的替代品？還是另一種選擇？

當耐特發表於2018-11-22
JS

HTM - JSX 的替代品？還是另一種選擇？

Preact Omi
hyperscript tagged markup demo hyperscript tagged markup demo

原文連結

htm 全稱是 Hyperscript Tagged Markup，是一款與 JSX 語法類似的東西，相比 JSX 它最大的優點是:

  • 不需要編譯器
  • 直接在現代瀏覽器中執行，只要你的瀏覽器支援 Tagged templates 就行

所以，你可以直接在 react、preact 或者 omi 中使用並且直接在瀏覽器中執行，不需要任何編譯。它利用了 Tagged templates 和瀏覽器自帶的 HTML parser。

極小的尺寸

  • 直接在瀏覽器中使用只有 700 位元組，1KB 都不到
  • 在 preact 中使用只有 500 位元組
  • 如果使用 babel-plugin-htm 只需要 0 位元組

語法 - 像 JSX 也像 lit-html

htm 是受 lit-html 啟發，但是包含了 JSX 裡的這些特性:

  • 剩餘擴充套件: <div ...${props}>
  • 標籤自關閉: <div />
  • 動態標籤名: <${tagName}> ( tagName 是元素的引用)
  • 布林屬性: <div draggable />

對 JSX 的改進

htm 確確實實地基於 JSX 之上做了大量改進，比如下面這些特性是 JSX 所沒有的:

  • 不需要編譯器，直接在瀏覽器中執行
  • HTML 的可選分號的方式: <div class=foo>
  • HTML 的自關閉: <img src=${url}>
  • 可選的關閉標籤: <section><h1>this is the whole template!
  • 元件關閉標籤: <${Footer}>footer content<//>
  • 支援 HTML 註釋: <div><!-- don't delete this! --></div>
  • 安裝 lit-html VSCode extension 語法高亮

專案狀態

HTM最初的目標是在Preact周圍建立一個包裝器，使用它在瀏覽器中不受干擾。我想使用虛擬DOM，但我不想用構建工具，直接使用ES模組。

這意味著要放棄JSX，最接近的替代方案是 [Tagged_templates]。所以，我寫了這個庫來修補兩者之間的差異。事實證明，該技術是框架無關的，因此它應該與大多數虛擬 DOM 庫一起工作。

安裝

htm 釋出到了 npm, 也可以訪問 unpkg.com 的 CDN:

npm i htm
複製程式碼

從unpkg獲取:

import htm from 'https://unpkg.com/htm?module'
const html = htm.bind(React.createElement);
複製程式碼
// just want htm + preact in a single file? there's a highly-optimized version of that:
import { html, render } from 'https://unpkg.com/htm/preact/standalone.mjs'
複製程式碼

使用指南

既然 htm 是一個通用的庫，我們需要告訴它怎麼“編譯”我們的模板。

目標應該是形式 h(tag, props, ...children) (hyperscript), 的函式，並且可以返回任何東西。

// 這是我們的 h 函式。現在，它只返回一個描述物件。
function h(tag, props, ...children) {
  return { tag, props, children };
}
複製程式碼

為了使用那個 h 函式，我們需要通過繫結htm到我們的h函式來建立我們自己的 HTML 標籤函式：

import htm from 'htm';

const html = htm.bind(h);
複製程式碼

現在我們有一個html模板標籤，可以用來生成上面建立的格式的物件，比如：

import htm from 'htm';

function h(tag, props, ...children) {
  return { tag, props, children };
}

const html = htm.bind(h);

console.log( html`<h1 id=hello>Hello world!</h1>` );
// {
//   tag: 'h1',
//   props: { id: 'hello' },
//   children: ['Hello world!']
// }
複製程式碼

舉個例子

好奇地想看看這一切是什麼樣子的？這是一個工作應用程式！

它是單個HTML檔案，沒有構建或工具。你可以用Nano編輯它。

<!DOCTYPE html>
<html lang="en">
  <title>htm Demo</title>
  <script type="module">
    import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.mjs';

    class App extends Component {
      addTodo() {
        const { todos = [] } = this.state;
        this.setState({ todos: todos.concat(`Item ${todos.length}`) });
      }
      render({ page }, { todos = [] }) {
        return html`
          <div class="app">
            <${Header} name="ToDo's (${page})" />
            <ul>
              ${todos.map(todo => html`
                <li>${todo}</li>
              `)}
            </ul>
            <button onClick=${() => this.addTodo()}>Add Todo</button>
            <${Footer}>footer content here<//>
          </div>
        `;
      }
    }
		  
    const Header = ({ name }) => html`<h1>${name} List</h1>`

    const Footer = props => html`<footer ...${props} />`

    render(html`<${App} page="All" />`, document.body);
  </script>
</html>
複製程式碼

這是一個Preact 線上版本.

那真是太好了？注意，只有一個匯入-這裡我們只使用了 import 與 Preact 整合，因為它更容易匯入和更小。

同樣的示例在沒有預構建版本的情況下執行良好，只需使用兩個匯入：

import { h, Component, render } from 'preact';
import htm from 'htm';

const html = htm.bind(h);

render(html`<${App} page="All" />`, document.body);
複製程式碼

其他使用方式

因為htm被設計成滿足JSX的相同需求，所以您可以使用JSX的任何地方使用它。

** 使用 vhtml 生成 HTML:**

import htm from 'htm';
import vhtml from 'vhtml';

const html = htm.bind(vhtml);

console.log( html`<h1 id=hello>Hello world!</h1>` );
// '<h1 id="hello">Hello world!</h1>'
複製程式碼

Webpack configuration via jsxobj: (details here)

import htm from 'htm';
import jsxobj from 'jsxobj';

const html = htm.bind(jsxobj);

console.log(html`
  <webpack watch mode=production>
    <entry path="src/index.js" />
  </webpack>
`);
// {
//   watch: true,
//   mode: 'production',
//   entry: {
//     path: 'src/index.js'
//   }
// }
複製程式碼

omi-html

在 omi 中使用 htm

→ 線上例子

Usage of omi-html

import { define, render, WeElement } from 'omi'
import 'omi-html'

define('my-counter', class extends WeElement {
  static observe = true

  data = {
    count: 1
  }

  sub = () => {
    this.data.count--
  }

  add = () => {
    this.data.count++
  }

  render() {
    return html`
      <div>
        <button onClick=${this.sub}>-</button>
        <span>${this.data.count}</span>
        <button onClick=${this.add}>+</button>
      </div>`
  }
})

render(html`<my-counter />`, 'body')
複製程式碼

直接執行在瀏覽器

<script src="https://unpkg.com/omi"></script>
<script src="https://unpkg.com/omi-html"></script>
<script>
  const { define, WeElement, render } = Omi

  define('my-counter', class extends WeElement {

    install() {
      this.constructor.observe = true
      this.data.count = 1
      this.sub = this.sub.bind(this)
      this.add = this.add.bind(this)
    }

    sub() {
      this.data.count--
    }

    add() {
      this.data.count++
    }

    render() {
      return html`
        <div>
          <button onClick=${this.sub}>-</button>
          <span>${this.data.count}</span>
          <button onClick=${this.add}>+</button>
        </div>
        `}
  })

  render(html`<my-counter />`, 'body')
</script>
複製程式碼

Star & Fork

相關文章