HTM - JSX 的替代品？还是另一种选择？

Preact	Omi

原文链接

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></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

omi-html