Merge pull request #169 from lightning-js/dev

Release 1.4.3

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v1.4.3
+
+_26 sept 2024_
+
+- Fixed issues with sprites in minified production build
+- Bumped renderer to v2.2.0  (with fixes for nested alpha / show issue)
+- Fixed reactivity in plugins not using reactivity mode setting
+- Fixed named slots functionality
+
 ## v1.4.2
 
 _24 sept 2024_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.0.2",
-    "@lightningjs/renderer": "^2.1.2",
+    "@lightningjs/renderer": "^2.2.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",
     "ora": "^7.0.1",

src/engines/L3/element.js

@@ -268,7 +268,7 @@ const Element = {
 
     this.props.element = this
 
-    this.props['parent'] = this.config.parent
+    this.props['parent'] = props['parent'] || this.config.parent
     delete props.parent
 
     this.props.raw = data
@@ -305,7 +305,7 @@ const Element = {
       })
     }
 
-    // if (this.component && this.component.___layout) {
+    // if (this.component !== undefined && '___layout' in this.component) {
     //   this.node.on('loaded', () => {
     //     this.component.___layout()
     //   })

src/lib/codegenerator/generator.js

@@ -91,7 +91,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() || component[Symbol.for('slots')][0] || parent
+        elementConfig${counter}['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
       `)
     }
 
@@ -258,6 +258,7 @@ const generateComponentCode = function (
   }
   // if (!options.forloop) {
   //   renderCode.push(`
+  //     // console.log('here', component, rootComponent)
   //   component = rootComponent
   // `)
   // }

src/lib/reactivity/reactive.js

@@ -15,6 +15,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { ImageTexture } from '@lightningjs/renderer'
 import { track, trigger, pauseTracking, resumeTracking } from './effect.js'
 import symbols from '../symbols.js'
 
@@ -32,7 +33,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
   // is assigned to a state variable
   if (typeof original === 'object') {
     if (original[symbols.id] !== undefined) return original
-    if (original.constructor.name === '_ImageTexture') return original
+    if (original.constructor.name === ImageTexture.name) return original
   }
 
   // if original object is already a proxy, don't create a new one but return the existing one instead

src/plugins/appstate.js

@@ -16,10 +16,11 @@
  */
 
 import { reactive } from '../lib/reactivity/reactive'
+import Settings from '../settings.js'
 
 export default {
   name: 'appState',
   plugin(state = {}) {
-    return reactive(state)
+    return reactive(state, Settings.get('reactivityMode'))
   },
 }

src/plugins/language.js

@@ -19,16 +19,21 @@ import fetchJson from '../helpers/fetchJson'
 import { Log } from '../lib/log'
 import { reactive } from '../lib/reactivity/reactive'
 
+import Settings from '../settings.js'
+
 export default {
   name: 'language',
   plugin(options = {}) {
     let translations = {}
     let dictionary = {}
 
-    const state = reactive({
-      language: '',
-      loaded: 0,
-    })
+    const state = reactive(
+      {
+        language: '',
+        loaded: 0,
+      },
+      Settings.get('reactivityMode')
+    )
 
     const setLanguage = (language) => {
       // define the dictionary

src/plugins/theme.js

@@ -18,6 +18,8 @@
 import { Log } from '../lib/log'
 import { reactive } from '../lib/reactivity/reactive.js'
 
+import Settings from '../settings.js'
+
 const getValueByDotNotation = (obj, base, path) => {
   const keys = path.split('.')
 
@@ -46,9 +48,12 @@ export default {
   plugin(config = {}) {
     let themeMap = {}
 
-    const state = reactive({
-      current: 'default',
-    })
+    const state = reactive(
+      {
+        current: 'default',
+      },
+      Settings.get('reactivityMode')
+    )
 
     let themes = {}
     let base = null