From 67ad042736109c8bde2eb0ac670de59d2202ce55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn?= <me@tentakelfabrik.de>
Date: Thu, 22 Jul 2021 23:15:31 +0200
Subject: [PATCH] adding

---
 mix-manifest.json                        |    2 +-
 public/css/index.css                     |   10 +-
 public/js/create-bucket.js               | 4556 +++++++++++++++++++++
 public/js/critical.js                    |  149 +-
 public/js/dashboard.js                   | 2595 +++++++++++-
 public/js/index.js                       | 4650 +---------------------
 resources/js/components/field-error.riot |  108 +
 resources/js/create-bucket.js            |   27 +
 resources/js/critical.js                 |    2 +-
 resources/js/dashboard.js                |   10 +-
 resources/js/index.js                    |    2 -
 resources/scss/components/_field.scss    |    8 +
 resources/scss/index.scss                |    6 +-
 resources/views/bucket/form.html         |   10 +-
 resources/views/index.html               |    4 +-
 resources/views/layout.html              |    5 +-
 src/http/api/bucket.ts                   |   14 +-
 src/http/bucket.ts                       |    1 +
 webpack.mix.js                           |    2 +-
 19 files changed, 7470 insertions(+), 4691 deletions(-)
 create mode 100644 public/js/create-bucket.js
 create mode 100644 resources/js/components/field-error.riot
 create mode 100644 resources/js/create-bucket.js
 delete mode 100644 resources/js/index.js
 create mode 100644 resources/scss/components/_field.scss

diff --git a/mix-manifest.json b/mix-manifest.json
index ccf5629..83a95b5 100644
--- a/mix-manifest.json
+++ b/mix-manifest.json
@@ -1,7 +1,7 @@
 {
     "/public/js/spritemap.js": "/public/js/spritemap.js",
-    "/public/js/index.js": "/public/js/index.js",
     "/public/js/critical.js": "/public/js/critical.js",
+    "/public/js/create-bucket.js": "/public/js/create-bucket.js",
     "/public/js/dashboard.js": "/public/js/dashboard.js",
     "/public/css/index.css": "/public/css/index.css",
     "/public/css/demo.html": "/public/css/demo.html",
diff --git a/public/css/index.css b/public/css/index.css
index 50b06af..03ad9c6 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -14919,15 +14919,19 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
   color: var(--text);
 }
 
+.field-error ul {
+  list-style: none;
+  padding: 0;
+}
+
 .container--app {
   max-width: 100%;
   padding: 15px 30px;
 }
 
 .turbolinks-progress-bar {
-  width: 5px;
-  height: 100%;
-  background-color: blue;
+  height: 5px;
+  background-color: var(--danger);
 }
 
 .app-header .logo {
diff --git a/public/js/create-bucket.js b/public/js/create-bucket.js
new file mode 100644
index 0000000..b33303f
--- /dev/null
+++ b/public/js/create-bucket.js
@@ -0,0 +1,4556 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./resources/js/components/field-error.riot":
+/*!**************************************************!*\
+  !*** ./resources/js/components/field-error.riot ***!
+  \**************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  'css': null,
+
+  'exports': {
+    state: {
+        errors: [
+
+        ],
+    },
+
+    /**
+     *
+     *
+     *  @param  {Object} props [description]
+     *  @param  {Object} state [description]
+     *
+     */
+    onMounted(props, state)
+    {
+        // getting parent element for entire field
+        const parent = this.root.closest('.field-group')
+
+        // getting current element by name
+        const element = document.querySelector('[name="' + props.name + '"]')
+
+        // getting form
+        const form = element.closest('form')
+
+        // element, form are exists and nofieldupdate is not set
+        // each change of the element dispatch a event to form validation
+        if (element && form && !props.nofieldupdate) {
+            element.addEventListener('input', (event) => {
+                this.dispatchCustomEvent(event, form, props.name)
+            })
+        }
+
+        // add custom event to listen to form-validation
+        this.root.addEventListener('form-validation', (event) => {
+            this.onFormValidation(event, parent)
+        })
+    },
+
+    /**
+     *  process form validation triggered by form
+     *
+     *  @param  {Event} event
+     *  @param  {Element} parent
+     *
+     */
+    onFormValidation(event, parent)
+    {
+        // if detail is a value, set to errors
+        if (event.detail) {
+            this.state.errors = event.detail
+
+            parent.classList.add('field--error')
+            parent.classList.remove('field--valid')
+        } else {
+            this.state.errors = []
+
+            parent.classList.remove('field--error')
+            parent.classList.add('field--valid')
+        }
+
+        this.update()
+    },
+
+    /**
+     *  create event to send to form validation
+     *
+     *  @param  {Event} event
+     *  @param  {Element} form
+     *  @param  {string} name
+     *
+     */
+    dispatchCustomEvent(event, form, name)
+    {
+        const fieldUpdateEvent = new CustomEvent('field-update', {
+            'detail': {
+                'name': name,
+                'value': event.target.value
+            }
+        })
+
+        form.dispatchEvent(fieldUpdateEvent)
+    }
+  },
+
+  'template': function(
+    template,
+    expressionTypes,
+    bindingTypes,
+    getComponent
+  ) {
+    return template(
+      '<div expr6="expr6" class="field-error"></div>',
+      [
+        {
+          'type': bindingTypes.IF,
+
+          'evaluate': function(
+            _scope
+          ) {
+            return _scope.state.errors.length > 0;
+          },
+
+          'redundantAttribute': 'expr6',
+          'selector': '[expr6]',
+
+          'template': template(
+            '<ul><li expr7="expr7"></li></ul>',
+            [
+              {
+                'type': bindingTypes.EACH,
+                'getKey': null,
+                'condition': null,
+
+                'template': template(
+                  ' ',
+                  [
+                    {
+                      'expressions': [
+                        {
+                          'type': expressionTypes.TEXT,
+                          'childNodeIndex': 0,
+
+                          'evaluate': function(
+                            _scope
+                          ) {
+                            return [
+                              _scope.error
+                            ].join(
+                              ''
+                            );
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                ),
+
+                'redundantAttribute': 'expr7',
+                'selector': '[expr7]',
+                'itemName': 'error',
+                'indexName': null,
+
+                'evaluate': function(
+                  _scope
+                ) {
+                  return _scope.state.errors;
+                }
+              }
+            ]
+          )
+        }
+      ]
+    );
+  },
+
+  'name': 'field-error'
+});
+
+/***/ }),
+
+/***/ "./node_modules/@tentakelfabrik/tiny-validator/src/FormValidator.js":
+/*!**************************************************************************!*\
+  !*** ./node_modules/@tentakelfabrik/tiny-validator/src/FormValidator.js ***!
+  \**************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var validate_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! validate.js */ "./node_modules/validate.js/validate.js");
+/* harmony import */ var validate_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(validate_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var form_serialize__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! form-serialize */ "./node_modules/form-serialize/index.js");
+/* harmony import */ var form_serialize__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(form_serialize__WEBPACK_IMPORTED_MODULE_1__);
+
+
+
+/**
+ *  Form Validator with RiotJS Components
+ *
+ *
+ *
+ *
+ */
+class FormValidator
+{
+    /**
+     *
+     *  @param {[type]} formSelector [description]
+     *  @param {[type]} constraits   [description]
+     */
+    constructor(formSelector, constraits)
+    {
+        // getting selector to find form-element
+        this.formSelector = formSelector
+
+        // constraits for validate.js
+        this.constraits = constraits
+
+        // get form and elements
+        this.form = document.querySelector(this.formSelector)
+        this.elements = this.form.querySelectorAll('field-error')
+
+        // adding submit event
+        this.form.addEventListener('submit', (event) => {
+            this.onSubmit(event)
+        })
+
+        // adding event if a element is updated
+        this.form.addEventListener('field-update', (event) => {
+            this.onFieldUpdate(event)
+        })
+    }
+
+    /**
+     *
+     *  @param  {[type]} event [description]
+     *  @return {[type]}       [description]
+     */
+    onSubmit(event)
+    {
+        let errors = validate_js__WEBPACK_IMPORTED_MODULE_0___default()(form_serialize__WEBPACK_IMPORTED_MODULE_1___default()(event.target, {
+            hash: true
+        }), this.constraits, {
+            fullMessages: false
+        })
+
+        if (errors) {
+            event.preventDefault()
+
+            // send each element a event
+            this.elements.forEach((element) => {
+                let elementErrors = false
+
+                // check for errors by name
+                if (errors[element.attributes.name.nodeValue]) {
+                    elementErrors = errors[element.attributes.name.nodeValue]
+                }
+
+                this.dispatchCustomEvent(elementErrors, element)
+            })
+        }
+    }
+
+    /**
+     *
+     *
+     *  @param  {Event} event
+     *
+     */
+    onFieldUpdate(event)
+    {
+        // workaround, make sure that value for single is undefined if it is empty
+        if (event.detail.value == '') {
+            event.detail.value = undefined
+        }
+
+        let errors = validate_js__WEBPACK_IMPORTED_MODULE_0___default().single(event.detail.value, this.constraits[event.detail.name])
+
+        // search for element by name and dispatch event
+        this.elements.forEach((element) => {
+            if (element.attributes.name.nodeValue == event.detail.name) {
+                this.dispatchCustomEvent(errors, element)
+            }
+        })
+    }
+
+    /**
+     *  dispatch event to single element
+     *
+     *  @param  {Array} errors
+     *  @param  {Element} element
+     *
+     */
+    dispatchCustomEvent(errors, element)
+    {
+        let detail = false
+
+        if (errors) {
+            detail = errors
+        }
+
+        const formValidationEvent = new CustomEvent('form-validation', {
+            'detail': detail
+        })
+
+        element.dispatchEvent(formValidationEvent)
+    }
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FormValidator);
+
+/***/ }),
+
+/***/ "./node_modules/form-serialize/index.js":
+/*!**********************************************!*\
+  !*** ./node_modules/form-serialize/index.js ***!
+  \**********************************************/
+/***/ ((module) => {
+
+// get successful control from form and assemble into object
+// http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
+
+// types which indicate a submit action and are not successful controls
+// these will be ignored
+var k_r_submitter = /^(?:submit|button|image|reset|file)$/i;
+
+// node names which could be successful controls
+var k_r_success_contrls = /^(?:input|select|textarea|keygen)/i;
+
+// Matches bracket notation.
+var brackets = /(\[[^\[\]]*\])/g;
+
+// serializes form fields
+// @param form MUST be an HTMLForm element
+// @param options is an optional argument to configure the serialization. Default output
+// with no options specified is a url encoded string
+//    - hash: [true | false] Configure the output type. If true, the output will
+//    be a js object.
+//    - serializer: [function] Optional serializer function to override the default one.
+//    The function takes 3 arguments (result, key, value) and should return new result
+//    hash and url encoded str serializers are provided with this module
+//    - disabled: [true | false]. If true serialize disabled fields.
+//    - empty: [true | false]. If true serialize empty fields
+function serialize(form, options) {
+    if (typeof options != 'object') {
+        options = { hash: !!options };
+    }
+    else if (options.hash === undefined) {
+        options.hash = true;
+    }
+
+    var result = (options.hash) ? {} : '';
+    var serializer = options.serializer || ((options.hash) ? hash_serializer : str_serialize);
+
+    var elements = form && form.elements ? form.elements : [];
+
+    //Object store each radio and set if it's empty or not
+    var radio_store = Object.create(null);
+
+    for (var i=0 ; i<elements.length ; ++i) {
+        var element = elements[i];
+
+        // ingore disabled fields
+        if ((!options.disabled && element.disabled) || !element.name) {
+            continue;
+        }
+        // ignore anyhting that is not considered a success field
+        if (!k_r_success_contrls.test(element.nodeName) ||
+            k_r_submitter.test(element.type)) {
+            continue;
+        }
+
+        var key = element.name;
+        var val = element.value;
+
+        // we can't just use element.value for checkboxes cause some browsers lie to us
+        // they say "on" for value when the box isn't checked
+        if ((element.type === 'checkbox' || element.type === 'radio') && !element.checked) {
+            val = undefined;
+        }
+
+        // If we want empty elements
+        if (options.empty) {
+            // for checkbox
+            if (element.type === 'checkbox' && !element.checked) {
+                val = '';
+            }
+
+            // for radio
+            if (element.type === 'radio') {
+                if (!radio_store[element.name] && !element.checked) {
+                    radio_store[element.name] = false;
+                }
+                else if (element.checked) {
+                    radio_store[element.name] = true;
+                }
+            }
+
+            // if options empty is true, continue only if its radio
+            if (val == undefined && element.type == 'radio') {
+                continue;
+            }
+        }
+        else {
+            // value-less fields are ignored unless options.empty is true
+            if (!val) {
+                continue;
+            }
+        }
+
+        // multi select boxes
+        if (element.type === 'select-multiple') {
+            val = [];
+
+            var selectOptions = element.options;
+            var isSelectedOptions = false;
+            for (var j=0 ; j<selectOptions.length ; ++j) {
+                var option = selectOptions[j];
+                var allowedEmpty = options.empty && !option.value;
+                var hasValue = (option.value || allowedEmpty);
+                if (option.selected && hasValue) {
+                    isSelectedOptions = true;
+
+                    // If using a hash serializer be sure to add the
+                    // correct notation for an array in the multi-select
+                    // context. Here the name attribute on the select element
+                    // might be missing the trailing bracket pair. Both names
+                    // "foo" and "foo[]" should be arrays.
+                    if (options.hash && key.slice(key.length - 2) !== '[]') {
+                        result = serializer(result, key + '[]', option.value);
+                    }
+                    else {
+                        result = serializer(result, key, option.value);
+                    }
+                }
+            }
+
+            // Serialize if no selected options and options.empty is true
+            if (!isSelectedOptions && options.empty) {
+                result = serializer(result, key, '');
+            }
+
+            continue;
+        }
+
+        result = serializer(result, key, val);
+    }
+
+    // Check for all empty radio buttons and serialize them with key=""
+    if (options.empty) {
+        for (var key in radio_store) {
+            if (!radio_store[key]) {
+                result = serializer(result, key, '');
+            }
+        }
+    }
+
+    return result;
+}
+
+function parse_keys(string) {
+    var keys = [];
+    var prefix = /^([^\[\]]*)/;
+    var children = new RegExp(brackets);
+    var match = prefix.exec(string);
+
+    if (match[1]) {
+        keys.push(match[1]);
+    }
+
+    while ((match = children.exec(string)) !== null) {
+        keys.push(match[1]);
+    }
+
+    return keys;
+}
+
+function hash_assign(result, keys, value) {
+    if (keys.length === 0) {
+        result = value;
+        return result;
+    }
+
+    var key = keys.shift();
+    var between = key.match(/^\[(.+?)\]$/);
+
+    if (key === '[]') {
+        result = result || [];
+
+        if (Array.isArray(result)) {
+            result.push(hash_assign(null, keys, value));
+        }
+        else {
+            // This might be the result of bad name attributes like "[][foo]",
+            // in this case the original `result` object will already be
+            // assigned to an object literal. Rather than coerce the object to
+            // an array, or cause an exception the attribute "_values" is
+            // assigned as an array.
+            result._values = result._values || [];
+            result._values.push(hash_assign(null, keys, value));
+        }
+
+        return result;
+    }
+
+    // Key is an attribute name and can be assigned directly.
+    if (!between) {
+        result[key] = hash_assign(result[key], keys, value);
+    }
+    else {
+        var string = between[1];
+        // +var converts the variable into a number
+        // better than parseInt because it doesn't truncate away trailing
+        // letters and actually fails if whole thing is not a number
+        var index = +string;
+
+        // If the characters between the brackets is not a number it is an
+        // attribute name and can be assigned directly.
+        if (isNaN(index)) {
+            result = result || {};
+            result[string] = hash_assign(result[string], keys, value);
+        }
+        else {
+            result = result || [];
+            result[index] = hash_assign(result[index], keys, value);
+        }
+    }
+
+    return result;
+}
+
+// Object/hash encoding serializer.
+function hash_serializer(result, key, value) {
+    var matches = key.match(brackets);
+
+    // Has brackets? Use the recursive assignment function to walk the keys,
+    // construct any missing objects in the result tree and make the assignment
+    // at the end of the chain.
+    if (matches) {
+        var keys = parse_keys(key);
+        hash_assign(result, keys, value);
+    }
+    else {
+        // Non bracket notation can make assignments directly.
+        var existing = result[key];
+
+        // If the value has been assigned already (for instance when a radio and
+        // a checkbox have the same name attribute) convert the previous value
+        // into an array before pushing into it.
+        //
+        // NOTE: If this requirement were removed all hash creation and
+        // assignment could go through `hash_assign`.
+        if (existing) {
+            if (!Array.isArray(existing)) {
+                result[key] = [ existing ];
+            }
+
+            result[key].push(value);
+        }
+        else {
+            result[key] = value;
+        }
+    }
+
+    return result;
+}
+
+// urlform encoding serializer
+function str_serialize(result, key, value) {
+    // encode newlines as \r\n cause the html spec says so
+    value = value.replace(/(\r)?\n/g, '\r\n');
+    value = encodeURIComponent(value);
+
+    // spaces should be '+' rather than '%20'.
+    value = value.replace(/%20/g, '+');
+    return result + (result ? '&' : '') + encodeURIComponent(key) + '=' + value;
+}
+
+module.exports = serialize;
+
+
+/***/ }),
+
+/***/ "./node_modules/riot/riot.esm.js":
+/*!***************************************!*\
+  !*** ./node_modules/riot/riot.esm.js ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "__": () => (/* binding */ __),
+/* harmony export */   "component": () => (/* binding */ component),
+/* harmony export */   "install": () => (/* binding */ install),
+/* harmony export */   "mount": () => (/* binding */ mount),
+/* harmony export */   "pure": () => (/* binding */ pure),
+/* harmony export */   "register": () => (/* binding */ register),
+/* harmony export */   "uninstall": () => (/* binding */ uninstall),
+/* harmony export */   "unmount": () => (/* binding */ unmount),
+/* harmony export */   "unregister": () => (/* binding */ unregister),
+/* harmony export */   "version": () => (/* binding */ version),
+/* harmony export */   "withTypes": () => (/* binding */ withTypes)
+/* harmony export */ });
+/* Riot v6.0.1, @license MIT */
+/**
+ * Convert a string from camel case to dash-case
+ * @param   {string} string - probably a component tag name
+ * @returns {string} component name normalized
+ */
+function camelToDashCase(string) {
+  return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ * Convert a string containing dashes to camel case
+ * @param   {string} string - input string
+ * @returns {string} my-string -> myString
+ */
+
+function dashToCamelCase(string) {
+  return string.replace(/-(\w)/g, (_, c) => c.toUpperCase());
+}
+
+/**
+ * Get all the element attributes as object
+ * @param   {HTMLElement} element - DOM node we want to parse
+ * @returns {Object} all the attributes found as a key value pairs
+ */
+
+function DOMattributesToObject(element) {
+  return Array.from(element.attributes).reduce((acc, attribute) => {
+    acc[dashToCamelCase(attribute.name)] = attribute.value;
+    return acc;
+  }, {});
+}
+/**
+ * Move all the child nodes from a source tag to another
+ * @param   {HTMLElement} source - source node
+ * @param   {HTMLElement} target - target node
+ * @returns {undefined} it's a void method ¯\_(ツ)_/¯
+ */
+// Ignore this helper because it's needed only for svg tags
+
+function moveChildren(source, target) {
+  if (source.firstChild) {
+    target.appendChild(source.firstChild);
+    moveChildren(source, target);
+  }
+}
+/**
+ * Remove the child nodes from any DOM node
+ * @param   {HTMLElement} node - target node
+ * @returns {undefined}
+ */
+
+function cleanNode(node) {
+  clearChildren(node.childNodes);
+}
+/**
+ * Clear multiple children in a node
+ * @param   {HTMLElement[]} children - direct children nodes
+ * @returns {undefined}
+ */
+
+function clearChildren(children) {
+  Array.from(children).forEach(removeChild);
+}
+/**
+ * Remove a node
+ * @param {HTMLElement}node - node to remove
+ * @returns {undefined}
+ */
+
+const removeChild = node => node && node.parentNode && node.parentNode.removeChild(node);
+/**
+ * Insert before a node
+ * @param {HTMLElement} newNode - node to insert
+ * @param {HTMLElement} refNode - ref child
+ * @returns {undefined}
+ */
+
+const insertBefore = (newNode, refNode) => refNode && refNode.parentNode && refNode.parentNode.insertBefore(newNode, refNode);
+/**
+ * Replace a node
+ * @param {HTMLElement} newNode - new node to add to the DOM
+ * @param {HTMLElement} replaced - node to replace
+ * @returns {undefined}
+ */
+
+const replaceChild = (newNode, replaced) => replaced && replaced.parentNode && replaced.parentNode.replaceChild(newNode, replaced);
+
+// Riot.js constants that can be used accross more modules
+const COMPONENTS_IMPLEMENTATION_MAP$1 = new Map(),
+      DOM_COMPONENT_INSTANCE_PROPERTY$1 = Symbol('riot-component'),
+      PLUGINS_SET$1 = new Set(),
+      IS_DIRECTIVE = 'is',
+      VALUE_ATTRIBUTE = 'value',
+      MOUNT_METHOD_KEY = 'mount',
+      UPDATE_METHOD_KEY = 'update',
+      UNMOUNT_METHOD_KEY = 'unmount',
+      SHOULD_UPDATE_KEY = 'shouldUpdate',
+      ON_BEFORE_MOUNT_KEY = 'onBeforeMount',
+      ON_MOUNTED_KEY = 'onMounted',
+      ON_BEFORE_UPDATE_KEY = 'onBeforeUpdate',
+      ON_UPDATED_KEY = 'onUpdated',
+      ON_BEFORE_UNMOUNT_KEY = 'onBeforeUnmount',
+      ON_UNMOUNTED_KEY = 'onUnmounted',
+      PROPS_KEY = 'props',
+      STATE_KEY = 'state',
+      SLOTS_KEY = 'slots',
+      ROOT_KEY = 'root',
+      IS_PURE_SYMBOL = Symbol('pure'),
+      IS_COMPONENT_UPDATING = Symbol('is_updating'),
+      PARENT_KEY_SYMBOL = Symbol('parent'),
+      ATTRIBUTES_KEY_SYMBOL = Symbol('attributes'),
+      TEMPLATE_KEY_SYMBOL = Symbol('template');
+
+var globals = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  COMPONENTS_IMPLEMENTATION_MAP: COMPONENTS_IMPLEMENTATION_MAP$1,
+  DOM_COMPONENT_INSTANCE_PROPERTY: DOM_COMPONENT_INSTANCE_PROPERTY$1,
+  PLUGINS_SET: PLUGINS_SET$1,
+  IS_DIRECTIVE: IS_DIRECTIVE,
+  VALUE_ATTRIBUTE: VALUE_ATTRIBUTE,
+  MOUNT_METHOD_KEY: MOUNT_METHOD_KEY,
+  UPDATE_METHOD_KEY: UPDATE_METHOD_KEY,
+  UNMOUNT_METHOD_KEY: UNMOUNT_METHOD_KEY,
+  SHOULD_UPDATE_KEY: SHOULD_UPDATE_KEY,
+  ON_BEFORE_MOUNT_KEY: ON_BEFORE_MOUNT_KEY,
+  ON_MOUNTED_KEY: ON_MOUNTED_KEY,
+  ON_BEFORE_UPDATE_KEY: ON_BEFORE_UPDATE_KEY,
+  ON_UPDATED_KEY: ON_UPDATED_KEY,
+  ON_BEFORE_UNMOUNT_KEY: ON_BEFORE_UNMOUNT_KEY,
+  ON_UNMOUNTED_KEY: ON_UNMOUNTED_KEY,
+  PROPS_KEY: PROPS_KEY,
+  STATE_KEY: STATE_KEY,
+  SLOTS_KEY: SLOTS_KEY,
+  ROOT_KEY: ROOT_KEY,
+  IS_PURE_SYMBOL: IS_PURE_SYMBOL,
+  IS_COMPONENT_UPDATING: IS_COMPONENT_UPDATING,
+  PARENT_KEY_SYMBOL: PARENT_KEY_SYMBOL,
+  ATTRIBUTES_KEY_SYMBOL: ATTRIBUTES_KEY_SYMBOL,
+  TEMPLATE_KEY_SYMBOL: TEMPLATE_KEY_SYMBOL
+});
+
+const EACH = 0;
+const IF = 1;
+const SIMPLE = 2;
+const TAG = 3;
+const SLOT = 4;
+var bindingTypes = {
+  EACH,
+  IF,
+  SIMPLE,
+  TAG,
+  SLOT
+};
+
+const ATTRIBUTE = 0;
+const EVENT = 1;
+const TEXT = 2;
+const VALUE = 3;
+var expressionTypes = {
+  ATTRIBUTE,
+  EVENT,
+  TEXT,
+  VALUE
+};
+
+const HEAD_SYMBOL = Symbol('head');
+const TAIL_SYMBOL = Symbol('tail');
+
+/**
+ * Create the <template> fragments text nodes
+ * @return {Object} {{head: Text, tail: Text}}
+ */
+
+function createHeadTailPlaceholders() {
+  const head = document.createTextNode('');
+  const tail = document.createTextNode('');
+  head[HEAD_SYMBOL] = true;
+  tail[TAIL_SYMBOL] = true;
+  return {
+    head,
+    tail
+  };
+}
+
+/**
+ * Create the template meta object in case of <template> fragments
+ * @param   {TemplateChunk} componentTemplate - template chunk object
+ * @returns {Object} the meta property that will be passed to the mount function of the TemplateChunk
+ */
+
+function createTemplateMeta(componentTemplate) {
+  const fragment = componentTemplate.dom.cloneNode(true);
+  const {
+    head,
+    tail
+  } = createHeadTailPlaceholders();
+  return {
+    avoidDOMInjection: true,
+    fragment,
+    head,
+    tail,
+    children: [head, ...Array.from(fragment.childNodes), tail]
+  };
+}
+
+/**
+ * Helper function to set an immutable property
+ * @param   {Object} source - object where the new property will be set
+ * @param   {string} key - object key where the new property will be stored
+ * @param   {*} value - value of the new property
+ * @param   {Object} options - set the propery overriding the default options
+ * @returns {Object} - the original object modified
+ */
+function defineProperty(source, key, value, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  /* eslint-disable fp/no-mutating-methods */
+  Object.defineProperty(source, key, Object.assign({
+    value,
+    enumerable: false,
+    writable: false,
+    configurable: true
+  }, options));
+  /* eslint-enable fp/no-mutating-methods */
+
+  return source;
+}
+/**
+ * Define multiple properties on a target object
+ * @param   {Object} source - object where the new properties will be set
+ * @param   {Object} properties - object containing as key pair the key + value properties
+ * @param   {Object} options - set the propery overriding the default options
+ * @returns {Object} the original object modified
+ */
+
+function defineProperties(source, properties, options) {
+  Object.entries(properties).forEach(_ref => {
+    let [key, value] = _ref;
+    defineProperty(source, key, value, options);
+  });
+  return source;
+}
+/**
+ * Define default properties if they don't exist on the source object
+ * @param   {Object} source - object that will receive the default properties
+ * @param   {Object} defaults - object containing additional optional keys
+ * @returns {Object} the original object received enhanced
+ */
+
+function defineDefaults(source, defaults) {
+  Object.entries(defaults).forEach(_ref2 => {
+    let [key, value] = _ref2;
+    if (!source[key]) source[key] = value;
+  });
+  return source;
+}
+
+/**
+ * Get the current <template> fragment children located in between the head and tail comments
+ * @param {Comment} head - head comment node
+ * @param {Comment} tail - tail comment node
+ * @return {Array[]} children list of the nodes found in this template fragment
+ */
+
+function getFragmentChildren(_ref) {
+  let {
+    head,
+    tail
+  } = _ref;
+  const nodes = walkNodes([head], head.nextSibling, n => n === tail, false);
+  nodes.push(tail);
+  return nodes;
+}
+/**
+ * Recursive function to walk all the <template> children nodes
+ * @param {Array[]} children - children nodes collection
+ * @param {ChildNode} node - current node
+ * @param {Function} check - exit function check
+ * @param {boolean} isFilterActive - filter flag to skip nodes managed by other bindings
+ * @returns {Array[]} children list of the nodes found in this template fragment
+ */
+
+function walkNodes(children, node, check, isFilterActive) {
+  const {
+    nextSibling
+  } = node; // filter tail and head nodes together with all the nodes in between
+  // this is needed only to fix a really ugly edge case https://github.com/riot/riot/issues/2892
+
+  if (!isFilterActive && !node[HEAD_SYMBOL] && !node[TAIL_SYMBOL]) {
+    children.push(node);
+  }
+
+  if (!nextSibling || check(node)) return children;
+  return walkNodes(children, nextSibling, check, // activate the filters to skip nodes between <template> fragments that will be managed by other bindings
+  isFilterActive && !node[TAIL_SYMBOL] || nextSibling[HEAD_SYMBOL]);
+}
+
+/**
+ * Quick type checking
+ * @param   {*} element - anything
+ * @param   {string} type - type definition
+ * @returns {boolean} true if the type corresponds
+ */
+function checkType(element, type) {
+  return typeof element === type;
+}
+/**
+ * Check if an element is part of an svg
+ * @param   {HTMLElement}  el - element to check
+ * @returns {boolean} true if we are in an svg context
+ */
+
+function isSvg(el) {
+  const owner = el.ownerSVGElement;
+  return !!owner || owner === null;
+}
+/**
+ * Check if an element is a template tag
+ * @param   {HTMLElement}  el - element to check
+ * @returns {boolean} true if it's a <template>
+ */
+
+function isTemplate(el) {
+  return el.tagName.toLowerCase() === 'template';
+}
+/**
+ * Check that will be passed if its argument is a function
+ * @param   {*} value - value to check
+ * @returns {boolean} - true if the value is a function
+ */
+
+function isFunction(value) {
+  return checkType(value, 'function');
+}
+/**
+ * Check if a value is a Boolean
+ * @param   {*}  value - anything
+ * @returns {boolean} true only for the value is a boolean
+ */
+
+function isBoolean(value) {
+  return checkType(value, 'boolean');
+}
+/**
+ * Check if a value is an Object
+ * @param   {*}  value - anything
+ * @returns {boolean} true only for the value is an object
+ */
+
+function isObject(value) {
+  return !isNil(value) && value.constructor === Object;
+}
+/**
+ * Check if a value is null or undefined
+ * @param   {*}  value - anything
+ * @returns {boolean} true only for the 'undefined' and 'null' types
+ */
+
+function isNil(value) {
+  return value === null || value === undefined;
+}
+
+/**
+ * ISC License
+ *
+ * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+ * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ */
+// fork of https://github.com/WebReflection/udomdiff version 1.1.0
+// due to https://github.com/WebReflection/udomdiff/pull/2
+
+/* eslint-disable */
+
+/**
+ * @param {Node[]} a The list of current/live children
+ * @param {Node[]} b The list of future children
+ * @param {(entry: Node, action: number) => Node} get
+ * The callback invoked per each entry related DOM operation.
+ * @param {Node} [before] The optional node used as anchor to insert before.
+ * @returns {Node[]} The same list of future children.
+ */
+
+var udomdiff = ((a, b, get, before) => {
+  const bLength = b.length;
+  let aEnd = a.length;
+  let bEnd = bLength;
+  let aStart = 0;
+  let bStart = 0;
+  let map = null;
+
+  while (aStart < aEnd || bStart < bEnd) {
+    // append head, tail, or nodes in between: fast path
+    if (aEnd === aStart) {
+      // we could be in a situation where the rest of nodes that
+      // need to be added are not at the end, and in such case
+      // the node to `insertBefore`, if the index is more than 0
+      // must be retrieved, otherwise it's gonna be the first item.
+      const node = bEnd < bLength ? bStart ? get(b[bStart - 1], -0).nextSibling : get(b[bEnd - bStart], 0) : before;
+
+      while (bStart < bEnd) insertBefore(get(b[bStart++], 1), node);
+    } // remove head or tail: fast path
+    else if (bEnd === bStart) {
+        while (aStart < aEnd) {
+          // remove the node only if it's unknown or not live
+          if (!map || !map.has(a[aStart])) removeChild(get(a[aStart], -1));
+          aStart++;
+        }
+      } // same node: fast path
+      else if (a[aStart] === b[bStart]) {
+          aStart++;
+          bStart++;
+        } // same tail: fast path
+        else if (a[aEnd - 1] === b[bEnd - 1]) {
+            aEnd--;
+            bEnd--;
+          } // The once here single last swap "fast path" has been removed in v1.1.0
+          // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+          // reverse swap: also fast path
+          else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+              // this is a "shrink" operation that could happen in these cases:
+              // [1, 2, 3, 4, 5]
+              // [1, 4, 3, 2, 5]
+              // or asymmetric too
+              // [1, 2, 3, 4, 5]
+              // [1, 2, 3, 5, 6, 4]
+              const node = get(a[--aEnd], -1).nextSibling;
+              insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling);
+              insertBefore(get(b[--bEnd], 1), node); // mark the future index as identical (yeah, it's dirty, but cheap 👍)
+              // The main reason to do this, is that when a[aEnd] will be reached,
+              // the loop will likely be on the fast path, as identical to b[bEnd].
+              // In the best case scenario, the next loop will skip the tail,
+              // but in the worst one, this node will be considered as already
+              // processed, bailing out pretty quickly from the map index check
+
+              a[aEnd] = b[bEnd];
+            } // map based fallback, "slow" path
+            else {
+                // the map requires an O(bEnd - bStart) operation once
+                // to store all future nodes indexes for later purposes.
+                // In the worst case scenario, this is a full O(N) cost,
+                // and such scenario happens at least when all nodes are different,
+                // but also if both first and last items of the lists are different
+                if (!map) {
+                  map = new Map();
+                  let i = bStart;
+
+                  while (i < bEnd) map.set(b[i], i++);
+                } // if it's a future node, hence it needs some handling
+
+
+                if (map.has(a[aStart])) {
+                  // grab the index of such node, 'cause it might have been processed
+                  const index = map.get(a[aStart]); // if it's not already processed, look on demand for the next LCS
+
+                  if (bStart < index && index < bEnd) {
+                    let i = aStart; // counts the amount of nodes that are the same in the future
+
+                    let sequence = 1;
+
+                    while (++i < aEnd && i < bEnd && map.get(a[i]) === index + sequence) sequence++; // effort decision here: if the sequence is longer than replaces
+                    // needed to reach such sequence, which would brings again this loop
+                    // to the fast path, prepend the difference before a sequence,
+                    // and move only the future list index forward, so that aStart
+                    // and bStart will be aligned again, hence on the fast path.
+                    // An example considering aStart and bStart are both 0:
+                    // a: [1, 2, 3, 4]
+                    // b: [7, 1, 2, 3, 6]
+                    // this would place 7 before 1 and, from that time on, 1, 2, and 3
+                    // will be processed at zero cost
+
+
+                    if (sequence > index - bStart) {
+                      const node = get(a[aStart], 0);
+
+                      while (bStart < index) insertBefore(get(b[bStart++], 1), node);
+                    } // if the effort wasn't good enough, fallback to a replace,
+                    // moving both source and target indexes forward, hoping that some
+                    // similar node will be found later on, to go back to the fast path
+                    else {
+                        replaceChild(get(b[bStart++], 1), get(a[aStart++], -1));
+                      }
+                  } // otherwise move the source forward, 'cause there's nothing to do
+                  else aStart++;
+                } // this node has no meaning in the future list, so it's more than safe
+                // to remove it, and check the next live node out instead, meaning
+                // that only the live list index should be forwarded
+                else removeChild(get(a[aStart++], -1));
+              }
+  }
+
+  return b;
+});
+
+const UNMOUNT_SCOPE = Symbol('unmount');
+const EachBinding = {
+  // dynamic binding properties
+  // childrenMap: null,
+  // node: null,
+  // root: null,
+  // condition: null,
+  // evaluate: null,
+  // template: null,
+  // isTemplateTag: false,
+  nodes: [],
+
+  // getKey: null,
+  // indexName: null,
+  // itemName: null,
+  // afterPlaceholder: null,
+  // placeholder: null,
+  // API methods
+  mount(scope, parentScope) {
+    return this.update(scope, parentScope);
+  },
+
+  update(scope, parentScope) {
+    const {
+      placeholder,
+      nodes,
+      childrenMap
+    } = this;
+    const collection = scope === UNMOUNT_SCOPE ? null : this.evaluate(scope);
+    const items = collection ? Array.from(collection) : []; // prepare the diffing
+
+    const {
+      newChildrenMap,
+      batches,
+      futureNodes
+    } = createPatch(items, scope, parentScope, this); // patch the DOM only if there are new nodes
+
+    udomdiff(nodes, futureNodes, patch(Array.from(childrenMap.values()), parentScope), placeholder); // trigger the mounts and the updates
+
+    batches.forEach(fn => fn()); // update the children map
+
+    this.childrenMap = newChildrenMap;
+    this.nodes = futureNodes; // make sure that the loop edge nodes are marked
+
+    markEdgeNodes(this.nodes);
+    return this;
+  },
+
+  unmount(scope, parentScope) {
+    this.update(UNMOUNT_SCOPE, parentScope);
+    return this;
+  }
+
+};
+/**
+ * Patch the DOM while diffing
+ * @param   {any[]} redundant - list of all the children (template, nodes, context) added via each
+ * @param   {*} parentScope - scope of the parent template
+ * @returns {Function} patch function used by domdiff
+ */
+
+function patch(redundant, parentScope) {
+  return (item, info) => {
+    if (info < 0) {
+      // get the last element added to the childrenMap saved previously
+      const element = redundant[redundant.length - 1];
+
+      if (element) {
+        // get the nodes and the template in stored in the last child of the childrenMap
+        const {
+          template,
+          nodes,
+          context
+        } = element; // remove the last node (notice <template> tags might have more children nodes)
+
+        nodes.pop(); // notice that we pass null as last argument because
+        // the root node and its children will be removed by domdiff
+
+        if (!nodes.length) {
+          // we have cleared all the children nodes and we can unmount this template
+          redundant.pop();
+          template.unmount(context, parentScope, null);
+        }
+      }
+    }
+
+    return item;
+  };
+}
+/**
+ * Check whether a template must be filtered from a loop
+ * @param   {Function} condition - filter function
+ * @param   {Object} context - argument passed to the filter function
+ * @returns {boolean} true if this item should be skipped
+ */
+
+
+function mustFilterItem(condition, context) {
+  return condition ? !condition(context) : false;
+}
+/**
+ * Extend the scope of the looped template
+ * @param   {Object} scope - current template scope
+ * @param   {Object} options - options
+ * @param   {string} options.itemName - key to identify the looped item in the new context
+ * @param   {string} options.indexName - key to identify the index of the looped item
+ * @param   {number} options.index - current index
+ * @param   {*} options.item - collection item looped
+ * @returns {Object} enhanced scope object
+ */
+
+
+function extendScope(scope, _ref) {
+  let {
+    itemName,
+    indexName,
+    index,
+    item
+  } = _ref;
+  defineProperty(scope, itemName, item);
+  if (indexName) defineProperty(scope, indexName, index);
+  return scope;
+}
+/**
+ * Mark the first and last nodes in order to ignore them in case we need to retrieve the <template> fragment nodes
+ * @param {Array[]} nodes - each binding nodes list
+ * @returns {undefined} void function
+ */
+
+
+function markEdgeNodes(nodes) {
+  const first = nodes[0];
+  const last = nodes[nodes.length - 1];
+  if (first) first[HEAD_SYMBOL] = true;
+  if (last) last[TAIL_SYMBOL] = true;
+}
+/**
+ * Loop the current template items
+ * @param   {Array} items - expression collection value
+ * @param   {*} scope - template scope
+ * @param   {*} parentScope - scope of the parent template
+ * @param   {EachBinding} binding - each binding object instance
+ * @returns {Object} data
+ * @returns {Map} data.newChildrenMap - a Map containing the new children template structure
+ * @returns {Array} data.batches - array containing the template lifecycle functions to trigger
+ * @returns {Array} data.futureNodes - array containing the nodes we need to diff
+ */
+
+
+function createPatch(items, scope, parentScope, binding) {
+  const {
+    condition,
+    template,
+    childrenMap,
+    itemName,
+    getKey,
+    indexName,
+    root,
+    isTemplateTag
+  } = binding;
+  const newChildrenMap = new Map();
+  const batches = [];
+  const futureNodes = [];
+  items.forEach((item, index) => {
+    const context = extendScope(Object.create(scope), {
+      itemName,
+      indexName,
+      index,
+      item
+    });
+    const key = getKey ? getKey(context) : index;
+    const oldItem = childrenMap.get(key);
+    const nodes = [];
+
+    if (mustFilterItem(condition, context)) {
+      return;
+    }
+
+    const mustMount = !oldItem;
+    const componentTemplate = oldItem ? oldItem.template : template.clone();
+    const el = componentTemplate.el || root.cloneNode();
+    const meta = isTemplateTag && mustMount ? createTemplateMeta(componentTemplate) : componentTemplate.meta;
+
+    if (mustMount) {
+      batches.push(() => componentTemplate.mount(el, context, parentScope, meta));
+    } else {
+      batches.push(() => componentTemplate.update(context, parentScope));
+    } // create the collection of nodes to update or to add
+    // in case of template tags we need to add all its children nodes
+
+
+    if (isTemplateTag) {
+      nodes.push(...(mustMount ? meta.children : getFragmentChildren(meta)));
+    } else {
+      nodes.push(el);
+    } // delete the old item from the children map
+
+
+    childrenMap.delete(key);
+    futureNodes.push(...nodes); // update the children map
+
+    newChildrenMap.set(key, {
+      nodes,
+      template: componentTemplate,
+      context,
+      index
+    });
+  });
+  return {
+    newChildrenMap,
+    batches,
+    futureNodes
+  };
+}
+
+function create$6(node, _ref2) {
+  let {
+    evaluate,
+    condition,
+    itemName,
+    indexName,
+    getKey,
+    template
+  } = _ref2;
+  const placeholder = document.createTextNode('');
+  const root = node.cloneNode();
+  insertBefore(placeholder, node);
+  removeChild(node);
+  return Object.assign({}, EachBinding, {
+    childrenMap: new Map(),
+    node,
+    root,
+    condition,
+    evaluate,
+    isTemplateTag: isTemplate(root),
+    template: template.createDOM(node),
+    getKey,
+    indexName,
+    itemName,
+    placeholder
+  });
+}
+
+/**
+ * Binding responsible for the `if` directive
+ */
+
+const IfBinding = {
+  // dynamic binding properties
+  // node: null,
+  // evaluate: null,
+  // isTemplateTag: false,
+  // placeholder: null,
+  // template: null,
+  // API methods
+  mount(scope, parentScope) {
+    return this.update(scope, parentScope);
+  },
+
+  update(scope, parentScope) {
+    const value = !!this.evaluate(scope);
+    const mustMount = !this.value && value;
+    const mustUnmount = this.value && !value;
+
+    const mount = () => {
+      const pristine = this.node.cloneNode();
+      insertBefore(pristine, this.placeholder);
+      this.template = this.template.clone();
+      this.template.mount(pristine, scope, parentScope);
+    };
+
+    switch (true) {
+      case mustMount:
+        mount();
+        break;
+
+      case mustUnmount:
+        this.unmount(scope);
+        break;
+
+      default:
+        if (value) this.template.update(scope, parentScope);
+    }
+
+    this.value = value;
+    return this;
+  },
+
+  unmount(scope, parentScope) {
+    this.template.unmount(scope, parentScope, true);
+    return this;
+  }
+
+};
+function create$5(node, _ref) {
+  let {
+    evaluate,
+    template
+  } = _ref;
+  const placeholder = document.createTextNode('');
+  insertBefore(placeholder, node);
+  removeChild(node);
+  return Object.assign({}, IfBinding, {
+    node,
+    evaluate,
+    placeholder,
+    template: template.createDOM(node)
+  });
+}
+
+/**
+ * Throw an error with a descriptive message
+ * @param   { string } message - error message
+ * @returns { undefined } hoppla.. at this point the program should stop working
+ */
+
+function panic(message) {
+  throw new Error(message);
+}
+/**
+ * Returns the memoized (cached) function.
+ * // borrowed from https://www.30secondsofcode.org/js/s/memoize
+ * @param {Function} fn - function to memoize
+ * @returns {Function} memoize function
+ */
+
+function memoize(fn) {
+  const cache = new Map();
+
+  const cached = val => {
+    return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val);
+  };
+
+  cached.cache = cache;
+  return cached;
+}
+/**
+ * Evaluate a list of attribute expressions
+ * @param   {Array} attributes - attribute expressions generated by the riot compiler
+ * @returns {Object} key value pairs with the result of the computation
+ */
+
+function evaluateAttributeExpressions(attributes) {
+  return attributes.reduce((acc, attribute) => {
+    const {
+      value,
+      type
+    } = attribute;
+
+    switch (true) {
+      // spread attribute
+      case !attribute.name && type === ATTRIBUTE:
+        return Object.assign({}, acc, value);
+      // value attribute
+
+      case type === VALUE:
+        acc.value = attribute.value;
+        break;
+      // normal attributes
+
+      default:
+        acc[dashToCamelCase(attribute.name)] = attribute.value;
+    }
+
+    return acc;
+  }, {});
+}
+
+const ElementProto = typeof Element === 'undefined' ? {} : Element.prototype;
+const isNativeHtmlProperty = memoize(name => ElementProto.hasOwnProperty(name)); // eslint-disable-line
+
+/**
+ * Add all the attributes provided
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} attributes - object containing the attributes names and values
+ * @returns {undefined} sorry it's a void function :(
+ */
+
+function setAllAttributes(node, attributes) {
+  Object.entries(attributes).forEach(_ref => {
+    let [name, value] = _ref;
+    return attributeExpression(node, {
+      name
+    }, value);
+  });
+}
+/**
+ * Remove all the attributes provided
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} newAttributes - object containing all the new attribute names
+ * @param   {Object} oldAttributes - object containing all the old attribute names
+ * @returns {undefined} sorry it's a void function :(
+ */
+
+
+function removeAllAttributes(node, newAttributes, oldAttributes) {
+  const newKeys = newAttributes ? Object.keys(newAttributes) : [];
+  Object.keys(oldAttributes).filter(name => !newKeys.includes(name)).forEach(attribute => node.removeAttribute(attribute));
+}
+/**
+ * Check whether the attribute value can be rendered
+ * @param {*} value - expression value
+ * @returns {boolean} true if we can render this attribute value
+ */
+
+
+function canRenderAttribute(value) {
+  return value === true || ['string', 'number'].includes(typeof value);
+}
+/**
+ * Check whether the attribute should be removed
+ * @param {*} value - expression value
+ * @returns {boolean} boolean - true if the attribute can be removed}
+ */
+
+
+function shouldRemoveAttribute(value) {
+  return !value && value !== 0;
+}
+/**
+ * This methods handles the DOM attributes updates
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} expression - expression object
+ * @param   {string} expression.name - attribute name
+ * @param   {*} value - new expression value
+ * @param   {*} oldValue - the old expression cached value
+ * @returns {undefined}
+ */
+
+
+function attributeExpression(node, _ref2, value, oldValue) {
+  let {
+    name
+  } = _ref2;
+
+  // is it a spread operator? {...attributes}
+  if (!name) {
+    if (oldValue) {
+      // remove all the old attributes
+      removeAllAttributes(node, value, oldValue);
+    } // is the value still truthy?
+
+
+    if (value) {
+      setAllAttributes(node, value);
+    }
+
+    return;
+  } // handle boolean attributes
+
+
+  if (!isNativeHtmlProperty(name) && (isBoolean(value) || isObject(value) || isFunction(value))) {
+    node[name] = value;
+  }
+
+  if (shouldRemoveAttribute(value)) {
+    node.removeAttribute(name);
+  } else if (canRenderAttribute(value)) {
+    node.setAttribute(name, normalizeValue(name, value));
+  }
+}
+/**
+ * Get the value as string
+ * @param   {string} name - attribute name
+ * @param   {*} value - user input value
+ * @returns {string} input value as string
+ */
+
+function normalizeValue(name, value) {
+  // be sure that expressions like selected={ true } will be always rendered as selected='selected'
+  return value === true ? name : value;
+}
+
+const RE_EVENTS_PREFIX = /^on/;
+
+const getCallbackAndOptions = value => Array.isArray(value) ? value : [value, false]; // see also https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
+
+
+const EventListener = {
+  handleEvent(event) {
+    this[event.type](event);
+  }
+
+};
+const ListenersWeakMap = new WeakMap();
+
+const createListener = node => {
+  const listener = Object.create(EventListener);
+  ListenersWeakMap.set(node, listener);
+  return listener;
+};
+/**
+ * Set a new event listener
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} expression - expression object
+ * @param   {string} expression.name - event name
+ * @param   {*} value - new expression value
+ * @returns {value} the callback just received
+ */
+
+
+function eventExpression(node, _ref, value) {
+  let {
+    name
+  } = _ref;
+  const normalizedEventName = name.replace(RE_EVENTS_PREFIX, '');
+  const eventListener = ListenersWeakMap.get(node) || createListener(node);
+  const [callback, options] = getCallbackAndOptions(value);
+  const handler = eventListener[normalizedEventName];
+  const mustRemoveEvent = handler && !callback;
+  const mustAddEvent = callback && !handler;
+
+  if (mustRemoveEvent) {
+    node.removeEventListener(normalizedEventName, eventListener);
+  }
+
+  if (mustAddEvent) {
+    node.addEventListener(normalizedEventName, eventListener, options);
+  }
+
+  eventListener[normalizedEventName] = callback;
+}
+
+/**
+ * Normalize the user value in order to render a empty string in case of falsy values
+ * @param   {*} value - user input value
+ * @returns {string} hopefully a string
+ */
+
+function normalizeStringValue(value) {
+  return isNil(value) ? '' : value;
+}
+
+/**
+ * Get the the target text node to update or create one from of a comment node
+ * @param   {HTMLElement} node - any html element containing childNodes
+ * @param   {number} childNodeIndex - index of the text node in the childNodes list
+ * @returns {Text} the text node to update
+ */
+
+const getTextNode = (node, childNodeIndex) => {
+  const target = node.childNodes[childNodeIndex];
+
+  if (target.nodeType === Node.COMMENT_NODE) {
+    const textNode = document.createTextNode('');
+    node.replaceChild(textNode, target);
+    return textNode;
+  }
+
+  return target;
+};
+/**
+ * This methods handles a simple text expression update
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} data - expression object
+ * @param   {*} value - new expression value
+ * @returns {undefined}
+ */
+
+function textExpression(node, data, value) {
+  node.data = normalizeStringValue(value);
+}
+
+/**
+ * This methods handles the input fileds value updates
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} expression - expression object
+ * @param   {*} value - new expression value
+ * @returns {undefined}
+ */
+
+function valueExpression(node, expression, value) {
+  node.value = normalizeStringValue(value);
+}
+
+var expressions = {
+  [ATTRIBUTE]: attributeExpression,
+  [EVENT]: eventExpression,
+  [TEXT]: textExpression,
+  [VALUE]: valueExpression
+};
+
+const Expression = {
+  // Static props
+  // node: null,
+  // value: null,
+  // API methods
+
+  /**
+   * Mount the expression evaluating its initial value
+   * @param   {*} scope - argument passed to the expression to evaluate its current values
+   * @returns {Expression} self
+   */
+  mount(scope) {
+    // hopefully a pure function
+    this.value = this.evaluate(scope); // IO() DOM updates
+
+    apply(this, this.value);
+    return this;
+  },
+
+  /**
+   * Update the expression if its value changed
+   * @param   {*} scope - argument passed to the expression to evaluate its current values
+   * @returns {Expression} self
+   */
+  update(scope) {
+    // pure function
+    const value = this.evaluate(scope);
+
+    if (this.value !== value) {
+      // IO() DOM updates
+      apply(this, value);
+      this.value = value;
+    }
+
+    return this;
+  },
+
+  /**
+   * Expression teardown method
+   * @returns {Expression} self
+   */
+  unmount() {
+    // unmount only the event handling expressions
+    if (this.type === EVENT) apply(this, null);
+    return this;
+  }
+
+};
+/**
+ * IO() function to handle the DOM updates
+ * @param {Expression} expression - expression object
+ * @param {*} value - current expression value
+ * @returns {undefined}
+ */
+
+function apply(expression, value) {
+  return expressions[expression.type](expression.node, expression, value, expression.value);
+}
+
+function create$4(node, data) {
+  return Object.assign({}, Expression, data, {
+    node: data.type === TEXT ? getTextNode(node, data.childNodeIndex) : node
+  });
+}
+
+/**
+ * Create a flat object having as keys a list of methods that if dispatched will propagate
+ * on the whole collection
+ * @param   {Array} collection - collection to iterate
+ * @param   {Array<string>} methods - methods to execute on each item of the collection
+ * @param   {*} context - context returned by the new methods created
+ * @returns {Object} a new object to simplify the the nested methods dispatching
+ */
+function flattenCollectionMethods(collection, methods, context) {
+  return methods.reduce((acc, method) => {
+    return Object.assign({}, acc, {
+      [method]: scope => {
+        return collection.map(item => item[method](scope)) && context;
+      }
+    });
+  }, {});
+}
+
+function create$3(node, _ref) {
+  let {
+    expressions
+  } = _ref;
+  return Object.assign({}, flattenCollectionMethods(expressions.map(expression => create$4(node, expression)), ['mount', 'update', 'unmount']));
+}
+
+function extendParentScope(attributes, scope, parentScope) {
+  if (!attributes || !attributes.length) return parentScope;
+  const expressions = attributes.map(attr => Object.assign({}, attr, {
+    value: attr.evaluate(scope)
+  }));
+  return Object.assign(Object.create(parentScope || null), evaluateAttributeExpressions(expressions));
+} // this function is only meant to fix an edge case
+// https://github.com/riot/riot/issues/2842
+
+
+const getRealParent = (scope, parentScope) => scope[PARENT_KEY_SYMBOL] || parentScope;
+
+const SlotBinding = {
+  // dynamic binding properties
+  // node: null,
+  // name: null,
+  attributes: [],
+
+  // template: null,
+  getTemplateScope(scope, parentScope) {
+    return extendParentScope(this.attributes, scope, parentScope);
+  },
+
+  // API methods
+  mount(scope, parentScope) {
+    const templateData = scope.slots ? scope.slots.find(_ref => {
+      let {
+        id
+      } = _ref;
+      return id === this.name;
+    }) : false;
+    const {
+      parentNode
+    } = this.node;
+    const realParent = getRealParent(scope, parentScope);
+    this.template = templateData && create(templateData.html, templateData.bindings).createDOM(parentNode);
+
+    if (this.template) {
+      cleanNode(this.node);
+      this.template.mount(this.node, this.getTemplateScope(scope, realParent), realParent);
+      this.template.children = Array.from(this.node.childNodes);
+    }
+
+    moveSlotInnerContent(this.node);
+    removeChild(this.node);
+    return this;
+  },
+
+  update(scope, parentScope) {
+    if (this.template) {
+      const realParent = getRealParent(scope, parentScope);
+      this.template.update(this.getTemplateScope(scope, realParent), realParent);
+    }
+
+    return this;
+  },
+
+  unmount(scope, parentScope, mustRemoveRoot) {
+    if (this.template) {
+      this.template.unmount(this.getTemplateScope(scope, parentScope), null, mustRemoveRoot);
+    }
+
+    return this;
+  }
+
+};
+/**
+ * Move the inner content of the slots outside of them
+ * @param   {HTMLElement} slot - slot node
+ * @returns {undefined} it's a void method ¯\_(ツ)_/¯
+ */
+
+function moveSlotInnerContent(slot) {
+  const child = slot && slot.firstChild;
+  if (!child) return;
+  insertBefore(child, slot);
+  moveSlotInnerContent(slot);
+}
+/**
+ * Create a single slot binding
+ * @param   {HTMLElement} node - slot node
+ * @param   {string} name - slot id
+ * @param   {AttributeExpressionData[]} attributes - slot attributes
+ * @returns {Object} Slot binding object
+ */
+
+
+function createSlot(node, _ref2) {
+  let {
+    name,
+    attributes
+  } = _ref2;
+  return Object.assign({}, SlotBinding, {
+    attributes,
+    node,
+    name
+  });
+}
+
+/**
+ * Create a new tag object if it was registered before, otherwise fallback to the simple
+ * template chunk
+ * @param   {Function} component - component factory function
+ * @param   {Array<Object>} slots - array containing the slots markup
+ * @param   {Array} attributes - dynamic attributes that will be received by the tag element
+ * @returns {TagImplementation|TemplateChunk} a tag implementation or a template chunk as fallback
+ */
+
+function getTag(component, slots, attributes) {
+  if (slots === void 0) {
+    slots = [];
+  }
+
+  if (attributes === void 0) {
+    attributes = [];
+  }
+
+  // if this tag was registered before we will return its implementation
+  if (component) {
+    return component({
+      slots,
+      attributes
+    });
+  } // otherwise we return a template chunk
+
+
+  return create(slotsToMarkup(slots), [...slotBindings(slots), {
+    // the attributes should be registered as binding
+    // if we fallback to a normal template chunk
+    expressions: attributes.map(attr => {
+      return Object.assign({
+        type: ATTRIBUTE
+      }, attr);
+    })
+  }]);
+}
+/**
+ * Merge all the slots bindings into a single array
+ * @param   {Array<Object>} slots - slots collection
+ * @returns {Array<Bindings>} flatten bindings array
+ */
+
+
+function slotBindings(slots) {
+  return slots.reduce((acc, _ref) => {
+    let {
+      bindings
+    } = _ref;
+    return acc.concat(bindings);
+  }, []);
+}
+/**
+ * Merge all the slots together in a single markup string
+ * @param   {Array<Object>} slots - slots collection
+ * @returns {string} markup of all the slots in a single string
+ */
+
+
+function slotsToMarkup(slots) {
+  return slots.reduce((acc, slot) => {
+    return acc + slot.html;
+  }, '');
+}
+
+const TagBinding = {
+  // dynamic binding properties
+  // node: null,
+  // evaluate: null,
+  // name: null,
+  // slots: null,
+  // tag: null,
+  // attributes: null,
+  // getComponent: null,
+  mount(scope) {
+    return this.update(scope);
+  },
+
+  update(scope, parentScope) {
+    const name = this.evaluate(scope); // simple update
+
+    if (name && name === this.name) {
+      this.tag.update(scope);
+    } else {
+      // unmount the old tag if it exists
+      this.unmount(scope, parentScope, true); // mount the new tag
+
+      this.name = name;
+      this.tag = getTag(this.getComponent(name), this.slots, this.attributes);
+      this.tag.mount(this.node, scope);
+    }
+
+    return this;
+  },
+
+  unmount(scope, parentScope, keepRootTag) {
+    if (this.tag) {
+      // keep the root tag
+      this.tag.unmount(keepRootTag);
+    }
+
+    return this;
+  }
+
+};
+function create$2(node, _ref2) {
+  let {
+    evaluate,
+    getComponent,
+    slots,
+    attributes
+  } = _ref2;
+  return Object.assign({}, TagBinding, {
+    node,
+    evaluate,
+    slots,
+    attributes,
+    getComponent
+  });
+}
+
+var bindings = {
+  [IF]: create$5,
+  [SIMPLE]: create$3,
+  [EACH]: create$6,
+  [TAG]: create$2,
+  [SLOT]: createSlot
+};
+
+/**
+ * Text expressions in a template tag will get childNodeIndex value normalized
+ * depending on the position of the <template> tag offset
+ * @param   {Expression[]} expressions - riot expressions array
+ * @param   {number} textExpressionsOffset - offset of the <template> tag
+ * @returns {Expression[]} expressions containing the text expressions normalized
+ */
+
+function fixTextExpressionsOffset(expressions, textExpressionsOffset) {
+  return expressions.map(e => e.type === TEXT ? Object.assign({}, e, {
+    childNodeIndex: e.childNodeIndex + textExpressionsOffset
+  }) : e);
+}
+/**
+ * Bind a new expression object to a DOM node
+ * @param   {HTMLElement} root - DOM node where to bind the expression
+ * @param   {TagBindingData} binding - binding data
+ * @param   {number|null} templateTagOffset - if it's defined we need to fix the text expressions childNodeIndex offset
+ * @returns {Binding} Binding object
+ */
+
+
+function create$1(root, binding, templateTagOffset) {
+  const {
+    selector,
+    type,
+    redundantAttribute,
+    expressions
+  } = binding; // find the node to apply the bindings
+
+  const node = selector ? root.querySelector(selector) : root; // remove eventually additional attributes created only to select this node
+
+  if (redundantAttribute) node.removeAttribute(redundantAttribute);
+  const bindingExpressions = expressions || []; // init the binding
+
+  return (bindings[type] || bindings[SIMPLE])(node, Object.assign({}, binding, {
+    expressions: templateTagOffset && !selector ? fixTextExpressionsOffset(bindingExpressions, templateTagOffset) : bindingExpressions
+  }));
+}
+
+function createHTMLTree(html, root) {
+  const template = isTemplate(root) ? root : document.createElement('template');
+  template.innerHTML = html;
+  return template.content;
+} // for svg nodes we need a bit more work
+
+
+function createSVGTree(html, container) {
+  // create the SVGNode
+  const svgNode = container.ownerDocument.importNode(new window.DOMParser().parseFromString(`<svg xmlns="http://www.w3.org/2000/svg">${html}</svg>`, 'application/xml').documentElement, true);
+  return svgNode;
+}
+/**
+ * Create the DOM that will be injected
+ * @param {Object} root - DOM node to find out the context where the fragment will be created
+ * @param   {string} html - DOM to create as string
+ * @returns {HTMLDocumentFragment|HTMLElement} a new html fragment
+ */
+
+
+function createDOMTree(root, html) {
+  if (isSvg(root)) return createSVGTree(html, root);
+  return createHTMLTree(html, root);
+}
+
+/**
+ * Inject the DOM tree into a target node
+ * @param   {HTMLElement} el - target element
+ * @param   {DocumentFragment|SVGElement} dom - dom tree to inject
+ * @returns {undefined}
+ */
+
+function injectDOM(el, dom) {
+  switch (true) {
+    case isSvg(el):
+      moveChildren(dom, el);
+      break;
+
+    case isTemplate(el):
+      el.parentNode.replaceChild(dom, el);
+      break;
+
+    default:
+      el.appendChild(dom);
+  }
+}
+
+/**
+ * Create the Template DOM skeleton
+ * @param   {HTMLElement} el - root node where the DOM will be injected
+ * @param   {string|HTMLElement} html - HTML markup or HTMLElement that will be injected into the root node
+ * @returns {?DocumentFragment} fragment that will be injected into the root node
+ */
+
+function createTemplateDOM(el, html) {
+  return html && (typeof html === 'string' ? createDOMTree(el, html) : html);
+}
+/**
+ * Get the offset of the <template> tag
+ * @param {HTMLElement} parentNode - template tag parent node
+ * @param {HTMLElement} el - the template tag we want to render
+ * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+ * @returns {number} offset of the <template> tag calculated from its siblings DOM nodes
+ */
+
+
+function getTemplateTagOffset(parentNode, el, meta) {
+  const siblings = Array.from(parentNode.childNodes);
+  return Math.max(siblings.indexOf(el), siblings.indexOf(meta.head) + 1, 0);
+}
+/**
+ * Template Chunk model
+ * @type {Object}
+ */
+
+
+const TemplateChunk = Object.freeze({
+  // Static props
+  // bindings: null,
+  // bindingsData: null,
+  // html: null,
+  // isTemplateTag: false,
+  // fragment: null,
+  // children: null,
+  // dom: null,
+  // el: null,
+
+  /**
+   * Create the template DOM structure that will be cloned on each mount
+   * @param   {HTMLElement} el - the root node
+   * @returns {TemplateChunk} self
+   */
+  createDOM(el) {
+    // make sure that the DOM gets created before cloning the template
+    this.dom = this.dom || createTemplateDOM(el, this.html) || document.createDocumentFragment();
+    return this;
+  },
+
+  // API methods
+
+  /**
+   * Attach the template to a DOM node
+   * @param   {HTMLElement} el - target DOM node
+   * @param   {*} scope - template data
+   * @param   {*} parentScope - scope of the parent template tag
+   * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+   * @returns {TemplateChunk} self
+   */
+  mount(el, scope, parentScope, meta) {
+    if (meta === void 0) {
+      meta = {};
+    }
+
+    if (!el) throw new Error('Please provide DOM node to mount properly your template');
+    if (this.el) this.unmount(scope); // <template> tags require a bit more work
+    // the template fragment might be already created via meta outside of this call
+
+    const {
+      fragment,
+      children,
+      avoidDOMInjection
+    } = meta; // <template> bindings of course can not have a root element
+    // so we check the parent node to set the query selector bindings
+
+    const {
+      parentNode
+    } = children ? children[0] : el;
+    const isTemplateTag = isTemplate(el);
+    const templateTagOffset = isTemplateTag ? getTemplateTagOffset(parentNode, el, meta) : null; // create the DOM if it wasn't created before
+
+    this.createDOM(el); // create the DOM of this template cloning the original DOM structure stored in this instance
+    // notice that if a documentFragment was passed (via meta) we will use it instead
+
+    const cloneNode = fragment || this.dom.cloneNode(true); // store root node
+    // notice that for template tags the root note will be the parent tag
+
+    this.el = isTemplateTag ? parentNode : el; // create the children array only for the <template> fragments
+
+    this.children = isTemplateTag ? children || Array.from(cloneNode.childNodes) : null; // inject the DOM into the el only if a fragment is available
+
+    if (!avoidDOMInjection && cloneNode) injectDOM(el, cloneNode); // create the bindings
+
+    this.bindings = this.bindingsData.map(binding => create$1(this.el, binding, templateTagOffset));
+    this.bindings.forEach(b => b.mount(scope, parentScope)); // store the template meta properties
+
+    this.meta = meta;
+    return this;
+  },
+
+  /**
+   * Update the template with fresh data
+   * @param   {*} scope - template data
+   * @param   {*} parentScope - scope of the parent template tag
+   * @returns {TemplateChunk} self
+   */
+  update(scope, parentScope) {
+    this.bindings.forEach(b => b.update(scope, parentScope));
+    return this;
+  },
+
+  /**
+   * Remove the template from the node where it was initially mounted
+   * @param   {*} scope - template data
+   * @param   {*} parentScope - scope of the parent template tag
+   * @param   {boolean|null} mustRemoveRoot - if true remove the root element,
+   * if false or undefined clean the root tag content, if null don't touch the DOM
+   * @returns {TemplateChunk} self
+   */
+  unmount(scope, parentScope, mustRemoveRoot) {
+    if (mustRemoveRoot === void 0) {
+      mustRemoveRoot = false;
+    }
+
+    const el = this.el;
+
+    if (!el) {
+      return this;
+    }
+
+    this.bindings.forEach(b => b.unmount(scope, parentScope, mustRemoveRoot));
+
+    switch (true) {
+      // pure components should handle the DOM unmount updates by themselves
+      // for mustRemoveRoot === null don't touch the DOM
+      case el[IS_PURE_SYMBOL] || mustRemoveRoot === null:
+        break;
+      // if children are declared, clear them
+      // applicable for <template> and <slot/> bindings
+
+      case Array.isArray(this.children):
+        clearChildren(this.children);
+        break;
+      // clean the node children only
+
+      case !mustRemoveRoot:
+        cleanNode(el);
+        break;
+      // remove the root node only if the mustRemoveRoot is truly
+
+      case !!mustRemoveRoot:
+        removeChild(el);
+        break;
+    }
+
+    this.el = null;
+    return this;
+  },
+
+  /**
+   * Clone the template chunk
+   * @returns {TemplateChunk} a clone of this object resetting the this.el property
+   */
+  clone() {
+    return Object.assign({}, this, {
+      meta: {},
+      el: null
+    });
+  }
+
+});
+/**
+ * Create a template chunk wiring also the bindings
+ * @param   {string|HTMLElement} html - template string
+ * @param   {BindingData[]} bindings - bindings collection
+ * @returns {TemplateChunk} a new TemplateChunk copy
+ */
+
+function create(html, bindings) {
+  if (bindings === void 0) {
+    bindings = [];
+  }
+
+  return Object.assign({}, TemplateChunk, {
+    html,
+    bindingsData: bindings
+  });
+}
+
+/**
+ * Method used to bind expressions to a DOM node
+ * @param   {string|HTMLElement} html - your static template html structure
+ * @param   {Array} bindings - list of the expressions to bind to update the markup
+ * @returns {TemplateChunk} a new TemplateChunk object having the `update`,`mount`, `unmount` and `clone` methods
+ *
+ * @example
+ *
+ * riotDOMBindings
+ *  .template(
+ *   `<div expr0><!----></div><div><p expr1><!----><section expr2></section></p>`,
+ *   [
+ *     {
+ *       selector: '[expr0]',
+ *       redundantAttribute: 'expr0',
+ *       expressions: [
+ *         {
+ *           type: expressionTypes.TEXT,
+ *           childNodeIndex: 0,
+ *           evaluate(scope) {
+ *             return scope.time;
+ *           },
+ *         },
+ *       ],
+ *     },
+ *     {
+ *       selector: '[expr1]',
+ *       redundantAttribute: 'expr1',
+ *       expressions: [
+ *         {
+ *           type: expressionTypes.TEXT,
+ *           childNodeIndex: 0,
+ *           evaluate(scope) {
+ *             return scope.name;
+ *           },
+ *         },
+ *         {
+ *           type: 'attribute',
+ *           name: 'style',
+ *           evaluate(scope) {
+ *             return scope.style;
+ *           },
+ *         },
+ *       ],
+ *     },
+ *     {
+ *       selector: '[expr2]',
+ *       redundantAttribute: 'expr2',
+ *       type: bindingTypes.IF,
+ *       evaluate(scope) {
+ *         return scope.isVisible;
+ *       },
+ *       template: riotDOMBindings.template('hello there'),
+ *     },
+ *   ]
+ * )
+ */
+
+var DOMBindings = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  template: create,
+  createBinding: create$1,
+  createExpression: create$4,
+  bindingTypes: bindingTypes,
+  expressionTypes: expressionTypes
+});
+
+function noop() {
+  return this;
+}
+/**
+ * Autobind the methods of a source object to itself
+ * @param   {Object} source - probably a riot tag instance
+ * @param   {Array<string>} methods - list of the methods to autobind
+ * @returns {Object} the original object received
+ */
+
+function autobindMethods(source, methods) {
+  methods.forEach(method => {
+    source[method] = source[method].bind(source);
+  });
+  return source;
+}
+/**
+ * Call the first argument received only if it's a function otherwise return it as it is
+ * @param   {*} source - anything
+ * @returns {*} anything
+ */
+
+function callOrAssign(source) {
+  return isFunction(source) ? source.prototype && source.prototype.constructor ? new source() : source() : source;
+}
+
+/**
+ * Converts any DOM node/s to a loopable array
+ * @param   { HTMLElement|NodeList } els - single html element or a node list
+ * @returns { Array } always a loopable object
+ */
+function domToArray(els) {
+  // can this object be already looped?
+  if (!Array.isArray(els)) {
+    // is it a node list?
+    if (/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(els)) && typeof els.length === 'number') return Array.from(els);else // if it's a single node
+      // it will be returned as "array" with one single entry
+      return [els];
+  } // this object could be looped out of the box
+
+
+  return els;
+}
+
+/**
+ * Simple helper to find DOM nodes returning them as array like loopable object
+ * @param   { string|DOMNodeList } selector - either the query or the DOM nodes to arraify
+ * @param   { HTMLElement }        ctx      - context defining where the query will search for the DOM nodes
+ * @returns { Array } DOM nodes found as array
+ */
+
+function $(selector, ctx) {
+  return domToArray(typeof selector === 'string' ? (ctx || document).querySelectorAll(selector) : selector);
+}
+
+/**
+ * Normalize the return values, in case of a single value we avoid to return an array
+ * @param   { Array } values - list of values we want to return
+ * @returns { Array|string|boolean } either the whole list of values or the single one found
+ * @private
+ */
+
+const normalize = values => values.length === 1 ? values[0] : values;
+/**
+ * Parse all the nodes received to get/remove/check their attributes
+ * @param   { HTMLElement|NodeList|Array } els    - DOM node/s to parse
+ * @param   { string|Array }               name   - name or list of attributes
+ * @param   { string }                     method - method that will be used to parse the attributes
+ * @returns { Array|string } result of the parsing in a list or a single value
+ * @private
+ */
+
+
+function parseNodes(els, name, method) {
+  const names = typeof name === 'string' ? [name] : name;
+  return normalize(domToArray(els).map(el => {
+    return normalize(names.map(n => el[method](n)));
+  }));
+}
+/**
+ * Set any attribute on a single or a list of DOM nodes
+ * @param   { HTMLElement|NodeList|Array } els   - DOM node/s to parse
+ * @param   { string|Object }              name  - either the name of the attribute to set
+ *                                                 or a list of properties as object key - value
+ * @param   { string }                     value - the new value of the attribute (optional)
+ * @returns { HTMLElement|NodeList|Array } the original array of elements passed to this function
+ *
+ * @example
+ *
+ * import { set } from 'bianco.attr'
+ *
+ * const img = document.createElement('img')
+ *
+ * set(img, 'width', 100)
+ *
+ * // or also
+ * set(img, {
+ *   width: 300,
+ *   height: 300
+ * })
+ *
+ */
+
+
+function set(els, name, value) {
+  const attrs = typeof name === 'object' ? name : {
+    [name]: value
+  };
+  const props = Object.keys(attrs);
+  domToArray(els).forEach(el => {
+    props.forEach(prop => el.setAttribute(prop, attrs[prop]));
+  });
+  return els;
+}
+/**
+ * Get any attribute from a single or a list of DOM nodes
+ * @param   { HTMLElement|NodeList|Array } els   - DOM node/s to parse
+ * @param   { string|Array }               name  - name or list of attributes to get
+ * @returns { Array|string } list of the attributes found
+ *
+ * @example
+ *
+ * import { get } from 'bianco.attr'
+ *
+ * const img = document.createElement('img')
+ *
+ * get(img, 'width') // => '200'
+ *
+ * // or also
+ * get(img, ['width', 'height']) // => ['200', '300']
+ *
+ * // or also
+ * get([img1, img2], ['width', 'height']) // => [['200', '300'], ['500', '200']]
+ */
+
+function get(els, name) {
+  return parseNodes(els, name, 'getAttribute');
+}
+
+const CSS_BY_NAME = new Map();
+const STYLE_NODE_SELECTOR = 'style[riot]'; // memoized curried function
+
+const getStyleNode = (style => {
+  return () => {
+    // lazy evaluation:
+    // if this function was already called before
+    // we return its cached result
+    if (style) return style; // create a new style element or use an existing one
+    // and cache it internally
+
+    style = $(STYLE_NODE_SELECTOR)[0] || document.createElement('style');
+    set(style, 'type', 'text/css');
+    /* istanbul ignore next */
+
+    if (!style.parentNode) document.head.appendChild(style);
+    return style;
+  };
+})();
+/**
+ * Object that will be used to inject and manage the css of every tag instance
+ */
+
+
+var cssManager = {
+  CSS_BY_NAME,
+
+  /**
+   * Save a tag style to be later injected into DOM
+   * @param { string } name - if it's passed we will map the css to a tagname
+   * @param { string } css - css string
+   * @returns {Object} self
+   */
+  add(name, css) {
+    if (!CSS_BY_NAME.has(name)) {
+      CSS_BY_NAME.set(name, css);
+      this.inject();
+    }
+
+    return this;
+  },
+
+  /**
+   * Inject all previously saved tag styles into DOM
+   * innerHTML seems slow: http://jsperf.com/riot-insert-style
+   * @returns {Object} self
+   */
+  inject() {
+    getStyleNode().innerHTML = [...CSS_BY_NAME.values()].join('\n');
+    return this;
+  },
+
+  /**
+   * Remove a tag style from the DOM
+   * @param {string} name a registered tagname
+   * @returns {Object} self
+   */
+  remove(name) {
+    if (CSS_BY_NAME.has(name)) {
+      CSS_BY_NAME.delete(name);
+      this.inject();
+    }
+
+    return this;
+  }
+
+};
+
+/**
+ * Function to curry any javascript method
+ * @param   {Function}  fn - the target function we want to curry
+ * @param   {...[args]} acc - initial arguments
+ * @returns {Function|*} it will return a function until the target function
+ *                       will receive all of its arguments
+ */
+function curry(fn) {
+  for (var _len = arguments.length, acc = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    acc[_key - 1] = arguments[_key];
+  }
+
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    args = [...acc, ...args];
+    return args.length < fn.length ? curry(fn, ...args) : fn(...args);
+  };
+}
+
+/**
+ * Get the tag name of any DOM node
+ * @param   {HTMLElement} element - DOM node we want to inspect
+ * @returns {string} name to identify this dom node in riot
+ */
+
+function getName(element) {
+  return get(element, IS_DIRECTIVE) || element.tagName.toLowerCase();
+}
+
+const COMPONENT_CORE_HELPERS = Object.freeze({
+  // component helpers
+  $(selector) {
+    return $(selector, this.root)[0];
+  },
+
+  $$(selector) {
+    return $(selector, this.root);
+  }
+
+});
+const PURE_COMPONENT_API = Object.freeze({
+  [MOUNT_METHOD_KEY]: noop,
+  [UPDATE_METHOD_KEY]: noop,
+  [UNMOUNT_METHOD_KEY]: noop
+});
+const COMPONENT_LIFECYCLE_METHODS = Object.freeze({
+  [SHOULD_UPDATE_KEY]: noop,
+  [ON_BEFORE_MOUNT_KEY]: noop,
+  [ON_MOUNTED_KEY]: noop,
+  [ON_BEFORE_UPDATE_KEY]: noop,
+  [ON_UPDATED_KEY]: noop,
+  [ON_BEFORE_UNMOUNT_KEY]: noop,
+  [ON_UNMOUNTED_KEY]: noop
+});
+const MOCKED_TEMPLATE_INTERFACE = Object.assign({}, PURE_COMPONENT_API, {
+  clone: noop,
+  createDOM: noop
+});
+/**
+ * Performance optimization for the recursive components
+ * @param  {RiotComponentWrapper} componentWrapper - riot compiler generated object
+ * @returns {Object} component like interface
+ */
+
+const memoizedCreateComponent = memoize(createComponent);
+/**
+ * Evaluate the component properties either from its real attributes or from its initial user properties
+ * @param   {HTMLElement} element - component root
+ * @param   {Object}  initialProps - initial props
+ * @returns {Object} component props key value pairs
+ */
+
+function evaluateInitialProps(element, initialProps) {
+  if (initialProps === void 0) {
+    initialProps = {};
+  }
+
+  return Object.assign({}, DOMattributesToObject(element), callOrAssign(initialProps));
+}
+/**
+ * Bind a DOM node to its component object
+ * @param   {HTMLElement} node - html node mounted
+ * @param   {Object} component - Riot.js component object
+ * @returns {Object} the component object received as second argument
+ */
+
+
+const bindDOMNodeToComponentObject = (node, component) => node[DOM_COMPONENT_INSTANCE_PROPERTY$1] = component;
+/**
+ * Wrap the Riot.js core API methods using a mapping function
+ * @param   {Function} mapFunction - lifting function
+ * @returns {Object} an object having the { mount, update, unmount } functions
+ */
+
+
+function createCoreAPIMethods(mapFunction) {
+  return [MOUNT_METHOD_KEY, UPDATE_METHOD_KEY, UNMOUNT_METHOD_KEY].reduce((acc, method) => {
+    acc[method] = mapFunction(method);
+    return acc;
+  }, {});
+}
+/**
+ * Factory function to create the component templates only once
+ * @param   {Function} template - component template creation function
+ * @param   {RiotComponentWrapper} componentWrapper - riot compiler generated object
+ * @returns {TemplateChunk} template chunk object
+ */
+
+
+function componentTemplateFactory(template, componentWrapper) {
+  const components = createSubcomponents(componentWrapper.exports ? componentWrapper.exports.components : {});
+  return template(create, expressionTypes, bindingTypes, name => {
+    // improve support for recursive components
+    if (name === componentWrapper.name) return memoizedCreateComponent(componentWrapper); // return the registered components
+
+    return components[name] || COMPONENTS_IMPLEMENTATION_MAP$1.get(name);
+  });
+}
+/**
+ * Create a pure component
+ * @param   {Function} pureFactoryFunction - pure component factory function
+ * @param   {Array} options.slots - component slots
+ * @param   {Array} options.attributes - component attributes
+ * @param   {Array} options.template - template factory function
+ * @param   {Array} options.template - template factory function
+ * @param   {any} options.props - initial component properties
+ * @returns {Object} pure component object
+ */
+
+
+function createPureComponent(pureFactoryFunction, _ref) {
+  let {
+    slots,
+    attributes,
+    props,
+    css,
+    template
+  } = _ref;
+  if (template) panic('Pure components can not have html');
+  if (css) panic('Pure components do not have css');
+  const component = defineDefaults(pureFactoryFunction({
+    slots,
+    attributes,
+    props
+  }), PURE_COMPONENT_API);
+  return createCoreAPIMethods(method => function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    // intercept the mount calls to bind the DOM node to the pure object created
+    // see also https://github.com/riot/riot/issues/2806
+    if (method === MOUNT_METHOD_KEY) {
+      const [el] = args; // mark this node as pure element
+
+      el[IS_PURE_SYMBOL] = true;
+      bindDOMNodeToComponentObject(el, component);
+    }
+
+    component[method](...args);
+    return component;
+  });
+}
+/**
+ * Create the component interface needed for the @riotjs/dom-bindings tag bindings
+ * @param   {RiotComponentWrapper} componentWrapper - riot compiler generated object
+ * @param   {string} componentWrapper.css - component css
+ * @param   {Function} componentWrapper.template - function that will return the dom-bindings template function
+ * @param   {Object} componentWrapper.exports - component interface
+ * @param   {string} componentWrapper.name - component name
+ * @returns {Object} component like interface
+ */
+
+
+function createComponent(componentWrapper) {
+  const {
+    css,
+    template,
+    exports,
+    name
+  } = componentWrapper;
+  const templateFn = template ? componentTemplateFactory(template, componentWrapper) : MOCKED_TEMPLATE_INTERFACE;
+  return _ref2 => {
+    let {
+      slots,
+      attributes,
+      props
+    } = _ref2;
+    // pure components rendering will be managed by the end user
+    if (exports && exports[IS_PURE_SYMBOL]) return createPureComponent(exports, {
+      slots,
+      attributes,
+      props,
+      css,
+      template
+    });
+    const componentAPI = callOrAssign(exports) || {};
+    const component = defineComponent({
+      css,
+      template: templateFn,
+      componentAPI,
+      name
+    })({
+      slots,
+      attributes,
+      props
+    }); // notice that for the components create via tag binding
+    // we need to invert the mount (state/parentScope) arguments
+    // the template bindings will only forward the parentScope updates
+    // and never deal with the component state
+
+    return {
+      mount(element, parentScope, state) {
+        return component.mount(element, state, parentScope);
+      },
+
+      update(parentScope, state) {
+        return component.update(state, parentScope);
+      },
+
+      unmount(preserveRoot) {
+        return component.unmount(preserveRoot);
+      }
+
+    };
+  };
+}
+/**
+ * Component definition function
+ * @param   {Object} implementation - the componen implementation will be generated via compiler
+ * @param   {Object} component - the component initial properties
+ * @returns {Object} a new component implementation object
+ */
+
+function defineComponent(_ref3) {
+  let {
+    css,
+    template,
+    componentAPI,
+    name
+  } = _ref3;
+  // add the component css into the DOM
+  if (css && name) cssManager.add(name, css);
+  return curry(enhanceComponentAPI)(defineProperties( // set the component defaults without overriding the original component API
+  defineDefaults(componentAPI, Object.assign({}, COMPONENT_LIFECYCLE_METHODS, {
+    [PROPS_KEY]: {},
+    [STATE_KEY]: {}
+  })), Object.assign({
+    // defined during the component creation
+    [SLOTS_KEY]: null,
+    [ROOT_KEY]: null
+  }, COMPONENT_CORE_HELPERS, {
+    name,
+    css,
+    template
+  })));
+}
+/**
+ * Create the bindings to update the component attributes
+ * @param   {HTMLElement} node - node where we will bind the expressions
+ * @param   {Array} attributes - list of attribute bindings
+ * @returns {TemplateChunk} - template bindings object
+ */
+
+function createAttributeBindings(node, attributes) {
+  if (attributes === void 0) {
+    attributes = [];
+  }
+
+  const expressions = attributes.map(a => create$4(node, a));
+  const binding = {};
+  return Object.assign(binding, Object.assign({
+    expressions
+  }, createCoreAPIMethods(method => scope => {
+    expressions.forEach(e => e[method](scope));
+    return binding;
+  })));
+}
+/**
+ * Create the subcomponents that can be included inside a tag in runtime
+ * @param   {Object} components - components imported in runtime
+ * @returns {Object} all the components transformed into Riot.Component factory functions
+ */
+
+
+function createSubcomponents(components) {
+  if (components === void 0) {
+    components = {};
+  }
+
+  return Object.entries(callOrAssign(components)).reduce((acc, _ref4) => {
+    let [key, value] = _ref4;
+    acc[camelToDashCase(key)] = createComponent(value);
+    return acc;
+  }, {});
+}
+/**
+ * Run the component instance through all the plugins set by the user
+ * @param   {Object} component - component instance
+ * @returns {Object} the component enhanced by the plugins
+ */
+
+
+function runPlugins(component) {
+  return [...PLUGINS_SET$1].reduce((c, fn) => fn(c) || c, component);
+}
+/**
+ * Compute the component current state merging it with its previous state
+ * @param   {Object} oldState - previous state object
+ * @param   {Object} newState - new state givent to the `update` call
+ * @returns {Object} new object state
+ */
+
+
+function computeState(oldState, newState) {
+  return Object.assign({}, oldState, callOrAssign(newState));
+}
+/**
+ * Add eventually the "is" attribute to link this DOM node to its css
+ * @param {HTMLElement} element - target root node
+ * @param {string} name - name of the component mounted
+ * @returns {undefined} it's a void function
+ */
+
+
+function addCssHook(element, name) {
+  if (getName(element) !== name) {
+    set(element, IS_DIRECTIVE, name);
+  }
+}
+/**
+ * Component creation factory function that will enhance the user provided API
+ * @param   {Object} component - a component implementation previously defined
+ * @param   {Array} options.slots - component slots generated via riot compiler
+ * @param   {Array} options.attributes - attribute expressions generated via riot compiler
+ * @returns {Riot.Component} a riot component instance
+ */
+
+
+function enhanceComponentAPI(component, _ref5) {
+  let {
+    slots,
+    attributes,
+    props
+  } = _ref5;
+  return autobindMethods(runPlugins(defineProperties(isObject(component) ? Object.create(component) : component, {
+    mount(element, state, parentScope) {
+      if (state === void 0) {
+        state = {};
+      }
+
+      this[PARENT_KEY_SYMBOL] = parentScope;
+      this[ATTRIBUTES_KEY_SYMBOL] = createAttributeBindings(element, attributes).mount(parentScope);
+      defineProperty(this, PROPS_KEY, Object.freeze(Object.assign({}, evaluateInitialProps(element, props), evaluateAttributeExpressions(this[ATTRIBUTES_KEY_SYMBOL].expressions))));
+      this[STATE_KEY] = computeState(this[STATE_KEY], state);
+      this[TEMPLATE_KEY_SYMBOL] = this.template.createDOM(element).clone(); // link this object to the DOM node
+
+      bindDOMNodeToComponentObject(element, this); // add eventually the 'is' attribute
+
+      component.name && addCssHook(element, component.name); // define the root element
+
+      defineProperty(this, ROOT_KEY, element); // define the slots array
+
+      defineProperty(this, SLOTS_KEY, slots); // before mount lifecycle event
+
+      this[ON_BEFORE_MOUNT_KEY](this[PROPS_KEY], this[STATE_KEY]); // mount the template
+
+      this[TEMPLATE_KEY_SYMBOL].mount(element, this, parentScope);
+      this[ON_MOUNTED_KEY](this[PROPS_KEY], this[STATE_KEY]);
+      return this;
+    },
+
+    update(state, parentScope) {
+      if (state === void 0) {
+        state = {};
+      }
+
+      if (parentScope) {
+        this[PARENT_KEY_SYMBOL] = parentScope;
+        this[ATTRIBUTES_KEY_SYMBOL].update(parentScope);
+      }
+
+      const newProps = evaluateAttributeExpressions(this[ATTRIBUTES_KEY_SYMBOL].expressions);
+      if (this[SHOULD_UPDATE_KEY](newProps, this[PROPS_KEY]) === false) return;
+      defineProperty(this, PROPS_KEY, Object.freeze(Object.assign({}, this[PROPS_KEY], newProps)));
+      this[STATE_KEY] = computeState(this[STATE_KEY], state);
+      this[ON_BEFORE_UPDATE_KEY](this[PROPS_KEY], this[STATE_KEY]); // avoiding recursive updates
+      // see also https://github.com/riot/riot/issues/2895
+
+      if (!this[IS_COMPONENT_UPDATING]) {
+        this[IS_COMPONENT_UPDATING] = true;
+        this[TEMPLATE_KEY_SYMBOL].update(this, this[PARENT_KEY_SYMBOL]);
+      }
+
+      this[ON_UPDATED_KEY](this[PROPS_KEY], this[STATE_KEY]);
+      this[IS_COMPONENT_UPDATING] = false;
+      return this;
+    },
+
+    unmount(preserveRoot) {
+      this[ON_BEFORE_UNMOUNT_KEY](this[PROPS_KEY], this[STATE_KEY]);
+      this[ATTRIBUTES_KEY_SYMBOL].unmount(); // if the preserveRoot is null the template html will be left untouched
+      // in that case the DOM cleanup will happen differently from a parent node
+
+      this[TEMPLATE_KEY_SYMBOL].unmount(this, this[PARENT_KEY_SYMBOL], preserveRoot === null ? null : !preserveRoot);
+      this[ON_UNMOUNTED_KEY](this[PROPS_KEY], this[STATE_KEY]);
+      return this;
+    }
+
+  })), Object.keys(component).filter(prop => isFunction(component[prop])));
+}
+/**
+ * Component initialization function starting from a DOM node
+ * @param   {HTMLElement} element - element to upgrade
+ * @param   {Object} initialProps - initial component properties
+ * @param   {string} componentName - component id
+ * @returns {Object} a new component instance bound to a DOM node
+ */
+
+function mountComponent(element, initialProps, componentName) {
+  const name = componentName || getName(element);
+  if (!COMPONENTS_IMPLEMENTATION_MAP$1.has(name)) panic(`The component named "${name}" was never registered`);
+  const component = COMPONENTS_IMPLEMENTATION_MAP$1.get(name)({
+    props: initialProps
+  });
+  return component.mount(element);
+}
+
+/**
+ * Similar to compose but performs from left-to-right function composition.<br/>
+ * {@link https://30secondsofcode.org/function#composeright see also}
+ * @param   {...[function]} fns) - list of unary function
+ * @returns {*} result of the computation
+ */
+/**
+ * Performs right-to-left function composition.<br/>
+ * Use Array.prototype.reduce() to perform right-to-left function composition.<br/>
+ * The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.<br/>
+ * {@link https://30secondsofcode.org/function#compose original source code}
+ * @param   {...[function]} fns) - list of unary function
+ * @returns {*} result of the computation
+ */
+
+function compose() {
+  for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    fns[_key2] = arguments[_key2];
+  }
+
+  return fns.reduce((f, g) => function () {
+    return f(g(...arguments));
+  });
+}
+
+const {
+  DOM_COMPONENT_INSTANCE_PROPERTY,
+  COMPONENTS_IMPLEMENTATION_MAP,
+  PLUGINS_SET
+} = globals;
+/**
+ * Riot public api
+ */
+
+/**
+ * Register a custom tag by name
+ * @param   {string} name - component name
+ * @param   {Object} implementation - tag implementation
+ * @returns {Map} map containing all the components implementations
+ */
+
+function register(name, _ref) {
+  let {
+    css,
+    template,
+    exports
+  } = _ref;
+  if (COMPONENTS_IMPLEMENTATION_MAP.has(name)) panic(`The component "${name}" was already registered`);
+  COMPONENTS_IMPLEMENTATION_MAP.set(name, createComponent({
+    name,
+    css,
+    template,
+    exports
+  }));
+  return COMPONENTS_IMPLEMENTATION_MAP;
+}
+/**
+ * Unregister a riot web component
+ * @param   {string} name - component name
+ * @returns {Map} map containing all the components implementations
+ */
+
+function unregister(name) {
+  if (!COMPONENTS_IMPLEMENTATION_MAP.has(name)) panic(`The component "${name}" was never registered`);
+  COMPONENTS_IMPLEMENTATION_MAP.delete(name);
+  cssManager.remove(name);
+  return COMPONENTS_IMPLEMENTATION_MAP;
+}
+/**
+ * Mounting function that will work only for the components that were globally registered
+ * @param   {string|HTMLElement} selector - query for the selection or a DOM element
+ * @param   {Object} initialProps - the initial component properties
+ * @param   {string} name - optional component name
+ * @returns {Array} list of riot components
+ */
+
+function mount(selector, initialProps, name) {
+  return $(selector).map(element => mountComponent(element, initialProps, name));
+}
+/**
+ * Sweet unmounting helper function for the DOM node mounted manually by the user
+ * @param   {string|HTMLElement} selector - query for the selection or a DOM element
+ * @param   {boolean|null} keepRootElement - if true keep the root element
+ * @returns {Array} list of nodes unmounted
+ */
+
+function unmount(selector, keepRootElement) {
+  return $(selector).map(element => {
+    if (element[DOM_COMPONENT_INSTANCE_PROPERTY]) {
+      element[DOM_COMPONENT_INSTANCE_PROPERTY].unmount(keepRootElement);
+    }
+
+    return element;
+  });
+}
+/**
+ * Define a riot plugin
+ * @param   {Function} plugin - function that will receive all the components created
+ * @returns {Set} the set containing all the plugins installed
+ */
+
+function install(plugin) {
+  if (!isFunction(plugin)) panic('Plugins must be of type function');
+  if (PLUGINS_SET.has(plugin)) panic('This plugin was already installed');
+  PLUGINS_SET.add(plugin);
+  return PLUGINS_SET;
+}
+/**
+ * Uninstall a riot plugin
+ * @param   {Function} plugin - plugin previously installed
+ * @returns {Set} the set containing all the plugins installed
+ */
+
+function uninstall(plugin) {
+  if (!PLUGINS_SET.has(plugin)) panic('This plugin was never installed');
+  PLUGINS_SET.delete(plugin);
+  return PLUGINS_SET;
+}
+/**
+ * Helper method to create component without relying on the registered ones
+ * @param   {Object} implementation - component implementation
+ * @returns {Function} function that will allow you to mount a riot component on a DOM node
+ */
+
+function component(implementation) {
+  return function (el, props, _temp) {
+    let {
+      slots,
+      attributes,
+      parentScope
+    } = _temp === void 0 ? {} : _temp;
+    return compose(c => c.mount(el, parentScope), c => c({
+      props,
+      slots,
+      attributes
+    }), createComponent)(implementation);
+  };
+}
+/**
+ * Lift a riot component Interface into a pure riot object
+ * @param   {Function} func - RiotPureComponent factory function
+ * @returns {Function} the lifted original function received as argument
+ */
+
+function pure(func) {
+  if (!isFunction(func)) panic('riot.pure accepts only arguments of type "function"');
+  func[IS_PURE_SYMBOL] = true;
+  return func;
+}
+/**
+ * no-op function needed to add the proper types to your component via typescript
+ * @param {Function|Object} component - component default export
+ * @returns {Function|Object} returns exactly what it has received
+ */
+
+const withTypes = component => component;
+/** @type {string} current riot version */
+
+const version = 'v6.0.1'; // expose some internal stuff that might be used from external tools
+
+const __ = {
+  cssManager,
+  DOMBindings,
+  createComponent,
+  defineComponent,
+  globals
+};
+
+
+
+
+/***/ }),
+
+/***/ "./node_modules/validate.js/validate.js":
+/*!**********************************************!*\
+  !*** ./node_modules/validate.js/validate.js ***!
+  \**********************************************/
+/***/ (function(module, exports, __webpack_require__) {
+
+/* module decorator */ module = __webpack_require__.nmd(module);
+/*!
+ * validate.js 0.13.1
+ *
+ * (c) 2013-2019 Nicklas Ansman, 2013 Wrapp
+ * Validate.js may be freely distributed under the MIT license.
+ * For all details and documentation:
+ * http://validatejs.org/
+ */
+
+(function(exports, module, define) {
+  "use strict";
+
+  // The main function that calls the validators specified by the constraints.
+  // The options are the following:
+  //   - format (string) - An option that controls how the returned value is formatted
+  //     * flat - Returns a flat array of just the error messages
+  //     * grouped - Returns the messages grouped by attribute (default)
+  //     * detailed - Returns an array of the raw validation data
+  //   - fullMessages (boolean) - If `true` (default) the attribute name is prepended to the error.
+  //
+  // Please note that the options are also passed to each validator.
+  var validate = function(attributes, constraints, options) {
+    options = v.extend({}, v.options, options);
+
+    var results = v.runValidations(attributes, constraints, options)
+      , attr
+      , validator;
+
+    if (results.some(function(r) { return v.isPromise(r.error); })) {
+      throw new Error("Use validate.async if you want support for promises");
+    }
+    return validate.processValidationResults(results, options);
+  };
+
+  var v = validate;
+
+  // Copies over attributes from one or more sources to a single destination.
+  // Very much similar to underscore's extend.
+  // The first argument is the target object and the remaining arguments will be
+  // used as sources.
+  v.extend = function(obj) {
+    [].slice.call(arguments, 1).forEach(function(source) {
+      for (var attr in source) {
+        obj[attr] = source[attr];
+      }
+    });
+    return obj;
+  };
+
+  v.extend(validate, {
+    // This is the version of the library as a semver.
+    // The toString function will allow it to be coerced into a string
+    version: {
+      major: 0,
+      minor: 13,
+      patch: 1,
+      metadata: null,
+      toString: function() {
+        var version = v.format("%{major}.%{minor}.%{patch}", v.version);
+        if (!v.isEmpty(v.version.metadata)) {
+          version += "+" + v.version.metadata;
+        }
+        return version;
+      }
+    },
+
+    // Below is the dependencies that are used in validate.js
+
+    // The constructor of the Promise implementation.
+    // If you are using Q.js, RSVP or any other A+ compatible implementation
+    // override this attribute to be the constructor of that promise.
+    // Since jQuery promises aren't A+ compatible they won't work.
+    Promise: typeof Promise !== "undefined" ? Promise : /* istanbul ignore next */ null,
+
+    EMPTY_STRING_REGEXP: /^\s*$/,
+
+    // Runs the validators specified by the constraints object.
+    // Will return an array of the format:
+    //     [{attribute: "<attribute name>", error: "<validation result>"}, ...]
+    runValidations: function(attributes, constraints, options) {
+      var results = []
+        , attr
+        , validatorName
+        , value
+        , validators
+        , validator
+        , validatorOptions
+        , error;
+
+      if (v.isDomElement(attributes) || v.isJqueryElement(attributes)) {
+        attributes = v.collectFormValues(attributes);
+      }
+
+      // Loops through each constraints, finds the correct validator and run it.
+      for (attr in constraints) {
+        value = v.getDeepObjectValue(attributes, attr);
+        // This allows the constraints for an attribute to be a function.
+        // The function will be called with the value, attribute name, the complete dict of
+        // attributes as well as the options and constraints passed in.
+        // This is useful when you want to have different
+        // validations depending on the attribute value.
+        validators = v.result(constraints[attr], value, attributes, attr, options, constraints);
+
+        for (validatorName in validators) {
+          validator = v.validators[validatorName];
+
+          if (!validator) {
+            error = v.format("Unknown validator %{name}", {name: validatorName});
+            throw new Error(error);
+          }
+
+          validatorOptions = validators[validatorName];
+          // This allows the options to be a function. The function will be
+          // called with the value, attribute name, the complete dict of
+          // attributes as well as the options and constraints passed in.
+          // This is useful when you want to have different
+          // validations depending on the attribute value.
+          validatorOptions = v.result(validatorOptions, value, attributes, attr, options, constraints);
+          if (!validatorOptions) {
+            continue;
+          }
+          results.push({
+            attribute: attr,
+            value: value,
+            validator: validatorName,
+            globalOptions: options,
+            attributes: attributes,
+            options: validatorOptions,
+            error: validator.call(validator,
+                value,
+                validatorOptions,
+                attr,
+                attributes,
+                options)
+          });
+        }
+      }
+
+      return results;
+    },
+
+    // Takes the output from runValidations and converts it to the correct
+    // output format.
+    processValidationResults: function(errors, options) {
+      errors = v.pruneEmptyErrors(errors, options);
+      errors = v.expandMultipleErrors(errors, options);
+      errors = v.convertErrorMessages(errors, options);
+
+      var format = options.format || "grouped";
+
+      if (typeof v.formatters[format] === 'function') {
+        errors = v.formatters[format](errors);
+      } else {
+        throw new Error(v.format("Unknown format %{format}", options));
+      }
+
+      return v.isEmpty(errors) ? undefined : errors;
+    },
+
+    // Runs the validations with support for promises.
+    // This function will return a promise that is settled when all the
+    // validation promises have been completed.
+    // It can be called even if no validations returned a promise.
+    async: function(attributes, constraints, options) {
+      options = v.extend({}, v.async.options, options);
+
+      var WrapErrors = options.wrapErrors || function(errors) {
+        return errors;
+      };
+
+      // Removes unknown attributes
+      if (options.cleanAttributes !== false) {
+        attributes = v.cleanAttributes(attributes, constraints);
+      }
+
+      var results = v.runValidations(attributes, constraints, options);
+
+      return new v.Promise(function(resolve, reject) {
+        v.waitForResults(results).then(function() {
+          var errors = v.processValidationResults(results, options);
+          if (errors) {
+            reject(new WrapErrors(errors, options, attributes, constraints));
+          } else {
+            resolve(attributes);
+          }
+        }, function(err) {
+          reject(err);
+        });
+      });
+    },
+
+    single: function(value, constraints, options) {
+      options = v.extend({}, v.single.options, options, {
+        format: "flat",
+        fullMessages: false
+      });
+      return v({single: value}, {single: constraints}, options);
+    },
+
+    // Returns a promise that is resolved when all promises in the results array
+    // are settled. The promise returned from this function is always resolved,
+    // never rejected.
+    // This function modifies the input argument, it replaces the promises
+    // with the value returned from the promise.
+    waitForResults: function(results) {
+      // Create a sequence of all the results starting with a resolved promise.
+      return results.reduce(function(memo, result) {
+        // If this result isn't a promise skip it in the sequence.
+        if (!v.isPromise(result.error)) {
+          return memo;
+        }
+
+        return memo.then(function() {
+          return result.error.then(function(error) {
+            result.error = error || null;
+          });
+        });
+      }, new v.Promise(function(r) { r(); })); // A resolved promise
+    },
+
+    // If the given argument is a call: function the and: function return the value
+    // otherwise just return the value. Additional arguments will be passed as
+    // arguments to the function.
+    // Example:
+    // ```
+    // result('foo') // 'foo'
+    // result(Math.max, 1, 2) // 2
+    // ```
+    result: function(value) {
+      var args = [].slice.call(arguments, 1);
+      if (typeof value === 'function') {
+        value = value.apply(null, args);
+      }
+      return value;
+    },
+
+    // Checks if the value is a number. This function does not consider NaN a
+    // number like many other `isNumber` functions do.
+    isNumber: function(value) {
+      return typeof value === 'number' && !isNaN(value);
+    },
+
+    // Returns false if the object is not a function
+    isFunction: function(value) {
+      return typeof value === 'function';
+    },
+
+    // A simple check to verify that the value is an integer. Uses `isNumber`
+    // and a simple modulo check.
+    isInteger: function(value) {
+      return v.isNumber(value) && value % 1 === 0;
+    },
+
+    // Checks if the value is a boolean
+    isBoolean: function(value) {
+      return typeof value === 'boolean';
+    },
+
+    // Uses the `Object` function to check if the given argument is an object.
+    isObject: function(obj) {
+      return obj === Object(obj);
+    },
+
+    // Simply checks if the object is an instance of a date
+    isDate: function(obj) {
+      return obj instanceof Date;
+    },
+
+    // Returns false if the object is `null` of `undefined`
+    isDefined: function(obj) {
+      return obj !== null && obj !== undefined;
+    },
+
+    // Checks if the given argument is a promise. Anything with a `then`
+    // function is considered a promise.
+    isPromise: function(p) {
+      return !!p && v.isFunction(p.then);
+    },
+
+    isJqueryElement: function(o) {
+      return o && v.isString(o.jquery);
+    },
+
+    isDomElement: function(o) {
+      if (!o) {
+        return false;
+      }
+
+      if (!o.querySelectorAll || !o.querySelector) {
+        return false;
+      }
+
+      if (v.isObject(document) && o === document) {
+        return true;
+      }
+
+      // http://stackoverflow.com/a/384380/699304
+      /* istanbul ignore else */
+      if (typeof HTMLElement === "object") {
+        return o instanceof HTMLElement;
+      } else {
+        return o &&
+          typeof o === "object" &&
+          o !== null &&
+          o.nodeType === 1 &&
+          typeof o.nodeName === "string";
+      }
+    },
+
+    isEmpty: function(value) {
+      var attr;
+
+      // Null and undefined are empty
+      if (!v.isDefined(value)) {
+        return true;
+      }
+
+      // functions are non empty
+      if (v.isFunction(value)) {
+        return false;
+      }
+
+      // Whitespace only strings are empty
+      if (v.isString(value)) {
+        return v.EMPTY_STRING_REGEXP.test(value);
+      }
+
+      // For arrays we use the length property
+      if (v.isArray(value)) {
+        return value.length === 0;
+      }
+
+      // Dates have no attributes but aren't empty
+      if (v.isDate(value)) {
+        return false;
+      }
+
+      // If we find at least one property we consider it non empty
+      if (v.isObject(value)) {
+        for (attr in value) {
+          return false;
+        }
+        return true;
+      }
+
+      return false;
+    },
+
+    // Formats the specified strings with the given values like so:
+    // ```
+    // format("Foo: %{foo}", {foo: "bar"}) // "Foo bar"
+    // ```
+    // If you want to write %{...} without having it replaced simply
+    // prefix it with % like this `Foo: %%{foo}` and it will be returned
+    // as `"Foo: %{foo}"`
+    format: v.extend(function(str, vals) {
+      if (!v.isString(str)) {
+        return str;
+      }
+      return str.replace(v.format.FORMAT_REGEXP, function(m0, m1, m2) {
+        if (m1 === '%') {
+          return "%{" + m2 + "}";
+        } else {
+          return String(vals[m2]);
+        }
+      });
+    }, {
+      // Finds %{key} style patterns in the given string
+      FORMAT_REGEXP: /(%?)%\{([^\}]+)\}/g
+    }),
+
+    // "Prettifies" the given string.
+    // Prettifying means replacing [.\_-] with spaces as well as splitting
+    // camel case words.
+    prettify: function(str) {
+      if (v.isNumber(str)) {
+        // If there are more than 2 decimals round it to two
+        if ((str * 100) % 1 === 0) {
+          return "" + str;
+        } else {
+          return parseFloat(Math.round(str * 100) / 100).toFixed(2);
+        }
+      }
+
+      if (v.isArray(str)) {
+        return str.map(function(s) { return v.prettify(s); }).join(", ");
+      }
+
+      if (v.isObject(str)) {
+        if (!v.isDefined(str.toString)) {
+          return JSON.stringify(str);
+        }
+
+        return str.toString();
+      }
+
+      // Ensure the string is actually a string
+      str = "" + str;
+
+      return str
+        // Splits keys separated by periods
+        .replace(/([^\s])\.([^\s])/g, '$1 $2')
+        // Removes backslashes
+        .replace(/\\+/g, '')
+        // Replaces - and - with space
+        .replace(/[_-]/g, ' ')
+        // Splits camel cased words
+        .replace(/([a-z])([A-Z])/g, function(m0, m1, m2) {
+          return "" + m1 + " " + m2.toLowerCase();
+        })
+        .toLowerCase();
+    },
+
+    stringifyValue: function(value, options) {
+      var prettify = options && options.prettify || v.prettify;
+      return prettify(value);
+    },
+
+    isString: function(value) {
+      return typeof value === 'string';
+    },
+
+    isArray: function(value) {
+      return {}.toString.call(value) === '[object Array]';
+    },
+
+    // Checks if the object is a hash, which is equivalent to an object that
+    // is neither an array nor a function.
+    isHash: function(value) {
+      return v.isObject(value) && !v.isArray(value) && !v.isFunction(value);
+    },
+
+    contains: function(obj, value) {
+      if (!v.isDefined(obj)) {
+        return false;
+      }
+      if (v.isArray(obj)) {
+        return obj.indexOf(value) !== -1;
+      }
+      return value in obj;
+    },
+
+    unique: function(array) {
+      if (!v.isArray(array)) {
+        return array;
+      }
+      return array.filter(function(el, index, array) {
+        return array.indexOf(el) == index;
+      });
+    },
+
+    forEachKeyInKeypath: function(object, keypath, callback) {
+      if (!v.isString(keypath)) {
+        return undefined;
+      }
+
+      var key = ""
+        , i
+        , escape = false;
+
+      for (i = 0; i < keypath.length; ++i) {
+        switch (keypath[i]) {
+          case '.':
+            if (escape) {
+              escape = false;
+              key += '.';
+            } else {
+              object = callback(object, key, false);
+              key = "";
+            }
+            break;
+
+          case '\\':
+            if (escape) {
+              escape = false;
+              key += '\\';
+            } else {
+              escape = true;
+            }
+            break;
+
+          default:
+            escape = false;
+            key += keypath[i];
+            break;
+        }
+      }
+
+      return callback(object, key, true);
+    },
+
+    getDeepObjectValue: function(obj, keypath) {
+      if (!v.isObject(obj)) {
+        return undefined;
+      }
+
+      return v.forEachKeyInKeypath(obj, keypath, function(obj, key) {
+        if (v.isObject(obj)) {
+          return obj[key];
+        }
+      });
+    },
+
+    // This returns an object with all the values of the form.
+    // It uses the input name as key and the value as value
+    // So for example this:
+    // <input type="text" name="email" value="foo@bar.com" />
+    // would return:
+    // {email: "foo@bar.com"}
+    collectFormValues: function(form, options) {
+      var values = {}
+        , i
+        , j
+        , input
+        , inputs
+        , option
+        , value;
+
+      if (v.isJqueryElement(form)) {
+        form = form[0];
+      }
+
+      if (!form) {
+        return values;
+      }
+
+      options = options || {};
+
+      inputs = form.querySelectorAll("input[name], textarea[name]");
+      for (i = 0; i < inputs.length; ++i) {
+        input = inputs.item(i);
+
+        if (v.isDefined(input.getAttribute("data-ignored"))) {
+          continue;
+        }
+
+        var name = input.name.replace(/\./g, "\\\\.");
+        value = v.sanitizeFormValue(input.value, options);
+        if (input.type === "number") {
+          value = value ? +value : null;
+        } else if (input.type === "checkbox") {
+          if (input.attributes.value) {
+            if (!input.checked) {
+              value = values[name] || null;
+            }
+          } else {
+            value = input.checked;
+          }
+        } else if (input.type === "radio") {
+          if (!input.checked) {
+            value = values[name] || null;
+          }
+        }
+        values[name] = value;
+      }
+
+      inputs = form.querySelectorAll("select[name]");
+      for (i = 0; i < inputs.length; ++i) {
+        input = inputs.item(i);
+        if (v.isDefined(input.getAttribute("data-ignored"))) {
+          continue;
+        }
+
+        if (input.multiple) {
+          value = [];
+          for (j in input.options) {
+            option = input.options[j];
+             if (option && option.selected) {
+              value.push(v.sanitizeFormValue(option.value, options));
+            }
+          }
+        } else {
+          var _val = typeof input.options[input.selectedIndex] !== 'undefined' ? input.options[input.selectedIndex].value : /* istanbul ignore next */ '';
+          value = v.sanitizeFormValue(_val, options);
+        }
+        values[input.name] = value;
+      }
+
+      return values;
+    },
+
+    sanitizeFormValue: function(value, options) {
+      if (options.trim && v.isString(value)) {
+        value = value.trim();
+      }
+
+      if (options.nullify !== false && value === "") {
+        return null;
+      }
+      return value;
+    },
+
+    capitalize: function(str) {
+      if (!v.isString(str)) {
+        return str;
+      }
+      return str[0].toUpperCase() + str.slice(1);
+    },
+
+    // Remove all errors who's error attribute is empty (null or undefined)
+    pruneEmptyErrors: function(errors) {
+      return errors.filter(function(error) {
+        return !v.isEmpty(error.error);
+      });
+    },
+
+    // In
+    // [{error: ["err1", "err2"], ...}]
+    // Out
+    // [{error: "err1", ...}, {error: "err2", ...}]
+    //
+    // All attributes in an error with multiple messages are duplicated
+    // when expanding the errors.
+    expandMultipleErrors: function(errors) {
+      var ret = [];
+      errors.forEach(function(error) {
+        // Removes errors without a message
+        if (v.isArray(error.error)) {
+          error.error.forEach(function(msg) {
+            ret.push(v.extend({}, error, {error: msg}));
+          });
+        } else {
+          ret.push(error);
+        }
+      });
+      return ret;
+    },
+
+    // Converts the error mesages by prepending the attribute name unless the
+    // message is prefixed by ^
+    convertErrorMessages: function(errors, options) {
+      options = options || {};
+
+      var ret = []
+        , prettify = options.prettify || v.prettify;
+      errors.forEach(function(errorInfo) {
+        var error = v.result(errorInfo.error,
+            errorInfo.value,
+            errorInfo.attribute,
+            errorInfo.options,
+            errorInfo.attributes,
+            errorInfo.globalOptions);
+
+        if (!v.isString(error)) {
+          ret.push(errorInfo);
+          return;
+        }
+
+        if (error[0] === '^') {
+          error = error.slice(1);
+        } else if (options.fullMessages !== false) {
+          error = v.capitalize(prettify(errorInfo.attribute)) + " " + error;
+        }
+        error = error.replace(/\\\^/g, "^");
+        error = v.format(error, {
+          value: v.stringifyValue(errorInfo.value, options)
+        });
+        ret.push(v.extend({}, errorInfo, {error: error}));
+      });
+      return ret;
+    },
+
+    // In:
+    // [{attribute: "<attributeName>", ...}]
+    // Out:
+    // {"<attributeName>": [{attribute: "<attributeName>", ...}]}
+    groupErrorsByAttribute: function(errors) {
+      var ret = {};
+      errors.forEach(function(error) {
+        var list = ret[error.attribute];
+        if (list) {
+          list.push(error);
+        } else {
+          ret[error.attribute] = [error];
+        }
+      });
+      return ret;
+    },
+
+    // In:
+    // [{error: "<message 1>", ...}, {error: "<message 2>", ...}]
+    // Out:
+    // ["<message 1>", "<message 2>"]
+    flattenErrorsToArray: function(errors) {
+      return errors
+        .map(function(error) { return error.error; })
+        .filter(function(value, index, self) {
+          return self.indexOf(value) === index;
+        });
+    },
+
+    cleanAttributes: function(attributes, whitelist) {
+      function whitelistCreator(obj, key, last) {
+        if (v.isObject(obj[key])) {
+          return obj[key];
+        }
+        return (obj[key] = last ? true : {});
+      }
+
+      function buildObjectWhitelist(whitelist) {
+        var ow = {}
+          , lastObject
+          , attr;
+        for (attr in whitelist) {
+          if (!whitelist[attr]) {
+            continue;
+          }
+          v.forEachKeyInKeypath(ow, attr, whitelistCreator);
+        }
+        return ow;
+      }
+
+      function cleanRecursive(attributes, whitelist) {
+        if (!v.isObject(attributes)) {
+          return attributes;
+        }
+
+        var ret = v.extend({}, attributes)
+          , w
+          , attribute;
+
+        for (attribute in attributes) {
+          w = whitelist[attribute];
+
+          if (v.isObject(w)) {
+            ret[attribute] = cleanRecursive(ret[attribute], w);
+          } else if (!w) {
+            delete ret[attribute];
+          }
+        }
+        return ret;
+      }
+
+      if (!v.isObject(whitelist) || !v.isObject(attributes)) {
+        return {};
+      }
+
+      whitelist = buildObjectWhitelist(whitelist);
+      return cleanRecursive(attributes, whitelist);
+    },
+
+    exposeModule: function(validate, root, exports, module, define) {
+      if (exports) {
+        if (module && module.exports) {
+          exports = module.exports = validate;
+        }
+        exports.validate = validate;
+      } else {
+        root.validate = validate;
+        if (validate.isFunction(define) && define.amd) {
+          define([], function () { return validate; });
+        }
+      }
+    },
+
+    warn: function(msg) {
+      if (typeof console !== "undefined" && console.warn) {
+        console.warn("[validate.js] " + msg);
+      }
+    },
+
+    error: function(msg) {
+      if (typeof console !== "undefined" && console.error) {
+        console.error("[validate.js] " + msg);
+      }
+    }
+  });
+
+  validate.validators = {
+    // Presence validates that the value isn't empty
+    presence: function(value, options) {
+      options = v.extend({}, this.options, options);
+      if (options.allowEmpty !== false ? !v.isDefined(value) : v.isEmpty(value)) {
+        return options.message || this.message || "can't be blank";
+      }
+    },
+    length: function(value, options, attribute) {
+      // Empty values are allowed
+      if (!v.isDefined(value)) {
+        return;
+      }
+
+      options = v.extend({}, this.options, options);
+
+      var is = options.is
+        , maximum = options.maximum
+        , minimum = options.minimum
+        , tokenizer = options.tokenizer || function(val) { return val; }
+        , err
+        , errors = [];
+
+      value = tokenizer(value);
+      var length = value.length;
+      if(!v.isNumber(length)) {
+        return options.message || this.notValid || "has an incorrect length";
+      }
+
+      // Is checks
+      if (v.isNumber(is) && length !== is) {
+        err = options.wrongLength ||
+          this.wrongLength ||
+          "is the wrong length (should be %{count} characters)";
+        errors.push(v.format(err, {count: is}));
+      }
+
+      if (v.isNumber(minimum) && length < minimum) {
+        err = options.tooShort ||
+          this.tooShort ||
+          "is too short (minimum is %{count} characters)";
+        errors.push(v.format(err, {count: minimum}));
+      }
+
+      if (v.isNumber(maximum) && length > maximum) {
+        err = options.tooLong ||
+          this.tooLong ||
+          "is too long (maximum is %{count} characters)";
+        errors.push(v.format(err, {count: maximum}));
+      }
+
+      if (errors.length > 0) {
+        return options.message || errors;
+      }
+    },
+    numericality: function(value, options, attribute, attributes, globalOptions) {
+      // Empty values are fine
+      if (!v.isDefined(value)) {
+        return;
+      }
+
+      options = v.extend({}, this.options, options);
+
+      var errors = []
+        , name
+        , count
+        , checks = {
+            greaterThan:          function(v, c) { return v > c; },
+            greaterThanOrEqualTo: function(v, c) { return v >= c; },
+            equalTo:              function(v, c) { return v === c; },
+            lessThan:             function(v, c) { return v < c; },
+            lessThanOrEqualTo:    function(v, c) { return v <= c; },
+            divisibleBy:          function(v, c) { return v % c === 0; }
+          }
+        , prettify = options.prettify ||
+          (globalOptions && globalOptions.prettify) ||
+          v.prettify;
+
+      // Strict will check that it is a valid looking number
+      if (v.isString(value) && options.strict) {
+        var pattern = "^-?(0|[1-9]\\d*)";
+        if (!options.onlyInteger) {
+          pattern += "(\\.\\d+)?";
+        }
+        pattern += "$";
+
+        if (!(new RegExp(pattern).test(value))) {
+          return options.message ||
+            options.notValid ||
+            this.notValid ||
+            this.message ||
+            "must be a valid number";
+        }
+      }
+
+      // Coerce the value to a number unless we're being strict.
+      if (options.noStrings !== true && v.isString(value) && !v.isEmpty(value)) {
+        value = +value;
+      }
+
+      // If it's not a number we shouldn't continue since it will compare it.
+      if (!v.isNumber(value)) {
+        return options.message ||
+          options.notValid ||
+          this.notValid ||
+          this.message ||
+          "is not a number";
+      }
+
+      // Same logic as above, sort of. Don't bother with comparisons if this
+      // doesn't pass.
+      if (options.onlyInteger && !v.isInteger(value)) {
+        return options.message ||
+          options.notInteger ||
+          this.notInteger ||
+          this.message ||
+          "must be an integer";
+      }
+
+      for (name in checks) {
+        count = options[name];
+        if (v.isNumber(count) && !checks[name](value, count)) {
+          // This picks the default message if specified
+          // For example the greaterThan check uses the message from
+          // this.notGreaterThan so we capitalize the name and prepend "not"
+          var key = "not" + v.capitalize(name);
+          var msg = options[key] ||
+            this[key] ||
+            this.message ||
+            "must be %{type} %{count}";
+
+          errors.push(v.format(msg, {
+            count: count,
+            type: prettify(name)
+          }));
+        }
+      }
+
+      if (options.odd && value % 2 !== 1) {
+        errors.push(options.notOdd ||
+            this.notOdd ||
+            this.message ||
+            "must be odd");
+      }
+      if (options.even && value % 2 !== 0) {
+        errors.push(options.notEven ||
+            this.notEven ||
+            this.message ||
+            "must be even");
+      }
+
+      if (errors.length) {
+        return options.message || errors;
+      }
+    },
+    datetime: v.extend(function(value, options) {
+      if (!v.isFunction(this.parse) || !v.isFunction(this.format)) {
+        throw new Error("Both the parse and format functions needs to be set to use the datetime/date validator");
+      }
+
+      // Empty values are fine
+      if (!v.isDefined(value)) {
+        return;
+      }
+
+      options = v.extend({}, this.options, options);
+
+      var err
+        , errors = []
+        , earliest = options.earliest ? this.parse(options.earliest, options) : NaN
+        , latest = options.latest ? this.parse(options.latest, options) : NaN;
+
+      value = this.parse(value, options);
+
+      // 86400000 is the number of milliseconds in a day, this is used to remove
+      // the time from the date
+      if (isNaN(value) || options.dateOnly && value % 86400000 !== 0) {
+        err = options.notValid ||
+          options.message ||
+          this.notValid ||
+          "must be a valid date";
+        return v.format(err, {value: arguments[0]});
+      }
+
+      if (!isNaN(earliest) && value < earliest) {
+        err = options.tooEarly ||
+          options.message ||
+          this.tooEarly ||
+          "must be no earlier than %{date}";
+        err = v.format(err, {
+          value: this.format(value, options),
+          date: this.format(earliest, options)
+        });
+        errors.push(err);
+      }
+
+      if (!isNaN(latest) && value > latest) {
+        err = options.tooLate ||
+          options.message ||
+          this.tooLate ||
+          "must be no later than %{date}";
+        err = v.format(err, {
+          date: this.format(latest, options),
+          value: this.format(value, options)
+        });
+        errors.push(err);
+      }
+
+      if (errors.length) {
+        return v.unique(errors);
+      }
+    }, {
+      parse: null,
+      format: null
+    }),
+    date: function(value, options) {
+      options = v.extend({}, options, {dateOnly: true});
+      return v.validators.datetime.call(v.validators.datetime, value, options);
+    },
+    format: function(value, options) {
+      if (v.isString(options) || (options instanceof RegExp)) {
+        options = {pattern: options};
+      }
+
+      options = v.extend({}, this.options, options);
+
+      var message = options.message || this.message || "is invalid"
+        , pattern = options.pattern
+        , match;
+
+      // Empty values are allowed
+      if (!v.isDefined(value)) {
+        return;
+      }
+      if (!v.isString(value)) {
+        return message;
+      }
+
+      if (v.isString(pattern)) {
+        pattern = new RegExp(options.pattern, options.flags);
+      }
+      match = pattern.exec(value);
+      if (!match || match[0].length != value.length) {
+        return message;
+      }
+    },
+    inclusion: function(value, options) {
+      // Empty values are fine
+      if (!v.isDefined(value)) {
+        return;
+      }
+      if (v.isArray(options)) {
+        options = {within: options};
+      }
+      options = v.extend({}, this.options, options);
+      if (v.contains(options.within, value)) {
+        return;
+      }
+      var message = options.message ||
+        this.message ||
+        "^%{value} is not included in the list";
+      return v.format(message, {value: value});
+    },
+    exclusion: function(value, options) {
+      // Empty values are fine
+      if (!v.isDefined(value)) {
+        return;
+      }
+      if (v.isArray(options)) {
+        options = {within: options};
+      }
+      options = v.extend({}, this.options, options);
+      if (!v.contains(options.within, value)) {
+        return;
+      }
+      var message = options.message || this.message || "^%{value} is restricted";
+      if (v.isString(options.within[value])) {
+        value = options.within[value];
+      }
+      return v.format(message, {value: value});
+    },
+    email: v.extend(function(value, options) {
+      options = v.extend({}, this.options, options);
+      var message = options.message || this.message || "is not a valid email";
+      // Empty values are fine
+      if (!v.isDefined(value)) {
+        return;
+      }
+      if (!v.isString(value)) {
+        return message;
+      }
+      if (!this.PATTERN.exec(value)) {
+        return message;
+      }
+    }, {
+      PATTERN: /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i
+    }),
+    equality: function(value, options, attribute, attributes, globalOptions) {
+      if (!v.isDefined(value)) {
+        return;
+      }
+
+      if (v.isString(options)) {
+        options = {attribute: options};
+      }
+      options = v.extend({}, this.options, options);
+      var message = options.message ||
+        this.message ||
+        "is not equal to %{attribute}";
+
+      if (v.isEmpty(options.attribute) || !v.isString(options.attribute)) {
+        throw new Error("The attribute must be a non empty string");
+      }
+
+      var otherValue = v.getDeepObjectValue(attributes, options.attribute)
+        , comparator = options.comparator || function(v1, v2) {
+          return v1 === v2;
+        }
+        , prettify = options.prettify ||
+          (globalOptions && globalOptions.prettify) ||
+          v.prettify;
+
+      if (!comparator(value, otherValue, options, attribute, attributes)) {
+        return v.format(message, {attribute: prettify(options.attribute)});
+      }
+    },
+    // A URL validator that is used to validate URLs with the ability to
+    // restrict schemes and some domains.
+    url: function(value, options) {
+      if (!v.isDefined(value)) {
+        return;
+      }
+
+      options = v.extend({}, this.options, options);
+
+      var message = options.message || this.message || "is not a valid url"
+        , schemes = options.schemes || this.schemes || ['http', 'https']
+        , allowLocal = options.allowLocal || this.allowLocal || false
+        , allowDataUrl = options.allowDataUrl || this.allowDataUrl || false;
+      if (!v.isString(value)) {
+        return message;
+      }
+
+      // https://gist.github.com/dperini/729294
+      var regex =
+        "^" +
+        // protocol identifier
+        "(?:(?:" + schemes.join("|") + ")://)" +
+        // user:pass authentication
+        "(?:\\S+(?::\\S*)?@)?" +
+        "(?:";
+
+      var tld = "(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))";
+
+      if (allowLocal) {
+        tld += "?";
+      } else {
+        regex +=
+          // IP address exclusion
+          // private & local networks
+          "(?!(?:10|127)(?:\\.\\d{1,3}){3})" +
+          "(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})" +
+          "(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})";
+      }
+
+      regex +=
+          // IP address dotted notation octets
+          // excludes loopback network 0.0.0.0
+          // excludes reserved space >= 224.0.0.0
+          // excludes network & broacast addresses
+          // (first & last IP address of each class)
+          "(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])" +
+          "(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}" +
+          "(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))" +
+        "|" +
+          // host name
+          "(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)" +
+          // domain name
+          "(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*" +
+          tld +
+        ")" +
+        // port number
+        "(?::\\d{2,5})?" +
+        // resource path
+        "(?:[/?#]\\S*)?" +
+      "$";
+
+      if (allowDataUrl) {
+        // RFC 2397
+        var mediaType = "\\w+\\/[-+.\\w]+(?:;[\\w=]+)*";
+        var urlchar = "[A-Za-z0-9-_.!~\\*'();\\/?:@&=+$,%]*";
+        var dataurl = "data:(?:"+mediaType+")?(?:;base64)?,"+urlchar;
+        regex = "(?:"+regex+")|(?:^"+dataurl+"$)";
+      }
+
+      var PATTERN = new RegExp(regex, 'i');
+      if (!PATTERN.exec(value)) {
+        return message;
+      }
+    },
+    type: v.extend(function(value, originalOptions, attribute, attributes, globalOptions) {
+      if (v.isString(originalOptions)) {
+        originalOptions = {type: originalOptions};
+      }
+
+      if (!v.isDefined(value)) {
+        return;
+      }
+
+      var options = v.extend({}, this.options, originalOptions);
+
+      var type = options.type;
+      if (!v.isDefined(type)) {
+        throw new Error("No type was specified");
+      }
+
+      var check;
+      if (v.isFunction(type)) {
+        check = type;
+      } else {
+        check = this.types[type];
+      }
+
+      if (!v.isFunction(check)) {
+        throw new Error("validate.validators.type.types." + type + " must be a function.");
+      }
+
+      if (!check(value, options, attribute, attributes, globalOptions)) {
+        var message = originalOptions.message ||
+          this.messages[type] ||
+          this.message ||
+          options.message ||
+          (v.isFunction(type) ? "must be of the correct type" : "must be of type %{type}");
+
+        if (v.isFunction(message)) {
+          message = message(value, originalOptions, attribute, attributes, globalOptions);
+        }
+
+        return v.format(message, {attribute: v.prettify(attribute), type: type});
+      }
+    }, {
+      types: {
+        object: function(value) {
+          return v.isObject(value) && !v.isArray(value);
+        },
+        array: v.isArray,
+        integer: v.isInteger,
+        number: v.isNumber,
+        string: v.isString,
+        date: v.isDate,
+        boolean: v.isBoolean
+      },
+      messages: {}
+    })
+  };
+
+  validate.formatters = {
+    detailed: function(errors) {return errors;},
+    flat: v.flattenErrorsToArray,
+    grouped: function(errors) {
+      var attr;
+
+      errors = v.groupErrorsByAttribute(errors);
+      for (attr in errors) {
+        errors[attr] = v.flattenErrorsToArray(errors[attr]);
+      }
+      return errors;
+    },
+    constraint: function(errors) {
+      var attr;
+      errors = v.groupErrorsByAttribute(errors);
+      for (attr in errors) {
+        errors[attr] = errors[attr].map(function(result) {
+          return result.validator;
+        }).sort();
+      }
+      return errors;
+    }
+  };
+
+  validate.exposeModule(validate, this, exports, module, __webpack_require__.amdD);
+}).call(this,
+         true ? /* istanbul ignore next */ exports : 0,
+         true ? /* istanbul ignore next */ module : 0,
+        __webpack_require__.amdD);
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			id: moduleId,
+/******/ 			loaded: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/amd define */
+/******/ 	(() => {
+/******/ 		__webpack_require__.amdD = function () {
+/******/ 			throw new Error('define cannot be used indirect');
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/node module decorator */
+/******/ 	(() => {
+/******/ 		__webpack_require__.nmd = (module) => {
+/******/ 			module.paths = [];
+/******/ 			if (!module.children) module.children = [];
+/******/ 			return module;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be in strict mode.
+(() => {
+"use strict";
+/*!***************************************!*\
+  !*** ./resources/js/create-bucket.js ***!
+  \***************************************/
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js");
+/* harmony import */ var _components_field_error_riot__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/field-error.riot */ "./resources/js/components/field-error.riot");
+/* harmony import */ var _node_modules_tentakelfabrik_tiny_validator_src_FormValidator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./../../node_modules/@tentakelfabrik/tiny-validator/src/FormValidator */ "./node_modules/@tentakelfabrik/tiny-validator/src/FormValidator.js");
+
+
+
+riot__WEBPACK_IMPORTED_MODULE_2__.register('field-error', _components_field_error_riot__WEBPACK_IMPORTED_MODULE_0__.default);
+riot__WEBPACK_IMPORTED_MODULE_2__.mount('field-error');
+var formValidation = new _node_modules_tentakelfabrik_tiny_validator_src_FormValidator__WEBPACK_IMPORTED_MODULE_1__.default('form', {
+  'title': {
+    'presence': true,
+    'length': {
+      'maximum': 255
+    }
+  },
+  'description': {
+    'length': {
+      'maximum': 255
+    }
+  },
+  'type': {
+    'presence': true
+  },
+  'visiblity': {
+    'presence': true
+  }
+});
+})();
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/public/js/critical.js b/public/js/critical.js
index 6146c33..14b6ab5 100644
--- a/public/js/critical.js
+++ b/public/js/critical.js
@@ -1,6 +1,32 @@
 /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "./resources/js/critical.js":
+/*!**********************************!*\
+  !*** ./resources/js/critical.js ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
+
+var Turbolinks = __webpack_require__(/*! turbolinks */ "./node_modules/turbolinks/dist/turbolinks.js");
+
+Turbolinks.start();
+Turbolinks.setProgressBarDelay(500);
+
+/***/ }),
+
+/***/ "./resources/scss/index.scss":
+/*!***********************************!*\
+  !*** ./resources/scss/index.scss ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ }),
+
 /***/ "./node_modules/turbolinks/dist/turbolinks.js":
 /*!****************************************************!*\
   !*** ./node_modules/turbolinks/dist/turbolinks.js ***!
@@ -46,18 +72,117 @@ Copyright © 2018 Basecamp, LLC
 /******/ 		return module.exports;
 /******/ 	}
 /******/ 	
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = __webpack_modules__;
+/******/ 	
 /************************************************************************/
-var __webpack_exports__ = {};
-// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-(() => {
-/*!**********************************!*\
-  !*** ./resources/js/critical.js ***!
-  \**********************************/
-var Turbolinks = __webpack_require__(/*! turbolinks */ "./node_modules/turbolinks/dist/turbolinks.js");
-
-Turbolinks.start();
-Turbolinks.setProgressBarDelay(500);
-})();
-
+/******/ 	/* webpack/runtime/chunk loaded */
+/******/ 	(() => {
+/******/ 		var deferred = [];
+/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 			if(chunkIds) {
+/******/ 				priority = priority || 0;
+/******/ 				for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 				deferred[i] = [chunkIds, fn, priority];
+/******/ 				return;
+/******/ 			}
+/******/ 			var notFulfilled = Infinity;
+/******/ 			for (var i = 0; i < deferred.length; i++) {
+/******/ 				var [chunkIds, fn, priority] = deferred[i];
+/******/ 				var fulfilled = true;
+/******/ 				for (var j = 0; j < chunkIds.length; j++) {
+/******/ 					if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
+/******/ 						chunkIds.splice(j--, 1);
+/******/ 					} else {
+/******/ 						fulfilled = false;
+/******/ 						if(priority < notFulfilled) notFulfilled = priority;
+/******/ 					}
+/******/ 				}
+/******/ 				if(fulfilled) {
+/******/ 					deferred.splice(i--, 1)
+/******/ 					result = fn();
+/******/ 				}
+/******/ 			}
+/******/ 			return result;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/jsonp chunk loading */
+/******/ 	(() => {
+/******/ 		// no baseURI
+/******/ 		
+/******/ 		// object to store loaded and loading chunks
+/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ 		var installedChunks = {
+/******/ 			"/public/js/critical": 0,
+/******/ 			"public/css/index": 0
+/******/ 		};
+/******/ 		
+/******/ 		// no chunk on demand loading
+/******/ 		
+/******/ 		// no prefetching
+/******/ 		
+/******/ 		// no preloaded
+/******/ 		
+/******/ 		// no HMR
+/******/ 		
+/******/ 		// no HMR manifest
+/******/ 		
+/******/ 		__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 		
+/******/ 		// install a JSONP callback for chunk loading
+/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ 			var [chunkIds, moreModules, runtime] = data;
+/******/ 			// add "moreModules" to the modules object,
+/******/ 			// then flag all "chunkIds" as loaded and fire callback
+/******/ 			var moduleId, chunkId, i = 0;
+/******/ 			for(moduleId in moreModules) {
+/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 					__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 				}
+/******/ 			}
+/******/ 			if(runtime) var result = runtime(__webpack_require__);
+/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ 			for(;i < chunkIds.length; i++) {
+/******/ 				chunkId = chunkIds[i];
+/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 					installedChunks[chunkId][0]();
+/******/ 				}
+/******/ 				installedChunks[chunkIds[i]] = 0;
+/******/ 			}
+/******/ 			return __webpack_require__.O(result);
+/******/ 		}
+/******/ 		
+/******/ 		var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
+/******/ 	__webpack_require__.O(undefined, ["public/css/index"], () => (__webpack_require__("./resources/js/critical.js")))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["public/css/index"], () => (__webpack_require__("./resources/scss/index.scss")))
+/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
+/******/ 	
 /******/ })()
 ;
\ No newline at end of file
diff --git a/public/js/dashboard.js b/public/js/dashboard.js
index 418c420..aa16d53 100644
--- a/public/js/dashboard.js
+++ b/public/js/dashboard.js
@@ -4576,6 +4576,2589 @@ process.chdir = function (dir) {
 process.umask = function() { return 0; };
 
 
+/***/ }),
+
+/***/ "./node_modules/riot/riot.esm.js":
+/*!***************************************!*\
+  !*** ./node_modules/riot/riot.esm.js ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "__": () => (/* binding */ __),
+/* harmony export */   "component": () => (/* binding */ component),
+/* harmony export */   "install": () => (/* binding */ install),
+/* harmony export */   "mount": () => (/* binding */ mount),
+/* harmony export */   "pure": () => (/* binding */ pure),
+/* harmony export */   "register": () => (/* binding */ register),
+/* harmony export */   "uninstall": () => (/* binding */ uninstall),
+/* harmony export */   "unmount": () => (/* binding */ unmount),
+/* harmony export */   "unregister": () => (/* binding */ unregister),
+/* harmony export */   "version": () => (/* binding */ version),
+/* harmony export */   "withTypes": () => (/* binding */ withTypes)
+/* harmony export */ });
+/* Riot v6.0.1, @license MIT */
+/**
+ * Convert a string from camel case to dash-case
+ * @param   {string} string - probably a component tag name
+ * @returns {string} component name normalized
+ */
+function camelToDashCase(string) {
+  return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ * Convert a string containing dashes to camel case
+ * @param   {string} string - input string
+ * @returns {string} my-string -> myString
+ */
+
+function dashToCamelCase(string) {
+  return string.replace(/-(\w)/g, (_, c) => c.toUpperCase());
+}
+
+/**
+ * Get all the element attributes as object
+ * @param   {HTMLElement} element - DOM node we want to parse
+ * @returns {Object} all the attributes found as a key value pairs
+ */
+
+function DOMattributesToObject(element) {
+  return Array.from(element.attributes).reduce((acc, attribute) => {
+    acc[dashToCamelCase(attribute.name)] = attribute.value;
+    return acc;
+  }, {});
+}
+/**
+ * Move all the child nodes from a source tag to another
+ * @param   {HTMLElement} source - source node
+ * @param   {HTMLElement} target - target node
+ * @returns {undefined} it's a void method ¯\_(ツ)_/¯
+ */
+// Ignore this helper because it's needed only for svg tags
+
+function moveChildren(source, target) {
+  if (source.firstChild) {
+    target.appendChild(source.firstChild);
+    moveChildren(source, target);
+  }
+}
+/**
+ * Remove the child nodes from any DOM node
+ * @param   {HTMLElement} node - target node
+ * @returns {undefined}
+ */
+
+function cleanNode(node) {
+  clearChildren(node.childNodes);
+}
+/**
+ * Clear multiple children in a node
+ * @param   {HTMLElement[]} children - direct children nodes
+ * @returns {undefined}
+ */
+
+function clearChildren(children) {
+  Array.from(children).forEach(removeChild);
+}
+/**
+ * Remove a node
+ * @param {HTMLElement}node - node to remove
+ * @returns {undefined}
+ */
+
+const removeChild = node => node && node.parentNode && node.parentNode.removeChild(node);
+/**
+ * Insert before a node
+ * @param {HTMLElement} newNode - node to insert
+ * @param {HTMLElement} refNode - ref child
+ * @returns {undefined}
+ */
+
+const insertBefore = (newNode, refNode) => refNode && refNode.parentNode && refNode.parentNode.insertBefore(newNode, refNode);
+/**
+ * Replace a node
+ * @param {HTMLElement} newNode - new node to add to the DOM
+ * @param {HTMLElement} replaced - node to replace
+ * @returns {undefined}
+ */
+
+const replaceChild = (newNode, replaced) => replaced && replaced.parentNode && replaced.parentNode.replaceChild(newNode, replaced);
+
+// Riot.js constants that can be used accross more modules
+const COMPONENTS_IMPLEMENTATION_MAP$1 = new Map(),
+      DOM_COMPONENT_INSTANCE_PROPERTY$1 = Symbol('riot-component'),
+      PLUGINS_SET$1 = new Set(),
+      IS_DIRECTIVE = 'is',
+      VALUE_ATTRIBUTE = 'value',
+      MOUNT_METHOD_KEY = 'mount',
+      UPDATE_METHOD_KEY = 'update',
+      UNMOUNT_METHOD_KEY = 'unmount',
+      SHOULD_UPDATE_KEY = 'shouldUpdate',
+      ON_BEFORE_MOUNT_KEY = 'onBeforeMount',
+      ON_MOUNTED_KEY = 'onMounted',
+      ON_BEFORE_UPDATE_KEY = 'onBeforeUpdate',
+      ON_UPDATED_KEY = 'onUpdated',
+      ON_BEFORE_UNMOUNT_KEY = 'onBeforeUnmount',
+      ON_UNMOUNTED_KEY = 'onUnmounted',
+      PROPS_KEY = 'props',
+      STATE_KEY = 'state',
+      SLOTS_KEY = 'slots',
+      ROOT_KEY = 'root',
+      IS_PURE_SYMBOL = Symbol('pure'),
+      IS_COMPONENT_UPDATING = Symbol('is_updating'),
+      PARENT_KEY_SYMBOL = Symbol('parent'),
+      ATTRIBUTES_KEY_SYMBOL = Symbol('attributes'),
+      TEMPLATE_KEY_SYMBOL = Symbol('template');
+
+var globals = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  COMPONENTS_IMPLEMENTATION_MAP: COMPONENTS_IMPLEMENTATION_MAP$1,
+  DOM_COMPONENT_INSTANCE_PROPERTY: DOM_COMPONENT_INSTANCE_PROPERTY$1,
+  PLUGINS_SET: PLUGINS_SET$1,
+  IS_DIRECTIVE: IS_DIRECTIVE,
+  VALUE_ATTRIBUTE: VALUE_ATTRIBUTE,
+  MOUNT_METHOD_KEY: MOUNT_METHOD_KEY,
+  UPDATE_METHOD_KEY: UPDATE_METHOD_KEY,
+  UNMOUNT_METHOD_KEY: UNMOUNT_METHOD_KEY,
+  SHOULD_UPDATE_KEY: SHOULD_UPDATE_KEY,
+  ON_BEFORE_MOUNT_KEY: ON_BEFORE_MOUNT_KEY,
+  ON_MOUNTED_KEY: ON_MOUNTED_KEY,
+  ON_BEFORE_UPDATE_KEY: ON_BEFORE_UPDATE_KEY,
+  ON_UPDATED_KEY: ON_UPDATED_KEY,
+  ON_BEFORE_UNMOUNT_KEY: ON_BEFORE_UNMOUNT_KEY,
+  ON_UNMOUNTED_KEY: ON_UNMOUNTED_KEY,
+  PROPS_KEY: PROPS_KEY,
+  STATE_KEY: STATE_KEY,
+  SLOTS_KEY: SLOTS_KEY,
+  ROOT_KEY: ROOT_KEY,
+  IS_PURE_SYMBOL: IS_PURE_SYMBOL,
+  IS_COMPONENT_UPDATING: IS_COMPONENT_UPDATING,
+  PARENT_KEY_SYMBOL: PARENT_KEY_SYMBOL,
+  ATTRIBUTES_KEY_SYMBOL: ATTRIBUTES_KEY_SYMBOL,
+  TEMPLATE_KEY_SYMBOL: TEMPLATE_KEY_SYMBOL
+});
+
+const EACH = 0;
+const IF = 1;
+const SIMPLE = 2;
+const TAG = 3;
+const SLOT = 4;
+var bindingTypes = {
+  EACH,
+  IF,
+  SIMPLE,
+  TAG,
+  SLOT
+};
+
+const ATTRIBUTE = 0;
+const EVENT = 1;
+const TEXT = 2;
+const VALUE = 3;
+var expressionTypes = {
+  ATTRIBUTE,
+  EVENT,
+  TEXT,
+  VALUE
+};
+
+const HEAD_SYMBOL = Symbol('head');
+const TAIL_SYMBOL = Symbol('tail');
+
+/**
+ * Create the <template> fragments text nodes
+ * @return {Object} {{head: Text, tail: Text}}
+ */
+
+function createHeadTailPlaceholders() {
+  const head = document.createTextNode('');
+  const tail = document.createTextNode('');
+  head[HEAD_SYMBOL] = true;
+  tail[TAIL_SYMBOL] = true;
+  return {
+    head,
+    tail
+  };
+}
+
+/**
+ * Create the template meta object in case of <template> fragments
+ * @param   {TemplateChunk} componentTemplate - template chunk object
+ * @returns {Object} the meta property that will be passed to the mount function of the TemplateChunk
+ */
+
+function createTemplateMeta(componentTemplate) {
+  const fragment = componentTemplate.dom.cloneNode(true);
+  const {
+    head,
+    tail
+  } = createHeadTailPlaceholders();
+  return {
+    avoidDOMInjection: true,
+    fragment,
+    head,
+    tail,
+    children: [head, ...Array.from(fragment.childNodes), tail]
+  };
+}
+
+/**
+ * Helper function to set an immutable property
+ * @param   {Object} source - object where the new property will be set
+ * @param   {string} key - object key where the new property will be stored
+ * @param   {*} value - value of the new property
+ * @param   {Object} options - set the propery overriding the default options
+ * @returns {Object} - the original object modified
+ */
+function defineProperty(source, key, value, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  /* eslint-disable fp/no-mutating-methods */
+  Object.defineProperty(source, key, Object.assign({
+    value,
+    enumerable: false,
+    writable: false,
+    configurable: true
+  }, options));
+  /* eslint-enable fp/no-mutating-methods */
+
+  return source;
+}
+/**
+ * Define multiple properties on a target object
+ * @param   {Object} source - object where the new properties will be set
+ * @param   {Object} properties - object containing as key pair the key + value properties
+ * @param   {Object} options - set the propery overriding the default options
+ * @returns {Object} the original object modified
+ */
+
+function defineProperties(source, properties, options) {
+  Object.entries(properties).forEach(_ref => {
+    let [key, value] = _ref;
+    defineProperty(source, key, value, options);
+  });
+  return source;
+}
+/**
+ * Define default properties if they don't exist on the source object
+ * @param   {Object} source - object that will receive the default properties
+ * @param   {Object} defaults - object containing additional optional keys
+ * @returns {Object} the original object received enhanced
+ */
+
+function defineDefaults(source, defaults) {
+  Object.entries(defaults).forEach(_ref2 => {
+    let [key, value] = _ref2;
+    if (!source[key]) source[key] = value;
+  });
+  return source;
+}
+
+/**
+ * Get the current <template> fragment children located in between the head and tail comments
+ * @param {Comment} head - head comment node
+ * @param {Comment} tail - tail comment node
+ * @return {Array[]} children list of the nodes found in this template fragment
+ */
+
+function getFragmentChildren(_ref) {
+  let {
+    head,
+    tail
+  } = _ref;
+  const nodes = walkNodes([head], head.nextSibling, n => n === tail, false);
+  nodes.push(tail);
+  return nodes;
+}
+/**
+ * Recursive function to walk all the <template> children nodes
+ * @param {Array[]} children - children nodes collection
+ * @param {ChildNode} node - current node
+ * @param {Function} check - exit function check
+ * @param {boolean} isFilterActive - filter flag to skip nodes managed by other bindings
+ * @returns {Array[]} children list of the nodes found in this template fragment
+ */
+
+function walkNodes(children, node, check, isFilterActive) {
+  const {
+    nextSibling
+  } = node; // filter tail and head nodes together with all the nodes in between
+  // this is needed only to fix a really ugly edge case https://github.com/riot/riot/issues/2892
+
+  if (!isFilterActive && !node[HEAD_SYMBOL] && !node[TAIL_SYMBOL]) {
+    children.push(node);
+  }
+
+  if (!nextSibling || check(node)) return children;
+  return walkNodes(children, nextSibling, check, // activate the filters to skip nodes between <template> fragments that will be managed by other bindings
+  isFilterActive && !node[TAIL_SYMBOL] || nextSibling[HEAD_SYMBOL]);
+}
+
+/**
+ * Quick type checking
+ * @param   {*} element - anything
+ * @param   {string} type - type definition
+ * @returns {boolean} true if the type corresponds
+ */
+function checkType(element, type) {
+  return typeof element === type;
+}
+/**
+ * Check if an element is part of an svg
+ * @param   {HTMLElement}  el - element to check
+ * @returns {boolean} true if we are in an svg context
+ */
+
+function isSvg(el) {
+  const owner = el.ownerSVGElement;
+  return !!owner || owner === null;
+}
+/**
+ * Check if an element is a template tag
+ * @param   {HTMLElement}  el - element to check
+ * @returns {boolean} true if it's a <template>
+ */
+
+function isTemplate(el) {
+  return el.tagName.toLowerCase() === 'template';
+}
+/**
+ * Check that will be passed if its argument is a function
+ * @param   {*} value - value to check
+ * @returns {boolean} - true if the value is a function
+ */
+
+function isFunction(value) {
+  return checkType(value, 'function');
+}
+/**
+ * Check if a value is a Boolean
+ * @param   {*}  value - anything
+ * @returns {boolean} true only for the value is a boolean
+ */
+
+function isBoolean(value) {
+  return checkType(value, 'boolean');
+}
+/**
+ * Check if a value is an Object
+ * @param   {*}  value - anything
+ * @returns {boolean} true only for the value is an object
+ */
+
+function isObject(value) {
+  return !isNil(value) && value.constructor === Object;
+}
+/**
+ * Check if a value is null or undefined
+ * @param   {*}  value - anything
+ * @returns {boolean} true only for the 'undefined' and 'null' types
+ */
+
+function isNil(value) {
+  return value === null || value === undefined;
+}
+
+/**
+ * ISC License
+ *
+ * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+ * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ */
+// fork of https://github.com/WebReflection/udomdiff version 1.1.0
+// due to https://github.com/WebReflection/udomdiff/pull/2
+
+/* eslint-disable */
+
+/**
+ * @param {Node[]} a The list of current/live children
+ * @param {Node[]} b The list of future children
+ * @param {(entry: Node, action: number) => Node} get
+ * The callback invoked per each entry related DOM operation.
+ * @param {Node} [before] The optional node used as anchor to insert before.
+ * @returns {Node[]} The same list of future children.
+ */
+
+var udomdiff = ((a, b, get, before) => {
+  const bLength = b.length;
+  let aEnd = a.length;
+  let bEnd = bLength;
+  let aStart = 0;
+  let bStart = 0;
+  let map = null;
+
+  while (aStart < aEnd || bStart < bEnd) {
+    // append head, tail, or nodes in between: fast path
+    if (aEnd === aStart) {
+      // we could be in a situation where the rest of nodes that
+      // need to be added are not at the end, and in such case
+      // the node to `insertBefore`, if the index is more than 0
+      // must be retrieved, otherwise it's gonna be the first item.
+      const node = bEnd < bLength ? bStart ? get(b[bStart - 1], -0).nextSibling : get(b[bEnd - bStart], 0) : before;
+
+      while (bStart < bEnd) insertBefore(get(b[bStart++], 1), node);
+    } // remove head or tail: fast path
+    else if (bEnd === bStart) {
+        while (aStart < aEnd) {
+          // remove the node only if it's unknown or not live
+          if (!map || !map.has(a[aStart])) removeChild(get(a[aStart], -1));
+          aStart++;
+        }
+      } // same node: fast path
+      else if (a[aStart] === b[bStart]) {
+          aStart++;
+          bStart++;
+        } // same tail: fast path
+        else if (a[aEnd - 1] === b[bEnd - 1]) {
+            aEnd--;
+            bEnd--;
+          } // The once here single last swap "fast path" has been removed in v1.1.0
+          // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+          // reverse swap: also fast path
+          else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+              // this is a "shrink" operation that could happen in these cases:
+              // [1, 2, 3, 4, 5]
+              // [1, 4, 3, 2, 5]
+              // or asymmetric too
+              // [1, 2, 3, 4, 5]
+              // [1, 2, 3, 5, 6, 4]
+              const node = get(a[--aEnd], -1).nextSibling;
+              insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling);
+              insertBefore(get(b[--bEnd], 1), node); // mark the future index as identical (yeah, it's dirty, but cheap 👍)
+              // The main reason to do this, is that when a[aEnd] will be reached,
+              // the loop will likely be on the fast path, as identical to b[bEnd].
+              // In the best case scenario, the next loop will skip the tail,
+              // but in the worst one, this node will be considered as already
+              // processed, bailing out pretty quickly from the map index check
+
+              a[aEnd] = b[bEnd];
+            } // map based fallback, "slow" path
+            else {
+                // the map requires an O(bEnd - bStart) operation once
+                // to store all future nodes indexes for later purposes.
+                // In the worst case scenario, this is a full O(N) cost,
+                // and such scenario happens at least when all nodes are different,
+                // but also if both first and last items of the lists are different
+                if (!map) {
+                  map = new Map();
+                  let i = bStart;
+
+                  while (i < bEnd) map.set(b[i], i++);
+                } // if it's a future node, hence it needs some handling
+
+
+                if (map.has(a[aStart])) {
+                  // grab the index of such node, 'cause it might have been processed
+                  const index = map.get(a[aStart]); // if it's not already processed, look on demand for the next LCS
+
+                  if (bStart < index && index < bEnd) {
+                    let i = aStart; // counts the amount of nodes that are the same in the future
+
+                    let sequence = 1;
+
+                    while (++i < aEnd && i < bEnd && map.get(a[i]) === index + sequence) sequence++; // effort decision here: if the sequence is longer than replaces
+                    // needed to reach such sequence, which would brings again this loop
+                    // to the fast path, prepend the difference before a sequence,
+                    // and move only the future list index forward, so that aStart
+                    // and bStart will be aligned again, hence on the fast path.
+                    // An example considering aStart and bStart are both 0:
+                    // a: [1, 2, 3, 4]
+                    // b: [7, 1, 2, 3, 6]
+                    // this would place 7 before 1 and, from that time on, 1, 2, and 3
+                    // will be processed at zero cost
+
+
+                    if (sequence > index - bStart) {
+                      const node = get(a[aStart], 0);
+
+                      while (bStart < index) insertBefore(get(b[bStart++], 1), node);
+                    } // if the effort wasn't good enough, fallback to a replace,
+                    // moving both source and target indexes forward, hoping that some
+                    // similar node will be found later on, to go back to the fast path
+                    else {
+                        replaceChild(get(b[bStart++], 1), get(a[aStart++], -1));
+                      }
+                  } // otherwise move the source forward, 'cause there's nothing to do
+                  else aStart++;
+                } // this node has no meaning in the future list, so it's more than safe
+                // to remove it, and check the next live node out instead, meaning
+                // that only the live list index should be forwarded
+                else removeChild(get(a[aStart++], -1));
+              }
+  }
+
+  return b;
+});
+
+const UNMOUNT_SCOPE = Symbol('unmount');
+const EachBinding = {
+  // dynamic binding properties
+  // childrenMap: null,
+  // node: null,
+  // root: null,
+  // condition: null,
+  // evaluate: null,
+  // template: null,
+  // isTemplateTag: false,
+  nodes: [],
+
+  // getKey: null,
+  // indexName: null,
+  // itemName: null,
+  // afterPlaceholder: null,
+  // placeholder: null,
+  // API methods
+  mount(scope, parentScope) {
+    return this.update(scope, parentScope);
+  },
+
+  update(scope, parentScope) {
+    const {
+      placeholder,
+      nodes,
+      childrenMap
+    } = this;
+    const collection = scope === UNMOUNT_SCOPE ? null : this.evaluate(scope);
+    const items = collection ? Array.from(collection) : []; // prepare the diffing
+
+    const {
+      newChildrenMap,
+      batches,
+      futureNodes
+    } = createPatch(items, scope, parentScope, this); // patch the DOM only if there are new nodes
+
+    udomdiff(nodes, futureNodes, patch(Array.from(childrenMap.values()), parentScope), placeholder); // trigger the mounts and the updates
+
+    batches.forEach(fn => fn()); // update the children map
+
+    this.childrenMap = newChildrenMap;
+    this.nodes = futureNodes; // make sure that the loop edge nodes are marked
+
+    markEdgeNodes(this.nodes);
+    return this;
+  },
+
+  unmount(scope, parentScope) {
+    this.update(UNMOUNT_SCOPE, parentScope);
+    return this;
+  }
+
+};
+/**
+ * Patch the DOM while diffing
+ * @param   {any[]} redundant - list of all the children (template, nodes, context) added via each
+ * @param   {*} parentScope - scope of the parent template
+ * @returns {Function} patch function used by domdiff
+ */
+
+function patch(redundant, parentScope) {
+  return (item, info) => {
+    if (info < 0) {
+      // get the last element added to the childrenMap saved previously
+      const element = redundant[redundant.length - 1];
+
+      if (element) {
+        // get the nodes and the template in stored in the last child of the childrenMap
+        const {
+          template,
+          nodes,
+          context
+        } = element; // remove the last node (notice <template> tags might have more children nodes)
+
+        nodes.pop(); // notice that we pass null as last argument because
+        // the root node and its children will be removed by domdiff
+
+        if (!nodes.length) {
+          // we have cleared all the children nodes and we can unmount this template
+          redundant.pop();
+          template.unmount(context, parentScope, null);
+        }
+      }
+    }
+
+    return item;
+  };
+}
+/**
+ * Check whether a template must be filtered from a loop
+ * @param   {Function} condition - filter function
+ * @param   {Object} context - argument passed to the filter function
+ * @returns {boolean} true if this item should be skipped
+ */
+
+
+function mustFilterItem(condition, context) {
+  return condition ? !condition(context) : false;
+}
+/**
+ * Extend the scope of the looped template
+ * @param   {Object} scope - current template scope
+ * @param   {Object} options - options
+ * @param   {string} options.itemName - key to identify the looped item in the new context
+ * @param   {string} options.indexName - key to identify the index of the looped item
+ * @param   {number} options.index - current index
+ * @param   {*} options.item - collection item looped
+ * @returns {Object} enhanced scope object
+ */
+
+
+function extendScope(scope, _ref) {
+  let {
+    itemName,
+    indexName,
+    index,
+    item
+  } = _ref;
+  defineProperty(scope, itemName, item);
+  if (indexName) defineProperty(scope, indexName, index);
+  return scope;
+}
+/**
+ * Mark the first and last nodes in order to ignore them in case we need to retrieve the <template> fragment nodes
+ * @param {Array[]} nodes - each binding nodes list
+ * @returns {undefined} void function
+ */
+
+
+function markEdgeNodes(nodes) {
+  const first = nodes[0];
+  const last = nodes[nodes.length - 1];
+  if (first) first[HEAD_SYMBOL] = true;
+  if (last) last[TAIL_SYMBOL] = true;
+}
+/**
+ * Loop the current template items
+ * @param   {Array} items - expression collection value
+ * @param   {*} scope - template scope
+ * @param   {*} parentScope - scope of the parent template
+ * @param   {EachBinding} binding - each binding object instance
+ * @returns {Object} data
+ * @returns {Map} data.newChildrenMap - a Map containing the new children template structure
+ * @returns {Array} data.batches - array containing the template lifecycle functions to trigger
+ * @returns {Array} data.futureNodes - array containing the nodes we need to diff
+ */
+
+
+function createPatch(items, scope, parentScope, binding) {
+  const {
+    condition,
+    template,
+    childrenMap,
+    itemName,
+    getKey,
+    indexName,
+    root,
+    isTemplateTag
+  } = binding;
+  const newChildrenMap = new Map();
+  const batches = [];
+  const futureNodes = [];
+  items.forEach((item, index) => {
+    const context = extendScope(Object.create(scope), {
+      itemName,
+      indexName,
+      index,
+      item
+    });
+    const key = getKey ? getKey(context) : index;
+    const oldItem = childrenMap.get(key);
+    const nodes = [];
+
+    if (mustFilterItem(condition, context)) {
+      return;
+    }
+
+    const mustMount = !oldItem;
+    const componentTemplate = oldItem ? oldItem.template : template.clone();
+    const el = componentTemplate.el || root.cloneNode();
+    const meta = isTemplateTag && mustMount ? createTemplateMeta(componentTemplate) : componentTemplate.meta;
+
+    if (mustMount) {
+      batches.push(() => componentTemplate.mount(el, context, parentScope, meta));
+    } else {
+      batches.push(() => componentTemplate.update(context, parentScope));
+    } // create the collection of nodes to update or to add
+    // in case of template tags we need to add all its children nodes
+
+
+    if (isTemplateTag) {
+      nodes.push(...(mustMount ? meta.children : getFragmentChildren(meta)));
+    } else {
+      nodes.push(el);
+    } // delete the old item from the children map
+
+
+    childrenMap.delete(key);
+    futureNodes.push(...nodes); // update the children map
+
+    newChildrenMap.set(key, {
+      nodes,
+      template: componentTemplate,
+      context,
+      index
+    });
+  });
+  return {
+    newChildrenMap,
+    batches,
+    futureNodes
+  };
+}
+
+function create$6(node, _ref2) {
+  let {
+    evaluate,
+    condition,
+    itemName,
+    indexName,
+    getKey,
+    template
+  } = _ref2;
+  const placeholder = document.createTextNode('');
+  const root = node.cloneNode();
+  insertBefore(placeholder, node);
+  removeChild(node);
+  return Object.assign({}, EachBinding, {
+    childrenMap: new Map(),
+    node,
+    root,
+    condition,
+    evaluate,
+    isTemplateTag: isTemplate(root),
+    template: template.createDOM(node),
+    getKey,
+    indexName,
+    itemName,
+    placeholder
+  });
+}
+
+/**
+ * Binding responsible for the `if` directive
+ */
+
+const IfBinding = {
+  // dynamic binding properties
+  // node: null,
+  // evaluate: null,
+  // isTemplateTag: false,
+  // placeholder: null,
+  // template: null,
+  // API methods
+  mount(scope, parentScope) {
+    return this.update(scope, parentScope);
+  },
+
+  update(scope, parentScope) {
+    const value = !!this.evaluate(scope);
+    const mustMount = !this.value && value;
+    const mustUnmount = this.value && !value;
+
+    const mount = () => {
+      const pristine = this.node.cloneNode();
+      insertBefore(pristine, this.placeholder);
+      this.template = this.template.clone();
+      this.template.mount(pristine, scope, parentScope);
+    };
+
+    switch (true) {
+      case mustMount:
+        mount();
+        break;
+
+      case mustUnmount:
+        this.unmount(scope);
+        break;
+
+      default:
+        if (value) this.template.update(scope, parentScope);
+    }
+
+    this.value = value;
+    return this;
+  },
+
+  unmount(scope, parentScope) {
+    this.template.unmount(scope, parentScope, true);
+    return this;
+  }
+
+};
+function create$5(node, _ref) {
+  let {
+    evaluate,
+    template
+  } = _ref;
+  const placeholder = document.createTextNode('');
+  insertBefore(placeholder, node);
+  removeChild(node);
+  return Object.assign({}, IfBinding, {
+    node,
+    evaluate,
+    placeholder,
+    template: template.createDOM(node)
+  });
+}
+
+/**
+ * Throw an error with a descriptive message
+ * @param   { string } message - error message
+ * @returns { undefined } hoppla.. at this point the program should stop working
+ */
+
+function panic(message) {
+  throw new Error(message);
+}
+/**
+ * Returns the memoized (cached) function.
+ * // borrowed from https://www.30secondsofcode.org/js/s/memoize
+ * @param {Function} fn - function to memoize
+ * @returns {Function} memoize function
+ */
+
+function memoize(fn) {
+  const cache = new Map();
+
+  const cached = val => {
+    return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val);
+  };
+
+  cached.cache = cache;
+  return cached;
+}
+/**
+ * Evaluate a list of attribute expressions
+ * @param   {Array} attributes - attribute expressions generated by the riot compiler
+ * @returns {Object} key value pairs with the result of the computation
+ */
+
+function evaluateAttributeExpressions(attributes) {
+  return attributes.reduce((acc, attribute) => {
+    const {
+      value,
+      type
+    } = attribute;
+
+    switch (true) {
+      // spread attribute
+      case !attribute.name && type === ATTRIBUTE:
+        return Object.assign({}, acc, value);
+      // value attribute
+
+      case type === VALUE:
+        acc.value = attribute.value;
+        break;
+      // normal attributes
+
+      default:
+        acc[dashToCamelCase(attribute.name)] = attribute.value;
+    }
+
+    return acc;
+  }, {});
+}
+
+const ElementProto = typeof Element === 'undefined' ? {} : Element.prototype;
+const isNativeHtmlProperty = memoize(name => ElementProto.hasOwnProperty(name)); // eslint-disable-line
+
+/**
+ * Add all the attributes provided
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} attributes - object containing the attributes names and values
+ * @returns {undefined} sorry it's a void function :(
+ */
+
+function setAllAttributes(node, attributes) {
+  Object.entries(attributes).forEach(_ref => {
+    let [name, value] = _ref;
+    return attributeExpression(node, {
+      name
+    }, value);
+  });
+}
+/**
+ * Remove all the attributes provided
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} newAttributes - object containing all the new attribute names
+ * @param   {Object} oldAttributes - object containing all the old attribute names
+ * @returns {undefined} sorry it's a void function :(
+ */
+
+
+function removeAllAttributes(node, newAttributes, oldAttributes) {
+  const newKeys = newAttributes ? Object.keys(newAttributes) : [];
+  Object.keys(oldAttributes).filter(name => !newKeys.includes(name)).forEach(attribute => node.removeAttribute(attribute));
+}
+/**
+ * Check whether the attribute value can be rendered
+ * @param {*} value - expression value
+ * @returns {boolean} true if we can render this attribute value
+ */
+
+
+function canRenderAttribute(value) {
+  return value === true || ['string', 'number'].includes(typeof value);
+}
+/**
+ * Check whether the attribute should be removed
+ * @param {*} value - expression value
+ * @returns {boolean} boolean - true if the attribute can be removed}
+ */
+
+
+function shouldRemoveAttribute(value) {
+  return !value && value !== 0;
+}
+/**
+ * This methods handles the DOM attributes updates
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} expression - expression object
+ * @param   {string} expression.name - attribute name
+ * @param   {*} value - new expression value
+ * @param   {*} oldValue - the old expression cached value
+ * @returns {undefined}
+ */
+
+
+function attributeExpression(node, _ref2, value, oldValue) {
+  let {
+    name
+  } = _ref2;
+
+  // is it a spread operator? {...attributes}
+  if (!name) {
+    if (oldValue) {
+      // remove all the old attributes
+      removeAllAttributes(node, value, oldValue);
+    } // is the value still truthy?
+
+
+    if (value) {
+      setAllAttributes(node, value);
+    }
+
+    return;
+  } // handle boolean attributes
+
+
+  if (!isNativeHtmlProperty(name) && (isBoolean(value) || isObject(value) || isFunction(value))) {
+    node[name] = value;
+  }
+
+  if (shouldRemoveAttribute(value)) {
+    node.removeAttribute(name);
+  } else if (canRenderAttribute(value)) {
+    node.setAttribute(name, normalizeValue(name, value));
+  }
+}
+/**
+ * Get the value as string
+ * @param   {string} name - attribute name
+ * @param   {*} value - user input value
+ * @returns {string} input value as string
+ */
+
+function normalizeValue(name, value) {
+  // be sure that expressions like selected={ true } will be always rendered as selected='selected'
+  return value === true ? name : value;
+}
+
+const RE_EVENTS_PREFIX = /^on/;
+
+const getCallbackAndOptions = value => Array.isArray(value) ? value : [value, false]; // see also https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
+
+
+const EventListener = {
+  handleEvent(event) {
+    this[event.type](event);
+  }
+
+};
+const ListenersWeakMap = new WeakMap();
+
+const createListener = node => {
+  const listener = Object.create(EventListener);
+  ListenersWeakMap.set(node, listener);
+  return listener;
+};
+/**
+ * Set a new event listener
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} expression - expression object
+ * @param   {string} expression.name - event name
+ * @param   {*} value - new expression value
+ * @returns {value} the callback just received
+ */
+
+
+function eventExpression(node, _ref, value) {
+  let {
+    name
+  } = _ref;
+  const normalizedEventName = name.replace(RE_EVENTS_PREFIX, '');
+  const eventListener = ListenersWeakMap.get(node) || createListener(node);
+  const [callback, options] = getCallbackAndOptions(value);
+  const handler = eventListener[normalizedEventName];
+  const mustRemoveEvent = handler && !callback;
+  const mustAddEvent = callback && !handler;
+
+  if (mustRemoveEvent) {
+    node.removeEventListener(normalizedEventName, eventListener);
+  }
+
+  if (mustAddEvent) {
+    node.addEventListener(normalizedEventName, eventListener, options);
+  }
+
+  eventListener[normalizedEventName] = callback;
+}
+
+/**
+ * Normalize the user value in order to render a empty string in case of falsy values
+ * @param   {*} value - user input value
+ * @returns {string} hopefully a string
+ */
+
+function normalizeStringValue(value) {
+  return isNil(value) ? '' : value;
+}
+
+/**
+ * Get the the target text node to update or create one from of a comment node
+ * @param   {HTMLElement} node - any html element containing childNodes
+ * @param   {number} childNodeIndex - index of the text node in the childNodes list
+ * @returns {Text} the text node to update
+ */
+
+const getTextNode = (node, childNodeIndex) => {
+  const target = node.childNodes[childNodeIndex];
+
+  if (target.nodeType === Node.COMMENT_NODE) {
+    const textNode = document.createTextNode('');
+    node.replaceChild(textNode, target);
+    return textNode;
+  }
+
+  return target;
+};
+/**
+ * This methods handles a simple text expression update
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} data - expression object
+ * @param   {*} value - new expression value
+ * @returns {undefined}
+ */
+
+function textExpression(node, data, value) {
+  node.data = normalizeStringValue(value);
+}
+
+/**
+ * This methods handles the input fileds value updates
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} expression - expression object
+ * @param   {*} value - new expression value
+ * @returns {undefined}
+ */
+
+function valueExpression(node, expression, value) {
+  node.value = normalizeStringValue(value);
+}
+
+var expressions = {
+  [ATTRIBUTE]: attributeExpression,
+  [EVENT]: eventExpression,
+  [TEXT]: textExpression,
+  [VALUE]: valueExpression
+};
+
+const Expression = {
+  // Static props
+  // node: null,
+  // value: null,
+  // API methods
+
+  /**
+   * Mount the expression evaluating its initial value
+   * @param   {*} scope - argument passed to the expression to evaluate its current values
+   * @returns {Expression} self
+   */
+  mount(scope) {
+    // hopefully a pure function
+    this.value = this.evaluate(scope); // IO() DOM updates
+
+    apply(this, this.value);
+    return this;
+  },
+
+  /**
+   * Update the expression if its value changed
+   * @param   {*} scope - argument passed to the expression to evaluate its current values
+   * @returns {Expression} self
+   */
+  update(scope) {
+    // pure function
+    const value = this.evaluate(scope);
+
+    if (this.value !== value) {
+      // IO() DOM updates
+      apply(this, value);
+      this.value = value;
+    }
+
+    return this;
+  },
+
+  /**
+   * Expression teardown method
+   * @returns {Expression} self
+   */
+  unmount() {
+    // unmount only the event handling expressions
+    if (this.type === EVENT) apply(this, null);
+    return this;
+  }
+
+};
+/**
+ * IO() function to handle the DOM updates
+ * @param {Expression} expression - expression object
+ * @param {*} value - current expression value
+ * @returns {undefined}
+ */
+
+function apply(expression, value) {
+  return expressions[expression.type](expression.node, expression, value, expression.value);
+}
+
+function create$4(node, data) {
+  return Object.assign({}, Expression, data, {
+    node: data.type === TEXT ? getTextNode(node, data.childNodeIndex) : node
+  });
+}
+
+/**
+ * Create a flat object having as keys a list of methods that if dispatched will propagate
+ * on the whole collection
+ * @param   {Array} collection - collection to iterate
+ * @param   {Array<string>} methods - methods to execute on each item of the collection
+ * @param   {*} context - context returned by the new methods created
+ * @returns {Object} a new object to simplify the the nested methods dispatching
+ */
+function flattenCollectionMethods(collection, methods, context) {
+  return methods.reduce((acc, method) => {
+    return Object.assign({}, acc, {
+      [method]: scope => {
+        return collection.map(item => item[method](scope)) && context;
+      }
+    });
+  }, {});
+}
+
+function create$3(node, _ref) {
+  let {
+    expressions
+  } = _ref;
+  return Object.assign({}, flattenCollectionMethods(expressions.map(expression => create$4(node, expression)), ['mount', 'update', 'unmount']));
+}
+
+function extendParentScope(attributes, scope, parentScope) {
+  if (!attributes || !attributes.length) return parentScope;
+  const expressions = attributes.map(attr => Object.assign({}, attr, {
+    value: attr.evaluate(scope)
+  }));
+  return Object.assign(Object.create(parentScope || null), evaluateAttributeExpressions(expressions));
+} // this function is only meant to fix an edge case
+// https://github.com/riot/riot/issues/2842
+
+
+const getRealParent = (scope, parentScope) => scope[PARENT_KEY_SYMBOL] || parentScope;
+
+const SlotBinding = {
+  // dynamic binding properties
+  // node: null,
+  // name: null,
+  attributes: [],
+
+  // template: null,
+  getTemplateScope(scope, parentScope) {
+    return extendParentScope(this.attributes, scope, parentScope);
+  },
+
+  // API methods
+  mount(scope, parentScope) {
+    const templateData = scope.slots ? scope.slots.find(_ref => {
+      let {
+        id
+      } = _ref;
+      return id === this.name;
+    }) : false;
+    const {
+      parentNode
+    } = this.node;
+    const realParent = getRealParent(scope, parentScope);
+    this.template = templateData && create(templateData.html, templateData.bindings).createDOM(parentNode);
+
+    if (this.template) {
+      cleanNode(this.node);
+      this.template.mount(this.node, this.getTemplateScope(scope, realParent), realParent);
+      this.template.children = Array.from(this.node.childNodes);
+    }
+
+    moveSlotInnerContent(this.node);
+    removeChild(this.node);
+    return this;
+  },
+
+  update(scope, parentScope) {
+    if (this.template) {
+      const realParent = getRealParent(scope, parentScope);
+      this.template.update(this.getTemplateScope(scope, realParent), realParent);
+    }
+
+    return this;
+  },
+
+  unmount(scope, parentScope, mustRemoveRoot) {
+    if (this.template) {
+      this.template.unmount(this.getTemplateScope(scope, parentScope), null, mustRemoveRoot);
+    }
+
+    return this;
+  }
+
+};
+/**
+ * Move the inner content of the slots outside of them
+ * @param   {HTMLElement} slot - slot node
+ * @returns {undefined} it's a void method ¯\_(ツ)_/¯
+ */
+
+function moveSlotInnerContent(slot) {
+  const child = slot && slot.firstChild;
+  if (!child) return;
+  insertBefore(child, slot);
+  moveSlotInnerContent(slot);
+}
+/**
+ * Create a single slot binding
+ * @param   {HTMLElement} node - slot node
+ * @param   {string} name - slot id
+ * @param   {AttributeExpressionData[]} attributes - slot attributes
+ * @returns {Object} Slot binding object
+ */
+
+
+function createSlot(node, _ref2) {
+  let {
+    name,
+    attributes
+  } = _ref2;
+  return Object.assign({}, SlotBinding, {
+    attributes,
+    node,
+    name
+  });
+}
+
+/**
+ * Create a new tag object if it was registered before, otherwise fallback to the simple
+ * template chunk
+ * @param   {Function} component - component factory function
+ * @param   {Array<Object>} slots - array containing the slots markup
+ * @param   {Array} attributes - dynamic attributes that will be received by the tag element
+ * @returns {TagImplementation|TemplateChunk} a tag implementation or a template chunk as fallback
+ */
+
+function getTag(component, slots, attributes) {
+  if (slots === void 0) {
+    slots = [];
+  }
+
+  if (attributes === void 0) {
+    attributes = [];
+  }
+
+  // if this tag was registered before we will return its implementation
+  if (component) {
+    return component({
+      slots,
+      attributes
+    });
+  } // otherwise we return a template chunk
+
+
+  return create(slotsToMarkup(slots), [...slotBindings(slots), {
+    // the attributes should be registered as binding
+    // if we fallback to a normal template chunk
+    expressions: attributes.map(attr => {
+      return Object.assign({
+        type: ATTRIBUTE
+      }, attr);
+    })
+  }]);
+}
+/**
+ * Merge all the slots bindings into a single array
+ * @param   {Array<Object>} slots - slots collection
+ * @returns {Array<Bindings>} flatten bindings array
+ */
+
+
+function slotBindings(slots) {
+  return slots.reduce((acc, _ref) => {
+    let {
+      bindings
+    } = _ref;
+    return acc.concat(bindings);
+  }, []);
+}
+/**
+ * Merge all the slots together in a single markup string
+ * @param   {Array<Object>} slots - slots collection
+ * @returns {string} markup of all the slots in a single string
+ */
+
+
+function slotsToMarkup(slots) {
+  return slots.reduce((acc, slot) => {
+    return acc + slot.html;
+  }, '');
+}
+
+const TagBinding = {
+  // dynamic binding properties
+  // node: null,
+  // evaluate: null,
+  // name: null,
+  // slots: null,
+  // tag: null,
+  // attributes: null,
+  // getComponent: null,
+  mount(scope) {
+    return this.update(scope);
+  },
+
+  update(scope, parentScope) {
+    const name = this.evaluate(scope); // simple update
+
+    if (name && name === this.name) {
+      this.tag.update(scope);
+    } else {
+      // unmount the old tag if it exists
+      this.unmount(scope, parentScope, true); // mount the new tag
+
+      this.name = name;
+      this.tag = getTag(this.getComponent(name), this.slots, this.attributes);
+      this.tag.mount(this.node, scope);
+    }
+
+    return this;
+  },
+
+  unmount(scope, parentScope, keepRootTag) {
+    if (this.tag) {
+      // keep the root tag
+      this.tag.unmount(keepRootTag);
+    }
+
+    return this;
+  }
+
+};
+function create$2(node, _ref2) {
+  let {
+    evaluate,
+    getComponent,
+    slots,
+    attributes
+  } = _ref2;
+  return Object.assign({}, TagBinding, {
+    node,
+    evaluate,
+    slots,
+    attributes,
+    getComponent
+  });
+}
+
+var bindings = {
+  [IF]: create$5,
+  [SIMPLE]: create$3,
+  [EACH]: create$6,
+  [TAG]: create$2,
+  [SLOT]: createSlot
+};
+
+/**
+ * Text expressions in a template tag will get childNodeIndex value normalized
+ * depending on the position of the <template> tag offset
+ * @param   {Expression[]} expressions - riot expressions array
+ * @param   {number} textExpressionsOffset - offset of the <template> tag
+ * @returns {Expression[]} expressions containing the text expressions normalized
+ */
+
+function fixTextExpressionsOffset(expressions, textExpressionsOffset) {
+  return expressions.map(e => e.type === TEXT ? Object.assign({}, e, {
+    childNodeIndex: e.childNodeIndex + textExpressionsOffset
+  }) : e);
+}
+/**
+ * Bind a new expression object to a DOM node
+ * @param   {HTMLElement} root - DOM node where to bind the expression
+ * @param   {TagBindingData} binding - binding data
+ * @param   {number|null} templateTagOffset - if it's defined we need to fix the text expressions childNodeIndex offset
+ * @returns {Binding} Binding object
+ */
+
+
+function create$1(root, binding, templateTagOffset) {
+  const {
+    selector,
+    type,
+    redundantAttribute,
+    expressions
+  } = binding; // find the node to apply the bindings
+
+  const node = selector ? root.querySelector(selector) : root; // remove eventually additional attributes created only to select this node
+
+  if (redundantAttribute) node.removeAttribute(redundantAttribute);
+  const bindingExpressions = expressions || []; // init the binding
+
+  return (bindings[type] || bindings[SIMPLE])(node, Object.assign({}, binding, {
+    expressions: templateTagOffset && !selector ? fixTextExpressionsOffset(bindingExpressions, templateTagOffset) : bindingExpressions
+  }));
+}
+
+function createHTMLTree(html, root) {
+  const template = isTemplate(root) ? root : document.createElement('template');
+  template.innerHTML = html;
+  return template.content;
+} // for svg nodes we need a bit more work
+
+
+function createSVGTree(html, container) {
+  // create the SVGNode
+  const svgNode = container.ownerDocument.importNode(new window.DOMParser().parseFromString(`<svg xmlns="http://www.w3.org/2000/svg">${html}</svg>`, 'application/xml').documentElement, true);
+  return svgNode;
+}
+/**
+ * Create the DOM that will be injected
+ * @param {Object} root - DOM node to find out the context where the fragment will be created
+ * @param   {string} html - DOM to create as string
+ * @returns {HTMLDocumentFragment|HTMLElement} a new html fragment
+ */
+
+
+function createDOMTree(root, html) {
+  if (isSvg(root)) return createSVGTree(html, root);
+  return createHTMLTree(html, root);
+}
+
+/**
+ * Inject the DOM tree into a target node
+ * @param   {HTMLElement} el - target element
+ * @param   {DocumentFragment|SVGElement} dom - dom tree to inject
+ * @returns {undefined}
+ */
+
+function injectDOM(el, dom) {
+  switch (true) {
+    case isSvg(el):
+      moveChildren(dom, el);
+      break;
+
+    case isTemplate(el):
+      el.parentNode.replaceChild(dom, el);
+      break;
+
+    default:
+      el.appendChild(dom);
+  }
+}
+
+/**
+ * Create the Template DOM skeleton
+ * @param   {HTMLElement} el - root node where the DOM will be injected
+ * @param   {string|HTMLElement} html - HTML markup or HTMLElement that will be injected into the root node
+ * @returns {?DocumentFragment} fragment that will be injected into the root node
+ */
+
+function createTemplateDOM(el, html) {
+  return html && (typeof html === 'string' ? createDOMTree(el, html) : html);
+}
+/**
+ * Get the offset of the <template> tag
+ * @param {HTMLElement} parentNode - template tag parent node
+ * @param {HTMLElement} el - the template tag we want to render
+ * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+ * @returns {number} offset of the <template> tag calculated from its siblings DOM nodes
+ */
+
+
+function getTemplateTagOffset(parentNode, el, meta) {
+  const siblings = Array.from(parentNode.childNodes);
+  return Math.max(siblings.indexOf(el), siblings.indexOf(meta.head) + 1, 0);
+}
+/**
+ * Template Chunk model
+ * @type {Object}
+ */
+
+
+const TemplateChunk = Object.freeze({
+  // Static props
+  // bindings: null,
+  // bindingsData: null,
+  // html: null,
+  // isTemplateTag: false,
+  // fragment: null,
+  // children: null,
+  // dom: null,
+  // el: null,
+
+  /**
+   * Create the template DOM structure that will be cloned on each mount
+   * @param   {HTMLElement} el - the root node
+   * @returns {TemplateChunk} self
+   */
+  createDOM(el) {
+    // make sure that the DOM gets created before cloning the template
+    this.dom = this.dom || createTemplateDOM(el, this.html) || document.createDocumentFragment();
+    return this;
+  },
+
+  // API methods
+
+  /**
+   * Attach the template to a DOM node
+   * @param   {HTMLElement} el - target DOM node
+   * @param   {*} scope - template data
+   * @param   {*} parentScope - scope of the parent template tag
+   * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+   * @returns {TemplateChunk} self
+   */
+  mount(el, scope, parentScope, meta) {
+    if (meta === void 0) {
+      meta = {};
+    }
+
+    if (!el) throw new Error('Please provide DOM node to mount properly your template');
+    if (this.el) this.unmount(scope); // <template> tags require a bit more work
+    // the template fragment might be already created via meta outside of this call
+
+    const {
+      fragment,
+      children,
+      avoidDOMInjection
+    } = meta; // <template> bindings of course can not have a root element
+    // so we check the parent node to set the query selector bindings
+
+    const {
+      parentNode
+    } = children ? children[0] : el;
+    const isTemplateTag = isTemplate(el);
+    const templateTagOffset = isTemplateTag ? getTemplateTagOffset(parentNode, el, meta) : null; // create the DOM if it wasn't created before
+
+    this.createDOM(el); // create the DOM of this template cloning the original DOM structure stored in this instance
+    // notice that if a documentFragment was passed (via meta) we will use it instead
+
+    const cloneNode = fragment || this.dom.cloneNode(true); // store root node
+    // notice that for template tags the root note will be the parent tag
+
+    this.el = isTemplateTag ? parentNode : el; // create the children array only for the <template> fragments
+
+    this.children = isTemplateTag ? children || Array.from(cloneNode.childNodes) : null; // inject the DOM into the el only if a fragment is available
+
+    if (!avoidDOMInjection && cloneNode) injectDOM(el, cloneNode); // create the bindings
+
+    this.bindings = this.bindingsData.map(binding => create$1(this.el, binding, templateTagOffset));
+    this.bindings.forEach(b => b.mount(scope, parentScope)); // store the template meta properties
+
+    this.meta = meta;
+    return this;
+  },
+
+  /**
+   * Update the template with fresh data
+   * @param   {*} scope - template data
+   * @param   {*} parentScope - scope of the parent template tag
+   * @returns {TemplateChunk} self
+   */
+  update(scope, parentScope) {
+    this.bindings.forEach(b => b.update(scope, parentScope));
+    return this;
+  },
+
+  /**
+   * Remove the template from the node where it was initially mounted
+   * @param   {*} scope - template data
+   * @param   {*} parentScope - scope of the parent template tag
+   * @param   {boolean|null} mustRemoveRoot - if true remove the root element,
+   * if false or undefined clean the root tag content, if null don't touch the DOM
+   * @returns {TemplateChunk} self
+   */
+  unmount(scope, parentScope, mustRemoveRoot) {
+    if (mustRemoveRoot === void 0) {
+      mustRemoveRoot = false;
+    }
+
+    const el = this.el;
+
+    if (!el) {
+      return this;
+    }
+
+    this.bindings.forEach(b => b.unmount(scope, parentScope, mustRemoveRoot));
+
+    switch (true) {
+      // pure components should handle the DOM unmount updates by themselves
+      // for mustRemoveRoot === null don't touch the DOM
+      case el[IS_PURE_SYMBOL] || mustRemoveRoot === null:
+        break;
+      // if children are declared, clear them
+      // applicable for <template> and <slot/> bindings
+
+      case Array.isArray(this.children):
+        clearChildren(this.children);
+        break;
+      // clean the node children only
+
+      case !mustRemoveRoot:
+        cleanNode(el);
+        break;
+      // remove the root node only if the mustRemoveRoot is truly
+
+      case !!mustRemoveRoot:
+        removeChild(el);
+        break;
+    }
+
+    this.el = null;
+    return this;
+  },
+
+  /**
+   * Clone the template chunk
+   * @returns {TemplateChunk} a clone of this object resetting the this.el property
+   */
+  clone() {
+    return Object.assign({}, this, {
+      meta: {},
+      el: null
+    });
+  }
+
+});
+/**
+ * Create a template chunk wiring also the bindings
+ * @param   {string|HTMLElement} html - template string
+ * @param   {BindingData[]} bindings - bindings collection
+ * @returns {TemplateChunk} a new TemplateChunk copy
+ */
+
+function create(html, bindings) {
+  if (bindings === void 0) {
+    bindings = [];
+  }
+
+  return Object.assign({}, TemplateChunk, {
+    html,
+    bindingsData: bindings
+  });
+}
+
+/**
+ * Method used to bind expressions to a DOM node
+ * @param   {string|HTMLElement} html - your static template html structure
+ * @param   {Array} bindings - list of the expressions to bind to update the markup
+ * @returns {TemplateChunk} a new TemplateChunk object having the `update`,`mount`, `unmount` and `clone` methods
+ *
+ * @example
+ *
+ * riotDOMBindings
+ *  .template(
+ *   `<div expr0><!----></div><div><p expr1><!----><section expr2></section></p>`,
+ *   [
+ *     {
+ *       selector: '[expr0]',
+ *       redundantAttribute: 'expr0',
+ *       expressions: [
+ *         {
+ *           type: expressionTypes.TEXT,
+ *           childNodeIndex: 0,
+ *           evaluate(scope) {
+ *             return scope.time;
+ *           },
+ *         },
+ *       ],
+ *     },
+ *     {
+ *       selector: '[expr1]',
+ *       redundantAttribute: 'expr1',
+ *       expressions: [
+ *         {
+ *           type: expressionTypes.TEXT,
+ *           childNodeIndex: 0,
+ *           evaluate(scope) {
+ *             return scope.name;
+ *           },
+ *         },
+ *         {
+ *           type: 'attribute',
+ *           name: 'style',
+ *           evaluate(scope) {
+ *             return scope.style;
+ *           },
+ *         },
+ *       ],
+ *     },
+ *     {
+ *       selector: '[expr2]',
+ *       redundantAttribute: 'expr2',
+ *       type: bindingTypes.IF,
+ *       evaluate(scope) {
+ *         return scope.isVisible;
+ *       },
+ *       template: riotDOMBindings.template('hello there'),
+ *     },
+ *   ]
+ * )
+ */
+
+var DOMBindings = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  template: create,
+  createBinding: create$1,
+  createExpression: create$4,
+  bindingTypes: bindingTypes,
+  expressionTypes: expressionTypes
+});
+
+function noop() {
+  return this;
+}
+/**
+ * Autobind the methods of a source object to itself
+ * @param   {Object} source - probably a riot tag instance
+ * @param   {Array<string>} methods - list of the methods to autobind
+ * @returns {Object} the original object received
+ */
+
+function autobindMethods(source, methods) {
+  methods.forEach(method => {
+    source[method] = source[method].bind(source);
+  });
+  return source;
+}
+/**
+ * Call the first argument received only if it's a function otherwise return it as it is
+ * @param   {*} source - anything
+ * @returns {*} anything
+ */
+
+function callOrAssign(source) {
+  return isFunction(source) ? source.prototype && source.prototype.constructor ? new source() : source() : source;
+}
+
+/**
+ * Converts any DOM node/s to a loopable array
+ * @param   { HTMLElement|NodeList } els - single html element or a node list
+ * @returns { Array } always a loopable object
+ */
+function domToArray(els) {
+  // can this object be already looped?
+  if (!Array.isArray(els)) {
+    // is it a node list?
+    if (/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(els)) && typeof els.length === 'number') return Array.from(els);else // if it's a single node
+      // it will be returned as "array" with one single entry
+      return [els];
+  } // this object could be looped out of the box
+
+
+  return els;
+}
+
+/**
+ * Simple helper to find DOM nodes returning them as array like loopable object
+ * @param   { string|DOMNodeList } selector - either the query or the DOM nodes to arraify
+ * @param   { HTMLElement }        ctx      - context defining where the query will search for the DOM nodes
+ * @returns { Array } DOM nodes found as array
+ */
+
+function $(selector, ctx) {
+  return domToArray(typeof selector === 'string' ? (ctx || document).querySelectorAll(selector) : selector);
+}
+
+/**
+ * Normalize the return values, in case of a single value we avoid to return an array
+ * @param   { Array } values - list of values we want to return
+ * @returns { Array|string|boolean } either the whole list of values or the single one found
+ * @private
+ */
+
+const normalize = values => values.length === 1 ? values[0] : values;
+/**
+ * Parse all the nodes received to get/remove/check their attributes
+ * @param   { HTMLElement|NodeList|Array } els    - DOM node/s to parse
+ * @param   { string|Array }               name   - name or list of attributes
+ * @param   { string }                     method - method that will be used to parse the attributes
+ * @returns { Array|string } result of the parsing in a list or a single value
+ * @private
+ */
+
+
+function parseNodes(els, name, method) {
+  const names = typeof name === 'string' ? [name] : name;
+  return normalize(domToArray(els).map(el => {
+    return normalize(names.map(n => el[method](n)));
+  }));
+}
+/**
+ * Set any attribute on a single or a list of DOM nodes
+ * @param   { HTMLElement|NodeList|Array } els   - DOM node/s to parse
+ * @param   { string|Object }              name  - either the name of the attribute to set
+ *                                                 or a list of properties as object key - value
+ * @param   { string }                     value - the new value of the attribute (optional)
+ * @returns { HTMLElement|NodeList|Array } the original array of elements passed to this function
+ *
+ * @example
+ *
+ * import { set } from 'bianco.attr'
+ *
+ * const img = document.createElement('img')
+ *
+ * set(img, 'width', 100)
+ *
+ * // or also
+ * set(img, {
+ *   width: 300,
+ *   height: 300
+ * })
+ *
+ */
+
+
+function set(els, name, value) {
+  const attrs = typeof name === 'object' ? name : {
+    [name]: value
+  };
+  const props = Object.keys(attrs);
+  domToArray(els).forEach(el => {
+    props.forEach(prop => el.setAttribute(prop, attrs[prop]));
+  });
+  return els;
+}
+/**
+ * Get any attribute from a single or a list of DOM nodes
+ * @param   { HTMLElement|NodeList|Array } els   - DOM node/s to parse
+ * @param   { string|Array }               name  - name or list of attributes to get
+ * @returns { Array|string } list of the attributes found
+ *
+ * @example
+ *
+ * import { get } from 'bianco.attr'
+ *
+ * const img = document.createElement('img')
+ *
+ * get(img, 'width') // => '200'
+ *
+ * // or also
+ * get(img, ['width', 'height']) // => ['200', '300']
+ *
+ * // or also
+ * get([img1, img2], ['width', 'height']) // => [['200', '300'], ['500', '200']]
+ */
+
+function get(els, name) {
+  return parseNodes(els, name, 'getAttribute');
+}
+
+const CSS_BY_NAME = new Map();
+const STYLE_NODE_SELECTOR = 'style[riot]'; // memoized curried function
+
+const getStyleNode = (style => {
+  return () => {
+    // lazy evaluation:
+    // if this function was already called before
+    // we return its cached result
+    if (style) return style; // create a new style element or use an existing one
+    // and cache it internally
+
+    style = $(STYLE_NODE_SELECTOR)[0] || document.createElement('style');
+    set(style, 'type', 'text/css');
+    /* istanbul ignore next */
+
+    if (!style.parentNode) document.head.appendChild(style);
+    return style;
+  };
+})();
+/**
+ * Object that will be used to inject and manage the css of every tag instance
+ */
+
+
+var cssManager = {
+  CSS_BY_NAME,
+
+  /**
+   * Save a tag style to be later injected into DOM
+   * @param { string } name - if it's passed we will map the css to a tagname
+   * @param { string } css - css string
+   * @returns {Object} self
+   */
+  add(name, css) {
+    if (!CSS_BY_NAME.has(name)) {
+      CSS_BY_NAME.set(name, css);
+      this.inject();
+    }
+
+    return this;
+  },
+
+  /**
+   * Inject all previously saved tag styles into DOM
+   * innerHTML seems slow: http://jsperf.com/riot-insert-style
+   * @returns {Object} self
+   */
+  inject() {
+    getStyleNode().innerHTML = [...CSS_BY_NAME.values()].join('\n');
+    return this;
+  },
+
+  /**
+   * Remove a tag style from the DOM
+   * @param {string} name a registered tagname
+   * @returns {Object} self
+   */
+  remove(name) {
+    if (CSS_BY_NAME.has(name)) {
+      CSS_BY_NAME.delete(name);
+      this.inject();
+    }
+
+    return this;
+  }
+
+};
+
+/**
+ * Function to curry any javascript method
+ * @param   {Function}  fn - the target function we want to curry
+ * @param   {...[args]} acc - initial arguments
+ * @returns {Function|*} it will return a function until the target function
+ *                       will receive all of its arguments
+ */
+function curry(fn) {
+  for (var _len = arguments.length, acc = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    acc[_key - 1] = arguments[_key];
+  }
+
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    args = [...acc, ...args];
+    return args.length < fn.length ? curry(fn, ...args) : fn(...args);
+  };
+}
+
+/**
+ * Get the tag name of any DOM node
+ * @param   {HTMLElement} element - DOM node we want to inspect
+ * @returns {string} name to identify this dom node in riot
+ */
+
+function getName(element) {
+  return get(element, IS_DIRECTIVE) || element.tagName.toLowerCase();
+}
+
+const COMPONENT_CORE_HELPERS = Object.freeze({
+  // component helpers
+  $(selector) {
+    return $(selector, this.root)[0];
+  },
+
+  $$(selector) {
+    return $(selector, this.root);
+  }
+
+});
+const PURE_COMPONENT_API = Object.freeze({
+  [MOUNT_METHOD_KEY]: noop,
+  [UPDATE_METHOD_KEY]: noop,
+  [UNMOUNT_METHOD_KEY]: noop
+});
+const COMPONENT_LIFECYCLE_METHODS = Object.freeze({
+  [SHOULD_UPDATE_KEY]: noop,
+  [ON_BEFORE_MOUNT_KEY]: noop,
+  [ON_MOUNTED_KEY]: noop,
+  [ON_BEFORE_UPDATE_KEY]: noop,
+  [ON_UPDATED_KEY]: noop,
+  [ON_BEFORE_UNMOUNT_KEY]: noop,
+  [ON_UNMOUNTED_KEY]: noop
+});
+const MOCKED_TEMPLATE_INTERFACE = Object.assign({}, PURE_COMPONENT_API, {
+  clone: noop,
+  createDOM: noop
+});
+/**
+ * Performance optimization for the recursive components
+ * @param  {RiotComponentWrapper} componentWrapper - riot compiler generated object
+ * @returns {Object} component like interface
+ */
+
+const memoizedCreateComponent = memoize(createComponent);
+/**
+ * Evaluate the component properties either from its real attributes or from its initial user properties
+ * @param   {HTMLElement} element - component root
+ * @param   {Object}  initialProps - initial props
+ * @returns {Object} component props key value pairs
+ */
+
+function evaluateInitialProps(element, initialProps) {
+  if (initialProps === void 0) {
+    initialProps = {};
+  }
+
+  return Object.assign({}, DOMattributesToObject(element), callOrAssign(initialProps));
+}
+/**
+ * Bind a DOM node to its component object
+ * @param   {HTMLElement} node - html node mounted
+ * @param   {Object} component - Riot.js component object
+ * @returns {Object} the component object received as second argument
+ */
+
+
+const bindDOMNodeToComponentObject = (node, component) => node[DOM_COMPONENT_INSTANCE_PROPERTY$1] = component;
+/**
+ * Wrap the Riot.js core API methods using a mapping function
+ * @param   {Function} mapFunction - lifting function
+ * @returns {Object} an object having the { mount, update, unmount } functions
+ */
+
+
+function createCoreAPIMethods(mapFunction) {
+  return [MOUNT_METHOD_KEY, UPDATE_METHOD_KEY, UNMOUNT_METHOD_KEY].reduce((acc, method) => {
+    acc[method] = mapFunction(method);
+    return acc;
+  }, {});
+}
+/**
+ * Factory function to create the component templates only once
+ * @param   {Function} template - component template creation function
+ * @param   {RiotComponentWrapper} componentWrapper - riot compiler generated object
+ * @returns {TemplateChunk} template chunk object
+ */
+
+
+function componentTemplateFactory(template, componentWrapper) {
+  const components = createSubcomponents(componentWrapper.exports ? componentWrapper.exports.components : {});
+  return template(create, expressionTypes, bindingTypes, name => {
+    // improve support for recursive components
+    if (name === componentWrapper.name) return memoizedCreateComponent(componentWrapper); // return the registered components
+
+    return components[name] || COMPONENTS_IMPLEMENTATION_MAP$1.get(name);
+  });
+}
+/**
+ * Create a pure component
+ * @param   {Function} pureFactoryFunction - pure component factory function
+ * @param   {Array} options.slots - component slots
+ * @param   {Array} options.attributes - component attributes
+ * @param   {Array} options.template - template factory function
+ * @param   {Array} options.template - template factory function
+ * @param   {any} options.props - initial component properties
+ * @returns {Object} pure component object
+ */
+
+
+function createPureComponent(pureFactoryFunction, _ref) {
+  let {
+    slots,
+    attributes,
+    props,
+    css,
+    template
+  } = _ref;
+  if (template) panic('Pure components can not have html');
+  if (css) panic('Pure components do not have css');
+  const component = defineDefaults(pureFactoryFunction({
+    slots,
+    attributes,
+    props
+  }), PURE_COMPONENT_API);
+  return createCoreAPIMethods(method => function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    // intercept the mount calls to bind the DOM node to the pure object created
+    // see also https://github.com/riot/riot/issues/2806
+    if (method === MOUNT_METHOD_KEY) {
+      const [el] = args; // mark this node as pure element
+
+      el[IS_PURE_SYMBOL] = true;
+      bindDOMNodeToComponentObject(el, component);
+    }
+
+    component[method](...args);
+    return component;
+  });
+}
+/**
+ * Create the component interface needed for the @riotjs/dom-bindings tag bindings
+ * @param   {RiotComponentWrapper} componentWrapper - riot compiler generated object
+ * @param   {string} componentWrapper.css - component css
+ * @param   {Function} componentWrapper.template - function that will return the dom-bindings template function
+ * @param   {Object} componentWrapper.exports - component interface
+ * @param   {string} componentWrapper.name - component name
+ * @returns {Object} component like interface
+ */
+
+
+function createComponent(componentWrapper) {
+  const {
+    css,
+    template,
+    exports,
+    name
+  } = componentWrapper;
+  const templateFn = template ? componentTemplateFactory(template, componentWrapper) : MOCKED_TEMPLATE_INTERFACE;
+  return _ref2 => {
+    let {
+      slots,
+      attributes,
+      props
+    } = _ref2;
+    // pure components rendering will be managed by the end user
+    if (exports && exports[IS_PURE_SYMBOL]) return createPureComponent(exports, {
+      slots,
+      attributes,
+      props,
+      css,
+      template
+    });
+    const componentAPI = callOrAssign(exports) || {};
+    const component = defineComponent({
+      css,
+      template: templateFn,
+      componentAPI,
+      name
+    })({
+      slots,
+      attributes,
+      props
+    }); // notice that for the components create via tag binding
+    // we need to invert the mount (state/parentScope) arguments
+    // the template bindings will only forward the parentScope updates
+    // and never deal with the component state
+
+    return {
+      mount(element, parentScope, state) {
+        return component.mount(element, state, parentScope);
+      },
+
+      update(parentScope, state) {
+        return component.update(state, parentScope);
+      },
+
+      unmount(preserveRoot) {
+        return component.unmount(preserveRoot);
+      }
+
+    };
+  };
+}
+/**
+ * Component definition function
+ * @param   {Object} implementation - the componen implementation will be generated via compiler
+ * @param   {Object} component - the component initial properties
+ * @returns {Object} a new component implementation object
+ */
+
+function defineComponent(_ref3) {
+  let {
+    css,
+    template,
+    componentAPI,
+    name
+  } = _ref3;
+  // add the component css into the DOM
+  if (css && name) cssManager.add(name, css);
+  return curry(enhanceComponentAPI)(defineProperties( // set the component defaults without overriding the original component API
+  defineDefaults(componentAPI, Object.assign({}, COMPONENT_LIFECYCLE_METHODS, {
+    [PROPS_KEY]: {},
+    [STATE_KEY]: {}
+  })), Object.assign({
+    // defined during the component creation
+    [SLOTS_KEY]: null,
+    [ROOT_KEY]: null
+  }, COMPONENT_CORE_HELPERS, {
+    name,
+    css,
+    template
+  })));
+}
+/**
+ * Create the bindings to update the component attributes
+ * @param   {HTMLElement} node - node where we will bind the expressions
+ * @param   {Array} attributes - list of attribute bindings
+ * @returns {TemplateChunk} - template bindings object
+ */
+
+function createAttributeBindings(node, attributes) {
+  if (attributes === void 0) {
+    attributes = [];
+  }
+
+  const expressions = attributes.map(a => create$4(node, a));
+  const binding = {};
+  return Object.assign(binding, Object.assign({
+    expressions
+  }, createCoreAPIMethods(method => scope => {
+    expressions.forEach(e => e[method](scope));
+    return binding;
+  })));
+}
+/**
+ * Create the subcomponents that can be included inside a tag in runtime
+ * @param   {Object} components - components imported in runtime
+ * @returns {Object} all the components transformed into Riot.Component factory functions
+ */
+
+
+function createSubcomponents(components) {
+  if (components === void 0) {
+    components = {};
+  }
+
+  return Object.entries(callOrAssign(components)).reduce((acc, _ref4) => {
+    let [key, value] = _ref4;
+    acc[camelToDashCase(key)] = createComponent(value);
+    return acc;
+  }, {});
+}
+/**
+ * Run the component instance through all the plugins set by the user
+ * @param   {Object} component - component instance
+ * @returns {Object} the component enhanced by the plugins
+ */
+
+
+function runPlugins(component) {
+  return [...PLUGINS_SET$1].reduce((c, fn) => fn(c) || c, component);
+}
+/**
+ * Compute the component current state merging it with its previous state
+ * @param   {Object} oldState - previous state object
+ * @param   {Object} newState - new state givent to the `update` call
+ * @returns {Object} new object state
+ */
+
+
+function computeState(oldState, newState) {
+  return Object.assign({}, oldState, callOrAssign(newState));
+}
+/**
+ * Add eventually the "is" attribute to link this DOM node to its css
+ * @param {HTMLElement} element - target root node
+ * @param {string} name - name of the component mounted
+ * @returns {undefined} it's a void function
+ */
+
+
+function addCssHook(element, name) {
+  if (getName(element) !== name) {
+    set(element, IS_DIRECTIVE, name);
+  }
+}
+/**
+ * Component creation factory function that will enhance the user provided API
+ * @param   {Object} component - a component implementation previously defined
+ * @param   {Array} options.slots - component slots generated via riot compiler
+ * @param   {Array} options.attributes - attribute expressions generated via riot compiler
+ * @returns {Riot.Component} a riot component instance
+ */
+
+
+function enhanceComponentAPI(component, _ref5) {
+  let {
+    slots,
+    attributes,
+    props
+  } = _ref5;
+  return autobindMethods(runPlugins(defineProperties(isObject(component) ? Object.create(component) : component, {
+    mount(element, state, parentScope) {
+      if (state === void 0) {
+        state = {};
+      }
+
+      this[PARENT_KEY_SYMBOL] = parentScope;
+      this[ATTRIBUTES_KEY_SYMBOL] = createAttributeBindings(element, attributes).mount(parentScope);
+      defineProperty(this, PROPS_KEY, Object.freeze(Object.assign({}, evaluateInitialProps(element, props), evaluateAttributeExpressions(this[ATTRIBUTES_KEY_SYMBOL].expressions))));
+      this[STATE_KEY] = computeState(this[STATE_KEY], state);
+      this[TEMPLATE_KEY_SYMBOL] = this.template.createDOM(element).clone(); // link this object to the DOM node
+
+      bindDOMNodeToComponentObject(element, this); // add eventually the 'is' attribute
+
+      component.name && addCssHook(element, component.name); // define the root element
+
+      defineProperty(this, ROOT_KEY, element); // define the slots array
+
+      defineProperty(this, SLOTS_KEY, slots); // before mount lifecycle event
+
+      this[ON_BEFORE_MOUNT_KEY](this[PROPS_KEY], this[STATE_KEY]); // mount the template
+
+      this[TEMPLATE_KEY_SYMBOL].mount(element, this, parentScope);
+      this[ON_MOUNTED_KEY](this[PROPS_KEY], this[STATE_KEY]);
+      return this;
+    },
+
+    update(state, parentScope) {
+      if (state === void 0) {
+        state = {};
+      }
+
+      if (parentScope) {
+        this[PARENT_KEY_SYMBOL] = parentScope;
+        this[ATTRIBUTES_KEY_SYMBOL].update(parentScope);
+      }
+
+      const newProps = evaluateAttributeExpressions(this[ATTRIBUTES_KEY_SYMBOL].expressions);
+      if (this[SHOULD_UPDATE_KEY](newProps, this[PROPS_KEY]) === false) return;
+      defineProperty(this, PROPS_KEY, Object.freeze(Object.assign({}, this[PROPS_KEY], newProps)));
+      this[STATE_KEY] = computeState(this[STATE_KEY], state);
+      this[ON_BEFORE_UPDATE_KEY](this[PROPS_KEY], this[STATE_KEY]); // avoiding recursive updates
+      // see also https://github.com/riot/riot/issues/2895
+
+      if (!this[IS_COMPONENT_UPDATING]) {
+        this[IS_COMPONENT_UPDATING] = true;
+        this[TEMPLATE_KEY_SYMBOL].update(this, this[PARENT_KEY_SYMBOL]);
+      }
+
+      this[ON_UPDATED_KEY](this[PROPS_KEY], this[STATE_KEY]);
+      this[IS_COMPONENT_UPDATING] = false;
+      return this;
+    },
+
+    unmount(preserveRoot) {
+      this[ON_BEFORE_UNMOUNT_KEY](this[PROPS_KEY], this[STATE_KEY]);
+      this[ATTRIBUTES_KEY_SYMBOL].unmount(); // if the preserveRoot is null the template html will be left untouched
+      // in that case the DOM cleanup will happen differently from a parent node
+
+      this[TEMPLATE_KEY_SYMBOL].unmount(this, this[PARENT_KEY_SYMBOL], preserveRoot === null ? null : !preserveRoot);
+      this[ON_UNMOUNTED_KEY](this[PROPS_KEY], this[STATE_KEY]);
+      return this;
+    }
+
+  })), Object.keys(component).filter(prop => isFunction(component[prop])));
+}
+/**
+ * Component initialization function starting from a DOM node
+ * @param   {HTMLElement} element - element to upgrade
+ * @param   {Object} initialProps - initial component properties
+ * @param   {string} componentName - component id
+ * @returns {Object} a new component instance bound to a DOM node
+ */
+
+function mountComponent(element, initialProps, componentName) {
+  const name = componentName || getName(element);
+  if (!COMPONENTS_IMPLEMENTATION_MAP$1.has(name)) panic(`The component named "${name}" was never registered`);
+  const component = COMPONENTS_IMPLEMENTATION_MAP$1.get(name)({
+    props: initialProps
+  });
+  return component.mount(element);
+}
+
+/**
+ * Similar to compose but performs from left-to-right function composition.<br/>
+ * {@link https://30secondsofcode.org/function#composeright see also}
+ * @param   {...[function]} fns) - list of unary function
+ * @returns {*} result of the computation
+ */
+/**
+ * Performs right-to-left function composition.<br/>
+ * Use Array.prototype.reduce() to perform right-to-left function composition.<br/>
+ * The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.<br/>
+ * {@link https://30secondsofcode.org/function#compose original source code}
+ * @param   {...[function]} fns) - list of unary function
+ * @returns {*} result of the computation
+ */
+
+function compose() {
+  for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    fns[_key2] = arguments[_key2];
+  }
+
+  return fns.reduce((f, g) => function () {
+    return f(g(...arguments));
+  });
+}
+
+const {
+  DOM_COMPONENT_INSTANCE_PROPERTY,
+  COMPONENTS_IMPLEMENTATION_MAP,
+  PLUGINS_SET
+} = globals;
+/**
+ * Riot public api
+ */
+
+/**
+ * Register a custom tag by name
+ * @param   {string} name - component name
+ * @param   {Object} implementation - tag implementation
+ * @returns {Map} map containing all the components implementations
+ */
+
+function register(name, _ref) {
+  let {
+    css,
+    template,
+    exports
+  } = _ref;
+  if (COMPONENTS_IMPLEMENTATION_MAP.has(name)) panic(`The component "${name}" was already registered`);
+  COMPONENTS_IMPLEMENTATION_MAP.set(name, createComponent({
+    name,
+    css,
+    template,
+    exports
+  }));
+  return COMPONENTS_IMPLEMENTATION_MAP;
+}
+/**
+ * Unregister a riot web component
+ * @param   {string} name - component name
+ * @returns {Map} map containing all the components implementations
+ */
+
+function unregister(name) {
+  if (!COMPONENTS_IMPLEMENTATION_MAP.has(name)) panic(`The component "${name}" was never registered`);
+  COMPONENTS_IMPLEMENTATION_MAP.delete(name);
+  cssManager.remove(name);
+  return COMPONENTS_IMPLEMENTATION_MAP;
+}
+/**
+ * Mounting function that will work only for the components that were globally registered
+ * @param   {string|HTMLElement} selector - query for the selection or a DOM element
+ * @param   {Object} initialProps - the initial component properties
+ * @param   {string} name - optional component name
+ * @returns {Array} list of riot components
+ */
+
+function mount(selector, initialProps, name) {
+  return $(selector).map(element => mountComponent(element, initialProps, name));
+}
+/**
+ * Sweet unmounting helper function for the DOM node mounted manually by the user
+ * @param   {string|HTMLElement} selector - query for the selection or a DOM element
+ * @param   {boolean|null} keepRootElement - if true keep the root element
+ * @returns {Array} list of nodes unmounted
+ */
+
+function unmount(selector, keepRootElement) {
+  return $(selector).map(element => {
+    if (element[DOM_COMPONENT_INSTANCE_PROPERTY]) {
+      element[DOM_COMPONENT_INSTANCE_PROPERTY].unmount(keepRootElement);
+    }
+
+    return element;
+  });
+}
+/**
+ * Define a riot plugin
+ * @param   {Function} plugin - function that will receive all the components created
+ * @returns {Set} the set containing all the plugins installed
+ */
+
+function install(plugin) {
+  if (!isFunction(plugin)) panic('Plugins must be of type function');
+  if (PLUGINS_SET.has(plugin)) panic('This plugin was already installed');
+  PLUGINS_SET.add(plugin);
+  return PLUGINS_SET;
+}
+/**
+ * Uninstall a riot plugin
+ * @param   {Function} plugin - plugin previously installed
+ * @returns {Set} the set containing all the plugins installed
+ */
+
+function uninstall(plugin) {
+  if (!PLUGINS_SET.has(plugin)) panic('This plugin was never installed');
+  PLUGINS_SET.delete(plugin);
+  return PLUGINS_SET;
+}
+/**
+ * Helper method to create component without relying on the registered ones
+ * @param   {Object} implementation - component implementation
+ * @returns {Function} function that will allow you to mount a riot component on a DOM node
+ */
+
+function component(implementation) {
+  return function (el, props, _temp) {
+    let {
+      slots,
+      attributes,
+      parentScope
+    } = _temp === void 0 ? {} : _temp;
+    return compose(c => c.mount(el, parentScope), c => c({
+      props,
+      slots,
+      attributes
+    }), createComponent)(implementation);
+  };
+}
+/**
+ * Lift a riot component Interface into a pure riot object
+ * @param   {Function} func - RiotPureComponent factory function
+ * @returns {Function} the lifted original function received as argument
+ */
+
+function pure(func) {
+  if (!isFunction(func)) panic('riot.pure accepts only arguments of type "function"');
+  func[IS_PURE_SYMBOL] = true;
+  return func;
+}
+/**
+ * no-op function needed to add the proper types to your component via typescript
+ * @param {Function|Object} component - component default export
+ * @returns {Function|Object} returns exactly what it has received
+ */
+
+const withTypes = component => component;
+/** @type {string} current riot version */
+
+const version = 'v6.0.1'; // expose some internal stuff that might be used from external tools
+
+const __ = {
+  cssManager,
+  DOMBindings,
+  createComponent,
+  defineComponent,
+  globals
+};
+
+
+
+
 /***/ })
 
 /******/ 	});
@@ -4678,17 +7261,13 @@ var __webpack_exports__ = {};
   !*** ./resources/js/dashboard.js ***!
   \***********************************/
 __webpack_require__.r(__webpack_exports__);
+/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js");
 /* harmony import */ var _components_buckets_riot__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/buckets.riot */ "./resources/js/components/buckets.riot");
 
-/**
- *  Bucket
- *
- *
- */
-// register components
+ // register components for buckets
 
-riot.register('app-buckets', _components_buckets_riot__WEBPACK_IMPORTED_MODULE_0__.default);
-riot.mount('app-buckets');
+riot__WEBPACK_IMPORTED_MODULE_1__.register('app-buckets', _components_buckets_riot__WEBPACK_IMPORTED_MODULE_0__.default);
+riot__WEBPACK_IMPORTED_MODULE_1__.mount('app-buckets');
 })();
 
 /******/ })()
diff --git a/public/js/index.js b/public/js/index.js
index ae10b37..97b67f7 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1,4636 +1,15 @@
 /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ "./node_modules/axios/index.js":
-/*!*************************************!*\
-  !*** ./node_modules/axios/index.js ***!
-  \*************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-module.exports = __webpack_require__(/*! ./lib/axios */ "./node_modules/axios/lib/axios.js");
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/adapters/xhr.js":
-/*!************************************************!*\
-  !*** ./node_modules/axios/lib/adapters/xhr.js ***!
-  \************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./../utils */ "./node_modules/axios/lib/utils.js");
-var settle = __webpack_require__(/*! ./../core/settle */ "./node_modules/axios/lib/core/settle.js");
-var cookies = __webpack_require__(/*! ./../helpers/cookies */ "./node_modules/axios/lib/helpers/cookies.js");
-var buildURL = __webpack_require__(/*! ./../helpers/buildURL */ "./node_modules/axios/lib/helpers/buildURL.js");
-var buildFullPath = __webpack_require__(/*! ../core/buildFullPath */ "./node_modules/axios/lib/core/buildFullPath.js");
-var parseHeaders = __webpack_require__(/*! ./../helpers/parseHeaders */ "./node_modules/axios/lib/helpers/parseHeaders.js");
-var isURLSameOrigin = __webpack_require__(/*! ./../helpers/isURLSameOrigin */ "./node_modules/axios/lib/helpers/isURLSameOrigin.js");
-var createError = __webpack_require__(/*! ../core/createError */ "./node_modules/axios/lib/core/createError.js");
-
-module.exports = function xhrAdapter(config) {
-  return new Promise(function dispatchXhrRequest(resolve, reject) {
-    var requestData = config.data;
-    var requestHeaders = config.headers;
-
-    if (utils.isFormData(requestData)) {
-      delete requestHeaders['Content-Type']; // Let the browser set it
-    }
-
-    var request = new XMLHttpRequest();
-
-    // HTTP basic authentication
-    if (config.auth) {
-      var username = config.auth.username || '';
-      var password = config.auth.password ? unescape(encodeURIComponent(config.auth.password)) : '';
-      requestHeaders.Authorization = 'Basic ' + btoa(username + ':' + password);
-    }
-
-    var fullPath = buildFullPath(config.baseURL, config.url);
-    request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);
-
-    // Set the request timeout in MS
-    request.timeout = config.timeout;
-
-    // Listen for ready state
-    request.onreadystatechange = function handleLoad() {
-      if (!request || request.readyState !== 4) {
-        return;
-      }
-
-      // The request errored out and we didn't get a response, this will be
-      // handled by onerror instead
-      // With one exception: request that using file: protocol, most browsers
-      // will return status as 0 even though it's a successful request
-      if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) {
-        return;
-      }
-
-      // Prepare the response
-      var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;
-      var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
-      var response = {
-        data: responseData,
-        status: request.status,
-        statusText: request.statusText,
-        headers: responseHeaders,
-        config: config,
-        request: request
-      };
-
-      settle(resolve, reject, response);
-
-      // Clean up request
-      request = null;
-    };
-
-    // Handle browser request cancellation (as opposed to a manual cancellation)
-    request.onabort = function handleAbort() {
-      if (!request) {
-        return;
-      }
-
-      reject(createError('Request aborted', config, 'ECONNABORTED', request));
-
-      // Clean up request
-      request = null;
-    };
-
-    // Handle low level network errors
-    request.onerror = function handleError() {
-      // Real errors are hidden from us by the browser
-      // onerror should only fire if it's a network error
-      reject(createError('Network Error', config, null, request));
-
-      // Clean up request
-      request = null;
-    };
-
-    // Handle timeout
-    request.ontimeout = function handleTimeout() {
-      var timeoutErrorMessage = 'timeout of ' + config.timeout + 'ms exceeded';
-      if (config.timeoutErrorMessage) {
-        timeoutErrorMessage = config.timeoutErrorMessage;
-      }
-      reject(createError(timeoutErrorMessage, config, 'ECONNABORTED',
-        request));
-
-      // Clean up request
-      request = null;
-    };
-
-    // Add xsrf header
-    // This is only done if running in a standard browser environment.
-    // Specifically not if we're in a web worker, or react-native.
-    if (utils.isStandardBrowserEnv()) {
-      // Add xsrf header
-      var xsrfValue = (config.withCredentials || isURLSameOrigin(fullPath)) && config.xsrfCookieName ?
-        cookies.read(config.xsrfCookieName) :
-        undefined;
-
-      if (xsrfValue) {
-        requestHeaders[config.xsrfHeaderName] = xsrfValue;
-      }
-    }
-
-    // Add headers to the request
-    if ('setRequestHeader' in request) {
-      utils.forEach(requestHeaders, function setRequestHeader(val, key) {
-        if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
-          // Remove Content-Type if data is undefined
-          delete requestHeaders[key];
-        } else {
-          // Otherwise add header to the request
-          request.setRequestHeader(key, val);
-        }
-      });
-    }
-
-    // Add withCredentials to request if needed
-    if (!utils.isUndefined(config.withCredentials)) {
-      request.withCredentials = !!config.withCredentials;
-    }
-
-    // Add responseType to request if needed
-    if (config.responseType) {
-      try {
-        request.responseType = config.responseType;
-      } catch (e) {
-        // Expected DOMException thrown by browsers not compatible XMLHttpRequest Level 2.
-        // But, this can be suppressed for 'json' type as it can be parsed by default 'transformResponse' function.
-        if (config.responseType !== 'json') {
-          throw e;
-        }
-      }
-    }
-
-    // Handle progress if needed
-    if (typeof config.onDownloadProgress === 'function') {
-      request.addEventListener('progress', config.onDownloadProgress);
-    }
-
-    // Not all browsers support upload events
-    if (typeof config.onUploadProgress === 'function' && request.upload) {
-      request.upload.addEventListener('progress', config.onUploadProgress);
-    }
-
-    if (config.cancelToken) {
-      // Handle cancellation
-      config.cancelToken.promise.then(function onCanceled(cancel) {
-        if (!request) {
-          return;
-        }
-
-        request.abort();
-        reject(cancel);
-        // Clean up request
-        request = null;
-      });
-    }
-
-    if (!requestData) {
-      requestData = null;
-    }
-
-    // Send the request
-    request.send(requestData);
-  });
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/axios.js":
-/*!*****************************************!*\
-  !*** ./node_modules/axios/lib/axios.js ***!
-  \*****************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./utils */ "./node_modules/axios/lib/utils.js");
-var bind = __webpack_require__(/*! ./helpers/bind */ "./node_modules/axios/lib/helpers/bind.js");
-var Axios = __webpack_require__(/*! ./core/Axios */ "./node_modules/axios/lib/core/Axios.js");
-var mergeConfig = __webpack_require__(/*! ./core/mergeConfig */ "./node_modules/axios/lib/core/mergeConfig.js");
-var defaults = __webpack_require__(/*! ./defaults */ "./node_modules/axios/lib/defaults.js");
-
-/**
- * Create an instance of Axios
- *
- * @param {Object} defaultConfig The default config for the instance
- * @return {Axios} A new instance of Axios
- */
-function createInstance(defaultConfig) {
-  var context = new Axios(defaultConfig);
-  var instance = bind(Axios.prototype.request, context);
-
-  // Copy axios.prototype to instance
-  utils.extend(instance, Axios.prototype, context);
-
-  // Copy context to instance
-  utils.extend(instance, context);
-
-  return instance;
-}
-
-// Create the default instance to be exported
-var axios = createInstance(defaults);
-
-// Expose Axios class to allow class inheritance
-axios.Axios = Axios;
-
-// Factory for creating new instances
-axios.create = function create(instanceConfig) {
-  return createInstance(mergeConfig(axios.defaults, instanceConfig));
-};
-
-// Expose Cancel & CancelToken
-axios.Cancel = __webpack_require__(/*! ./cancel/Cancel */ "./node_modules/axios/lib/cancel/Cancel.js");
-axios.CancelToken = __webpack_require__(/*! ./cancel/CancelToken */ "./node_modules/axios/lib/cancel/CancelToken.js");
-axios.isCancel = __webpack_require__(/*! ./cancel/isCancel */ "./node_modules/axios/lib/cancel/isCancel.js");
-
-// Expose all/spread
-axios.all = function all(promises) {
-  return Promise.all(promises);
-};
-axios.spread = __webpack_require__(/*! ./helpers/spread */ "./node_modules/axios/lib/helpers/spread.js");
-
-// Expose isAxiosError
-axios.isAxiosError = __webpack_require__(/*! ./helpers/isAxiosError */ "./node_modules/axios/lib/helpers/isAxiosError.js");
-
-module.exports = axios;
-
-// Allow use of default import syntax in TypeScript
-module.exports.default = axios;
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/cancel/Cancel.js":
-/*!*************************************************!*\
-  !*** ./node_modules/axios/lib/cancel/Cancel.js ***!
-  \*************************************************/
-/***/ ((module) => {
-
-"use strict";
-
-
-/**
- * A `Cancel` is an object that is thrown when an operation is canceled.
- *
- * @class
- * @param {string=} message The message.
- */
-function Cancel(message) {
-  this.message = message;
-}
-
-Cancel.prototype.toString = function toString() {
-  return 'Cancel' + (this.message ? ': ' + this.message : '');
-};
-
-Cancel.prototype.__CANCEL__ = true;
-
-module.exports = Cancel;
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/cancel/CancelToken.js":
-/*!******************************************************!*\
-  !*** ./node_modules/axios/lib/cancel/CancelToken.js ***!
-  \******************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var Cancel = __webpack_require__(/*! ./Cancel */ "./node_modules/axios/lib/cancel/Cancel.js");
-
-/**
- * A `CancelToken` is an object that can be used to request cancellation of an operation.
- *
- * @class
- * @param {Function} executor The executor function.
- */
-function CancelToken(executor) {
-  if (typeof executor !== 'function') {
-    throw new TypeError('executor must be a function.');
-  }
-
-  var resolvePromise;
-  this.promise = new Promise(function promiseExecutor(resolve) {
-    resolvePromise = resolve;
-  });
-
-  var token = this;
-  executor(function cancel(message) {
-    if (token.reason) {
-      // Cancellation has already been requested
-      return;
-    }
-
-    token.reason = new Cancel(message);
-    resolvePromise(token.reason);
-  });
-}
-
-/**
- * Throws a `Cancel` if cancellation has been requested.
- */
-CancelToken.prototype.throwIfRequested = function throwIfRequested() {
-  if (this.reason) {
-    throw this.reason;
-  }
-};
-
-/**
- * Returns an object that contains a new `CancelToken` and a function that, when called,
- * cancels the `CancelToken`.
- */
-CancelToken.source = function source() {
-  var cancel;
-  var token = new CancelToken(function executor(c) {
-    cancel = c;
-  });
-  return {
-    token: token,
-    cancel: cancel
-  };
-};
-
-module.exports = CancelToken;
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/cancel/isCancel.js":
-/*!***************************************************!*\
-  !*** ./node_modules/axios/lib/cancel/isCancel.js ***!
-  \***************************************************/
-/***/ ((module) => {
-
-"use strict";
-
-
-module.exports = function isCancel(value) {
-  return !!(value && value.__CANCEL__);
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/core/Axios.js":
-/*!**********************************************!*\
-  !*** ./node_modules/axios/lib/core/Axios.js ***!
-  \**********************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./../utils */ "./node_modules/axios/lib/utils.js");
-var buildURL = __webpack_require__(/*! ../helpers/buildURL */ "./node_modules/axios/lib/helpers/buildURL.js");
-var InterceptorManager = __webpack_require__(/*! ./InterceptorManager */ "./node_modules/axios/lib/core/InterceptorManager.js");
-var dispatchRequest = __webpack_require__(/*! ./dispatchRequest */ "./node_modules/axios/lib/core/dispatchRequest.js");
-var mergeConfig = __webpack_require__(/*! ./mergeConfig */ "./node_modules/axios/lib/core/mergeConfig.js");
-
-/**
- * Create a new instance of Axios
- *
- * @param {Object} instanceConfig The default config for the instance
- */
-function Axios(instanceConfig) {
-  this.defaults = instanceConfig;
-  this.interceptors = {
-    request: new InterceptorManager(),
-    response: new InterceptorManager()
-  };
-}
-
-/**
- * Dispatch a request
- *
- * @param {Object} config The config specific for this request (merged with this.defaults)
- */
-Axios.prototype.request = function request(config) {
-  /*eslint no-param-reassign:0*/
-  // Allow for axios('example/url'[, config]) a la fetch API
-  if (typeof config === 'string') {
-    config = arguments[1] || {};
-    config.url = arguments[0];
-  } else {
-    config = config || {};
-  }
-
-  config = mergeConfig(this.defaults, config);
-
-  // Set config.method
-  if (config.method) {
-    config.method = config.method.toLowerCase();
-  } else if (this.defaults.method) {
-    config.method = this.defaults.method.toLowerCase();
-  } else {
-    config.method = 'get';
-  }
-
-  // Hook up interceptors middleware
-  var chain = [dispatchRequest, undefined];
-  var promise = Promise.resolve(config);
-
-  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
-    chain.unshift(interceptor.fulfilled, interceptor.rejected);
-  });
-
-  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
-    chain.push(interceptor.fulfilled, interceptor.rejected);
-  });
-
-  while (chain.length) {
-    promise = promise.then(chain.shift(), chain.shift());
-  }
-
-  return promise;
-};
-
-Axios.prototype.getUri = function getUri(config) {
-  config = mergeConfig(this.defaults, config);
-  return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\?/, '');
-};
-
-// Provide aliases for supported request methods
-utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
-  /*eslint func-names:0*/
-  Axios.prototype[method] = function(url, config) {
-    return this.request(mergeConfig(config || {}, {
-      method: method,
-      url: url,
-      data: (config || {}).data
-    }));
-  };
-});
-
-utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
-  /*eslint func-names:0*/
-  Axios.prototype[method] = function(url, data, config) {
-    return this.request(mergeConfig(config || {}, {
-      method: method,
-      url: url,
-      data: data
-    }));
-  };
-});
-
-module.exports = Axios;
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/core/InterceptorManager.js":
-/*!***********************************************************!*\
-  !*** ./node_modules/axios/lib/core/InterceptorManager.js ***!
-  \***********************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./../utils */ "./node_modules/axios/lib/utils.js");
-
-function InterceptorManager() {
-  this.handlers = [];
-}
-
-/**
- * Add a new interceptor to the stack
- *
- * @param {Function} fulfilled The function to handle `then` for a `Promise`
- * @param {Function} rejected The function to handle `reject` for a `Promise`
- *
- * @return {Number} An ID used to remove interceptor later
- */
-InterceptorManager.prototype.use = function use(fulfilled, rejected) {
-  this.handlers.push({
-    fulfilled: fulfilled,
-    rejected: rejected
-  });
-  return this.handlers.length - 1;
-};
-
-/**
- * Remove an interceptor from the stack
- *
- * @param {Number} id The ID that was returned by `use`
- */
-InterceptorManager.prototype.eject = function eject(id) {
-  if (this.handlers[id]) {
-    this.handlers[id] = null;
-  }
-};
-
-/**
- * Iterate over all the registered interceptors
- *
- * This method is particularly useful for skipping over any
- * interceptors that may have become `null` calling `eject`.
- *
- * @param {Function} fn The function to call for each interceptor
- */
-InterceptorManager.prototype.forEach = function forEach(fn) {
-  utils.forEach(this.handlers, function forEachHandler(h) {
-    if (h !== null) {
-      fn(h);
-    }
-  });
-};
-
-module.exports = InterceptorManager;
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/core/buildFullPath.js":
-/*!******************************************************!*\
-  !*** ./node_modules/axios/lib/core/buildFullPath.js ***!
-  \******************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var isAbsoluteURL = __webpack_require__(/*! ../helpers/isAbsoluteURL */ "./node_modules/axios/lib/helpers/isAbsoluteURL.js");
-var combineURLs = __webpack_require__(/*! ../helpers/combineURLs */ "./node_modules/axios/lib/helpers/combineURLs.js");
-
-/**
- * Creates a new URL by combining the baseURL with the requestedURL,
- * only when the requestedURL is not already an absolute URL.
- * If the requestURL is absolute, this function returns the requestedURL untouched.
- *
- * @param {string} baseURL The base URL
- * @param {string} requestedURL Absolute or relative URL to combine
- * @returns {string} The combined full path
- */
-module.exports = function buildFullPath(baseURL, requestedURL) {
-  if (baseURL && !isAbsoluteURL(requestedURL)) {
-    return combineURLs(baseURL, requestedURL);
-  }
-  return requestedURL;
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/core/createError.js":
-/*!****************************************************!*\
-  !*** ./node_modules/axios/lib/core/createError.js ***!
-  \****************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var enhanceError = __webpack_require__(/*! ./enhanceError */ "./node_modules/axios/lib/core/enhanceError.js");
-
-/**
- * Create an Error with the specified message, config, error code, request and response.
- *
- * @param {string} message The error message.
- * @param {Object} config The config.
- * @param {string} [code] The error code (for example, 'ECONNABORTED').
- * @param {Object} [request] The request.
- * @param {Object} [response] The response.
- * @returns {Error} The created error.
- */
-module.exports = function createError(message, config, code, request, response) {
-  var error = new Error(message);
-  return enhanceError(error, config, code, request, response);
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/core/dispatchRequest.js":
-/*!********************************************************!*\
-  !*** ./node_modules/axios/lib/core/dispatchRequest.js ***!
-  \********************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./../utils */ "./node_modules/axios/lib/utils.js");
-var transformData = __webpack_require__(/*! ./transformData */ "./node_modules/axios/lib/core/transformData.js");
-var isCancel = __webpack_require__(/*! ../cancel/isCancel */ "./node_modules/axios/lib/cancel/isCancel.js");
-var defaults = __webpack_require__(/*! ../defaults */ "./node_modules/axios/lib/defaults.js");
-
-/**
- * Throws a `Cancel` if cancellation has been requested.
- */
-function throwIfCancellationRequested(config) {
-  if (config.cancelToken) {
-    config.cancelToken.throwIfRequested();
-  }
-}
-
-/**
- * Dispatch a request to the server using the configured adapter.
- *
- * @param {object} config The config that is to be used for the request
- * @returns {Promise} The Promise to be fulfilled
- */
-module.exports = function dispatchRequest(config) {
-  throwIfCancellationRequested(config);
-
-  // Ensure headers exist
-  config.headers = config.headers || {};
-
-  // Transform request data
-  config.data = transformData(
-    config.data,
-    config.headers,
-    config.transformRequest
-  );
-
-  // Flatten headers
-  config.headers = utils.merge(
-    config.headers.common || {},
-    config.headers[config.method] || {},
-    config.headers
-  );
-
-  utils.forEach(
-    ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
-    function cleanHeaderConfig(method) {
-      delete config.headers[method];
-    }
-  );
-
-  var adapter = config.adapter || defaults.adapter;
-
-  return adapter(config).then(function onAdapterResolution(response) {
-    throwIfCancellationRequested(config);
-
-    // Transform response data
-    response.data = transformData(
-      response.data,
-      response.headers,
-      config.transformResponse
-    );
-
-    return response;
-  }, function onAdapterRejection(reason) {
-    if (!isCancel(reason)) {
-      throwIfCancellationRequested(config);
-
-      // Transform response data
-      if (reason && reason.response) {
-        reason.response.data = transformData(
-          reason.response.data,
-          reason.response.headers,
-          config.transformResponse
-        );
-      }
-    }
-
-    return Promise.reject(reason);
-  });
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/core/enhanceError.js":
-/*!*****************************************************!*\
-  !*** ./node_modules/axios/lib/core/enhanceError.js ***!
-  \*****************************************************/
-/***/ ((module) => {
-
-"use strict";
-
-
-/**
- * Update an Error with the specified config, error code, and response.
- *
- * @param {Error} error The error to update.
- * @param {Object} config The config.
- * @param {string} [code] The error code (for example, 'ECONNABORTED').
- * @param {Object} [request] The request.
- * @param {Object} [response] The response.
- * @returns {Error} The error.
- */
-module.exports = function enhanceError(error, config, code, request, response) {
-  error.config = config;
-  if (code) {
-    error.code = code;
-  }
-
-  error.request = request;
-  error.response = response;
-  error.isAxiosError = true;
-
-  error.toJSON = function toJSON() {
-    return {
-      // Standard
-      message: this.message,
-      name: this.name,
-      // Microsoft
-      description: this.description,
-      number: this.number,
-      // Mozilla
-      fileName: this.fileName,
-      lineNumber: this.lineNumber,
-      columnNumber: this.columnNumber,
-      stack: this.stack,
-      // Axios
-      config: this.config,
-      code: this.code
-    };
-  };
-  return error;
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/core/mergeConfig.js":
-/*!****************************************************!*\
-  !*** ./node_modules/axios/lib/core/mergeConfig.js ***!
-  \****************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ../utils */ "./node_modules/axios/lib/utils.js");
-
-/**
- * Config-specific merge-function which creates a new config-object
- * by merging two configuration objects together.
- *
- * @param {Object} config1
- * @param {Object} config2
- * @returns {Object} New object resulting from merging config2 to config1
- */
-module.exports = function mergeConfig(config1, config2) {
-  // eslint-disable-next-line no-param-reassign
-  config2 = config2 || {};
-  var config = {};
-
-  var valueFromConfig2Keys = ['url', 'method', 'data'];
-  var mergeDeepPropertiesKeys = ['headers', 'auth', 'proxy', 'params'];
-  var defaultToConfig2Keys = [
-    'baseURL', 'transformRequest', 'transformResponse', 'paramsSerializer',
-    'timeout', 'timeoutMessage', 'withCredentials', 'adapter', 'responseType', 'xsrfCookieName',
-    'xsrfHeaderName', 'onUploadProgress', 'onDownloadProgress', 'decompress',
-    'maxContentLength', 'maxBodyLength', 'maxRedirects', 'transport', 'httpAgent',
-    'httpsAgent', 'cancelToken', 'socketPath', 'responseEncoding'
-  ];
-  var directMergeKeys = ['validateStatus'];
-
-  function getMergedValue(target, source) {
-    if (utils.isPlainObject(target) && utils.isPlainObject(source)) {
-      return utils.merge(target, source);
-    } else if (utils.isPlainObject(source)) {
-      return utils.merge({}, source);
-    } else if (utils.isArray(source)) {
-      return source.slice();
-    }
-    return source;
-  }
-
-  function mergeDeepProperties(prop) {
-    if (!utils.isUndefined(config2[prop])) {
-      config[prop] = getMergedValue(config1[prop], config2[prop]);
-    } else if (!utils.isUndefined(config1[prop])) {
-      config[prop] = getMergedValue(undefined, config1[prop]);
-    }
-  }
-
-  utils.forEach(valueFromConfig2Keys, function valueFromConfig2(prop) {
-    if (!utils.isUndefined(config2[prop])) {
-      config[prop] = getMergedValue(undefined, config2[prop]);
-    }
-  });
-
-  utils.forEach(mergeDeepPropertiesKeys, mergeDeepProperties);
-
-  utils.forEach(defaultToConfig2Keys, function defaultToConfig2(prop) {
-    if (!utils.isUndefined(config2[prop])) {
-      config[prop] = getMergedValue(undefined, config2[prop]);
-    } else if (!utils.isUndefined(config1[prop])) {
-      config[prop] = getMergedValue(undefined, config1[prop]);
-    }
-  });
-
-  utils.forEach(directMergeKeys, function merge(prop) {
-    if (prop in config2) {
-      config[prop] = getMergedValue(config1[prop], config2[prop]);
-    } else if (prop in config1) {
-      config[prop] = getMergedValue(undefined, config1[prop]);
-    }
-  });
-
-  var axiosKeys = valueFromConfig2Keys
-    .concat(mergeDeepPropertiesKeys)
-    .concat(defaultToConfig2Keys)
-    .concat(directMergeKeys);
-
-  var otherKeys = Object
-    .keys(config1)
-    .concat(Object.keys(config2))
-    .filter(function filterAxiosKeys(key) {
-      return axiosKeys.indexOf(key) === -1;
-    });
-
-  utils.forEach(otherKeys, mergeDeepProperties);
-
-  return config;
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/core/settle.js":
-/*!***********************************************!*\
-  !*** ./node_modules/axios/lib/core/settle.js ***!
-  \***********************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var createError = __webpack_require__(/*! ./createError */ "./node_modules/axios/lib/core/createError.js");
-
-/**
- * Resolve or reject a Promise based on response status.
- *
- * @param {Function} resolve A function that resolves the promise.
- * @param {Function} reject A function that rejects the promise.
- * @param {object} response The response.
- */
-module.exports = function settle(resolve, reject, response) {
-  var validateStatus = response.config.validateStatus;
-  if (!response.status || !validateStatus || validateStatus(response.status)) {
-    resolve(response);
-  } else {
-    reject(createError(
-      'Request failed with status code ' + response.status,
-      response.config,
-      null,
-      response.request,
-      response
-    ));
-  }
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/core/transformData.js":
-/*!******************************************************!*\
-  !*** ./node_modules/axios/lib/core/transformData.js ***!
-  \******************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./../utils */ "./node_modules/axios/lib/utils.js");
-
-/**
- * Transform the data for a request or a response
- *
- * @param {Object|String} data The data to be transformed
- * @param {Array} headers The headers for the request or response
- * @param {Array|Function} fns A single function or Array of functions
- * @returns {*} The resulting transformed data
- */
-module.exports = function transformData(data, headers, fns) {
-  /*eslint no-param-reassign:0*/
-  utils.forEach(fns, function transform(fn) {
-    data = fn(data, headers);
-  });
-
-  return data;
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/defaults.js":
-/*!********************************************!*\
-  !*** ./node_modules/axios/lib/defaults.js ***!
-  \********************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-/* provided dependency */ var process = __webpack_require__(/*! process/browser */ "./node_modules/process/browser.js");
-
-
-var utils = __webpack_require__(/*! ./utils */ "./node_modules/axios/lib/utils.js");
-var normalizeHeaderName = __webpack_require__(/*! ./helpers/normalizeHeaderName */ "./node_modules/axios/lib/helpers/normalizeHeaderName.js");
-
-var DEFAULT_CONTENT_TYPE = {
-  'Content-Type': 'application/x-www-form-urlencoded'
-};
-
-function setContentTypeIfUnset(headers, value) {
-  if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {
-    headers['Content-Type'] = value;
-  }
-}
-
-function getDefaultAdapter() {
-  var adapter;
-  if (typeof XMLHttpRequest !== 'undefined') {
-    // For browsers use XHR adapter
-    adapter = __webpack_require__(/*! ./adapters/xhr */ "./node_modules/axios/lib/adapters/xhr.js");
-  } else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
-    // For node use HTTP adapter
-    adapter = __webpack_require__(/*! ./adapters/http */ "./node_modules/axios/lib/adapters/xhr.js");
-  }
-  return adapter;
-}
-
-var defaults = {
-  adapter: getDefaultAdapter(),
-
-  transformRequest: [function transformRequest(data, headers) {
-    normalizeHeaderName(headers, 'Accept');
-    normalizeHeaderName(headers, 'Content-Type');
-    if (utils.isFormData(data) ||
-      utils.isArrayBuffer(data) ||
-      utils.isBuffer(data) ||
-      utils.isStream(data) ||
-      utils.isFile(data) ||
-      utils.isBlob(data)
-    ) {
-      return data;
-    }
-    if (utils.isArrayBufferView(data)) {
-      return data.buffer;
-    }
-    if (utils.isURLSearchParams(data)) {
-      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
-      return data.toString();
-    }
-    if (utils.isObject(data)) {
-      setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
-      return JSON.stringify(data);
-    }
-    return data;
-  }],
-
-  transformResponse: [function transformResponse(data) {
-    /*eslint no-param-reassign:0*/
-    if (typeof data === 'string') {
-      try {
-        data = JSON.parse(data);
-      } catch (e) { /* Ignore */ }
-    }
-    return data;
-  }],
-
-  /**
-   * A timeout in milliseconds to abort a request. If set to 0 (default) a
-   * timeout is not created.
-   */
-  timeout: 0,
-
-  xsrfCookieName: 'XSRF-TOKEN',
-  xsrfHeaderName: 'X-XSRF-TOKEN',
-
-  maxContentLength: -1,
-  maxBodyLength: -1,
-
-  validateStatus: function validateStatus(status) {
-    return status >= 200 && status < 300;
-  }
-};
-
-defaults.headers = {
-  common: {
-    'Accept': 'application/json, text/plain, */*'
-  }
-};
-
-utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {
-  defaults.headers[method] = {};
-});
-
-utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
-  defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
-});
-
-module.exports = defaults;
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/bind.js":
-/*!************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/bind.js ***!
-  \************************************************/
-/***/ ((module) => {
-
-"use strict";
-
-
-module.exports = function bind(fn, thisArg) {
-  return function wrap() {
-    var args = new Array(arguments.length);
-    for (var i = 0; i < args.length; i++) {
-      args[i] = arguments[i];
-    }
-    return fn.apply(thisArg, args);
-  };
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/buildURL.js":
-/*!****************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/buildURL.js ***!
-  \****************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./../utils */ "./node_modules/axios/lib/utils.js");
-
-function encode(val) {
-  return encodeURIComponent(val).
-    replace(/%3A/gi, ':').
-    replace(/%24/g, '$').
-    replace(/%2C/gi, ',').
-    replace(/%20/g, '+').
-    replace(/%5B/gi, '[').
-    replace(/%5D/gi, ']');
-}
-
-/**
- * Build a URL by appending params to the end
- *
- * @param {string} url The base of the url (e.g., http://www.google.com)
- * @param {object} [params] The params to be appended
- * @returns {string} The formatted url
- */
-module.exports = function buildURL(url, params, paramsSerializer) {
-  /*eslint no-param-reassign:0*/
-  if (!params) {
-    return url;
-  }
-
-  var serializedParams;
-  if (paramsSerializer) {
-    serializedParams = paramsSerializer(params);
-  } else if (utils.isURLSearchParams(params)) {
-    serializedParams = params.toString();
-  } else {
-    var parts = [];
-
-    utils.forEach(params, function serialize(val, key) {
-      if (val === null || typeof val === 'undefined') {
-        return;
-      }
-
-      if (utils.isArray(val)) {
-        key = key + '[]';
-      } else {
-        val = [val];
-      }
-
-      utils.forEach(val, function parseValue(v) {
-        if (utils.isDate(v)) {
-          v = v.toISOString();
-        } else if (utils.isObject(v)) {
-          v = JSON.stringify(v);
-        }
-        parts.push(encode(key) + '=' + encode(v));
-      });
-    });
-
-    serializedParams = parts.join('&');
-  }
-
-  if (serializedParams) {
-    var hashmarkIndex = url.indexOf('#');
-    if (hashmarkIndex !== -1) {
-      url = url.slice(0, hashmarkIndex);
-    }
-
-    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams;
-  }
-
-  return url;
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/combineURLs.js":
-/*!*******************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/combineURLs.js ***!
-  \*******************************************************/
-/***/ ((module) => {
-
-"use strict";
-
-
-/**
- * Creates a new URL by combining the specified URLs
- *
- * @param {string} baseURL The base URL
- * @param {string} relativeURL The relative URL
- * @returns {string} The combined URL
- */
-module.exports = function combineURLs(baseURL, relativeURL) {
-  return relativeURL
-    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
-    : baseURL;
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/cookies.js":
-/*!***************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/cookies.js ***!
-  \***************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./../utils */ "./node_modules/axios/lib/utils.js");
-
-module.exports = (
-  utils.isStandardBrowserEnv() ?
-
-  // Standard browser envs support document.cookie
-    (function standardBrowserEnv() {
-      return {
-        write: function write(name, value, expires, path, domain, secure) {
-          var cookie = [];
-          cookie.push(name + '=' + encodeURIComponent(value));
-
-          if (utils.isNumber(expires)) {
-            cookie.push('expires=' + new Date(expires).toGMTString());
-          }
-
-          if (utils.isString(path)) {
-            cookie.push('path=' + path);
-          }
-
-          if (utils.isString(domain)) {
-            cookie.push('domain=' + domain);
-          }
-
-          if (secure === true) {
-            cookie.push('secure');
-          }
-
-          document.cookie = cookie.join('; ');
-        },
-
-        read: function read(name) {
-          var match = document.cookie.match(new RegExp('(^|;\\s*)(' + name + ')=([^;]*)'));
-          return (match ? decodeURIComponent(match[3]) : null);
-        },
-
-        remove: function remove(name) {
-          this.write(name, '', Date.now() - 86400000);
-        }
-      };
-    })() :
-
-  // Non standard browser env (web workers, react-native) lack needed support.
-    (function nonStandardBrowserEnv() {
-      return {
-        write: function write() {},
-        read: function read() { return null; },
-        remove: function remove() {}
-      };
-    })()
-);
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/isAbsoluteURL.js":
-/*!*********************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/isAbsoluteURL.js ***!
-  \*********************************************************/
-/***/ ((module) => {
-
-"use strict";
-
-
-/**
- * Determines whether the specified URL is absolute
- *
- * @param {string} url The URL to test
- * @returns {boolean} True if the specified URL is absolute, otherwise false
- */
-module.exports = function isAbsoluteURL(url) {
-  // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
-  // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
-  // by any combination of letters, digits, plus, period, or hyphen.
-  return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/isAxiosError.js":
-/*!********************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/isAxiosError.js ***!
-  \********************************************************/
-/***/ ((module) => {
-
-"use strict";
-
-
-/**
- * Determines whether the payload is an error thrown by Axios
- *
- * @param {*} payload The value to test
- * @returns {boolean} True if the payload is an error thrown by Axios, otherwise false
- */
-module.exports = function isAxiosError(payload) {
-  return (typeof payload === 'object') && (payload.isAxiosError === true);
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/isURLSameOrigin.js":
-/*!***********************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/isURLSameOrigin.js ***!
-  \***********************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./../utils */ "./node_modules/axios/lib/utils.js");
-
-module.exports = (
-  utils.isStandardBrowserEnv() ?
-
-  // Standard browser envs have full support of the APIs needed to test
-  // whether the request URL is of the same origin as current location.
-    (function standardBrowserEnv() {
-      var msie = /(msie|trident)/i.test(navigator.userAgent);
-      var urlParsingNode = document.createElement('a');
-      var originURL;
-
-      /**
-    * Parse a URL to discover it's components
-    *
-    * @param {String} url The URL to be parsed
-    * @returns {Object}
-    */
-      function resolveURL(url) {
-        var href = url;
-
-        if (msie) {
-        // IE needs attribute set twice to normalize properties
-          urlParsingNode.setAttribute('href', href);
-          href = urlParsingNode.href;
-        }
-
-        urlParsingNode.setAttribute('href', href);
-
-        // urlParsingNode provides the UrlUtils interface - http://url.spec.whatwg.org/#urlutils
-        return {
-          href: urlParsingNode.href,
-          protocol: urlParsingNode.protocol ? urlParsingNode.protocol.replace(/:$/, '') : '',
-          host: urlParsingNode.host,
-          search: urlParsingNode.search ? urlParsingNode.search.replace(/^\?/, '') : '',
-          hash: urlParsingNode.hash ? urlParsingNode.hash.replace(/^#/, '') : '',
-          hostname: urlParsingNode.hostname,
-          port: urlParsingNode.port,
-          pathname: (urlParsingNode.pathname.charAt(0) === '/') ?
-            urlParsingNode.pathname :
-            '/' + urlParsingNode.pathname
-        };
-      }
-
-      originURL = resolveURL(window.location.href);
-
-      /**
-    * Determine if a URL shares the same origin as the current location
-    *
-    * @param {String} requestURL The URL to test
-    * @returns {boolean} True if URL shares the same origin, otherwise false
-    */
-      return function isURLSameOrigin(requestURL) {
-        var parsed = (utils.isString(requestURL)) ? resolveURL(requestURL) : requestURL;
-        return (parsed.protocol === originURL.protocol &&
-            parsed.host === originURL.host);
-      };
-    })() :
-
-  // Non standard browser envs (web workers, react-native) lack needed support.
-    (function nonStandardBrowserEnv() {
-      return function isURLSameOrigin() {
-        return true;
-      };
-    })()
-);
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/normalizeHeaderName.js":
-/*!***************************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/normalizeHeaderName.js ***!
-  \***************************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ../utils */ "./node_modules/axios/lib/utils.js");
-
-module.exports = function normalizeHeaderName(headers, normalizedName) {
-  utils.forEach(headers, function processHeader(value, name) {
-    if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) {
-      headers[normalizedName] = value;
-      delete headers[name];
-    }
-  });
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/parseHeaders.js":
-/*!********************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/parseHeaders.js ***!
-  \********************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var utils = __webpack_require__(/*! ./../utils */ "./node_modules/axios/lib/utils.js");
-
-// Headers whose duplicates are ignored by node
-// c.f. https://nodejs.org/api/http.html#http_message_headers
-var ignoreDuplicateOf = [
-  'age', 'authorization', 'content-length', 'content-type', 'etag',
-  'expires', 'from', 'host', 'if-modified-since', 'if-unmodified-since',
-  'last-modified', 'location', 'max-forwards', 'proxy-authorization',
-  'referer', 'retry-after', 'user-agent'
-];
-
-/**
- * Parse headers into an object
- *
- * ```
- * Date: Wed, 27 Aug 2014 08:58:49 GMT
- * Content-Type: application/json
- * Connection: keep-alive
- * Transfer-Encoding: chunked
- * ```
- *
- * @param {String} headers Headers needing to be parsed
- * @returns {Object} Headers parsed into an object
- */
-module.exports = function parseHeaders(headers) {
-  var parsed = {};
-  var key;
-  var val;
-  var i;
-
-  if (!headers) { return parsed; }
-
-  utils.forEach(headers.split('\n'), function parser(line) {
-    i = line.indexOf(':');
-    key = utils.trim(line.substr(0, i)).toLowerCase();
-    val = utils.trim(line.substr(i + 1));
-
-    if (key) {
-      if (parsed[key] && ignoreDuplicateOf.indexOf(key) >= 0) {
-        return;
-      }
-      if (key === 'set-cookie') {
-        parsed[key] = (parsed[key] ? parsed[key] : []).concat([val]);
-      } else {
-        parsed[key] = parsed[key] ? parsed[key] + ', ' + val : val;
-      }
-    }
-  });
-
-  return parsed;
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/helpers/spread.js":
-/*!**************************************************!*\
-  !*** ./node_modules/axios/lib/helpers/spread.js ***!
-  \**************************************************/
-/***/ ((module) => {
-
-"use strict";
-
-
-/**
- * Syntactic sugar for invoking a function and expanding an array for arguments.
- *
- * Common use case would be to use `Function.prototype.apply`.
- *
- *  ```js
- *  function f(x, y, z) {}
- *  var args = [1, 2, 3];
- *  f.apply(null, args);
- *  ```
- *
- * With `spread` this example can be re-written.
- *
- *  ```js
- *  spread(function(x, y, z) {})([1, 2, 3]);
- *  ```
- *
- * @param {Function} callback
- * @returns {Function}
- */
-module.exports = function spread(callback) {
-  return function wrap(arr) {
-    return callback.apply(null, arr);
-  };
-};
-
-
-/***/ }),
-
-/***/ "./node_modules/axios/lib/utils.js":
-/*!*****************************************!*\
-  !*** ./node_modules/axios/lib/utils.js ***!
-  \*****************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-var bind = __webpack_require__(/*! ./helpers/bind */ "./node_modules/axios/lib/helpers/bind.js");
-
-/*global toString:true*/
-
-// utils is a library of generic helper functions non-specific to axios
-
-var toString = Object.prototype.toString;
-
-/**
- * Determine if a value is an Array
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is an Array, otherwise false
- */
-function isArray(val) {
-  return toString.call(val) === '[object Array]';
-}
-
-/**
- * Determine if a value is undefined
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if the value is undefined, otherwise false
- */
-function isUndefined(val) {
-  return typeof val === 'undefined';
-}
-
-/**
- * Determine if a value is a Buffer
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Buffer, otherwise false
- */
-function isBuffer(val) {
-  return val !== null && !isUndefined(val) && val.constructor !== null && !isUndefined(val.constructor)
-    && typeof val.constructor.isBuffer === 'function' && val.constructor.isBuffer(val);
-}
-
-/**
- * Determine if a value is an ArrayBuffer
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is an ArrayBuffer, otherwise false
- */
-function isArrayBuffer(val) {
-  return toString.call(val) === '[object ArrayBuffer]';
-}
-
-/**
- * Determine if a value is a FormData
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is an FormData, otherwise false
- */
-function isFormData(val) {
-  return (typeof FormData !== 'undefined') && (val instanceof FormData);
-}
-
-/**
- * Determine if a value is a view on an ArrayBuffer
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a view on an ArrayBuffer, otherwise false
- */
-function isArrayBufferView(val) {
-  var result;
-  if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {
-    result = ArrayBuffer.isView(val);
-  } else {
-    result = (val) && (val.buffer) && (val.buffer instanceof ArrayBuffer);
-  }
-  return result;
-}
-
-/**
- * Determine if a value is a String
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a String, otherwise false
- */
-function isString(val) {
-  return typeof val === 'string';
-}
-
-/**
- * Determine if a value is a Number
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Number, otherwise false
- */
-function isNumber(val) {
-  return typeof val === 'number';
-}
-
-/**
- * Determine if a value is an Object
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is an Object, otherwise false
- */
-function isObject(val) {
-  return val !== null && typeof val === 'object';
-}
-
-/**
- * Determine if a value is a plain Object
- *
- * @param {Object} val The value to test
- * @return {boolean} True if value is a plain Object, otherwise false
- */
-function isPlainObject(val) {
-  if (toString.call(val) !== '[object Object]') {
-    return false;
-  }
-
-  var prototype = Object.getPrototypeOf(val);
-  return prototype === null || prototype === Object.prototype;
-}
-
-/**
- * Determine if a value is a Date
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Date, otherwise false
- */
-function isDate(val) {
-  return toString.call(val) === '[object Date]';
-}
-
-/**
- * Determine if a value is a File
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a File, otherwise false
- */
-function isFile(val) {
-  return toString.call(val) === '[object File]';
-}
-
-/**
- * Determine if a value is a Blob
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Blob, otherwise false
- */
-function isBlob(val) {
-  return toString.call(val) === '[object Blob]';
-}
-
-/**
- * Determine if a value is a Function
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Function, otherwise false
- */
-function isFunction(val) {
-  return toString.call(val) === '[object Function]';
-}
-
-/**
- * Determine if a value is a Stream
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Stream, otherwise false
- */
-function isStream(val) {
-  return isObject(val) && isFunction(val.pipe);
-}
-
-/**
- * Determine if a value is a URLSearchParams object
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a URLSearchParams object, otherwise false
- */
-function isURLSearchParams(val) {
-  return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams;
-}
-
-/**
- * Trim excess whitespace off the beginning and end of a string
- *
- * @param {String} str The String to trim
- * @returns {String} The String freed of excess whitespace
- */
-function trim(str) {
-  return str.replace(/^\s*/, '').replace(/\s*$/, '');
-}
-
-/**
- * Determine if we're running in a standard browser environment
- *
- * This allows axios to run in a web worker, and react-native.
- * Both environments support XMLHttpRequest, but not fully standard globals.
- *
- * web workers:
- *  typeof window -> undefined
- *  typeof document -> undefined
- *
- * react-native:
- *  navigator.product -> 'ReactNative'
- * nativescript
- *  navigator.product -> 'NativeScript' or 'NS'
- */
-function isStandardBrowserEnv() {
-  if (typeof navigator !== 'undefined' && (navigator.product === 'ReactNative' ||
-                                           navigator.product === 'NativeScript' ||
-                                           navigator.product === 'NS')) {
-    return false;
-  }
-  return (
-    typeof window !== 'undefined' &&
-    typeof document !== 'undefined'
-  );
-}
-
-/**
- * Iterate over an Array or an Object invoking a function for each item.
- *
- * If `obj` is an Array callback will be called passing
- * the value, index, and complete array for each item.
- *
- * If 'obj' is an Object callback will be called passing
- * the value, key, and complete object for each property.
- *
- * @param {Object|Array} obj The object to iterate
- * @param {Function} fn The callback to invoke for each item
- */
-function forEach(obj, fn) {
-  // Don't bother if no value provided
-  if (obj === null || typeof obj === 'undefined') {
-    return;
-  }
-
-  // Force an array if not already something iterable
-  if (typeof obj !== 'object') {
-    /*eslint no-param-reassign:0*/
-    obj = [obj];
-  }
-
-  if (isArray(obj)) {
-    // Iterate over array values
-    for (var i = 0, l = obj.length; i < l; i++) {
-      fn.call(null, obj[i], i, obj);
-    }
-  } else {
-    // Iterate over object keys
-    for (var key in obj) {
-      if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        fn.call(null, obj[key], key, obj);
-      }
-    }
-  }
-}
-
-/**
- * Accepts varargs expecting each argument to be an object, then
- * immutably merges the properties of each object and returns result.
- *
- * When multiple objects contain the same key the later object in
- * the arguments list will take precedence.
- *
- * Example:
- *
- * ```js
- * var result = merge({foo: 123}, {foo: 456});
- * console.log(result.foo); // outputs 456
- * ```
- *
- * @param {Object} obj1 Object to merge
- * @returns {Object} Result of all merge properties
- */
-function merge(/* obj1, obj2, obj3, ... */) {
-  var result = {};
-  function assignValue(val, key) {
-    if (isPlainObject(result[key]) && isPlainObject(val)) {
-      result[key] = merge(result[key], val);
-    } else if (isPlainObject(val)) {
-      result[key] = merge({}, val);
-    } else if (isArray(val)) {
-      result[key] = val.slice();
-    } else {
-      result[key] = val;
-    }
-  }
-
-  for (var i = 0, l = arguments.length; i < l; i++) {
-    forEach(arguments[i], assignValue);
-  }
-  return result;
-}
-
-/**
- * Extends object a by mutably adding to it the properties of object b.
- *
- * @param {Object} a The object to be extended
- * @param {Object} b The object to copy properties from
- * @param {Object} thisArg The object to bind function to
- * @return {Object} The resulting value of object a
- */
-function extend(a, b, thisArg) {
-  forEach(b, function assignValue(val, key) {
-    if (thisArg && typeof val === 'function') {
-      a[key] = bind(val, thisArg);
-    } else {
-      a[key] = val;
-    }
-  });
-  return a;
-}
-
-/**
- * Remove byte order marker. This catches EF BB BF (the UTF-8 BOM)
- *
- * @param {string} content with BOM
- * @return {string} content value without BOM
- */
-function stripBOM(content) {
-  if (content.charCodeAt(0) === 0xFEFF) {
-    content = content.slice(1);
-  }
-  return content;
-}
-
-module.exports = {
-  isArray: isArray,
-  isArrayBuffer: isArrayBuffer,
-  isBuffer: isBuffer,
-  isFormData: isFormData,
-  isArrayBufferView: isArrayBufferView,
-  isString: isString,
-  isNumber: isNumber,
-  isObject: isObject,
-  isPlainObject: isPlainObject,
-  isUndefined: isUndefined,
-  isDate: isDate,
-  isFile: isFile,
-  isBlob: isBlob,
-  isFunction: isFunction,
-  isStream: isStream,
-  isURLSearchParams: isURLSearchParams,
-  isStandardBrowserEnv: isStandardBrowserEnv,
-  forEach: forEach,
-  merge: merge,
-  extend: extend,
-  trim: trim,
-  stripBOM: stripBOM
-};
-
-
-/***/ }),
-
-/***/ "./resources/js/index.js":
-/*!*******************************!*\
-  !*** ./resources/js/index.js ***!
-  \*******************************/
-/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
-
-window.axios = __webpack_require__(/*! axios */ "./node_modules/axios/index.js");
-window.riot = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js");
-
-/***/ }),
-
-/***/ "./resources/scss/index.scss":
-/*!***********************************!*\
-  !*** ./resources/scss/index.scss ***!
-  \***********************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-
-/***/ }),
-
-/***/ "./node_modules/process/browser.js":
-/*!*****************************************!*\
-  !*** ./node_modules/process/browser.js ***!
-  \*****************************************/
-/***/ ((module) => {
-
-// shim for using process in browser
-var process = module.exports = {};
-
-// cached from whatever global is present so that test runners that stub it
-// don't break things.  But we need to wrap it in a try catch in case it is
-// wrapped in strict mode code which doesn't define any globals.  It's inside a
-// function because try/catches deoptimize in certain engines.
-
-var cachedSetTimeout;
-var cachedClearTimeout;
-
-function defaultSetTimout() {
-    throw new Error('setTimeout has not been defined');
-}
-function defaultClearTimeout () {
-    throw new Error('clearTimeout has not been defined');
-}
-(function () {
-    try {
-        if (typeof setTimeout === 'function') {
-            cachedSetTimeout = setTimeout;
-        } else {
-            cachedSetTimeout = defaultSetTimout;
-        }
-    } catch (e) {
-        cachedSetTimeout = defaultSetTimout;
-    }
-    try {
-        if (typeof clearTimeout === 'function') {
-            cachedClearTimeout = clearTimeout;
-        } else {
-            cachedClearTimeout = defaultClearTimeout;
-        }
-    } catch (e) {
-        cachedClearTimeout = defaultClearTimeout;
-    }
-} ())
-function runTimeout(fun) {
-    if (cachedSetTimeout === setTimeout) {
-        //normal enviroments in sane situations
-        return setTimeout(fun, 0);
-    }
-    // if setTimeout wasn't available but was latter defined
-    if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
-        cachedSetTimeout = setTimeout;
-        return setTimeout(fun, 0);
-    }
-    try {
-        // when when somebody has screwed with setTimeout but no I.E. maddness
-        return cachedSetTimeout(fun, 0);
-    } catch(e){
-        try {
-            // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
-            return cachedSetTimeout.call(null, fun, 0);
-        } catch(e){
-            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
-            return cachedSetTimeout.call(this, fun, 0);
-        }
-    }
-
-
-}
-function runClearTimeout(marker) {
-    if (cachedClearTimeout === clearTimeout) {
-        //normal enviroments in sane situations
-        return clearTimeout(marker);
-    }
-    // if clearTimeout wasn't available but was latter defined
-    if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
-        cachedClearTimeout = clearTimeout;
-        return clearTimeout(marker);
-    }
-    try {
-        // when when somebody has screwed with setTimeout but no I.E. maddness
-        return cachedClearTimeout(marker);
-    } catch (e){
-        try {
-            // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
-            return cachedClearTimeout.call(null, marker);
-        } catch (e){
-            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
-            // Some versions of I.E. have different rules for clearTimeout vs setTimeout
-            return cachedClearTimeout.call(this, marker);
-        }
-    }
-
-
-
-}
-var queue = [];
-var draining = false;
-var currentQueue;
-var queueIndex = -1;
-
-function cleanUpNextTick() {
-    if (!draining || !currentQueue) {
-        return;
-    }
-    draining = false;
-    if (currentQueue.length) {
-        queue = currentQueue.concat(queue);
-    } else {
-        queueIndex = -1;
-    }
-    if (queue.length) {
-        drainQueue();
-    }
-}
-
-function drainQueue() {
-    if (draining) {
-        return;
-    }
-    var timeout = runTimeout(cleanUpNextTick);
-    draining = true;
-
-    var len = queue.length;
-    while(len) {
-        currentQueue = queue;
-        queue = [];
-        while (++queueIndex < len) {
-            if (currentQueue) {
-                currentQueue[queueIndex].run();
-            }
-        }
-        queueIndex = -1;
-        len = queue.length;
-    }
-    currentQueue = null;
-    draining = false;
-    runClearTimeout(timeout);
-}
-
-process.nextTick = function (fun) {
-    var args = new Array(arguments.length - 1);
-    if (arguments.length > 1) {
-        for (var i = 1; i < arguments.length; i++) {
-            args[i - 1] = arguments[i];
-        }
-    }
-    queue.push(new Item(fun, args));
-    if (queue.length === 1 && !draining) {
-        runTimeout(drainQueue);
-    }
-};
-
-// v8 likes predictible objects
-function Item(fun, array) {
-    this.fun = fun;
-    this.array = array;
-}
-Item.prototype.run = function () {
-    this.fun.apply(null, this.array);
-};
-process.title = 'browser';
-process.browser = true;
-process.env = {};
-process.argv = [];
-process.version = ''; // empty string to avoid regexp issues
-process.versions = {};
-
-function noop() {}
-
-process.on = noop;
-process.addListener = noop;
-process.once = noop;
-process.off = noop;
-process.removeListener = noop;
-process.removeAllListeners = noop;
-process.emit = noop;
-process.prependListener = noop;
-process.prependOnceListener = noop;
-
-process.listeners = function (name) { return [] }
-
-process.binding = function (name) {
-    throw new Error('process.binding is not supported');
-};
-
-process.cwd = function () { return '/' };
-process.chdir = function (dir) {
-    throw new Error('process.chdir is not supported');
-};
-process.umask = function() { return 0; };
-
-
-/***/ }),
-
-/***/ "./node_modules/riot/riot.esm.js":
-/*!***************************************!*\
-  !*** ./node_modules/riot/riot.esm.js ***!
-  \***************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "__": () => (/* binding */ __),
-/* harmony export */   "component": () => (/* binding */ component),
-/* harmony export */   "install": () => (/* binding */ install),
-/* harmony export */   "mount": () => (/* binding */ mount),
-/* harmony export */   "pure": () => (/* binding */ pure),
-/* harmony export */   "register": () => (/* binding */ register),
-/* harmony export */   "uninstall": () => (/* binding */ uninstall),
-/* harmony export */   "unmount": () => (/* binding */ unmount),
-/* harmony export */   "unregister": () => (/* binding */ unregister),
-/* harmony export */   "version": () => (/* binding */ version),
-/* harmony export */   "withTypes": () => (/* binding */ withTypes)
-/* harmony export */ });
-/* Riot v6.0.1, @license MIT */
-/**
- * Convert a string from camel case to dash-case
- * @param   {string} string - probably a component tag name
- * @returns {string} component name normalized
- */
-function camelToDashCase(string) {
-  return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-}
-/**
- * Convert a string containing dashes to camel case
- * @param   {string} string - input string
- * @returns {string} my-string -> myString
- */
-
-function dashToCamelCase(string) {
-  return string.replace(/-(\w)/g, (_, c) => c.toUpperCase());
-}
-
-/**
- * Get all the element attributes as object
- * @param   {HTMLElement} element - DOM node we want to parse
- * @returns {Object} all the attributes found as a key value pairs
- */
-
-function DOMattributesToObject(element) {
-  return Array.from(element.attributes).reduce((acc, attribute) => {
-    acc[dashToCamelCase(attribute.name)] = attribute.value;
-    return acc;
-  }, {});
-}
-/**
- * Move all the child nodes from a source tag to another
- * @param   {HTMLElement} source - source node
- * @param   {HTMLElement} target - target node
- * @returns {undefined} it's a void method ¯\_(ツ)_/¯
- */
-// Ignore this helper because it's needed only for svg tags
-
-function moveChildren(source, target) {
-  if (source.firstChild) {
-    target.appendChild(source.firstChild);
-    moveChildren(source, target);
-  }
-}
-/**
- * Remove the child nodes from any DOM node
- * @param   {HTMLElement} node - target node
- * @returns {undefined}
- */
-
-function cleanNode(node) {
-  clearChildren(node.childNodes);
-}
-/**
- * Clear multiple children in a node
- * @param   {HTMLElement[]} children - direct children nodes
- * @returns {undefined}
- */
-
-function clearChildren(children) {
-  Array.from(children).forEach(removeChild);
-}
-/**
- * Remove a node
- * @param {HTMLElement}node - node to remove
- * @returns {undefined}
- */
-
-const removeChild = node => node && node.parentNode && node.parentNode.removeChild(node);
-/**
- * Insert before a node
- * @param {HTMLElement} newNode - node to insert
- * @param {HTMLElement} refNode - ref child
- * @returns {undefined}
- */
-
-const insertBefore = (newNode, refNode) => refNode && refNode.parentNode && refNode.parentNode.insertBefore(newNode, refNode);
-/**
- * Replace a node
- * @param {HTMLElement} newNode - new node to add to the DOM
- * @param {HTMLElement} replaced - node to replace
- * @returns {undefined}
- */
-
-const replaceChild = (newNode, replaced) => replaced && replaced.parentNode && replaced.parentNode.replaceChild(newNode, replaced);
-
-// Riot.js constants that can be used accross more modules
-const COMPONENTS_IMPLEMENTATION_MAP$1 = new Map(),
-      DOM_COMPONENT_INSTANCE_PROPERTY$1 = Symbol('riot-component'),
-      PLUGINS_SET$1 = new Set(),
-      IS_DIRECTIVE = 'is',
-      VALUE_ATTRIBUTE = 'value',
-      MOUNT_METHOD_KEY = 'mount',
-      UPDATE_METHOD_KEY = 'update',
-      UNMOUNT_METHOD_KEY = 'unmount',
-      SHOULD_UPDATE_KEY = 'shouldUpdate',
-      ON_BEFORE_MOUNT_KEY = 'onBeforeMount',
-      ON_MOUNTED_KEY = 'onMounted',
-      ON_BEFORE_UPDATE_KEY = 'onBeforeUpdate',
-      ON_UPDATED_KEY = 'onUpdated',
-      ON_BEFORE_UNMOUNT_KEY = 'onBeforeUnmount',
-      ON_UNMOUNTED_KEY = 'onUnmounted',
-      PROPS_KEY = 'props',
-      STATE_KEY = 'state',
-      SLOTS_KEY = 'slots',
-      ROOT_KEY = 'root',
-      IS_PURE_SYMBOL = Symbol('pure'),
-      IS_COMPONENT_UPDATING = Symbol('is_updating'),
-      PARENT_KEY_SYMBOL = Symbol('parent'),
-      ATTRIBUTES_KEY_SYMBOL = Symbol('attributes'),
-      TEMPLATE_KEY_SYMBOL = Symbol('template');
-
-var globals = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  COMPONENTS_IMPLEMENTATION_MAP: COMPONENTS_IMPLEMENTATION_MAP$1,
-  DOM_COMPONENT_INSTANCE_PROPERTY: DOM_COMPONENT_INSTANCE_PROPERTY$1,
-  PLUGINS_SET: PLUGINS_SET$1,
-  IS_DIRECTIVE: IS_DIRECTIVE,
-  VALUE_ATTRIBUTE: VALUE_ATTRIBUTE,
-  MOUNT_METHOD_KEY: MOUNT_METHOD_KEY,
-  UPDATE_METHOD_KEY: UPDATE_METHOD_KEY,
-  UNMOUNT_METHOD_KEY: UNMOUNT_METHOD_KEY,
-  SHOULD_UPDATE_KEY: SHOULD_UPDATE_KEY,
-  ON_BEFORE_MOUNT_KEY: ON_BEFORE_MOUNT_KEY,
-  ON_MOUNTED_KEY: ON_MOUNTED_KEY,
-  ON_BEFORE_UPDATE_KEY: ON_BEFORE_UPDATE_KEY,
-  ON_UPDATED_KEY: ON_UPDATED_KEY,
-  ON_BEFORE_UNMOUNT_KEY: ON_BEFORE_UNMOUNT_KEY,
-  ON_UNMOUNTED_KEY: ON_UNMOUNTED_KEY,
-  PROPS_KEY: PROPS_KEY,
-  STATE_KEY: STATE_KEY,
-  SLOTS_KEY: SLOTS_KEY,
-  ROOT_KEY: ROOT_KEY,
-  IS_PURE_SYMBOL: IS_PURE_SYMBOL,
-  IS_COMPONENT_UPDATING: IS_COMPONENT_UPDATING,
-  PARENT_KEY_SYMBOL: PARENT_KEY_SYMBOL,
-  ATTRIBUTES_KEY_SYMBOL: ATTRIBUTES_KEY_SYMBOL,
-  TEMPLATE_KEY_SYMBOL: TEMPLATE_KEY_SYMBOL
-});
-
-const EACH = 0;
-const IF = 1;
-const SIMPLE = 2;
-const TAG = 3;
-const SLOT = 4;
-var bindingTypes = {
-  EACH,
-  IF,
-  SIMPLE,
-  TAG,
-  SLOT
-};
-
-const ATTRIBUTE = 0;
-const EVENT = 1;
-const TEXT = 2;
-const VALUE = 3;
-var expressionTypes = {
-  ATTRIBUTE,
-  EVENT,
-  TEXT,
-  VALUE
-};
-
-const HEAD_SYMBOL = Symbol('head');
-const TAIL_SYMBOL = Symbol('tail');
-
-/**
- * Create the <template> fragments text nodes
- * @return {Object} {{head: Text, tail: Text}}
- */
-
-function createHeadTailPlaceholders() {
-  const head = document.createTextNode('');
-  const tail = document.createTextNode('');
-  head[HEAD_SYMBOL] = true;
-  tail[TAIL_SYMBOL] = true;
-  return {
-    head,
-    tail
-  };
-}
-
-/**
- * Create the template meta object in case of <template> fragments
- * @param   {TemplateChunk} componentTemplate - template chunk object
- * @returns {Object} the meta property that will be passed to the mount function of the TemplateChunk
- */
-
-function createTemplateMeta(componentTemplate) {
-  const fragment = componentTemplate.dom.cloneNode(true);
-  const {
-    head,
-    tail
-  } = createHeadTailPlaceholders();
-  return {
-    avoidDOMInjection: true,
-    fragment,
-    head,
-    tail,
-    children: [head, ...Array.from(fragment.childNodes), tail]
-  };
-}
-
-/**
- * Helper function to set an immutable property
- * @param   {Object} source - object where the new property will be set
- * @param   {string} key - object key where the new property will be stored
- * @param   {*} value - value of the new property
- * @param   {Object} options - set the propery overriding the default options
- * @returns {Object} - the original object modified
- */
-function defineProperty(source, key, value, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  /* eslint-disable fp/no-mutating-methods */
-  Object.defineProperty(source, key, Object.assign({
-    value,
-    enumerable: false,
-    writable: false,
-    configurable: true
-  }, options));
-  /* eslint-enable fp/no-mutating-methods */
-
-  return source;
-}
-/**
- * Define multiple properties on a target object
- * @param   {Object} source - object where the new properties will be set
- * @param   {Object} properties - object containing as key pair the key + value properties
- * @param   {Object} options - set the propery overriding the default options
- * @returns {Object} the original object modified
- */
-
-function defineProperties(source, properties, options) {
-  Object.entries(properties).forEach(_ref => {
-    let [key, value] = _ref;
-    defineProperty(source, key, value, options);
-  });
-  return source;
-}
-/**
- * Define default properties if they don't exist on the source object
- * @param   {Object} source - object that will receive the default properties
- * @param   {Object} defaults - object containing additional optional keys
- * @returns {Object} the original object received enhanced
- */
-
-function defineDefaults(source, defaults) {
-  Object.entries(defaults).forEach(_ref2 => {
-    let [key, value] = _ref2;
-    if (!source[key]) source[key] = value;
-  });
-  return source;
-}
-
-/**
- * Get the current <template> fragment children located in between the head and tail comments
- * @param {Comment} head - head comment node
- * @param {Comment} tail - tail comment node
- * @return {Array[]} children list of the nodes found in this template fragment
- */
-
-function getFragmentChildren(_ref) {
-  let {
-    head,
-    tail
-  } = _ref;
-  const nodes = walkNodes([head], head.nextSibling, n => n === tail, false);
-  nodes.push(tail);
-  return nodes;
-}
-/**
- * Recursive function to walk all the <template> children nodes
- * @param {Array[]} children - children nodes collection
- * @param {ChildNode} node - current node
- * @param {Function} check - exit function check
- * @param {boolean} isFilterActive - filter flag to skip nodes managed by other bindings
- * @returns {Array[]} children list of the nodes found in this template fragment
- */
-
-function walkNodes(children, node, check, isFilterActive) {
-  const {
-    nextSibling
-  } = node; // filter tail and head nodes together with all the nodes in between
-  // this is needed only to fix a really ugly edge case https://github.com/riot/riot/issues/2892
-
-  if (!isFilterActive && !node[HEAD_SYMBOL] && !node[TAIL_SYMBOL]) {
-    children.push(node);
-  }
-
-  if (!nextSibling || check(node)) return children;
-  return walkNodes(children, nextSibling, check, // activate the filters to skip nodes between <template> fragments that will be managed by other bindings
-  isFilterActive && !node[TAIL_SYMBOL] || nextSibling[HEAD_SYMBOL]);
-}
-
-/**
- * Quick type checking
- * @param   {*} element - anything
- * @param   {string} type - type definition
- * @returns {boolean} true if the type corresponds
- */
-function checkType(element, type) {
-  return typeof element === type;
-}
-/**
- * Check if an element is part of an svg
- * @param   {HTMLElement}  el - element to check
- * @returns {boolean} true if we are in an svg context
- */
-
-function isSvg(el) {
-  const owner = el.ownerSVGElement;
-  return !!owner || owner === null;
-}
-/**
- * Check if an element is a template tag
- * @param   {HTMLElement}  el - element to check
- * @returns {boolean} true if it's a <template>
- */
-
-function isTemplate(el) {
-  return el.tagName.toLowerCase() === 'template';
-}
-/**
- * Check that will be passed if its argument is a function
- * @param   {*} value - value to check
- * @returns {boolean} - true if the value is a function
- */
-
-function isFunction(value) {
-  return checkType(value, 'function');
-}
-/**
- * Check if a value is a Boolean
- * @param   {*}  value - anything
- * @returns {boolean} true only for the value is a boolean
- */
-
-function isBoolean(value) {
-  return checkType(value, 'boolean');
-}
-/**
- * Check if a value is an Object
- * @param   {*}  value - anything
- * @returns {boolean} true only for the value is an object
- */
-
-function isObject(value) {
-  return !isNil(value) && value.constructor === Object;
-}
-/**
- * Check if a value is null or undefined
- * @param   {*}  value - anything
- * @returns {boolean} true only for the 'undefined' and 'null' types
- */
-
-function isNil(value) {
-  return value === null || value === undefined;
-}
-
-/**
- * ISC License
- *
- * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
- *
- * Permission to use, copy, modify, and/or distribute this software for any
- * purpose with or without fee is hereby granted, provided that the above
- * copyright notice and this permission notice appear in all copies.
- *
- * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
- * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
- * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
- * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
- * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
- * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
- * PERFORMANCE OF THIS SOFTWARE.
- */
-// fork of https://github.com/WebReflection/udomdiff version 1.1.0
-// due to https://github.com/WebReflection/udomdiff/pull/2
-
-/* eslint-disable */
-
-/**
- * @param {Node[]} a The list of current/live children
- * @param {Node[]} b The list of future children
- * @param {(entry: Node, action: number) => Node} get
- * The callback invoked per each entry related DOM operation.
- * @param {Node} [before] The optional node used as anchor to insert before.
- * @returns {Node[]} The same list of future children.
- */
-
-var udomdiff = ((a, b, get, before) => {
-  const bLength = b.length;
-  let aEnd = a.length;
-  let bEnd = bLength;
-  let aStart = 0;
-  let bStart = 0;
-  let map = null;
-
-  while (aStart < aEnd || bStart < bEnd) {
-    // append head, tail, or nodes in between: fast path
-    if (aEnd === aStart) {
-      // we could be in a situation where the rest of nodes that
-      // need to be added are not at the end, and in such case
-      // the node to `insertBefore`, if the index is more than 0
-      // must be retrieved, otherwise it's gonna be the first item.
-      const node = bEnd < bLength ? bStart ? get(b[bStart - 1], -0).nextSibling : get(b[bEnd - bStart], 0) : before;
-
-      while (bStart < bEnd) insertBefore(get(b[bStart++], 1), node);
-    } // remove head or tail: fast path
-    else if (bEnd === bStart) {
-        while (aStart < aEnd) {
-          // remove the node only if it's unknown or not live
-          if (!map || !map.has(a[aStart])) removeChild(get(a[aStart], -1));
-          aStart++;
-        }
-      } // same node: fast path
-      else if (a[aStart] === b[bStart]) {
-          aStart++;
-          bStart++;
-        } // same tail: fast path
-        else if (a[aEnd - 1] === b[bEnd - 1]) {
-            aEnd--;
-            bEnd--;
-          } // The once here single last swap "fast path" has been removed in v1.1.0
-          // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
-          // reverse swap: also fast path
-          else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-              // this is a "shrink" operation that could happen in these cases:
-              // [1, 2, 3, 4, 5]
-              // [1, 4, 3, 2, 5]
-              // or asymmetric too
-              // [1, 2, 3, 4, 5]
-              // [1, 2, 3, 5, 6, 4]
-              const node = get(a[--aEnd], -1).nextSibling;
-              insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling);
-              insertBefore(get(b[--bEnd], 1), node); // mark the future index as identical (yeah, it's dirty, but cheap 👍)
-              // The main reason to do this, is that when a[aEnd] will be reached,
-              // the loop will likely be on the fast path, as identical to b[bEnd].
-              // In the best case scenario, the next loop will skip the tail,
-              // but in the worst one, this node will be considered as already
-              // processed, bailing out pretty quickly from the map index check
-
-              a[aEnd] = b[bEnd];
-            } // map based fallback, "slow" path
-            else {
-                // the map requires an O(bEnd - bStart) operation once
-                // to store all future nodes indexes for later purposes.
-                // In the worst case scenario, this is a full O(N) cost,
-                // and such scenario happens at least when all nodes are different,
-                // but also if both first and last items of the lists are different
-                if (!map) {
-                  map = new Map();
-                  let i = bStart;
-
-                  while (i < bEnd) map.set(b[i], i++);
-                } // if it's a future node, hence it needs some handling
-
-
-                if (map.has(a[aStart])) {
-                  // grab the index of such node, 'cause it might have been processed
-                  const index = map.get(a[aStart]); // if it's not already processed, look on demand for the next LCS
-
-                  if (bStart < index && index < bEnd) {
-                    let i = aStart; // counts the amount of nodes that are the same in the future
-
-                    let sequence = 1;
-
-                    while (++i < aEnd && i < bEnd && map.get(a[i]) === index + sequence) sequence++; // effort decision here: if the sequence is longer than replaces
-                    // needed to reach such sequence, which would brings again this loop
-                    // to the fast path, prepend the difference before a sequence,
-                    // and move only the future list index forward, so that aStart
-                    // and bStart will be aligned again, hence on the fast path.
-                    // An example considering aStart and bStart are both 0:
-                    // a: [1, 2, 3, 4]
-                    // b: [7, 1, 2, 3, 6]
-                    // this would place 7 before 1 and, from that time on, 1, 2, and 3
-                    // will be processed at zero cost
-
-
-                    if (sequence > index - bStart) {
-                      const node = get(a[aStart], 0);
-
-                      while (bStart < index) insertBefore(get(b[bStart++], 1), node);
-                    } // if the effort wasn't good enough, fallback to a replace,
-                    // moving both source and target indexes forward, hoping that some
-                    // similar node will be found later on, to go back to the fast path
-                    else {
-                        replaceChild(get(b[bStart++], 1), get(a[aStart++], -1));
-                      }
-                  } // otherwise move the source forward, 'cause there's nothing to do
-                  else aStart++;
-                } // this node has no meaning in the future list, so it's more than safe
-                // to remove it, and check the next live node out instead, meaning
-                // that only the live list index should be forwarded
-                else removeChild(get(a[aStart++], -1));
-              }
-  }
-
-  return b;
-});
-
-const UNMOUNT_SCOPE = Symbol('unmount');
-const EachBinding = {
-  // dynamic binding properties
-  // childrenMap: null,
-  // node: null,
-  // root: null,
-  // condition: null,
-  // evaluate: null,
-  // template: null,
-  // isTemplateTag: false,
-  nodes: [],
-
-  // getKey: null,
-  // indexName: null,
-  // itemName: null,
-  // afterPlaceholder: null,
-  // placeholder: null,
-  // API methods
-  mount(scope, parentScope) {
-    return this.update(scope, parentScope);
-  },
-
-  update(scope, parentScope) {
-    const {
-      placeholder,
-      nodes,
-      childrenMap
-    } = this;
-    const collection = scope === UNMOUNT_SCOPE ? null : this.evaluate(scope);
-    const items = collection ? Array.from(collection) : []; // prepare the diffing
-
-    const {
-      newChildrenMap,
-      batches,
-      futureNodes
-    } = createPatch(items, scope, parentScope, this); // patch the DOM only if there are new nodes
-
-    udomdiff(nodes, futureNodes, patch(Array.from(childrenMap.values()), parentScope), placeholder); // trigger the mounts and the updates
-
-    batches.forEach(fn => fn()); // update the children map
-
-    this.childrenMap = newChildrenMap;
-    this.nodes = futureNodes; // make sure that the loop edge nodes are marked
-
-    markEdgeNodes(this.nodes);
-    return this;
-  },
-
-  unmount(scope, parentScope) {
-    this.update(UNMOUNT_SCOPE, parentScope);
-    return this;
-  }
-
-};
-/**
- * Patch the DOM while diffing
- * @param   {any[]} redundant - list of all the children (template, nodes, context) added via each
- * @param   {*} parentScope - scope of the parent template
- * @returns {Function} patch function used by domdiff
- */
-
-function patch(redundant, parentScope) {
-  return (item, info) => {
-    if (info < 0) {
-      // get the last element added to the childrenMap saved previously
-      const element = redundant[redundant.length - 1];
-
-      if (element) {
-        // get the nodes and the template in stored in the last child of the childrenMap
-        const {
-          template,
-          nodes,
-          context
-        } = element; // remove the last node (notice <template> tags might have more children nodes)
-
-        nodes.pop(); // notice that we pass null as last argument because
-        // the root node and its children will be removed by domdiff
-
-        if (!nodes.length) {
-          // we have cleared all the children nodes and we can unmount this template
-          redundant.pop();
-          template.unmount(context, parentScope, null);
-        }
-      }
-    }
-
-    return item;
-  };
-}
-/**
- * Check whether a template must be filtered from a loop
- * @param   {Function} condition - filter function
- * @param   {Object} context - argument passed to the filter function
- * @returns {boolean} true if this item should be skipped
- */
-
-
-function mustFilterItem(condition, context) {
-  return condition ? !condition(context) : false;
-}
-/**
- * Extend the scope of the looped template
- * @param   {Object} scope - current template scope
- * @param   {Object} options - options
- * @param   {string} options.itemName - key to identify the looped item in the new context
- * @param   {string} options.indexName - key to identify the index of the looped item
- * @param   {number} options.index - current index
- * @param   {*} options.item - collection item looped
- * @returns {Object} enhanced scope object
- */
-
-
-function extendScope(scope, _ref) {
-  let {
-    itemName,
-    indexName,
-    index,
-    item
-  } = _ref;
-  defineProperty(scope, itemName, item);
-  if (indexName) defineProperty(scope, indexName, index);
-  return scope;
-}
-/**
- * Mark the first and last nodes in order to ignore them in case we need to retrieve the <template> fragment nodes
- * @param {Array[]} nodes - each binding nodes list
- * @returns {undefined} void function
- */
-
-
-function markEdgeNodes(nodes) {
-  const first = nodes[0];
-  const last = nodes[nodes.length - 1];
-  if (first) first[HEAD_SYMBOL] = true;
-  if (last) last[TAIL_SYMBOL] = true;
-}
-/**
- * Loop the current template items
- * @param   {Array} items - expression collection value
- * @param   {*} scope - template scope
- * @param   {*} parentScope - scope of the parent template
- * @param   {EachBinding} binding - each binding object instance
- * @returns {Object} data
- * @returns {Map} data.newChildrenMap - a Map containing the new children template structure
- * @returns {Array} data.batches - array containing the template lifecycle functions to trigger
- * @returns {Array} data.futureNodes - array containing the nodes we need to diff
- */
-
-
-function createPatch(items, scope, parentScope, binding) {
-  const {
-    condition,
-    template,
-    childrenMap,
-    itemName,
-    getKey,
-    indexName,
-    root,
-    isTemplateTag
-  } = binding;
-  const newChildrenMap = new Map();
-  const batches = [];
-  const futureNodes = [];
-  items.forEach((item, index) => {
-    const context = extendScope(Object.create(scope), {
-      itemName,
-      indexName,
-      index,
-      item
-    });
-    const key = getKey ? getKey(context) : index;
-    const oldItem = childrenMap.get(key);
-    const nodes = [];
-
-    if (mustFilterItem(condition, context)) {
-      return;
-    }
-
-    const mustMount = !oldItem;
-    const componentTemplate = oldItem ? oldItem.template : template.clone();
-    const el = componentTemplate.el || root.cloneNode();
-    const meta = isTemplateTag && mustMount ? createTemplateMeta(componentTemplate) : componentTemplate.meta;
-
-    if (mustMount) {
-      batches.push(() => componentTemplate.mount(el, context, parentScope, meta));
-    } else {
-      batches.push(() => componentTemplate.update(context, parentScope));
-    } // create the collection of nodes to update or to add
-    // in case of template tags we need to add all its children nodes
-
-
-    if (isTemplateTag) {
-      nodes.push(...(mustMount ? meta.children : getFragmentChildren(meta)));
-    } else {
-      nodes.push(el);
-    } // delete the old item from the children map
-
-
-    childrenMap.delete(key);
-    futureNodes.push(...nodes); // update the children map
-
-    newChildrenMap.set(key, {
-      nodes,
-      template: componentTemplate,
-      context,
-      index
-    });
-  });
-  return {
-    newChildrenMap,
-    batches,
-    futureNodes
-  };
-}
-
-function create$6(node, _ref2) {
-  let {
-    evaluate,
-    condition,
-    itemName,
-    indexName,
-    getKey,
-    template
-  } = _ref2;
-  const placeholder = document.createTextNode('');
-  const root = node.cloneNode();
-  insertBefore(placeholder, node);
-  removeChild(node);
-  return Object.assign({}, EachBinding, {
-    childrenMap: new Map(),
-    node,
-    root,
-    condition,
-    evaluate,
-    isTemplateTag: isTemplate(root),
-    template: template.createDOM(node),
-    getKey,
-    indexName,
-    itemName,
-    placeholder
-  });
-}
-
-/**
- * Binding responsible for the `if` directive
- */
-
-const IfBinding = {
-  // dynamic binding properties
-  // node: null,
-  // evaluate: null,
-  // isTemplateTag: false,
-  // placeholder: null,
-  // template: null,
-  // API methods
-  mount(scope, parentScope) {
-    return this.update(scope, parentScope);
-  },
-
-  update(scope, parentScope) {
-    const value = !!this.evaluate(scope);
-    const mustMount = !this.value && value;
-    const mustUnmount = this.value && !value;
-
-    const mount = () => {
-      const pristine = this.node.cloneNode();
-      insertBefore(pristine, this.placeholder);
-      this.template = this.template.clone();
-      this.template.mount(pristine, scope, parentScope);
-    };
-
-    switch (true) {
-      case mustMount:
-        mount();
-        break;
-
-      case mustUnmount:
-        this.unmount(scope);
-        break;
-
-      default:
-        if (value) this.template.update(scope, parentScope);
-    }
-
-    this.value = value;
-    return this;
-  },
-
-  unmount(scope, parentScope) {
-    this.template.unmount(scope, parentScope, true);
-    return this;
-  }
-
-};
-function create$5(node, _ref) {
-  let {
-    evaluate,
-    template
-  } = _ref;
-  const placeholder = document.createTextNode('');
-  insertBefore(placeholder, node);
-  removeChild(node);
-  return Object.assign({}, IfBinding, {
-    node,
-    evaluate,
-    placeholder,
-    template: template.createDOM(node)
-  });
-}
-
-/**
- * Throw an error with a descriptive message
- * @param   { string } message - error message
- * @returns { undefined } hoppla.. at this point the program should stop working
- */
-
-function panic(message) {
-  throw new Error(message);
-}
-/**
- * Returns the memoized (cached) function.
- * // borrowed from https://www.30secondsofcode.org/js/s/memoize
- * @param {Function} fn - function to memoize
- * @returns {Function} memoize function
- */
-
-function memoize(fn) {
-  const cache = new Map();
-
-  const cached = val => {
-    return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val);
-  };
-
-  cached.cache = cache;
-  return cached;
-}
-/**
- * Evaluate a list of attribute expressions
- * @param   {Array} attributes - attribute expressions generated by the riot compiler
- * @returns {Object} key value pairs with the result of the computation
- */
-
-function evaluateAttributeExpressions(attributes) {
-  return attributes.reduce((acc, attribute) => {
-    const {
-      value,
-      type
-    } = attribute;
-
-    switch (true) {
-      // spread attribute
-      case !attribute.name && type === ATTRIBUTE:
-        return Object.assign({}, acc, value);
-      // value attribute
-
-      case type === VALUE:
-        acc.value = attribute.value;
-        break;
-      // normal attributes
-
-      default:
-        acc[dashToCamelCase(attribute.name)] = attribute.value;
-    }
-
-    return acc;
-  }, {});
-}
-
-const ElementProto = typeof Element === 'undefined' ? {} : Element.prototype;
-const isNativeHtmlProperty = memoize(name => ElementProto.hasOwnProperty(name)); // eslint-disable-line
-
-/**
- * Add all the attributes provided
- * @param   {HTMLElement} node - target node
- * @param   {Object} attributes - object containing the attributes names and values
- * @returns {undefined} sorry it's a void function :(
- */
-
-function setAllAttributes(node, attributes) {
-  Object.entries(attributes).forEach(_ref => {
-    let [name, value] = _ref;
-    return attributeExpression(node, {
-      name
-    }, value);
-  });
-}
-/**
- * Remove all the attributes provided
- * @param   {HTMLElement} node - target node
- * @param   {Object} newAttributes - object containing all the new attribute names
- * @param   {Object} oldAttributes - object containing all the old attribute names
- * @returns {undefined} sorry it's a void function :(
- */
-
-
-function removeAllAttributes(node, newAttributes, oldAttributes) {
-  const newKeys = newAttributes ? Object.keys(newAttributes) : [];
-  Object.keys(oldAttributes).filter(name => !newKeys.includes(name)).forEach(attribute => node.removeAttribute(attribute));
-}
-/**
- * Check whether the attribute value can be rendered
- * @param {*} value - expression value
- * @returns {boolean} true if we can render this attribute value
- */
-
-
-function canRenderAttribute(value) {
-  return value === true || ['string', 'number'].includes(typeof value);
-}
-/**
- * Check whether the attribute should be removed
- * @param {*} value - expression value
- * @returns {boolean} boolean - true if the attribute can be removed}
- */
-
-
-function shouldRemoveAttribute(value) {
-  return !value && value !== 0;
-}
-/**
- * This methods handles the DOM attributes updates
- * @param   {HTMLElement} node - target node
- * @param   {Object} expression - expression object
- * @param   {string} expression.name - attribute name
- * @param   {*} value - new expression value
- * @param   {*} oldValue - the old expression cached value
- * @returns {undefined}
- */
-
-
-function attributeExpression(node, _ref2, value, oldValue) {
-  let {
-    name
-  } = _ref2;
-
-  // is it a spread operator? {...attributes}
-  if (!name) {
-    if (oldValue) {
-      // remove all the old attributes
-      removeAllAttributes(node, value, oldValue);
-    } // is the value still truthy?
-
-
-    if (value) {
-      setAllAttributes(node, value);
-    }
-
-    return;
-  } // handle boolean attributes
-
-
-  if (!isNativeHtmlProperty(name) && (isBoolean(value) || isObject(value) || isFunction(value))) {
-    node[name] = value;
-  }
-
-  if (shouldRemoveAttribute(value)) {
-    node.removeAttribute(name);
-  } else if (canRenderAttribute(value)) {
-    node.setAttribute(name, normalizeValue(name, value));
-  }
-}
-/**
- * Get the value as string
- * @param   {string} name - attribute name
- * @param   {*} value - user input value
- * @returns {string} input value as string
- */
-
-function normalizeValue(name, value) {
-  // be sure that expressions like selected={ true } will be always rendered as selected='selected'
-  return value === true ? name : value;
-}
-
-const RE_EVENTS_PREFIX = /^on/;
-
-const getCallbackAndOptions = value => Array.isArray(value) ? value : [value, false]; // see also https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
-
-
-const EventListener = {
-  handleEvent(event) {
-    this[event.type](event);
-  }
-
-};
-const ListenersWeakMap = new WeakMap();
-
-const createListener = node => {
-  const listener = Object.create(EventListener);
-  ListenersWeakMap.set(node, listener);
-  return listener;
-};
-/**
- * Set a new event listener
- * @param   {HTMLElement} node - target node
- * @param   {Object} expression - expression object
- * @param   {string} expression.name - event name
- * @param   {*} value - new expression value
- * @returns {value} the callback just received
- */
-
-
-function eventExpression(node, _ref, value) {
-  let {
-    name
-  } = _ref;
-  const normalizedEventName = name.replace(RE_EVENTS_PREFIX, '');
-  const eventListener = ListenersWeakMap.get(node) || createListener(node);
-  const [callback, options] = getCallbackAndOptions(value);
-  const handler = eventListener[normalizedEventName];
-  const mustRemoveEvent = handler && !callback;
-  const mustAddEvent = callback && !handler;
-
-  if (mustRemoveEvent) {
-    node.removeEventListener(normalizedEventName, eventListener);
-  }
-
-  if (mustAddEvent) {
-    node.addEventListener(normalizedEventName, eventListener, options);
-  }
-
-  eventListener[normalizedEventName] = callback;
-}
-
-/**
- * Normalize the user value in order to render a empty string in case of falsy values
- * @param   {*} value - user input value
- * @returns {string} hopefully a string
- */
-
-function normalizeStringValue(value) {
-  return isNil(value) ? '' : value;
-}
-
-/**
- * Get the the target text node to update or create one from of a comment node
- * @param   {HTMLElement} node - any html element containing childNodes
- * @param   {number} childNodeIndex - index of the text node in the childNodes list
- * @returns {Text} the text node to update
- */
-
-const getTextNode = (node, childNodeIndex) => {
-  const target = node.childNodes[childNodeIndex];
-
-  if (target.nodeType === Node.COMMENT_NODE) {
-    const textNode = document.createTextNode('');
-    node.replaceChild(textNode, target);
-    return textNode;
-  }
-
-  return target;
-};
-/**
- * This methods handles a simple text expression update
- * @param   {HTMLElement} node - target node
- * @param   {Object} data - expression object
- * @param   {*} value - new expression value
- * @returns {undefined}
- */
-
-function textExpression(node, data, value) {
-  node.data = normalizeStringValue(value);
-}
-
-/**
- * This methods handles the input fileds value updates
- * @param   {HTMLElement} node - target node
- * @param   {Object} expression - expression object
- * @param   {*} value - new expression value
- * @returns {undefined}
- */
-
-function valueExpression(node, expression, value) {
-  node.value = normalizeStringValue(value);
-}
-
-var expressions = {
-  [ATTRIBUTE]: attributeExpression,
-  [EVENT]: eventExpression,
-  [TEXT]: textExpression,
-  [VALUE]: valueExpression
-};
-
-const Expression = {
-  // Static props
-  // node: null,
-  // value: null,
-  // API methods
-
-  /**
-   * Mount the expression evaluating its initial value
-   * @param   {*} scope - argument passed to the expression to evaluate its current values
-   * @returns {Expression} self
-   */
-  mount(scope) {
-    // hopefully a pure function
-    this.value = this.evaluate(scope); // IO() DOM updates
-
-    apply(this, this.value);
-    return this;
-  },
-
-  /**
-   * Update the expression if its value changed
-   * @param   {*} scope - argument passed to the expression to evaluate its current values
-   * @returns {Expression} self
-   */
-  update(scope) {
-    // pure function
-    const value = this.evaluate(scope);
-
-    if (this.value !== value) {
-      // IO() DOM updates
-      apply(this, value);
-      this.value = value;
-    }
-
-    return this;
-  },
-
-  /**
-   * Expression teardown method
-   * @returns {Expression} self
-   */
-  unmount() {
-    // unmount only the event handling expressions
-    if (this.type === EVENT) apply(this, null);
-    return this;
-  }
-
-};
-/**
- * IO() function to handle the DOM updates
- * @param {Expression} expression - expression object
- * @param {*} value - current expression value
- * @returns {undefined}
- */
-
-function apply(expression, value) {
-  return expressions[expression.type](expression.node, expression, value, expression.value);
-}
-
-function create$4(node, data) {
-  return Object.assign({}, Expression, data, {
-    node: data.type === TEXT ? getTextNode(node, data.childNodeIndex) : node
-  });
-}
-
-/**
- * Create a flat object having as keys a list of methods that if dispatched will propagate
- * on the whole collection
- * @param   {Array} collection - collection to iterate
- * @param   {Array<string>} methods - methods to execute on each item of the collection
- * @param   {*} context - context returned by the new methods created
- * @returns {Object} a new object to simplify the the nested methods dispatching
- */
-function flattenCollectionMethods(collection, methods, context) {
-  return methods.reduce((acc, method) => {
-    return Object.assign({}, acc, {
-      [method]: scope => {
-        return collection.map(item => item[method](scope)) && context;
-      }
-    });
-  }, {});
-}
-
-function create$3(node, _ref) {
-  let {
-    expressions
-  } = _ref;
-  return Object.assign({}, flattenCollectionMethods(expressions.map(expression => create$4(node, expression)), ['mount', 'update', 'unmount']));
-}
-
-function extendParentScope(attributes, scope, parentScope) {
-  if (!attributes || !attributes.length) return parentScope;
-  const expressions = attributes.map(attr => Object.assign({}, attr, {
-    value: attr.evaluate(scope)
-  }));
-  return Object.assign(Object.create(parentScope || null), evaluateAttributeExpressions(expressions));
-} // this function is only meant to fix an edge case
-// https://github.com/riot/riot/issues/2842
-
-
-const getRealParent = (scope, parentScope) => scope[PARENT_KEY_SYMBOL] || parentScope;
-
-const SlotBinding = {
-  // dynamic binding properties
-  // node: null,
-  // name: null,
-  attributes: [],
-
-  // template: null,
-  getTemplateScope(scope, parentScope) {
-    return extendParentScope(this.attributes, scope, parentScope);
-  },
-
-  // API methods
-  mount(scope, parentScope) {
-    const templateData = scope.slots ? scope.slots.find(_ref => {
-      let {
-        id
-      } = _ref;
-      return id === this.name;
-    }) : false;
-    const {
-      parentNode
-    } = this.node;
-    const realParent = getRealParent(scope, parentScope);
-    this.template = templateData && create(templateData.html, templateData.bindings).createDOM(parentNode);
-
-    if (this.template) {
-      cleanNode(this.node);
-      this.template.mount(this.node, this.getTemplateScope(scope, realParent), realParent);
-      this.template.children = Array.from(this.node.childNodes);
-    }
-
-    moveSlotInnerContent(this.node);
-    removeChild(this.node);
-    return this;
-  },
-
-  update(scope, parentScope) {
-    if (this.template) {
-      const realParent = getRealParent(scope, parentScope);
-      this.template.update(this.getTemplateScope(scope, realParent), realParent);
-    }
-
-    return this;
-  },
-
-  unmount(scope, parentScope, mustRemoveRoot) {
-    if (this.template) {
-      this.template.unmount(this.getTemplateScope(scope, parentScope), null, mustRemoveRoot);
-    }
-
-    return this;
-  }
-
-};
-/**
- * Move the inner content of the slots outside of them
- * @param   {HTMLElement} slot - slot node
- * @returns {undefined} it's a void method ¯\_(ツ)_/¯
- */
-
-function moveSlotInnerContent(slot) {
-  const child = slot && slot.firstChild;
-  if (!child) return;
-  insertBefore(child, slot);
-  moveSlotInnerContent(slot);
-}
-/**
- * Create a single slot binding
- * @param   {HTMLElement} node - slot node
- * @param   {string} name - slot id
- * @param   {AttributeExpressionData[]} attributes - slot attributes
- * @returns {Object} Slot binding object
- */
-
-
-function createSlot(node, _ref2) {
-  let {
-    name,
-    attributes
-  } = _ref2;
-  return Object.assign({}, SlotBinding, {
-    attributes,
-    node,
-    name
-  });
-}
-
-/**
- * Create a new tag object if it was registered before, otherwise fallback to the simple
- * template chunk
- * @param   {Function} component - component factory function
- * @param   {Array<Object>} slots - array containing the slots markup
- * @param   {Array} attributes - dynamic attributes that will be received by the tag element
- * @returns {TagImplementation|TemplateChunk} a tag implementation or a template chunk as fallback
- */
-
-function getTag(component, slots, attributes) {
-  if (slots === void 0) {
-    slots = [];
-  }
-
-  if (attributes === void 0) {
-    attributes = [];
-  }
-
-  // if this tag was registered before we will return its implementation
-  if (component) {
-    return component({
-      slots,
-      attributes
-    });
-  } // otherwise we return a template chunk
-
-
-  return create(slotsToMarkup(slots), [...slotBindings(slots), {
-    // the attributes should be registered as binding
-    // if we fallback to a normal template chunk
-    expressions: attributes.map(attr => {
-      return Object.assign({
-        type: ATTRIBUTE
-      }, attr);
-    })
-  }]);
-}
-/**
- * Merge all the slots bindings into a single array
- * @param   {Array<Object>} slots - slots collection
- * @returns {Array<Bindings>} flatten bindings array
- */
-
-
-function slotBindings(slots) {
-  return slots.reduce((acc, _ref) => {
-    let {
-      bindings
-    } = _ref;
-    return acc.concat(bindings);
-  }, []);
-}
-/**
- * Merge all the slots together in a single markup string
- * @param   {Array<Object>} slots - slots collection
- * @returns {string} markup of all the slots in a single string
- */
-
-
-function slotsToMarkup(slots) {
-  return slots.reduce((acc, slot) => {
-    return acc + slot.html;
-  }, '');
-}
-
-const TagBinding = {
-  // dynamic binding properties
-  // node: null,
-  // evaluate: null,
-  // name: null,
-  // slots: null,
-  // tag: null,
-  // attributes: null,
-  // getComponent: null,
-  mount(scope) {
-    return this.update(scope);
-  },
-
-  update(scope, parentScope) {
-    const name = this.evaluate(scope); // simple update
-
-    if (name && name === this.name) {
-      this.tag.update(scope);
-    } else {
-      // unmount the old tag if it exists
-      this.unmount(scope, parentScope, true); // mount the new tag
-
-      this.name = name;
-      this.tag = getTag(this.getComponent(name), this.slots, this.attributes);
-      this.tag.mount(this.node, scope);
-    }
-
-    return this;
-  },
-
-  unmount(scope, parentScope, keepRootTag) {
-    if (this.tag) {
-      // keep the root tag
-      this.tag.unmount(keepRootTag);
-    }
-
-    return this;
-  }
-
-};
-function create$2(node, _ref2) {
-  let {
-    evaluate,
-    getComponent,
-    slots,
-    attributes
-  } = _ref2;
-  return Object.assign({}, TagBinding, {
-    node,
-    evaluate,
-    slots,
-    attributes,
-    getComponent
-  });
-}
-
-var bindings = {
-  [IF]: create$5,
-  [SIMPLE]: create$3,
-  [EACH]: create$6,
-  [TAG]: create$2,
-  [SLOT]: createSlot
-};
-
-/**
- * Text expressions in a template tag will get childNodeIndex value normalized
- * depending on the position of the <template> tag offset
- * @param   {Expression[]} expressions - riot expressions array
- * @param   {number} textExpressionsOffset - offset of the <template> tag
- * @returns {Expression[]} expressions containing the text expressions normalized
- */
-
-function fixTextExpressionsOffset(expressions, textExpressionsOffset) {
-  return expressions.map(e => e.type === TEXT ? Object.assign({}, e, {
-    childNodeIndex: e.childNodeIndex + textExpressionsOffset
-  }) : e);
-}
-/**
- * Bind a new expression object to a DOM node
- * @param   {HTMLElement} root - DOM node where to bind the expression
- * @param   {TagBindingData} binding - binding data
- * @param   {number|null} templateTagOffset - if it's defined we need to fix the text expressions childNodeIndex offset
- * @returns {Binding} Binding object
- */
-
-
-function create$1(root, binding, templateTagOffset) {
-  const {
-    selector,
-    type,
-    redundantAttribute,
-    expressions
-  } = binding; // find the node to apply the bindings
-
-  const node = selector ? root.querySelector(selector) : root; // remove eventually additional attributes created only to select this node
-
-  if (redundantAttribute) node.removeAttribute(redundantAttribute);
-  const bindingExpressions = expressions || []; // init the binding
-
-  return (bindings[type] || bindings[SIMPLE])(node, Object.assign({}, binding, {
-    expressions: templateTagOffset && !selector ? fixTextExpressionsOffset(bindingExpressions, templateTagOffset) : bindingExpressions
-  }));
-}
-
-function createHTMLTree(html, root) {
-  const template = isTemplate(root) ? root : document.createElement('template');
-  template.innerHTML = html;
-  return template.content;
-} // for svg nodes we need a bit more work
-
-
-function createSVGTree(html, container) {
-  // create the SVGNode
-  const svgNode = container.ownerDocument.importNode(new window.DOMParser().parseFromString(`<svg xmlns="http://www.w3.org/2000/svg">${html}</svg>`, 'application/xml').documentElement, true);
-  return svgNode;
-}
-/**
- * Create the DOM that will be injected
- * @param {Object} root - DOM node to find out the context where the fragment will be created
- * @param   {string} html - DOM to create as string
- * @returns {HTMLDocumentFragment|HTMLElement} a new html fragment
- */
-
-
-function createDOMTree(root, html) {
-  if (isSvg(root)) return createSVGTree(html, root);
-  return createHTMLTree(html, root);
-}
-
-/**
- * Inject the DOM tree into a target node
- * @param   {HTMLElement} el - target element
- * @param   {DocumentFragment|SVGElement} dom - dom tree to inject
- * @returns {undefined}
- */
-
-function injectDOM(el, dom) {
-  switch (true) {
-    case isSvg(el):
-      moveChildren(dom, el);
-      break;
-
-    case isTemplate(el):
-      el.parentNode.replaceChild(dom, el);
-      break;
-
-    default:
-      el.appendChild(dom);
-  }
-}
-
-/**
- * Create the Template DOM skeleton
- * @param   {HTMLElement} el - root node where the DOM will be injected
- * @param   {string|HTMLElement} html - HTML markup or HTMLElement that will be injected into the root node
- * @returns {?DocumentFragment} fragment that will be injected into the root node
- */
-
-function createTemplateDOM(el, html) {
-  return html && (typeof html === 'string' ? createDOMTree(el, html) : html);
-}
-/**
- * Get the offset of the <template> tag
- * @param {HTMLElement} parentNode - template tag parent node
- * @param {HTMLElement} el - the template tag we want to render
- * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
- * @returns {number} offset of the <template> tag calculated from its siblings DOM nodes
- */
-
-
-function getTemplateTagOffset(parentNode, el, meta) {
-  const siblings = Array.from(parentNode.childNodes);
-  return Math.max(siblings.indexOf(el), siblings.indexOf(meta.head) + 1, 0);
-}
-/**
- * Template Chunk model
- * @type {Object}
- */
-
-
-const TemplateChunk = Object.freeze({
-  // Static props
-  // bindings: null,
-  // bindingsData: null,
-  // html: null,
-  // isTemplateTag: false,
-  // fragment: null,
-  // children: null,
-  // dom: null,
-  // el: null,
-
-  /**
-   * Create the template DOM structure that will be cloned on each mount
-   * @param   {HTMLElement} el - the root node
-   * @returns {TemplateChunk} self
-   */
-  createDOM(el) {
-    // make sure that the DOM gets created before cloning the template
-    this.dom = this.dom || createTemplateDOM(el, this.html) || document.createDocumentFragment();
-    return this;
-  },
-
-  // API methods
-
-  /**
-   * Attach the template to a DOM node
-   * @param   {HTMLElement} el - target DOM node
-   * @param   {*} scope - template data
-   * @param   {*} parentScope - scope of the parent template tag
-   * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
-   * @returns {TemplateChunk} self
-   */
-  mount(el, scope, parentScope, meta) {
-    if (meta === void 0) {
-      meta = {};
-    }
-
-    if (!el) throw new Error('Please provide DOM node to mount properly your template');
-    if (this.el) this.unmount(scope); // <template> tags require a bit more work
-    // the template fragment might be already created via meta outside of this call
-
-    const {
-      fragment,
-      children,
-      avoidDOMInjection
-    } = meta; // <template> bindings of course can not have a root element
-    // so we check the parent node to set the query selector bindings
-
-    const {
-      parentNode
-    } = children ? children[0] : el;
-    const isTemplateTag = isTemplate(el);
-    const templateTagOffset = isTemplateTag ? getTemplateTagOffset(parentNode, el, meta) : null; // create the DOM if it wasn't created before
-
-    this.createDOM(el); // create the DOM of this template cloning the original DOM structure stored in this instance
-    // notice that if a documentFragment was passed (via meta) we will use it instead
-
-    const cloneNode = fragment || this.dom.cloneNode(true); // store root node
-    // notice that for template tags the root note will be the parent tag
-
-    this.el = isTemplateTag ? parentNode : el; // create the children array only for the <template> fragments
-
-    this.children = isTemplateTag ? children || Array.from(cloneNode.childNodes) : null; // inject the DOM into the el only if a fragment is available
-
-    if (!avoidDOMInjection && cloneNode) injectDOM(el, cloneNode); // create the bindings
-
-    this.bindings = this.bindingsData.map(binding => create$1(this.el, binding, templateTagOffset));
-    this.bindings.forEach(b => b.mount(scope, parentScope)); // store the template meta properties
-
-    this.meta = meta;
-    return this;
-  },
-
-  /**
-   * Update the template with fresh data
-   * @param   {*} scope - template data
-   * @param   {*} parentScope - scope of the parent template tag
-   * @returns {TemplateChunk} self
-   */
-  update(scope, parentScope) {
-    this.bindings.forEach(b => b.update(scope, parentScope));
-    return this;
-  },
-
-  /**
-   * Remove the template from the node where it was initially mounted
-   * @param   {*} scope - template data
-   * @param   {*} parentScope - scope of the parent template tag
-   * @param   {boolean|null} mustRemoveRoot - if true remove the root element,
-   * if false or undefined clean the root tag content, if null don't touch the DOM
-   * @returns {TemplateChunk} self
-   */
-  unmount(scope, parentScope, mustRemoveRoot) {
-    if (mustRemoveRoot === void 0) {
-      mustRemoveRoot = false;
-    }
-
-    const el = this.el;
-
-    if (!el) {
-      return this;
-    }
-
-    this.bindings.forEach(b => b.unmount(scope, parentScope, mustRemoveRoot));
-
-    switch (true) {
-      // pure components should handle the DOM unmount updates by themselves
-      // for mustRemoveRoot === null don't touch the DOM
-      case el[IS_PURE_SYMBOL] || mustRemoveRoot === null:
-        break;
-      // if children are declared, clear them
-      // applicable for <template> and <slot/> bindings
-
-      case Array.isArray(this.children):
-        clearChildren(this.children);
-        break;
-      // clean the node children only
-
-      case !mustRemoveRoot:
-        cleanNode(el);
-        break;
-      // remove the root node only if the mustRemoveRoot is truly
-
-      case !!mustRemoveRoot:
-        removeChild(el);
-        break;
-    }
-
-    this.el = null;
-    return this;
-  },
-
-  /**
-   * Clone the template chunk
-   * @returns {TemplateChunk} a clone of this object resetting the this.el property
-   */
-  clone() {
-    return Object.assign({}, this, {
-      meta: {},
-      el: null
-    });
-  }
-
-});
-/**
- * Create a template chunk wiring also the bindings
- * @param   {string|HTMLElement} html - template string
- * @param   {BindingData[]} bindings - bindings collection
- * @returns {TemplateChunk} a new TemplateChunk copy
- */
-
-function create(html, bindings) {
-  if (bindings === void 0) {
-    bindings = [];
-  }
-
-  return Object.assign({}, TemplateChunk, {
-    html,
-    bindingsData: bindings
-  });
-}
-
-/**
- * Method used to bind expressions to a DOM node
- * @param   {string|HTMLElement} html - your static template html structure
- * @param   {Array} bindings - list of the expressions to bind to update the markup
- * @returns {TemplateChunk} a new TemplateChunk object having the `update`,`mount`, `unmount` and `clone` methods
- *
- * @example
- *
- * riotDOMBindings
- *  .template(
- *   `<div expr0><!----></div><div><p expr1><!----><section expr2></section></p>`,
- *   [
- *     {
- *       selector: '[expr0]',
- *       redundantAttribute: 'expr0',
- *       expressions: [
- *         {
- *           type: expressionTypes.TEXT,
- *           childNodeIndex: 0,
- *           evaluate(scope) {
- *             return scope.time;
- *           },
- *         },
- *       ],
- *     },
- *     {
- *       selector: '[expr1]',
- *       redundantAttribute: 'expr1',
- *       expressions: [
- *         {
- *           type: expressionTypes.TEXT,
- *           childNodeIndex: 0,
- *           evaluate(scope) {
- *             return scope.name;
- *           },
- *         },
- *         {
- *           type: 'attribute',
- *           name: 'style',
- *           evaluate(scope) {
- *             return scope.style;
- *           },
- *         },
- *       ],
- *     },
- *     {
- *       selector: '[expr2]',
- *       redundantAttribute: 'expr2',
- *       type: bindingTypes.IF,
- *       evaluate(scope) {
- *         return scope.isVisible;
- *       },
- *       template: riotDOMBindings.template('hello there'),
- *     },
- *   ]
- * )
- */
-
-var DOMBindings = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  template: create,
-  createBinding: create$1,
-  createExpression: create$4,
-  bindingTypes: bindingTypes,
-  expressionTypes: expressionTypes
-});
-
-function noop() {
-  return this;
-}
-/**
- * Autobind the methods of a source object to itself
- * @param   {Object} source - probably a riot tag instance
- * @param   {Array<string>} methods - list of the methods to autobind
- * @returns {Object} the original object received
- */
-
-function autobindMethods(source, methods) {
-  methods.forEach(method => {
-    source[method] = source[method].bind(source);
-  });
-  return source;
-}
-/**
- * Call the first argument received only if it's a function otherwise return it as it is
- * @param   {*} source - anything
- * @returns {*} anything
- */
-
-function callOrAssign(source) {
-  return isFunction(source) ? source.prototype && source.prototype.constructor ? new source() : source() : source;
-}
-
-/**
- * Converts any DOM node/s to a loopable array
- * @param   { HTMLElement|NodeList } els - single html element or a node list
- * @returns { Array } always a loopable object
- */
-function domToArray(els) {
-  // can this object be already looped?
-  if (!Array.isArray(els)) {
-    // is it a node list?
-    if (/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(els)) && typeof els.length === 'number') return Array.from(els);else // if it's a single node
-      // it will be returned as "array" with one single entry
-      return [els];
-  } // this object could be looped out of the box
-
-
-  return els;
-}
-
-/**
- * Simple helper to find DOM nodes returning them as array like loopable object
- * @param   { string|DOMNodeList } selector - either the query or the DOM nodes to arraify
- * @param   { HTMLElement }        ctx      - context defining where the query will search for the DOM nodes
- * @returns { Array } DOM nodes found as array
- */
-
-function $(selector, ctx) {
-  return domToArray(typeof selector === 'string' ? (ctx || document).querySelectorAll(selector) : selector);
-}
-
-/**
- * Normalize the return values, in case of a single value we avoid to return an array
- * @param   { Array } values - list of values we want to return
- * @returns { Array|string|boolean } either the whole list of values or the single one found
- * @private
- */
-
-const normalize = values => values.length === 1 ? values[0] : values;
-/**
- * Parse all the nodes received to get/remove/check their attributes
- * @param   { HTMLElement|NodeList|Array } els    - DOM node/s to parse
- * @param   { string|Array }               name   - name or list of attributes
- * @param   { string }                     method - method that will be used to parse the attributes
- * @returns { Array|string } result of the parsing in a list or a single value
- * @private
- */
-
-
-function parseNodes(els, name, method) {
-  const names = typeof name === 'string' ? [name] : name;
-  return normalize(domToArray(els).map(el => {
-    return normalize(names.map(n => el[method](n)));
-  }));
-}
-/**
- * Set any attribute on a single or a list of DOM nodes
- * @param   { HTMLElement|NodeList|Array } els   - DOM node/s to parse
- * @param   { string|Object }              name  - either the name of the attribute to set
- *                                                 or a list of properties as object key - value
- * @param   { string }                     value - the new value of the attribute (optional)
- * @returns { HTMLElement|NodeList|Array } the original array of elements passed to this function
- *
- * @example
- *
- * import { set } from 'bianco.attr'
- *
- * const img = document.createElement('img')
- *
- * set(img, 'width', 100)
- *
- * // or also
- * set(img, {
- *   width: 300,
- *   height: 300
- * })
- *
- */
-
-
-function set(els, name, value) {
-  const attrs = typeof name === 'object' ? name : {
-    [name]: value
-  };
-  const props = Object.keys(attrs);
-  domToArray(els).forEach(el => {
-    props.forEach(prop => el.setAttribute(prop, attrs[prop]));
-  });
-  return els;
-}
-/**
- * Get any attribute from a single or a list of DOM nodes
- * @param   { HTMLElement|NodeList|Array } els   - DOM node/s to parse
- * @param   { string|Array }               name  - name or list of attributes to get
- * @returns { Array|string } list of the attributes found
- *
- * @example
- *
- * import { get } from 'bianco.attr'
- *
- * const img = document.createElement('img')
- *
- * get(img, 'width') // => '200'
- *
- * // or also
- * get(img, ['width', 'height']) // => ['200', '300']
- *
- * // or also
- * get([img1, img2], ['width', 'height']) // => [['200', '300'], ['500', '200']]
- */
-
-function get(els, name) {
-  return parseNodes(els, name, 'getAttribute');
-}
-
-const CSS_BY_NAME = new Map();
-const STYLE_NODE_SELECTOR = 'style[riot]'; // memoized curried function
-
-const getStyleNode = (style => {
-  return () => {
-    // lazy evaluation:
-    // if this function was already called before
-    // we return its cached result
-    if (style) return style; // create a new style element or use an existing one
-    // and cache it internally
-
-    style = $(STYLE_NODE_SELECTOR)[0] || document.createElement('style');
-    set(style, 'type', 'text/css');
-    /* istanbul ignore next */
-
-    if (!style.parentNode) document.head.appendChild(style);
-    return style;
-  };
-})();
-/**
- * Object that will be used to inject and manage the css of every tag instance
- */
-
-
-var cssManager = {
-  CSS_BY_NAME,
-
-  /**
-   * Save a tag style to be later injected into DOM
-   * @param { string } name - if it's passed we will map the css to a tagname
-   * @param { string } css - css string
-   * @returns {Object} self
-   */
-  add(name, css) {
-    if (!CSS_BY_NAME.has(name)) {
-      CSS_BY_NAME.set(name, css);
-      this.inject();
-    }
-
-    return this;
-  },
-
-  /**
-   * Inject all previously saved tag styles into DOM
-   * innerHTML seems slow: http://jsperf.com/riot-insert-style
-   * @returns {Object} self
-   */
-  inject() {
-    getStyleNode().innerHTML = [...CSS_BY_NAME.values()].join('\n');
-    return this;
-  },
-
-  /**
-   * Remove a tag style from the DOM
-   * @param {string} name a registered tagname
-   * @returns {Object} self
-   */
-  remove(name) {
-    if (CSS_BY_NAME.has(name)) {
-      CSS_BY_NAME.delete(name);
-      this.inject();
-    }
-
-    return this;
-  }
-
-};
-
-/**
- * Function to curry any javascript method
- * @param   {Function}  fn - the target function we want to curry
- * @param   {...[args]} acc - initial arguments
- * @returns {Function|*} it will return a function until the target function
- *                       will receive all of its arguments
- */
-function curry(fn) {
-  for (var _len = arguments.length, acc = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    acc[_key - 1] = arguments[_key];
-  }
-
-  return function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    args = [...acc, ...args];
-    return args.length < fn.length ? curry(fn, ...args) : fn(...args);
-  };
-}
-
-/**
- * Get the tag name of any DOM node
- * @param   {HTMLElement} element - DOM node we want to inspect
- * @returns {string} name to identify this dom node in riot
- */
-
-function getName(element) {
-  return get(element, IS_DIRECTIVE) || element.tagName.toLowerCase();
-}
-
-const COMPONENT_CORE_HELPERS = Object.freeze({
-  // component helpers
-  $(selector) {
-    return $(selector, this.root)[0];
-  },
-
-  $$(selector) {
-    return $(selector, this.root);
-  }
-
-});
-const PURE_COMPONENT_API = Object.freeze({
-  [MOUNT_METHOD_KEY]: noop,
-  [UPDATE_METHOD_KEY]: noop,
-  [UNMOUNT_METHOD_KEY]: noop
-});
-const COMPONENT_LIFECYCLE_METHODS = Object.freeze({
-  [SHOULD_UPDATE_KEY]: noop,
-  [ON_BEFORE_MOUNT_KEY]: noop,
-  [ON_MOUNTED_KEY]: noop,
-  [ON_BEFORE_UPDATE_KEY]: noop,
-  [ON_UPDATED_KEY]: noop,
-  [ON_BEFORE_UNMOUNT_KEY]: noop,
-  [ON_UNMOUNTED_KEY]: noop
-});
-const MOCKED_TEMPLATE_INTERFACE = Object.assign({}, PURE_COMPONENT_API, {
-  clone: noop,
-  createDOM: noop
-});
-/**
- * Performance optimization for the recursive components
- * @param  {RiotComponentWrapper} componentWrapper - riot compiler generated object
- * @returns {Object} component like interface
- */
-
-const memoizedCreateComponent = memoize(createComponent);
-/**
- * Evaluate the component properties either from its real attributes or from its initial user properties
- * @param   {HTMLElement} element - component root
- * @param   {Object}  initialProps - initial props
- * @returns {Object} component props key value pairs
- */
-
-function evaluateInitialProps(element, initialProps) {
-  if (initialProps === void 0) {
-    initialProps = {};
-  }
-
-  return Object.assign({}, DOMattributesToObject(element), callOrAssign(initialProps));
-}
-/**
- * Bind a DOM node to its component object
- * @param   {HTMLElement} node - html node mounted
- * @param   {Object} component - Riot.js component object
- * @returns {Object} the component object received as second argument
- */
-
-
-const bindDOMNodeToComponentObject = (node, component) => node[DOM_COMPONENT_INSTANCE_PROPERTY$1] = component;
-/**
- * Wrap the Riot.js core API methods using a mapping function
- * @param   {Function} mapFunction - lifting function
- * @returns {Object} an object having the { mount, update, unmount } functions
- */
-
-
-function createCoreAPIMethods(mapFunction) {
-  return [MOUNT_METHOD_KEY, UPDATE_METHOD_KEY, UNMOUNT_METHOD_KEY].reduce((acc, method) => {
-    acc[method] = mapFunction(method);
-    return acc;
-  }, {});
-}
-/**
- * Factory function to create the component templates only once
- * @param   {Function} template - component template creation function
- * @param   {RiotComponentWrapper} componentWrapper - riot compiler generated object
- * @returns {TemplateChunk} template chunk object
- */
-
-
-function componentTemplateFactory(template, componentWrapper) {
-  const components = createSubcomponents(componentWrapper.exports ? componentWrapper.exports.components : {});
-  return template(create, expressionTypes, bindingTypes, name => {
-    // improve support for recursive components
-    if (name === componentWrapper.name) return memoizedCreateComponent(componentWrapper); // return the registered components
-
-    return components[name] || COMPONENTS_IMPLEMENTATION_MAP$1.get(name);
-  });
-}
-/**
- * Create a pure component
- * @param   {Function} pureFactoryFunction - pure component factory function
- * @param   {Array} options.slots - component slots
- * @param   {Array} options.attributes - component attributes
- * @param   {Array} options.template - template factory function
- * @param   {Array} options.template - template factory function
- * @param   {any} options.props - initial component properties
- * @returns {Object} pure component object
- */
-
-
-function createPureComponent(pureFactoryFunction, _ref) {
-  let {
-    slots,
-    attributes,
-    props,
-    css,
-    template
-  } = _ref;
-  if (template) panic('Pure components can not have html');
-  if (css) panic('Pure components do not have css');
-  const component = defineDefaults(pureFactoryFunction({
-    slots,
-    attributes,
-    props
-  }), PURE_COMPONENT_API);
-  return createCoreAPIMethods(method => function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    // intercept the mount calls to bind the DOM node to the pure object created
-    // see also https://github.com/riot/riot/issues/2806
-    if (method === MOUNT_METHOD_KEY) {
-      const [el] = args; // mark this node as pure element
-
-      el[IS_PURE_SYMBOL] = true;
-      bindDOMNodeToComponentObject(el, component);
-    }
-
-    component[method](...args);
-    return component;
-  });
-}
-/**
- * Create the component interface needed for the @riotjs/dom-bindings tag bindings
- * @param   {RiotComponentWrapper} componentWrapper - riot compiler generated object
- * @param   {string} componentWrapper.css - component css
- * @param   {Function} componentWrapper.template - function that will return the dom-bindings template function
- * @param   {Object} componentWrapper.exports - component interface
- * @param   {string} componentWrapper.name - component name
- * @returns {Object} component like interface
- */
-
-
-function createComponent(componentWrapper) {
-  const {
-    css,
-    template,
-    exports,
-    name
-  } = componentWrapper;
-  const templateFn = template ? componentTemplateFactory(template, componentWrapper) : MOCKED_TEMPLATE_INTERFACE;
-  return _ref2 => {
-    let {
-      slots,
-      attributes,
-      props
-    } = _ref2;
-    // pure components rendering will be managed by the end user
-    if (exports && exports[IS_PURE_SYMBOL]) return createPureComponent(exports, {
-      slots,
-      attributes,
-      props,
-      css,
-      template
-    });
-    const componentAPI = callOrAssign(exports) || {};
-    const component = defineComponent({
-      css,
-      template: templateFn,
-      componentAPI,
-      name
-    })({
-      slots,
-      attributes,
-      props
-    }); // notice that for the components create via tag binding
-    // we need to invert the mount (state/parentScope) arguments
-    // the template bindings will only forward the parentScope updates
-    // and never deal with the component state
-
-    return {
-      mount(element, parentScope, state) {
-        return component.mount(element, state, parentScope);
-      },
-
-      update(parentScope, state) {
-        return component.update(state, parentScope);
-      },
-
-      unmount(preserveRoot) {
-        return component.unmount(preserveRoot);
-      }
-
-    };
-  };
-}
-/**
- * Component definition function
- * @param   {Object} implementation - the componen implementation will be generated via compiler
- * @param   {Object} component - the component initial properties
- * @returns {Object} a new component implementation object
- */
-
-function defineComponent(_ref3) {
-  let {
-    css,
-    template,
-    componentAPI,
-    name
-  } = _ref3;
-  // add the component css into the DOM
-  if (css && name) cssManager.add(name, css);
-  return curry(enhanceComponentAPI)(defineProperties( // set the component defaults without overriding the original component API
-  defineDefaults(componentAPI, Object.assign({}, COMPONENT_LIFECYCLE_METHODS, {
-    [PROPS_KEY]: {},
-    [STATE_KEY]: {}
-  })), Object.assign({
-    // defined during the component creation
-    [SLOTS_KEY]: null,
-    [ROOT_KEY]: null
-  }, COMPONENT_CORE_HELPERS, {
-    name,
-    css,
-    template
-  })));
-}
-/**
- * Create the bindings to update the component attributes
- * @param   {HTMLElement} node - node where we will bind the expressions
- * @param   {Array} attributes - list of attribute bindings
- * @returns {TemplateChunk} - template bindings object
- */
-
-function createAttributeBindings(node, attributes) {
-  if (attributes === void 0) {
-    attributes = [];
-  }
-
-  const expressions = attributes.map(a => create$4(node, a));
-  const binding = {};
-  return Object.assign(binding, Object.assign({
-    expressions
-  }, createCoreAPIMethods(method => scope => {
-    expressions.forEach(e => e[method](scope));
-    return binding;
-  })));
-}
-/**
- * Create the subcomponents that can be included inside a tag in runtime
- * @param   {Object} components - components imported in runtime
- * @returns {Object} all the components transformed into Riot.Component factory functions
- */
-
-
-function createSubcomponents(components) {
-  if (components === void 0) {
-    components = {};
-  }
-
-  return Object.entries(callOrAssign(components)).reduce((acc, _ref4) => {
-    let [key, value] = _ref4;
-    acc[camelToDashCase(key)] = createComponent(value);
-    return acc;
-  }, {});
-}
-/**
- * Run the component instance through all the plugins set by the user
- * @param   {Object} component - component instance
- * @returns {Object} the component enhanced by the plugins
- */
-
-
-function runPlugins(component) {
-  return [...PLUGINS_SET$1].reduce((c, fn) => fn(c) || c, component);
-}
-/**
- * Compute the component current state merging it with its previous state
- * @param   {Object} oldState - previous state object
- * @param   {Object} newState - new state givent to the `update` call
- * @returns {Object} new object state
- */
-
-
-function computeState(oldState, newState) {
-  return Object.assign({}, oldState, callOrAssign(newState));
-}
-/**
- * Add eventually the "is" attribute to link this DOM node to its css
- * @param {HTMLElement} element - target root node
- * @param {string} name - name of the component mounted
- * @returns {undefined} it's a void function
- */
-
-
-function addCssHook(element, name) {
-  if (getName(element) !== name) {
-    set(element, IS_DIRECTIVE, name);
-  }
-}
-/**
- * Component creation factory function that will enhance the user provided API
- * @param   {Object} component - a component implementation previously defined
- * @param   {Array} options.slots - component slots generated via riot compiler
- * @param   {Array} options.attributes - attribute expressions generated via riot compiler
- * @returns {Riot.Component} a riot component instance
- */
-
-
-function enhanceComponentAPI(component, _ref5) {
-  let {
-    slots,
-    attributes,
-    props
-  } = _ref5;
-  return autobindMethods(runPlugins(defineProperties(isObject(component) ? Object.create(component) : component, {
-    mount(element, state, parentScope) {
-      if (state === void 0) {
-        state = {};
-      }
-
-      this[PARENT_KEY_SYMBOL] = parentScope;
-      this[ATTRIBUTES_KEY_SYMBOL] = createAttributeBindings(element, attributes).mount(parentScope);
-      defineProperty(this, PROPS_KEY, Object.freeze(Object.assign({}, evaluateInitialProps(element, props), evaluateAttributeExpressions(this[ATTRIBUTES_KEY_SYMBOL].expressions))));
-      this[STATE_KEY] = computeState(this[STATE_KEY], state);
-      this[TEMPLATE_KEY_SYMBOL] = this.template.createDOM(element).clone(); // link this object to the DOM node
-
-      bindDOMNodeToComponentObject(element, this); // add eventually the 'is' attribute
-
-      component.name && addCssHook(element, component.name); // define the root element
-
-      defineProperty(this, ROOT_KEY, element); // define the slots array
-
-      defineProperty(this, SLOTS_KEY, slots); // before mount lifecycle event
-
-      this[ON_BEFORE_MOUNT_KEY](this[PROPS_KEY], this[STATE_KEY]); // mount the template
-
-      this[TEMPLATE_KEY_SYMBOL].mount(element, this, parentScope);
-      this[ON_MOUNTED_KEY](this[PROPS_KEY], this[STATE_KEY]);
-      return this;
-    },
-
-    update(state, parentScope) {
-      if (state === void 0) {
-        state = {};
-      }
-
-      if (parentScope) {
-        this[PARENT_KEY_SYMBOL] = parentScope;
-        this[ATTRIBUTES_KEY_SYMBOL].update(parentScope);
-      }
-
-      const newProps = evaluateAttributeExpressions(this[ATTRIBUTES_KEY_SYMBOL].expressions);
-      if (this[SHOULD_UPDATE_KEY](newProps, this[PROPS_KEY]) === false) return;
-      defineProperty(this, PROPS_KEY, Object.freeze(Object.assign({}, this[PROPS_KEY], newProps)));
-      this[STATE_KEY] = computeState(this[STATE_KEY], state);
-      this[ON_BEFORE_UPDATE_KEY](this[PROPS_KEY], this[STATE_KEY]); // avoiding recursive updates
-      // see also https://github.com/riot/riot/issues/2895
-
-      if (!this[IS_COMPONENT_UPDATING]) {
-        this[IS_COMPONENT_UPDATING] = true;
-        this[TEMPLATE_KEY_SYMBOL].update(this, this[PARENT_KEY_SYMBOL]);
-      }
-
-      this[ON_UPDATED_KEY](this[PROPS_KEY], this[STATE_KEY]);
-      this[IS_COMPONENT_UPDATING] = false;
-      return this;
-    },
-
-    unmount(preserveRoot) {
-      this[ON_BEFORE_UNMOUNT_KEY](this[PROPS_KEY], this[STATE_KEY]);
-      this[ATTRIBUTES_KEY_SYMBOL].unmount(); // if the preserveRoot is null the template html will be left untouched
-      // in that case the DOM cleanup will happen differently from a parent node
-
-      this[TEMPLATE_KEY_SYMBOL].unmount(this, this[PARENT_KEY_SYMBOL], preserveRoot === null ? null : !preserveRoot);
-      this[ON_UNMOUNTED_KEY](this[PROPS_KEY], this[STATE_KEY]);
-      return this;
-    }
-
-  })), Object.keys(component).filter(prop => isFunction(component[prop])));
-}
-/**
- * Component initialization function starting from a DOM node
- * @param   {HTMLElement} element - element to upgrade
- * @param   {Object} initialProps - initial component properties
- * @param   {string} componentName - component id
- * @returns {Object} a new component instance bound to a DOM node
- */
-
-function mountComponent(element, initialProps, componentName) {
-  const name = componentName || getName(element);
-  if (!COMPONENTS_IMPLEMENTATION_MAP$1.has(name)) panic(`The component named "${name}" was never registered`);
-  const component = COMPONENTS_IMPLEMENTATION_MAP$1.get(name)({
-    props: initialProps
-  });
-  return component.mount(element);
-}
-
-/**
- * Similar to compose but performs from left-to-right function composition.<br/>
- * {@link https://30secondsofcode.org/function#composeright see also}
- * @param   {...[function]} fns) - list of unary function
- * @returns {*} result of the computation
- */
-/**
- * Performs right-to-left function composition.<br/>
- * Use Array.prototype.reduce() to perform right-to-left function composition.<br/>
- * The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.<br/>
- * {@link https://30secondsofcode.org/function#compose original source code}
- * @param   {...[function]} fns) - list of unary function
- * @returns {*} result of the computation
- */
-
-function compose() {
-  for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    fns[_key2] = arguments[_key2];
-  }
-
-  return fns.reduce((f, g) => function () {
-    return f(g(...arguments));
-  });
-}
-
-const {
-  DOM_COMPONENT_INSTANCE_PROPERTY,
-  COMPONENTS_IMPLEMENTATION_MAP,
-  PLUGINS_SET
-} = globals;
-/**
- * Riot public api
- */
-
-/**
- * Register a custom tag by name
- * @param   {string} name - component name
- * @param   {Object} implementation - tag implementation
- * @returns {Map} map containing all the components implementations
- */
-
-function register(name, _ref) {
-  let {
-    css,
-    template,
-    exports
-  } = _ref;
-  if (COMPONENTS_IMPLEMENTATION_MAP.has(name)) panic(`The component "${name}" was already registered`);
-  COMPONENTS_IMPLEMENTATION_MAP.set(name, createComponent({
-    name,
-    css,
-    template,
-    exports
-  }));
-  return COMPONENTS_IMPLEMENTATION_MAP;
-}
-/**
- * Unregister a riot web component
- * @param   {string} name - component name
- * @returns {Map} map containing all the components implementations
- */
-
-function unregister(name) {
-  if (!COMPONENTS_IMPLEMENTATION_MAP.has(name)) panic(`The component "${name}" was never registered`);
-  COMPONENTS_IMPLEMENTATION_MAP.delete(name);
-  cssManager.remove(name);
-  return COMPONENTS_IMPLEMENTATION_MAP;
-}
-/**
- * Mounting function that will work only for the components that were globally registered
- * @param   {string|HTMLElement} selector - query for the selection or a DOM element
- * @param   {Object} initialProps - the initial component properties
- * @param   {string} name - optional component name
- * @returns {Array} list of riot components
- */
-
-function mount(selector, initialProps, name) {
-  return $(selector).map(element => mountComponent(element, initialProps, name));
-}
-/**
- * Sweet unmounting helper function for the DOM node mounted manually by the user
- * @param   {string|HTMLElement} selector - query for the selection or a DOM element
- * @param   {boolean|null} keepRootElement - if true keep the root element
- * @returns {Array} list of nodes unmounted
- */
-
-function unmount(selector, keepRootElement) {
-  return $(selector).map(element => {
-    if (element[DOM_COMPONENT_INSTANCE_PROPERTY]) {
-      element[DOM_COMPONENT_INSTANCE_PROPERTY].unmount(keepRootElement);
-    }
-
-    return element;
-  });
-}
-/**
- * Define a riot plugin
- * @param   {Function} plugin - function that will receive all the components created
- * @returns {Set} the set containing all the plugins installed
- */
-
-function install(plugin) {
-  if (!isFunction(plugin)) panic('Plugins must be of type function');
-  if (PLUGINS_SET.has(plugin)) panic('This plugin was already installed');
-  PLUGINS_SET.add(plugin);
-  return PLUGINS_SET;
-}
-/**
- * Uninstall a riot plugin
- * @param   {Function} plugin - plugin previously installed
- * @returns {Set} the set containing all the plugins installed
- */
-
-function uninstall(plugin) {
-  if (!PLUGINS_SET.has(plugin)) panic('This plugin was never installed');
-  PLUGINS_SET.delete(plugin);
-  return PLUGINS_SET;
-}
-/**
- * Helper method to create component without relying on the registered ones
- * @param   {Object} implementation - component implementation
- * @returns {Function} function that will allow you to mount a riot component on a DOM node
- */
-
-function component(implementation) {
-  return function (el, props, _temp) {
-    let {
-      slots,
-      attributes,
-      parentScope
-    } = _temp === void 0 ? {} : _temp;
-    return compose(c => c.mount(el, parentScope), c => c({
-      props,
-      slots,
-      attributes
-    }), createComponent)(implementation);
-  };
-}
-/**
- * Lift a riot component Interface into a pure riot object
- * @param   {Function} func - RiotPureComponent factory function
- * @returns {Function} the lifted original function received as argument
- */
-
-function pure(func) {
-  if (!isFunction(func)) panic('riot.pure accepts only arguments of type "function"');
-  func[IS_PURE_SYMBOL] = true;
-  return func;
-}
-/**
- * no-op function needed to add the proper types to your component via typescript
- * @param {Function|Object} component - component default export
- * @returns {Function|Object} returns exactly what it has received
- */
-
-const withTypes = component => component;
-/** @type {string} current riot version */
-
-const version = 'v6.0.1'; // expose some internal stuff that might be used from external tools
-
-const __ = {
-  cssManager,
-  DOMBindings,
-  createComponent,
-  defineComponent,
-  globals
-};
-
+/***/ "./resources/scss/index.scss":
+/*!***********************************!*\
+  !*** ./resources/scss/index.scss ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
 
 
 /***/ })
@@ -4696,18 +75,6 @@ const __ = {
 /******/ 		};
 /******/ 	})();
 /******/ 	
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
 /******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
@@ -4781,7 +148,6 @@ const __ = {
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, ["public/css/index"], () => (__webpack_require__("./resources/js/index.js")))
 /******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["public/css/index"], () => (__webpack_require__("./resources/scss/index.scss")))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
diff --git a/resources/js/components/field-error.riot b/resources/js/components/field-error.riot
new file mode 100644
index 0000000..d53633d
--- /dev/null
+++ b/resources/js/components/field-error.riot
@@ -0,0 +1,108 @@
+<field-error>
+    <div class="field-error" if={ state.errors.length > 0 }>
+        <ul>
+            <li each={ error in state.errors }>
+                { error }
+            </li>
+        </ul>
+    </div>
+    <script>
+
+        /**
+         *  Shows errors of Validation and raise a element to
+         *  trigger single validation of field
+         *
+         *  <field-error name="name" nofieldupdate></field-error>
+         *
+         *  @author Björn Hase, Tentakelfabrik, me@tentakelfabrik.de
+         *
+         */
+
+        export default {
+
+            state: {
+                errors: [
+
+                ],
+            },
+
+            /**
+             *
+             *
+             *  @param  {Object} props [description]
+             *  @param  {Object} state [description]
+             *
+             */
+            onMounted(props, state)
+            {
+                // getting parent element for entire field
+                const parent = this.root.closest('.field-group')
+
+                // getting current element by name
+                const element = document.querySelector('[name="' + props.name + '"]')
+
+                // getting form
+                const form = element.closest('form')
+
+                // element, form are exists and nofieldupdate is not set
+                // each change of the element dispatch a event to form validation
+                if (element && form && !props.nofieldupdate) {
+                    element.addEventListener('input', (event) => {
+                        this.dispatchCustomEvent(event, form, props.name)
+                    })
+                }
+
+                // add custom event to listen to form-validation
+                this.root.addEventListener('form-validation', (event) => {
+                    this.onFormValidation(event, parent)
+                })
+            },
+
+            /**
+             *  process form validation triggered by form
+             *
+             *  @param  {Event} event
+             *  @param  {Element} parent
+             *
+             */
+            onFormValidation(event, parent)
+            {
+                // if detail is a value, set to errors
+                if (event.detail) {
+                    this.state.errors = event.detail
+
+                    parent.classList.add('field--error')
+                    parent.classList.remove('field--valid')
+                } else {
+                    this.state.errors = []
+
+                    parent.classList.remove('field--error')
+                    parent.classList.add('field--valid')
+                }
+
+                this.update()
+            },
+
+            /**
+             *  create event to send to form validation
+             *
+             *  @param  {Event} event
+             *  @param  {Element} form
+             *  @param  {string} name
+             *
+             */
+            dispatchCustomEvent(event, form, name)
+            {
+                const fieldUpdateEvent = new CustomEvent('field-update', {
+                    'detail': {
+                        'name': name,
+                        'value': event.target.value
+                    }
+                })
+
+                form.dispatchEvent(fieldUpdateEvent)
+            },
+        }
+
+    </script>
+</field-error>
\ No newline at end of file
diff --git a/resources/js/create-bucket.js b/resources/js/create-bucket.js
new file mode 100644
index 0000000..ceafb9d
--- /dev/null
+++ b/resources/js/create-bucket.js
@@ -0,0 +1,27 @@
+import * as riot from 'riot'
+
+import FieldError from './components/field-error.riot'
+import FormValidator from './../../node_modules/@tentakelfabrik/tiny-validator/src/FormValidator'
+
+riot.register('field-error', FieldError)
+riot.mount('field-error')
+
+const formValidation = new FormValidator('form', {
+    'title': {
+        'presence': true,
+        'length': {
+            'maximum': 255
+        }
+    },
+    'description': {
+        'length': {
+            'maximum': 255
+        }
+    },
+    'type': {
+        'presence': true
+    },
+    'visiblity': {
+        'presence': true
+    }
+})
\ No newline at end of file
diff --git a/resources/js/critical.js b/resources/js/critical.js
index 033586c..c1dc283 100644
--- a/resources/js/critical.js
+++ b/resources/js/critical.js
@@ -1,4 +1,4 @@
 const Turbolinks = require('turbolinks')
 
 Turbolinks.start()
-Turbolinks.setProgressBarDelay(500)
+Turbolinks.setProgressBarDelay(500)
\ No newline at end of file
diff --git a/resources/js/dashboard.js b/resources/js/dashboard.js
index 7107dec..1f1e17d 100644
--- a/resources/js/dashboard.js
+++ b/resources/js/dashboard.js
@@ -1,11 +1,7 @@
-import AppBuckets from './components/buckets.riot'
+import * as riot from 'riot'
 
-/**
- *  Bucket
- *
- *
- */
+import AppBuckets from './components/buckets.riot'
 
-// register components
+// register components for buckets
 riot.register('app-buckets', AppBuckets)
 riot.mount('app-buckets')
\ No newline at end of file
diff --git a/resources/js/index.js b/resources/js/index.js
deleted file mode 100644
index 2753ac8..0000000
--- a/resources/js/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-window.axios = require('axios')
-window.riot = require('riot')
\ No newline at end of file
diff --git a/resources/scss/components/_field.scss b/resources/scss/components/_field.scss
new file mode 100644
index 0000000..65196ff
--- /dev/null
+++ b/resources/scss/components/_field.scss
@@ -0,0 +1,8 @@
+.field {
+    &-error {
+        ul {
+            list-style: none;
+            padding: 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/scss/index.scss b/resources/scss/index.scss
index ba0f1f2..cfd8a88 100644
--- a/resources/scss/index.scss
+++ b/resources/scss/index.scss
@@ -2,12 +2,12 @@
     '../../node_modules/@tentakelfabrik/plain-ui/src/scss/plain-ui',
 
     'components/buckets',
+    'components/field',
     'container';
 
 .turbolinks-progress-bar {
-    width: 5px;
-    height: 100%;
-    background-color: blue;
+    height: 5px;
+    background-color: var(--danger);
 }
 
 .app-header {
diff --git a/resources/views/bucket/form.html b/resources/views/bucket/form.html
index 7be5ad8..a6ec56a 100644
--- a/resources/views/bucket/form.html
+++ b/resources/views/bucket/form.html
@@ -8,18 +8,20 @@
             </h1>
         </div>
         <div class="col-12">
-            <form action="/bucket/store" method="POST" novalidate>
+            <form id="form" action="/bucket/store" method="POST" novalidate >
                 <div class="field-group">
                     <label class="field-label">
                         title*
                         <input class="field-text" name="title" type="text" />
                     </label>
+                    <field-error name="title"></field-error>
                 </div>
                 <div class="field-group">
                     <label class="field-label">
                         description*
                         <input class="field-text" name="description" type="text" />
                     </label>
+                    <field-error name="description"></field-error>
                 </div>
                 <div class="field-group">
                     <div class="m-top-4 m-bottom-3">
@@ -37,6 +39,7 @@
                             <%= type %>
                         </label>
                     <% }) %>
+                    <field-error name="type"></field-error>
                 </div>
                 <div class="field-group">
                     <div class="m-top-4 m-bottom-3">
@@ -54,6 +57,7 @@
                             <%= visiblity %>
                         </label>
                     <% }) %>
+                    <field-error name="visiblity"></field-error>
                 </div>
 
                 <div class="m-top-5">
@@ -67,4 +71,6 @@
             </form>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script type="text/javascript" src="/js/create-bucket.js" defer></script>
\ No newline at end of file
diff --git a/resources/views/index.html b/resources/views/index.html
index d3fbaa0..ce7181d 100644
--- a/resources/views/index.html
+++ b/resources/views/index.html
@@ -17,4 +17,6 @@
             </section>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script type="text/javascript" src="/js/dashboard.js" defer></script>
\ No newline at end of file
diff --git a/resources/views/layout.html b/resources/views/layout.html
index 5997e46..eefcd64 100644
--- a/resources/views/layout.html
+++ b/resources/views/layout.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Nano Buckets</title>
         <link rel="stylesheet" href="/css/index.css" />
-        <script type="text/javascript" src="/js/critical.js" defer></script>
+        <script type="text/javascript" src="/js/critical.js"></script>
     </head>
     <body>
         <header class="app-header">
@@ -35,8 +35,5 @@
             <%~ it.body %>
         </main>
 
-        <script type="text/javascript" src="/js/index.js" defer></script>
-        <script type="text/javascript" src="/js/dashboard.js" defer></script>
-
     </body>
 </html>
\ No newline at end of file
diff --git a/src/http/api/bucket.ts b/src/http/api/bucket.ts
index ecd085c..b24ffb7 100644
--- a/src/http/api/bucket.ts
+++ b/src/http/api/bucket.ts
@@ -36,7 +36,8 @@ router.get('/', async function(request, response)
  *  @param  response
  *  @return
  */
-router.get('/:uuid', function(request, response) {
+router.get('/:uuid', function(request, response)
+{
 
 })
 
@@ -47,7 +48,8 @@ router.get('/:uuid', function(request, response) {
  *  @param  response
  *  @return
  */
-router.post('/', function(request, response, next) {
+router.post('/', function(request, response, next)
+{
 
 })
 
@@ -58,12 +60,13 @@ router.post('/', function(request, response, next) {
  *  @param  response
  *  @return
  */
-router.put('/:uuid', function(request, response, next) {
+router.put('/:uuid', function(request, response, next)
+{
 
 })
 
 /**
- *
+ *  delete single bucket
  *
  *  @param  request
  *  @param  response
@@ -71,15 +74,18 @@ router.put('/:uuid', function(request, response, next) {
  */
 router.delete('/:uuid', async function(request, response, next)
 {
+    // check if uuid is valid
     if (!v4.validate(request.params.uuid)) {
         response.setStatus(404)
     }
 
     let result = false
 
+    // getting database and search by uuid
     const db = new Database<BucketSchema>('./storage/database/buckets.json')
     const bucket = await db.deleteOne({ _id: request.params.uuid });
 
+    // check if bucket is deleted 
     if (bucket) {
         result = true
     }
diff --git a/src/http/bucket.ts b/src/http/bucket.ts
index 408dd3c..57a3666 100644
--- a/src/http/bucket.ts
+++ b/src/http/bucket.ts
@@ -56,6 +56,7 @@ router.post('/store', async function(request, response, next)
         body.description = escapeHtml(body.description)
     }
 
+    // validate 
     const [ valid, errors ] = await validate(body, {
         title: [ required, maxLength(255) ],
         description: [ required, maxLength(255) ],
diff --git a/webpack.mix.js b/webpack.mix.js
index 1c7e342..c95cd6d 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -58,8 +58,8 @@ mix.options({
 })
 
 mix
-    .js('resources/js/index.js', 'public/js')
     .js('resources/js/critical.js', 'public/js')
+    .js('resources/js/create-bucket.js', 'public/js')
     .js('resources/js/dashboard.js', 'public/js')
     .sass('resources/scss/index.scss', 'public/css')
     .copy(