crelm (createElement)

The exceptionally small (3.9kb), super fast, independent, fully tested, and modular javascript library that simplifies and expedites page work flows.

To get started, in your project's CLI run:

npm i crelm
/* or using a <script> tag*/
<script src="https://combinatronics.com/uraikus/crelm/master/browser/v7.0.js"></script>

crelm gives the additional capability to utilize the argument as an object:

// Example
import crelm from 'crelm'

let newLink = (name, href) => crelm({
  tag: 'A',
  parent: document.body, // a string === document.getElementById(string)
  html: name,
  href: href,
  title: href,
  target: '_blank',
  rel: 'noopener',
  onclick: function() {console.log(`Clicked: ${this.html}`)}
})

export default newLink

Easy DOM tree constructions:

let div = crelm({innerText: 'Hello World!'})
crelm({
  children:[
    'a text node', // Creates a textNode
    {tag: 'span', text: 'Greetings'}, // <span>Greetings</span>
    div, // Appends child to element
    conditionalElement ? {tag: 'Hello!'} : false,
    {oncreate: element => {
      doSomethingToElement(element)
    }}
  ]
})

Easy to update components on data changes:

import {state} from './state'

ondata = e => {
  // By default, this element will be updated to match or created if it doesn't exist
  crelm({id: 'test', style: {display: state.show}, parent: elem, text: e.data})
}

The second argument can pass options:

// defaults
crelm({}, {
  deepClone: false, // Wether objects in the attribute argument will be stored as references or new objects. True === new Object()
  replaceElement: false, // Wether to remove the old and create a new reference.
  alwaysInsert: false, // Overides the update procedure.
  mergeChanges: false // When true, children, arguments, dataset, and style won't be reset on each update
})

You can create a document fragment by using an array for the first argument or using the fragment tagName:

  document.body.appendChild(
    crelm([
      {tag: 'b', text: 'Hello World!'}
    ])
  )
  // or
  crelm({
    parent: document.body,
    tag: 'frag', // or 'fragment'
    children: [
      {tag: 'b', text: 'Hello World!'}
    ]
  })
  // also works for children elements
  crelm({children: [
    {tag: 'h1', text: 'Next sibling fragment:'},
    ['fragment','full','of','textNodes', {tag:'b', text: '!'}]
  ]})

You can utilize the shadow dom with the shadow attribute:

  crelm({
    shadow: [
      {tag:'b', text: 'Shadow child.'}
    ]
  })
  // or
  crelm({
    shadow: {
      closed: true, // defaults to false
      children: [
        {tag: 'b', text: 'Shadow child.'}
      ]
    }
  })

Your elements can then be turned back into JSON with the toJSON method:

let elem = crelm({
  tag: 'input',
  value: 'all the data',
  placeholder: 'enter the data',
  dataset: {
    test: true
  },
  style: {
    fontSize: 'large',
    color: 'blue'
  }
})
elem.toJSON() // would return the following:
{
  tagName: 'INPUT',
  value: 'all the data',
  placeholder: 'enter the data',
  dataset: {
    test: 'true' // dataset values are converted to strings
  },
  style: 'font-size: large; color: blue;' // notice type conversion here.
}

You can set attributes using the attr:Object key:

let elem = crelm({
  tag: 'input',
  attr: {max: 5, min: 2}
})
elem.outerHTML // <input max=5 min=2 />

Abbreviations/aliases:

  shadow === shadowRoot // Automatically attaches Shadow when an array of elements.
  tag === tagName
  parent === parentElement
  clss === className
  html === innerHTML
  text === innerText

If you like this package, also check out the following:

• crelmstat for state management
• crelm-popup for a super simple popup
• crease for modular css

Changelog

• V7.0.0
  • Added: Document fragments by using the 'frag' || 'fragment' tag or making the first argument an array.
  • Added: ShadowDOM can be utilized like the children argument.
• V6.0.1
  • Added: README.md with references to other products.
  • Changed: package description.
• V6.0.0
  • Added: if an element already exists with the id, it will instead modify the pre-existing one.
  • Added: options argument with alwaysInsert, replaceElement, mergeChanges, and deepClone.
  • Changed: deepClone is now in the options argument, not the attributes argument.
• V5.0.0
  • Fixed: Style attribute now converts when string.
  • Added: The ('attr': Object) attribute will now setAttributes via key/value.
• V4.0.0
  • Created changelog
  • Added the toJSON method
  • In crelm(attr) the attr must be an object or falsy.
  • The style attribute can now be a string.