mich-to-html

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

You might also be interested in mich-h - virtual dom builder in just ~500 bytes, compatible with hyperscript.

Interactive CodePen Example which just works.

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

or install using yarn

$ yarn add mich-to-html

Usage

For more use-cases see the tests

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)
// => '<h1 id="hero" class="big header">Hello World</h1>'

Or, using the JSX syntax and adding the JSX Pragma somewhere at the top

/** @jsx h */
const h = require('mich-h')
const toHtml = require('mich-to-html')
 
const hi = 'Hello World'
const tree = <h1 id="hero" className="big header">{hi}</h1>
 
console.log(toHtml(tree))
// => '<h1 id="hero" class="big header">Hello World</h1>'

API

TODO

Related

• 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 | homepage
• gibon: Functional client-side router in ~570 bytes, built on HTML5 History API | homepage
• hastscript: Hyperscript compatible DSL for creating virtual HAST trees | homepage
• hyperapp: 1kb JavaScript library for building modern UI applications | homepage
• hyperscript: Create HyperText with JavaScript, on client or server. | homepage
• mich-h: Create HAST-compliant virtual trees of HTML using hyperscript compatible syntax, just in ~550 bytes. | homepage
• mich-parse-selector: Tiny parser for simple CSS selectors, just in ~300 bytes. Pretty similar to what is done in hyperscript | homepage
• minibase: Minimalist alternative for Base. Build complex APIs with small units called plugins. Works well with most of the already existing… more | homepage
• 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 | 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 11, 2017.
Project scaffolded using charlike cli.