@lightningjs/blits 2.0.0-beta.9 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## v2.0.0
+
+_20 mar 2026_
+
+**Blits v2 as part of the Lightning 3.1 release**
+
+- Upgraded to Lightning renderer v3
+- Prefixed built-in variables with `$` (i.e. `hasFocus` => `$hasFocus`)
+- Changed array based props to object based props
+- Removed several deprecated methods and variables (`focus`, `select`, `trigger`, `wordwrap`, `width`, `height`)
+- Removed `effects` attribute and replaced for `border`, `rounded` and `shadow`
+- Changed handling of props with the same name as know Element attributes
+- Removed MSDF font generator as a blits dependency
+- Updated key mapping to rely only on `keyCode`
+
+
 ## v1.51.0
 
 _04 mar 2026_

package/index.d.ts

@@ -401,9 +401,9 @@ declare module '@lightningjs/blits' {
     readonly $hasFocus: boolean,
 
     /**
-     * Parent component instance. Undefined for the root Application component or after destroy.
+     * Parent component instance. Undefined for the root Application component (destroyed case not modeled).
      */
-    readonly $parent: ComponentBase | null | undefined,
+    readonly $parent: ComponentBase | undefined,
 
     /**
     * Indicates whether the component currently is hovered
@@ -544,6 +544,20 @@ declare module '@lightningjs/blits' {
     }) => void
   }
 
+  /**
+   * Context type for the root Application: no parent.
+   */
+  export interface ApplicationBase extends Omit<ComponentBase, '$parent'> {
+    readonly $parent: undefined
+  }
+
+  /**
+   * Context type for Components (Blits.Component): always has a parent when mounted. Destroyed case is not modeled.
+   */
+  export interface ChildComponentBase extends Omit<ComponentBase, '$parent'> {
+    readonly $parent: ComponentBase
+  }
+
   /**
    * Prop object
    */
@@ -587,7 +601,14 @@ declare module '@lightningjs/blits' {
     S,
     M,
     C
-  > = ThisType<Readonly<InferProps<P>> & S & M & Readonly<C> & ComponentBase>
+  > = ThisType<Readonly<InferProps<P>> & S & M & Readonly<C> & ChildComponentBase>
+
+  export type ApplicationContext<
+    P extends Record<string, any>,
+    S,
+    M,
+    C
+  > = ThisType<Readonly<InferProps<P>> & S & M & Readonly<C> & ApplicationBase>
 
   export interface ComponentConfig<P extends Props = {}, S, M, C, W> {
     components?: {
@@ -645,7 +666,7 @@ declare module '@lightningjs/blits' {
      * }
      * ```
      */
-    state?: (this: InferProps<P>) => S;
+    state?: (this: Readonly<InferProps<P>> & ChildComponentBase) => S;
     /**
      * Methods for abstracting more complex business logic into separate function
      */
@@ -716,32 +737,41 @@ declare module '@lightningjs/blits' {
     backNavigation?: boolean
   }
 
-  export type ApplicationConfig<P extends Props, S, M, C, W> = ComponentConfig<P, S, M, C, W> & (
-    {
-      /**
-       * Router Configuration
-       */
-      router?: RouterConfig<P, S, M, C>,
-      routes?: never
-    }
-    |
-    {
-      router?: never
-      /**
-       * Routes definition
-       *
-       * @example
-       *
-       * ```js
-       * routes: [
-       *  { path: '/', component: Home },
-       *  { path: '/details', component: Details },
-       *  { path: '/account', component: Account },
-       * ]
-       * ```
-     */
-      routes?: Route[]
-    }
+  export type ApplicationConfig<P extends Props, S, M, C, W> = Omit<
+    ComponentConfig<P, S, M, C, W>,
+    'hooks' | 'methods' | 'input' | 'computed' | 'watch' | 'state'
+  > & {
+    hooks?: Hooks & ApplicationContext<P, S, M, C>
+    methods?: M & ApplicationContext<P, S, M, C>
+    input?: Input & ApplicationContext<P, S, M, C>
+    computed?: C & ApplicationContext<P, S, M, C>
+    watch?: W & ApplicationContext<P, S, M, C>
+    state?: (this: Readonly<InferProps<P>> & ApplicationBase) => S
+  } & (
+    | {
+        /**
+         * Router Configuration
+         */
+        router?: RouterConfig<P, S, M, C>
+        routes?: never
+      }
+    | {
+        router?: never
+        /**
+         * Routes definition
+         *
+         * @example
+         *
+         * ```js
+         * routes: [
+         *  { path: '/', component: Home },
+         *  { path: '/details', component: Details },
+         *  { path: '/account', component: Account },
+         * ]
+         * ```
+         */
+        routes?: Route[]
+      }
   )
 
   export interface Transition {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -33,10 +33,9 @@
     "./components": "./src/components/FPScounter.js"
   },
   "scripts": {
-    "test": "c8 node scripts/runTests.js",
-    "test:ci": "c8 npm run test:run",
-    "test:run": "node -r global-jsdom/register ./node_modules/.bin/tape '{,!(node_modules|packages)/**/}*.test.js' | tap-diff",
-    "test:run:failures": "node -r global-jsdom/register ./node_modules/.bin/tape '{,!(node_modules|packages)/**/}*.test.js' |  tap-filter test-fail | tap-diff",
+    "test": "c8 npm run test:run | tap-diff",
+    "test:run": "node -r global-jsdom/register node_modules/tape/bin/tape \"scripts/**/*.test.js\" \"src/**/*.test.js\"",
+    "test:run:failures": "node -r global-jsdom/register node_modules/tape/bin/tape \"scripts/**/*.test.js\" \"src/**/*.test.js\" | tap-filter test-fail | tap-diff",
     "lint": "node scripts/lint.js",
     "lint:fix": "node scripts/lint.js fix",
     "prepublishOnly": "node scripts/prepublishOnly.js",
@@ -76,7 +75,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "3.0.0-beta23",
+    "@lightningjs/renderer": "^3.0.0",
     "magic-string": "^0.30.21"
   },
   "repository": {

package/scripts/lint.js

@@ -1,3 +1,20 @@
+/*
+ * Copyright 2025 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
+ */
+
 import fg from 'fast-glob'
 import { resolve } from 'path'
 import { fileURLToPath } from 'url'

package/scripts/prepublishOnly.js

@@ -62,8 +62,8 @@ function processFile(filePath) {
   const newSource = typeof result === 'object' && result.code ? result.code : result
   fs.writeFileSync(filePath, newSource)
 
-  // only format the file if it was changed
-  if (source !== newSource) {
+  // only format the file if it was changed (compiler returns undefined for non-Blits files)
+  if (newSource !== undefined && source !== newSource) {
     formatFileWithESLint(filePath)
   }
 }

package/scripts/prepush.js

@@ -1,10 +1,6 @@
 /*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast
- *
- * Licensed under the Apache License, Version 2.0 (the License);
+ * Copyright 2025 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
  *
@@ -15,6 +11,8 @@
  * 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
  */
 
 import { execSync } from 'child_process'

package/src/application.js

@@ -78,7 +78,7 @@ const Application = (config) => {
     keyDownHandler = async (e) => {
       const currentTime = performance.now()
 
-      const key = keyMap[e.key] || keyMap[e.keyCode] || e.key || e.keyCode
+      const key = keyMap[e.keyCode] || e.keyCode
       const sameKey = lastInputKey === key
       lastInputKey = key
       // execute immediately when no throttle is specified or event is internal (bubbled up by focus manager)

package/src/components/Circle.js

@@ -27,9 +27,7 @@ export default () =>
           'parent',
           'rotation',
           'w',
-          'width',
           'h',
-          'height',
           'x',
           'y',
           'z',

package/src/components/FPScounter.js

@@ -29,9 +29,7 @@ export const FPScounter = Blits.Component('FPScounter', {
         'parent',
         'rotation',
         'w',
-        'width',
         'h',
-        'height',
         'x',
         'y',
         'z',

package/src/components/RouterView.js

@@ -36,9 +36,7 @@ export default () =>
             'parent',
             'rotation',
             'w',
-            'width',
             'h',
-            'height',
             'x',
             'y',
             'z',

package/src/components/Sprite.js

@@ -29,9 +29,7 @@ export default () =>
           'parent',
           'rotation',
           'w',
-          'width',
           'h',
-          'height',
           'x',
           'y',
           'z',

package/src/constants.js

@@ -1,3 +1,20 @@
+/*
+ * 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
+ */
+
 export const DEFAULT_HOLD_TIMEOUT_MS = 50
 
 export const DEFAULT_KEYMAP = {

package/src/engine.js

@@ -1 +1,18 @@
+/*
+ * 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
+ */
+
 export { L3 as default } from './engines/index.js'

package/src/engines/L3/element.js

@@ -222,9 +222,6 @@ const propsTransformer = {
       this.element.component[symbols.holder].set('w', parsed)
     }
   },
-  set width(v) {
-    this.w = v
-  },
   set h(v) {
     const parsed = parsePercentage.call(this, v, 'h')
     this.props['h'] = parsed
@@ -236,9 +233,6 @@ const propsTransformer = {
       this.element.component[symbols.holder].set('h', parsed)
     }
   },
-  set height(v) {
-    this.h = v
-  },
   set x(v) {
     this.props['x'] = parsePercentage.call(this, v, 'w')
   },

package/src/engines/L3/fontLoader.js

@@ -1,3 +1,20 @@
+/*
+ * 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
+ */
+
 import Settings from '../../settings.js'
 import { renderer } from './launch.js'
 

package/src/engines/L3/index.js

@@ -1,3 +1,20 @@
+/*
+ * 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
+ */
+
 import Element from './element.js'
 import Launch from './launch.js'
 

package/src/engines/L3/shaderLoader.js

@@ -1,3 +1,20 @@
+/*
+ * Copyright 2024 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
+ */
+
 import Settings from '../../settings.js'
 import { renderer } from './launch.js'
 import * as webglShaders from '@lightningjs/renderer/webgl/shaders'

package/src/engines/index.js

@@ -1 +1,18 @@
+/*
+ * 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
+ */
+
 export { default as L3 } from './L3/index.js'

package/src/helpers/fetchJson.js

@@ -1,10 +1,6 @@
 /*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2020 Metrological
- *
- * Licensed under the Apache License, Version 2.0 (the License);
+ * Copyright 2024 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
  *
@@ -15,6 +11,8 @@
  * 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
  */
 
 export default (file) => {

package/src/lib/lifecycle.js

@@ -31,8 +31,8 @@ const states = [
   'ready', // fired when component instantiated, reactivity setup done and template spawned
   'focus', // fired when receiving focus (can occur multiple times)
   'unfocus', // fired when losing focus (can occur multiple times)
-  'hover', // fired when receiving focus (can occur multiple times)
-  'unhover', // fired when losing focus (can occur multiple times)
+  'hover', // fired when pointer enters the component (mouse support only; can occur multiple times)
+  'unhover', // fired when pointer leaves the component (mouse support only; can occur multiple times)
   'destroy', // fired when component is destroyed and removed
   'attach', // fired when entering the viewport margin and attached to the render tree
   'detach', // fired when leaving the viewport margin and detached from the render tree

package/src/lib/reactivityguard/computedprops.js

@@ -293,24 +293,38 @@ export default (code) => {
 const extractThisReferences = (funcBody) => {
   const thisRefs = new Set()
 
-  // Find all this.X references, but exclude method calls
-  const refRegex = /this\.\w+(?!\s*\()/g // matches this.X but not this.X() or this.X.Y()
+  // Match full property chains, including optional chaining
+  const refRegex = /this(?:\.[$\w]+|\?\.[$\w]+)+/g
   let refMatch
 
   while ((refMatch = refRegex.exec(funcBody)) !== null) {
     const fullRef = refMatch[0]
 
-    // Extract just the variable part (this.X)
-    // We need to avoid method calls or chained methods
-    const varRef = fullRef.split('.').slice(0, 2).join('.')
-
-    // Don't add if it's part of a method call
-    if (
-      !funcBody
-        .substring(refMatch.index)
-        .match(new RegExp(`^${varRef.replace(/\./g, '\\.')}\\s*\\(`))
-    ) {
-      thisRefs.add(varRef)
+    const segmentRegex = /(\??\.)([$\w]+)/g
+    let segMatch
+    let lastValidRef = 'this'
+
+    while ((segMatch = segmentRegex.exec(fullRef.substring(4))) !== null) {
+      const candidate = 'this' + fullRef.substring(4, 4 + segMatch.index + segMatch[0].length)
+      const afterCandidate = funcBody.substring(refMatch.index + candidate.length)
+      if (afterCandidate.match(/^\s*\(/)) {
+        break
+      }
+      lastValidRef = candidate
+    }
+
+    if (lastValidRef !== 'this') {
+      thisRefs.add(lastValidRef)
+    }
+  }
+
+  // Remove shorter prefixes when a longer chain already covers them
+  for (const ref of [...thisRefs]) {
+    for (const other of thisRefs) {
+      if (other !== ref && other.startsWith(ref + '.')) {
+        thisRefs.delete(ref)
+        break
+      }
     }
   }
 

package/src/lib/symbols.js

@@ -1,3 +1,20 @@
+/*
+ * 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
+ */
+
 /**
  * Symbol registry for internal framework properties and generated code.
  *

package/src/lib/utils.js

@@ -1,3 +1,20 @@
+/*
+ * 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
+ */
+
 /**
  * A mapping of common screen resolution names to their scale factors relative to 1080p (Full HD).
  *

package/src/plugin.js

@@ -1,3 +1,20 @@
+/*
+ * Copyright 2024 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
+ */
+
 import log from './plugins/log.js'
 
 export const plugins = {

package/src/plugins/storage/localCookie.js

@@ -1,10 +1,6 @@
 /*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2019 Metrological
- *
- * Licensed under the Apache License, Version 2.0 (the License);
+ * Copyright 2025 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
  *
@@ -15,6 +11,8 @@
  * 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
  */
 
 // LocalStorage and Cookie storage library

package/vite/inject-dev-config.js

@@ -1,3 +1,20 @@
+/*
+ * Copyright 2025 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
+ */
+
 export default function injectDevFlag() {
   return {
     name: 'inject-dev-config',