@lightningjs/blits 2.0.0-beta.1 → 2.0.0-beta.4

package/src/components/FPScounter.js

@@ -15,1785 +15,1799 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import Component from '../component.js'
+import Blits from '../../index.js'
 import { renderer } from '../launch.js'
 import fps_sprite from '../../public/assets/fps_sprite.base64.js'
 
-export default () =>
-  Component('FPScounter', {
-    /* eslint-disable no-unused-vars */
-    code: {
-      render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
-        const elms = []
-        const validAttributes = [
-          'parent',
-          'rotation',
-          'w',
-          'width',
-          'h',
-          'height',
-          'x',
-          'y',
-          'z',
-          'zIndex',
-          'color',
-          'src',
-          'texture',
-          'fit',
-          'rtt',
-          'mount',
-          'pivot',
-          'scale',
-          'show',
-          'alpha',
-          'rounded',
-          'border',
-          'shadow',
-          'shader',
-          'clipping',
-          'overflow',
-          'font',
-          'size',
-          'maxwidth',
-          'maxheight',
-          'maxlines',
-          'textoverflow',
-          'letterspacing',
-          'lineheight',
-          'contain',
-          'align',
-          'content',
-          'placement',
-          'inspector-data',
-        ]
-        const elementConfigs = []
-        const forloops = []
-        const props = []
-        const created = []
-        const effects = {}
-        const skips = []
-        let componentType
-        let rootComponent = component
-        let propData
-        let slotComponent
-        let inSlot = false
-        let slotChildCounter = 0
-        let cmps = []
-        elementConfigs[0] = {}
-
-        elms[0] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elms[0].populate(elementConfigs[0])
-
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
-
-        parent = elms[0]
-        elementConfigs[1] = {}
-
-        elms[1] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[1]['y'] = 15
-        elementConfigs[1]['x'] = 20
-        elms[1].populate(elementConfigs[1])
-
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
-
-        parent = elms[1]
-        elementConfigs[2] = {}
-
-        elms[2] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elms[2].populate(elementConfigs[2])
-
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+// exporting as named export to allow selective importing
+export const FPScounter = Blits.Component('FPScounter', {
+  /* eslint-disable no-unused-vars */
+  code: {
+    render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
+      const elms = []
+      const validAttributes = [
+        'parent',
+        'rotation',
+        'w',
+        'width',
+        'h',
+        'height',
+        'x',
+        'y',
+        'z',
+        'zIndex',
+        'color',
+        'src',
+        'texture',
+        'fit',
+        'rtt',
+        'mount',
+        'pivot',
+        'scale',
+        'show',
+        'alpha',
+        'rounded',
+        'border',
+        'shadow',
+        'shader',
+        'clipping',
+        'overflow',
+        'font',
+        'size',
+        'maxwidth',
+        'maxheight',
+        'maxlines',
+        'textoverflow',
+        'letterspacing',
+        'lineheight',
+        'contain',
+        'align',
+        'content',
+        'placement',
+        'inspector-data',
+        'holder',
+      ]
+      const elementConfigs = []
+      const forloops = []
+      const props = []
+      const created = []
+      const effects = {}
+      const skips = []
+      let componentType
+      let rootComponent = component
+      let propData
+      let slotComponent
+      let inSlot = false
+      let slotChildCounter = 0
+      let cmps = []
+      elementConfigs[0] = {}
+      elementConfigs[0]['___wrapper'] = true
+
+      elms[0] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elms[0].populate(elementConfigs[0])
+
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        cmps[3] = (context.components && context.components['Sprite']) || components['Sprite']
+      parent = elms[0]
+      elementConfigs[1] = {}
 
-        parent = elms[2]
-        elementConfigs[3] = {}
+      elms[1] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-        elms[3] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      elementConfigs[1]['y'] = 15
+      elementConfigs[1]['x'] = 20
+      elms[1].populate(elementConfigs[1])
 
-        elementConfigs[3]['image'] = component.image
-        elementConfigs[3]['w'] = 43
-        elementConfigs[3]['h'] = 25
-        elementConfigs[3]['map'] = component.sprite
-        elementConfigs[3]['frame'] = 'fps'
-
-        skips[3] = []
-        if (typeof cmps[3] !== 'undefined' && cmps[3][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[3][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[3][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[3][key]
-            skips[3].push(key)
-          }
-        }
-
-        elms[3].populate(elementConfigs[3])
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[1]
+      elementConfigs[2] = {}
 
-        parent = elms[3]
-        props[4] = {}
-        props[4]['image'] = component.image
-        props[4]['w'] = 43
-        props[4]['h'] = 25
-        props[4]['map'] = component.sprite
-        props[4]['frame'] = 'fps'
-
-        componentType = props[4]['is'] || 'Sprite'
-
-        components[4]
-        if (typeof componentType === 'string') {
-          components[4] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[4]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[4] = componentType
-        }
+      elms[2] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-        elms[4] = components[4].call(null, { props: props[4] }, elms[3], component)
+      elms[2].populate(elementConfigs[2])
 
-        if (elms[4][Symbol.for('slots')][0]) {
-          parent = elms[4][Symbol.for('slots')][0]
-          slotComponent = elms[4]
-          inSlot = true
-        } else {
-          parent = elms[4][Symbol.for('children')][0]
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[3] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[2]
+      elementConfigs[3] = {}
+
+      elms[3] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[3]['holder'] = true
+      elementConfigs[3]['image'] = component.image
+      elementConfigs[3]['w'] = 43
+      elementConfigs[3]['h'] = 25
+      elementConfigs[3]['map'] = component.sprite
+      elementConfigs[3]['frame'] = 'fps'
+
+      skips[3] = []
+      if (typeof cmps[3] !== 'undefined' && cmps[3][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[3][Symbol.for('config')].props
+        if (Array.isArray(props) === false) props = Object.keys(cmps[3][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[3][key]
+          skips[3].push(key)
         }
+      }
 
-        parent = elms[2]
-        elementConfigs[5] = {}
-
-        elms[5] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[5]['x'] = 58
-        elementConfigs[5]['y'] = 2
-        elms[5].populate(elementConfigs[5])
+      elms[3].populate(elementConfigs[3])
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
-
-        cmps[6] = (context.components && context.components['Sprite']) || components['Sprite']
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        parent = elms[5]
-        elementConfigs[6] = {}
+      parent = elms[3]
+      props[4] = {}
+      props[4]['image'] = component.image
+      props[4]['w'] = 43
+      props[4]['h'] = 25
+      props[4]['map'] = component.sprite
+      props[4]['frame'] = 'fps'
+
+      componentType = props[4]['is'] || 'Sprite'
+
+      components[4]
+      if (typeof componentType === 'string') {
+        components[4] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[4]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[4] = componentType
+      }
 
-        elms[6] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      elms[4] = components[4].call(null, { props: props[4] }, elms[3], component)
 
-        elementConfigs[6]['image'] = component.image
-        elementConfigs[6]['x'] = 0
-        elementConfigs[6]['h'] = 20
-        elementConfigs[6]['w'] = 20
-        elementConfigs[6]['map'] = component.sprite
-        elementConfigs[6]['frame'] = component.fps[0]
-
-        skips[6] = []
-        if (typeof cmps[6] !== 'undefined' && cmps[6][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[6][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[6][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[6][key]
-            skips[6].push(key)
-          }
-        }
+      if (elms[4][Symbol.for('slots')][0]) {
+        parent = elms[4][Symbol.for('slots')][0]
+        slotComponent = elms[4]
+        inSlot = true
+      } else {
+        parent = elms[4][Symbol.for('children')][0]
+      }
 
-        elms[6].populate(elementConfigs[6])
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[2]
+      elementConfigs[5] = {}
 
-        parent = elms[6]
-        props[7] = {}
-        props[7]['image'] = component.image
-        props[7]['x'] = 0
-        props[7]['h'] = 20
-        props[7]['w'] = 20
-        props[7]['map'] = component.sprite
-
-        propData = component.fps[0]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[7]['frame'] = propData
-
-        componentType = props[7]['is'] || 'Sprite'
-
-        components[7]
-        if (typeof componentType === 'string') {
-          components[7] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[7]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[7] = componentType
-        }
+      elms[5] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-        elms[7] = components[7].call(null, { props: props[7] }, elms[6], component)
+      elementConfigs[5]['x'] = 58
+      elementConfigs[5]['y'] = 2
+      elms[5].populate(elementConfigs[5])
 
-        if (elms[7][Symbol.for('slots')][0]) {
-          parent = elms[7][Symbol.for('slots')][0]
-          slotComponent = elms[7]
-          inSlot = true
-        } else {
-          parent = elms[7][Symbol.for('children')][0]
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[6] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[5]
+      elementConfigs[6] = {}
+
+      elms[6] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[6]['holder'] = true
+      elementConfigs[6]['image'] = component.image
+      elementConfigs[6]['x'] = 0
+      elementConfigs[6]['h'] = 20
+      elementConfigs[6]['w'] = 20
+      elementConfigs[6]['map'] = component.sprite
+      elementConfigs[6]['frame'] = component.fps[0]
+
+      skips[6] = []
+      if (typeof cmps[6] !== 'undefined' && cmps[6][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[6][Symbol.for('config')].props
+        if (Array.isArray(props) === false) props = Object.keys(cmps[6][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[6][key]
+          skips[6].push(key)
         }
+      }
 
-        cmps[8] = (context.components && context.components['Sprite']) || components['Sprite']
-
-        parent = elms[5]
-        elementConfigs[8] = {}
-
-        elms[8] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      elms[6].populate(elementConfigs[6])
 
-        elementConfigs[8]['image'] = component.image
-        elementConfigs[8]['x'] = 18
-        elementConfigs[8]['h'] = 20
-        elementConfigs[8]['w'] = 20
-        elementConfigs[8]['map'] = component.sprite
-        elementConfigs[8]['frame'] = component.fps[1]
-
-        skips[8] = []
-        if (typeof cmps[8] !== 'undefined' && cmps[8][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[8][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[8][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[8][key]
-            skips[8].push(key)
-          }
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        elms[8].populate(elementConfigs[8])
+      parent = elms[6]
+      props[7] = {}
+      props[7]['image'] = component.image
+      props[7]['x'] = 0
+      props[7]['h'] = 20
+      props[7]['w'] = 20
+      props[7]['map'] = component.sprite
+
+      propData = component.fps[0]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[7]['frame'] = propData
+
+      componentType = props[7]['is'] || 'Sprite'
+
+      components[7]
+      if (typeof componentType === 'string') {
+        components[7] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[7]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[7] = componentType
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      elms[7] = components[7].call(null, { props: props[7] }, elms[6], component)
 
-        parent = elms[8]
-        props[9] = {}
-        props[9]['image'] = component.image
-        props[9]['x'] = 18
-        props[9]['h'] = 20
-        props[9]['w'] = 20
-        props[9]['map'] = component.sprite
-
-        propData = component.fps[1]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[9]['frame'] = propData
-
-        componentType = props[9]['is'] || 'Sprite'
-
-        components[9]
-        if (typeof componentType === 'string') {
-          components[9] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[9]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[9] = componentType
-        }
-
-        elms[9] = components[9].call(null, { props: props[9] }, elms[8], component)
+      if (elms[7][Symbol.for('slots')][0]) {
+        parent = elms[7][Symbol.for('slots')][0]
+        slotComponent = elms[7]
+        inSlot = true
+      } else {
+        parent = elms[7][Symbol.for('children')][0]
+      }
 
-        if (elms[9][Symbol.for('slots')][0]) {
-          parent = elms[9][Symbol.for('slots')][0]
-          slotComponent = elms[9]
-          inSlot = true
-        } else {
-          parent = elms[9][Symbol.for('children')][0]
-        }
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[8] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[5]
+      elementConfigs[8] = {}
+
+      elms[8] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[8]['holder'] = true
+      elementConfigs[8]['image'] = component.image
+      elementConfigs[8]['x'] = 18
+      elementConfigs[8]['h'] = 20
+      elementConfigs[8]['w'] = 20
+      elementConfigs[8]['map'] = component.sprite
+      elementConfigs[8]['frame'] = component.fps[1]
+
+      skips[8] = []
+      if (typeof cmps[8] !== 'undefined' && cmps[8][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[8][Symbol.for('config')].props
+        if (Array.isArray(props) === false) props = Object.keys(cmps[8][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[8][key]
+          skips[8].push(key)
         }
+      }
 
-        cmps[10] = (context.components && context.components['Sprite']) || components['Sprite']
-
-        parent = elms[5]
-        elementConfigs[10] = {}
-
-        elms[10] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[10]['image'] = component.image
-        elementConfigs[10]['x'] = 36
-        elementConfigs[10]['h'] = 20
-        elementConfigs[10]['w'] = 20
-        elementConfigs[10]['map'] = component.sprite
-        elementConfigs[10]['frame'] = component.fps[2]
-
-        skips[10] = []
-        if (typeof cmps[10] !== 'undefined' && cmps[10][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[10][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[10][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[10][key]
-            skips[10].push(key)
-          }
-        }
+      elms[8].populate(elementConfigs[8])
 
-        elms[10].populate(elementConfigs[10])
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[8]
+      props[9] = {}
+      props[9]['image'] = component.image
+      props[9]['x'] = 18
+      props[9]['h'] = 20
+      props[9]['w'] = 20
+      props[9]['map'] = component.sprite
+
+      propData = component.fps[1]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[9]['frame'] = propData
+
+      componentType = props[9]['is'] || 'Sprite'
+
+      components[9]
+      if (typeof componentType === 'string') {
+        components[9] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[9]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[9] = componentType
+      }
 
-        parent = elms[10]
-        props[11] = {}
-        props[11]['image'] = component.image
-        props[11]['x'] = 36
-        props[11]['h'] = 20
-        props[11]['w'] = 20
-        props[11]['map'] = component.sprite
-
-        propData = component.fps[2]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[11]['frame'] = propData
-
-        componentType = props[11]['is'] || 'Sprite'
-
-        components[11]
-        if (typeof componentType === 'string') {
-          components[11] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[11]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[11] = componentType
-        }
+      elms[9] = components[9].call(null, { props: props[9] }, elms[8], component)
 
-        elms[11] = components[11].call(null, { props: props[11] }, elms[10], component)
+      if (elms[9][Symbol.for('slots')][0]) {
+        parent = elms[9][Symbol.for('slots')][0]
+        slotComponent = elms[9]
+        inSlot = true
+      } else {
+        parent = elms[9][Symbol.for('children')][0]
+      }
 
-        if (elms[11][Symbol.for('slots')][0]) {
-          parent = elms[11][Symbol.for('slots')][0]
-          slotComponent = elms[11]
-          inSlot = true
-        } else {
-          parent = elms[11][Symbol.for('children')][0]
-        }
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[10] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[5]
+      elementConfigs[10] = {}
+
+      elms[10] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[10]['holder'] = true
+      elementConfigs[10]['image'] = component.image
+      elementConfigs[10]['x'] = 36
+      elementConfigs[10]['h'] = 20
+      elementConfigs[10]['w'] = 20
+      elementConfigs[10]['map'] = component.sprite
+      elementConfigs[10]['frame'] = component.fps[2]
+
+      skips[10] = []
+      if (typeof cmps[10] !== 'undefined' && cmps[10][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[10][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[10][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[10][key]
+          skips[10].push(key)
         }
+      }
 
-        parent = elms[1]
-        elementConfigs[12] = {}
-
-        elms[12] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[12]['x'] = 150
-        elms[12].populate(elementConfigs[12])
-
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      elms[10].populate(elementConfigs[10])
 
-        cmps[13] = (context.components && context.components['Sprite']) || components['Sprite']
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        parent = elms[12]
-        elementConfigs[13] = {}
+      parent = elms[10]
+      props[11] = {}
+      props[11]['image'] = component.image
+      props[11]['x'] = 36
+      props[11]['h'] = 20
+      props[11]['w'] = 20
+      props[11]['map'] = component.sprite
+
+      propData = component.fps[2]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[11]['frame'] = propData
+
+      componentType = props[11]['is'] || 'Sprite'
+
+      components[11]
+      if (typeof componentType === 'string') {
+        components[11] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[11]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[11] = componentType
+      }
 
-        elms[13] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      elms[11] = components[11].call(null, { props: props[11] }, elms[10], component)
 
-        elementConfigs[13]['image'] = component.image
-        elementConfigs[13]['y'] = 2
-        elementConfigs[13]['w'] = 48
-        elementConfigs[13]['h'] = 25
-        elementConfigs[13]['map'] = component.sprite
-        elementConfigs[13]['frame'] = 'avg'
-
-        skips[13] = []
-        if (typeof cmps[13] !== 'undefined' && cmps[13][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[13][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[13][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[13][key]
-            skips[13].push(key)
-          }
-        }
+      if (elms[11][Symbol.for('slots')][0]) {
+        parent = elms[11][Symbol.for('slots')][0]
+        slotComponent = elms[11]
+        inSlot = true
+      } else {
+        parent = elms[11][Symbol.for('children')][0]
+      }
 
-        elms[13].populate(elementConfigs[13])
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[1]
+      elementConfigs[12] = {}
 
-        parent = elms[13]
-        props[14] = {}
-        props[14]['image'] = component.image
-        props[14]['y'] = 2
-        props[14]['w'] = 48
-        props[14]['h'] = 25
-        props[14]['map'] = component.sprite
-        props[14]['frame'] = 'avg'
-
-        componentType = props[14]['is'] || 'Sprite'
-
-        components[14]
-        if (typeof componentType === 'string') {
-          components[14] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[14]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[14] = componentType
-        }
+      elms[12] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-        elms[14] = components[14].call(null, { props: props[14] }, elms[13], component)
+      elementConfigs[12]['x'] = 150
+      elms[12].populate(elementConfigs[12])
 
-        if (elms[14][Symbol.for('slots')][0]) {
-          parent = elms[14][Symbol.for('slots')][0]
-          slotComponent = elms[14]
-          inSlot = true
-        } else {
-          parent = elms[14][Symbol.for('children')][0]
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[13] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[12]
+      elementConfigs[13] = {}
+
+      elms[13] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[13]['holder'] = true
+      elementConfigs[13]['image'] = component.image
+      elementConfigs[13]['y'] = 2
+      elementConfigs[13]['w'] = 48
+      elementConfigs[13]['h'] = 25
+      elementConfigs[13]['map'] = component.sprite
+      elementConfigs[13]['frame'] = 'avg'
+
+      skips[13] = []
+      if (typeof cmps[13] !== 'undefined' && cmps[13][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[13][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[13][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[13][key]
+          skips[13].push(key)
         }
+      }
 
-        parent = elms[12]
-        elementConfigs[15] = {}
-
-        elms[15] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[15]['x'] = 63
-        elementConfigs[15]['y'] = 2
-        elms[15].populate(elementConfigs[15])
+      elms[13].populate(elementConfigs[13])
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        cmps[16] = (context.components && context.components['Sprite']) || components['Sprite']
+      parent = elms[13]
+      props[14] = {}
+      props[14]['image'] = component.image
+      props[14]['y'] = 2
+      props[14]['w'] = 48
+      props[14]['h'] = 25
+      props[14]['map'] = component.sprite
+      props[14]['frame'] = 'avg'
+
+      componentType = props[14]['is'] || 'Sprite'
+
+      components[14]
+      if (typeof componentType === 'string') {
+        components[14] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[14]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[14] = componentType
+      }
 
-        parent = elms[15]
-        elementConfigs[16] = {}
+      elms[14] = components[14].call(null, { props: props[14] }, elms[13], component)
 
-        elms[16] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[16]['image'] = component.image
-        elementConfigs[16]['x'] = 0
-        elementConfigs[16]['h'] = 20
-        elementConfigs[16]['w'] = 20
-        elementConfigs[16]['map'] = component.sprite
-        elementConfigs[16]['frame'] = component.avgFps[0]
-
-        skips[16] = []
-        if (typeof cmps[16] !== 'undefined' && cmps[16][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[16][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[16][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[16][key]
-            skips[16].push(key)
-          }
-        }
+      if (elms[14][Symbol.for('slots')][0]) {
+        parent = elms[14][Symbol.for('slots')][0]
+        slotComponent = elms[14]
+        inSlot = true
+      } else {
+        parent = elms[14][Symbol.for('children')][0]
+      }
 
-        elms[16].populate(elementConfigs[16])
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[12]
+      elementConfigs[15] = {}
 
-        parent = elms[16]
-        props[17] = {}
-        props[17]['image'] = component.image
-        props[17]['x'] = 0
-        props[17]['h'] = 20
-        props[17]['w'] = 20
-        props[17]['map'] = component.sprite
-
-        propData = component.avgFps[0]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[17]['frame'] = propData
-
-        componentType = props[17]['is'] || 'Sprite'
-
-        components[17]
-        if (typeof componentType === 'string') {
-          components[17] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[17]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[17] = componentType
-        }
+      elms[15] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-        elms[17] = components[17].call(null, { props: props[17] }, elms[16], component)
+      elementConfigs[15]['x'] = 63
+      elementConfigs[15]['y'] = 2
+      elms[15].populate(elementConfigs[15])
 
-        if (elms[17][Symbol.for('slots')][0]) {
-          parent = elms[17][Symbol.for('slots')][0]
-          slotComponent = elms[17]
-          inSlot = true
-        } else {
-          parent = elms[17][Symbol.for('children')][0]
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[16] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[15]
+      elementConfigs[16] = {}
+
+      elms[16] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[16]['holder'] = true
+      elementConfigs[16]['image'] = component.image
+      elementConfigs[16]['x'] = 0
+      elementConfigs[16]['h'] = 20
+      elementConfigs[16]['w'] = 20
+      elementConfigs[16]['map'] = component.sprite
+      elementConfigs[16]['frame'] = component.avgFps[0]
+
+      skips[16] = []
+      if (typeof cmps[16] !== 'undefined' && cmps[16][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[16][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[16][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[16][key]
+          skips[16].push(key)
         }
+      }
 
-        cmps[18] = (context.components && context.components['Sprite']) || components['Sprite']
-
-        parent = elms[15]
-        elementConfigs[18] = {}
-
-        elms[18] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[18]['image'] = component.image
-        elementConfigs[18]['x'] = 18
-        elementConfigs[18]['h'] = 20
-        elementConfigs[18]['w'] = 20
-        elementConfigs[18]['map'] = component.sprite
-        elementConfigs[18]['frame'] = component.avgFps[1]
-
-        skips[18] = []
-        if (typeof cmps[18] !== 'undefined' && cmps[18][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[18][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[18][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[18][key]
-            skips[18].push(key)
-          }
-        }
+      elms[16].populate(elementConfigs[16])
 
-        elms[18].populate(elementConfigs[18])
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[16]
+      props[17] = {}
+      props[17]['image'] = component.image
+      props[17]['x'] = 0
+      props[17]['h'] = 20
+      props[17]['w'] = 20
+      props[17]['map'] = component.sprite
+
+      propData = component.avgFps[0]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[17]['frame'] = propData
+
+      componentType = props[17]['is'] || 'Sprite'
+
+      components[17]
+      if (typeof componentType === 'string') {
+        components[17] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[17]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[17] = componentType
+      }
 
-        parent = elms[18]
-        props[19] = {}
-        props[19]['image'] = component.image
-        props[19]['x'] = 18
-        props[19]['h'] = 20
-        props[19]['w'] = 20
-        props[19]['map'] = component.sprite
-
-        propData = component.avgFps[1]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[19]['frame'] = propData
-
-        componentType = props[19]['is'] || 'Sprite'
-
-        components[19]
-        if (typeof componentType === 'string') {
-          components[19] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[19]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[19] = componentType
-        }
+      elms[17] = components[17].call(null, { props: props[17] }, elms[16], component)
 
-        elms[19] = components[19].call(null, { props: props[19] }, elms[18], component)
+      if (elms[17][Symbol.for('slots')][0]) {
+        parent = elms[17][Symbol.for('slots')][0]
+        slotComponent = elms[17]
+        inSlot = true
+      } else {
+        parent = elms[17][Symbol.for('children')][0]
+      }
 
-        if (elms[19][Symbol.for('slots')][0]) {
-          parent = elms[19][Symbol.for('slots')][0]
-          slotComponent = elms[19]
-          inSlot = true
-        } else {
-          parent = elms[19][Symbol.for('children')][0]
-        }
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[18] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[15]
+      elementConfigs[18] = {}
+
+      elms[18] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[18]['holder'] = true
+      elementConfigs[18]['image'] = component.image
+      elementConfigs[18]['x'] = 18
+      elementConfigs[18]['h'] = 20
+      elementConfigs[18]['w'] = 20
+      elementConfigs[18]['map'] = component.sprite
+      elementConfigs[18]['frame'] = component.avgFps[1]
+
+      skips[18] = []
+      if (typeof cmps[18] !== 'undefined' && cmps[18][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[18][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[18][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[18][key]
+          skips[18].push(key)
         }
+      }
 
-        cmps[20] = (context.components && context.components['Sprite']) || components['Sprite']
-
-        parent = elms[15]
-        elementConfigs[20] = {}
-
-        elms[20] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[20]['image'] = component.image
-        elementConfigs[20]['x'] = 36
-        elementConfigs[20]['h'] = 20
-        elementConfigs[20]['w'] = 20
-        elementConfigs[20]['map'] = component.sprite
-        elementConfigs[20]['frame'] = component.avgFps[2]
-
-        skips[20] = []
-        if (typeof cmps[20] !== 'undefined' && cmps[20][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[20][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[20][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[20][key]
-            skips[20].push(key)
-          }
-        }
+      elms[18].populate(elementConfigs[18])
 
-        elms[20].populate(elementConfigs[20])
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[18]
+      props[19] = {}
+      props[19]['image'] = component.image
+      props[19]['x'] = 18
+      props[19]['h'] = 20
+      props[19]['w'] = 20
+      props[19]['map'] = component.sprite
+
+      propData = component.avgFps[1]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[19]['frame'] = propData
+
+      componentType = props[19]['is'] || 'Sprite'
+
+      components[19]
+      if (typeof componentType === 'string') {
+        components[19] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[19]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[19] = componentType
+      }
 
-        parent = elms[20]
-        props[21] = {}
-        props[21]['image'] = component.image
-        props[21]['x'] = 36
-        props[21]['h'] = 20
-        props[21]['w'] = 20
-        props[21]['map'] = component.sprite
-
-        propData = component.avgFps[2]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[21]['frame'] = propData
-
-        componentType = props[21]['is'] || 'Sprite'
-
-        components[21]
-        if (typeof componentType === 'string') {
-          components[21] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[21]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[21] = componentType
-        }
+      elms[19] = components[19].call(null, { props: props[19] }, elms[18], component)
 
-        elms[21] = components[21].call(null, { props: props[21] }, elms[20], component)
+      if (elms[19][Symbol.for('slots')][0]) {
+        parent = elms[19][Symbol.for('slots')][0]
+        slotComponent = elms[19]
+        inSlot = true
+      } else {
+        parent = elms[19][Symbol.for('children')][0]
+      }
 
-        if (elms[21][Symbol.for('slots')][0]) {
-          parent = elms[21][Symbol.for('slots')][0]
-          slotComponent = elms[21]
-          inSlot = true
-        } else {
-          parent = elms[21][Symbol.for('children')][0]
-        }
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[20] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[15]
+      elementConfigs[20] = {}
+
+      elms[20] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[20]['holder'] = true
+      elementConfigs[20]['image'] = component.image
+      elementConfigs[20]['x'] = 36
+      elementConfigs[20]['h'] = 20
+      elementConfigs[20]['w'] = 20
+      elementConfigs[20]['map'] = component.sprite
+      elementConfigs[20]['frame'] = component.avgFps[2]
+
+      skips[20] = []
+      if (typeof cmps[20] !== 'undefined' && cmps[20][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[20][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[20][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[20][key]
+          skips[20].push(key)
         }
+      }
 
-        parent = elms[1]
-        elementConfigs[22] = {}
-
-        elms[22] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[22]['x'] = 0
-        elementConfigs[22]['y'] = 40
-        elms[22].populate(elementConfigs[22])
-
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      elms[20].populate(elementConfigs[20])
 
-        cmps[23] = (context.components && context.components['Sprite']) || components['Sprite']
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        parent = elms[22]
-        elementConfigs[23] = {}
+      parent = elms[20]
+      props[21] = {}
+      props[21]['image'] = component.image
+      props[21]['x'] = 36
+      props[21]['h'] = 20
+      props[21]['w'] = 20
+      props[21]['map'] = component.sprite
+
+      propData = component.avgFps[2]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[21]['frame'] = propData
+
+      componentType = props[21]['is'] || 'Sprite'
+
+      components[21]
+      if (typeof componentType === 'string') {
+        components[21] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[21]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[21] = componentType
+      }
 
-        elms[23] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      elms[21] = components[21].call(null, { props: props[21] }, elms[20], component)
 
-        elementConfigs[23]['image'] = component.image
-        elementConfigs[23]['x'] = '-2'
-        elementConfigs[23]['w'] = 47
-        elementConfigs[23]['h'] = 25
-        elementConfigs[23]['map'] = component.sprite
-        elementConfigs[23]['frame'] = 'min'
-
-        skips[23] = []
-        if (typeof cmps[23] !== 'undefined' && cmps[23][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[23][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[23][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[23][key]
-            skips[23].push(key)
-          }
-        }
+      if (elms[21][Symbol.for('slots')][0]) {
+        parent = elms[21][Symbol.for('slots')][0]
+        slotComponent = elms[21]
+        inSlot = true
+      } else {
+        parent = elms[21][Symbol.for('children')][0]
+      }
 
-        elms[23].populate(elementConfigs[23])
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[1]
+      elementConfigs[22] = {}
 
-        parent = elms[23]
-        props[24] = {}
-        props[24]['image'] = component.image
-        props[24]['x'] = '-2'
-        props[24]['w'] = 47
-        props[24]['h'] = 25
-        props[24]['map'] = component.sprite
-        props[24]['frame'] = 'min'
-
-        componentType = props[24]['is'] || 'Sprite'
-
-        components[24]
-        if (typeof componentType === 'string') {
-          components[24] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[24]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[24] = componentType
-        }
+      elms[22] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-        elms[24] = components[24].call(null, { props: props[24] }, elms[23], component)
+      elementConfigs[22]['x'] = 0
+      elementConfigs[22]['y'] = 40
+      elms[22].populate(elementConfigs[22])
 
-        if (elms[24][Symbol.for('slots')][0]) {
-          parent = elms[24][Symbol.for('slots')][0]
-          slotComponent = elms[24]
-          inSlot = true
-        } else {
-          parent = elms[24][Symbol.for('children')][0]
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[23] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[22]
+      elementConfigs[23] = {}
+
+      elms[23] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[23]['holder'] = true
+      elementConfigs[23]['image'] = component.image
+      elementConfigs[23]['x'] = '-2'
+      elementConfigs[23]['w'] = 47
+      elementConfigs[23]['h'] = 25
+      elementConfigs[23]['map'] = component.sprite
+      elementConfigs[23]['frame'] = 'min'
+
+      skips[23] = []
+      if (typeof cmps[23] !== 'undefined' && cmps[23][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[23][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[23][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[23][key]
+          skips[23].push(key)
         }
+      }
 
-        parent = elms[22]
-        elementConfigs[25] = {}
-
-        elms[25] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      elms[23].populate(elementConfigs[23])
 
-        elementConfigs[25]['x'] = 58
-        elementConfigs[25]['y'] = 2
-        elms[25].populate(elementConfigs[25])
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[23]
+      props[24] = {}
+      props[24]['image'] = component.image
+      props[24]['x'] = '-2'
+      props[24]['w'] = 47
+      props[24]['h'] = 25
+      props[24]['map'] = component.sprite
+      props[24]['frame'] = 'min'
+
+      componentType = props[24]['is'] || 'Sprite'
+
+      components[24]
+      if (typeof componentType === 'string') {
+        components[24] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[24]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[24] = componentType
+      }
 
-        cmps[26] = (context.components && context.components['Sprite']) || components['Sprite']
+      elms[24] = components[24].call(null, { props: props[24] }, elms[23], component)
 
-        parent = elms[25]
-        elementConfigs[26] = {}
+      if (elms[24][Symbol.for('slots')][0]) {
+        parent = elms[24][Symbol.for('slots')][0]
+        slotComponent = elms[24]
+        inSlot = true
+      } else {
+        parent = elms[24][Symbol.for('children')][0]
+      }
 
-        elms[26] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        elementConfigs[26]['image'] = component.image
-        elementConfigs[26]['x'] = 0
-        elementConfigs[26]['h'] = 20
-        elementConfigs[26]['w'] = 20
-        elementConfigs[26]['map'] = component.sprite
-        elementConfigs[26]['frame'] = component.minFps[0]
-
-        skips[26] = []
-        if (typeof cmps[26] !== 'undefined' && cmps[26][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[26][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[26][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[26][key]
-            skips[26].push(key)
-          }
-        }
+      parent = elms[22]
+      elementConfigs[25] = {}
 
-        elms[26].populate(elementConfigs[26])
+      elms[25] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      elementConfigs[25]['x'] = 58
+      elementConfigs[25]['y'] = 2
+      elms[25].populate(elementConfigs[25])
 
-        parent = elms[26]
-        props[27] = {}
-        props[27]['image'] = component.image
-        props[27]['x'] = 0
-        props[27]['h'] = 20
-        props[27]['w'] = 20
-        props[27]['map'] = component.sprite
-
-        propData = component.minFps[0]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[27]['frame'] = propData
-
-        componentType = props[27]['is'] || 'Sprite'
-
-        components[27]
-        if (typeof componentType === 'string') {
-          components[27] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[27]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[27] = componentType
-        }
-
-        elms[27] = components[27].call(null, { props: props[27] }, elms[26], component)
-
-        if (elms[27][Symbol.for('slots')][0]) {
-          parent = elms[27][Symbol.for('slots')][0]
-          slotComponent = elms[27]
-          inSlot = true
-        } else {
-          parent = elms[27][Symbol.for('children')][0]
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[26] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[25]
+      elementConfigs[26] = {}
+
+      elms[26] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[26]['holder'] = true
+      elementConfigs[26]['image'] = component.image
+      elementConfigs[26]['x'] = 0
+      elementConfigs[26]['h'] = 20
+      elementConfigs[26]['w'] = 20
+      elementConfigs[26]['map'] = component.sprite
+      elementConfigs[26]['frame'] = component.minFps[0]
+
+      skips[26] = []
+      if (typeof cmps[26] !== 'undefined' && cmps[26][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[26][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[26][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[26][key]
+          skips[26].push(key)
         }
+      }
 
-        cmps[28] = (context.components && context.components['Sprite']) || components['Sprite']
-
-        parent = elms[25]
-        elementConfigs[28] = {}
-
-        elms[28] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      elms[26].populate(elementConfigs[26])
 
-        elementConfigs[28]['image'] = component.image
-        elementConfigs[28]['x'] = 18
-        elementConfigs[28]['h'] = 20
-        elementConfigs[28]['w'] = 20
-        elementConfigs[28]['map'] = component.sprite
-        elementConfigs[28]['frame'] = component.minFps[1]
-
-        skips[28] = []
-        if (typeof cmps[28] !== 'undefined' && cmps[28][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[28][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[28][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[28][key]
-            skips[28].push(key)
-          }
-        }
-
-        elms[28].populate(elementConfigs[28])
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[26]
+      props[27] = {}
+      props[27]['image'] = component.image
+      props[27]['x'] = 0
+      props[27]['h'] = 20
+      props[27]['w'] = 20
+      props[27]['map'] = component.sprite
+
+      propData = component.minFps[0]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[27]['frame'] = propData
+
+      componentType = props[27]['is'] || 'Sprite'
+
+      components[27]
+      if (typeof componentType === 'string') {
+        components[27] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[27]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[27] = componentType
+      }
 
-        parent = elms[28]
-        props[29] = {}
-        props[29]['image'] = component.image
-        props[29]['x'] = 18
-        props[29]['h'] = 20
-        props[29]['w'] = 20
-        props[29]['map'] = component.sprite
-
-        propData = component.minFps[1]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[29]['frame'] = propData
-
-        componentType = props[29]['is'] || 'Sprite'
-
-        components[29]
-        if (typeof componentType === 'string') {
-          components[29] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[29]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[29] = componentType
-        }
+      elms[27] = components[27].call(null, { props: props[27] }, elms[26], component)
 
-        elms[29] = components[29].call(null, { props: props[29] }, elms[28], component)
+      if (elms[27][Symbol.for('slots')][0]) {
+        parent = elms[27][Symbol.for('slots')][0]
+        slotComponent = elms[27]
+        inSlot = true
+      } else {
+        parent = elms[27][Symbol.for('children')][0]
+      }
 
-        if (elms[29][Symbol.for('slots')][0]) {
-          parent = elms[29][Symbol.for('slots')][0]
-          slotComponent = elms[29]
-          inSlot = true
-        } else {
-          parent = elms[29][Symbol.for('children')][0]
-        }
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[28] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[25]
+      elementConfigs[28] = {}
+
+      elms[28] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[28]['holder'] = true
+      elementConfigs[28]['image'] = component.image
+      elementConfigs[28]['x'] = 18
+      elementConfigs[28]['h'] = 20
+      elementConfigs[28]['w'] = 20
+      elementConfigs[28]['map'] = component.sprite
+      elementConfigs[28]['frame'] = component.minFps[1]
+
+      skips[28] = []
+      if (typeof cmps[28] !== 'undefined' && cmps[28][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[28][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[28][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[28][key]
+          skips[28].push(key)
         }
+      }
 
-        cmps[30] = (context.components && context.components['Sprite']) || components['Sprite']
-
-        parent = elms[25]
-        elementConfigs[30] = {}
-
-        elms[30] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[30]['image'] = component.image
-        elementConfigs[30]['x'] = 36
-        elementConfigs[30]['h'] = 20
-        elementConfigs[30]['w'] = 20
-        elementConfigs[30]['map'] = component.sprite
-        elementConfigs[30]['frame'] = component.minFps[2]
-
-        skips[30] = []
-        if (typeof cmps[30] !== 'undefined' && cmps[30][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[30][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[30][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[30][key]
-            skips[30].push(key)
-          }
-        }
+      elms[28].populate(elementConfigs[28])
 
-        elms[30].populate(elementConfigs[30])
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[28]
+      props[29] = {}
+      props[29]['image'] = component.image
+      props[29]['x'] = 18
+      props[29]['h'] = 20
+      props[29]['w'] = 20
+      props[29]['map'] = component.sprite
+
+      propData = component.minFps[1]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[29]['frame'] = propData
+
+      componentType = props[29]['is'] || 'Sprite'
+
+      components[29]
+      if (typeof componentType === 'string') {
+        components[29] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[29]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[29] = componentType
+      }
 
-        parent = elms[30]
-        props[31] = {}
-        props[31]['image'] = component.image
-        props[31]['x'] = 36
-        props[31]['h'] = 20
-        props[31]['w'] = 20
-        props[31]['map'] = component.sprite
-
-        propData = component.minFps[2]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[31]['frame'] = propData
-
-        componentType = props[31]['is'] || 'Sprite'
-
-        components[31]
-        if (typeof componentType === 'string') {
-          components[31] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[31]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[31] = componentType
-        }
+      elms[29] = components[29].call(null, { props: props[29] }, elms[28], component)
 
-        elms[31] = components[31].call(null, { props: props[31] }, elms[30], component)
+      if (elms[29][Symbol.for('slots')][0]) {
+        parent = elms[29][Symbol.for('slots')][0]
+        slotComponent = elms[29]
+        inSlot = true
+      } else {
+        parent = elms[29][Symbol.for('children')][0]
+      }
 
-        if (elms[31][Symbol.for('slots')][0]) {
-          parent = elms[31][Symbol.for('slots')][0]
-          slotComponent = elms[31]
-          inSlot = true
-        } else {
-          parent = elms[31][Symbol.for('children')][0]
-        }
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[30] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[25]
+      elementConfigs[30] = {}
+
+      elms[30] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[30]['holder'] = true
+      elementConfigs[30]['image'] = component.image
+      elementConfigs[30]['x'] = 36
+      elementConfigs[30]['h'] = 20
+      elementConfigs[30]['w'] = 20
+      elementConfigs[30]['map'] = component.sprite
+      elementConfigs[30]['frame'] = component.minFps[2]
+
+      skips[30] = []
+      if (typeof cmps[30] !== 'undefined' && cmps[30][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[30][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[30][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[30][key]
+          skips[30].push(key)
         }
+      }
 
-        parent = elms[1]
-        elementConfigs[32] = {}
-
-        elms[32] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[32]['x'] = 150
-        elementConfigs[32]['y'] = 40
-        elms[32].populate(elementConfigs[32])
-
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      elms[30].populate(elementConfigs[30])
 
-        cmps[33] = (context.components && context.components['Sprite']) || components['Sprite']
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        parent = elms[32]
-        elementConfigs[33] = {}
+      parent = elms[30]
+      props[31] = {}
+      props[31]['image'] = component.image
+      props[31]['x'] = 36
+      props[31]['h'] = 20
+      props[31]['w'] = 20
+      props[31]['map'] = component.sprite
+
+      propData = component.minFps[2]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[31]['frame'] = propData
+
+      componentType = props[31]['is'] || 'Sprite'
+
+      components[31]
+      if (typeof componentType === 'string') {
+        components[31] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[31]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[31] = componentType
+      }
 
-        elms[33] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      elms[31] = components[31].call(null, { props: props[31] }, elms[30], component)
 
-        elementConfigs[33]['image'] = component.image
-        elementConfigs[33]['w'] = 53
-        elementConfigs[33]['h'] = 25
-        elementConfigs[33]['map'] = component.sprite
-        elementConfigs[33]['frame'] = 'max'
-
-        skips[33] = []
-        if (typeof cmps[33] !== 'undefined' && cmps[33][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[33][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[33][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[33][key]
-            skips[33].push(key)
-          }
-        }
+      if (elms[31][Symbol.for('slots')][0]) {
+        parent = elms[31][Symbol.for('slots')][0]
+        slotComponent = elms[31]
+        inSlot = true
+      } else {
+        parent = elms[31][Symbol.for('children')][0]
+      }
 
-        elms[33].populate(elementConfigs[33])
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[1]
+      elementConfigs[32] = {}
 
-        parent = elms[33]
-        props[34] = {}
-        props[34]['image'] = component.image
-        props[34]['w'] = 53
-        props[34]['h'] = 25
-        props[34]['map'] = component.sprite
-        props[34]['frame'] = 'max'
-
-        componentType = props[34]['is'] || 'Sprite'
-
-        components[34]
-        if (typeof componentType === 'string') {
-          components[34] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[34]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[34] = componentType
-        }
+      elms[32] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-        elms[34] = components[34].call(null, { props: props[34] }, elms[33], component)
+      elementConfigs[32]['x'] = 150
+      elementConfigs[32]['y'] = 40
+      elms[32].populate(elementConfigs[32])
 
-        if (elms[34][Symbol.for('slots')][0]) {
-          parent = elms[34][Symbol.for('slots')][0]
-          slotComponent = elms[34]
-          inSlot = true
-        } else {
-          parent = elms[34][Symbol.for('children')][0]
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[33] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[32]
+      elementConfigs[33] = {}
+
+      elms[33] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[33]['holder'] = true
+      elementConfigs[33]['image'] = component.image
+      elementConfigs[33]['w'] = 53
+      elementConfigs[33]['h'] = 25
+      elementConfigs[33]['map'] = component.sprite
+      elementConfigs[33]['frame'] = 'max'
+
+      skips[33] = []
+      if (typeof cmps[33] !== 'undefined' && cmps[33][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[33][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[33][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[33][key]
+          skips[33].push(key)
         }
+      }
 
-        parent = elms[32]
-        elementConfigs[35] = {}
+      elms[33].populate(elementConfigs[33])
 
-        elms[35] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[35]['x'] = 63
-        elementConfigs[35]['y'] = 2
-        elms[35].populate(elementConfigs[35])
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      parent = elms[33]
+      props[34] = {}
+      props[34]['image'] = component.image
+      props[34]['w'] = 53
+      props[34]['h'] = 25
+      props[34]['map'] = component.sprite
+      props[34]['frame'] = 'max'
+
+      componentType = props[34]['is'] || 'Sprite'
+
+      components[34]
+      if (typeof componentType === 'string') {
+        components[34] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[34]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[34] = componentType
+      }
 
-        cmps[36] = (context.components && context.components['Sprite']) || components['Sprite']
+      elms[34] = components[34].call(null, { props: props[34] }, elms[33], component)
 
-        parent = elms[35]
-        elementConfigs[36] = {}
+      if (elms[34][Symbol.for('slots')][0]) {
+        parent = elms[34][Symbol.for('slots')][0]
+        slotComponent = elms[34]
+        inSlot = true
+      } else {
+        parent = elms[34][Symbol.for('children')][0]
+      }
 
-        elms[36] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        elementConfigs[36]['image'] = component.image
-        elementConfigs[36]['x'] = 0
-        elementConfigs[36]['h'] = 20
-        elementConfigs[36]['w'] = 20
-        elementConfigs[36]['map'] = component.sprite
-        elementConfigs[36]['frame'] = component.maxFps[0]
-
-        skips[36] = []
-        if (typeof cmps[36] !== 'undefined' && cmps[36][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[36][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[36][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[36][key]
-            skips[36].push(key)
-          }
-        }
+      parent = elms[32]
+      elementConfigs[35] = {}
 
-        elms[36].populate(elementConfigs[36])
+      elms[35] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      elementConfigs[35]['x'] = 63
+      elementConfigs[35]['y'] = 2
+      elms[35].populate(elementConfigs[35])
 
-        parent = elms[36]
-        props[37] = {}
-        props[37]['image'] = component.image
-        props[37]['x'] = 0
-        props[37]['h'] = 20
-        props[37]['w'] = 20
-        props[37]['map'] = component.sprite
-
-        propData = component.maxFps[0]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[37]['frame'] = propData
-
-        componentType = props[37]['is'] || 'Sprite'
-
-        components[37]
-        if (typeof componentType === 'string') {
-          components[37] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[37]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[37] = componentType
-        }
-
-        elms[37] = components[37].call(null, { props: props[37] }, elms[36], component)
-
-        if (elms[37][Symbol.for('slots')][0]) {
-          parent = elms[37][Symbol.for('slots')][0]
-          slotComponent = elms[37]
-          inSlot = true
-        } else {
-          parent = elms[37][Symbol.for('children')][0]
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
+      cmps[36] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[35]
+      elementConfigs[36] = {}
+
+      elms[36] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[36]['holder'] = true
+      elementConfigs[36]['image'] = component.image
+      elementConfigs[36]['x'] = 0
+      elementConfigs[36]['h'] = 20
+      elementConfigs[36]['w'] = 20
+      elementConfigs[36]['map'] = component.sprite
+      elementConfigs[36]['frame'] = component.maxFps[0]
+
+      skips[36] = []
+      if (typeof cmps[36] !== 'undefined' && cmps[36][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[36][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[36][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[36][key]
+          skips[36].push(key)
         }
+      }
 
-        cmps[38] = (context.components && context.components['Sprite']) || components['Sprite']
+      elms[36].populate(elementConfigs[36])
 
-        parent = elms[35]
-        elementConfigs[38] = {}
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        elms[38] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      parent = elms[36]
+      props[37] = {}
+      props[37]['image'] = component.image
+      props[37]['x'] = 0
+      props[37]['h'] = 20
+      props[37]['w'] = 20
+      props[37]['map'] = component.sprite
+
+      propData = component.maxFps[0]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[37]['frame'] = propData
+
+      componentType = props[37]['is'] || 'Sprite'
+
+      components[37]
+      if (typeof componentType === 'string') {
+        components[37] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[37]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[37] = componentType
+      }
 
-        elementConfigs[38]['image'] = component.image
-        elementConfigs[38]['x'] = 18
-        elementConfigs[38]['h'] = 20
-        elementConfigs[38]['w'] = 20
-        elementConfigs[38]['map'] = component.sprite
-        elementConfigs[38]['frame'] = component.maxFps[1]
-
-        skips[38] = []
-        if (typeof cmps[38] !== 'undefined' && cmps[38][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[38][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[38][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[38][key]
-            skips[38].push(key)
-          }
-        }
+      elms[37] = components[37].call(null, { props: props[37] }, elms[36], component)
 
-        elms[38].populate(elementConfigs[38])
+      if (elms[37][Symbol.for('slots')][0]) {
+        parent = elms[37][Symbol.for('slots')][0]
+        slotComponent = elms[37]
+        inSlot = true
+      } else {
+        parent = elms[37][Symbol.for('children')][0]
+      }
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        parent = elms[38]
-        props[39] = {}
-        props[39]['image'] = component.image
-        props[39]['x'] = 18
-        props[39]['h'] = 20
-        props[39]['w'] = 20
-        props[39]['map'] = component.sprite
-
-        propData = component.maxFps[1]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[39]['frame'] = propData
-
-        componentType = props[39]['is'] || 'Sprite'
-
-        components[39]
-        if (typeof componentType === 'string') {
-          components[39] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[39]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[39] = componentType
+      cmps[38] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[35]
+      elementConfigs[38] = {}
+
+      elms[38] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[38]['holder'] = true
+      elementConfigs[38]['image'] = component.image
+      elementConfigs[38]['x'] = 18
+      elementConfigs[38]['h'] = 20
+      elementConfigs[38]['w'] = 20
+      elementConfigs[38]['map'] = component.sprite
+      elementConfigs[38]['frame'] = component.maxFps[1]
+
+      skips[38] = []
+      if (typeof cmps[38] !== 'undefined' && cmps[38][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[38][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[38][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[38][key]
+          skips[38].push(key)
         }
+      }
 
-        elms[39] = components[39].call(null, { props: props[39] }, elms[38], component)
+      elms[38].populate(elementConfigs[38])
 
-        if (elms[39][Symbol.for('slots')][0]) {
-          parent = elms[39][Symbol.for('slots')][0]
-          slotComponent = elms[39]
-          inSlot = true
-        } else {
-          parent = elms[39][Symbol.for('children')][0]
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
-        }
+      parent = elms[38]
+      props[39] = {}
+      props[39]['image'] = component.image
+      props[39]['x'] = 18
+      props[39]['h'] = 20
+      props[39]['w'] = 20
+      props[39]['map'] = component.sprite
+
+      propData = component.maxFps[1]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[39]['frame'] = propData
+
+      componentType = props[39]['is'] || 'Sprite'
+
+      components[39]
+      if (typeof componentType === 'string') {
+        components[39] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[39]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[39] = componentType
+      }
 
-        cmps[40] = (context.components && context.components['Sprite']) || components['Sprite']
+      elms[39] = components[39].call(null, { props: props[39] }, elms[38], component)
 
-        parent = elms[35]
-        elementConfigs[40] = {}
+      if (elms[39][Symbol.for('slots')][0]) {
+        parent = elms[39][Symbol.for('slots')][0]
+        slotComponent = elms[39]
+        inSlot = true
+      } else {
+        parent = elms[39][Symbol.for('children')][0]
+      }
 
-        elms[40] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        elementConfigs[40]['image'] = component.image
-        elementConfigs[40]['x'] = 36
-        elementConfigs[40]['h'] = 20
-        elementConfigs[40]['w'] = 20
-        elementConfigs[40]['map'] = component.sprite
-        elementConfigs[40]['frame'] = component.maxFps[2]
-
-        skips[40] = []
-        if (typeof cmps[40] !== 'undefined' && cmps[40][Symbol.for('config')].props !== undefined) {
-          // attributes that are a prop should be removed from element config (even if it's a know element prop)
-          let props = cmps[40][Symbol.for('config')].props
-          if (Array.isArray(props) === false)
-            props = Object.keys(cmps[40][Symbol.for('config')].props)
-          for (let k = 0; k < props.length; k++) {
-            const key = props[k]
-            if (validAttributes.indexOf(key) !== -1) continue
-            delete elementConfigs[40][key]
-            skips[40].push(key)
-          }
+      cmps[40] = (context.components && context.components['Sprite']) || components['Sprite']
+
+      parent = elms[35]
+      elementConfigs[40] = {}
+
+      elms[40] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
+
+      elementConfigs[40]['holder'] = true
+      elementConfigs[40]['image'] = component.image
+      elementConfigs[40]['x'] = 36
+      elementConfigs[40]['h'] = 20
+      elementConfigs[40]['w'] = 20
+      elementConfigs[40]['map'] = component.sprite
+      elementConfigs[40]['frame'] = component.maxFps[2]
+
+      skips[40] = []
+      if (typeof cmps[40] !== 'undefined' && cmps[40][Symbol.for('config')].props !== undefined) {
+        // attributes that are a prop should be removed from element config (even if it's a know element prop)
+        let props = cmps[40][Symbol.for('config')].props
+        if (Array.isArray(props) === false)
+          props = Object.keys(cmps[40][Symbol.for('config')].props)
+        for (let k = 0; k < props.length; k++) {
+          const key = props[k]
+          if (validAttributes.indexOf(key) !== -1) continue
+          delete elementConfigs[40][key]
+          skips[40].push(key)
         }
+      }
 
-        elms[40].populate(elementConfigs[40])
+      elms[40].populate(elementConfigs[40])
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+      if (inSlot === true) {
+        slotChildCounter -= 1
+      }
 
-        parent = elms[40]
-        props[41] = {}
-        props[41]['image'] = component.image
-        props[41]['x'] = 36
-        props[41]['h'] = 20
-        props[41]['w'] = 20
-        props[41]['map'] = component.sprite
-
-        propData = component.maxFps[2]
-        if (Array.isArray(propData) === true) {
-          propData = getRaw(propData).slice(0)
-        }
-        props[41]['frame'] = propData
-
-        componentType = props[41]['is'] || 'Sprite'
-
-        components[41]
-        if (typeof componentType === 'string') {
-          components[41] =
-            (context.components && context.components[componentType]) || components[componentType]
-          if (!components[41]) {
-            throw new Error('Component "Sprite" not found')
-          }
-        } else if (
-          typeof componentType === 'function' &&
-          componentType[Symbol.for('isComponent')] === true
-        ) {
-          components[41] = componentType
-        }
+      parent = elms[40]
+      props[41] = {}
+      props[41]['image'] = component.image
+      props[41]['x'] = 36
+      props[41]['h'] = 20
+      props[41]['w'] = 20
+      props[41]['map'] = component.sprite
+
+      propData = component.maxFps[2]
+      if (Array.isArray(propData) === true) {
+        propData = getRaw(propData).slice(0)
+      }
+      props[41]['frame'] = propData
+
+      componentType = props[41]['is'] || 'Sprite'
+
+      components[41]
+      if (typeof componentType === 'string') {
+        components[41] =
+          (context.components && context.components[componentType]) || components[componentType]
+        if (!components[41]) {
+          throw new Error('Component "Sprite" not found')
+        }
+      } else if (
+        typeof componentType === 'function' &&
+        componentType[Symbol.for('isComponent')] === true
+      ) {
+        components[41] = componentType
+      }
 
-        elms[41] = components[41].call(null, { props: props[41] }, elms[40], component)
+      elms[41] = components[41].call(null, { props: props[41] }, elms[40], component)
 
-        if (elms[41][Symbol.for('slots')][0]) {
-          parent = elms[41][Symbol.for('slots')][0]
-          slotComponent = elms[41]
-          inSlot = true
-        } else {
-          parent = elms[41][Symbol.for('children')][0]
-        }
+      if (elms[41][Symbol.for('slots')][0]) {
+        parent = elms[41][Symbol.for('slots')][0]
+        slotComponent = elms[41]
+        inSlot = true
+      } else {
+        parent = elms[41][Symbol.for('children')][0]
+      }
 
-        if (inSlot === true && slotChildCounter === 0) {
-          inSlot = false
-        }
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
 
-        return {
-          elms,
-          cleanup: () => {
-            rootComponent = null
-            propData = null
-            slotComponent = null
-            parent = null
+      return {
+        elms,
+        cleanup: () => {
+          rootComponent = null
+          propData = null
+          slotComponent = null
+          parent = null
 
-            cmps[3] = null
+          cmps[3] = null
 
-            props[4] = null
-            components[4] = null
+          props[4] = null
+          components[4] = null
 
-            cmps[6] = null
+          cmps[6] = null
 
-            props[7] = null
-            components[7] = null
+          props[7] = null
+          components[7] = null
 
-            cmps[8] = null
+          cmps[8] = null
 
-            props[9] = null
-            components[9] = null
+          props[9] = null
+          components[9] = null
 
-            cmps[10] = null
+          cmps[10] = null
 
-            props[11] = null
-            components[11] = null
+          props[11] = null
+          components[11] = null
 
-            cmps[13] = null
+          cmps[13] = null
 
-            props[14] = null
-            components[14] = null
+          props[14] = null
+          components[14] = null
 
-            cmps[16] = null
+          cmps[16] = null
 
-            props[17] = null
-            components[17] = null
+          props[17] = null
+          components[17] = null
 
-            cmps[18] = null
+          cmps[18] = null
 
-            props[19] = null
-            components[19] = null
+          props[19] = null
+          components[19] = null
 
-            cmps[20] = null
+          cmps[20] = null
 
-            props[21] = null
-            components[21] = null
+          props[21] = null
+          components[21] = null
 
-            cmps[23] = null
+          cmps[23] = null
 
-            props[24] = null
-            components[24] = null
+          props[24] = null
+          components[24] = null
 
-            cmps[26] = null
+          cmps[26] = null
 
-            props[27] = null
-            components[27] = null
+          props[27] = null
+          components[27] = null
 
-            cmps[28] = null
+          cmps[28] = null
 
-            props[29] = null
-            components[29] = null
+          props[29] = null
+          components[29] = null
 
-            cmps[30] = null
+          cmps[30] = null
 
-            props[31] = null
-            components[31] = null
+          props[31] = null
+          components[31] = null
 
-            cmps[33] = null
+          cmps[33] = null
 
-            props[34] = null
-            components[34] = null
+          props[34] = null
+          components[34] = null
 
-            cmps[36] = null
+          cmps[36] = null
 
-            props[37] = null
-            components[37] = null
+          props[37] = null
+          components[37] = null
 
-            cmps[38] = null
+          cmps[38] = null
 
-            props[39] = null
-            components[39] = null
+          props[39] = null
+          components[39] = null
 
-            cmps[40] = null
+          cmps[40] = null
 
-            props[41] = null
-            components[41] = null
-            component = null
-            cmps.length = 0
-            elms.length = 0
-            components.length = 0
-            elementConfigs.length = 0
-            forloops.length = 0
-            props.length = 0
-            skips.length = 0
-          },
-          skips,
-        }
-      },
-      effects: [
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[6] === 'undefined' ||
-            skips[6].indexOf('frame') === -1
-          )
-            elms[6].set('frame', component.fps[0])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[7][Symbol.for('props')]['frame'] = component.fps[0]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[8] === 'undefined' ||
-            skips[8].indexOf('frame') === -1
-          )
-            elms[8].set('frame', component.fps[1])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[9][Symbol.for('props')]['frame'] = component.fps[1]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[10] === 'undefined' ||
-            skips[10].indexOf('frame') === -1
-          )
-            elms[10].set('frame', component.fps[2])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[11][Symbol.for('props')]['frame'] = component.fps[2]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[16] === 'undefined' ||
-            skips[16].indexOf('frame') === -1
-          )
-            elms[16].set('frame', component.avgFps[0])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[17][Symbol.for('props')]['frame'] = component.avgFps[0]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[18] === 'undefined' ||
-            skips[18].indexOf('frame') === -1
-          )
-            elms[18].set('frame', component.avgFps[1])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[19][Symbol.for('props')]['frame'] = component.avgFps[1]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[20] === 'undefined' ||
-            skips[20].indexOf('frame') === -1
-          )
-            elms[20].set('frame', component.avgFps[2])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[21][Symbol.for('props')]['frame'] = component.avgFps[2]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[26] === 'undefined' ||
-            skips[26].indexOf('frame') === -1
-          )
-            elms[26].set('frame', component.minFps[0])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[27][Symbol.for('props')]['frame'] = component.minFps[0]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[28] === 'undefined' ||
-            skips[28].indexOf('frame') === -1
-          )
-            elms[28].set('frame', component.minFps[1])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[29][Symbol.for('props')]['frame'] = component.minFps[1]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[30] === 'undefined' ||
-            skips[30].indexOf('frame') === -1
-          )
-            elms[30].set('frame', component.minFps[2])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[31][Symbol.for('props')]['frame'] = component.minFps[2]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[36] === 'undefined' ||
-            skips[36].indexOf('frame') === -1
-          )
-            elms[36].set('frame', component.maxFps[0])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[37][Symbol.for('props')]['frame'] = component.maxFps[0]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[38] === 'undefined' ||
-            skips[38].indexOf('frame') === -1
-          )
-            elms[38].set('frame', component.maxFps[1])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[39][Symbol.for('props')]['frame'] = component.maxFps[1]
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          if (
-            typeof skips === 'undefined' ||
-            typeof skips[40] === 'undefined' ||
-            skips[40].indexOf('frame') === -1
-          )
-            elms[40].set('frame', component.maxFps[2])
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[41][Symbol.for('props')]['frame'] = component.maxFps[2]
+          props[41] = null
+          components[41] = null
+          component = null
+          cmps.length = 0
+          elms.length = 0
+          components.length = 0
+          elementConfigs.length = 0
+          forloops.length = 0
+          props.length = 0
+          skips.length = 0
         },
-      ],
-      context: {},
-    },
-    state() {
-      return {
-        image: fps_sprite,
-        sprite: {
-          defaults: {
-            y: 1,
-            w: 20,
-            h: 20,
-          },
-          frames: {
-            '-': { x: -1000 },
-            0: { x: 1 },
-            1: { x: 23 },
-            2: { x: 45 },
-            3: { x: 67 },
-            4: { x: 89 },
-            5: { x: 111 },
-            6: { x: 133 },
-            7: { x: 155 },
-            8: { x: 177 },
-            9: { x: 199 },
-            avg: { x: 221, w: 48, h: 25 },
-            fps: { x: 271, w: 43, h: 25 },
-            max: { x: 316, w: 53, h: 25 },
-            min: { x: 371, w: 47, h: 25 },
-          },
-        },
-        fps: '---',
-        avgFps: '---',
-        minFps: '---',
-        maxFps: '---',
+        skips,
       }
     },
-    hooks: {
-      ready() {
-        let minFps = 10000
-        let maxFps = 0
-        let avgFps = 0
-        let totalFps = 0
-        let fpsUpdateCounter = 0
-
-        // This leaks - might be L3 SubTexture issue
-        // renderer.on('fpsUpdate', (rM, { fps }) => {
-        //   minFps = Math.min(fps, minFps)
-        //   maxFps = Math.max(fps, maxFps)
-        //   totalFps += fps
-        //   fpsUpdateCounter++
-        //   avgFps = Math.round(totalFps / fpsUpdateCounter)
-
-        //   this.fps = fps.toString().padStart(3, '0')
-        //   this.avgFps = avgFps.toString().padStart(3, '0')
-        //   this.minFps = minFps.toString().padStart(3, '0')
-        //   this.maxFps = maxFps.toString().padStart(3, '0')
-        // })
+    effects: [
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[6] === 'undefined' ||
+          skips[6].indexOf('frame') === -1
+        )
+          elms[6].set('frame', component.fps[0])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[7][Symbol.for('props')]['frame'] = component.fps[0]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[8] === 'undefined' ||
+          skips[8].indexOf('frame') === -1
+        )
+          elms[8].set('frame', component.fps[1])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[9][Symbol.for('props')]['frame'] = component.fps[1]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[10] === 'undefined' ||
+          skips[10].indexOf('frame') === -1
+        )
+          elms[10].set('frame', component.fps[2])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[11][Symbol.for('props')]['frame'] = component.fps[2]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[16] === 'undefined' ||
+          skips[16].indexOf('frame') === -1
+        )
+          elms[16].set('frame', component.avgFps[0])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[17][Symbol.for('props')]['frame'] = component.avgFps[0]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[18] === 'undefined' ||
+          skips[18].indexOf('frame') === -1
+        )
+          elms[18].set('frame', component.avgFps[1])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[19][Symbol.for('props')]['frame'] = component.avgFps[1]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[20] === 'undefined' ||
+          skips[20].indexOf('frame') === -1
+        )
+          elms[20].set('frame', component.avgFps[2])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[21][Symbol.for('props')]['frame'] = component.avgFps[2]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[26] === 'undefined' ||
+          skips[26].indexOf('frame') === -1
+        )
+          elms[26].set('frame', component.minFps[0])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[27][Symbol.for('props')]['frame'] = component.minFps[0]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[28] === 'undefined' ||
+          skips[28].indexOf('frame') === -1
+        )
+          elms[28].set('frame', component.minFps[1])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[29][Symbol.for('props')]['frame'] = component.minFps[1]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[30] === 'undefined' ||
+          skips[30].indexOf('frame') === -1
+        )
+          elms[30].set('frame', component.minFps[2])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[31][Symbol.for('props')]['frame'] = component.minFps[2]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[36] === 'undefined' ||
+          skips[36].indexOf('frame') === -1
+        )
+          elms[36].set('frame', component.maxFps[0])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[37][Symbol.for('props')]['frame'] = component.maxFps[0]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[38] === 'undefined' ||
+          skips[38].indexOf('frame') === -1
+        )
+          elms[38].set('frame', component.maxFps[1])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[39][Symbol.for('props')]['frame'] = component.maxFps[1]
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        if (
+          typeof skips === 'undefined' ||
+          typeof skips[40] === 'undefined' ||
+          skips[40].indexOf('frame') === -1
+        )
+          elms[40].set('frame', component.maxFps[2])
+      },
+      function anonymous(component, elms, context, components, rootComponent, skips, effect) {
+        elms[41][Symbol.for('props')]['frame'] = component.maxFps[2]
+      },
+    ],
+    context: {},
+  },
+  state() {
+    return {
+      image: fps_sprite,
+      sprite: {
+        defaults: {
+          y: 1,
+          w: 20,
+          h: 20,
+        },
+        frames: {
+          '-': { x: -1000 },
+          0: { x: 1 },
+          1: { x: 23 },
+          2: { x: 45 },
+          3: { x: 67 },
+          4: { x: 89 },
+          5: { x: 111 },
+          6: { x: 133 },
+          7: { x: 155 },
+          8: { x: 177 },
+          9: { x: 199 },
+          avg: { x: 221, w: 48, h: 25 },
+          fps: { x: 271, w: 43, h: 25 },
+          max: { x: 316, w: 53, h: 25 },
+          min: { x: 371, w: 47, h: 25 },
+        },
       },
+      fps: '---',
+      avgFps: '---',
+      minFps: '---',
+      maxFps: '---',
+    }
+  },
+  hooks: {
+    ready() {
+      let minFps = 10000
+      let maxFps = 0
+      let avgFps = 0
+      let totalFps = 0
+      let fpsUpdateCounter = 0
+
+      renderer.on('fpsUpdate', (rM, { fps }) => {
+        minFps = Math.min(fps, minFps)
+        maxFps = Math.max(fps, maxFps)
+        totalFps += fps
+        fpsUpdateCounter++
+        avgFps = Math.round(totalFps / fpsUpdateCounter)
+
+        this.fps = fps.toString().padStart(3, '0')
+        this.avgFps = avgFps.toString().padStart(3, '0')
+        this.minFps = minFps.toString().padStart(3, '0')
+        this.maxFps = maxFps.toString().padStart(3, '0')
+      })
     },
-  })
+  },
+})