//esnext
import { forEach } from 'chirashi'

const items = forEach([0, 1, 2], (item, i) => console.log(`${i}: ${item + 1}`)) //returns: [0, 1, 2]
// logs:
//   0: 1
//   1: 2
//   2: 3
forEach(0, (item, i) => console.log(`${i}: ${item + 1}`)) //returns: [0]
//   0: 1

//es5
var items = Chirashi.forEach([0, 1, 2], function (item, i) { console.log(i+': '+(item + 1)) }) //returns: [0, 1, 2]
// logs:
//   0: 1
//   1: 2
//   2: 3
Chirashi.forEach(0, function (item, i) { console.log(i+': '+(item + 1)) }) //returns: [0]
// logs:
//   0: 1

//esnext
import { createElement, append, forElements } from 'chirashi'
const sushi = createElement('.sushi')
const unagi = createElement('.unagi')
const yakitori = createElement('.yakitori')
const sashimi = createElement('.sashimi')
append(document.body, [sushi, unagi, yakitori, sashimi])
forElements('div', console.log) //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="yakitori"></div>, <div class="sashimi"></div>]
// logs:
// <div class="sushi"></div> 0
// <div class="unagi"></div> 1
// <div class="yakitori"></div> 2
// <div class="sashimi"></div> 3
forElements([yakitori, sashimi], console.log) //returns: [<div class="yakitori"></div>, <div class="sashimi"></div>]
// logs:
// <div class="yakitori"></div> 0
// <div class="sashimi"></div> 1

//es5
var sushi = Chirashi.createElement('.sushi')
var unagi = Chirashi.createElement('.unagi')
var yakitori = Chirashi.createElement('.yakitori')
var sashimi = Chirashi.createElement('.sashimi')
Chirashi.append(document.body, [sushi, unagi, yakitori, sashimi])
Chirashi.forElements('div', console.log) //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="yakitori"></div>, <div class="sashimi"></div>]
// logs:
// <div class="sushi"></div> 0
// <div class="unagi"></div> 1
// <div class="yakitori"></div> 2
// <div class="sashimi"></div> 3
Chirashi.forElements([yakitori, sashimi], console.log) //returns: [<div class="yakitori"></div>, <div class="sashimi"></div>]
// logs:
// <div class="yakitori"></div> 0
// <div class="sashimi"></div> 1

