Socket
Socket
Sign inDemoInstall

domql

Package Overview
Dependencies
1
Maintainers
1
Versions
258
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

domql

DOM rendering Javascript framework at early stage.


Version published
Maintainers
1
Weekly downloads
56
increased by24.44%

Weekly downloads

Readme

Source

DOMQL

DOM rendering Javascript framework.

  • Minimalistic
  • No dependencies
  • Extendable
  • No transpilations, simple ES6 code
  • One-time import and subtrees

You can start with starter-kit as a boilerplate, or jump into the playground.

npm version

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 = {
  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++ })
    }
  }
}

API

Properties

PropertyTypeDescriptionDefault
keyNumber StringDefines the key of the ElementThe key of the object, or randomly generated name
protoObject ArrayClones the other elementundefined
childProtoObject ArraySpecifies the proto for all child elementsundefined
tagStringSpecifis the HTML tagdiv or related HTML tag if the key matches
classAnySpecifies the HTML classundefined
attrObjectSpecifies the set of HTML attributes{}
textAnyText inside the elementundefined
contentObject ArrayFragment wrapper to use dynamic content loadingundefined

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'
}

Methods

MethodDescriptionParams
updateUpdates element by passed objectproperties: Object Array
setSets passed element in the content propertyelement: Object Array

Events

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.

Reserved keywords

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>
}

Credits

Inspired by brisky

FAQs

Last updated on 04 Aug 2022

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc