@lightningjs/blits 1.16.1 → 1.17.0

package/.eslintrc.cjs

@@ -50,10 +50,14 @@ module.exports = {
       },
     ],
   },
+  parser: '@babel/eslint-parser',
   parserOptions: {
     parser: 'babel-eslint',
     ecmaVersion: 2018,
     sourceType: 'module',
+    babelOptions: {
+      plugins: ['@babel/plugin-syntax-import-assertions'],
+    },
   },
   globals: {
     globalThis: false,

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## v1.17.0
+
+_24 jan 2025_
+
+- Deprecated `wordwrap`-attribute on Text component in favour of `maxwidth`
+- Added documentation about text overflow
+- Upgraded renderer to v2.9.1 and added `canvas` and `textureProcessingLimit` launch options
+
+## v1.16.2
+
+_21 jan 2025_
+
+- Upgraded to latest version of MSDF font generator, with fix for missing presets
+
+
 ## v1.16.1
 
 _17 jan 2025_

package/docs/essentials/displaying_text.md

@@ -24,13 +24,13 @@ The Text-tag accepts the following attributes:
 - `size`  - the font size, defaults to `32`
 - `color` - the color to display for the text, defaults to `white` and can be any of the supported Blits color formats (HTML, hexadecimal or rgb(a))
 - `letterspacing` - letterspacing in pixels, defaults to `0`
-- `align` - the alignment of the text, can be `left`, `right`, or `center`, defaults to `left`. Centering text and aligning text to the right requires the `wordwrap` attribute to be set as well.
-- `wordwrap` - the max length of a line of text in pixels, words surpassing this length will be broken and wrapped onto the next line. This attribute is required when aligning center or right
+- `align` - the alignment of the text, can be `left`, `right`, or `center`, defaults to `left`. Centering text and aligning text to the right requires the `maxwidth` attribute to be set as well.
+- `maxwidth` - the max length of a line of text in pixels, words surpassing this length will be broken and wrapped onto the next line. This attribute is required when aligning center or right. Previously this attribute was `wordwrap`, which has now been deprecated in favour of `maxwidth`.
 - `maxlines` - maximum number of lines that will be displayed
 - `maxheight` - maximum height of a text block, lines that don't fit within this height will not be displayed
 - `lineheight` - the spacing between lines in pixels
 - `contain` - the strategy for containing text within the bounds, can be `none` (default), `width`, or `both`. In most cases, the value of this attribute will automatically be set by Blits, based on the other specified attributes
-- `textoverflow` - the suffix to be added when text is cropped due to bounds limits, defaults to `...`
+- `textoverflow` - the suffix to be added when text is cropped due to bounds limits, defaults to `...` (see more details [here](#text-overflow))
 
 ## Text dimensions
 
@@ -67,6 +67,14 @@ export default Blits.Component('MyComponent', {
   }
 ```
 
+## Text overflow
+
+The text renderer offers the ability to display a _text overflow suffix_ when the text exceeds the bounds of the Text component.
+
+This functionality is automatically enabled, but requires that both a _horizontal_ boundary (using `maxwidth`) and a _vertical_ boundary (using `maxlines` or `maxheight`) are specified on the Text component.
+
+The `textoverflow`-attribute itself is not required, unless you want to use another suffix than the standard `...`. If you want _no suffix_ (and just a hard cutoff), the`textoverflow`-attribute should be set to `false` or an _empty string_.
+
 ## SDF and Canvas2d
 
 Compared to Lightning 2, texts have improved a lot in Lightning 3, thanks to the SDF (Signed Distance Field) Text renderer.

package/index.d.ts

@@ -774,7 +774,21 @@ declare module '@lightningjs/blits' {
      *
      * Defaults to `50` (ms)
      */
-    holdTimeout?: number
+    holdTimeout?: number,
+    /**
+     * Custom canvas object used to render the App to.
+     *
+     * When not provided, the Lightning renderer will create a
+     * new Canvas element and inject it into the DOM
+     */
+    canvas?: HTMLCanvasElement,
+    /**
+     * The maximum number of textures to process in a single frame. This is used to
+     * prevent the renderer from processing too many textures in a single frame.
+     *
+     * Defaults to `0` (meaning no limit)
+     */
+    textureProcessingLimit?: number
   }
 
   interface State {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -35,6 +35,8 @@
   "author": "Michiel van der Geest <hello@michielvandergeest.com>",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@babel/eslint-parser": "^7.26.5",
+    "@babel/plugin-syntax-import-assertions": "^7.26.0",
     "babel-eslint": "^10.1.0",
     "c8": "^8.0.1",
     "eslint": "^8.8.0",
@@ -49,8 +51,8 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/msdf-generator": "^1.1.0",
-    "@lightningjs/renderer": "^2.8.0"
+    "@lightningjs/msdf-generator": "^1.1.1",
+    "@lightningjs/renderer": "^2.9.1"
   },
   "repository": {
     "type": "git",

package/src/components/Circle.js

@@ -19,51 +19,52 @@ import Component from '../component.js'
 
 export default () =>
   Component('Circle', {
-    /* eslint-disable no-unused-vars */
-    code: {
-      render: function anonymous(parent, component, context, components, effect, getRaw) {
-        const elms = []
-        let componentType
-        const rootComponent = component
-        let propData
-        let slotComponent
-        let inSlot = false
-        let slotChildCounter = 0
-        const elementConfig0 = {}
+    /* eslint-disable no-unused-vars */ 
+code: { render: function anonymous(parent,component,context,components,effect,getRaw
+) {
+const elms = []
+let componentType
+const rootComponent = component
+let propData
+let slotComponent
+let inSlot = false
+let slotChildCounter = 0
+const elementConfig0 = {}
 
-        elms[0] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
+    elms[0] = this.element({parent: parent || 'root'}, inSlot === true ? slotComponent : component)
+  
+elementConfig0['color'] = component.color
+elementConfig0['w'] = component.size
+elementConfig0['h'] = component.size
+elementConfig0['effects'] = [component.shader('radius', {radius: component.radius})]
+elms[0].populate(elementConfig0)
 
-        elementConfig0['color'] = component.color
-        elementConfig0['w'] = component.size
-        elementConfig0['h'] = component.size
-        elementConfig0['effects'] = [component.shader('radius', { radius: component.radius })]
-        elms[0].populate(elementConfig0)
+    if(inSlot === true) {
+      slotChildCounter -= 1
+    }
+  
+return elms
+}, effects: [function anonymous(component,elms,context,components,rootComponent,effect
+) {
 
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
+            elms[0].set('color', component.color)
+          
+},function anonymous(component,elms,context,components,rootComponent,effect
+) {
 
-        return elms
-      },
-      effects: [
-        function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[0].set('color', component.color)
-        },
-        function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[0].set('w', component.size)
-        },
-        function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[0].set('h', component.size)
-        },
-        function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[0].set('effects', [component.shader('radius', { radius: component.radius })])
-        },
-      ],
-      context: {},
-    },
+            elms[0].set('w', component.size)
+          
+},function anonymous(component,elms,context,components,rootComponent,effect
+) {
+
+            elms[0].set('h', component.size)
+          
+},function anonymous(component,elms,context,components,rootComponent,effect
+) {
+
+            elms[0].set('effects', [component.shader('radius', {radius: component.radius})])
+          
+}], context: {}},
     props: [{ key: 'size', default: 40 }, 'color'],
     computed: {
       radius() {