//esnext
import { forIn } from 'chirashi'
const californiaRoll = { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
forIn(californiaRoll, (key, value) => {
  console.log(`${key} -> ${value}`)
}) //returns: { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
// LOGS:
// name -> California Roll
// price -> 4.25
// recipe -> ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed']

//es5
var californiaRoll = { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
Chirashi.forIn(californiaRoll, (key, value) => {
  console.log(key + ' -> ' + value)
}) //returns: { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
// LOGS:
// name -> California Roll
// price -> 4.25
// recipe -> ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed']

//esnext
import { createElement, append, getElement } from 'chirashi'
const sushi = createElement('.sushi')
const unagi = createElement('.unagi')
const yakitori = createElement('.yakitori')
const sashimi = createElement('.sashimi')
append(document.body, [sushi, unagi, yakitori, sashimi])
getElement('div') //returns: <div class="sushi"></div>
getElement('.yakitori, .sashimi') //returns: <div class="yakitori"></div>
getElement([sushi, unagi, '.sashimi', '.unknown']) //returns: <div class="sushi"></div>
getElement('.wasabi') //returns: undefined

//es5
var sushi = Chirashi.createElement('.sushi')
var unagi = Chirashi.createElement('.unagi')
var yakitori = Chirashi.createElement('.yakitori')
var sashimi = Chirashi.createElement('.sashimi')
Chirashi.append(document.body, [sushi, unagi, yakitori, sashimi])
Chirashi.getElement('div') //returns: <div class="sushi"></div>
Chirashi.getElement('.yakitori, .sashimi') //returns: <div class="yakitori"></div>
Chirashi.getElement([sushi, unagi, '.sashimi', '.unknown']) //returns: <div class="sushi"></div>
Chirashi.getElement('.wasabi') //returns: undefined

//esnext
import { createElement, append, getElements } from 'chirashi'
const sushi = createElement('.sushi')
const unagi = createElement('.unagi')
const yakitori = createElement('.yakitori')
const sashimi = createElement('.sashimi')
append(document.body, [sushi, unagi, yakitori, sashimi])
getElements('div') //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="yakitori"></div>, <div class="sashimi"></div>]
getElements('.yakitori, .sashimi') //returns: [<div class="yakitori"></div>, <div class="sashimi"></div>]
getElements([sushi, unagi, '.sashimi', '.wasabi']) //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="sashimi"></div>]
getElements('.wasabi') //returns: []

//es5
var sushi = Chirashi.createElement('.sushi')
var unagi = Chirashi.createElement('.unagi')
var yakitori = Chirashi.createElement('.yakitori')
var sashimi = Chirashi.createElement('.sashimi')
Chirashi.append(document.body, [sushi, unagi, yakitori, sashimi])
Chirashi.getElements('div') //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="yakitori"></div>, <div class="sashimi"></div>]
Chirashi.getElements('.yakitori, .sashimi') //returns: [<div class="yakitori"></div>, <div class="sashimi"></div>]
Chirashi.getElements([sushi, unagi, '.sashimi', '.wasabi']) //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="sashimi"></div>]
Chirashi.getElements('.wasabi') //returns: []

//esnext
import { createElement, append, isDomElement } from 'chirashi'
const sushi = createElement('.sushi')
append(document.body, sushi)
isDomElement(window) //returns: true
isDomElement(sushi) //returns: true
isDomElement('.sushi') //returns: false

//es5
var sushi = Chirashi.createElement('.sushi')
Chirashi.append(document.body, sushi)
Chirashi.isDomElement(window) //returns: true
Chirashi.isDomElement(sushi) //returns: true
Chirashi.isDomElement('.sushi') //returns: false

//esnext
import { createElement, addClass } from 'chirashi'
const maki = createElement('.maki')
addClass(maki, 'wasabi') //returns: <div class="wasabi"></div>
addClass(maki, 'seaweed', 'cheese') //returns: <div class="wasabi seaweed cheese"></div>
addClass('.maki', 'avocado', 'salmon') //returns: <div class="wasabi seaweed cheese avocado salmon"></div>

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.addClass(maki, 'wasabi') //returns: <div class="wasabi"></div>
Chirashi.addClass(maki, 'seaweed', 'cheese') //returns: <div class="wasabi seaweed cheese"></div>
Chirashi.addClass('.maki', 'avocado', 'salmon') //returns: <div class="wasabi seaweed cheese avocado salmon"></div>

//esnext
import { createElement, append } from 'chirashi'
const maki = createElement('.maki')
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
const avocado = createElement('.avocado')
append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
var avocado = Chirashi.createElement('.avocado')
Chirashi.append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>

//esnext
import { createElement, append, children } from 'chirashi'
const maki = createElement('.maki')
append(maki, ['.salmon', '.avocado'])
children(maki) //returns: [<div class="salmon"></div>, <div class="avocado"></div>]

//es5
const maki = Chirashi.createElement('.maki')
Chirashi.append(maki, ['.salmon', '.avocado'])
Chirashi.children(maki) //returns: [<div class="salmon"></div>, <div class="avocado"></div>]

//esnext
import { createElement, append, clone } from 'chirashi'
const maki = createElement('.maki')
clone(maki) //returns: <div class="maki"></div>
const sushi = createElement('.sushi')
append(document.body, sushi)
clone('.sushi') //returns: <div class="sushi"></div>

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.clone(maki) //returns: <div class="maki"></div>
var sushi = Chirashi.createElement('.sushi')
Chirashi.append(document.body, sushi)
Chirashi.clone('.sushi') //returns: <div class="sushi"></div>

//esnext
import { createElement, append, closest } from 'chirashi'
const maki = createElement('.maki')
const cheese = createElement('.cheese')
append(maki, cheese)
append(cheese, '.avocado')
append(document.body, maki)
closest('.avocado', '.maki') //returns: <div class="maki"></div>
closest('.avocado', '.maki', '.cheese') //returns: false

//es5
var maki = Chirashi.createElement('.maki')
var cheese = Chirashi.createElement('.cheese')
Chirashi.append(maki, cheese)
Chirashi.append(cheese, '.avocado')
Chirashi.append(document.body, maki)
Chirashi.closest('.avocado', '.maki') //returns: <div class="maki"></div>
Chirashi.closest('.avocado', '.maki', '.cheese') //returns: false

//esnext
import { createElement } from 'chirashi'
const maki = createElement('a#sushi.link[data-href="chirashijs.org"][data-link]{click me!}') //returns: <a class="link" id="sushi" data-href="chirashijs.org" data-link>click me!</a>
const greetings = createElement('<h1>Hello <strong>World</strong>!</h1>') //returns: <h1>Hello <strong>World</strong>!</h1>

//es5
var maki = Chirashi.createElement('a#sushi.link[data-href="chirashijs.org"][data-link]{click me!}') //returns: <a class="link" id="sushi" data-href="chirashijs.org" data-link>click me!</a>
var greetings = Chirashi.createElement('<h1>Hello <strong>World</strong>!</h1>') //returns: <h1>Hello <strong>World</strong>!</h1>

//esnext
import { createElement, append, empty } from 'chirashi'
const maki = createElement('.maki') //returns: <div class="maki"></div>
append(maki, '.cheese') //returns: <div class="maki"><div class="cheese"></div></div>
empty(maki) //returns: [<div class="maki"></div>]

//es5
const maki = Chirashi.createElement('.maki') //returns: <div class="maki"></div>
Chirashi.append(maki, '.cheese') //returns: <div class="maki"><div class="cheese"></div></div>
Chirashi.empty(maki) //returns: [<div class="maki"></div>]

//esnext
import { createElement, append, filter } from 'chirashi'
const salmonMaki = createElement('.salmon.maki')
const tunaMaki = createElement('.tuna.maki')
const salmonSushi = createElement('.salmon.sushi')
const tunaSushi = createElement('.tuna.sushi')
append(document.body, [salmonMaki, tunaMaki, salmonSushi, tunaSushi])
filter('div', '.salmon') //returns: [<div class="salmon sushi"></div>, <div class="salmon maki"></div>]
filter([salmonMaki, tunaMaki, salmonSushi, tunaSushi], '.maki') //returns: [<div class="salmon maki"></div>, <div class="tuna maki"></div>]
filter('div', '.salmon') //returns: [<div class="salmon sushi"></div>, <div class="salmon maki"></div>]

//es5
var salmonMaki = Chirashi.createElement('.salmon.maki')
var tunaMaki = Chirashi.createElement('.tuna.maki')
var salmonSushi = Chirashi.createElement('.salmon.sushi')
var tunaSushi = Chirashi.createElement('.tuna.sushi')
Chirashi.append(document.body, [salmonMaki, tunaMaki, salmonSushi, tunaSushi])
Chirashi.filter('div', '.salmon') //returns: [<div class="salmon sushi"></div>, <div class="salmon maki"></div>]
Chirashi.filter([salmonMaki, tunaMaki, salmonSushi, tunaSushi], '.maki') //returns: [<div class="salmon maki"></div>, <div class="tuna maki"></div>]
Chirashi.filter('div', '.salmon') //returns: [<div class="salmon sushi"></div>, <div class="salmon maki"></div>]

//esnext
import { createElement, append, find } from 'chirashi'
const maki = createElement('.maki')
append(maki, ['.salmon[data-fish][data-inside]', '.avocado[data-inside]'])
const roll = createElement('.roll')
append(roll, '.tuna[data-fish][data-inside]')
append(document.body, [maki, roll])
find('div', '[data-fish]') //returns: [<div class="salmon" data-fish data-inside></div>, <div class="tuna" data-fish data-inside></div>]
find(maki, '[data-inside]') //returns: [<div class="salmon" data-fish data-inside></div>, <div class="avocado" data-inside></div>]

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, ['.salmon[data-fish][data-inside]', '.avocado[data-inside]'])
var roll = Chirashi.createElement('.roll')
Chirashi.append(roll, '.tuna[data-fish][data-inside]')
Chirashi.append(document.body, [maki, roll])
Chirashi.find('div', '[data-fish]') //returns: [<div class="salmon" data-fish data-inside></div>, <div class="tuna" data-fish data-inside></div>]
Chirashi.find(maki, '[data-inside]') //returns: [<div class="salmon" data-fish data-inside></div>, <div class="avocado" data-inside></div>]

//esnext
import { createElement, append, find } from 'chirashi'
const maki = createElement('.maki')
append(maki, ['.salmon[data-fish][data-inside]', '.avocado[data-inside]'])
const roll = createElement('.roll')
append(roll, '.tuna[data-fish][data-inside]')
append(document.body, [maki, roll])
findOne('div', '[data-fish]') //returns: <div class="salmon" data-fish data-inside></div>
findOne(maki, '[data-inside]') //returns: <div class="salmon" data-fish data-inside></div>

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, ['.salmon[data-fish][data-inside]', '.avocado[data-inside]'])
var roll = Chirashi.createElement('.roll')
Chirashi.append(roll, '.tuna[data-fish][data-inside]')
Chirashi.append(document.body, [maki, roll])
Chirashi.findOne('div', '[data-fish]') //returns: <div class="salmon" data-fish data-inside></div>
Chirashi.findOne(maki, '[data-inside]') //returns: <div class="salmon" data-fish data-inside></div>

