Helper to quickly build up dom in javascript object format
Basic feature list:
And here's some code! :+1:
var root = CreateElement('div', {
className: 'root',
parent: document.body,
width: 300,
height: 300,
background: 'darkgreen',
items: [
{ tag: 'div', width: 50, height: 50, text: 'Intro', display: 'inline-block', background: 'yellowgreen' },
{ tag: 'div', width: 200, background: 'lightgreen',
items: [
{ tag: 'div', width: 20, height: 20, background: 'red' },
{ tag: 'div', width: 20, height: 20, background: 'orange' },
]
}
],
created: function () {
// called when finished every setup
},
appended: function () {
// called when
// 1. element is root (created by CreateElement)
// 2. parent is Node and appended element successfully
}
})
var outerScopeDataSource = [
{ name: 'yellow' },
{ name: 'green' },
{ name: 'pink' }
]
var root = CreateElement('div', {
className: 'root',
parent: document.body,
width: 300,
height: 300,
background: 'darkgreen',
items: [
{ tag: 'div', width: 50, height: 50, text: 'Intro', display: 'inline-block', background: 'yellowgreen',
items: [
function () {
return outerScopeDataSource.map(function (data) {
return { tag: 'custom-el', text: data.name }
})
}
]
},
{ tag: 'div', width: 200, background: 'lightgreen',
items: ['color', 'material'].map(function (val) {
return { tag: 'span', text: val }
})
}
]
})
var root = CreateElement('div', {
className: 'root',
parent: document.body,
width: '100%',
height: '100%',
defaults: {
display: 'inline-block',
height: '100%',
className: 'default-class',
style: {
verticalAlign: 'top'
}
},
items: [
{ tag: 'div', className: 'sidebar', width: 200, ref: 'sidebar', background: 'lightgreen',
},
{ tag: 'div', className: 'main', width: 'calc(100% - 200px)', ref: 'main', background: 'lightblue',
defaults: {
background: 'tomato',
margin: 5,
height: 50,
width: 50,
display: 'inline-block'
},
items: [
{ tag: 'div', text: 1 },
{ tag: 'div', text: 2 },
[3,4,5,6].map(function (v) { return { tag: 'div', text: v } }),
function () {
return [5,6,7,8].map(function (v) { return { tag: 'div', text: v } })
}
]
},
{ tag: 'test' }
]
})
display = 'inline-block', height = '100%'class = 'default-class'
if/ hidevar root = CreateElement('div', {
className: 'root',
parent: document.body,
width: '100%',
height: '100%',
defaults: {
display: 'inline-block',
height: '100%',
className: 'default-class',
style: {
verticalAlign: 'top'
}
},
items: [
{ tag: 'div', className: 'sidebar', width: 200, ref: 'sidebar', background: 'lightgreen' },
{ tag: 'div', className: 'main',
width: 'calc(100% - 200px)',
ref: 'main',
background: 'lightblue',
defaults: {
background: 'tomato',
margin: 5,
height: 50,
width: 50,
display: 'inline-block'
},
items: [
{ tag: 'div', text: 'First' },
{ tag: 'div', text: 'Second' },
[3,4,5,6].map(function (v, i) { return { tag: 'div', text: 'Value is: ' + v, if: v < 4 } }),
function () {
return [5,6,7,8].map(function (v, i) { return { tag: 'div', text: v, hide: v > 6 } })
}
]
}
]
})
var root = CreateElement('div', {
className: 'root',
id: 'root',
parent: document.body,
width: 300,
height: 300,
background: 'darkgreen',
padding: 5,
attrs: {
class: 'original',
dataTooltip: 'halo this is tip',
'data-id': 5
}
})
var root = CreateElement('div', {
className: 'root',
parent: document.body,
width: 300,
height: 300,
background: 'darkgreen',
items: [
{ tag: 'div', width: 50, height: 50, text: 'Intro', display: 'inline-block', background: 'yellowgreen' },
{ tag: 'div', width: 200, background: 'lightgreen', ref: 'orange',
items: [
{ tag: 'div', width: 20, height: 20, background: 'red',
ref: 'lightgreen' // access by root.refs.lightgreen
},
{ tag: 'div', width: 20, height: 20, background: 'orange',
ref: 'orange', refScope: 'parent' // access by root.refs.orange.refs.orange
},
]
}
]
})
Reserved keyword for events:
click mousedown mouseup mouseover mouseout mouseenter mouseleavedragstart dragend drag dragover dragenter dragout dropblur focuskeydown keypress keyupchange input submittouchstart touchmove touchendwheel scrollvar root = CreateElement('div', {
className: 'root',
id: 'root',
parent: document.body,
width: 300,
height: 300,
background: 'darkgreen',
items: [
{ tag: 'div', width: 50, height: 50, text: 'Intro', display: 'inline-block', background: 'yellowgreen' },
{ tag: 'div', width: 200, background: 'lightgreen',
items: [
{ tag: 'div', className: 'red', width: 20, height: 20, background: 'red',
click: {
handler: function (e) {
console.log('This is:', this.localName + '.' + this.className) // div.red
}
}
},
{ tag: 'div', className: 'orange', width: 20, height: 20, background: 'orange',
click: {
scope: 'root',
handler: function (e) {
console.log('This is:', this.localName + '.' + this.className) // div.root
}
},
events: [
{ type: 'custom:event', handler: function () {
console.log('This is div.orange')
}}
]
},
{ tag: 'div', className: 'yellow', width: 20, height: 20, background: 'yellow',
click: {
scope: 'root',
// Will look up for `onClickYellow` on root element
// Throw error if not found
handler: 'onClickYellow',
capture: true
}
}
]
}
],
onClickYellow: function (e) {
var t = e.target
// From div.yellow to div.root
console.log('From ', t.localName + '.' + t.className + ' to ' + this.localName + '.' + this.className)
},
events: [
{ type: 'mouseout', handler: function (e) {
console.log('Out of:', e.target)
}}
]
})
for: data sourceTplFn: function (item, itemIndex)var root = CreateElement('div', {
className: 'root',
id: 'root',
parent: document.body,
width: 300,
height: 300,
background: 'darkgreen',
padding: 5,
items: {
// data source
for: [
{ name: 'apple', cost: 0.5 },
{ name: 'mango', cost: 0.5 },
{ name: 'grape', cost: 0.6, suppliers: {
data: [
{ name: 'US', time: 5 },
{ name: 'UK', time: 4 }
]}
}
],
tplFn: function (item, itemIdx) {
return { tag: 'div', text: item.name, padding: 5, margin: '5px 0 0 5px', background: 'tomato',
items: {
for: item.suppliers,
root: 'data', // specify which property to look for data
tplFn: function (sup, supIdx) {
return { tag: 'div',
padding: 5,
background: 'lightblue',
text: sup.name + '. Time: ' + sup.time + ' days'
}
}
}
}
}
}
})
var src = [
{ name: 'apple', cost: 0.5 },
{ name: 'mango', cost: 0.5 },
{ name: 'grape', cost: 0.6, suppliers: {
data: [
{ name: 'US', time: 5 },
{ name: 'UK', time: 4 }
]}
}
]
var root = CreateElement('div', {
className: 'root',
id: 'root',
parent: document.body,
width: 300,
height: 300,
background: 'darkgreen',
padding: 5,
items: {
// data source
for: null,
update: {
// update this when root.observe.data = src
observeProp: 'data'
},
tplFn: function (item, itemIdx) {
return { tag: 'div', text: item.name, padding: 5, margin: '5px 0 0 5px', background: 'tomato',
items: {
for: item.suppliers,
root: 'data', // specify which property to look for data
tplFn: function (sup, supIdx) {
return {
tag: 'div',
padding: 5,
background: 'lightblue',
text: sup.name + '. Time: ' + sup.time + ' days',
click: { scope: 'root', handler: 'onClickSupplier' }
}
}
}
}
}
},
onClickSupplier: function (e) {
// Do something
},
events: [
{ type: 'mouseout', handler: function (e) {
console.log('Out of:', e.target)
}}
]
})
Prototyping some design and testing event/ interaction made a bit more convinient when
<script src="dominic.min.js"></script>
npm i dominic
CreateElement(name, opts)
name: String
opts: Object
return: DOM element
For Node: Change global window objectCreateElement.setWindow(windowObj)
appendChild, removeChild, etc...)createElement, createTextNode methods which will create Node or TextNode.MIT
FAQs
Helper to quickly build up DOM in simple javascript object format.
The npm package dominic receives a total of 7 weekly downloads. As such, dominic popularity was classified as not popular.
We found that dominic 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
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.