Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tunnckocore/mich-to-html

Tiny and naive implementation of rendering HAST-compliant virtual dom trees to HTML string, just in ~420 bytes.
https://github.com/tunnckocore/mich-to-html

ast dom hast hastscript html hyperscript mich render render-to-string server-side-rendering ssr virtual-dom

Last synced: 2 days ago
JSON representation

Tiny and naive implementation of rendering HAST-compliant virtual dom trees to HTML string, just in ~420 bytes.

Awesome Lists containing this project

README 

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



> Tiny and naive implementation of rendering HAST-compliant virtual dom trees to HTML string, just in ~420 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 [mich-h][] - virtual dom builder in just ~500 bytes, compatible with [hyperscript][]._



**Interactive [CodePen Example](http://codepen.io/tunnckoCore/pen/qRLBXY) which just works.**



## 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-to-html --save

```



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



```

$ yarn add mich-to-html

```



## Usage

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



```js

const h = require('mich-h')

const toHtml = require('mich-to-html')



const tree = h('h1.big#hero.header', 'Hello World')



const html = toHtml(tree)

console.log(html)

// => '
Hello World
'

```



Or, using the JSX syntax and adding the [JSX Pragma](https://jasonformat.com/wtf-is-jsx/) somewhere at the top



```jsx

/** @jsx h */

const h = require('mich-h')

const toHtml = require('mich-to-html')



const hi = 'Hello World'

const tree = 
{hi}



console.log(toHtml(tree))

// => '
Hello World
'

```



## API



TODO



## Related

- [always-done](https://www.npmjs.com/package/always-done): Handle completion and errors with elegance! Support for streams, callbacks, promises, child processes, async/await and sync functions. A drop-in replacement… [more](https://github.com/hybridables/always-done#readme) | [homepage](https://github.com/hybridables/always-done#readme "Handle completion and errors with elegance! Support for streams, callbacks, promises, child processes, async/await and sync functions. A drop-in replacement for [async-done][] - pass 100% of its tests plus more")

- [gibon](https://www.npmjs.com/package/gibon): Functional client-side router in ~570 bytes, built on HTML5 History API | [homepage](https://github.com/tunnckocore/gibon#readme "Functional client-side router in ~570 bytes, built on HTML5 History API")

- [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")

- [hyperapp](https://www.npmjs.com/package/hyperapp): 1kb JavaScript library for building modern UI applications | [homepage](https://github.com/hyperapp/hyperapp#readme "1kb JavaScript library for building modern UI applications")

- [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-h](https://www.npmjs.com/package/mich-h): Create HAST-compliant virtual trees of HTML using [hyperscript][] compatible syntax, just in ~550 bytes. | [homepage](https://github.com/tunnckocore/mich-h#readme "Create HAST-compliant virtual trees of HTML using [hyperscript][] compatible syntax, just in ~550 bytes.")

- [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][]")

- [minibase](https://www.npmjs.com/package/minibase): Minimalist alternative for Base. Build complex APIs with small units called plugins. Works well with most of the already existing… [more](https://github.com/node-minibase/minibase#readme) | [homepage](https://github.com/node-minibase/minibase#readme "Minimalist alternative for Base. Build complex APIs with small units called plugins. Works well with most of the already existing [base][] plugins.")

- [try-catch-core](https://www.npmjs.com/package/try-catch-core): Low-level package to handle completion and errors of sync or asynchronous functions, using [once][] and [dezalgo][] libs. Useful for and… [more](https://github.com/hybridables/try-catch-core#readme) | [homepage](https://github.com/hybridables/try-catch-core#readme "Low-level package to handle completion and errors of sync or asynchronous functions, using [once][] and [dezalgo][] libs. Useful for and used in higher-level libs such as [always-done][] to handle completion of anything.")



## Contributing

Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](https://github.com/tunnckoCore/mich-to-html/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 11, 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

[mich-h]: https://github.com/tunnckocore/mich-h

[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

[mich-h]: https://github.com/tunnckocore/mich-h

[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-to-html

[downloads-img]: https://img.shields.io/npm/dt/mich-to-html.svg



[codeclimate-url]: https://codeclimate.com/github/tunnckoCore/mich-to-html

[codeclimate-img]: https://img.shields.io/codeclimate/github/tunnckoCore/mich-to-html.svg



[travis-url]: https://travis-ci.org/tunnckoCore/mich-to-html

[travis-img]: https://img.shields.io/travis/tunnckoCore/mich-to-html/master.svg?label=linux



[appveyor-url]: https://ci.appveyor.com/project/tunnckoCore/mich-to-html

[appveyor-img]: https://img.shields.io/appveyor/ci/tunnckoCore/mich-to-html/master.svg?label=windows



[coverage-url]: https://codecov.io/gh/tunnckoCore/mich-to-html

[coverage-img]: https://img.shields.io/codecov/c/github/tunnckoCore/mich-to-html/master.svg



[david-url]: https://david-dm.org/tunnckoCore/mich-to-html

[david-img]: https://img.shields.io/david/tunnckoCore/mich-to-html.svg



[standard-url]: https://github.com/feross/standard

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