@builder/html-generator NPM

@builder/html-generator

Install

$ npm install @builder/html-generator --save-dev

Usage

Base

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="root">Weclome Home</div></body></html>';

const $ = new Generator(tmpl);

console.log('HTML is ', $.html());

Config root element

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="container">Weclome Home</div></body></html>';

const $ = new Generator(tmpl, { rootId: 'container' });

Modify root element content

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="container">Weclome Home</div></body></html>';

const $ = new Generator(tmpl, { rootId: 'container' });

$.root.innerHTML = 'New content.';

Get root element content

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="container">Weclome Home</div></body></html>';

const $ = new Generator(tmpl, { rootId: 'container' });

console.log('Root element content is ', $.root.innerHTML);

Modify title content

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="container">Weclome Home</div></body></html>';

const $ = new Generator(tmpl, { rootId: 'container' });

$.title..innerHTML = 'New title';

Modify body attributes

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="container">Weclome Home</div></body></html>';

const $ = new Generator(tmpl, { rootId: 'container' });

$.body.attributes += ' data-index="example"';

Insert link

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="container">Weclome Home</div></body></html>';

const $ = new Generator(tmpl, { rootId: 'container' });

// Arrays are also supported
$.insertLink('<link rel="stylesheet" type="text/css" href="//g.alicdn.com">');

Insert meta

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="container">Weclome Home</div></body></html>';

const $ = new Generator(tmpl, { rootId: 'container' });

// Arrays are also supported
$.insertMeta('<meta name="viewport" content="width=device-width, initial-scale=1.0">');

Insert script

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="container">Weclome Home</div></body></html>';

const $ = new Generator(tmpl, { rootId: 'container' });

// Arrays are also supported
$.insertScript('<script src="//g.alicdn.com/index.js"></script>');

Get inserted elements

import Generator from '@builder/html-generator';

const tmpl = '<html><head><title>Rax App</title></head><body><div class="home" id="container">Weclome Home</div></body></html>';

const $ = new Generator(tmpl, { rootId: 'container' });

$.insertScript('<script src="//g.alicdn.com/index.js"></script>');

console.log('Inserted scripts: ', $.insertedScripts);

@infinitebrahmanuniverse/nolb-_bui @everything-registry/sub-chunk-147 @zalastax/nolb-_bui build-plugin-ssr

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago