@lightningjs/blits 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 2.12.0
+
+_8 oct 2026_
+
+- Added support for rich text using _bb-code_-style formatting
+- Capped default number of webworkers at 2 for faster App startup time
+- Added selective instantiation of _only_ the relevant text renders based on the registered fonts
+- Bumped renderer to 3.6.0 with latest rich text enhancements
+
+## 2.11.0
+
+_28 sep 2026_
+
+- Improved `$select()` method by adding caching
+- Upgraded several dependencies
+- Bumped renderer to 3.5.1
+
 ## 2.10.0
 
 _21 sep 2026_

package/index.d.ts

@@ -1224,8 +1224,9 @@ declare module '@lightningjs/blits' {
     * Maximum number of web workers to spin up simultaneously for offloading functionality such
     * as image loading to separate threads (when supported by the browser)
     *
-    * If not specified defaults to the number of logical processers available as reported by
-    * `navigator.hardwareConcurrency` (or 2 if `navigator.hardwareConcurrency` is not supported)
+    * If not specified defaults to the number of logical processers available on the device, as reported by
+    * `navigator.hardwareConcurrency`, with a maximum of 2. If `navigator.hardwareConcurrency` is
+    * not supported the default value will be 2
     */
     webWorkersLimit?: number
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -78,25 +78,25 @@
     "@babel/plugin-syntax-import-assertions": "^7.28.6",
     "@eslint/eslintrc": "^3.3.4",
     "@eslint/js": "^9.39.3",
-    "c8": "^10.1.3",
+    "c8": "^12.0.0",
     "eslint": "^9.39.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "fast-glob": "^3.3.3",
-    "global-jsdom": "^26.0.0",
-    "globals": "^16.3.0",
+    "global-jsdom": "^30.0.0",
+    "globals": "^17.12.0",
     "husky": "^9.1.7",
-    "jsdom": "^26.0.0",
+    "jsdom": "^30.1.0",
     "lint-staged": "^15.5.2",
     "prettier": "^3.6.2",
-    "sinon": "^21.0.1",
+    "sinon": "^22.1.0",
     "tap-diff": "^0.1.1",
     "tap-filter": "^1.0.3",
     "tape": "^5.9.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "3.5.0",
-    "magic-string": "^0.30.21"
+    "@lightningjs/renderer": "^3.6.0",
+    "magic-string": "^1.4.1"
   },
   "repository": {
     "type": "git",

package/src/component/base/methods.js

@@ -30,6 +30,8 @@ import { renderer } from '../../launch.js'
 import { keyMap } from '../../application.js'
 import { platform } from '../../platform.js'
 
+const selectCache = new WeakMap()
+
 export default {
   $focus: {
     /**
@@ -103,6 +105,7 @@ export default {
      */
     value: function () {
       this.eol = true
+      selectCache.delete(this)
       removeKeyUpCallbacks(this)
       this[symbols.lifecycle].state = 'destroy'
 
@@ -197,26 +200,60 @@ export default {
       // early exit when component is marked as end of life
       if (this.eol === true) return
 
-      let selected = null
-      this[symbols.children].forEach((child) => {
+      let cache = selectCache.get(this)
+      if (cache !== undefined && cache.has(ref) === true) {
+        const selected = cache.get(ref)
+        if (selected !== undefined && selected.eol !== true) return selected
+        cache.delete(ref)
+      }
+
+      for (const child of this[symbols.children]) {
+        if (child === undefined || child === null) continue
         if (Array.isArray(child)) {
-          child.forEach((c) => {
-            if (c['ref'] === ref) selected = c
-          })
+          const selected = child.find((c) => c['ref'] === ref)
+          if (selected !== undefined) {
+            if (cache === undefined) {
+              cache = new Map()
+              selectCache.set(this, cache)
+            }
+            cache.set(ref, selected)
+            return selected
+          }
         } else if (Object.getPrototypeOf(child) === Object.prototype) {
-          Object.keys(child).forEach((k) => {
-            if (child[k]['ref'] === ref) selected = child[k]
-          })
+          const selected = Object.values(child).find((c) => c['ref'] === ref)
+          if (selected !== undefined) {
+            if (cache === undefined) {
+              cache = new Map()
+              selectCache.set(this, cache)
+            }
+            cache.set(ref, selected)
+            return selected
+          }
         } else {
-          if (child['ref'] === ref) selected = child
+          if (child['ref'] === ref) {
+            if (cache === undefined) {
+              cache = new Map()
+              selectCache.set(this, cache)
+            }
+            cache.set(ref, child)
+            return child
+          }
         }
-      })
-      return selected
+      }
+      return null
     },
     writable: false,
     enumerable: true,
     configurable: false,
   },
+  [symbols.invalidateSelectCache]: {
+    value: function () {
+      selectCache.delete(this)
+    },
+    writable: false,
+    enumerable: false,
+    configurable: false,
+  },
   $trigger: {
     /**
      * @this {import('../../component').BlitsComponent}

package/src/components/Circle.js

@@ -26,6 +26,7 @@ export default () =>
         const validAttributes = [
           'parent',
           'rotation',
+          'rich',
           'w',
           'h',
           'x',

package/src/components/FPScounter.js

@@ -28,6 +28,7 @@ export const FPScounter = Blits.Component('FPScounter', {
       const validAttributes = [
         'parent',
         'rotation',
+        'rich',
         'w',
         'h',
         'x',

package/src/components/RouterView.js

@@ -38,6 +38,7 @@ export default () =>
           const validAttributes = [
             'parent',
             'rotation',
+            'rich',
             'w',
             'h',
             'x',

package/src/engines/L3/element.js

@@ -240,6 +240,9 @@ const propsTransformer = {
   set rotation(v) {
     this.props['rotation'] = v * (Math.PI / 180)
   },
+  set rich(v) {
+    this.props['richText'] = v
+  },
   set w(v) {
     const parsed = parsePercentage.call(this, v, 'w')
     this.props['w'] = parsed

package/src/engines/L3/fontLoader.js

@@ -17,23 +17,27 @@
 
 import Settings from '../../settings.js'
 import { renderer } from './launch.js'
-
-const fontTypeMapping = {
-  sdf: 'sdf',
-  msdf: 'sdf',
-  canvas: 'canvas',
-  web: 'canvas',
-}
+import { resolveFontEngineType } from './fontTypes.js'
 
 export default () => {
   const stage = renderer.stage
+  const renderMode = Settings.get('renderMode', 'webgl')
 
   const fonts = Settings.get('fonts', [])
   for (let i = 0; i < fonts.length; i++) {
     const font = fonts[i]
-    const type = fontTypeMapping[font.type] || 'sdf'
+    const type = resolveFontEngineType(font.type)
 
     if (type === 'sdf') {
+      // The SDF text renderer is not compatible with the Canvas core renderer
+      // (no `sdf` font handler is registered), so skip these fonts instead of
+      // throwing in `stage.loadFont`.
+      if (renderMode === 'canvas') {
+        console.warn(
+          `Blits: Skipping SDF font "${font.family}" because SDF fonts are not supported with renderMode "canvas".`
+        )
+        continue
+      }
       stage.loadFont('sdf', {
         fontFamily: font.family,
         atlasUrl: font.png || (font.file && font.file.replace(/\.[^.]+$/, `.${font.type}.png`)),

package/src/engines/L3/fontTypes.js

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Maps a Blits font `type` (as declared in `settings.fonts`) to the
+ * renderer font-engine type (`sdf` or `canvas`).
+ *
+ * Kept in a shared module so `launch.js` (font-engine selection) and
+ * `fontLoader.js` (font loading) always agree on the mapping.
+ */
+const fontTypeMapping = {
+  sdf: 'sdf',
+  msdf: 'sdf',
+  canvas: 'canvas',
+  web: 'canvas',
+}
+
+/**
+ * Resolve a Blits font type to a renderer font-engine type.
+ * Unknown (or missing) types default to `sdf`, matching fontLoader behavior.
+ *
+ * @param {string} [type] - The font type declared in settings (web, msdf, sdf)
+ * @returns {'sdf'|'canvas'}
+ */
+export const resolveFontEngineType = (type) => fontTypeMapping[type] || 'sdf'
+
+/**
+ * Scan the configured fonts and report which font-engine types are required.
+ *
+ * @param {Array<{ type?: string }>} [fonts] - Fonts declared in settings
+ * @returns {{ hasSdfFont: boolean, hasCanvasFont: boolean }}
+ */
+export const getRequiredFontEngines = (fonts = []) => {
+  let hasSdfFont = false
+  let hasCanvasFont = false
+
+  const len = Array.isArray(fonts) ? fonts.length : 0
+  for (let i = 0; i < len; i++) {
+    if (resolveFontEngineType(fonts[i] && fonts[i].type) === 'sdf') {
+      hasSdfFont = true
+    } else {
+      hasCanvasFont = true
+    }
+    if (hasSdfFont === true && hasCanvasFont === true) break
+  }
+
+  return { hasSdfFont, hasCanvasFont }
+}

package/src/engines/L3/launch.js

@@ -25,6 +25,7 @@ import { SCREEN_RESOLUTIONS, RENDER_QUALITIES } from '../../constants.js'
 import colors from '../../lib/colors/colors.js'
 import fontLoader from './fontLoader.js'
 import shaderLoader from './shaderLoader.js'
+import { getRequiredFontEngines } from './fontTypes.js'
 import { platform } from '../../platform.js'
 
 /** @type {RendererMain|{}} */
@@ -37,11 +38,22 @@ const renderEngine = (settings) => {
   if (renderMode === 'canvas') return CanvasCoreRenderer
 }
 
-const textRenderEngines = (settings) => {
+export const textRenderEngines = (settings) => {
   const renderMode = 'renderMode' in settings ? settings.renderMode : 'webgl'
 
-  if (renderMode === 'webgl') return [SdfTextRenderer, CanvasTextRenderer]
+  // SDF text rendering is not compatible with the Canvas core renderer
   if (renderMode === 'canvas') return [CanvasTextRenderer]
+
+  if (renderMode === 'webgl') {
+    // Only register the font engines actually required by the configured
+    // fonts, so unused text renderers are never initialized.
+    const { hasSdfFont, hasCanvasFont } = getRequiredFontEngines(settings.fonts)
+    if (hasSdfFont === true && hasCanvasFont === true) return [SdfTextRenderer, CanvasTextRenderer]
+    if (hasSdfFont === true) return [SdfTextRenderer]
+    // Canvas-only fonts, or no fonts declared at all (system/default fonts
+    // render via the Canvas engine, which can render any font family).
+    return [CanvasTextRenderer]
+  }
 }
 
 const textureMemorySettings = (settings) => {
@@ -93,7 +105,9 @@ export default (App, target, settings = {}) => {
           SCREEN_RESOLUTIONS[screenHeight] ||
           1,
         numImageWorkers:
-          'webWorkersLimit' in settings ? settings.webWorkersLimit : hardwareConcurrency || 2,
+          'webWorkersLimit' in settings
+            ? settings.webWorkersLimit
+            : Math.min(hardwareConcurrency || 2, 2),
         clearColor: (settings.canvasColor && colors.normalize(settings.canvasColor)) || 0x00000000,
         inspector: settings.inspector === true ? Inspector : undefined,
         boundsMargin: settings.viewportMargin || 0,

package/src/lib/codegenerator/generator.js

@@ -223,6 +223,9 @@ const generateElementCode = function (
 
     if (key === 'key') return
 
+    // a ref on a component belongs to the component itself, not to its holder element
+    if (options.holder === true && (key === 'ref' || key === ':ref')) return
+
     // Skip inspector-data in production builds for performance optimization
     if (key === 'inspector-data' && !isDev) return
 
@@ -524,6 +527,8 @@ const generateForLoopCode = function (templateObject, parent) {
     }
   }
 
+  const invalidateSelectCache = 'ref' in templateObject
+
   ctx.renderCode.push(`
     created[${forStartCounter}] = []
     effects[${forStartCounter}] = []
@@ -532,6 +537,7 @@ const generateForLoopCode = function (templateObject, parent) {
     let to${forStartCounter}
 
     forloops[${forStartCounter}] = (collection = [], elms, created) => {
+      ${invalidateSelectCache ? "rootComponent && rootComponent[Symbol.for('invalidateSelectCache')]()" : ''}
       const rawCollection = getRaw(collection)
       const keys = new Set()
       let l = rawCollection.length

package/src/lib/symbols.js

@@ -144,4 +144,6 @@ export default {
   removeEffects: Symbol.for('removeEffects'),
   // Symbol 'tagContent' utilized within generated code
   tagContent: Symbol.for('tagContent'),
+  // Symbol used by generated loops to invalidate cached ref lookups
+  invalidateSelectCache: Symbol.for('invalidateSelectCache'),
 }