@lightningjs/blits 1.19.1 → 1.20.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## v1.20.1
+
+_14 feb 2025_
+
+- Added error message when root element in template contains a `:for`-attribute
+- Added workaround fix for shader caching issue
+- Upgraded to renderer v2.12.1
+
+## v1.20.0
+
+_12 feb 2025_
+
+- Improved attribute definitions used for autocompletion in VScode extension
+- Fixed calculation of `align-items` in Layout component
+- Fixed issue with sorting reactive arrays
+- Upgraded to renderer v2.12.0
+
 ## v1.19.1
 
 _3 feb 2025_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.19.1",
+  "version": "1.20.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.1.1",
-    "@lightningjs/renderer": "^2.11.1"
+    "@lightningjs/renderer": "^2.12.1"
   },
   "repository": {
     "type": "git",

package/src/engines/L3/element.js

@@ -22,6 +22,9 @@ import { Log } from '../../lib/log.js'
 import symbols from '../../lib/symbols.js'
 import Settings from '../../settings.js'
 
+// temporary counter to work around shader caching issues
+let counter = 0
+
 const createPaddingObject = (padding, direction) => {
   if (padding === undefined) {
     return { start: 0, end: 0, oppositeStart: 0, oppositeEnd: 0 }
@@ -113,7 +116,7 @@ const layoutFn = function (config) {
   if (align !== 0) {
     for (let i = 0; i < childrenLength; i++) {
       const node = children[i]
-      node[oppositePosition] = otherDimension
+      node[oppositePosition] = otherDimension * align
       node[oppositeMount] = align
     }
   }
@@ -330,14 +333,21 @@ const propsTransformer = {
     if (this.element.node === undefined) {
       this.props['shader'] = renderer.createShader('DynamicShader', {
         effects: v.map((effect) => {
-          return renderer.createEffect(effect.type, effect.props, effect.type)
+          // temporary add counter to work around shader caching issues
+          return renderer.createEffect(
+            effect.type,
+            effect.props,
+            effect.type + this.element.counter
+          )
         }),
       })
     } else {
       for (let i = 0; i < v.length; i++) {
-        const target = this.element.node.shader.props[v[i].type]
+        // temporary add counter to work around shader caching issues
+        const target = this.element.node.shader.props[v[i].type + this.element.counter]
         const props = Object.keys(v[i].props)
 
+        if (target == undefined) continue
         for (let j = 0; j < props.length; j++) {
           target[props[j]] = v[i].props[props[j]]
         }
@@ -642,5 +652,6 @@ export default (config, component) => {
     scheduledTransitions: {},
     config,
     component,
+    counter: counter++,
   })
 }

package/src/lib/reactivity/reactive.js

@@ -113,6 +113,7 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
           } else if (
             target[key] !== null &&
             target[key] !== undefined &&
+            Array.isArray(target) === false &&
             Object.getPrototypeOf(value) === Object.prototype
           ) {
             value = Object.assign(receiver[key], value)

package/src/lib/templateparser/parser.js

@@ -239,6 +239,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
     #2: There must be exactly one top-level element (an element at level 0). This element may either be a self-closing
         element or an opening tag followed by a closing tag. If more than one top-level element is encountered, an error
         should be thrown.
+        But the top-level element can not have :for attribute.
   */
   const format = (parsedData) => {
     let stack = []
@@ -254,6 +255,10 @@ export default (template = '', componentName, parentComponent, filePath = null)
         if (rootElementDefined) {
           throw TemplateStructureError('MultipleTopLevelTags', element)
         }
+        // Check for :for attribute on root level element
+        if (element[':for'] !== undefined) {
+          throw TemplateStructureError('ForAttributeOnRootElement', element)
+        }
         rootElementDefined = true
       }
 

package/src/lib/templateparser/parser.test.js

@@ -1388,3 +1388,24 @@ test('Parse template with color and effects attributes and parsing should conver
   )
   assert.end()
 })
+
+test('Parse template with :for attribute on root element and parsing should fail', (assert) => {
+  const template = `
+  <Element :for="item in $items">
+    <Text content="$item.name" />
+  </Element>
+  `
+
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateStructureError:ForAttributeOnRootElement')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateStructureError', 'Parser should throw TemplateStructureError')
+    assert.ok(
+      error.message.startsWith('ForAttributeOnRootElement'),
+      'Parser should throw TemplateStructureError:ForAttributeOnRootElement'
+    )
+  }
+
+  assert.end()
+})

package/vscode/data/template-attributes.json

@@ -11,7 +11,8 @@
       "Element",
       "Text",
       "Layout",
-      "RouterView"
+      "RouterView",
+      "Component"
     ]
   },
   "y": {
@@ -26,7 +27,8 @@
       "Element",
       "Text",
       "Layout",
-      "RouterView"
+      "RouterView",
+      "Component"
     ]
   },
   "z": {
@@ -69,7 +71,6 @@
     "usedIn": [
       "Element",
       "Text",
-      "Layout",
       "RouterView"
     ]
   },
