@lightningjs/blits 1.40.1 → 1.42.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## v1.42.0
+
+_24 Oct 2025_
+
+
+- Added effects prop support to Sprite component
+- Added support for redirecting in before hooks returning a route object (with updated path)
+- Fixed meta options on routes functionality
+- Enhanced router hook test coverage
+- Fixed scale animation snapping issue when using object notation with transitions
+
+## v1.41.0
+
+_16 Oct 2025_
+
+- Improved overall test coverage to 86%
+- Filtered out inspector-data entirely in production
+- Improved vite plugin that handles computed props to be more robust
+- Fixed issue with global reactive object that are deeply nested
+- Bumped MSDF generator dependency to address security issues in dependencies
 
 ## v1.40.1
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.40.1",
+  "version": "1.42.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -54,7 +54,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/msdf-generator": "^1.1.1",
+    "@lightningjs/msdf-generator": "^1.2.0",
     "@lightningjs/renderer": "^2.18.2"
   },
   "repository": {

package/src/component/base/timeouts_intervals.js

@@ -78,7 +78,7 @@ export default {
       const index = this[symbols.intervals].indexOf(intervalId)
       if (index > -1) {
         this[symbols.intervals].splice(index, 1)
-        clearTimeout(intervalId)
+        clearInterval(intervalId)
       }
     },
     writable: false,

package/src/components/Sprite.js

@@ -49,6 +49,7 @@ export default () =>
         elementConfigs[0]['h'] = parent.node.height * (100 / 100)
         elementConfigs[0]['texture'] = component.texture
         elementConfigs[0]['color'] = component.color
+        elementConfigs[0]['effects'] = component.effects
         elms[0].populate(elementConfigs[0])
 
         if (inSlot === true) {
@@ -80,10 +81,13 @@ export default () =>
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[0].set('color', component.color)
         },
+        function anonymous(component, elms, context, components, rootComponent, effect) {
+          elms[0].set('effects', component.effects)
+        },
       ],
       context: {},
     },