//esnext
import { createElement, getAttr } from 'chirashi'
const maki = createElement('.maki[data-fish="salmon"]')
getAttr(maki, 'data-fish') //returns: "salmon"

//es5
const maki = Chirashi.createElement('.maki[data-fish="salmon"]')
Chirashi.getAttr(maki, 'data-fish') //returns: "salmon"

//esnext
import { createElement, getData } from 'chirashi'
const maki = createElement('.maki[data-fish="salmon"]')
getData(maki, 'fish') //returns: "salmon"

//es5
const maki = Chirashi.createElement('.maki[data-fish="salmon"]')
Chirashi.getData(maki, 'fish') //returns: "salmon"

//esnext
import { createElement, setHtml, getHtml } from 'chirashi'
const maki = createElement('p.maki')
setHtml(maki, 'salmon')
getHtml(maki) //returns: "salmon"

//es5
var maki = createElement('p.maki')
setHtml(maki, 'salmon')
getHtml(maki) //returns: "salmon"

//esnext
import { createElement, append, getProp } from 'chirashi'
const maki = createElement('.maki')
append(maki, '.salmon')
getProp(maki, 'firstChild') //returns: <div class="salmon"></div>

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, '.salmon')
Chirashi.getProp(maki, 'firstChild') //returns: <div class="salmon"></div>

