v2.0

[baptistebriel]

Here's a place to drop ideas for the next version of dom-create-element
I've been using this module a lot and notices a few use cases where the API could be better.

As of one of the first todo is using cleaner options: the first parameter should be the selector, followed by an object.

const options = {
  id: 'el-id',
  classes: 'el-class el-another',
  styles: {
    backgroundImage: `url('/path/to.jpg')`,
    backgroundSize: `auto 100%`,
    backgroundPosition: `bottom center`,
    opacity: 0,
    visibility: 'hidden'
  },
  parent: document.body,
  position: 'before',
  children: create('a', { link: 'http://google.com', target: '_blank', html: 'Link' })
}

const el = create('div', options)

---

options.styles

Breaking changes! As of now, we're adding classes to the element with the styles option. I'd like to update this to classes; this will allow us to also specify inline styles for the element.

const el = create('div', {
  styles: {
    opacity: 1,
    visibility: 'visible'
  }
})

Object.assign(el.style, options.styles);

---

options.position

If the parent is specified in the options, we can use another option to decide either doing appendChild of prependChild.

const el = create('div', {
  parent: document.body,
  position: 'before'
})

if (options.position === 'after') {
  options.parent.appendChild(el)
} else {
  options.parent.insertBefore(el, options.parent.firstChild)
}

---

options.onload

If the element selector is an image, we could provide onload / onerror functions. We could drop completely the lazyload option as it's not really used and could be done manually.

const el = create('img', {
  src: '/path/to/img.jpg',
  styles: { opacity: 0 },
  onload: () => el.style.opacity = 1
})

el.onload = () => {
  options.onload()
  el.onload = null
}