Minimal JSX-like tagged template literal for Hyperapp + babel plugin

栏目: IT技术 · 发布时间: 5年前

内容简介：Here's Hyperapp's "Quickstart" example using hyperlit:In the following instructions I will just focus on how hyperlit replaces Hyperapp's

hyperlit

hyperlit lets you declare your hyperapp views in a html-like fashion, similar to JSX. Unlike JSX you don't need a build-step and babel config to do it -- it happens run-time in your browser. It's quite small – ca 0.5kb.

Here's Hyperapp's "Quickstart" example using hyperlit:

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="module">
            import { app } from 'https://unpkg.com/hyperapp'
            import html from 'https://unpkg.com/hyperlit?module'

            app({
                init: 0,
                view: state => html`
                    <main>
                        <h1>${state}</h1>
                        <button onclick=${state => state - 1}>-</button>
                        <button onclick=${state => state + 1}>+</button>
                    </main>`,
                node: document.getElementById('app')
            })
        </script>
    </head>
    <body>
        <main id="app"></main>
    </body>
</html>

In the following instructions I will just focus on how hyperlit replaces Hyperapp's h function. For actually making working apps with this, familiarity with Hyperapp is assumed.

Getting hyperlit into your project

Using npm

In projects where you do bundle your app up, install hyperlit using:

npm i hyperlit

Note that hyperapp is a peer-dependency which you'll also need to have installed.

Once installed, you can import hyperlit wherever you declare views:

import html from 'hyperlit'

As ES-module

If you're not bundling your page, and you are importing Hyperapp from https://unpkg.com/hyperapp , then use this import instead:

import html from 'https://unpkg.com/hyperlit?module'

Old-school

Just drop this in after your hyperapp script-tag:

<script src="https://unpkg.com/hyperapp/dist/hyperapp.js"></script>
<script src="https://unpkg.com/hyperlit/dist/hyperlit.js"></script>
...

That will export a global html function which you use to declare the views.

Usage

Hyperlit replaces hyperapp's built-in h , allowing you to write:

html`
<div>
    <h1>Title</h1>
    <p>
        Content 1 <br />
        Content 2
    </p>
</div>`

instead of:

h('div', { class: 'big' }, [
    h('h1', {}, 'title'),
    h('p', { class: 'aligned' }, [
        'Content 1',
        h('br', {}),
        'Content 2'
    ]),
])

Injecting props

If you have non-string props you want to add to your vnodes, or values kept in variables, use the ${val} syntax to inject them:

const foo = 32
const node = html`<p class=${{ bigger: foo > 30 }}>...</p>`

Spreading props

If you have a bunch of props you want to assign, you don't have to write them out individually, you can just:

const props = {class: 'bigger', id: 'a-1', key: 'a-1'}
const node = html`<p ${props}>...</p>`

(For compatibility with views you may have written using htm , the ...${props} syntax is also supported)

Injecting content.

const name = 'Joe'
const greeting = html`<span>Hello ${name}!</span>`

results in h('span', {}, ['hello', 'joe', '!']) .

Content can be a string or a vnode. Content can also be an array:

const names = ['Kim', 'Robin', 'Sam']
const person = name => html`<p>${name}</p>`
const list = html`
<div>
    <p>Members:</p>
    ${names.map(person)}
</div>`

results in list being equivalent to:

h('div', {}, [
    h('p', {}, 'Members:'),
    h('p', {}, 'Kim'),
    h('p', {}, 'Robin'),
    h('p', {}, 'Sam'),
])

Since hyperapp filters out falsy children, you can conditionally render some content:

const show = false
html`<p>Secret: ${show && 'I work for the CIA'}</p>`

Components

Let's say you have this component:

const box = (props, content) => html`
<div class=${{ fancy: true, active: props.active }}>
    <h1>${props.title}</h1>
    ${content}
</div>`

You could of course add it to a view in this way:

const view = html`
<main>
    ${box({ active: false, title: 'My bio' }, [
        html`<p>Lorem ipsum</p>`,
        html`<p>Dolor sit amet</p>`,
    ])}
</main>`

But hyperlit allows you to do it this way as well:

const view = html`
<main>
    <${box} active=${false} title="My bio">
        <p>Lorem ipsum</p>
        <p>Dolor sit amet</p>
    <//>
</main>`

For backwards compatibility with htm it is also possible to close components as </${box}>

Tooling

Transform to plain function calls with Babel

This library is meant to let you write html-like views that can be rendered in the browser without any build step. Still, you might eventually perfer the parsing to be taken care of by your build-toolchain in order to get faster renders. Of course you should be able to do so! Simply add babel-plugin-hyperlit to your babel config. In package.json for example, it looks like this:

"babel": {
  "plugins": ["hyperlit"]
}

With that, babel will make sure to transform all your hyperlit views into plain function calls, so the browser doesn't have to do any parsing.

Syntax highlighting

If you use VS Code , install the lit-html to get highlighting and autocompletion that works well with hyperlit.

Credits

This project was inspired by Jason Miller's htm . I found there were some quirks using htm with Hyperapp, and Hyperapp was planning a move away from compatibility with htm anyway, so I wanted a similar solution that would work better for hyperapp going forward.

Thanks to Jorge Bucaran for making Hyperapp and for coming up with the name of this project!

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

Minimal JSX-like tagged template literal for Hyperapp + babel plugin

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Scrum敏捷软件开发

Mike Cohn / 廖靖斌、吕梁岳、陈争云、阳陆育 / 清华大学出版社 / 2010-11 / 69.00元

《Scrum敏捷软件开发》是敏捷联盟及Scrum联盟创始人之一、敏捷估算及计划的鼻祖Mike　Cohn三大经典著作中影响最为深厚的扛鼎之作，也是全球敏捷社区中获得广泛肯定的企业敏捷转型权威参考。作者花四年时间，把自己近十五年的敏捷实践经验，特别是近四年中针对各种敏捷转型企业的咨询和指导工作，并结合旁征博引的方式，从更高的思想层次对敏捷与Scrum多年来的经验和教训进行深入而前面的梳理和总结，最终集......一起来看看《Scrum敏捷软件开发》这本书的介绍吧!

码农工具