# mich-h

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

Latest version **0.3.1** (published 2017-02-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install mich-h
pnpm add mich-h
yarn add mich-h
bun add mich-h
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2017-02-11 |
| First published | 2017-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Charlike Mike Reagent |
| Maintainers | tunnckocore |

## Links

- npm: https://www.npmjs.com/package/mich-h
- Repository: https://github.com/tunnckocore/mich-h
- Homepage: https://github.com/tunnckocore/mich-h#readme
- Issues: https://github.com/tunnckocore/mich-h/issues
- npm.io page: https://npm.io/package/mich-h

## Recent versions

- 0.3.1 (latest) — 2017-02-11
- 0.3.0 — 2017-02-10
- 0.2.3 — 2017-02-10
- 0.2.2 — 2017-02-10
- 0.2.1 — 2017-02-10
- 0.2.0 — 2017-02-10
- 0.1.7 — 2017-02-10
- 0.1.6 — 2017-02-10
- 0.1.5 — 2017-02-10
- 0.1.4 — 2017-02-10
- 0.1.3 — 2017-02-10
- 0.1.2 — 2017-02-10
- 0.1.0 — 2017-02-10
- 0.0.0 — 2017-02-10

## README

# mich-h [![NPM version](https://img.shields.io/npm/v/mich-h.svg?style=flat)](https://www.npmjs.com/package/mich-h) [![NPM monthly downloads](https://img.shields.io/npm/dm/mich-h.svg?style=flat)](https://npmjs.org/package/mich-h) [![npm total downloads][downloads-img]][downloads-url]

> Create [HAST](https://github.com/syntax-tree/hast)-compliant virtual trees of HTML using [hyperscript][] compatible syntax, just in ~550 bytes.

[![codeclimate][codeclimate-img]][codeclimate-url] 
[![codestyle][standard-img]][standard-url] 
[![linux build][travis-img]][travis-url] 
[![windows build][appveyor-img]][appveyor-url] 
[![codecov][coverage-img]][coverage-url] 
[![dependency status][david-img]][david-url]

_You might also be interested in [hyperscript][] or the [HAST](https://github.com/syntax-tree/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](http://codepen.io/tunnckoCore/pen/xgQKzr?editors=0010)**

## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [API](#api)
- [Related](#related)
- [Contributing](#contributing)
- [Building docs](#building-docs)
- [Running tests](#running-tests)
- [Author](#author)
- [License](#license)

_(TOC generated by [verb](https://github.com/verbose/verb) using [markdown-toc](https://github.com/jonschlinkert/markdown-toc))_

## Install
Install with [npm](https://www.npmjs.com/)

```
$ npm install mich-h --save
```

or install using [yarn](https://yarnpkg.com)

```
$ yarn add mich-h
```

Builds are also available on [unpkg](https://unpkg.com/) CDN, so iniclude

```html
<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.

```html
<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](http://codepen.io/tunnckoCore/pen/ZLmEyJ) or [JSBin](http://jsbin.com/bahefanasi/2/edit?css,js,output) Example**

## Usage
> For more use-cases see the [tests](test.js)

```js
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](https://jasonformat.com/wtf-is-jsx/) somewhere at the top

```jsx
/** @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](http://codepen.io/tunnckoCore/pen/xgQKzr?editors=0010)
- [Showing AST of pseudo JSX router](http://codepen.io/tunnckoCore/pen/LxXYBq?editors=0010)

## API

## Related
- [hastscript](https://www.npmjs.com/package/hastscript): Hyperscript compatible DSL for creating virtual HAST trees | [homepage](https://github.com/wooorm/hastscript#readme "Hyperscript compatible DSL for creating virtual HAST trees")
- [hyperscript](https://www.npmjs.com/package/hyperscript): Create HyperText with JavaScript, on client or server. | [homepage](https://github.com/dominictarr/hyperscript "Create HyperText with JavaScript, on client or server.")
- [mich-parse-selector](https://www.npmjs.com/package/mich-parse-selector): Tiny parser for simple CSS selectors, just in ~300 bytes.  Pretty similar to what is done in [hyperscript][] | [homepage](https://github.com/tunnckocore/mich-parse-selector#readme "Tiny parser for simple CSS selectors, just in ~300 bytes.  Pretty similar to what is done in [hyperscript][]")
- [posthtml](https://www.npmjs.com/package/posthtml): HTML/XML processor | [homepage](https://github.com/posthtml/posthtml "HTML/XML processor")
- [rehype](https://www.npmjs.com/package/rehype): HTML processor powered by plugins | [homepage](https://github.com/wooorm/rehype "HTML processor powered by plugins")
- [reshape](https://www.npmjs.com/package/reshape): A plugin-based html template engine | [homepage](https://github.com/reshape/reshape "A plugin-based html template engine")
- [virtual-dom](https://www.npmjs.com/package/virtual-dom): A batched diff-based DOM rendering strategy | [homepage](https://github.com/Matt-Esch/virtual-dom "A batched diff-based DOM rendering strategy")
- [virtual-html](https://www.npmjs.com/package/virtual-html): Convert given HTML into Virtual DOM object | [homepage](https://github.com/azer/virtual-html#readme "Convert given HTML into Virtual DOM object")

## Contributing
Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](https://github.com/tunnckoCore/mich-h/issues/new).  
Please read the [contributing guidelines](CONTRIBUTING.md) 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](https://www.codementor.io/tunnckocore?utm_source=github&utm_medium=button&utm_term=tunnckocore&utm_campaign=github) too.

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

1. Please DO NOT edit [README.md](README.md), [CHANGELOG.md](CHANGELOG.md) and [.verb.md](.verb.md) files. See ["Building docs"](#building-docs) section.
2. Ensure anything is okey by installing the dependencies and run the tests. See ["Running tests"](#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](.verb.md)._

## Running tests
Clone repository and run the following in that cloned directory

```
$ npm install && npm test
```

## Author
**Charlike Mike Reagent**

+ [github/tunnckoCore](https://github.com/tunnckoCore)
+ [twitter/tunnckoCore](https://twitter.com/tunnckoCore)
+ [codementor/tunnckoCore](https://codementor.io/tunnckoCore)

## License
Copyright © 2016-2017, [Charlike Mike Reagent](https://i.am.charlike.online). Released under the [MIT license](LICENSE).

***

_This file was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme), v0.4.1, on February 10, 2017._  
_Project scaffolded using [charlike][] cli._

[always-done]: https://github.com/hybridables/always-done
[async-done]: https://github.com/gulpjs/async-done
[base]: https://github.com/node-base/base
[charlike]: https://github.com/tunnckocore/charlike
[commitizen]: https://github.com/commitizen/cz-cli
[dezalgo]: https://github.com/npm/dezalgo
[hyperscript]: https://github.com/dominictarr/hyperscript
[once]: https://github.com/isaacs/once
[standard-version]: https://github.com/conventional-changelog/standard-version
[verb-generate-readme]: https://github.com/verbose/verb-generate-readme
[verb]: https://github.com/verbose/verb

[always-done]: https://github.com/hybridables/always-done
[async-done]: https://github.com/gulpjs/async-done
[base]: https://github.com/node-base/base
[charlike]: https://github.com/tunnckocore/charlike
[commitizen]: https://github.com/commitizen/cz-cli
[dezalgo]: https://github.com/npm/dezalgo
[hyperscript]: https://github.com/dominictarr/hyperscript
[once]: https://github.com/isaacs/once
[standard-version]: https://github.com/conventional-changelog/standard-version
[verb-generate-readme]: https://github.com/verbose/verb-generate-readme
[verb]: https://github.com/verbose/verb

[downloads-url]: https://www.npmjs.com/package/mich-h
[downloads-img]: https://img.shields.io/npm/dt/mich-h.svg

[codeclimate-url]: https://codeclimate.com/github/tunnckoCore/mich-h
[codeclimate-img]: https://img.shields.io/codeclimate/github/tunnckoCore/mich-h.svg

[travis-url]: https://travis-ci.org/tunnckoCore/mich-h
[travis-img]: https://img.shields.io/travis/tunnckoCore/mich-h/master.svg?label=linux

[appveyor-url]: https://ci.appveyor.com/project/tunnckoCore/mich-h
[appveyor-img]: https://img.shields.io/appveyor/ci/tunnckoCore/mich-h/master.svg?label=windows

[coverage-url]: https://codecov.io/gh/tunnckoCore/mich-h
[coverage-img]: https://img.shields.io/codecov/c/github/tunnckoCore/mich-h/master.svg

[david-url]: https://david-dm.org/tunnckoCore/mich-h
[david-img]: https://img.shields.io/david/tunnckoCore/mich-h.svg

[standard-url]: https://github.com/feross/standard
[standard-img]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg

[hastscript]: https://github.com/wooorm/hastscript

---
_Source: https://npm.io/package/mich-h · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._