@lightningjs/blits 1.4.3 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+
+## v1.5.1
+
+_7 oct 2024_
+
+- Added export of symbols
+- Various small performance improvements related to component creation
+
+## v1.5.0
+
+_1 oct 2024_
+
+- Fixed issue with interrupting 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 canvas
+- Added support for handling key release (i.e `keyup`) events
+
 ## v1.4.3
 
 _26 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/docs/plugins/language.md

@@ -121,7 +121,7 @@ Blits.Component('MyComponent', {
 
 ## Getting the current language
 
-The current language can be retrieved via the `this.$language.get()` method. It will return the currently set language code.
+The current language can be retrieved via the `this.$languagelanguage` property. It will return the currently set language code.
 
 ## Translating
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.4.3",
+  "version": "1.5.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -8,7 +8,8 @@
     "./vite": "./vite/index.js",
     "./transitions": "./src/router/transitions/index.js",
     "./precompiler": "./src/lib/precompiler/precompiler.js",
-    "./plugins": "./src/plugins/index.js"
+    "./plugins": "./src/plugins/index.js",
+    "./symbols": "./src/lib/symbols.js"
   },
   "scripts": {
     "test": "c8 npm run test:run",
@@ -47,7 +48,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.0.2",
-    "@lightningjs/renderer": "^2.2.0",
+    "@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/component/setup/props.js

@@ -29,20 +29,23 @@ export default (component, props = []) => {
     props.push('ref')
   }
   component[symbols.propKeys] = []
-  props.forEach((prop) => {
-    prop = { ...baseProp, ...(typeof prop === 'object' ? prop : { key: prop }) }
+
+  const propsLength = props.length
+
+  for (let i = 0; i < propsLength; i++) {
+    const prop = { ...baseProp, ...(typeof props[i] === 'object' ? props[i] : { key: props[i] }) }
     component[symbols.propKeys].push(prop.key)
     Object.defineProperty(component, prop.key, {
       get() {
         const value = prop.cast(
-          this[symbols.props] && prop.key in this[symbols.props]
+          this[symbols.props] !== undefined && prop.key in this[symbols.props]
             ? this[symbols.props][prop.key]
             : 'default' in prop
             ? prop.default
             : undefined
         )
 
-        if (prop.required && value === undefined) {
+        if (prop.required === true && value === undefined) {
           Log.warn(`${prop.key} is required`)
         }
 
@@ -53,5 +56,5 @@ export default (component, props = []) => {
         this[symbols.props][prop.key] = v
       },
     })
-  })
+  }
 }

package/src/component/setup/state.js

@@ -27,13 +27,23 @@ export default (component, state = () => {}) => {
     writable: false,
   })
 
-  const stateKeys = Object.keys(state.apply(component) || {}).concat(['hasFocus'])
+  const stateKeys = Object.keys(state.apply(component) || {})
+  // add built-in hasFocus key
+  stateKeys.push(['hasFocus'])
+  const stateKeysLength = stateKeys.length
 
-  stateKeys.forEach((key) => {
-    if (component[symbols.propKeys] && component[symbols.propKeys].indexOf(key) > -1) {
+  for (let i = 0; i < stateKeysLength; i++) {
+    const key = stateKeys[i]
+    if (
+      component[symbols.propKeys] !== undefined &&
+      component[symbols.propKeys].indexOf(key) > -1
+    ) {
       Log.error(`State ${key} already exists as a prop`)
     }
-    if (component[symbols.methodKeys] && component[symbols.methodKeys].indexOf(key) > -1) {
+    if (
+      component[symbols.methodKeys] !== undefined &&
+      component[symbols.methodKeys].indexOf(key) > -1
+    ) {
       Log.error(`State ${key} already exists as a method`)
     }
     component[symbols.stateKeys].push(key)
@@ -44,7 +54,6 @@ export default (component, state = () => {}) => {
       set(v) {
         this[symbols.state][key] = v
       },
-      // enumerable: true,
     })
-  })
+  }
 }

package/src/component.js

@@ -51,7 +51,7 @@ const required = (name) => {
  *
  */
 const Component = (name = required('name'), config = required('config')) => {
-  let base
+  let base = undefined
 
   const component = function (opts, parentEl, parentComponent, rootComponent) {
     // generate a human readable ID for the component instance (i.e. Blits::ComponentName1)
@@ -89,11 +89,10 @@ const Component = (name = required('name'), config = required('config')) => {
 
     // apply the state function (passing in the this reference to utilize configured props)
     // and store a reference to this original state
-    // hasFocus key is sprinkled in
-    this[symbols.originalState] = {
-      ...((config.state && typeof config.state === 'function' && config.state.apply(this)) || {}),
-      ...{ hasFocus: false },
-    }
+    this[symbols.originalState] =
+      (config.state && typeof config.state === 'function' && config.state.apply(this)) || {}
+    // add hasFocus key in
+    this[symbols.originalState]['hasFocus'] = false
 
     // generate a reactive state (using the result of previously execute state function)
     // and store it
@@ -162,7 +161,6 @@ const Component = (name = required('name'), config = required('config')) => {
     // reactive bindings define in the template
     const effects = config.code.effects
     for (let i = 0; i < effects.length; i++) {
-      // console.log(config.code.effects[i].toString())
       effect(() => {
         effects[i](this, this[symbols.children], config, globalComponents, rootComponent, effect)
       })
@@ -170,12 +168,14 @@ const Component = (name = required('name'), config = required('config')) => {
 
     // setup watchers if the components has watchers specified
     if (this[symbols.watchers]) {
-      Object.keys(this[symbols.watchers]).forEach((watchKey) => {
+      const watcherkeys = Object.keys(this[symbols.watchers])
+      const watcherkeysLength = watcherkeys.length
+      for (let i = 0; i < watcherkeysLength; i++) {
         let target = this
-        let key = watchKey
+        let key = watcherkeys[i]
         // when dot notation used, find the nested target
-        if (watchKey.indexOf('.') > -1) {
-          const keys = watchKey.split('.')
+        if (key.indexOf('.') > -1) {
+          const keys = key.split('.')
           key = keys.pop()
           for (let i = 0; i < keys.length; i++) {
             target = target[keys[i]]
@@ -187,23 +187,13 @@ const Component = (name = required('name'), config = required('config')) => {
         effect((force = false) => {
           const newValue = target[key]
           if (old !== newValue || force === true) {
-            this[symbols.watchers][watchKey].apply(this, [newValue, old])
+            this[symbols.watchers][key].apply(this, [newValue, old])
             old = newValue
           }
         })
-      })
+      }
     }
 
-    // set all symbol based properties to non-enumerable and non-configurable
-    Object.getOwnPropertySymbols(this).forEach((property) => {
-      Object.defineProperties(this, {
-        [property]: {
-          enumerable: false,
-          configurable: false,
-        },
-      })
-    })
-
     // finaly set the lifecycle state to ready (in the next tick)
     setTimeout(() => (this.lifecycle.state = 'ready'))
 
@@ -214,7 +204,10 @@ const Component = (name = required('name'), config = required('config')) => {
   const factory = (options = {}, parentEl, parentComponent, rootComponent) => {
     if (Base[symbols['launched']] === false) {
       // Register user defined plugins once on the Base object (after launch)
-      Object.keys(plugins).forEach((pluginName) => {
+      const pluginKeys = Object.keys(plugins)
+      const pluginKeysLength = pluginKeys.length
+      for (let i = 0; i < pluginKeysLength; i++) {
+        const pluginName = pluginKeys[i]
         const prefixedPluginName = `$${pluginName}`
         if (prefixedPluginName in Base) {
           Log.warn(
@@ -231,7 +224,7 @@ const Component = (name = required('name'), config = required('config')) => {
           enumerable: true,
           configurable: false,
         })
-      })
+      }
 
       // register global components once
       globalComponents = components()
@@ -241,13 +234,13 @@ const Component = (name = required('name'), config = required('config')) => {
     }
 
     // setup the component once per component type, using Base as the prototype
-    if (!base) {
+    if (base === undefined) {
       Log.debug(`Setting up ${name} component`)
       base = setupComponent(Object.create(Base), config)
     }
 
     // one time code generation (only if precompilation is turned off)
-    if (!config.code) {
+    if (config.code === undefined) {
       Log.debug(`Generating code for ${name} component`)
       config.code = codegenerator.call(config, parser(config.template, name))
     }

package/src/engines/L3/element.js

@@ -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)
       }
     }
   },