@lightningjs/blits 2.1.3 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v2.2.0
+
+_11 may 2026_
+
+- Exposed built-in reactivity to be used in custom Blits plugins
+- Cleaned up unused key names from default key mapping
+- Improved documentation
+- Fixed reactive color not working for components
+- Added EOL guard for Blits elements to prevent potential race conditions
+- Updated MSDF generator version in boilerplate
+- Fixed / improved GH workflow for automated tests
+- Upgraded renderer to 3.0.3
+
+
 ## v2.1.3
 
 _16 apr 2026_

package/index.d.ts

@@ -405,6 +405,11 @@ declare module '@lightningjs/blits' {
      */
     readonly $parent: ComponentBase | undefined,
 
+    /**
+     * Human-readable identifier for this component instance (e.g. "MyComponent_0")
+     */
+    readonly $componentId: string,
+
     /**
     * Indicates whether the component currently is hovered
     *
@@ -536,6 +541,14 @@ declare module '@lightningjs/blits' {
      * Router instance
      */
     $router: Router
+    /**
+     * Creates a reactive object. Changes to properties on the returned object
+     * will automatically trigger re-renders in any component that accesses them.
+     *
+     * Pre-configured with the app's reactivity mode and global scope.
+     * Primarily intended for use inside custom plugins.
+     */
+    $reactive: <T extends Record<string, any>>(target: T) => T
     /**
      * Dynamically set the size of a component holder node
      */
@@ -1331,7 +1344,7 @@ declare module '@lightningjs/blits' {
      * Should do all necessary setup and ideally return an object with
      * properties or methods that can be used in the App
      */
-    plugin: () => any
+    plugin: (options?: any) => any
   }
 
 
@@ -1389,7 +1402,7 @@ declare module '@lightningjs/blits' {
      * Object with options to be passed into the plugin instantiation method.
      * Can be used to set default values
      */
-    Plugin(plugin: Plugin, nameOrOptions?: string | object , options?: object) : void
+    Plugin(plugin: Plugin | ((options?: any) => any), nameOrOptions?: string | object , options?: object) : void
   }
 
   const Blits: Blits;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -75,7 +75,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^3.0.2",
+    "@lightningjs/renderer": "^3.0.3",
     "magic-string": "^0.30.21"
   },
   "repository": {

package/src/component/base/index.js

@@ -22,8 +22,22 @@ import router from './router.js'
 import announcer from './announcer.js'
 import utils from './utils.js'
 import symbols from '../../lib/symbols.js'
+import { reactive } from '../../lib/reactivity/reactive.js'
+import Settings from '../../settings.js'
 
-export const shared = { ...events, ...router, ...announcer }
+export const shared = {
+  ...events,
+  ...router,
+  ...announcer,
+  $reactive: {
+    value: function (target) {
+      return reactive(target, Settings.get('reactivityMode'), true)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+}
 
 export default Object.defineProperties(
   {

package/src/component.js

@@ -432,6 +432,10 @@ const Component = (name = required('name'), config = required('config')) => {
    */
   const factory = (options = {}, parentEl, parentComponent, rootComponent) => {
     if (Base[symbols['launched']] === false) {
+      // create a context with shared properties so this.$reactive (etc.)
+      // is available during plugin initialization
+      const pluginContext = Object.defineProperties({}, shared)
+
       // Register user defined plugins once on the Base object (after launch)
       const pluginKeys = Object.keys(plugins)
       const pluginKeysLength = pluginKeys.length
@@ -449,8 +453,8 @@ const Component = (name = required('name'), config = required('config')) => {
         const plugin = plugins[pluginName]
 
         pluginInstances[prefixedPluginName] = {
-          // instantiate the plugin, passing in provided options
-          value: Object.defineProperties(plugin.plugin(plugin.options), shared),
+          // instantiate the plugin with shared context, then apply shared to the result
+          value: Object.defineProperties(plugin.plugin.call(pluginContext, plugin.options), shared),
           writable: false,
           enumerable: true,
           configurable: true,

package/src/engines/L3/element.js

@@ -629,6 +629,7 @@ const Element = {
    * @param {Object} data - Framework inspector metadata to merge
    */
   setInspectorMetadata(data) {
+    if (this.eol === true) return
     // Early return if inspector not enabled (performance optimization)
     if (inspectorEnabled !== true) {
       return
@@ -666,6 +667,7 @@ const Element = {
    * @returns {void}
    */
   set(prop, value) {
+    if (this.eol === true) return
     if (value === undefined) return
     // @ts-ignore
     if (this.props.raw[prop] === value) return
@@ -701,6 +703,8 @@ const Element = {
     }
   },
   animate(prop, value, transition) {
+    if (this.eol === true) return
+
     // Clear any existing debounce timeout for this property
     if (this.debounceTimeouts[prop] !== undefined) {
       clearTimeout(this.debounceTimeouts[prop])
@@ -812,6 +816,9 @@ const Element = {
     f.start()
   },
   destroy() {
+    if (this.eol === true) return
+    this.eol = true
+
     if (this.node === null) return
 
     Log.debug('Deleting Node', this.nodeId)
@@ -903,6 +910,7 @@ export default (config, component) => {
     inspectorEnabled = Settings.get('inspector', false)
   }
   return Object.assign(Object.create(Element), {
+    eol: false,
     props: Object.assign(Object.create(propsTransformer), { props: {} }),
     scheduledTransitions: {},
     debounceTimeouts: {},

package/src/lib/codegenerator/generator.js

@@ -225,7 +225,6 @@ const generateElementCode = function (
     const value = templateObject[key]
 
     if (isReactiveKey(key)) {
-      if (options.holder && key === ':color') return
       if (options.holder) {
         this.effectsCode.push(`
         if(typeof skips === 'undefined' || (typeof skips[${counter}] === 'undefined' ||