National Poetry Month

    @rackai/domql

    1.2.10 • Public • Published

    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 live editor playground.

    npm version Build Status Coverage Status

    Key features:

    • [x] error reporting
    • [x] virtual DOM tree
    • [x] create
      • [x] create using prototype class
      • [x] support multiple level prototypes
      • [x] DOM caching
    • [x] state
    • [x] binding
      • [x] with other component
      • [x] with state
    • [x] update
      • [x] set (recreate)
      • [x] only iterate with diff
    • [x] events
      • [x] event handling
      • [ ] bubbling and propogation
    • [ ] run changes inside animationFrame

    Getting started

    To install all dependencies and run dev server, run:

    yarn && yarn start

    Examples

    Initialization:

    import DOM from '@rackai/domql'
    
    DOM.create({ text: 'Rendered' })

    Attributes:

    var link = {
      tag: 'a',
      class: 'menu link',
      attr: {
        href: '#'
      }
    }
    var img = {
      tag: 'img',
      class: 'avatar',
      attr: {
        src: '...'
      }
    }

    Reusing:

    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
    }

    Array Support:

    var navItems = ['Home', 'About', 'FAQ', 'Contact']
    
    var menu = {
      proto: ListItem,
      ...navItems
    }

    Update:

    var val = {
      text: 0
    }
    
    var Increment = {
      tag: 'button',
      text: 'Increment',
      on: {
        click: (e) => {
          val.update({ text: val.text++ })
        }
      }
    }

    API

    Properties

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

    Methods

    Method Description Params
    update Updates element by passed object properties: Object Array
    set Sets passed element in the content property element: 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

    Keywords

    none

    Install

    npm i @rackai/domql

    DownloadsWeekly Downloads

    35

    Version

    1.2.10

    License

    none

    Unpacked Size

    53.7 kB

    Total Files

    53

    Last publish

    Collaborators

    • nikoloza