-    props: ['image', 'map', 'frame', 'color'],
+    props: ['image', 'map', 'frame', 'color', 'effects'],
     state() {
       return {
         spriteTexture: null,

package/src/engines/L3/element.js

@@ -222,6 +222,12 @@ const colorMap = {
  */
 let textDefaults = null
 
+/**
+ * Inspector enabled flag (initialized on first use).
+ * @type {boolean|null}
+ */
+let inspectorEnabled = null
+
 /**
  * @typedef {import('../../component.js').BlitsElement} BlitsElement
  *
@@ -351,7 +357,8 @@ const propsTransformer = {
         this.props['scaleY'] = v.y
       }
     } else {
-      this.props['scale'] = v
+      this.props['scaleX'] = v
+      this.props['scaleY'] = v
     }
   },
   set show(v) {
@@ -465,6 +472,11 @@ const propsTransformer = {
     }
   },
   set 'inspector-data'(v) {
+    // Skip processing if inspector is not enabled for performance optimization
+    if (inspectorEnabled === false) {
+      return
+    }
+
     if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
       this.props['data'] = v
     }
@@ -567,10 +579,11 @@ const Element = {
       for (let i = 0; i < propsKeys.length; i++) {
         // todo: fix code duplication
         if (isTransition(value) === true) {
-          return this.animate(propsKeys[i], this.props.props[propsKeys[i]], value.transition)
+          this.animate(propsKeys[i], this.props.props[propsKeys[i]], value.transition)
+        } else {
+          // set the prop to the value on the node
+          this.node[propsKeys[i]] = this.props.props[propsKeys[i]]
         }
-        // set the prop to the value on the node
-        this.node[propsKeys[i]] = this.props.props[propsKeys[i]]
       }
     }
 
@@ -740,6 +753,9 @@ export default (config, component) => {
       fontFamily: Settings.get('defaultFont', 'sans-serif'),
     }
   }
+  if (inspectorEnabled === null) {
+    inspectorEnabled = Settings.get('inspector', false)
+  }
   return Object.assign(Object.create(Element), {
     props: Object.assign(Object.create(propsTransformer), { props: {} }),
     scheduledTransitions: {},

package/src/lib/codegenerator/generator.js

@@ -179,6 +179,9 @@ const generateElementCode = function (
 
     if (key === 'key') return
 
+    // Skip inspector-data in production builds for performance optimization
+    if (key === 'inspector-data' && !isDev) return
+
     const value = templateObject[key]
 
     if (isReactiveKey(key)) {

package/src/lib/reactivity/reactive.js

@@ -46,7 +46,7 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
 
   const handler = {
     get(target, key, receiver) {
-      // return the original object instead of the proxied
+      // indicate that this is a proxy object
       if (key === symbols.isProxy) {
         return true
       }
@@ -62,7 +62,7 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
             track(target, key, global)
           }
           // create a new reactive proxy
-          return reactiveProxy(getRaw(target[key]), target, key)
+          return reactiveProxy(getRaw(target[key]), target, key, global)
         }
         // augment array path methods (that change the length of the array)
         if (arrayPatchMethods.indexOf(key) !== -1) {
@@ -90,7 +90,7 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
           track(target, key, global)
         }
         // create a new reactive proxy
-        return reactiveProxy(getRaw(target[key]), target, key)
+        return reactiveProxy(getRaw(target[key]), target, key, global)
       }
 
       // handling all other types

package/src/lib/reactivityguard/computedprops.js

@@ -15,6 +15,51 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+// Utility function: Character-wise brace matcher that handles strings and comments
+const findMatchingBrace = (text, startPos) => {
+  let braceLevel = 1
+  let position = startPos + 1
+  let inString = false
+  let stringChar = ''
+
+  for (; position < text.length && braceLevel > 0; position++) {
+    const char = text[position]
+
+    // Handle string boundaries (ignore escaped quotes)
+    if (!inString && (char === '"' || char === "'" || char === '`')) {
+      inString = true
+      stringChar = char
+    } else if (inString && char === stringChar && text[position - 1] !== '\\') {
+      inString = false
+    }
+    // Skip comments when not in strings
+    else if (!inString && char === '/' && text[position + 1] === '/') {
+      // Skip line comment
+      position = text.indexOf('\n', position) || text.length - 1
+    } else if (!inString && char === '/' && text[position + 1] === '*') {
+      // Skip block comment
+      position = text.indexOf('*/', position + 2) || text.length - 1
+    }
+    // Count braces only outside strings and comments
+    else if (!inString) {
+      if (char === '{') braceLevel++
+      else if (char === '}') braceLevel--
+    }
+  }
+
+  return braceLevel === 0 ? position : -1
+}
+
+// Find computed object boundaries in component config
+const findComputedObjectEnd = (configObject, computedStart) => {
+  return findMatchingBrace(configObject, computedStart)
+}
+
+// Find individual computed function boundaries
+const findComputedFunctionEnd = (computedObj, openingBracePos) => {
+  return findMatchingBrace(computedObj, openingBracePos)
+}
+
 export default (code) => {
   // Find component declarations
   const componentRegex =
@@ -33,18 +78,10 @@ export default (code) => {
       // Find start position of the computed block
       const computedStart = computedKeywordMatch.index + computedKeywordMatch[0].length - 1 // Position of the opening brace
 
-      // Find the matching closing brace with balance tracking
-      let braceLevel = 1
-      let pos = computedStart + 1
+      // Find the matching closing brace for computed object in config
+      const computedEnd = findComputedObjectEnd(configObject, computedStart)
 
-      while (braceLevel > 0 && pos < configObject.length) {
-        if (configObject[pos] === '{') braceLevel++
-        else if (configObject[pos] === '}') braceLevel--
-        pos++
-      }
-
-      if (braceLevel === 0) {
-        const computedEnd = pos
+      if (computedEnd !== -1) {
         const computedObj = configObject.substring(computedStart, computedEnd)
 
         // Process each computed property
@@ -67,18 +104,10 @@ export default (code) => {
           const openingBracePos = computedObj.indexOf('{', funcNamePos)
           if (openingBracePos === -1) break
 
-          // Find closing brace with proper nesting
-          let braceLevel = 1
-          let closingBracePos = openingBracePos + 1
-
-          while (braceLevel > 0 && closingBracePos < computedObj.length) {
-            if (computedObj[closingBracePos] === '{') braceLevel++
-            else if (computedObj[closingBracePos] === '}') braceLevel--
-            closingBracePos++
-          }
+          // Find closing brace for individual computed function
+          const closingBracePos = findComputedFunctionEnd(computedObj, openingBracePos)
 
-          if (braceLevel !== 0) {
-            // Could not find matching brace
+          if (closingBracePos === -1) {
             break
           }
 

package/src/plugin.js

@@ -15,7 +15,7 @@ const registerPlugin = (plugin, nameOrOptions = '', options = {}) => {
   }
 
   if (typeof plugin === 'function') {
-    if (name === undefined) {
+    if (name === undefined || name === '') {
       throw Error('Error registering plugin: name is required for plugin')
     }
     plugins[name] = { plugin, options }

package/src/router/router.js

@@ -220,6 +220,7 @@ const makeRouteObject = (route, overrides) => {
     hooks: route.hooks || {},
     data: { ...route.data, ...navigationData, ...overrides.queryParams },
     params: overrides.params || {},
+    meta: route.meta || {},
   }
 
   return cleanRoute
@@ -249,21 +250,25 @@ export const navigate = async function () {
     currentRoute = route
 
     if (route) {
+      const currentPath = currentRoute.path
       let beforeEachResult
       if (this.parent[symbols.routerHooks]) {
         const hooks = this.parent[symbols.routerHooks]
         if (hooks.beforeEach) {
           beforeEachResult = await hooks.beforeEach.call(this.parent, route, previousRoute)
           if (isString(beforeEachResult)) {
+            currentRoute = previousRoute
             to(beforeEachResult)
             return
           }
+          // If the resolved result is an object, redirect if the path in the object was changed
+          if (isObject(beforeEachResult) === true && beforeEachResult.path !== currentPath) {
+            currentRoute = previousRoute
+            to(beforeEachResult.path, beforeEachResult.data, beforeEachResult.options)
+            return
+          }
         }
       }
-      // If the resolved result is an object, assign it to the target route object
-      if (isObject(beforeEachResult) === true) {
-        route = beforeEachResult
-      }
 
       let beforeHookOutput
       if (route.hooks.before) {
@@ -273,10 +278,12 @@ export const navigate = async function () {
           to(beforeHookOutput)
           return
         }
-      }
-      // If the resolved result is an object, assign it to the target route object
-      if (isObject(beforeHookOutput) === true) {
-        route = beforeHookOutput
+        // If the resolved result is an object, redirect if the path in the object was changed
+        if (isObject(beforeHookOutput) === true && beforeHookOutput.path !== currentPath) {
+          currentRoute = previousRoute
+          to(beforeHookOutput.path, beforeHookOutput.data, beforeHookOutput.options)
+          return
+        }
       }
       // add the previous route (technically still the current route at this point)
       // into the history stack when inHistory is true and we're not navigating back