Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
domql
Advanced tools
Readme
DOM rendering Javascript framework.
You can start with starter-kit as a boilerplate, or jump into the playground.
import DOM from '@rackai/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 = {
proto: Link,
class: 'ui link',
attr: {
href: '#'
}
}
var menu = {
childProto: ListItem,
home: 'Home',
text: 'About'
}
var header = {
logo: {},
menu
}
var navItems = ['Home', 'About', 'FAQ', 'Contact']
var menu = {
proto: 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 |
proto | Object Array | Clones the other element | undefined |
childProto | Object Array | Specifies the proto 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 = {
proto: 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
proto
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>
childProto: {
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
The npm package domql receives a total of 57 weekly downloads. As such, domql popularity was classified as not popular.
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
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.