@lightningjs/blits 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## v1.16.0
+
+_16 jan 2025_
+
+- Fixed issue with component scope in Slots
+- Fixed issue with sprites (regression since v1.14.0)
+- Changed reactive state to only make plain objects reactive, and return custom Classes, Blits components, Renderer texture etc in raw form
+
 ## v1.15.0
 
 _14 jan 2025_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

package/src/components/Circle.js

@@ -26,15 +26,26 @@ export default () =>
         let componentType
         const rootComponent = component
         let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
         const elementConfig0 = {}
 
-        elms[0] = this.element({ parent: parent || 'root' }, component)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig0['color'] = component.color
         elementConfig0['w'] = component.size
         elementConfig0['h'] = component.size
         elementConfig0['effects'] = [component.shader('radius', { radius: component.radius })]
         elms[0].populate(elementConfig0)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         return elms
       },
       effects: [

package/src/components/FPScounter.js

@@ -28,32 +28,61 @@ export default () =>
         let componentType
         const rootComponent = component
         let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
         const elementConfig0 = {}
 
-        elms[0] = this.element({ parent: parent || 'root' }, component)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elms[0].populate(elementConfig0)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[0]
         const elementConfig1 = {}
 
-        elms[1] = this.element({ parent: parent || 'root' }, component)
+        elms[1] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig1['y'] = 15
         elementConfig1['x'] = 20
         elms[1].populate(elementConfig1)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[1]
         const elementConfig2 = {}
 
-        elms[2] = this.element({ parent: parent || 'root' }, component)
+        elms[2] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elms[2].populate(elementConfig2)
 
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         const cmp3 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[2]
         const elementConfig3 = {}
 
-        elms[3] = this.element({ parent: parent || 'root' }, component)
+        elms[3] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig3['image'] = component.image
         elementConfig3['w'] = 43
@@ -70,6 +99,11 @@ export default () =>
         }
 
         elms[3].populate(elementConfig3)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[3]
         const props4 = {}
         props4['image'] = component.image
