@lightningjs/blits 1.45.2 → 1.47.0

package/src/components/Circle.js

@@ -37,6 +37,7 @@ export default () =>
         let slotChildCounter = 0
         let cmps = []
         elementConfigs[0] = {}
+        elementConfigs[0]['___wrapper'] = true
 
         elms[0] = this.element(
           { parent: parent || 'root' },

package/src/components/FPScounter.js

@@ -39,6 +39,7 @@ export default () =>
         let slotChildCounter = 0
         let cmps = []
         elementConfigs[0] = {}
+        elementConfigs[0]['___wrapper'] = true
 
         elms[0] = this.element(
           { parent: parent || 'root' },

package/src/components/RouterView.js

@@ -16,96 +16,106 @@
  */
 
 import Component from '../component.js'
-import Router from '../router/router.js'
+import Router, { state as routerState } from '../router/router.js'
 import symbols from '../lib/symbols.js'
 import Focus from '../focus.js'
 
 let hashchangeHandler = null
 
+/** @typedef {{ $input?: (event: any) => boolean, $focus?: (event: any) => void }} RouterViewParent */
+
 export default () =>
-  Component('RouterView', {
-    /* eslint-disable no-unused-vars */
-    code: {
-      render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
-        const elms = []
-        const elementConfigs = []
-        const forloops = []
-        const props = []
-        const created = []
-        const effects = {}
-        const skips = []
-        let componentType
-        let rootComponent = component
-        let propData
-        let slotComponent
-        let inSlot = false
-        let slotChildCounter = 0
-        let cmps = []
-        elementConfigs[0] = {}
+  Component(
+    'RouterView',
+    /** @type {any} */ ({
+      /* eslint-disable no-unused-vars */
+      code: {
+        render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
+          const elms = []
+          const elementConfigs = []
+          const forloops = []
+          const props = []
+          const created = []
+          const effects = {}
+          const skips = []
+          let componentType
+          let rootComponent = component
+          let propData
+          let slotComponent
+          let inSlot = false
+          let slotChildCounter = 0
+          let cmps = []
+          elementConfigs[0] = {}
+          elementConfigs[0]['___wrapper'] = true
 
-        elms[0] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+          elms[0] = this.element(
+            { parent: parent || 'root' },
+            inSlot === true ? slotComponent : component
+          )
 
-        elementConfigs[0]['w'] = parent.node.width * (100 / 100)
-        elementConfigs[0]['height'] = parent.node.height * (100 / 100)
-        elms[0].populate(elementConfigs[0])
+          elementConfigs[0]['w'] = parent.node.width * (100 / 100)
+          elementConfigs[0]['height'] = parent.node.height * (100 / 100)
+          elms[0].populate(elementConfigs[0])
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+          if (inSlot === true) {
+            slotChildCounter -= 1
+          }
 
-        return {
-          elms,
-          cleanup: () => {
-            rootComponent = null
-            propData = null
-            slotComponent = null
-            parent = null
-            component = null
-            cmps.length = 0
-            elms.length = 0
-            components.length = 0
-            elementConfigs.length = 0
-            forloops.length = 0
-            props.length = 0
-            skips.length = 0
-          },
-        }
+          return {
+            elms,
+            cleanup: () => {
+              rootComponent = null
+              propData = null
+              slotComponent = null
+              parent = null
+              component = null
+              cmps.length = 0
+              elms.length = 0
+              components.length = 0
+              elementConfigs.length = 0
+              forloops.length = 0
+              props.length = 0
+              skips.length = 0
+            },
+          }
+        },
+        effects: [],
+        context: {},
       },
-      effects: [],
-      context: {},
-    },
-    state() {
-      return {
-        activeView: null,
-      }
-    },
-    hooks: {
-      async ready() {
-        if (this.parent[symbols.routerHooks] && this.parent[symbols.routerHooks].init) {
-          await this.parent[symbols.routerHooks].init.apply(this.parent)
+      state() {
+        return {
+          activeView: null,
         }
-        hashchangeHandler = () => Router.navigate.apply(this)
-        Router.navigate.apply(this)
-        window.addEventListener('hashchange', hashchangeHandler)
-      },
-      destroy() {
-        window.removeEventListener('hashchange', hashchangeHandler, false)
       },
-      focus() {
-        if (this.activeView && Focus.get() === this) {
-          this.activeView.$focus()
-        }
+      hooks: {
+        async ready() {
+          if (this.parent[symbols.routerHooks] && this.parent[symbols.routerHooks].init) {
+            await this.parent[symbols.routerHooks].init.apply(this.parent)
+          }
+          hashchangeHandler = () => Router.navigate.apply(this)
+          Router.navigate.apply(this)
+          window.addEventListener('hashchange', hashchangeHandler)
+        },
+        destroy() {
+          window.removeEventListener('hashchange', hashchangeHandler, false)
+        },
+        focus() {
+          if (this.activeView && Focus.get() === this) {
+            this.activeView.$focus()
+          }
+        },
       },
-    },
-    input: {
-      back(e) {
-        const navigating = Router.back.call(this)
-        if (navigating === false) {
-          this.parent.$focus(e)
-        }
+      input: {
+        back(e) {
+          if (routerState.backNavigation === false) {
+            this.parent.$input(e)
+            return
+          }
+          const navigating = Router.back.call(this)
+          if (navigating === false) {
+            this.parent.$focus(e)
+          }
+        },
       },
-    },
-  })
+    })
+  )

package/src/components/Sprite.js

@@ -39,6 +39,7 @@ export default () =>
         let slotChildCounter = 0
         let cmps = []
         elementConfigs[0] = {}
+        elementConfigs[0]['___wrapper'] = true
 
         elms[0] = this.element(
           { parent: parent || 'root' },

package/src/engines/L3/element.js

@@ -243,15 +243,29 @@ const propsTransformer = {
   },
   set w(v) {
     this.props['width'] = parsePercentage.call(this, v, 'width')
+    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'])
+    }
   },
   set width(v) {
-    this.props['width'] = parsePercentage.call(this, v, 'width')
+    this.w = v
   },
   set h(v) {
     this.props['height'] = parsePercentage.call(this, v, 'height')
+    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'])
+    }
   },
   set height(v) {
-    this.props['height'] = parsePercentage.call(this, v, 'height')
+    this.h = v
   },
   set x(v) {
     this.props['x'] = parsePercentage.call(this, v, 'width')
@@ -564,6 +578,39 @@ const Element = {
       })
     }
   },
+  /**
+   * Sets framework-provided inspector metadata
+   * Only sets if inspector is enabled and in dev mode
+   * @param {Object} data - Framework inspector metadata to merge
+   */
+  setInspectorMetadata(data) {
+    // Early return if inspector not enabled (performance optimization)
+    if (inspectorEnabled !== true) {
+      return
+    }
+
+    // Early return if element is destroyed (props.props is null)
+    if (this.props.props === undefined || this.props.props === null) {
+      return
+    }
+
+    // Initialize data object if it doesn't exist
+    if (this.props['data'] === undefined) {
+      this.props['data'] = {}
+    }
+    if (this.props.props['data'] === undefined) {
+      this.props.props['data'] = {}
+    }
+
+    // Merge framework data (with $ prefix to prevent collisions)
+    Object.assign(this.props['data'], data)
+    Object.assign(this.props.props['data'], data)
+
+    // Sync to renderer node so inspector can see it
+    if (this.node !== undefined && this.node !== null) {
+      this.node.data = { ...this.props.props['data'] }
+    }
+  },
   /**
    * Set an individual property on the node
    *
@@ -651,6 +698,11 @@ const Element = {
       f,
     }
 
+    // Update inspector metadata when transition starts
+    if (inspectorEnabled === true) {
+      this.setInspectorMetadata({ $isTransitioning: true })
+    }
+
     if (transition.start !== undefined && typeof transition.start === 'function') {
       // fire transition start callback when animation really starts (depending on specified delay)
       f.once('animating', () => {
@@ -685,6 +737,12 @@ const Element = {
       }
       // remove the prop from scheduled transitions
       delete this.scheduledTransitions[prop]
+      // Update inspector metadata when transition ends
+      if (inspectorEnabled === true) {
+        this.setInspectorMetadata({
+          $isTransitioning: Object.keys(this.scheduledTransitions).length > 0,
+        })
+      }
     })
 
     // start animation

package/src/lib/codegenerator/generator.js

@@ -151,6 +151,10 @@ const generateElementCode = function (
 
   renderCode.push(`elementConfigs[${counter}] = {}`)
 
+  if (counter === 0) {
+    renderCode.push(`elementConfigs[${counter}]['___wrapper'] = true `)
+  }
+
   if (options.forloop) {
     renderCode.push(`if(${elm} === undefined) {`)
   }
@@ -283,9 +287,11 @@ const generateComponentCode = function (
 
   const children = templateObject.children
   delete templateObject.children
+  // Capture holder counter before generating element code (which may process children and increment counter)
+  const holderCounter = counter
   generateElementCode.call(this, templateObject, parent, { ...options, ...{ holder: true } })
 
-  parent = options.key ? `elms[${counter}][${options.key}]` : `elms[${counter}]`
+  parent = options.key ? `elms[${holderCounter}][${options.key}]` : `elms[${holderCounter}]`
 
   counter++
 
@@ -354,6 +360,21 @@ 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 holderElm = options.key
+      ? `elms[${holderCounter}][${options.key}]`
+      : `elms[${holderCounter}]`
+    renderCode.push(`
+      if (${holderElm} !== undefined && typeof ${holderElm}.setInspectorMetadata === 'function') {
+        ${holderElm}.setInspectorMetadata({
+          $componentType: '${componentType}'
+        })
+      }
+    `)
+  }
+
   this.cleanupCode.push(`components[${counter}] = null`)
 
   if (options.forloop) {

package/src/lib/lifecycle.js

@@ -18,6 +18,9 @@
 import { Log } from './log.js'
 import { emit, privateEmit } from './hooks.js'
 import symbols from './symbols.js'
+import Settings from '../settings.js'
+
+let inspectorEnabled = null
 
 /**
  * List of valid lifecycle states for a component.
@@ -82,8 +85,31 @@ export default {
       // emit 'public' hook
       emit(v, this.component[symbols.identifier], this.component)
       // update the built-in hasFocus state variable
-      if (v === 'focus') this.component[symbols.state].hasFocus = true
-      if (v === 'unfocus') this.component[symbols.state].hasFocus = false
+      if (v === 'focus' || v === 'unfocus') {
+        if (inspectorEnabled === null) {
+          inspectorEnabled = Settings.get('inspector', false)
+        }
+      }
+      if (v === 'focus') {
+        this.component[symbols.state].hasFocus = true
+        if (
+          inspectorEnabled === true &&
+          this.component[symbols.holder] &&
+          typeof this.component[symbols.holder].setInspectorMetadata === 'function'
+        ) {
+          this.component[symbols.holder].setInspectorMetadata({ $hasFocus: true })
+        }
+      }
+      if (v === 'unfocus') {
+        this.component[symbols.state].hasFocus = false
+        if (
+          inspectorEnabled === true &&
+          this.component[symbols.holder] &&
+          typeof this.component[symbols.holder].setInspectorMetadata === 'function'
+        ) {
+          this.component[symbols.holder].setInspectorMetadata({ $hasFocus: false })
+        }
+      }
     }
   },
 }

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/lib/symbols.js

@@ -17,6 +17,7 @@
  * @property {symbol} inputEvents
  * @property {symbol} internalEvent
  * @property {symbol} intervals
+ * @property {symbol} debounces
  * @property {symbol} isProxy
  * @property {symbol} launched
  * @property {symbol} level
@@ -70,6 +71,7 @@ export default {
   inputEvents: Symbol('inputEvents'),
   internalEvent: Symbol('internalEvent'),
   intervals: Symbol('intervals'),
+  debounces: Symbol('debounces'),
   isProxy: Symbol('isProxy'),
   launched: Symbol('launched'),
   level: Symbol('level'),

package/src/plugins/appstate.d.ts

@@ -15,10 +15,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type { AppStatePlugin } from '@lightningjs/blits'
-
-// Re-export AppStatePlugin for direct imports
-export type { AppStatePlugin }
+export type AppStatePlugin<TState extends Record<string, unknown> = Record<string, unknown>> = TState
 
 declare const appState: {
   readonly name: 'appState'

package/src/plugins/index.d.ts

@@ -21,9 +21,8 @@ export { default as appState } from './appstate.js'
 export { default as storage } from './storage/storage.js'
 
 // Re-export plugin interfaces for convenience
-export type { LanguagePlugin, ThemePlugin, StoragePlugin, AppStatePlugin } from '@lightningjs/blits'
-
-// Re-export option types
-export type { LanguagePluginOptions } from './language.js'
-export type { ThemePluginConfig } from './theme.js'
+export type { LanguagePlugin, LanguagePluginOptions } from './language.js'
+export type { ThemePlugin, ThemePluginConfig } from './theme.js'
+export type { StoragePlugin } from './storage/storage.js'
+export type { AppStatePlugin } from './appstate.js'
 

package/src/plugins/language.d.ts

@@ -15,16 +15,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type { LanguagePlugin } from '@lightningjs/blits'
+export interface LanguagePlugin {
+  translate(key: string, ...replacements: any[]): string
+  readonly language: string
+  set(language: string): void
+  translations(translationsObject: Record<string, unknown>): void
+  load(file: string): Promise<void>
+}
 
 export interface LanguagePluginOptions {
   file?: string
   language?: string
 }
 
-// Re-export LanguagePlugin for direct imports
-export type { LanguagePlugin }
-
 declare const language: {
   readonly name: 'language'
   plugin: (options?: LanguagePluginOptions) => LanguagePlugin

package/src/plugins/storage/storage.d.ts

@@ -15,10 +15,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type { StoragePlugin } from '@lightningjs/blits'
-
-// Re-export StoragePlugin for direct imports
-export type { StoragePlugin }
+export interface StoragePlugin {
+  get<T = unknown>(key: string): T | null
+  set(key: string, value: unknown): boolean
+  remove(key: string): void
+  clear(): void
+}
 
 declare const storage: {
   readonly name: 'storage'

package/src/plugins/theme.d.ts

@@ -15,17 +15,25 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type { ThemePlugin } from '@lightningjs/blits'
+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
 }
 
-// Re-export ThemePlugin for direct imports
-export type { ThemePlugin }
-
 declare const theme: {
   readonly name: 'theme'
   plugin: (config?: ThemePluginConfig | Record<string, unknown>) => ThemePlugin