raynos / min-document

A minimal DOM implementation

min-document

A minimal DOM implementation

Example

var document = require("min-document")

var div = document.createElement("div")
div.className = "foo bar"

var span = document.createElement("span")
div.appendChild(span)
span.textContent = "Hello!"

/*  <div class="foo bar">
        <span>Hello!</span>
    </div>
*/
var html = String(div)

Installation

npm install min-document

Contributors

• Raynos

MIT Licenced

min-document's Issues

input elements should have type='text' by default

Currently, input elements have type:undefined if not explicitly given a type. Min-document should match what a real browser DOM does in this regard. I'm assuming it will set type='text' by default, but I need to double-check this.

This is to make min-document work with https://github.com/Raynos/value-event/blob/master/change.js, which expects inputs with a mercury.changeHandler attached to have a type set. If that assumption is incorrect, then this issue should be closed, and value-event/change should be fixed instead.

toString() cannot handle non text attributes

Scenario: I'm using virtual-dom and wanted to switch from vdom-to-html to using the toString() method for serializing.

However, there are places where we set numbers or booleans to attributes and toString() does not handle it.

var document = require('min-document');
var el = document.createElement('div')
el.value = 100
el.toString()

Error:

TypeError: str.replace is not a function
    at escapeText (/Users/tommy/src/web/cbw/node_modules/global/node_modules/min-document/serialize.js:135:6)
    at escapeAttributeValue (/Users/tommy/src/web/cbw/node_modules/global/node_modules/min-document/serialize.js:141:10)
    at /Users/tommy/src/web/cbw/node_modules/global/node_modules/min-document/serialize.js:95:41
    at Array.forEach (native)
    at stringify (/Users/tommy/src/web/cbw/node_modules/global/node_modules/min-document/serialize.js:87:8)
    at properties (/Users/tommy/src/web/cbw/node_modules/global/node_modules/min-document/serialize.js:130:25)
    at serializeElement (/Users/tommy/src/web/cbw/node_modules/global/node_modules/min-document/serialize.js:25:32)
    at serializeNode (/Users/tommy/src/web/cbw/node_modules/global/node_modules/min-document/serialize.js:12:12)
    at DOMElement._Element_toString [as toString] (/Users/tommy/src/web/cbw/node_modules/global/node_modules/min-document/dom-element.js:161:12)
    at repl:1:4

Question: If I send a PR, will you accept it?

I understand that the

• the DOM spec expects attributes to be strings.
• vdom's diff/patch handles non string attributes.

canvas does not have getContext() method

running

var document = require("min-document")
var canvas =document.createElement('canvas')
var ctx = canvas.getContext('2d');

returns error
TypeError: canvas.getContext() is not a function

No default jsDelivr CDN file set

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

implement `DOMElement.prototype.setAttributeNS`

necessary for using virtual-hyperscript/hooks/attribute-hook

min-document version not updated on NPM registry

Hi.
Your package version is not updated on NPM registry which are used for repo mirror by lot of devs.
https://skimdb.npmjs.com/_utils/document.html?registry/min-document

Publish to npm

Element.attributes

Currently this is missing https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes and https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap. Are there any plans to add these in the future?

Nice lib btw.

Elements missing outerHTML

Because toString() on an element in the browser returns something like "[object HTMLDivElement]", I have a helper function like this in my tests that run on both server and browser:

function toStr (el) {
  return el.outerHTML || String(el);
}

Could elements in min-document have an outerHTML as well for parity?

toString() emits `DocumentFragment`s as <undefined> tags

When I add DocumentFragments to a node, the node gets rendered with <undefined> tags.

Sample code:

var document = require('min-document')
var fragment = document.createDocumentFragment()
fragment.appendChild(document.createTextNode('hello'))
var span = document.createElement('span')
span.appendChild(fragment)
span.toString()

Output:

"<span><undefined>hello</undefined></span>"

textarea is rendered as void element

Textareas cannot be rendered as a wrong regex classifies them as void element.
e.g.
const inputDom = document.createElement('TEXTAREA'); inputDom.setAttribute('name', 'comment'); inputDom.innerHTML = 'user input here';
renders as:
<textarea name="comment" />
This is caused by a wrong regex in serialize.js:
var voidElements = /area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr/i; //... if (voidElements.test(tagname)) { strings.push(" />") }

Element.setAttribute('style', ...) results in mangled style attribute in HTML

If an element's style attribute is set via setAttribute, the value seems to get mangled when the element is subsequently stringified.

For example:

var document = require('min-document')
var el = document.createElement('div')
el.setAttribute('style', 'display: none')

String(el) => '<div style="0:d;1:i;2:s;3:p;4:l;5:a;6:y;7::;8: ;9:n;10:o;11:n;12:e;"></div>'

Implement `getElementsByClassName` for single classes

Following this discussion: Raynos/mercury#45 (comment)

The spec allows multiple space-separated classes to be passed, but at the moment I only really care about the case when a single class is passed.

if appendChild is a fragment go wrong

DOMElement.focus should assign document.activeElement

Regarding the line:
https://github.com/Raynos/min-document/blob/master/dom-element.js#L157

It would be nice to be able to test that when an element is focused, it becomes the activeElement as that's how it would generally behave within a browser.
This looks like it could be accomplished by assigning owner.activeElement = this; within the focus function.