@@ -98,26 +132,41 @@ export default () =>
 
         if (elms[4][Symbol.for('slots')][0]) {
           parent = elms[4][Symbol.for('slots')][0]
-          component = elms[4]
+          slotComponent = elms[4]
+          inSlot = true
         } else {
           parent = elms[4][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         parent = elms[2]
         const elementConfig5 = {}
 
-        elms[5] = this.element({ parent: parent || 'root' }, component)
+        elms[5] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig5['x'] = 58
         elementConfig5['y'] = 2
         elms[5].populate(elementConfig5)
 
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         const cmp6 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[5]
         const elementConfig6 = {}
 
-        elms[6] = this.element({ parent: parent || 'root' }, component)
+        elms[6] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig6['image'] = component.image
         elementConfig6['x'] = 0
@@ -135,6 +184,11 @@ export default () =>
         }
 
         elms[6].populate(elementConfig6)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[6]
         const props7 = {}
         props7['image'] = component.image
@@ -169,17 +223,25 @@ export default () =>
 
         if (elms[7][Symbol.for('slots')][0]) {
           parent = elms[7][Symbol.for('slots')][0]
-          component = elms[7]
+          slotComponent = elms[7]
+          inSlot = true
         } else {
           parent = elms[7][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         const cmp8 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[5]
         const elementConfig8 = {}
 
-        elms[8] = this.element({ parent: parent || 'root' }, component)
+        elms[8] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig8['image'] = component.image
         elementConfig8['x'] = 18
@@ -197,6 +259,11 @@ export default () =>
         }
 
         elms[8].populate(elementConfig8)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[8]
         const props9 = {}
         props9['image'] = component.image
@@ -231,17 +298,25 @@ export default () =>
 
         if (elms[9][Symbol.for('slots')][0]) {
           parent = elms[9][Symbol.for('slots')][0]
-          component = elms[9]
+          slotComponent = elms[9]
+          inSlot = true
         } else {
           parent = elms[9][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         const cmp10 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[5]
         const elementConfig10 = {}
 
-        elms[10] = this.element({ parent: parent || 'root' }, component)
+        elms[10] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig10['image'] = component.image
         elementConfig10['x'] = 36
@@ -259,6 +334,11 @@ export default () =>
         }
 
         elms[10].populate(elementConfig10)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[10]
         const props11 = {}
         props11['image'] = component.image
@@ -293,25 +373,40 @@ export default () =>
 
         if (elms[11][Symbol.for('slots')][0]) {
           parent = elms[11][Symbol.for('slots')][0]
-          component = elms[11]
+          slotComponent = elms[11]
+          inSlot = true
         } else {
           parent = elms[11][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         parent = elms[1]
         const elementConfig12 = {}
 
-        elms[12] = this.element({ parent: parent || 'root' }, component)
+        elms[12] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig12['x'] = 150
         elms[12].populate(elementConfig12)
 
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         const cmp13 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[12]
         const elementConfig13 = {}
 
-        elms[13] = this.element({ parent: parent || 'root' }, component)
+        elms[13] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig13['image'] = component.image
         elementConfig13['y'] = 2
@@ -329,6 +424,11 @@ export default () =>
         }
 
         elms[13].populate(elementConfig13)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[13]
         const props14 = {}
         props14['image'] = component.image
@@ -358,26 +458,41 @@ export default () =>
 
         if (elms[14][Symbol.for('slots')][0]) {
           parent = elms[14][Symbol.for('slots')][0]
-          component = elms[14]
+          slotComponent = elms[14]
+          inSlot = true
         } else {
           parent = elms[14][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         parent = elms[12]
         const elementConfig15 = {}
 
-        elms[15] = this.element({ parent: parent || 'root' }, component)
+        elms[15] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig15['x'] = 63
         elementConfig15['y'] = 2
         elms[15].populate(elementConfig15)
 
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         const cmp16 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[15]
         const elementConfig16 = {}
 
-        elms[16] = this.element({ parent: parent || 'root' }, component)
+        elms[16] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig16['image'] = component.image
         elementConfig16['x'] = 0
@@ -395,6 +510,11 @@ export default () =>
         }
 
         elms[16].populate(elementConfig16)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[16]
         const props17 = {}
         props17['image'] = component.image
@@ -429,17 +549,25 @@ export default () =>
 
         if (elms[17][Symbol.for('slots')][0]) {
           parent = elms[17][Symbol.for('slots')][0]
-          component = elms[17]
+          slotComponent = elms[17]
+          inSlot = true
         } else {
           parent = elms[17][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         const cmp18 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[15]
         const elementConfig18 = {}
 
-        elms[18] = this.element({ parent: parent || 'root' }, component)
+        elms[18] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig18['image'] = component.image
         elementConfig18['x'] = 18
@@ -457,6 +585,11 @@ export default () =>
         }
 
         elms[18].populate(elementConfig18)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[18]
         const props19 = {}
         props19['image'] = component.image
@@ -491,17 +624,25 @@ export default () =>
 
         if (elms[19][Symbol.for('slots')][0]) {
           parent = elms[19][Symbol.for('slots')][0]
-          component = elms[19]
+          slotComponent = elms[19]
+          inSlot = true
         } else {
           parent = elms[19][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         const cmp20 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[15]
         const elementConfig20 = {}
 
-        elms[20] = this.element({ parent: parent || 'root' }, component)
+        elms[20] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig20['image'] = component.image
         elementConfig20['x'] = 36
@@ -519,6 +660,11 @@ export default () =>
         }
 
         elms[20].populate(elementConfig20)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[20]
         const props21 = {}
         props21['image'] = component.image
@@ -553,26 +699,41 @@ export default () =>
 
         if (elms[21][Symbol.for('slots')][0]) {
           parent = elms[21][Symbol.for('slots')][0]
-          component = elms[21]
+          slotComponent = elms[21]
+          inSlot = true
         } else {
           parent = elms[21][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         parent = elms[1]
         const elementConfig22 = {}
 
-        elms[22] = this.element({ parent: parent || 'root' }, component)
+        elms[22] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig22['x'] = 0
         elementConfig22['y'] = 40
         elms[22].populate(elementConfig22)
 
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         const cmp23 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[22]
         const elementConfig23 = {}
 
-        elms[23] = this.element({ parent: parent || 'root' }, component)
+        elms[23] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig23['image'] = component.image
         elementConfig23['x'] = -2
@@ -590,6 +751,11 @@ export default () =>
         }
 
         elms[23].populate(elementConfig23)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[23]
         const props24 = {}
         props24['image'] = component.image
@@ -619,26 +785,41 @@ export default () =>
 
         if (elms[24][Symbol.for('slots')][0]) {
           parent = elms[24][Symbol.for('slots')][0]
-          component = elms[24]
+          slotComponent = elms[24]
+          inSlot = true
         } else {
           parent = elms[24][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         parent = elms[22]
         const elementConfig25 = {}
 
-        elms[25] = this.element({ parent: parent || 'root' }, component)
+        elms[25] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig25['x'] = 58
         elementConfig25['y'] = 2
         elms[25].populate(elementConfig25)
 
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         const cmp26 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[25]
         const elementConfig26 = {}
 
-        elms[26] = this.element({ parent: parent || 'root' }, component)
+        elms[26] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig26['image'] = component.image
         elementConfig26['x'] = 0
@@ -656,6 +837,11 @@ export default () =>
         }
 
         elms[26].populate(elementConfig26)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[26]
         const props27 = {}
         props27['image'] = component.image
@@ -690,17 +876,25 @@ export default () =>
 
         if (elms[27][Symbol.for('slots')][0]) {
           parent = elms[27][Symbol.for('slots')][0]
-          component = elms[27]
+          slotComponent = elms[27]
+          inSlot = true
         } else {
           parent = elms[27][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         const cmp28 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[25]
         const elementConfig28 = {}
 
-        elms[28] = this.element({ parent: parent || 'root' }, component)
+        elms[28] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig28['image'] = component.image
         elementConfig28['x'] = 18
@@ -718,6 +912,11 @@ export default () =>
         }
 
         elms[28].populate(elementConfig28)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[28]
         const props29 = {}
         props29['image'] = component.image
@@ -752,17 +951,25 @@ export default () =>
 
         if (elms[29][Symbol.for('slots')][0]) {
           parent = elms[29][Symbol.for('slots')][0]
-          component = elms[29]
+          slotComponent = elms[29]
+          inSlot = true
         } else {
           parent = elms[29][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         const cmp30 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[25]
         const elementConfig30 = {}
 
-        elms[30] = this.element({ parent: parent || 'root' }, component)
+        elms[30] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig30['image'] = component.image
         elementConfig30['x'] = 36
@@ -780,6 +987,11 @@ export default () =>
         }
 
         elms[30].populate(elementConfig30)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[30]
         const props31 = {}
         props31['image'] = component.image
@@ -814,26 +1026,41 @@ export default () =>
 
         if (elms[31][Symbol.for('slots')][0]) {
           parent = elms[31][Symbol.for('slots')][0]
-          component = elms[31]
+          slotComponent = elms[31]
+          inSlot = true
         } else {
           parent = elms[31][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         parent = elms[1]
         const elementConfig32 = {}
 
-        elms[32] = this.element({ parent: parent || 'root' }, component)
+        elms[32] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig32['x'] = 150
         elementConfig32['y'] = 40
         elms[32].populate(elementConfig32)
 
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         const cmp33 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[32]
         const elementConfig33 = {}
 
-        elms[33] = this.element({ parent: parent || 'root' }, component)
+        elms[33] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig33['image'] = component.image
         elementConfig33['w'] = 53
@@ -850,6 +1077,11 @@ export default () =>
         }
 
         elms[33].populate(elementConfig33)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[33]
         const props34 = {}
         props34['image'] = component.image
@@ -878,26 +1110,41 @@ export default () =>
 
         if (elms[34][Symbol.for('slots')][0]) {
           parent = elms[34][Symbol.for('slots')][0]
-          component = elms[34]
+          slotComponent = elms[34]
+          inSlot = true
         } else {
           parent = elms[34][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         parent = elms[32]
         const elementConfig35 = {}
 
-        elms[35] = this.element({ parent: parent || 'root' }, component)
+        elms[35] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig35['x'] = 63
         elementConfig35['y'] = 2
         elms[35].populate(elementConfig35)
 
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         const cmp36 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[35]
         const elementConfig36 = {}
 
-        elms[36] = this.element({ parent: parent || 'root' }, component)
+        elms[36] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig36['image'] = component.image
         elementConfig36['x'] = 0
@@ -915,6 +1162,11 @@ export default () =>
         }
 
         elms[36].populate(elementConfig36)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[36]
         const props37 = {}
         props37['image'] = component.image
@@ -949,17 +1201,25 @@ export default () =>
 
         if (elms[37][Symbol.for('slots')][0]) {
           parent = elms[37][Symbol.for('slots')][0]
-          component = elms[37]
+          slotComponent = elms[37]
+          inSlot = true
         } else {
           parent = elms[37][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         const cmp38 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[35]
         const elementConfig38 = {}
 
-        elms[38] = this.element({ parent: parent || 'root' }, component)
+        elms[38] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig38['image'] = component.image
         elementConfig38['x'] = 18
@@ -977,6 +1237,11 @@ export default () =>
         }
 
         elms[38].populate(elementConfig38)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[38]
         const props39 = {}
         props39['image'] = component.image
@@ -1011,17 +1276,25 @@ export default () =>
 
         if (elms[39][Symbol.for('slots')][0]) {
           parent = elms[39][Symbol.for('slots')][0]
-          component = elms[39]
+          slotComponent = elms[39]
+          inSlot = true
         } else {
           parent = elms[39][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         const cmp40 = (context.components && context.components['Sprite']) || components['Sprite']
 
         parent = elms[35]
         const elementConfig40 = {}
 
-        elms[40] = this.element({ parent: parent || 'root' }, component)
+        elms[40] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig40['image'] = component.image
         elementConfig40['x'] = 36
@@ -1039,6 +1312,11 @@ export default () =>
         }
 
         elms[40].populate(elementConfig40)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         parent = elms[40]
         const props41 = {}
         props41['image'] = component.image
@@ -1073,11 +1351,16 @@ export default () =>
 
         if (elms[41][Symbol.for('slots')][0]) {
           parent = elms[41][Symbol.for('slots')][0]
-          component = elms[41]
+          slotComponent = elms[41]
+          inSlot = true
         } else {
           parent = elms[41][Symbol.for('children')][0]
         }
 
+        if (inSlot === true && slotChildCounter === 0) {
+          inSlot = false
+        }
+
         return elms
       },
       effects: [

package/src/components/RouterView.js

@@ -29,13 +29,24 @@ export default () =>
         let componentType
         const rootComponent = component
         let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
         const elementConfig0 = {}
 
-        elms[0] = this.element({ parent: parent || 'root' }, component)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig0['w'] = parent.node.width * (100 / 100)
         elementConfig0['height'] = parent.node.height * (100 / 100)
         elms[0].populate(elementConfig0)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         return elms
       },
       effects: [],

package/src/components/Sprite.js

@@ -28,15 +28,26 @@ export default () =>
         let componentType
         const rootComponent = component
         let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
         const elementConfig0 = {}
 
-        elms[0] = this.element({ parent: parent || 'root' }, component)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig0['w'] = parent.node.width * (100 / 100)
         elementConfig0['h'] = parent.node.height * (100 / 100)
         elementConfig0['texture'] = component.texture
         elementConfig0['color'] = component.color
         elms[0].populate(elementConfig0)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         return elms
       },
       effects: [
@@ -52,7 +63,7 @@ export default () =>
     props: ['image', 'map', 'frame', 'color'],
     state() {
       return {
-        spriteTexture: false,
+        spriteTexture: null,
       }
     },
     computed: {
@@ -62,7 +73,7 @@ export default () =>
             ? Object.assign({}, this.map.defaults || {}, this.map.frames[this.frame])
             : this.map[this.frame]
 
-        if (this.spriteTexture && options) {
+        if (this.spriteTexture !== null && options) {
           return this[symbols.renderer]().createTexture('SubTexture', {
             texture: this.spriteTexture,
             x: options.x,
@@ -74,7 +85,7 @@ export default () =>
       },
     },
     hooks: {
-      ready() {
+      init() {
         this.spriteTexture = this[symbols.renderer]().createTexture('ImageTexture', {
           src: this.image,
         })

package/src/components/Sprite.orig.js

@@ -27,7 +27,7 @@ export default () =>
     props: ['image', 'map', 'frame', 'color'],
     state() {
       return {
-        spriteTexture: false,
+        spriteTexture: null,
       }
     },
     computed: {
@@ -37,7 +37,7 @@ export default () =>
             ? Object.assign({}, this.map.defaults || {}, this.map.frames[this.frame])
             : this.map[this.frame]
 
-        if (this.spriteTexture && options) {
+        if (this.spriteTexture !== null && options) {
           return this[symbols.renderer]().createTexture('SubTexture', {
             texture: this.spriteTexture,
             x: options.x,
@@ -49,7 +49,7 @@ export default () =>
       },
     },
     hooks: {
-      ready() {
+      init() {
         this.spriteTexture = this[symbols.renderer]().createTexture('ImageTexture', {
           src: this.image,
         })

package/src/lib/codegenerator/generator.js

@@ -24,6 +24,9 @@ export default function (templateObject = { children: [] }) {
       'let componentType',
       'const rootComponent = component',
       'let propData',
+      'let slotComponent',
+      'let inSlot = false',
+      'let slotChildCounter = 0',
     ],
     effectsCode: [],
     context: { props: [], components: this.components },
@@ -79,7 +82,7 @@ const generateElementCode = function (
   }
 
   renderCode.push(`
-    ${elm} = this.element({parent: parent || 'root'}, component)
+    ${elm} = this.element({parent: parent || 'root'}, inSlot === true ? slotComponent : component)
   `)
 
   if (options.forloop) {
@@ -96,7 +99,7 @@ const generateElementCode = function (
   Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
-        elementConfig${counter}['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
+        elementConfig${counter}['parent'] = component[Symbol.for('slots')] !== undefined && Array.isArray(component[Symbol.for('slots')]) === true && component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
       `)
     }
 
@@ -149,6 +152,12 @@ const generateElementCode = function (
 
   renderCode.push(`${elm}.populate(elementConfig${counter})`)
 
+  renderCode.push(`
+    if(inSlot === true) {
+      slotChildCounter -= 1
+    }
+  `)
+
   if (options.forloop) {
     renderCode.push('}')
   }
@@ -247,7 +256,8 @@ const generateComponentCode = function (
 
     if (${elm}[Symbol.for('slots')][0]) {
       parent = ${elm}[Symbol.for('slots')][0]
-      component = ${elm}
+      slotComponent = ${elm}
+      inSlot = true
     } else {
       parent = ${elm}[Symbol.for('children')][0]
     }
@@ -258,15 +268,24 @@ const generateComponentCode = function (
   }
 
   if (children) {
+    if (!options.forloop) {
+      renderCode.push(`
+        if(inSlot === true) {
+          slotChildCounter = ${children.length}  + 1
+        }
+      `)
+    }
     counter++
     generateElementCode.call(this, { children }, false, { ...options })
   }
-  // if (!options.forloop) {
-  //   renderCode.push(`
-  //     // console.log('here', component, rootComponent)
-  //   component = rootComponent
-  // `)
-  // }
+
+  if (!options.forloop) {
+    renderCode.push(`
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
+    `)
+  }
 }
 
 const generateForLoopCode = function (templateObject, parent) {

package/src/lib/reactivity/reactive.js

@@ -15,7 +15,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ImageTexture, Texture } from '@lightningjs/renderer'
 import { track, trigger, pauseTracking, resumeTracking } from './effect.js'
 import symbols from '../symbols.js'
 import deepEqualArray from '../../helpers/deepEqualArray.js'
@@ -30,14 +29,15 @@ export const getRaw = (value) => {
 }
 
 const reactiveProxy = (original, _parent = null, _key, global) => {
-  // don't create a proxy when a Blits component or an Image Texture
-  // is assigned to a state variable
-  if (typeof original === 'object') {
-    if (original[symbols.id] !== undefined) return original
-    if (original.constructor.name === ImageTexture.name) return original
-    if (original.txManager !== undefined) return original
+  // only create a proxy for plain objects. Other classes, Blits components, renderer textures etc
+  // are returned unmodified and will not become reactive
+  if (
+    typeof original === 'object' &&
+    Array.isArray(original) === false &&
+    Object.getPrototypeOf(original) !== Object.prototype
+  ) {
+    return original
   }
-
   // if original object is already a proxy, don't create a new one but return the existing one instead
   const existingProxy = proxyMap.get(original)
   if (existingProxy !== undefined) {

package/vite/blitsFileConverter.js

@@ -16,23 +16,52 @@
  */
 
 import blitsfileconverter from '../src/lib/blitsfileconverter/blitsfileconverter.js'
+import path from 'node:path'
+import fs from 'node:fs'
+import { createRequire } from 'module'
 
 export default function blitsFileType() {
   return {
     name: 'vite-plugin-blits-file-type',
     enforce: 'pre',
-    transform(src, id) {
+
+    resolveId(source, importer) {
+      if (source.endsWith('.blits')) {
+        return importer ? path.resolve(path.dirname(importer), source) : path.resolve(source)
+      }
+      return null
+    },
+
+    load(id) {
       if (id.endsWith('.blits')) {
-        try {
-          const transformedCode = blitsfileconverter(src)
-          return {
-            code: transformedCode,
-            map: null, // no source map
+        const source = fs.readFileSync(id, 'utf-8')
+        let code = blitsfileconverter(source)
+
+        // Check for TypeScript and transpile to JS if needed
+        if (/<script\s+lang=["']ts["']/.test(source)) {
+          // Resolve the local typescript dependency
+          const userRequire = createRequire(process.cwd() + '/')
+          let ts
+          try {
+            ts = userRequire('typescript')
+          } catch (err) {
+            throw new Error(
+              `\n\nThe file "${id}" contains \`lang="ts"\`, indicating it uses TypeScript. \nTo enable TypeScript support, please install the 'typescript' package as a dev dependency by running:\n\n` +
+                '  npm install --save-dev typescript\n\n'
+            )
           }
-        } catch (error) {
-          this.error(error)
+          const transpiled = ts.transpileModule(code, {
+            compilerOptions: { target: ts.ScriptTarget.ESNext, module: ts.ModuleKind.ESNext },
+          })
+          code = transpiled.outputText
+        }
+
+        return {
+          code,
+          map: null,
         }
       }
+      return null
     },
   }
 }

package/vite/preCompiler.js

@@ -30,12 +30,13 @@ export default function () {
 
       const fileExtension = path.extname(filePath)
 
-      // we should only precompile .js and .ts files
-      if (fileExtension === '.js' || fileExtension === '.ts') {
+      // we should only precompile .blits, .js and .ts files
+      if (fileExtension === '.js' || fileExtension === '.ts' || fileExtension === '.blits') {
         return compiler(source, filePath)
       }
-      const relativePath = path.relative(process.cwd(), filePath)
-      return compiler(source, relativePath)
+
+      // vite expects null if there is no modification
+      return null
     },
   }
 }