@lightningjs/blits 2.4.1 → 2.6.0

package/src/components/FPScounter.js

@@ -37,6 +37,9 @@ export const FPScounter = Blits.Component('FPScounter', {
         'color',
         'src',
         'texture',
+        'image',
+        'map',
+        'frame',
         'fit',
         'rtt',
         'mount',
@@ -122,8 +125,6 @@ export const FPScounter = Blits.Component('FPScounter', {
         slotChildCounter -= 1
       }
 
-      cmps[3] = (context.components && context.components['Sprite']) || components['Sprite']
-
       parent = elms[2]
       elementConfigs[3] = {}
 
@@ -132,71 +133,35 @@ export const FPScounter = Blits.Component('FPScounter', {
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[3]['holder'] = true
+      elementConfigs[3][Symbol.for('isSprite')] = 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)
-        }
-      }
-
       elms[3].populate(elementConfigs[3])
 
       if (inSlot === true) {
         slotChildCounter -= 1
       }
 
-      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
-      }
+      parent = elms[2]
+      elementConfigs[4] = {}
 
-      elms[4] = components[4].call(null, { props: props[4] }, elms[3], component)
+      elms[4] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-      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]
-      }
+      elementConfigs[4]['x'] = 58
+      elementConfigs[4]['y'] = 2
+      elms[4].populate(elementConfigs[4])
 
