@lightningjs/blits 1.46.0 → 1.48.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+
+## v1.48.0
+
+_10 feb 2026_
+
+- Improved cleanup of for-loop effects
+- Fixed router issue with params not being reset
+- Added next tick debouncing for transitions on multiple props
+- Bumped renderer to 2.21.0
+- Added support for using function-notation in `@loaded`, `@error` and `@updated` callbacks
+- Added displaying of correct component type in inspector data when using `is`-attribute
+- Replaced `$`-prefix for automatic inspector data with `blits-` prefix (fixes fatal error in Safari)
+
+
+## v1.47.0
+
+_26 jan 2026_
+
+- Fixed issue with reactivity guard vite plugin failing for commented-out code
+- Fixed issue with autosizing of holder node by adding extra `eol` check
+- Added support for _variants_ to the Theme plugin
+
 ## v1.46.0
 
 _22 jan 2026_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.46.0",
+  "version": "1.48.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.2.0",
-    "@lightningjs/renderer": "^2.20.4",
+    "@lightningjs/renderer": "^2.21.0",
     "magic-string": "^0.30.21"
   },
   "repository": {

package/scripts/prepush.js

@@ -69,7 +69,6 @@ try {
   // Run ESLint on the changed files
   execSync(`npx eslint ${fileList.join(' ')}`, { stdio: 'inherit' })
   console.log('Linting passed successfully!\n')
-  process.exit(0)
 } catch (error) {
   console.log('\n==========================================================================')
   console.log('ESLint found issues in your code. Please fix them before pushing.')
@@ -79,3 +78,24 @@ try {
   console.log('==========================================================================\n')
   process.exit(1)
 }
+
+// By default, always run tests unless RUN_TEST=skip
+const runTestsFlag = process.env.RUN_TEST || ''
+
+if (runTestsFlag.toLowerCase() === 'skip') {
+  console.log('Skipping tests due to RUN_TEST=skip. Proceeding with push.')
+  process.exit(0)
+} else {
+  // For any other value (including empty or unknown), run tests
+  try {
+    console.log('Running tests...\n')
+    execSync('npm run test', { stdio: 'inherit' })
+    console.log('Tests passed successfully!\n')
+    process.exit(0)
+  } catch (error) {
+    console.log('\n==========================================================================')
+    console.log('Some tests failed. Please fix them before pushing.')
+    console.log('==========================================================================\n')
+    process.exit(1)
+  }
+}

package/src/component/base/methods.js

@@ -112,6 +112,8 @@ export default {
       // pass focus to the parent so we don't get lost in focus limbo
       if (this.hasFocus === true) this.parent.$focus()
 
+      // @todo - is this really necessary?
+      // This cause an issue with auto sizing of parent (and required an extra eol check there)
       for (let key in this[symbols.state]) {
         if (Array.isArray(this[symbols.state][key])) {
           this[symbols.state][key] = []

package/src/component.js

@@ -450,6 +450,9 @@ const Component = (name = required('name'), config = required('config')) => {
   // during the code generation step
   factory[Symbol.for('config')] = config
 
+  // Display name for inspector
+  factory[Symbol.for('componentType')] = name
+
   // To determine whether dynamic component is actual Blits component or not
   factory[symbols.isComponent] = true
 

package/src/engines/L3/element.js

@@ -243,7 +243,11 @@ const propsTransformer = {
   },
   set w(v) {
     this.props['width'] = parsePercentage.call(this, v, 'width')
-    if (this.___wrapper === true && this.element.component[symbols.holder] !== undefined) {
+    if (
+      this.___wrapper === true &&
+      this.element.component.eol !== true &&
+      this.element.component[symbols.holder] !== undefined
+    ) {
       this.element.component[symbols.holder].set('w', this.props['width'])
     }
   },
@@ -252,7 +256,11 @@ const propsTransformer = {
   },
   set h(v) {
     this.props['height'] = parsePercentage.call(this, v, 'height')
-    if (this.___wrapper === true && this.element.component[symbols.holder] !== undefined) {
+    if (
+      this.___wrapper === true &&
+      this.element.component.eol !== true &&
+      this.element.component[symbols.holder] !== undefined
+    ) {
       this.element.component[symbols.holder].set('h', this.props['height'])
     }
   },
@@ -594,7 +602,7 @@ const Element = {
       this.props.props['data'] = {}
     }
 
-    // Merge framework data (with $ prefix to prevent collisions)
+    // Merge framework data (blits-* keys data attributes)
     Object.assign(this.props['data'], data)
     Object.assign(this.props.props['data'], data)
 
@@ -648,13 +656,31 @@ const Element = {
     }
   },
   animate(prop, value, transition) {
+    // Clear any existing debounce timeout for this property
+    if (this.debounceTimeouts[prop] !== undefined) {
+      clearTimeout(this.debounceTimeouts[prop])
+      Log.debug(`Cleared debounce timeout for property "${prop}"`)
+    }
+
+    // Debounce the animation execution
+    this.debounceTimeouts[prop] = setTimeout(() => {
+      delete this.debounceTimeouts[prop]
+      this._executeAnimation(prop, value, transition)
+    }, 0)
+  },
+  _executeAnimation(prop, value, transition) {
     // check if a transition is already scheduled to run on the same prop
     // and cancels it if it does
+    const stateOfAnimation =
+      this.scheduledTransitions[prop] !== undefined
+        ? this.scheduledTransitions[prop].f.state
+        : undefined
+
     if (
-      this.scheduledTransitions[prop] !== undefined &&
-      this.scheduledTransitions[prop].f.state === 'scheduled'
+      stateOfAnimation !== undefined &&
+      (stateOfAnimation === 'scheduled' || stateOfAnimation === 'running')
     ) {
-      this.scheduledTransitions[prop].f.stop()
+      this.scheduledTransitions[prop].f.stop(stateOfAnimation === 'running' ? false : true)
     }
 
     // if current value is the same as the value to animate to, instantly resolve
@@ -692,7 +718,7 @@ const Element = {
 
     // Update inspector metadata when transition starts
     if (inspectorEnabled === true) {
-      this.setInspectorMetadata({ $isTransitioning: true })
+      this.setInspectorMetadata({ 'blits-isTransitioning': true })
     }
 
     if (transition.start !== undefined && typeof transition.start === 'function') {
@@ -732,7 +758,7 @@ const Element = {
       // Update inspector metadata when transition ends
       if (inspectorEnabled === true) {
         this.setInspectorMetadata({
-          $isTransitioning: Object.keys(this.scheduledTransitions).length > 0,
+          'blits-isTransitioning': Object.keys(this.scheduledTransitions).length > 0,
         })
       }
     })
@@ -744,6 +770,14 @@ const Element = {
     if (this.node === null) return
 
     Log.debug('Deleting Node', this.nodeId)
+
+    // Clear all pending debounce timeouts
+    const debounceProps = Object.keys(this.debounceTimeouts)
+    for (let i = 0; i < debounceProps.length; i++) {
+      clearTimeout(this.debounceTimeouts[debounceProps[i]])
+    }
+    this.debounceTimeouts = null
+
     // Clearing transition end callback functions
     const transitionProps = Object.keys(this.scheduledTransitions)
     for (let i = 0; i < transitionProps.length; i++) {
@@ -826,6 +860,7 @@ export default (config, component) => {
   return Object.assign(Object.create(Element), {
     props: Object.assign(Object.create(propsTransformer), { props: {} }),
     scheduledTransitions: {},
+    debounceTimeouts: {},
     config,
     component,
   })

package/src/lib/codegenerator/generator.js

@@ -360,17 +360,17 @@ const generateComponentCode = function (
     }
   `)
 
-  // For forloops, this code runs per instance, setting metadata for each component instance
   if (isDev === true) {
-    const componentType = templateObject[Symbol.for('componentType')]
+    const templateTagName = templateObject[Symbol.for('componentType')]
     const holderElm = options.key
       ? `elms[${holderCounter}][${options.key}]`
       : `elms[${holderCounter}]`
+    const componentDisplayName = `typeof componentType === 'string'
+      ? componentType
+      : (componentType?.[Symbol.for('componentType')] || '${templateTagName}')`
     renderCode.push(`
       if (${holderElm} !== undefined && typeof ${holderElm}.setInspectorMetadata === 'function') {
-        ${holderElm}.setInspectorMetadata({
-          $componentType: '${componentType}'
-        })
+        ${holderElm}.setInspectorMetadata({ 'blits-componentType': ${componentDisplayName} })
       }
     `)
   }
@@ -503,10 +503,16 @@ const generateForLoopCode = function (templateObject, parent) {
 
       component !== null && component[Symbol.for('removeGlobalEffects')](effects[${forStartCounter}])
 
-      for(let i = 0; i < effects[${forStartCounter}].length; i++) {
-        const value = effects[${forStartCounter}][i]
-        const index = component[Symbol.for('effects')].indexOf(value)
-        if (index > -1) component[Symbol.for('effects')].splice(index, 1)
+     const effectsToRemove = new Set(effects[${forStartCounter}].slice(0))
+      if (effectsToRemove.size > 0) {
+        const componentEffects = component?.[Symbol.for('effects')] || []
+        let writeIndex = 0
+        for (let readIndex = 0; readIndex < componentEffects.length; readIndex++) {
+          if (!effectsToRemove.has(componentEffects[readIndex])) {
+            componentEffects[writeIndex++] = componentEffects[readIndex]
+          }
+        }
+        componentEffects.length = writeIndex
       }
 
       effects[${forStartCounter}].length = 0
@@ -804,8 +810,13 @@ const cast = (val = '', key = false, component = 'component.') => {
   }
   // @-listener
   else if (key.startsWith('@') && val) {
-    const c = component.slice(0, -1)
-    castedValue = `${c}['${val.replace('$', '')}'] && ${c}['${val.replace('$', '')}'].bind(${c})`
+    const trimmed = val.trim()
+    if (/^\$?\w+$/.test(trimmed)) {
+      const c = component.slice(0, -1)
+      castedValue = `${c}['${trimmed.replace('$', '')}'] && ${c}['${trimmed.replace('$', '')}'].bind(${c})`
+    } else {
+      castedValue = interpolate(trimmed, component)
+    }
   }
   // dynamic value
   else if (val.startsWith('$')) {

package/src/lib/lifecycle.js

@@ -97,7 +97,7 @@ export default {
           this.component[symbols.holder] &&
           typeof this.component[symbols.holder].setInspectorMetadata === 'function'
         ) {
-          this.component[symbols.holder].setInspectorMetadata({ $hasFocus: true })
+          this.component[symbols.holder].setInspectorMetadata({ 'blits-hasFocus': true })
         }
       }
       if (v === 'unfocus') {
@@ -107,7 +107,7 @@ export default {
           this.component[symbols.holder] &&
           typeof this.component[symbols.holder].setInspectorMetadata === 'function'
         ) {
-          this.component[symbols.holder].setInspectorMetadata({ $hasFocus: false })
+          this.component[symbols.holder].setInspectorMetadata({ 'blits-hasFocus': false })
         }
       }
     }

package/src/lib/reactivity/effect.js

@@ -32,9 +32,10 @@ const objectMap = new WeakMap()
 const globalEffectsMap = new Map()
 
 export const removeGlobalEffects = (effectsToRemove) => {
-  if (globalEffectsMap.size === 0) return
+  if (globalEffectsMap.size === 0 || effectsToRemove.length === 0) return
+  const effectsToRemoveSet = new Set(effectsToRemove)
   for (const [effect, target] of globalEffectsMap) {
-    if (effectsToRemove.indexOf(effect) === -1) continue
+    if (!effectsToRemoveSet.has(effect)) continue
     const effectsSet = objectMap.get(target)
     if (effectsSet === undefined) continue
     for (const set of effectsSet.values()) {

package/src/lib/reactivityguard/computedprops.js

@@ -35,10 +35,12 @@ const findMatchingBrace = (text, startPos) => {
     // Skip comments when not in strings
     else if (!inString && char === '/' && text[position + 1] === '/') {
       // Skip line comment
-      position = text.indexOf('\n', position) || text.length - 1
+      const nextNewline = text.indexOf('\n', position + 2)
+      position = nextNewline === -1 ? text.length - 1 : nextNewline
     } else if (!inString && char === '/' && text[position + 1] === '*') {
       // Skip block comment
-      position = text.indexOf('*/', position + 2) || text.length - 1
+      const end = text.indexOf('*/', position + 2)
+      position = end === -1 ? text.length - 1 : end + 1
     }
     // Count braces only outside strings and comments
     else if (!inString) {
@@ -60,6 +62,44 @@ const findComputedFunctionEnd = (computedObj, openingBracePos) => {
   return findMatchingBrace(computedObj, openingBracePos)
 }
 
+// Skip whitespace + commas + comments (line and block) starting from `pos`, return next code position.
+const skipNonCode = (text, pos) => {
+  let p = pos
+  while (p < text.length) {
+    const c = text[p]
+
+    // whitespace
+    if (c === ' ' || c === '\t' || c === '\n' || c === '\r') {
+      p++
+      continue
+    }
+
+    // separators between object members
+    if (c === ',') {
+      p++
+      continue
+    }
+
+    // line comment
+    if (c === '/' && text[p + 1] === '/') {
+      const nextNewline = text.indexOf('\n', p + 2)
+      p = nextNewline === -1 ? text.length : nextNewline + 1
+      continue
+    }
+
+    // block comment
+    if (c === '/' && text[p + 1] === '*') {
+      const end = text.indexOf('*/', p + 2)
+      p = end === -1 ? text.length : end + 2
+      continue
+    }
+
+    return p
+  }
+
+  return p
+}
+
 export default (code) => {
   // Find component declarations
   const componentRegex =
@@ -83,6 +123,8 @@ export default (code) => {
 
       if (computedEnd !== -1) {
         const computedObj = configObject.substring(computedStart, computedEnd)
+        const computedBlockStart = computedKeywordMatch.index
+        const computedBlockEnd = computedEnd
 
         // Process each computed property
         const computedProps = []
@@ -93,15 +135,20 @@ export default (code) => {
         // using cursor-based parsing gives better accuracy
         while (currentPos < computedObj.length - 1) {
           // -1 to exclude the closing brace
-          // Find the next function name
-          const functionNameMatch = /\s*(\w+)\s*\(\)/.exec(computedObj.substring(currentPos))
+          // Skip whitespace/comments so we don't match commented-out computed functions
+          currentPos = skipNonCode(computedObj, currentPos)
+          if (currentPos >= computedObj.length - 1) break
+
+          // Find the next function name (computed properties are `name() { ... }`)
+          const functionNameMatch = /^(\w+)\s*\(\)\s*/.exec(computedObj.substring(currentPos))
           if (!functionNameMatch) break
 
           const funcName = functionNameMatch[1]
-          const funcNamePos = currentPos + functionNameMatch.index
+          const funcNamePos = currentPos
 
           // Find opening brace for this function
-          const openingBracePos = computedObj.indexOf('{', funcNamePos)
+          const afterSignaturePos = funcNamePos + functionNameMatch[0].length
+          const openingBracePos = computedObj.indexOf('{', afterSignaturePos)
           if (openingBracePos === -1) break
 
           // Find closing brace for individual computed function
@@ -133,14 +180,15 @@ export default (code) => {
         }
 
         // Store the original computed object for later replacement
-        const originalComputedObj = configObject.substring(
-          computedStart - 'computed: '.length,
-          computedEnd
-        )
+        const originalComputedObj = configObject.substring(computedBlockStart, computedBlockEnd)
+        const computedObjOffsetInOriginal = computedStart - computedBlockStart
+        const computedObjEndInOriginal = computedObjOffsetInOriginal + computedObj.length
 
         let modifiedComputedObj = originalComputedObj
         let hasChanges = false
 
+        const replacements = []
+
         for (const prop of computedProps) {
           const thisRefs = extractThisReferences(prop.body)
 
@@ -181,13 +229,31 @@ export default (code) => {
                 prop.fullText.substring(0, openBraceIndex).match(/^(\s*)/)[0] +
                 '}'
 
-              // Replace this property in the computed object text
-              modifiedComputedObj = modifiedComputedObj.replace(prop.fullText, modifiedPropText)
-              hasChanges = true
+              replacements.push({
+                start: prop.startPos,
+                end: prop.endPos,
+                text: modifiedPropText,
+              })
             }
           }
         }
 
+        if (replacements.length > 0) {
+          let modifiedComputedInner = computedObj
+
+          replacements.sort((a, b) => b.start - a.start)
+          for (const r of replacements) {
+            modifiedComputedInner =
+              modifiedComputedInner.slice(0, r.start) + r.text + modifiedComputedInner.slice(r.end)
+          }
+
+          modifiedComputedObj =
+            originalComputedObj.slice(0, computedObjOffsetInOriginal) +
+            modifiedComputedInner +
+            originalComputedObj.slice(computedObjEndInOriginal)
+          hasChanges = true
+        }
+
         if (hasChanges) {
           // Store the modification of the entire computed object
           modifications.push({

package/src/plugins/theme.d.ts

@@ -18,13 +18,20 @@
 export interface ThemePlugin {
   get<T = unknown>(key: string): T | undefined
   get<T>(key: string, fallback: T): T
+  /**
+   * @deprecated
+   * Deprecated:  use `$theme.current()` instead
+   */
   set(theme: string): void
+  current(theme: string): void
+  variant(theme: string): void
 }
 
 export interface ThemePluginConfig {
   themes?: Record<string, Record<string, unknown>>
   current?: string
   base?: string
+  variant?: string
 }
 
 declare const theme: {

package/src/plugins/theme.js

@@ -20,13 +20,17 @@ import { reactive } from '../lib/reactivity/reactive.js'
 
 import Settings from '../settings.js'
 
-const getValueByDotNotation = (obj, base, path) => {
+const getValueByDotNotation = (obj, base, variant, path) => {
   const keys = path.split('.')
 
   for (let i = 0; i < keys.length; i++) {
     const key = keys[i]
 
-    if (obj !== null && key in obj === true) {
+    if (variant !== null && key in variant === true) {
+      obj = variant[key]
+      variant = variant !== null && key in variant === true ? variant[key] : null
+      base = base !== null && key in base === true ? base[key] : null
+    } else if (obj !== null && key in obj === true) {
       obj = obj[key]
       base = base !== null && key in base === true ? base[key] : null
     }
@@ -51,6 +55,7 @@ export default {
     const state = reactive(
       {
         current: 'default',
+        variant: null,
       },
       Settings.get('reactivityMode'),
       true
@@ -62,6 +67,7 @@ export default {
       themes = config.themes
       state.current = config.current || 'default'
       base = config.base || 'default'
+      state.variant = config.variant || null
     } else {
       themes = { default: config }
     }
@@ -71,8 +77,14 @@ export default {
         // reference state.current, to trigger reactive effects for
         // theme get function when current theme is modified
         state.current
+        state.variant
         if (themeMap[key] !== undefined) return themeMap[key]
-        const value = getValueByDotNotation(themes[state.current], themes[base] || null, key)
+        const value = getValueByDotNotation(
+          themes[state.current],
+          themes[base] || null,
+          themes[state.variant] || null,
+          key
+        )
         if (value !== undefined) {
           // store the value for next time
           themeMap[key] = value
@@ -82,6 +94,11 @@ export default {
       },
 
       set(theme) {
+        Log.warn('$theme.set() is deprecated, use $theme.current() instead')
+        this.current(theme)
+      },
+
+      current(theme) {
         if (theme in themes) {
           themeMap = {}
           state.current = theme
@@ -89,6 +106,16 @@ export default {
           Log.warn(`Theme ${theme} not found`)
         }
       },
+
+      variant(theme) {
+        if (theme in themes) {
+          themeMap = {}
+          state.variant = theme
+          console.log('change variant', theme)
+        } else {
+          Log.warn(`Variant ${theme} not found`)
+        }
+      },
     }
   },
 }

package/src/router/router.js

@@ -403,7 +403,7 @@ export const navigate = async function () {
       // Update router state after announcements and final route resolution,
       // right before initializing or restoring the view
       state.path = route.path
-      state.params = route.params || {}
+      state.params = Object.keys(route.params).length === 0 ? null : route.params
       state.hash = route.hash
       state.data = null
       state.data = route.data || {}
@@ -482,15 +482,13 @@ export const navigate = async function () {
       }
 
       let shouldAnimate = false
-      // Declare oldView in broader scope so it can be used in hooks below
-      let oldView = null
 
       // apply out out transition on previous view if available, unless
       // we're reusing the prvious page component
       if (previousRoute !== undefined && reuse === false) {
         // only animate when there is a previous route
         shouldAnimate = true
-        oldView = this[symbols.children].splice(1, 1).pop()
+        const oldView = this[symbols.children].splice(1, 1).pop()
         if (oldView) {
           await removeView(previousRoute, oldView, route.transition.out, navigatingBack)
         }