@lightningjs/blits 1.3.1 → 1.4.0

package/src/component/base/methods.js

@@ -23,6 +23,15 @@ import { Log } from '../../lib/log.js'
 
 export default {
   focus: {
+    value: function (e) {
+      Log.warn('this.focus is deprecated, use this.$focus instead')
+      return this.$focus(e)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $focus: {
     value: function (e) {
       this[symbols.state].hasFocus = true
       Focus.set(this, e)
@@ -54,6 +63,15 @@ export default {
     configurable: false,
   },
   select: {
+    value: function (ref) {
+      Log.warn('this.select is deprecated, use this.$select instead')
+      return this.$select(ref)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $select: {
     value: function (ref) {
       let selected = null
       this[symbols.children].forEach((child) => {
@@ -77,8 +95,8 @@ export default {
   },
   trigger: {
     value: function (key) {
-      // trigger with force set to true
-      trigger(this[symbols.originalState], key, true)
+      Log.warn('this.trigger is deprecated, use this.$trigger instead')
+      return this.$trigger(key)
     },
     writable: false,
     enumerable: true,
@@ -86,8 +104,17 @@ export default {
   },
   $trigger: {
     value: function (key) {
-      Log.warn('this.$trigger is deprecated, use this.trigger instead')
-      return this.trigger(key)
+      let target = this[symbols.originalState]
+      // when dot notation used, find the nested target
+      if (key.indexOf('.') > -1) {
+        const keys = key.split('.')
+        key = keys.pop(keys)
+        for (let i = 0; i < keys.length; i++) {
+          target = target[keys[i]]
+        }
+      }
+      // trigger with force set to true
+      trigger(target, key, true)
     },
     writable: false,
     enumerable: true,

package/src/component.d.ts

@@ -265,7 +265,9 @@ declare namespace Component {
     /**
     * Listen to events emitted by other components
     */
-    $listen: (event: string, callback: (args: any) => void) => void
+    $listen: {
+      (event: string, callback: (args: any) => void, priority?: number): void;
+    }
 
     /**
     * Emit events that other components can listen to
@@ -300,6 +302,11 @@ declare namespace Component {
     /**
     * Set focus to the Component, optionally pass a KeyboardEvent for instant event bubbling
     */
+    $focus: (event?: KeyboardEvent) => void
+    /**
+     * @deprecated
+     * Deprecated:  use `this.$focus()` instead
+     */
     focus: (event?: KeyboardEvent) => void
 
     /**
@@ -317,6 +324,12 @@ declare namespace Component {
     * }
     * ```
     */
+    $select: (ref: string) => ComponentInstance | ElementInstance
+
+    /**
+     * @deprecated
+     * Deprecated: use `this.$select()` instead
+     */
     select: (ref: string) => ComponentInstance | ElementInstance
 
     /**
@@ -345,6 +358,7 @@ declare namespace Component {
 
   export interface ElementInstance {
     focus?: () => void
+    $focus?: () => void
   }
 
   export interface ComponentConfig<Props extends string, S, M> {

package/src/component.js

@@ -171,11 +171,24 @@ 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) => {
-        let old = this[watchKey]
+        let target = this
+        let key = watchKey
+        // when dot notation used, find the nested target
+        if (watchKey.indexOf('.') > -1) {
+          const keys = watchKey.split('.')
+          key = keys.pop()
+          for (let i = 0; i < keys.length; i++) {
+            target = target[keys[i]]
+          }
+        }
+
+        let old = this[key]
+
         effect((force = false) => {
-          if (old !== this[watchKey] || force === true) {
-            this[symbols.watchers][watchKey].apply(this, [this[watchKey], old])
-            old = this[watchKey]
+          const newValue = target[key]
+          if (old !== newValue || force === true) {
+            this[symbols.watchers][watchKey].apply(this, [newValue, old])
+            old = newValue
           }
         })
       })

package/src/components/Layout.js

@@ -37,7 +37,7 @@ export default () => {
       ___layout() {
         let offset = 0
 
-        this.select('slot').children.forEach((el) => {
+        this.$select('slot').children.forEach((el) => {
           el.set(this.direction === 'vertical' ? 'y' : 'x', offset)
           // todo: grab width from interface, not directly from node
           offset +=

package/src/components/Layout.orig.js

@@ -22,7 +22,7 @@ export default () => {
       ___layout() {
         let offset = 0
 
-        this.select('slot').children.forEach((el) => {
+        this.$select('slot').children.forEach((el) => {
           el.set(this.direction === 'vertical' ? 'y' : 'x', offset)
           // todo: grab width from interface, not directly from node
           offset +=

package/src/components/RouterView.js

@@ -55,7 +55,7 @@ export default () =>
         window.removeEventListener('hashchange', handler, false)
       },
       focus() {
-        this.activeView && this.activeView.focus()
+        this.activeView && this.activeView.$focus()
       },
     },
     input: {

package/src/components/RouterView.orig.js

@@ -40,7 +40,7 @@ export default () =>
         window.removeEventListener('hashchange', handler, false)
       },
       focus() {
-        this.activeView && this.activeView.focus()
+        this.activeView && this.activeView.$focus()
       },
     },
     input: {

package/src/engines/L3/element.js

@@ -125,6 +125,28 @@ const propsTransformer = {
       this.props['color'] = 0xffffffff
     }
   },
+  set fit(v) {
+    const resizeMode = {}
+
+    if (v === 'cover' || v === 'contain') {
+      this.props['textureOptions'] = { resizeMode: { type: v } }
+      return
+    }
+
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      resizeMode['type'] = v.type || 'cover'
+
+      if (typeof v.position === 'number') {
+        resizeMode['clipY'] = resizeMode['clipX'] = v.position
+      }
+
+      if (typeof v.position === 'object') {
+        resizeMode['clipX'] = 'x' in v.position === true ? v.position.x : null
+        resizeMode['clipY'] = 'y' in v.position === true ? v.position.y : null
+      }
+      this.props['textureOptions'] = { resizeMode }
+    }
+  },
   set rtt(v) {
     this.props['rtt'] = v
     if (v === true && this.raw['color'] === undefined) {
@@ -183,6 +205,11 @@ const propsTransformer = {
     }
   },
   set effects(v) {
+    for (let i = 0; i < v.length; i++) {
+      if (v[i].props && v[i].props.color) {
+        v[i].props.color = colors.normalize(v[i].props.color)
+      }
+    }
     this.props['shader'] = renderer.createShader('DynamicShader', {
       effects: v,
     })

package/src/engines/L3/element.test.js

@@ -159,6 +159,118 @@ test('Element - Set `texture` property', (assert) => {
   assert.end()
 })
 
+test('Element - Set `fit` property with a string type value', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  const fitVal = 'contain'
+  el.set('fit', fitVal)
+
+  assert.ok(el.node['textureOptions'] instanceof Object, 'textureOptions should be an object')
+  assert.ok(
+    el.node['textureOptions']['resizeMode'] instanceof Object,
+    'resizeMode should be an object'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['type'],
+    fitVal,
+    'Node resizeMode "type" parameter should be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['type'],
+    fitVal,
+    'Props textureOptions parameter should be set'
+  )
+  assert.equal(el.props.raw.get('fit'), fitVal, "Props' raw map entry should be added")
+  assert.end()
+})
+
+test('Element - Set `fit` property with an object type value', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  const fitVal = "{type: 'cover', position: {x: 0, y:1}}"
+  el.set('fit', fitVal)
+
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Node resizeMode "type" parameter should be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Props textureOptions parameter should be set'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['clipX'],
+    0,
+    'Node resizeMode "clipX" parameter should be set to correct value'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['clipY'],
+    1,
+    'Node resizeMode "clipY" parameter should be set to correct value'
+  )
+  assert.equal(el.props.raw.get('fit'), fitVal, "Props' raw map entry should be added")
+  assert.end()
+})
+
+test('Element - Set `fit` property with position key as a string type value', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  const fitVal = "{type: 'cover', position: 1}"
+  el.set('fit', fitVal)
+
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Node resizeMode "type" parameter should be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Props textureOptions parameter should be set'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['clipX'],
+    1,
+    'Node resizeMode "clipX" parameter should be set to correct value'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['clipY'],
+    1,
+    'Node resizeMode "clipY" parameter should be set to correct value'
+  )
+  assert.equal(el.props.raw.get('fit'), fitVal, "Props' raw map entry should be added")
+  assert.end()
+})
+
+test('Element - Set `fit` property should not set not required keys', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  const fitVal = "{type: 'cover', dummy1: 0, dummy2: 0}"
+  el.set('fit', fitVal)
+
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Node resizeMode "type" parameter should be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['dummy1'],
+    undefined,
+    'Props resizeMode "dummy1" parameter should not be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['dummy2'],
+    undefined,
+    'Props resizeMode "dummy2" parameter should not be set'
+  )
+  assert.end()
+})
 function createElement() {
   const el = element({}, {})
   el.populate({

package/src/engines/L3/launch.js

@@ -16,6 +16,9 @@
  */
 
 import { RendererMain } from '@lightningjs/renderer'
+import { WebGlCoreRenderer, SdfTextRenderer } from '@lightningjs/renderer/webgl'
+import { CanvasCoreRenderer, CanvasTextRenderer } from '@lightningjs/renderer/canvas'
+
 import { Log } from '../../lib/log.js'
 import { SCREEN_RESOLUTIONS } from '../../constants.js'
 import colors from '../../lib/colors/colors.js'
@@ -24,17 +27,14 @@ import shaderLoader from './shaderLoader.js'
 
 export let renderer = {}
 
-export default (App, target, settings = {}) => {
-  if ('fontLoader' in settings) {
-    Log.warn(
-      `
+const renderEngine = (settings) => {
+  const renderMode = 'renderMode' in settings ? settings.renderMode : 'webgl'
 
-Starting version 0.9.0 of Blits, the Launch setting \`fontLoader\` is not supported / required anymore.
-You can remove the option from your \`src/index.js\`-file. And you can safely remove the file \`src/fontLoader.js\` from your project.
-      `
-    )
-  }
+  if (renderMode === 'webgl') return WebGlCoreRenderer
+  if (renderMode === 'canvas') return CanvasCoreRenderer
+}
 
+export default (App, target, settings = {}) => {
   renderer = new RendererMain(
     {
       appWidth: settings.w || 1920,
@@ -55,7 +55,8 @@ You can remove the option from your \`src/index.js\`-file. And you can safely re
       // gpu memory limit, converted from mb to bytes - defaults to 200mb
       txMemByteThreshold:
         'gpuMemoryLimit' in settings ? settings.gpuMemoryLimit * 1024 * 1024 : 200 * 1024 * 1024,
-      renderMode: 'renderMode' in settings ? settings.renderMode : 'webgl',
+      renderEngine: renderEngine(settings),
+      fontEngines: [SdfTextRenderer, CanvasTextRenderer],
     },
     target
   )

package/src/lib/codegenerator/generator.js

@@ -300,6 +300,14 @@ const generateForLoopCode = function (templateObject, parent) {
     ctx.renderCode.push(`parent = ${parent}`)
   }
 
+  const indexRegex = new RegExp(`\\$${index}(?!['\\w])`)
+  const indexResult = indexRegex.exec(key)
+  if (Array.isArray(indexResult)) {
+    ctx.renderCode.push(
+      `console.warn(" Using '${index}' in the key, like key=${key},  is not recommended")`
+    )
+  }
+
   const forStartCounter = counter
 
   ctx.renderCode.push(`
@@ -310,6 +318,7 @@ const generateForLoopCode = function (templateObject, parent) {
       let l = rawCollection.length
       while(l--) {
         const ${item} = rawCollection[l]
+        const ${index} = l
         keys.add('' +  ${interpolate(key, '') || 'l'})
       }
   `)

package/src/lib/eventListeners.js

@@ -16,40 +16,66 @@
  */
 
 const eventsMap = new Map()
+const callbackCache = new Map()
 
 export default {
-  registerListener(component, event, cb) {
+  registerListener(component, event, cb, priority = 0) {
     let componentsMap = eventsMap.get(event)
-    if (!componentsMap) {
+    if (componentsMap === undefined) {
       componentsMap = new Map()
       eventsMap.set(event, componentsMap)
     }
 
     let components = componentsMap.get(component)
-    if (!components) {
+    if (components === undefined) {
       components = new Set()
       componentsMap.set(component, components)
     }
 
-    components.add(cb)
+    components.add({ cb, priority })
+    callbackCache.delete(event) // Invalidate the callbackCache when a new callback is added
   },
+
   executeListeners(event, params) {
     const componentsMap = eventsMap.get(event)
-    if (componentsMap) {
-      componentsMap.forEach((component) => {
-        component.forEach((cb) => {
-          cb(params)
-        })
-      })
+    if (componentsMap === undefined || componentsMap.size === 0) {
+      return true // No listeners, so execution can be considered successful
+    }
+
+    if (callbackCache.has(event) === false) {
+      const allCallbacks = []
+      for (const [component, components] of componentsMap) {
+        for (const callbackObj of components) {
+          allCallbacks.push({ ...callbackObj, component })
+        }
+      }
+      allCallbacks.sort((a, b) => b.priority - a.priority)
+      callbackCache.set(event, allCallbacks) // callbackCache the sorted callbacks with component context
     }
+
+    const callbacks = callbackCache.get(event)
+    for (let i = 0; i < callbacks.length; i++) {
+      const { cb, component } = callbacks[i]
+      const result = cb.call(component, params)
+      if (result === false) {
+        return false // Stop propagation if any listener returns false
+      }
+    }
+
+    return true // All listeners executed without stopping propagation
   },
+
   removeListeners(component) {
-    eventsMap.forEach((componentMap) => {
-      const cmp = componentMap.get(component)
-      if (cmp) {
-        cmp.clear()
-        componentMap.delete(cmp)
+    for (const [event, componentsMap] of eventsMap) {
+      if (componentsMap.has(component)) {
+        componentsMap.delete(component)
+        callbackCache.delete(event) // Invalidate the callbackCache for this event
+
+        // If no more components for this event, remove the event entirely
+        if (componentsMap.size === 0) {
+          eventsMap.delete(event)
+        }
       }
-    })
+    }
   },
 }

package/src/lib/eventListeners.test.js

@@ -0,0 +1,185 @@
+/*
+ * 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 test from 'tape'
+import eventListener from './eventListeners.js'
+
+const resetModule = () => {
+  eventListener.removeListeners('testComponent')
+  eventListener.removeListeners('anotherComponent')
+}
+
+test('registerListener', (t) => {
+  resetModule()
+
+  const component = 'testComponent'
+  const event = 'testEvent'
+  const cb = () => {}
+
+  t.doesNotThrow(
+    () => eventListener.registerListener(component, event, cb),
+    'Should not throw exception when registering a listener'
+  )
+
+  t.doesNotThrow(
+    () => eventListener.registerListener(component, event, cb, 1),
+    'Should not throw exception when registering a listener with priority'
+  )
+
+  t.doesNotThrow(
+    () => eventListener.registerListener('anotherComponent', event, cb),
+    'Should not throw exception when registering multiple components for the same event'
+  )
+
+  t.end()
+})
+
+test('executeListeners - no listeners', (t) => {
+  resetModule()
+
+  const result = eventListener.executeListeners('nonExistentEvent')
+  t.equal(result, true, 'Should return true when no listeners are registered')
+
+  t.end()
+})
+
+test('executeListeners - with listeners', (t) => {
+  resetModule()
+
+  const component = 'testComponent'
+  const event = 'testEvent'
+  let callCount = 0
+  const cb1 = () => {
+    callCount++
+  }
+  const cb2 = () => {
+    callCount++
+  }
+
+  eventListener.registerListener(component, event, cb1)
+  eventListener.registerListener(component, event, cb2)
+
+  const result = eventListener.executeListeners(event)
+  t.equal(result, true, 'Should return true when all listeners execute successfully')
+  t.equal(callCount, 2, 'Should call all registered callbacks')
+
+  t.end()
+})
+
+test('executeListeners - priority order', (t) => {
+  resetModule()
+
+  const component = 'testComponent'
+  const event = 'testEvent'
+  const order = []
+  const cb1 = () => {
+    order.push(1)
+  }
+  const cb2 = () => {
+    order.push(2)
+  }
+  const cb3 = () => {
+    order.push(3)
+  }
+
+  eventListener.registerListener(component, event, cb1, 1)
+  eventListener.registerListener(component, event, cb2, 3)
+  eventListener.registerListener(component, event, cb3, 2)
+
+  eventListener.executeListeners(event)
+  t.deepEqual(order, [2, 3, 1], 'Should execute callbacks in priority order')
+
+  t.end()
+})
+
+test('executeListeners - stop propagation', (t) => {
+  resetModule()
+
+  const component = 'testComponent'
+  const event = 'testEvent'
+  let callCount = 0
+  const cb1 = () => {
+    callCount++
+    return false
+  }
+  const cb2 = () => {
+    callCount++
+  }
+
+  eventListener.registerListener(component, event, cb1)
+  eventListener.registerListener(component, event, cb2)
+
+  const result = eventListener.executeListeners(event)
+  t.equal(result, false, 'Should return false when propagation is stopped')
+  t.equal(callCount, 1, 'Should stop calling callbacks after one returns false')
+
+  t.end()
+})
+
+test('removeListeners', (t) => {
+  resetModule()
+
+  const component = 'testComponent'
+  const event1 = 'testEvent1'
+  const event2 = 'testEvent2'
+  const cb = () => {}
+
+  eventListener.registerListener(component, event1, cb)
+  eventListener.registerListener(component, event2, cb)
+  eventListener.registerListener('anotherComponent', event1, cb)
+
+  eventListener.removeListeners(component)
+
+  const result1 = eventListener.executeListeners(event1)
+  t.equal(result1, true, 'Should still return true for event1 as another component is registered')
+
+  const result2 = eventListener.executeListeners(event2)
+  t.equal(result2, true, 'Should return true for event2 as no listeners remain')
+
+  t.end()
+})
+
+test('cache invalidation', (t) => {
+  resetModule()
+
+  const component = 'testComponent'
+  const event = 'testEvent'
+  let callOrder = []
+  const cb1 = () => {
+    callOrder.push(1)
+  }
+  const cb2 = () => {
+    callOrder.push(2)
+  }
+
+  eventListener.registerListener(component, event, cb1)
+  eventListener.executeListeners(event)
+
+  eventListener.registerListener(component, event, cb2, 1)
+  eventListener.executeListeners(event)
+
+  t.deepEqual(callOrder, [1, 2, 1], 'Should invalidate cache when new listener is added')
+
+  callOrder = []
+  eventListener.removeListeners(component)
+  eventListener.registerListener(component, event, cb1)
+  eventListener.executeListeners(event)
+
+  t.deepEqual(callOrder, [1], 'Should invalidate cache when listeners are removed')
+
+  t.end()
+})