@@ -99,7 +100,6 @@
     "usedIn": [
       "Element",
       "Text",
-      "Layout",
       "RouterView"
     ]
   },
@@ -114,7 +114,6 @@
     "usedIn": [
       "Element",
       "Text",
-      "Layout",
       "RouterView"
     ]
   },
@@ -145,7 +144,8 @@
       "Element",
       "Text",
       "Layout",
-      "RouterView"
+      "RouterView",
+      "Component"
     ]
   },
   "rotation": {
@@ -175,7 +175,8 @@
       "Element",
       "Text",
       "Layout",
-      "RouterView"
+      "RouterView",
+      "Component"
     ]
   },
   "mount": {
@@ -245,7 +246,6 @@
     "usedIn": [
       "Element",
       "Text",
-      "Layout",
       "RouterView"
     ]
   },
@@ -262,7 +262,8 @@
     "reactive": true,
     "description": "The overflow attribute allows the element to extend beyond the specified height and width. Possible values are true or false.",
     "usedIn": [
-      "Text"
+      "Text",
+      "Element"
     ]
   },
   "content": {
@@ -330,7 +331,7 @@
       "Text"
     ]
   },
-  "wordwrap": {
+  "maxwidth": {
     "attrType": "regular",
     "types": [
       "number"
@@ -398,13 +399,9 @@
   "textoverflow": {
     "attrType": "regular",
     "types": [
-      "enum"
-    ],
-    "values": [
-      "true",
-      "false"
+      "string"
     ],
-    "defaultValue": "false",
+    "defaultValue": null,
     "reactive": true,
     "description": "The suffix to be added when text is cropped due to bounds limits. Defaults to ...",
     "usedIn": [
@@ -436,10 +433,7 @@
     "reactive": true,
     "description": "Controls how much space will be added between each Element or Component.",
     "usedIn": [
-      "Element",
-      "Text",
-      "Layout",
-      "RouterView"
+      "Layout"
     ]
   },
   "is": {
@@ -498,7 +492,8 @@
       "Element",
       "Text",
       "Layout",
-      "RouterView"
+      "RouterView",
+      "Component"
     ]
   },
   "align-items": {
@@ -515,11 +510,7 @@
     "reactive": true,
     "description": "Specifies how to align children on the opposite axis.",
     "usedIn": [
-      "Component",
-      "Element",
-      "Text",
-      "Layout",
-      "RouterView"
+      "Layout"
     ]
   },
   "padding": {
@@ -554,10 +545,7 @@
     "reactive": true,
     "description": "Adds spacing between the content and the edges of the Layout Component.",
     "usedIn": [
-      "Element",
-      "Text",
-      "Layout",
-      "RouterView"
+      "Layout"
     ]
   },
   "@loaded": {
@@ -585,5 +573,17 @@
       "Element",
       "Text"
     ]
+  },
+  "@updated": {
+    "attrType": "event",
+    "types": [
+      "string"
+    ],
+    "defaultValue": null,
+    "reactive": false,
+    "description": " Fires when each update in Layout children. Must be a function reference.",
+    "usedIn": [
+      "Layout"
+    ]
   }
 }