mich-h

Create HAST-compliant virtual trees of HTML using hyperscript compatible syntax, just in ~550 bytes.

You might also be interested in hyperscript or the HAST alternative hastscript. It may looks that mich-h is pretty similar, but it's smaller and maybe not so perfect in some (edge) cases - it's enough in most, really.

JSX CodePen Example

Table of Contents

• Install
• Usage
• API
• Related
• Contributing
• Building docs
• Running tests
• Author
• License

(TOC generated by verb using markdown-toc)

Install

Install with npm

$ npm install mich-h --save

or install using yarn

$ yarn add mich-h

Builds are also available on unpkg CDN, so iniclude

<script src="https://unpkg.com/mich-h/dist/mich-h.min.js"></script>

then access mich-h through the michH global property - notice the uppercased H letter.

<script>
  const h = michH
  const node = h('h1.hero#home.big', 'Hello World')

  console.log(node.tagName)
  // => h1

  console.log(node.properties.id)
  // => home

  console.log(node.properties.className)
  // => [ 'hero', 'big' ]

  console.log(node.children[0])
  // => { type: 'text', value: 'Hello World' }
</script>

Try CodePen or JSBin Example

Usage

For more use-cases see the tests

const h = require('mich-h')

const tree = h('div#page',
  h('#header', // if tag name is not given, defaults to `div`
    h('h1.classy', { style: 'background-color: #333; color: purple' })),
  h('nav#menu', { style: {'background': '#2f2'} },
    h('ul',
      h('li', 'one'),
      h('li.sec', 'two'),
      h('li', 'three'))),
  h('h2#title', 'content title',  { style: {'background-color': 'red'} }),
  h('p.first', // classes of that `p` would be `first, foobie`
    { className: 'foobie' },
    "so it's just like a templating engine,\n",
    "but easy to use inline with javascript\n",
    { onclick: () => {} }
  ),
  h('p',
    "the intention is for this to be used to create\n",
    h('strong', 'charlike', { style: 'background: white; color: green' }),
    " reusable, interactive html widgets. "))

console.log(tree)

Or using it with modern JSX syntax, adding JSX Pragma somewhere at the top

/** @jsx h */
const h = require('mich-h')

const tree = <div id="page">
  <div id="header">
    <h1 class="classy" style="background-color: #333; color: purple"></h1>
  </div>
  <nav id="menu" style="background: #2f2;">
    <ul>
      <li>one</li>
      <li class="sec">two</li>
      <li>three</li>
    </ul>
  </nav>
  <h2 id="title" style="background-color: red;">content title</h2>
  <p class="first foobie">so it's just like a templating engine,
  but easy to use inline with javascript</p>
  <p>the intention is for this to be usedto create <strong>charlike</strong>
  reusable, interactive html widgets.</p>
</div>

console.log(tree)

Examples:

• CodePen Example, using JSX
• Showing AST of pseudo JSX router

API

Related

• hastscript: Hyperscript compatible DSL for creating virtual HAST trees | homepage
• hyperscript: Create HyperText with JavaScript, on client or server. | homepage
• mich-parse-selector: Tiny parser for simple CSS selectors, just in ~300 bytes. Pretty similar to what is done in hyperscript | homepage
• posthtml: HTML/XML processor | homepage
• rehype: HTML processor powered by plugins | homepage
• reshape: A plugin-based html template engine | homepage
• virtual-dom: A batched diff-based DOM rendering strategy | homepage
• virtual-html: Convert given HTML into Virtual DOM object | homepage

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Please read the contributing guidelines for advice on opening issues, pull requests, and coding standards.
If you need some help and can spent some cash, feel free to contact me at CodeMentor.io too.

In short: If you want to contribute to that project, please follow these things

1. Please DO NOT edit README.md, CHANGELOG.md and .verb.md files. See "Building docs" section.
2. Ensure anything is okey by installing the dependencies and run the tests. See "Running tests" section.
3. Always use npm run commit to commit changes instead of git commit, because it is interactive and user-friendly. It uses commitizen behind the scenes, which follows Conventional Changelog idealogy.
4. Do NOT bump the version in package.json. For that we use npm run release, which is standard-version and follows Conventional Changelog idealogy.

Thanks a lot! :)

Building docs

Documentation and that readme is generated using verb-generate-readme, which is a verb generator, so you need to install both of them and then run verb command like that

$ npm install verbose/verb#dev verb-generate-readme --global && verb

Please don't edit the README directly. Any changes to the readme must be made in .verb.md.

Running tests

Clone repository and run the following in that cloned directory

$ npm install && npm test

Author

Charlike Mike Reagent

• github/tunnckoCore
• twitter/tunnckoCore
• codementor/tunnckoCore

License

Copyright © 2016-2017, Charlike Mike Reagent. Released under the MIT license.

This file was generated by verb-generate-readme, v0.4.1, on February 10, 2017.
Project scaffolded using charlike cli.