@lightningjs/blits 0.6.5 → 0.6.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+# v0.6.7
+
+_26 jan 2024_
+
+- Added `this.$clearInterval` and `this.$clearTimeout` helper functions to Component
+- Updated Lightning renderer to version _0.7.0_
+- Added `lineheight` and `textoverflow` attributes to `<Text />`-component
+- Added setting for specifying maximum number of web workers to spawn (`webWorkersLimit`)
+- Added fix for issue with setting up reactivity for (initially) empty for-loops
+
+# v0.6.6
+
+_24 jan 2024_
+
+- Added temporary fix for renderer issue [#123](https://github.com/lightning-js/renderer/issues/123)
+- Fixed issue with setting mount, pivot and scale values to zero (0) in object literal with x and y key
+- Added automatic mapping of ref string to each item in a for-loop
+
 # v0.6.5
 
 _16 jan 2024_

package/boilerplate/package.json

@@ -31,6 +31,6 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
-    "@lightningjs/blits": "^0.6.5"
+    "@lightningjs/blits": "^0.6.7"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {
@@ -42,7 +42,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.6.1",
+    "@lightningjs/renderer": "^0.7.0",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
   }
 }

package/src/application.js

@@ -76,9 +76,7 @@ const Application = (config) => {
     setTimeout(() => Focus.set(this))
   }
 
-  const App = Component('App', config)
-
-  return App
+  return Component('App', config)
 }
 
 export default Application

package/src/component.js

@@ -146,6 +146,18 @@ const Component = (name = required('name'), config = required('config')) => {
         enumerable: false,
         configurable: false,
       },
