npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

js-to-html

v2.0.0-betha

Published

Create HTML text from JS object

Downloads

1,189

Readme

js-to-html

Create HTML text from JS object

extending npm-version downloads build coverage climate dependencies qa-control

language: English also available in: Spanish

Install

$ npm install js-to-html

API

html.TAGNAME([attributes, ]content)

Returns an Html object with TAGNAME, attributes and content.

content could be

  • a string expression
  • an array of children. Each child could be
    • a string expression
    • an Html object

attributes must be a plain object. Each property of the object will be an html attribute (example: {colspan:3, id:"abc"}). Some attributes names are reserved words, you can use them with the same name (example: {class:'examples'}). Some attributes (like class) could contain lists (example: {class:['examples', 'lists']}).

Html.toHtmlText(opts)

Returns an Html Text

opt |value -------|------- pretty | returns a pretty and indented text

Example

var html = require('js-to-html').html;

console.log(
    html.div(
        {'class':'the_class', id:'47'},
        [
            html.p('First paragraph'),
            html.p('Second paragraph'),
        ]
    ).toHtmlText({pretty:true})
)

/* logs:
<div class=the_class id=47>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>
*/

Html.toHtmlDoc(opts)

Same as Html.toHtmlText(opts) but returns doctype in the first line and completes with con HTML, HEAD, BODY and TITLE elements:

var html = require("js-to-html").html;

console.log(
    html.img({src:'photo.png'}).toHtmlDoc({title:"my photo", pretty:true})
)

/*
<!doctype html>
<html>
  <head>
    <title>my photo</title>
  </head>
  <body>
    <img src=photo.png>
  </body>
</html>
*/

opt |value -----------|------- pretty | returns a pretty and indented text incomplete | do not complete with html, head y body tags title | text title

Using with DOM in client-side

All html objects have a create method that build a DOM Element ready to append to a existing one. create builds the element and inside elements too.

var html = jsToHtml.html;

document.body.appendChild(
    html.div([
        html.h1('Log in'),
        html.div([
            html.input({name: 'user', placeholder:'user'}),
            html.input({name: 'pass', type: 'password'})
        ])
    ]).create()
);

Special behavior

type |name |use ----------|---------------|-------------- function | html._text | simple text (like createTextNode) function | html._comment | html comment (like < !-- ... -- >) attribute | classList | for a class name list (this module rejects class with spaces like {"class": "una otra separada por espacio"} )

Insecure mode

html.insecureModeEnabled = true;
console.log(html.div({id:'this'}, html.includeHtml('<svg xml:....> </svg>')));

Notes

  • In the future it will be smart to handle style attribute like {style:{color: "blue", background: "none"}}

Tests with real devices

NPM version |Device |OS |nav |obs ------------|-----------------------|---------------|-------------------------|---- 0.9.1 | Samsung Galaxy Note 4 | Android 6.0.1 | Chrome Mobile 44.0.2403 | 0.9.1 | Blue Vivo Air LTE | Android 5.0.2 | Chrome Mobile 50.0.2661 | 0.9.1 | Samsung Galaxy S3 | Android 4.3.0 | Android 4.3.0 | 0.9.1 | HTC Desire | Android 2.2.2 | Android 2.2.2 | polyfill:classList 0.9.1 | iPad mini Retina | iOS 8.4.0 | Mobile Safari 8.0.0 | 0.9.1 | VMWare | WinXP | IE 8.0.0 | polyfill:many

License

MIT