-      if (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
+      if (inSlot === true) {
+        slotChildCounter -= 1
       }
 
-      parent = elms[2]
+      parent = elms[4]
       elementConfigs[5] = {}
 
       elms[5] = this.element(
@@ -204,17 +169,20 @@ export const FPScounter = Blits.Component('FPScounter', {
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[5]['x'] = 58
-      elementConfigs[5]['y'] = 2
+      elementConfigs[5][Symbol.for('isSprite')] = true
+      elementConfigs[5]['image'] = component.image
+      elementConfigs[5]['x'] = 0
+      elementConfigs[5]['h'] = 20
+      elementConfigs[5]['w'] = 20
+      elementConfigs[5]['map'] = component.sprite
+      elementConfigs[5]['frame'] = component.fps[0]
       elms[5].populate(elementConfigs[5])
 
       if (inSlot === true) {
         slotChildCounter -= 1
       }
 
-      cmps[6] = (context.components && context.components['Sprite']) || components['Sprite']
-
-      parent = elms[5]
+      parent = elms[4]
       elementConfigs[6] = {}
 
       elms[6] = this.element(
@@ -222,80 +190,41 @@ export const FPScounter = Blits.Component('FPScounter', {
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[6]['holder'] = true
+      elementConfigs[6][Symbol.for('isSprite')] = true
       elementConfigs[6]['image'] = component.image
-      elementConfigs[6]['x'] = 0
+      elementConfigs[6]['x'] = 18
       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)
-        }
-      }
-
+      elementConfigs[6]['frame'] = component.fps[1]
       elms[6].populate(elementConfigs[6])
 
       if (inSlot === true) {
         slotChildCounter -= 1
       }
 
-      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
-      }
+      parent = elms[4]
+      elementConfigs[7] = {}
 
-      elms[7] = components[7].call(null, { props: props[7] }, elms[6], component)
+      elms[7] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : 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]
-      }
+      elementConfigs[7][Symbol.for('isSprite')] = true
+      elementConfigs[7]['image'] = component.image
+      elementConfigs[7]['x'] = 36
+      elementConfigs[7]['h'] = 20
+      elementConfigs[7]['w'] = 20
+      elementConfigs[7]['map'] = component.sprite
+      elementConfigs[7]['frame'] = component.fps[2]
+      elms[7].populate(elementConfigs[7])
 
-      if (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
+      if (inSlot === true) {
+        slotChildCounter -= 1
       }
 
-      cmps[8] = (context.components && context.components['Sprite']) || components['Sprite']
-
-      parent = elms[5]
+      parent = elms[1]
       elementConfigs[8] = {}
 
       elms[8] = this.element(
@@ -303,27 +232,7 @@ export const FPScounter = Blits.Component('FPScounter', {
         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)
-        }
-      }
-
+      elementConfigs[8]['x'] = 150
       elms[8].populate(elementConfigs[8])
 
       if (inSlot === true) {
@@ -331,52 +240,27 @@ export const FPScounter = Blits.Component('FPScounter', {
       }
 
       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
-      }
+      elementConfigs[9] = {}
 
-      elms[9] = components[9].call(null, { props: props[9] }, elms[8], component)
+      elms[9] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : 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]
-      }
+      elementConfigs[9][Symbol.for('isSprite')] = true
+      elementConfigs[9]['image'] = component.image
+      elementConfigs[9]['y'] = 2
+      elementConfigs[9]['w'] = 48
+      elementConfigs[9]['h'] = 25
+      elementConfigs[9]['map'] = component.sprite
+      elementConfigs[9]['frame'] = 'avg'
+      elms[9].populate(elementConfigs[9])
 
-      if (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
+      if (inSlot === true) {
+        slotChildCounter -= 1
       }
 
-      cmps[10] = (context.components && context.components['Sprite']) || components['Sprite']
-
-      parent = elms[5]
+      parent = elms[8]
       elementConfigs[10] = {}
 
       elms[10] = this.element(
@@ -384,28 +268,8 @@ export const FPScounter = Blits.Component('FPScounter', {
         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)
-        }
-      }
-
+      elementConfigs[10]['x'] = 63
+      elementConfigs[10]['y'] = 2
       elms[10].populate(elementConfigs[10])
 
       if (inSlot === true) {
@@ -413,50 +277,27 @@ export const FPScounter = Blits.Component('FPScounter', {
       }
 
       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
-      }
+      elementConfigs[11] = {}
 
-      elms[11] = components[11].call(null, { props: props[11] }, elms[10], component)
+      elms[11] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-      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]
-      }
+      elementConfigs[11][Symbol.for('isSprite')] = true
+      elementConfigs[11]['image'] = component.image
+      elementConfigs[11]['x'] = 0
+      elementConfigs[11]['h'] = 20
+      elementConfigs[11]['w'] = 20
+      elementConfigs[11]['map'] = component.sprite
+      elementConfigs[11]['frame'] = component.avgFps[0]
+      elms[11].populate(elementConfigs[11])
 
-      if (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
+      if (inSlot === true) {
+        slotChildCounter -= 1
       }
 
-      parent = elms[1]
+      parent = elms[10]
       elementConfigs[12] = {}
 
       elms[12] = this.element(
@@ -464,16 +305,20 @@ export const FPScounter = Blits.Component('FPScounter', {
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[12]['x'] = 150
+      elementConfigs[12][Symbol.for('isSprite')] = true
+      elementConfigs[12]['image'] = component.image
+      elementConfigs[12]['x'] = 18
+      elementConfigs[12]['h'] = 20
+      elementConfigs[12]['w'] = 20
+      elementConfigs[12]['map'] = component.sprite
+      elementConfigs[12]['frame'] = component.avgFps[1]
       elms[12].populate(elementConfigs[12])
 
       if (inSlot === true) {
         slotChildCounter -= 1
       }
 
-      cmps[13] = (context.components && context.components['Sprite']) || components['Sprite']
-
-      parent = elms[12]
+      parent = elms[10]
       elementConfigs[13] = {}
 
       elms[13] = this.element(
@@ -481,74 +326,36 @@ export const FPScounter = Blits.Component('FPScounter', {
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[13]['holder'] = true
+      elementConfigs[13][Symbol.for('isSprite')] = true
       elementConfigs[13]['image'] = component.image
-      elementConfigs[13]['y'] = 2
-      elementConfigs[13]['w'] = 48
-      elementConfigs[13]['h'] = 25
+      elementConfigs[13]['x'] = 36
+      elementConfigs[13]['h'] = 20
+      elementConfigs[13]['w'] = 20
       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)
-        }
-      }
-
+      elementConfigs[13]['frame'] = component.avgFps[2]
       elms[13].populate(elementConfigs[13])
 
       if (inSlot === true) {
         slotChildCounter -= 1
       }
 
-      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[1]
+      elementConfigs[14] = {}
 
-      elms[14] = components[14].call(null, { props: props[14] }, elms[13], component)
+      elms[14] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-      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]
-      }
+      elementConfigs[14]['x'] = 0
+      elementConfigs[14]['y'] = 40
+      elms[14].populate(elementConfigs[14])
 
-      if (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
+      if (inSlot === true) {
+        slotChildCounter -= 1
       }
 
-      parent = elms[12]
+      parent = elms[14]
       elementConfigs[15] = {}
 
       elms[15] = this.element(
@@ -556,17 +363,20 @@ export const FPScounter = Blits.Component('FPScounter', {
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[15]['x'] = 63
-      elementConfigs[15]['y'] = 2
+      elementConfigs[15][Symbol.for('isSprite')] = true
+      elementConfigs[15]['image'] = component.image
+      elementConfigs[15]['x'] = '-2'
+      elementConfigs[15]['w'] = 47
+      elementConfigs[15]['h'] = 25
+      elementConfigs[15]['map'] = component.sprite
+      elementConfigs[15]['frame'] = 'min'
       elms[15].populate(elementConfigs[15])
 
       if (inSlot === true) {
         slotChildCounter -= 1
       }
 
-      cmps[16] = (context.components && context.components['Sprite']) || components['Sprite']
-
-      parent = elms[15]
+      parent = elms[14]
       elementConfigs[16] = {}
 
       elms[16] = this.element(
@@ -574,28 +384,8 @@ export const FPScounter = Blits.Component('FPScounter', {
         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)
-        }
-      }
-
+      elementConfigs[16]['x'] = 58
+      elementConfigs[16]['y'] = 2
       elms[16].populate(elementConfigs[16])
 
       if (inSlot === true) {
@@ -603,52 +393,27 @@ export const FPScounter = Blits.Component('FPScounter', {
       }
 
       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
-      }
+      elementConfigs[17] = {}
 
-      elms[17] = components[17].call(null, { props: props[17] }, elms[16], component)
+      elms[17] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : 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]
-      }
+      elementConfigs[17][Symbol.for('isSprite')] = true
+      elementConfigs[17]['image'] = component.image
+      elementConfigs[17]['x'] = 0
+      elementConfigs[17]['h'] = 20
+      elementConfigs[17]['w'] = 20
+      elementConfigs[17]['map'] = component.sprite
+      elementConfigs[17]['frame'] = component.minFps[0]
+      elms[17].populate(elementConfigs[17])
 
-      if (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
+      if (inSlot === true) {
+        slotChildCounter -= 1
       }
 
-      cmps[18] = (context.components && context.components['Sprite']) || components['Sprite']
-
-      parent = elms[15]
+      parent = elms[16]
       elementConfigs[18] = {}
 
       elms[18] = this.element(
@@ -656,81 +421,41 @@ export const FPScounter = Blits.Component('FPScounter', {
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[18]['holder'] = true
+      elementConfigs[18][Symbol.for('isSprite')] = 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)
-        }
-      }
-
+      elementConfigs[18]['frame'] = component.minFps[1]
       elms[18].populate(elementConfigs[18])
 
       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[16]
+      elementConfigs[19] = {}
 
-      elms[19] = components[19].call(null, { props: props[19] }, elms[18], component)
+      elms[19] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : 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]
-      }
+      elementConfigs[19][Symbol.for('isSprite')] = true
+      elementConfigs[19]['image'] = component.image
+      elementConfigs[19]['x'] = 36
+      elementConfigs[19]['h'] = 20
+      elementConfigs[19]['w'] = 20
+      elementConfigs[19]['map'] = component.sprite
+      elementConfigs[19]['frame'] = component.minFps[2]
+      elms[19].populate(elementConfigs[19])
 
-      if (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
+      if (inSlot === true) {
+        slotChildCounter -= 1
       }
 
-      cmps[20] = (context.components && context.components['Sprite']) || components['Sprite']
-
-      parent = elms[15]
+      parent = elms[1]
       elementConfigs[20] = {}
 
       elms[20] = this.element(
@@ -738,28 +463,8 @@ export const FPScounter = Blits.Component('FPScounter', {
         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)
-        }
-      }
-
+      elementConfigs[20]['x'] = 150
+      elementConfigs[20]['y'] = 40
       elms[20].populate(elementConfigs[20])
 
       if (inSlot === true) {
@@ -767,50 +472,26 @@ export const FPScounter = Blits.Component('FPScounter', {
       }
 
       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
-      }
+      elementConfigs[21] = {}
 
-      elms[21] = components[21].call(null, { props: props[21] }, elms[20], component)
+      elms[21] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+      )
 
-      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]
-      }
+      elementConfigs[21][Symbol.for('isSprite')] = true
+      elementConfigs[21]['image'] = component.image
+      elementConfigs[21]['w'] = 53
+      elementConfigs[21]['h'] = 25
+      elementConfigs[21]['map'] = component.sprite
+      elementConfigs[21]['frame'] = 'max'
+      elms[21].populate(elementConfigs[21])
 
-      if (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
+      if (inSlot === true) {
+        slotChildCounter -= 1
       }
 
-      parent = elms[1]
+      parent = elms[20]
       elementConfigs[22] = {}
 
       elms[22] = this.element(
@@ -818,16 +499,14 @@ export const FPScounter = Blits.Component('FPScounter', {
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[22]['x'] = 0
-      elementConfigs[22]['y'] = 40
+      elementConfigs[22]['x'] = 63
+      elementConfigs[22]['y'] = 2
       elms[22].populate(elementConfigs[22])
 
       if (inSlot === true) {
         slotChildCounter -= 1
       }
 
-      cmps[23] = (context.components && context.components['Sprite']) || components['Sprite']
-
       parent = elms[22]
       elementConfigs[23] = {}
 
@@ -836,688 +515,61 @@ export const FPScounter = Blits.Component('FPScounter', {
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[23]['holder'] = true
+      elementConfigs[23][Symbol.for('isSprite')] = true
       elementConfigs[23]['image'] = component.image
-      elementConfigs[23]['x'] = '-2'
-      elementConfigs[23]['w'] = 47
-      elementConfigs[23]['h'] = 25
+      elementConfigs[23]['x'] = 0
+      elementConfigs[23]['h'] = 20
+      elementConfigs[23]['w'] = 20
       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)
-        }
-      }
-
+      elementConfigs[23]['frame'] = component.maxFps[0]
       elms[23].populate(elementConfigs[23])
 
       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
-      }
-
-      elms[24] = components[24].call(null, { props: props[24] }, elms[23], component)
-
-      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 === 0) {
-        inSlot = false
-      }
-
       parent = elms[22]
-      elementConfigs[25] = {}
-
-      elms[25] = this.element(
-        { parent: parent || 'root' },
-        inSlot === true ? slotComponent : component
-      )
-
-      elementConfigs[25]['x'] = 58
-      elementConfigs[25]['y'] = 2
-      elms[25].populate(elementConfigs[25])
-
-      if (inSlot === true) {
-        slotChildCounter -= 1
-      }
-
-      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)
-        }
-      }
-
-      elms[26].populate(elementConfigs[26])
-
-      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
-      }
-
-      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 === 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)
-        }
-      }
-
-      elms[28].populate(elementConfigs[28])
-
-      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
-      }
-
-      elms[29] = components[29].call(null, { props: props[29] }, elms[28], 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 (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
-      }
-
-      cmps[30] = (context.components && context.components['Sprite']) || components['Sprite']
+      elementConfigs[24] = {}
 
-      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)
-        }
-      }
-
-      elms[30].populate(elementConfigs[30])
-
-      if (inSlot === true) {
-        slotChildCounter -= 1
-      }
-
-      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[31] = components[31].call(null, { props: props[31] }, elms[30], component)
-
-      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
-      }
-
-      parent = elms[1]
-      elementConfigs[32] = {}
-
-      elms[32] = this.element(
+      elms[24] = this.element(
         { parent: parent || 'root' },
         inSlot === true ? slotComponent : component
       )
 
-      elementConfigs[32]['x'] = 150
-      elementConfigs[32]['y'] = 40
-      elms[32].populate(elementConfigs[32])
+      elementConfigs[24][Symbol.for('isSprite')] = true
+      elementConfigs[24]['image'] = component.image
+      elementConfigs[24]['x'] = 18
+      elementConfigs[24]['h'] = 20
+      elementConfigs[24]['w'] = 20
+      elementConfigs[24]['map'] = component.sprite
+      elementConfigs[24]['frame'] = component.maxFps[1]
+      elms[24].populate(elementConfigs[24])
 
       if (inSlot === true) {
         slotChildCounter -= 1
       }
 
-      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)
-        }
-      }
-
-      elms[33].populate(elementConfigs[33])
-
-      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
-      }
-
-      elms[34] = components[34].call(null, { props: props[34] }, elms[33], component)
-
-      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 === 0) {
-        inSlot = false
-      }
-
-      parent = elms[32]
-      elementConfigs[35] = {}
-
-      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
-      }
-
-      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)
-        }
-      }
-
-      elms[36].populate(elementConfigs[36])
-
-      if (inSlot === true) {
-        slotChildCounter -= 1
-      }
-
-      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 === 0) {
-        inSlot = false
-      }
-
-      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[38].populate(elementConfigs[38])
-
-      if (inSlot === true) {
-        slotChildCounter -= 1
-      }
-
-      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
-      }
-
-      elms[39] = components[39].call(null, { props: props[39] }, elms[38], component)
-
-      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 === 0) {
-        inSlot = false
-      }
-
-      cmps[40] = (context.components && context.components['Sprite']) || components['Sprite']
-
-      parent = elms[35]
-      elementConfigs[40] = {}
+      parent = elms[22]
+      elementConfigs[25] = {}
 
