DOMQL

DOMQL is new framework made by Symbols team to simplify app development process with full potential of reusability and customization. The aim to create this framework was to build one of the most reusable components library, and together with a design system library, it creates strong foundation for any frontend development.

DOMQL recursively creates elements from your tree, runs transformations based on reserved properties, applies state and events, and through this virtual tree, renders a DOM tree. The rendering part is separated from the schema part, which makes it easy to use other Javascript DOM render transformers such as Mikado, React or Vue.

• Minimalistic
• No dependencies
• Extendable
• No transpilations, simple ES6 code
• Single import

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

Symbols

DOMQL is designed to work perfectly with Symbols design system and components. To use it with Symbols please refer relevant docs: symbols.app/api

Using

DOMQL uses Javascript syntax and runs both on Node and Browser without transpirations required. In DOMQL you write your own virtual tree that represents actual DOM tree after running it in the browser:

import DOM from 'domql'

const link = {
  tag: 'a',
  class: 'menu link',
  attr: {
    href: '#'
  }
}

DOM.create(link, document.body)

DOMQL is simple representation of HTML, Javascript and CSS altogether. The idea is that we can create JSON like structure for the HTML, CSS and events, so it can generate schema and can be passed to any rendering framework through its transforms:

const img = {
  tag: 'img',
  class: 'avatar',
  attr: {
    src: '...'
  },
  style: {
    padding: '10px'
  }
}

A single javascript object to manage markup, styles and functionality.

const Link = {
  tag: 'a'
}

const ListItem = {
  extend: Link,
  class: 'ui link',
  attr: {
    href: '#'
  }
}

const menu = {
  childExtend: ListItem,
  home: 'Home',
  text: 'About'
}

const header = {
  logo: {},
  menu
}

As flexible as Javascript.

const navItems = ['Home', 'About', 'FAQ', 'Contact']

const menu = {
  extend: ListItem,
  ...navItems
}

Runs function.

const Increment = {
  tag: 'button',
  text: 'Click me!',
  state: { value: 0 },
  on: {
    click: (event, element, state) => {
      state.update({ value: state.value++ })
    }
    focus: () => {...},
    render: () => {...},
    ...
  }
}

API

Properties

To specify your own property per Element, set the function inside define property like:

const User = {
  define: {
    username: param => param.toUpperCase()
  },
  text: element => element.username
}

const Contact = {
  extend: User,
  username: 'nikoloza'
}

Methods

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

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

Credits

Inspired by brisky