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.
(TOC generated by verb using markdown-toc)
Install with npm
$ npm install mich-to-html --save
or install using yarn
$ yarn add mich-to-html
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>'TODO
- 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
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
- Please DO NOT edit README.md, CHANGELOG.md and .verb.md files. See "Building docs" section.
- Ensure anything is okey by installing the dependencies and run the tests. See "Running tests" section.
- Always use
npm run committo commit changes instead ofgit commit, because it is interactive and user-friendly. It uses commitizen behind the scenes, which follows Conventional Changelog idealogy. - 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! :)
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.
Clone repository and run the following in that cloned directory
$ npm install && npm test
Charlike Mike Reagent
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.