-      elms[40] = this.element(
+      elms[25] = 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])
+      elementConfigs[25][Symbol.for('isSprite')] = true
+      elementConfigs[25]['image'] = component.image
+      elementConfigs[25]['x'] = 36
+      elementConfigs[25]['h'] = 20
+      elementConfigs[25]['w'] = 20
+      elementConfigs[25]['map'] = component.sprite
+      elementConfigs[25]['frame'] = component.maxFps[2]
+      elms[25].populate(elementConfigs[25])
 
       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
-      }
-
-      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 (inSlot === true && slotChildCounter === 0) {
-        inSlot = false
-      }
-
       return {
         elms,
         cleanup: () => {
@@ -1525,86 +577,6 @@ export const FPScounter = Blits.Component('FPScounter', {
           propData = null
           slotComponent = null
           parent = null
-
-          cmps[3] = null
-
-          props[4] = null
-          components[4] = null
-
-          cmps[6] = null
-
-          props[7] = null
-          components[7] = null
-
-          cmps[8] = null
-
-          props[9] = null
-          components[9] = null
-
-          cmps[10] = null
-
-          props[11] = null
-          components[11] = null
-
-          cmps[13] = null
-
-          props[14] = null
-          components[14] = null
-
-          cmps[16] = null
-
-          props[17] = null
-          components[17] = null
-
-          cmps[18] = null
-
-          props[19] = null
-          components[19] = null
-
-          cmps[20] = null
-
-          props[21] = null
-          components[21] = null
-
-          cmps[23] = null
-
-          props[24] = null
-          components[24] = null
-
-          cmps[26] = null
-
-          props[27] = null
-          components[27] = null
-
-          cmps[28] = null
-
-          props[29] = null
-          components[29] = null
-
-          cmps[30] = null
-
-          props[31] = null
-          components[31] = null
-
-          cmps[33] = null
-
-          props[34] = null
-          components[34] = null
-
-          cmps[36] = null
-
-          props[37] = null
-          components[37] = null
-
-          cmps[38] = null
-
-          props[39] = null
-          components[39] = null
-
-          cmps[40] = null
-
-          props[41] = null
-          components[41] = null
           component = null
           cmps.length = 0
           elms.length = 0
@@ -1619,136 +591,40 @@ export const FPScounter = Blits.Component('FPScounter', {
     },
     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])
+        elms[5].set('frame', component.fps[0])
       },
       function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-        elms[27][Symbol.for('props')]['frame'] = component.minFps[0]
+        elms[6].set('frame', component.fps[1])
       },
       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])
+        elms[7].set('frame', component.fps[2])
       },
       function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-        elms[29][Symbol.for('props')]['frame'] = component.minFps[1]
+        elms[11].set('frame', component.avgFps[0])
       },
       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])
+        elms[12].set('frame', component.avgFps[1])
       },
       function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-        elms[31][Symbol.for('props')]['frame'] = component.minFps[2]
+        elms[13].set('frame', component.avgFps[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])
+        elms[17].set('frame', component.minFps[0])
       },
       function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-        elms[37][Symbol.for('props')]['frame'] = component.maxFps[0]
+        elms[18].set('frame', component.minFps[1])
       },
       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])
+        elms[19].set('frame', component.minFps[2])
       },
       function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-        elms[39][Symbol.for('props')]['frame'] = component.maxFps[1]
+        elms[23].set('frame', component.maxFps[0])
       },
       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])
+        elms[24].set('frame', component.maxFps[1])
       },
       function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-        elms[41][Symbol.for('props')]['frame'] = component.maxFps[2]
+        elms[25].set('frame', component.maxFps[2])
       },
     ],
     context: {},