@lightningjs/blits 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## v1.5.0
+
+_1 oct 2024_
+
+- Fixed issue with interupting running / scheduled transitions with a new transition on the same prop
+- Fixed issue with (incompatible) SDF text renderer being loaded when `renderMode` is set to convas
+- Added support for handling key release (i.e `keyup`) events
+
+## v1.4.3
+
+_26 sept 2024_
+
+- Fixed issues with sprites in minified production build
+- Bumped renderer to v2.2.0  (with fixes for nested alpha / show issue)
+- Fixed reactivity in plugins not using reactivity mode setting
+- Fixed named slots functionality
+
 ## v1.4.2
 
 _24 sept 2024_

package/docs/components/user_input.md

@@ -1,7 +1,6 @@
 # Handling User Input
 
-In order to allow users to interact with your app, you will want to capture and handle _user input_. If you are developing a TV based app this will
-often be key input via a remote control.
+In order to allow users to interact with your app, you will want to capture and handle _user input_. If you are developing a TV based app this will often be key input via a remote control.
 
 Blits offers an intuitive and straightforward interface to handle key input in Components.
 
@@ -73,6 +72,53 @@ When a component handles a key press by having a corresponding function specifie
 }
 ```
 
+## Key-up handling
+
+The functions specified in the `input` configuration are invoked when a key is _pressed down_ (i.e. the `keydown` event listener). But sometimes you may also want to execute some logic when a key is _released_ (i.e. the `keyup` event listener).
+
+Instead of introducing a separate key on the Component configuration object for key release callbacks, Blits relies on the concept that a `keyup` event is always preceeded by a `keydown` event.
+
+Following this logic, whenever you return a function in an input (key down) handler, this function will be executed upon release (i.e. the `keyup` event) of that key .
+
+When an input key is being a hold down, it will execute the key down handler multipe times. Upon key release, only the last returned key up callback function will be executed.
+
+
+```javascript
+Blits.Component('MyComponemnt', {
+  //
+  input: {
+    enter() {
+      // execute logic on key down
+      this.pressedEnter = true
+      return () => {
+        // execute logic on key up
+        this.pressedEnter = false
+      }
+    },
+    space(e) {
+      // not logic on key down
+      return () => {
+        // only execute logic on key up
+        console.log('Space key released')
+      }
+    },
+    left() {
+      // some logic on key down here ..
+      this.leftHold = true
+      // return a reference to a Component method
+      // (instead of creating a new function on the fly)
+      return this.leftKeyUp
+    }
+  },
+  methods: {
+    leftKeyUp() {
+      console.log('Left key up')
+      this.leftHold = false
+    }
+  }
+}
+```
+
 ## Custom Keycode mapping
 
 Blits comes with a default keycode mapping. This mapping is a sensible default that works in your desktop browser and with most RDK based devices.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.0.2",
-    "@lightningjs/renderer": "^2.1.2",
+    "@lightningjs/renderer": "^2.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",
     "ora": "^7.0.1",

package/src/application.js

@@ -16,7 +16,7 @@
  */
 
 import Component from './component.js'
-import Focus from './focus.js'
+import { default as Focus, keyUpCallbacks } from './focus.js'
 import Settings from './settings.js'
 
 import symbols from './lib/symbols.js'
@@ -65,7 +65,12 @@ const Application = (config) => {
       }, Settings.get('holdTimeout', DEFAULT_HOLD_TIMEOUT_MS))
     }
 
-    keyUpHandler = () => {
+    keyUpHandler = (e) => {
+      const cb = keyUpCallbacks.get(e.code)
+      if (cb !== undefined && typeof cb === 'function') {
+        keyUpCallbacks.delete(e.code)
+        cb()
+      }
       clearTimeout(holdTimeout)
       Focus.hold = false
     }

package/src/engines/L3/element.js

@@ -268,7 +268,7 @@ const Element = {
 
     this.props.element = this
 
-    this.props['parent'] = this.config.parent
+    this.props['parent'] = props['parent'] || this.config.parent
     delete props.parent
 
     this.props.raw = data
@@ -305,7 +305,7 @@ const Element = {
       })
     }
 
-    // if (this.component && this.component.___layout) {
+    // if (this.component !== undefined && '___layout' in this.component) {
     //   this.node.on('loaded', () => {
     //     this.component.___layout()
     //   })
@@ -344,16 +344,17 @@ const Element = {
     // }
   },
   animate(prop, value, transition) {
+    // check if a transition is already scheduled to run on the same prop
+    // and cancels it if it does
+    if (
+      this.scheduledTransitions[prop] !== undefined &&
+      this.scheduledTransitions[prop].f.state === 'scheduled'
+    ) {
+      this.scheduledTransitions[prop].f.stop()
+    }
+
     // if current value is the same as the value to animate to, instantly resolve
     if (this.node[prop] === value) return
-    // check if a transition is already scheduled or running on the same prop
-    if (this.scheduledTransitions[prop]) {
-      if (this.scheduledTransitions[prop].f.state === 'running') {
-        // fastforward to final value
-        this.node[prop] = this.scheduledTransitions[prop].v
-        // this.scheduledTransitions[prop].f.stop()
-      }
-    }
 
     const props = {}
     props[prop] = value
@@ -382,7 +383,6 @@ const Element = {
     // removed if another transition for the same prop starts in the mean time
     this.scheduledTransitions[prop] = {
       v: props[prop],
-      cancel: false,
       f,
     }
 
@@ -395,7 +395,7 @@ const Element = {
 
     f.once('stopped', () => {
       // remove the prop from scheduled transitions
-      this.scheduledTransitions[prop] = null
+      this.scheduledTransitions[prop] = undefined
       // fire transition end callback when animation ends (if specified)
       if (transition.end && typeof transition.end === 'function') {
         transition.end.call(this.component, this, prop, this.node[prop])

package/src/engines/L3/launch.js

@@ -35,6 +35,13 @@ const renderEngine = (settings) => {
   if (renderMode === 'canvas') return CanvasCoreRenderer
 }
 
+const textRenderEngines = (settings) => {
+  const renderMode = 'renderMode' in settings ? settings.renderMode : 'webgl'
+
+  if (renderMode === 'webgl') return [SdfTextRenderer, CanvasTextRenderer]
+  if (renderMode === 'canvas') return [CanvasTextRenderer]
+}
+
 export default (App, target, settings = {}) => {
   renderer = new RendererMain(
     {
@@ -57,7 +64,7 @@ export default (App, target, settings = {}) => {
       txMemByteThreshold:
         'gpuMemoryLimit' in settings ? settings.gpuMemoryLimit * 1024 * 1024 : 200 * 1024 * 1024,
       renderEngine: renderEngine(settings),
-      fontEngines: [SdfTextRenderer, CanvasTextRenderer],
+      fontEngines: textRenderEngines(settings),
     },
     target
   )

package/src/focus.js

@@ -24,6 +24,8 @@ let focusedComponent = null
 let focusChain = []
 let setFocusTimeout
 
+export const keyUpCallbacks = new Map()
+
 export default {
   _hold: false,
   set hold(v) {
@@ -60,10 +62,14 @@ export default {
     const componentWithInputEvent = focusChain.shift()
 
     if (componentWithInputEvent) {
+      let cb
       if (componentWithInputEvent[symbols.inputEvents][key]) {
-        componentWithInputEvent[symbols.inputEvents][key].call(componentWithInputEvent, event)
+        cb = componentWithInputEvent[symbols.inputEvents][key].call(componentWithInputEvent, event)
       } else if (componentWithInputEvent[symbols.inputEvents].any) {
-        componentWithInputEvent[symbols.inputEvents].any.call(componentWithInputEvent, event)
+        cb = componentWithInputEvent[symbols.inputEvents].any.call(componentWithInputEvent, event)
+      }
+      if (cb !== undefined) {
+        keyUpCallbacks.set(event.code, cb)
       }
     }
   },

package/src/lib/codegenerator/generator.js

@@ -91,7 +91,7 @@ const generateElementCode = function (
   Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
-        elementConfig${counter}['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || component[Symbol.for('slots')][0] || parent
+        elementConfig${counter}['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
       `)
     }
 
