tunnckoCore
commented
6 years ago mindom
/**
* @copyright 2017-present, Charlike Mike Reagent <olsten.larck@gmail.com>
* @license Apache-2.0
*/
const NO_SUFFIX = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i
function decamelize (str) {
return str
.replace(/([a-z\d])([A-Z])/g, '$1-$2')
.replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1-$2')
.toLowerCase()
}
function toLower (str) {
return String(str).toLowerCase()
}
function isObject (val) {
return val && typeof val === 'object' && !Array.isArray(val)
}
/* eslint-disable max-params, fp/no-loops */
function splice (arr, item, add, byValueOnly) {
let i = arr ? findWhere(arr, item, true, byValueOnly) : -1
if (~i) add ? arr.splice(i, 0, add) : arr.splice(i, 1)
return i
}
function findWhere (arr, fn, returnIndex, byValueOnly) {
let i = arr.length
while (i--) {
if (typeof fn === 'function' && !byValueOnly ? fn(arr[i]) : arr[i] === fn) {
break
}
}
return returnIndex ? i : arr[i]
}
function createAttributeFilter (ns, name) {
return (o) => o.namespaceURI === ns && toLower(o.name) === toLower(name)
}
function addStyle (node, value, attribute) {
if (isObject(value)) {
let cssText = ''
Object.keys(value).forEach((k) => {
let val = value[k]
const suffix = typeof val === 'number' && NO_SUFFIX.test(k) === false
val = suffix ? val + 'px' : val
cssText += `${decamelize(k)}:${val};`
this.style[k] = val
this.style.cssText = cssText
attribute.value = cssText
// node.attributes.style is `Attribute` object,
// so the `.value` is same as `node.style.cssText`
this.attributes.style.value = cssText
})
} else {
this.style.cssText = String(value)
}
}
class Attribute {
constructor (name, value, ns) {
this.nodeType = 2
this.name = name
this.value = value
this.namespaceURI = ns || null
}
}
class Node {
constructor (nodeType, nodeName, namespaceURI) {
this.namespaceURI = namespaceURI || null
this.nodeType = nodeType
this.nodeName = nodeName
this.childNodes = []
}
appendChild (child) {
this.insertBefore(child)
}
insertBefore (child, ref) {
child.remove()
child.parentNode = this
if (!ref) this.childNodes.push(child)
else splice(this.childNodes, ref, child)
}
replaceChild (child, ref) {
if (ref.parentNode === this) {
this.insertBefore(child, ref)
ref.remove()
}
}
removeChild (child) {
splice(this.childNodes, child)
}
remove () {
if (this.parentNode) this.parentNode.removeChild(this)
}
}
class Text extends Node {
constructor (text) {
super(3, '#text') // TEXT_NODE
this.nodeValue = text
}
set textContent (text) {
this.nodeValue = text
}
get textContent () {
return this.nodeValue
}
}
class Element extends Node {
constructor (nodeName, namespaceURI) {
super(1, nodeName, namespaceURI)
this.__handlers = {}
this.attributes = []
this.style = {}
Object.defineProperty(this, 'className', {
set: (val) => {
this.setAttribute('class', val)
},
get: () => this.getAttribute('class'),
})
}
get children () {
return this.childNodes.filter((node) => node.nodeType === 1)
}
hasAttribute (key) {
return this.hasAttributeNS(null, key)
}
hasAttributeNS (namespaceURI, key) {
return (
this.attributes.hasOwnProperty(key) &&
this.attributes[key].namespaceURI === namespaceURI
)
}
setAttribute (key, value) {
this.setAttributeNS(this.namespaceURI, key, value)
}
setAttributeNS (namespaceURI, name, value) {
const attributeFilter = createAttributeFilter(namespaceURI, name)
let attribute = findWhere(this.attributes, attributeFilter)
if (!attribute) {
attribute = new Attribute(name, value, namespaceURI)
this.attributes.push(attribute)
this.attributes[attribute.name] = attribute
} else {
attribute.value = String(value)
if (attribute.name === 'style') {
addStyle(this, value, attribute)
}
}
}
getAttribute (key) {
return this.getAttributeNS(null, key)
}
getAttributeNS (namespaceURI, name) {
const attributeFilter = createAttributeFilter(namespaceURI, name)
let attr = findWhere(this.attributes, attributeFilter)
return attr && attr.value
}
removeAttribute (key) {
this.removeAttributeNS(null, key)
}
removeAttributeNS (namespaceURI, name) {
splice(this.attributes, createAttributeFilter(namespaceURI, name))
}
addEventListener (type, handler) {
const name = 'on' + toLower(type)
;(this.__handlers[name] || (this.__handlers[name] = [])).push(handler)
}
removeEventListener (type, handler) {
type = toLower(type)
splice(this.__handlers['on' + type], handler, 0, true)
}
}
function createElement (nodeName) {
return new Element(String(nodeName).toUpperCase())
}
function createElementNS (ns, nodeName) {
return new Element(String(nodeName).toUpperCase(), ns)
}
function createTextNode (text) {
return new Text(text)
}
class Document extends Element {
constructor () {
super(9, '#document')
}
}
export {
Node,
Text,
Element,
Document,
Attribute,
createElement,
createElementNS,
createTextNode,
// expose utils for easier extending
findWhere,
splice,
createAttributeFilter
}mindom/import ("register" for esm like import 'mindom/import';
/**
* @copyright 2017-present, Charlike Mike Reagent <olsten.larck@gmail.com>
* @license Apache-2.0
*/
import { Element, Document, createElement, createTextNode } from './mindom.mjs'
global.Element = Element
global.document = Object.assign(new Document(), {
createElement,
createTextNode,
})
global.document.body = createElement('body')
The 1.1kb library.
https://www.webpackbin.com/bins/-L3NghOrCy3F_f8TxWM8 (updated 21 Jan 2018)
Initially it was the idea behind
michproject and themich-hpackage. But that's a bit different and all of the names are simple and free.minmorph
It is almost exact copy of the
nanomorph, but a lot simplified and a lot smaller, which passnanomorphtests.mindom
It is almost the same as
undom, but is more small (a bit smaller) for only needed things of our purpose, but also exposes things to be extended. It is pending discussionundomto support some kind of plugins and etc. But still it won't be my thing, unless it just provide access to each class.Not to mention that the size don't matter in my case, since it is only needed in server side, because
minscriptandminmorphworks perfectly in the browser.