@lightningjs/blits 0.6.6 → 0.6.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+# v0.6.8
+
+_29 jan 2024_
+
+- Reverted fix (initially) empty for-loops
+
+# 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.8"
   }
 }

package/docs/introduction.md

@@ -0,0 +1,19 @@
+# Blits - Lightning 3 App Development Framework
+
+With Blits, the App Development Framework for Lightning 3, it becomes a breeze to build great Lightning 3 applications.
+
+Blits is built on top of the Lightning 3 Renderer and aims to provide a **great developer experience**, making it fun and easy to build your apps!
+
+Built from the ground up by the LightningJS team, we're offering a **Complete App framework**, full of features to speed up development, while keeping it **lightweight** with a focus on **performance**.
+
+The Blits framework uses a **readable** XML-style template syntax and comes with built-in reactivity.
+
+## Why Blits?
+
+You may be wondering where the name Blits comes from?
+
+Firstly, it's short, memorable and just has a nice ring to it.
+
+"Blits" is a Dutch word (a significant portion of the Lightning Open Source teams is based in the Netherlands). It means _flashy_ and it's often used to for things that are _great_ or _cool_.
+
+Finally it's a nerdy reference to the computer term "Bit Blits" commonly used in graphics processing, for rapidly moving a block of data into memory - quite similar to what Lightning is doing

package/docs/sidebar.json

@@ -0,0 +1,64 @@
+[
+  {
+    "text": "Getting Started",
+    "items": [
+      {
+        "text": "Introduction",
+        "link": "/introduction"
+      },
+      {
+        "text": "Setup",
+        "link": "/getting_started"
+      }
+    ]
+  },
+  {
+    "text": "Basics",
+    "items": [
+      {
+        "text": "Components",
+        "link": "/components"
+      },
+      {
+        "text": "Template Syntax",
+        "link": "/template_syntax"
+      },
+      {
+        "text": "Component State",
+        "link": "/component_state"
+      },
+      {
+        "text": "Hooks",
+        "link": "/lifecycle_events"
+      },
+      {
+        "text": "Props",
+        "link": "/props"
+      },
+      {
+        "text": "User Input",
+        "link": "/user_input"
+      },
+      {
+        "text": "Computed Props",
+        "link": "/computed_properties"
+      },
+      {
+        "text": "Watchers",
+        "link": "/watchers"
+      },
+      {
+        "text": "Styling",
+        "link": "/element_attributes"
+      },
+      {
+        "text": "Images",
+        "link": "/displaying_images"
+      },
+      {
+        "text": "Text-to-Speech",
+        "link": "/text-to-speech-announcer"
+      }
+    ]
+  }
+]

package/docs/template_syntax.md

@@ -8,7 +8,7 @@ The _template_ key in the Componentn configuration object holds a string with an
 
 You can use different tags in your templates. And similar to HTML you can use arguments and nested tags. Self-closing tags and HTML-style comments are also supported.
 
-The default tag within a template is the `<Element>` tag, which corresponds to a node in the Lightning 3 renderer. For each element, you can define a set of predefined render properties, such as `x`, `y`, `w`, `color`, and more. Detailed information regarding the attributes supported by the <Element> tag can be found [here](./element_attributes.md).
+The default tag within a template is the `<Element>` tag, which corresponds to a node in the Lightning 3 renderer. For each element, you can define a set of predefined render properties, such as `x`, `y`, `w`, `color`, and more. Detailed information regarding the attributes supported by the `<Element>` tag can be found [here](./element_attributes.md).
 
 Consider the following template example:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {
@@ -42,7 +42,11 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.6.1",
+    "@lightningjs/renderer": "^0.7.0",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lightning-js/blits.git"
   }
 }

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