@@ -258,6 +258,7 @@ const generateComponentCode = function (
   }
   // if (!options.forloop) {
   //   renderCode.push(`
+  //     // console.log('here', component, rootComponent)
   //   component = rootComponent
   // `)
   // }

package/src/lib/reactivity/reactive.js

@@ -15,6 +15,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { ImageTexture } from '@lightningjs/renderer'
 import { track, trigger, pauseTracking, resumeTracking } from './effect.js'
 import symbols from '../symbols.js'
 
@@ -32,7 +33,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
   // is assigned to a state variable
   if (typeof original === 'object') {
     if (original[symbols.id] !== undefined) return original
-    if (original.constructor.name === '_ImageTexture') return original
+    if (original.constructor.name === ImageTexture.name) return original
   }
 
   // if original object is already a proxy, don't create a new one but return the existing one instead

package/src/plugins/appstate.js

@@ -16,10 +16,11 @@
  */
 
 import { reactive } from '../lib/reactivity/reactive'
+import Settings from '../settings.js'
 
 export default {
   name: 'appState',
   plugin(state = {}) {
-    return reactive(state)
+    return reactive(state, Settings.get('reactivityMode'))
   },
 }

package/src/plugins/language.js

@@ -19,16 +19,21 @@ import fetchJson from '../helpers/fetchJson'
 import { Log } from '../lib/log'
 import { reactive } from '../lib/reactivity/reactive'
 
+import Settings from '../settings.js'
+
 export default {
   name: 'language',
   plugin(options = {}) {
     let translations = {}
     let dictionary = {}
 
-    const state = reactive({
-      language: '',
-      loaded: 0,
-    })
+    const state = reactive(
+      {
+        language: '',
+        loaded: 0,
+      },
+      Settings.get('reactivityMode')
+    )
 
     const setLanguage = (language) => {
       // define the dictionary

package/src/plugins/theme.js

@@ -18,6 +18,8 @@
 import { Log } from '../lib/log'
 import { reactive } from '../lib/reactivity/reactive.js'
 
+import Settings from '../settings.js'
+
 const getValueByDotNotation = (obj, base, path) => {
   const keys = path.split('.')
 
@@ -46,9 +48,12 @@ export default {
   plugin(config = {}) {
     let themeMap = {}
 
-    const state = reactive({
-      current: 'default',
-    })
+    const state = reactive(
+      {
+        current: 'default',
+      },
+      Settings.get('reactivityMode')
+    )
 
     let themes = {}
     let base = null