microhtml v0.1.5

Introduction

Let's connect library

const { createElement } = require('microhtml');

Firstly you must have AST

The syntax is pretty simple.

const AST = {
   tagName: 'h1', // Any
   type: 'paired', // 'single' or 'paired'
   attr: {
      variant: 'bold'
   },
   children: [
      {...},
      {...},
   ],
   body: 'Hello world!'
};

And now we can create our element, then transform it to HTML code.

const element = createElement(AST).transform();
console.log(element);

// output: <h1 variant="bold">Hello world!</h1>

A few words about AST

AST is an object that can contain tagName type attr children and body fields and nothing more! Elements created as the "single" type cannot have "children" and "body", only attributes, so you can leave these fields as empty object and array respectively. children field must be an array of the same objects as above.

Classes

Functions

HTMLElement

Kind: global class
Summary: Create an instance of HTMLElement
Access: public

• HTMLElement
  • new HTMLElement(tagName, type, props, body)
  • .transform()

new HTMLElement(tagName, type, props, body)

Returns: HTMLElement - HTMLElement instance

Example

const element = new HTMLElement(
      'h1',
      'paired',
      { attributes: {...}, children: [...] },
      'Hello world!',
    );

htmlElement.transform()

Kind: instance method of HTMLElement
Summary: transform
Access: public
Example

const element = new HTMLElement(
      'h1',
      'paired',
      { attributes: {...}, children: [...] },
      'Hello world!',
    );
element.transform();
> '<h1>Hello world!</h1>'

createDocument() ⇒ True

Creates document from certain content, like HTML tags.

Kind: global function
Returns: True - - if operation succeed.

createElement() ⇒ HTMLElement

Recursive function that generates "HTMLElement" object from given AST.

Kind: global function

Example

const AST = {
  tagName: 'html',
  type: 'paired',
  attr: {
    lang: 'ru',
  },
  children: [
    {
      tagName: 'body',
      type: 'paired',
      attr: {},
      children: [],
      body: ''
    },
    {
      tagName: 'img',
      type: 'single',
      attr: {},
      children: [],
      body: ''
    }
  ],
  body: '',
};
const elem = createElement(AST).transform();
createDocument('index', elem);