+      [symbols.timeouts]: {
+        value: [],
+        writable: true,
+        enumerable: false,
+        configurable: false,
+      },
+      [symbols.intervals]: {
+        value: [],
+        writable: true,
+        enumerable: false,
+        configurable: false,
+      },
     })
 
     Object.defineProperty(this, symbols.originalState, {

package/src/components/Text.js

@@ -30,11 +30,13 @@ export default () =>
         :style="$style"
         :weight="$weight"
         letterSpacing="$letterspacing"
+        lineHeight="$_lineheight"
         stretch="$stretch"
         contain="$_contain"
         :wordWrap="$wordwrap"
         :maxLines="$maxlines"
         :textAlign="$align"
+        :overflowSuffix="$textoverflow"
         @loaded="$@loaded"
         @error="$@error"
       />`,
@@ -57,9 +59,11 @@ export default () =>
       'align',
       'wordwrap',
       'maxlines',
+      'lineheight',
       'contain',
       '@loaded',
       '@error',
+      'textoverflow',
     ],
     computed: {
       _contain() {
@@ -68,5 +72,8 @@ export default () =>
           (this.wordwrap && this.maxlines ? 'both' : this.wordwrap ? 'width' : 'none')
         )
       },
+      _lineheight() {
+        return this.lineheight !== undefined ? this.lineheight : this.size
+      },
     },
   })

package/src/element.js

@@ -51,6 +51,8 @@ const unpackTransition = (obj) => {
   return obj
 }
 
+let firstNode = false
+
 const Props = {
   set parent(v) {
     this._props.parent = v === 'root' ? renderer.root : v.node
@@ -126,11 +128,11 @@ const Props = {
   },
   set mount(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if (v.x) {
+      if ('x' in v) {
         this._props.mountX = v.x
         this._set.add('mountX')
       }
-      if (v.y) {
+      if ('y' in v) {
         this._props.mountY = v.y
         this._set.add('mountY')
       }
@@ -142,11 +144,11 @@ const Props = {
   },
   set pivot(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if (v.x) {
+      if ('x' in v) {
         this._set.add('pivotX')
         this._props.pivotX = v.x
       }
-      if (v.y) {
+      if ('y' in v) {
         this._set.add('pivotY')
         this._props.pivotY = v.y
       }
@@ -158,8 +160,8 @@ const Props = {
   },
   set scale(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if (v.x) this._props.scaleX = v.x
-      if (v.y) this._props.scaleY = v.y
+      if ('x' in v) this._props.scaleX = v.x
+      if ('y' in v) this._props.scaleY = v.y
     } else {
       this._props.scale = v
     }
@@ -199,11 +201,17 @@ const Props = {
     this._props.contain = v
   },
   set maxLines(v) {
-    this.height = v * this.element.node.fontSize
+    this.height = v * this.element.node.lineHeight
+  },
+  set overflowSuffix(v) {
+    this._props.overflowSuffix = v === false ? ' ' : v === true ? undefined : v
   },
   set letterSpacing(v) {
     this._props.letterSpacing = v
   },
+  set lineHeight(v) {
+    this._props.lineHeight = v
+  },
   set textAlign(v) {
     this._props.textAlign = v
   },
@@ -239,6 +247,13 @@ const Element = {
         this.props._set.has('src') || this.props._set.has('texture') ? 0xffffffff : 0
     }
 
+    // temporary workaround for renderer issue https://github.com/lightning-js/renderer/issues/123
+    if (!firstNode) {
+      this.props._props.src =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII='
+      firstNode = true
+    }
+
     this.node = props.__textnode
       ? renderer.createTextNode(this.props._props)
       : renderer.createNode(this.props._props)

package/src/launch.d.ts

@@ -144,7 +144,15 @@ export interface Settings {
   *
   * Defaults to 1 if not specified
   */
-  pixelRatio?: number
+  pixelRatio?: number,
+  /**
+  * 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)
+  */
+  webWorkersLimit?: number
 }
 
 /**

package/src/launch.js

@@ -46,6 +46,10 @@ export default (App, target, settings) => {
         screenResolutions[settings.screenResolution] ||
         screenResolutions[window.innerHeight] ||
         1,
+      numImageWorkers:
+        'webWorkersLimit' in settings
+          ? settings.webWorkersLimit
+          : window.navigator.hardwareConcurrency || 2,
     },
     target,
     driver

package/src/lib/codegenerator/generator.js

@@ -56,7 +56,7 @@ const generateElementCode = function (
 
   renderCode.push(`
     if(!${elm}) {
-      ${elm} = this.element({componentId: component[Symbol.for('id')], parent: parent || 'root'}, component)
+      ${elm} = this.element({parent: parent || 'root'}, component)
     }
     const elementConfig${counter} = {}
   `)
@@ -215,15 +215,29 @@ const generateForLoopCode = function (templateObject, parent) {
   ctx.renderCode.push(`
     const collection = ${cast(result[2], ':for')}
     const keys = []
+    // if array is empty push an empty object to properly set up reactivity
+    if(collection.length === 0) {
+      collection.push({})
+    }
     for(let __index = 0; __index < collection.length; __index++) {
       parent = ${parent}
       if(!component.key) keys.length = 0
       const scope = Object.assign(component, {
         key: Math.random(),
         ${index}: __index,
-        ${item}: collection[__index]
-      })
+        ${item}: collection[__index],
+    `)
+
+  if ('ref' in templateObject && templateObject.ref.indexOf('$') === -1) {
+    // automatically map the ref for each item in the loop based on the given ref key
+    ctx.renderCode.push(`
+      __ref: '${templateObject.ref}' + __index
     `)
+    templateObject.ref = '$__ref'
+  }
+  ctx.renderCode.push(`
+      })
+  `)
 
   if ('key' in templateObject) {
     ctx.renderCode.push(`

package/src/lib/codegenerator/generator.test_.js

@@ -107,7 +107,7 @@ test('Generate render and effect code for a template with a single simple elemen
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -149,7 +149,7 @@ test('Generate code for a template with a simple element and a simple nested ele
   function anonymous(parent,component,context) {
     const elms = []
 
-    elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+    elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
     const elementConfig1 = {}
 
     elementConfig1['type'] = "Component"
@@ -158,7 +158,7 @@ test('Generate code for a template with a simple element and a simple nested ele
 
     parent = elms[1]
 
-    elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+    elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
     const elementConfig2 = {}
 
     elementConfig2['type'] = "Element"
@@ -198,7 +198,7 @@ test('Generate code for a template with a single element with attributes', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -246,7 +246,7 @@ test('Generate code for a template with attributes and a nested element with att
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -257,7 +257,7 @@ test('Generate code for a template with attributes and a nested element with att
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -313,7 +313,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -324,7 +324,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -336,7 +336,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Element"
@@ -403,7 +403,7 @@ test('Generate code for a template with attributes and deep nested elements with
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -414,7 +414,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -426,7 +426,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Element"
@@ -438,7 +438,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[3]
 
-      elms[4] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[4] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig4 = {}
 
       elementConfig4['type'] = "Element"
@@ -448,7 +448,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[3]
 
-      elms[5] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[5] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig5 = {}
 
       elementConfig5['type'] = "Element"
@@ -492,7 +492,7 @@ test('Generate code for a template with simple dynamic attributes', (assert) =>
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -559,7 +559,7 @@ test('Generate code for a template with an attribute with a dash', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -604,7 +604,7 @@ test('Generate code for a template with dynamic attributes with code to be evalu
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -690,7 +690,7 @@ test('Generate code for a template with custom components', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -746,7 +746,7 @@ test('Generate code for a template with an unregistered custom component', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -757,7 +757,7 @@ test('Generate code for a template with an unregistered custom component', (asse
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Poster2"
@@ -813,7 +813,7 @@ test('Generate code for a template with custom components with arguments', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -876,7 +876,7 @@ test('Generate code for a template with custom components with reactive props',
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -946,7 +946,7 @@ test('Generate code for a template with a transition attributes', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"

package/src/lib/setup/base.js

@@ -140,17 +140,11 @@ export default (component) => {
       enumerable: false,
       configurable: false,
     },
-    [symbols.timeouts]: {
-      value: [],
-      writable: false,
-      enumerable: false,
-      configurable: false,
-    },
     $setTimeout: {
       value: function (fn, ms, ...params) {
         const timeoutId = setTimeout(
           () => {
-            this[symbols._timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
+            this[symbols.timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
             fn.apply(null, params)
           },
           ms,
@@ -163,22 +157,20 @@ export default (component) => {
       enumerable: true,
       configurable: false,
     },
-    [symbols.intervals]: {
-      value: [],
+    $clearTimeout: {
+      value: function (timeoutId) {
+        if (this[symbols.timeouts].indexOf(timeoutId) > -1) {
+          this[symbols.timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
+          clearTimeout(timeoutId)
+        }
+      },
       writable: false,
-      enumerable: false,
+      enumerable: true,
       configurable: false,
     },
     $setInterval: {
       value: function (fn, ms, ...params) {
-        const intervalId = setInterval(
-          () => {
-            this[symbols._intervals] = this[symbols.intervals].filter((id) => id !== intervalId)
-            fn.apply(null, params)
-          },
-          ms,
-          params
-        )
+        const intervalId = setInterval(() => fn.apply(null, params), ms, params)
         this[symbols.intervals].push(intervalId)
         return intervalId
       },
@@ -186,6 +178,17 @@ export default (component) => {
       enumerable: true,
       configurable: false,
     },
+    $clearInterval: {
+      value: function (intervalId) {
+        if (this[symbols.intervals].indexOf(intervalId) > -1) {
+          this[symbols.intervals] = this[symbols.intervals].filter((id) => id !== intervalId)
+          clearInterval(intervalId)
+        }
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
     $emit: {
       value: function (event, params) {
         eventListeners.executeListeners(event, params)

package/src/lib/symbols.js

@@ -7,7 +7,6 @@ export default {
   init: Symbol('init'),
   inputEvents: Symbol('inputEvents'),
   intervals: Symbol('intervals'),
-  _intervals: Symbol('_intervals'),
   level: Symbol('level'),
   methodKeys: Symbol('methodKeys'),
   originalState: Symbol('originalState'),
@@ -20,7 +19,6 @@ export default {
   stateKeys: Symbol('stateKeys'),
   textnode: Symbol('textnode'),
   timeouts: Symbol('timeouts'),
-  _timeouts: Symbol('_timeouts'),
   type: Symbol('type'),
   watchers: Symbol('watchers'),
   watchKeys: Symbol('watchKeys'),
@@ -32,8 +30,6 @@ export default {
   children: Symbol.for('children'),
   // Symbol 'components' utilized within generated code
   components: Symbol.for('components'),
-  // Symbol 'id' utilized within generated code
-  id: Symbol.for('id'),
   // Symbol 'isSlot' utilized within generated code
   isSlot: Symbol.for('isSlot'),
   // Symbol 'props' utilized within generated code