//esnext
import { createElement, hasClass } from 'chirashi'
const maki = createElement('.salmon.cheese.maki')
hasClass(maki, 'salmon', 'cheese') //returns: true
hasClass(maki, 'salmon', 'avocado') //returns: false

//es5
var maki = Chirashi.createElement('.salmon.cheese.maki')
Chirashi.hasClass(maki, 'salmon', 'cheese') //returns: true
Chirashi.hasClass(maki, 'salmon', 'avocado') //returns: false

//esnext
import { createElement, append, indexInParent } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
indexInParent('.cheese') //returns: 1

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.indexInParent('.cheese') //returns: 1

//esnext
import { createElement, append, insertAfter } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]'])
insertAfter('.salmon', ['.avocado', '.wasabi']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="wasabi"></div><div class="cheese" data-cheese="cream"></div></div>

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]'])
Chirashi.insertAfter('.salmon', ['.avocado', '.wasabi']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="wasabi"></div><div class="cheese" data-cheese="cream"></div></div>

//esnext
import { createElement, append, insertBefore } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]'])
insertBefore('.cheese', ['.avocado', '.wasabi']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="wasabi"></div><div class="cheese" data-cheese="cream"></div></div>

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]'])
Chirashi.insertBefore('.cheese', ['.avocado', '.wasabi']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="wasabi"></div><div class="cheese" data-cheese="cream"></div></div>

//esnext
import { createElement, append, next } from 'chirashi'
const maki = createElement('.maki')
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
const avocado = createElement('.avocado')
append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
next(avocado) //returns: <div class="cheese" data-cheese="cream"></div>

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
var avocado = Chirashi.createElement('.avocado')
Chirashi.append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.next(avocado) //returns: <div class="cheese" data-cheese="cream"></div>

//esnext
import { createElement, append, parent } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
parent('.salmon') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>

//es5
var maki = Chirashi.createElement('.maki')
append(maki
Chirashi.append(document.body, maki)
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
Chirashi.parent('.salmon') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>

//esnext
import { createElement, append, parents } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
parents('.salmon') //returns: [<div class="maki">...</div>, <body>...</body>, <html>...</html>, document]

//es5
var maki = Chirashi.createElement('.maki')
append(maki
Chirashi.append(document.body, maki)
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
Chirashi.parents('.salmon') //returns: [<div class="maki">...</div>, <body>...</body>, <html>...</html>, document]

//esnext
import { createElement, append, prev } from 'chirashi'
const maki = createElement('.maki')
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
const avocado = createElement('.avocado')
append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
prev(avocado) //returns: <div class="salmon" data-fish="salmon"></div>

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
var avocado = Chirashi.createElement('.avocado')
Chirashi.append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.prev(avocado) //returns: <div class="salmon" data-fish="salmon"></div>

//esnext
import { createElement, append, remove } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
const avocado = createElement('.avocado')
append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
remove('.cheese') //returns: [<div class="cheese" data-cheese="cream"></div>]

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
var avocado = Chirashi.createElement('.avocado')
Chirashi.append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.remove('.cheese') //returns: [<div class="cheese" data-cheese="cream"></div>]

//esnext
import { createElement, append, removeAttr } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
removeAttr('.salmon', 'data-fish') //returns: [<div class="salmon"></div>]

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.removeAttr('.salmon', 'data-fish') //returns: [<div class="salmon"></div>]

//esnext
import { createElement, removeClass } from 'chirashi'
const maki = createElement('.maki.salmon.cheese.wasabi') //returns: <div class="maki salmon cheese wasabi"></div>
removeClass(maki, 'cheese', 'wasabi') //returns: [<div class="maki salmon"></div>]

//es5
var maki = Chirashi.createElement('.maki.salmon.cheese.wasabi') //returns: <div class="maki salmon cheese wasabi"></div>
Chirashi.removeClass(maki, 'cheese', 'wasabi') //returns: [<div class="maki salmon"></div>]

//esnext
import { createElement, append, removeData } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
removeData('.salmon', 'fish') //returns: [<div class="salmon"></div>]

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.removeData('.salmon', 'fish') //returns: [<div class="salmon"></div>]

//esnext
import { createElement, setAttr } from 'chirashi'
const maki = createElement('.maki')
setAttr(maki, {
  dataFish: 'salmon'
}) //returns: [<div class="maki" data-fish="salmon">]

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.setAttr(maki, {
  dataFish: 'salmon'
}) //returns: [<div class="maki" data-fish="salmon">]

//esnext
import { createElement, setData } from 'chirashi'
const maki = createElement('.maki')
setData(maki, {
  fish: 'salmon'
}) //returns: [<div class="maki" data-fish="salmon">]

//es5
var maki = Chirashi.createElement('.maki')
Chirashi.setData(maki, {
  fish: 'salmon'
}) //returns: [<div class="maki" data-fish="salmon">]

//esnext
import { createElement, setHtml, getHtml } from 'chirashi'
const maki = createElement('p.maki')
setHtml(maki, 'salmon') //returns: [<p class="maki">salmon</p>]
getHtml(maki) //returns: "salmon"

//es5
var maki = createElement('p.maki')
setHtml(maki, 'salmon') //returns: [<p class="maki">salmon</p>]
getHtml(maki) //returns: "salmon"

//esnext
import { createElement, setProp, getProp } from 'chirashi'
const maki = createElement('input.maki')
setProp(maki, { value: 'こんにちは世界' })
getProp(maki, 'value') //returns: こんにちは世界

//es5
var maki = Chirashi.createElement('input.maki')
Chirashi.setProp(maki, { value: 'こんにちは世界' })
Chirashi.getProp(maki, 'value') //returns: こんにちは世界

//esnext
import { createElement, toggleClass, clone, setData, getData } from 'chirashi'
const maki = createElement('.wasabi.salmon.maki') //returns: <div class="maki salmon wasabi"></div>
const sushi = createElement('.salmon.sushi') //returns: <div class="sushi salmon"></div>
toggleClass([maki, sushi], 'wasabi') //returns: [<div class="maki salmon"></div>, <div class="sushi salmon wasabi"></div>]
const scdMaki = clone(maki)
setData(maki, { for: 'leonard' })
setData(scdMaki, { for: 'sheldon' })
toggleClass([maki, scdMaki], {
  cheese: element => {
    return getData(element, 'for') !== 'leonard'
  }
}) //returns: [<div class="maki salmon cheese" data-for="sheldon"></div>, <div class="maki salmon" data-for="leonard"></div>]

//es5
var maki = Chirashi.createElement('.wasabi.salmon.maki') //returns: <div class="wasabi salmon maki"></div>
var sushi = Chirashi.createElement('.salmon.sushi') //returns: <div class="salmon sushi"></div>
Chirashi.toggleClass([maki, sushi], 'wasabi') //returns: [<div class="maki salmon"></div>, <div class="sushi salmon wasabi"></div>]
var scdMaki = Chirashi.clone(maki)
Chirashi.setData(maki, { for: 'leonard' })
Chirashi.setData(scdMaki, { for: 'sheldon' })
Chirashi.toggleClass([maki, scdMaki], {
  cheese: function (element) {
    return Chirashi.getData(element, 'for') !== 'leonard'
  }
}) //returns: [<div class="maki salmon cheese" data-for="sheldon"></div>, <div class="maki salmon" data-for="leonard"></div>]

//esnext
import { createElement, append, delegate, trigger } from 'chirashi'
const off = delegate('.cheese, .wasabi', {
  click(e, target) => {
    console.log('clicked', target)
  },
  'mouseenter mousemove': (e, target) => {
    console.log('mouse in', target)
  }
})
const maki = createElement('a.cheese.maki')
const sushi = createElement('a.wasabi.sushi')
append(document.body, [maki, sushi])
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
off('mouseenter mousemove') //remove mouseenter and mousemove listeners
off() //remove all listeners

//es5
var off = Chirashi.delegate('.cheese, .wasabi', {
  'click': function (e, target) {
    console.log('clicked', target)
  },
  'mouseenter mousemove': function(e, target) {
    console.log('mouse in', target)
  }
})
var maki = Chirashi.createElement('a.cheese.maki')
var sushi = Chirashi.createElement('a.wasabi.sushi')
Chirashi.append(document.body, [maki, sushi])
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
Chirashi.trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
off('mouseenter mousemove') //remove mouseenter and mousemove listeners
off() //remove all listeners

//esnext
import { createElement, append, on, trigger } from 'chirashi'
const maki = createElement('a.cheese.maki')
const sushi = createElement('a.wasabi.sushi')
append(document.body, [maki, sushi])
const off = on('.cheese, .wasabi', {
  click(e, target) {
    console.log('clicked', target)
  },
  'mouseenter mousemove': {
    handler: (e, target) => {
      console.log('mouse in', target)
    },
    passive: true
  }
})
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
off(maki, 'click') //remove click event listener on maki
off() //remove all listeners from all elements

//es5
var off = Chirashi.bind('.cheese, .wasabi', {
  'click': function (e, target) {
    console.log('clicked', target)
  },
  'mouseenter mousemove': {
    handler: (e, target) => {
      console.log('mouse in', target)
    },
    passive: true
  }
})
var maki = Chirashi.createElement('a.cheese.maki')
var sushi = Chirashi.createElement('a.wasabi.sushi')
Chirashi.append(document.body, [maki, sushi])
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
Chirashi.trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
off(maki, 'click') //remove click event listener on maki
off() //remove all listeners from all elements

//esnext
import { createElement, append, once, trigger } from 'chirashi'
const maki = createElement('a.cheese.maki')
const sushi = createElement('a.wasabi.sushi')
append(document.body, [maki, sushi])
const cancel = once('.cheese, .wasabi', {
  click(e, target) => {
    console.log('clicked', target)
  },
  'mouseenter mousemove': (e, target) => {
    console.log('mouse in', target)
  }
}, true, true)
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
// click event listener was auto-removed from maki
trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
// click event listener was auto-removed from sushi
cancel() //remove all listeners from all elements
once('.cheese, .wasabi', {
  click(e, target) => {
    console.log('clicked', target)
  }
})
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
// all events listeners were auto-removed from all elements
trigger(sushi, 'click') //simulate user's click
// won't log anything

//es5
var maki = Chirashi.createElement('a.cheese.maki')
var sushi = Chirashi.createElement('a.wasabi.sushi')
Chirashi.append(document.body, [maki, sushi])
var cancel = Chirashi.once('.cheese, .wasabi', {
  click: function (e, target) {
    console.log('clicked', target)
  },
  'mouseenter mousemove': function (e, target) {
    console.log('mouse in', target)
  }
}, true, true)
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
// click event listener was auto-removed from maki
Chirashi.trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
// click event listener was auto-removed from sushi
cancel() //remove all listeners from all elements
Chirashi.once('.cheese, .wasabi', {
  click: function (e, target) {
    console.log('clicked', target)
  }
})
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
// all events listeners were auto-removed from all elements
Chirashi.trigger(sushi, 'click') //simulate user's click
// won't log anything

//esnext
import { ready } from 'chirashi'
ready(() => {
  console.log('Hello World!')
})
// Dom already complete or event fired.
// LOGS: "Hello World!"

//es5
Chirashi.ready(function () {
  console.log('Hello World!')
})
// Dom already complete or event fired.
// LOGS: "Hello World!"

//esnext
import { createElement, append, on, trigger } from 'chirashi'
const maki = createElement('a.cheese.maki')
const sushi = createElement('a.wasabi.sushi')
append(document.body, [maki, sushi])
const listener = on('.cheese, .wasabi', {
  click(e, target) => {
    console.log('clicked', target)
  }
})
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>

//es5
var listener = Chirashi.bind('.cheese, .wasabi', {
  'click': function (e, target) {
    console.log('clicked', target)
  }
})
var maki = Chirashi.createElement('a.cheese.maki')
var sushi = Chirashi.createElement('a.wasabi.sushi')
Chirashi.append(document.body, [maki, sushi])
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
Chirashi.trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>

//esnext
import { createElement, setStyle, clearStyle } from 'chirashi'
const maki = createElement('a.cheese.maki')
setStyleProp(maki, {
  position: 'absolute',
  top: 10,
  width: 200,
  height: 200,
  background: 'red'
}) // returns: [<a class="cheese maki" style="position: 'absolute'; top: '10px'; width: '200px'; height: '200px'; background: 'red';"></a>]
clearStyle(maki, 'width', 'height', 'background') // returns: [<a class="cheese maki" style="position: 'absolute'; top: '10px';"></a>]

//es5
var maki = Chirashi.createElement('a.cheese.maki')
Chirashi.setStyleProp(maki, {
  position: 'absolute',
  top: 10,
  width: 200,
  height: 200,
  background: 'red'
}) // returns: [<a class="cheese maki" style="position: 'absolute'; top: '10px'; width: '200px'; height: '200px'; background: 'red';"></a>]
Chirashi.clearStyle(maki, 'width', 'height', 'background') // returns: [<a class="cheese maki" style="position: 'absolute'; top: '10px';"></a>]

esnext
import { setStyleProp, append, clientRect } from 'chirashi'

setStyleProp([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

append(document.body, '.poulp')

const poulp = setStyleProp('.poulp', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  background: 'red'
})

clientRect(poulp) // returns: { bottom: 300, height: 100, left: 240, right: 0, top: 200, width: 100 }

es5
Chirashi.setStyleProp([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

Chirashi.append(document.body, '.poulp')

var poulp = Chirashi.setStyleProp('.poulp', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  background: 'red'
})

Chirashi.clientRect(poulp) // returns: { bottom: 300, height: 100, left: 240, right: 0, top: 200, width: 100 }

//esnext
import { append, setStyleProp, getComputedStyle } from 'chirashi'
append(document.body, '.maki')
const maki = setStyleProp('.maki', {
  display: 'block',
  position: 'relative',
  top: 10
})
getComputedStyle(maki) //returns: { display: 'block', position: 'relative', top: '10px', [... other properties according to the browser] }

//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.setStyleProp('.maki', {
  display: 'block',
  position: 'relative',
  top: 10
})
Chirashi.getComputedStyle(maki) //returns: { display: 'block', position: 'relative', top: '10px', [... other properties according to the browser] }

//esnext
import { append, setStyleProp, getHeight } from 'chirashi'
append(document.body, '.maki')
const maki = setStyleProp('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
getHeight(maki, true) //returns: 260
getHeight(maki) //returns: 220

//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.setStyleProp('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
Chirashi.getHeight(maki, true) //returns: 260
Chirashi.getHeight(maki) //returns: 220

//esnext
import { append, setStyleProp, getSize } from 'chirashi'
append(document.body, '.maki')
const maki = setStyleProp('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
getSize(maki, true) //returns: { width: 260, height: 260 }
getSize(maki) //returns: { width: 220, height: 220 }

//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.setStyleProp('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
Chirashi.getSize(maki, true) //returns: { width: 260, height: 260 }
Chirashi.getSize(maki) //returns: { width: 220, height: 220 }

//esnext
import { append, setStyleProp, getStyleProp } from 'chirashi'
append(document.body, '.maki')
const maki = setStyleProp('.maki', {
  display: 'block',
  position: 'relative',
  top: 10
})
getStyleProp(maki, 'display', 'top') //returns: { display: "block", top: 10 }

//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.setStyleProp('.maki', {
  display: 'block',
  position: 'relative',
  top: 10
})
Chirashi.getStyleProp(maki, 'display', 'top') //returns: { display: "block", top: 10 }

//esnext
import { append, setStyleProp, getWidth } from 'chirashi'
append(document.body, '.maki')
const maki = setStyleProp('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
getWidth(maki, true) //returns: 260
getWidth(maki) //returns: 220

//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.setStyleProp('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
Chirashi.getWidth(maki, true) //returns: 260
Chirashi.getWidth(maki) //returns: 220

//esnext
import { append, hide, getStyleProp }
append(document.body, '.maki')
const maki = hide('.maki')
getStyleProp(maki, 'visibility') // returns: "hidden"

//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.hide('.maki')
Chirashi.getStyleProp(maki, 'visibility') // returns: "hidden"

//esnext
import { setStyleProp, append, offset }
setStyleProp([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})
append(document.body, '.sushi')
const sushi = setStyleProp('.sushi', {
  display: 'block',
  width: 100,
  height: 100,
  position: 'absolute',
  top: 200,
  left: 240,
  background: 'red'
})
offset(sushi) // returns: { top: 200, left: 240 }

//es5
Chirashi.setStyleProp([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})
Chirashi.append(document.body, '.sushi')
var sushi = Chirashi.setStyleProp('.sushi', {
  display: 'block',
  width: 100,
  height: 100,
  position: 'absolute',
  top: 200,
  left: 240,
  background: 'red'
})
Chirashi.offset(sushi) // returns: { top: 200, left: 240 }

//esnext
import { append, setStyleProp, position } from 'chirashi'

setStyleProp([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

append(document.body, '.maki')
append('.maki', '.salmon')

setStyleProp('.maki', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  borderRadius: '50%',
  background: 'black'
})

const salmon = setStyleProp('.salmon', {
  display: 'block',
  position: 'absolute',
  top: 20,
  left: 10,
  width: 10,
  height: 10,
  borderRadius: '50%',
  background: 'pink'
})

position(salmon) // returns: { top: 20, left: 10 }

//es5
Chirashi.setStyleProp([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

Chirashi.append(document.body, '.maki')
Chirashi.append('.maki', '.salmon')

Chirashi.setStyleProp('.maki', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  borderRadius: '50%',
  background: 'black'
})

var salmon = Chirashi.setStyleProp('.salmon', {
  display: 'block',
  position: 'absolute',
  top: 20,
  left: 10,
  width: 10,
  height: 10,
  borderRadius: '50%',
  background: 'pink'
})

Chirashi.position(salmon) // returns: { top: 20, left: 10 }

esnext
import { setStyleProp, append, screenPosition } from 'chirashi'

setStyleProp([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

append(document.body, '.poulp')

const poulp = setStyleProp('.poulp', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  background: 'red'
})

screenPosition(poulp) // returns: { top: 200, left: 240 }

es5
Chirashi.setStyleProp([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

Chirashi.append(document.body, '.poulp')

var poulp = Chirashi.setStyleProp('.poulp', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  background: 'red'
})

Chirashi.screenPosition(poulp) // returns: { top: 200, left: 240 }

//esnext
import { append, setCssVariable } from 'chirashi'

append(document.body, '.maki')

setCssVariable('.maki', {
  opacity: 0.5,
  textColor: 'blue'
}) // returns: [<div class="maki" style="--opacity: 0.5; --text-color: 'rgb(0,0,255)'"></div>]

//es5
Chirashi.append(document.body, '.maki')

Chirashi.setCssVariable('.maki', {
  opacity: 0.5,
  textColor: 'blue'
}) // returns: [<div class="maki" style="--opacity: 0.5; --text-color: 'rgb(0,0,255)'"></div>]

//esnext
import { append, setHeight } from 'chirashi'

append(document.body, '.maki')

setHeight('.maki', 20) // returns: [<div class="maki" style="height: 20px;"></div>]
setHeight('.maki', '100%') // returns: [<div class="maki" style="height: 100%;"></div>]

//es5
Chirashi.append(document.body, '.maki')

Chirashi.setHeight('.maki', 20) // returns: [<div class="maki" style="height: 20px;"></div>]
Chirashi.setHeight('.maki', '100%') // returns: [<div class="maki" style="height: 100%;"></div>]

//esnext
import { append, setSize } from 'chirashi'

append(document.body, '.maki')

setSize('.maki', 20, '100%') // returns: [<div class="maki" style="width: 20px; height: 100%;"></div>]