@lightningjs/blits 1.46.0 → 1.47.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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.47.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

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/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'])
     }
   },

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

@@ -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)
         }