2.5.200 • Published 7 months ago

domql v2.5.200

Weekly downloads
-
License
MIT
Repository
-
Last release
7 months ago

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

API

Properties

PropertyTypeDescriptionDefault
keyNumber StringDefines the key of the ElementThe key of the object, or randomly generated name
extendObject ArrayClones the other elementundefined
childExtendObject ArraySpecifies the extend 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 = {
  extend: 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
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>
}

Credits

Inspired by brisky

2.5.200

7 months ago

2.5.195

8 months ago

2.5.196

8 months ago

2.5.197

8 months ago

2.5.198

8 months ago

2.5.193

8 months ago

2.5.194

8 months ago

2.5.192

8 months ago

2.5.191

9 months ago

2.5.190

9 months ago

2.5.184

9 months ago

2.5.185

9 months ago

2.5.186

9 months ago

2.5.187

9 months ago

2.5.188

9 months ago

2.5.180

9 months ago

2.5.181

9 months ago

2.5.182

9 months ago

2.5.183

9 months ago

2.5.176

10 months ago

2.5.177

9 months ago

2.5.178

9 months ago

2.5.179

9 months ago

2.5.174

10 months ago

2.5.175

10 months ago

2.5.173

10 months ago

2.5.170

10 months ago

2.5.171

10 months ago

2.5.169

10 months ago

2.5.167

10 months ago

2.5.168

10 months ago

2.5.166

10 months ago

2.5.165

10 months ago

2.5.162

11 months ago

2.5.163

11 months ago

2.5.164

11 months ago

2.5.161

11 months ago

2.5.153

11 months ago

2.5.154

11 months ago

2.5.155

11 months ago

2.5.156

11 months ago

2.5.157

11 months ago

2.5.158

11 months ago

2.5.159

11 months ago

2.5.160

11 months ago

2.5.151

12 months ago

2.5.152

12 months ago

2.5.150

12 months ago

2.5.148

12 months ago

2.5.149

12 months ago

2.5.147

12 months ago

2.5.142

12 months ago

2.5.143

12 months ago

2.5.144

12 months ago

2.5.145

12 months ago

2.5.146

12 months ago

2.5.138

12 months ago

2.5.139

12 months ago

2.5.140

12 months ago

2.5.141

12 months ago

2.5.137

12 months ago

2.5.134

12 months ago

2.5.135

12 months ago

2.5.136

12 months ago

2.5.82

1 year ago

2.5.84

1 year ago

2.5.48

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.4.4

2 years ago

1.6.60

2 years ago

1.6.62

2 years ago

1.6.61

2 years ago

1.6.64

2 years ago

1.6.63

2 years ago

1.6.66

2 years ago

1.6.68

2 years ago

1.6.67

2 years ago

2.5.22

2 years ago

1.6.69

2 years ago

1.6.71

2 years ago

1.6.70

2 years ago

2.5.34

2 years ago

2.5.35

2 years ago

1.6.48

2 years ago

1.6.49

2 years ago

1.6.51

2 years ago

1.6.50

2 years ago

1.6.53

2 years ago

1.6.52

2 years ago

1.6.55

2 years ago

1.6.57

2 years ago

1.6.56

2 years ago

1.6.59

2 years ago

1.6.58

2 years ago

1.6.42

2 years ago

1.6.44

2 years ago

1.6.43

2 years ago

1.6.46

2 years ago

1.6.45

2 years ago

1.6.47

2 years ago

1.6.40

2 years ago

1.6.41

2 years ago

1.6.37

2 years ago

1.6.39

2 years ago

1.6.38

2 years ago

1.6.36

2 years ago

1.6.24

2 years ago

1.6.23

2 years ago

1.6.26

2 years ago

1.6.25

2 years ago

1.6.28

2 years ago

1.6.27

2 years ago

1.6.29

2 years ago

1.6.31

2 years ago

1.6.30

2 years ago

1.6.33

2 years ago

1.6.32

2 years ago

1.6.35

2 years ago

1.6.34

2 years ago

1.6.4

2 years ago

1.6.3

2 years ago

1.6.2

2 years ago

1.6.1

2 years ago

1.6.0

2 years ago

1.6.9

2 years ago

1.6.8

2 years ago

1.6.7

2 years ago

1.6.6

2 years ago

1.6.5

2 years ago

1.6.20

2 years ago

1.6.22

2 years ago

1.6.21

2 years ago

1.5.136

2 years ago

1.5.135

2 years ago

1.5.134

2 years ago

1.5.133

2 years ago

1.5.132

2 years ago

1.5.131

2 years ago

1.6.11

2 years ago

1.6.10

2 years ago

1.6.13

2 years ago

1.6.12

2 years ago

1.6.15

2 years ago

1.6.14

2 years ago

1.6.17

2 years ago

1.6.16

