@lightningjs/blits 0.6.6 → 0.6.7

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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_

package/boilerplate/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.6.6",
+  "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/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

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

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

@@ -215,6 +215,10 @@ 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

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'),