A NodeJS based, standard oriented, HTML implementation.
As the canvas module brought in ~100MB of dependency, and as it's not even a common use case, I've decided to move the canvas package into devDependencies, so that you need to explicitly include it when you use basicHTML.
npm i basichtml canvas
By default, no canvas module will be installed at all.
Introduced optional node-canvas dependency behind the <canvas> and <img> scene 🦄
canvas module doesn't buildnode-canvas Image ability to react on load and error eventsconst {Image, document} = require('basichtml').init({});
const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(320, 200);
ctx.stroke();
const img = new Image();
img.onload = () => {
console.log(img.outerHTML);
};
img.src = canvas.toDataURL();
Custom Elements built-in extends are finally supported 🎉
customElements.define('my-special-thing', MySpecialThing, {extends: 'div'});
document.createElement('div', {is: 'my-special-thing'});
init(...) in 0.13// easy way, introduced in 0.13
// pollutes by default the global with:
// - window
// - document
// - customElements
// - HTMLElement
// if a non global window is provided
// it will use it as defaultView
require('basichtml').init({
// all properties are optional
window: global,
// in case you'd like to share a predefined
// registry of Custom Elements
customElements,
// specify a different selector
selector: {
// use the module sizzle, it will be required
// automatically
name: 'sizzle',
// or alternatively, use a module function
module() {
return require('sizzle');
},
// how to retrieve results => querySelectorAll
$(Sizzle, element, css) {
return Sizzle(css, element);
}
}
});
// returns the window itself
const {Document} = require('basichtml');
const document = new Document();
// attributes
document.documentElement.setAttribute('lang', 'en');
// common accessors
document.documentElement.innerHTML = `
<head></head>
<body></body>
`;
document.body.textContent = 'Hello basicHTML';
// basic querySelector / querySelectorAll
document.querySelector('head').appendChild(
document.createElement('title')
).textContent = 'HTML on NodeJS';
// toString() necessary to read, it's a Buffer
console.log(document.toString());
Above log will produce an output like the following one.
<!DOCTYPE html>
<html lang="en">
<head><title>HTML on NodeJS</title></head>
<body>Hello basicHTML</body>
</html>
v0.2, the property nodeName is case-sensitive to make basicHTML compatible with XML projects tooel.querySelectorAll(css) works with tagName, #id, or .className. You can use more complex selectors including 3rd parts libraries such Sizzle, as shown in this test example.el.querySelector(css) is not optimized and will return just index 0 of the whole collection. However, selecting a lot is not the goal of this library.el.getElementsByTagName as well as el.getElementsByClassName and el.getElementsById are all available. The latter is the fastest one of the trio.childNodes.push(new Node) 'cause that's not what you could do on the DOM. The whole point here is to provide a Web like env, not to write defensive code for NodeJS or other non strictly Web environments.ISC License
Copyright (c) 2017, Andrea Giammarchi, @WebReflection
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
This is an essential implementation of most common HTML operations without the necessary bloat brought in by the entire HTML specification.
The ideal scenario is together with hyperHTML to be able to create DOM trees and objects capable of being updated, refreshed, related to any native component.
The perfect scenario would be to drive NativeScript components using a CustomElementRegistry like you would do on the Web for Custom Elements.
Please bear in mind this project is not aiming to become a fully standard compliant implementation of the whole WebIDL based specifications, there are other projects for that.
FAQs
A NodeJS based, standard oriented, HTML implementation.
The npm package basichtml receives a total of 1,221 weekly downloads. As such, basichtml popularity was classified as popular.
We found that basichtml demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.