2 years ago

1.6.19

2 years ago

1.6.18

2 years ago

1.5.129

3 years ago

1.5.128

3 years ago

1.5.127

3 years ago

1.5.130

3 years ago

1.5.119

3 years ago

1.5.118

3 years ago

1.5.117

3 years ago

1.5.116

3 years ago

1.5.126

3 years ago

1.5.125

3 years ago

1.5.124

3 years ago

1.5.123

3 years ago

1.5.122

3 years ago

1.5.121

3 years ago

1.5.120

3 years ago

1.5.109

3 years ago

1.5.115

3 years ago

1.5.113

3 years ago

1.5.112

3 years ago

1.5.111

3 years ago

1.5.110

3 years ago

2.3.46

3 years ago

2.3.43

3 years ago

1.5.108

3 years ago

1.5.107

3 years ago

1.5.106

3 years ago

1.5.105

3 years ago

1.5.104

3 years ago

1.5.103

3 years ago

1.5.85

3 years ago

1.5.87

3 years ago

1.5.86

3 years ago

1.5.89

3 years ago

1.5.88

3 years ago

1.5.90

3 years ago

1.5.92

3 years ago

1.5.91

3 years ago

1.5.94

3 years ago

1.5.93

3 years ago

1.5.102

3 years ago

1.5.96

3 years ago

1.5.101

3 years ago

1.5.95

3 years ago

1.5.100

3 years ago

1.5.98

3 years ago

1.5.97

3 years ago

1.5.99

3 years ago

1.5.70

3 years ago

1.5.72

3 years ago

1.5.71

3 years ago

1.5.74

3 years ago

1.5.73

3 years ago

2.3.23

3 years ago

1.5.75

3 years ago

1.5.78

3 years ago

1.5.77

3 years ago

1.5.79

3 years ago

1.5.81

3 years ago

1.5.80

3 years ago

1.5.83

3 years ago

1.5.82

3 years ago

1.5.84

3 years ago

1.5.61

3 years ago

1.5.60

3 years ago

1.5.63

3 years ago

1.5.62

3 years ago

1.5.65

3 years ago

1.5.64

3 years ago

1.5.67

3 years ago

1.5.66

3 years ago

1.5.69

3 years ago

1.5.68

3 years ago

1.5.50

3 years ago

1.5.52

3 years ago

1.5.51

3 years ago

1.5.54

3 years ago

1.5.53

3 years ago

1.5.56

3 years ago

1.5.55

3 years ago

1.5.57

3 years ago

1.5.59

3 years ago

1.5.30

3 years ago

1.5.32

3 years ago

1.5.31

3 years ago

1.5.34

3 years ago

1.5.33

3 years ago

1.5.36

3 years ago

1.5.35

3 years ago

1.5.38

3 years ago

1.5.37

3 years ago

1.5.39

3 years ago

1.5.41

3 years ago

1.5.40

3 years ago

1.5.43

3 years ago

1.5.42

3 years ago

1.5.45

3 years ago

1.5.44

3 years ago

1.5.47

3 years ago

1.5.46

3 years ago

1.5.49

3 years ago

1.5.48

3 years ago

1.5.18

3 years ago

1.5.17

3 years ago

1.5.19

3 years ago

1.5.21

3 years ago

1.5.20

3 years ago

1.5.23

3 years ago

1.5.22

3 years ago

1.5.25

3 years ago

1.5.24

3 years ago

1.5.27

3 years ago

1.5.26

3 years ago

1.5.29

3 years ago

1.5.28

3 years ago

1.5.16

3 years ago

1.5.9

3 years ago

1.5.8

3 years ago

1.5.7

3 years ago

1.5.6

3 years ago

1.5.5

3 years ago

1.5.4

3 years ago

1.5.3

3 years ago

1.5.10

3 years ago

1.5.12

3 years ago

1.5.11

3 years ago

1.5.14

3 years ago

1.5.13

3 years ago

1.5.15

3 years ago

1.4.20

3 years ago

1.4.22

3 years ago

1.4.21

3 years ago

1.5.2

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

1.4.13

3 years ago

1.4.15

3 years ago

1.4.14

3 years ago

1.4.17

3 years ago

1.4.16

3 years ago

1.4.19

3 years ago

1.4.18

3 years ago

1.4.6

3 years ago

1.4.5

3 years ago

1.4.4

3 years ago

1.4.3

3 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

2.2.0

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

1.4.9

3 years ago

1.4.11

3 years ago

1.4.8

3 years ago

1.4.10

3 years ago

1.4.7

3 years ago

1.4.12

3 years ago

1.3.4

3 years ago

1.3.3

3 years ago

1.3.2

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.4

3 years ago

2.1.5

3 years ago

2.0.8

3 years ago

2.1.0

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.12

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

0.0.1

4 years ago