Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
DOM rendering Javascript framework.
You can start with starter-kit as a boilerplate, or jump into the playground.
import DOM from 'domql'
DOM.create({ text: 'Rendered' })
var link = {
tag: 'a',
class: 'menu link',
attr: {
href: '#'
}
}
var img = {
tag: 'img',
class: 'avatar',
attr: {
src: '...'
}
}
var Link = {
tag: 'a'
}
var ListItem = {
extend: Link,
class: 'ui link',
attr: {
href: '#'
}
}
var menu = {
childExtend: ListItem,
home: 'Home',
text: 'About'
}
var header = {
logo: {},
menu
}
var navItems = ['Home', 'About', 'FAQ', 'Contact']
var menu = {
extend: ListItem,
...navItems
}
var val = {
text: 0
}
var Increment = {
tag: 'button',
text: 'Increment',
on: {
click: (e) => {
val.update({ text: val.text++ })
}
}
}
Property | Type | Description | Default |
---|---|---|---|
key | Number String | Defines the key of the Element | The key of the object, or randomly generated name |
extend | Object Array | Clones the other element | undefined |
childExtend | Object Array | Specifies the extend for all child elements | undefined |
tag | String | Specifis the HTML tag | div or related HTML tag if the key matches |
class | Any | Specifies the HTML class | undefined |
attr | Object | Specifies the set of HTML attributes | {} |
text | Any | Text inside the element | undefined |
content | Object Array | Fragment wrapper to use dynamic content loading | undefined |
To specify your own property per Element, set the function inside define
property like:
var User = {
define: {
username: param => param.toUpperCase()
},
text: element => element.username
}
var Contact = {
extend: User,
username: 'nikoloza'
}
Method | Description | Params |
---|---|---|
update | Updates element by passed object | properties : Object Array |
set | Sets passed element in the content property | element : Object Array |
All native DOM events are supported and can be specified inside on
parameter. Additionally, init
and render
can be also invoked. All events except these two receive event
object as a first parameter, following the element
object itself.
key
tag
node
extend
on
class
text
data
style
attr
update
set
define
Anything except these keywords will create a new nested child element. The easier method to specify HTML tag is to use related nodeName as a key, for example:
var layout = { // this will be <div>
header: {}, // will create <header>
aside: {}, // will create <aside>
main: { // will create <main>
childExtend: {
article: { // will create <article>
title: {}, // will create <div>
description: {}, // will create <div>
_rating: {} // will create <div class="rating">
}
}
},
footer: {} // will create <footer>
}
Inspired by brisky
FAQs
Unknown package
We found that domql demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.