@lightningjs/blits 1.19.0 → 1.20.0

package/CHANGELOG.md

@@ -1,7 +1,26 @@
 # Changelog
 
+## 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_
+
+- Removed left-over console.log
+- Upgraded to renderer v2.11.1
+- Fixed issues with wrongly pre-compiling `template` key of non-blits related objects
+
 ## v1.19.0
 
+_31 jan 2025_
+
 - Fixed `show`-attribute when an `alpha`-attribute is also present
 - Added `inspector-data`-attribute to help with automated testing based on the Lightning inspector
 - Added reactivity to Route changes (`this.$router.state.path` and `this.$router.state.navigating`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "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.10.0"
+    "@lightningjs/renderer": "^2.12.0"
   },
   "repository": {
     "type": "git",

package/src/engines/L3/element.js

@@ -113,7 +113,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
     }
   }
@@ -309,7 +309,7 @@ const propsTransformer = {
     }
   },
   set alpha(v) {
-    if(this.raw['show'] === undefined || this.raw['show'] === true) {
+    if (this.raw['show'] === undefined || this.raw['show'] === true) {
       this.props['alpha'] = v
     }
   },

package/src/engines/L3/launch.js

@@ -43,8 +43,6 @@ const textRenderEngines = (settings) => {
 }
 
 export default (App, target, settings = {}) => {
-  console.log(RENDER_QUALITIES[settings.renderQuality] || settings.renderQuality || 1)
-
   renderer = new RendererMain(
     {
       appWidth: settings.w || 1920,

package/src/lib/precompiler/precompiler.js

@@ -35,32 +35,37 @@ export default (source, filePath) => {
 
     for (const template of templates) {
       if (template[2]) {
-        const templateStartIndex = template.index + offset
-        const templateEndIndex = templateStartIndex + template[0].length
         const templateContent = template[2]
 
-        // Parse the template
-        let resourceName = 'Blits.Application'
-        if (source.indexOf('Blits.Component(') > -1) {
-          resourceName = source.match(/Blits\.Component\(['"](.*)['"]\s*,/)[1]
-        }
+        // Only process if it looks like a Blits template
+        if (templateContent.match(/^\s*(<!--[\s\S]*?-->|<[A-Za-z][^>]*>)/s)) {
+          const templateStartIndex = template.index + offset
+          const templateEndIndex = templateStartIndex + template[0].length
+
 
-        const parsed = parser(templateContent, resourceName, null, filePath)
+          // Parse the template
+          let resourceName = 'Blits.Application'
+          if (source.indexOf('Blits.Component(') > -1) {
+            resourceName = source.match(/Blits\.Component\(['"](.*)['"]\s*,/)[1]
+          }
 
-        // Generate the code
-        const code = generator.call({ components: {} }, parsed)
+          const parsed = parser(templateContent, resourceName, null, filePath)
 
-        // Insert the code in the component using the 'code' key, replacing the template key
-        const replacement = `/* eslint-disable no-unused-vars */ \ncode: { render: ${code.render.toString()}, effects: [${code.effects.map(
-          (fn) => fn.toString()
-        )}], context: {}}`
+          // Generate the code
+          const code = generator.call({ components: {} }, parsed)
 
-        offset += replacement.length - template[0].length
+          // Insert the code in the component using the 'code' key, replacing the template key
+          const replacement = `/* eslint-disable no-unused-vars */ \ncode: { render: ${code.render.toString()}, effects: [${code.effects.map(
+            (fn) => fn.toString()
+          )}], context: {}}`
 
-        newSource =
-          newSource.substring(0, templateStartIndex) +
-          replacement +
-          newSource.substring(templateEndIndex)
+          offset += replacement.length - template[0].length
+
+          newSource =
+            newSource.substring(0, templateStartIndex) +
+            replacement +
+            newSource.substring(templateEndIndex)
+        }
       }
     }
     return newSource

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/vscode/data/template-attributes.json

@@ -0,0 +1,589 @@
+{
+  "x": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The x position of the Element in pixels, relative to its parent - allows negative values and decimals.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView",
+      "Component"
+    ]
+  },
+  "y": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The y position of the Element in pixels, relative to its parent - allows negative values and decimals.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView",
+      "Component"
+    ]
+  },
+  "z": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The z index of the element.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView"
+    ]
+  },
+  "w": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The width of the element in pixels. Allows negative values and decimals.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "RouterView"
+    ]
+  },
+  "h": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The height of the element in pixels, relative to its parent. Allows negative values and decimals.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "RouterView"
+    ]
+  },
+  "zIndex": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The z-index of the element.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView"
+    ]
+  },
+  "width": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The width of the element in pixels. Allows negative values and decimals.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "RouterView"
+    ]
+  },
+  "height": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The height of the element in pixels, relative to its parent. Allows negative values and decimals.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "RouterView"
+    ]
+  },
+  "color": {
+    "attrType": "regular",
+    "types": [
+      "string"
+    ],
+    "defaultValue": "transparent",
+    "reactive": true,
+    "description": "The color of the Element. Allows any hexadecimal, hexadecimal with alpha channel, hexadecimal shorthands, RGB, RGBA, and HTML color names.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView"
+    ]
+  },
+  "alpha": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 1,
+    "reactive": true,
+    "description": "The alpha attribute controls the opacity of the element. Allows values equal to 0, 1, and between 0 and 1.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView",
+      "Component"
+    ]
+  },
+  "rotation": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The rotation attribute rotates the Element. Allows both positive and negative values in degrees.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView"
+    ]
+  },
+  "scale": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 1,
+    "reactive": true,
+    "description": "The scale attribute scales the element. Allows any value greater than 0.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView",
+      "Component"
+    ]
+  },
+  "mount": {
+    "attrType": "regular",
+    "types": [
+      "number",
+      {
+        "type": "object",
+        "properties": {
+          "x": {
+            "type": "number"
+          },
+          "y": {
+            "type": "number"
+          }
+        }
+      }
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The x or y position of the Element in pixels, relative to its parent. Allows values between 0 and 1 and decimals.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView"
+    ]
+  },
+  "pivot": {
+    "attrType": "regular",
+    "types": [
+      "number",
+      {
+        "type": "object",
+        "properties": {
+          "x": {
+            "type": "number"
+          },
+          "y": {
+            "type": "number"
+          }
+        }
+      }
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "The x or y position of the pivot point in pixels, relative to its parent. Allows values between 0 and 1 and decimals.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView"
+    ]
+  },
+  "clipping": {
+    "attrType": "regular",
+    "types": [
+      "enum"
+    ],
+    "values": [
+      "true",
+      "false"
+    ],
+    "defaultValue": "false",
+    "reactive": true,
+    "description": "The clipping attribute cuts off the element positioning within specified height and width. Possible values are true or false.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "RouterView"
+    ]
+  },
+  "overflow": {
+    "attrType": "regular",
+    "types": [
+      "enum"
+    ],
+    "values": [
+      "true",
+      "false"
+    ],
+    "defaultValue": "true",
+    "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",
+      "Element"
+    ]
+  },
+  "content": {
+    "attrType": "regular",
+    "types": [
+      "string"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "The text to be displayed. Can be hardcoded text, a dynamic value, or a reactive value.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "font": {
+    "attrType": "regular",
+    "types": [
+      "string"
+    ],
+    "defaultValue": "sans-serif",
+    "reactive": true,
+    "description": "The font family.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "size": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 32,
+    "reactive": true,
+    "description": "The size of a text element. Allows any number greater than or equal to zero.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "letterspacing": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": 0,
+    "reactive": true,
+    "description": "Letter spacing in pixels. Allows any number greater than or equal to zero.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "align": {
+    "attrType": "regular",
+    "types": [
+      "enum"
+    ],
+    "values": [
+      "left",
+      "right",
+      "center"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Align position of the element.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "maxwidth": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "The maximum length of a line of text in pixels.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "maxlines": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Maximum number of lines that will be displayed.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "maxheight": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Maximum height of a text block; lines exceeding this height will not be displayed.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "lineheight": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "The spacing between lines in pixels.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "contain": {
+    "attrType": "regular",
+    "types": [
+      "enum"
+    ],
+    "values": [
+      "none",
+      "width",
+      "both"
+    ],
+    "defaultValue": "none",
+    "reactive": true,
+    "description": "The strategy for containing text within the bounds.",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "textoverflow": {
+    "attrType": "regular",
+    "types": [
+      "string"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "The suffix to be added when text is cropped due to bounds limits. Defaults to ...",
+    "usedIn": [
+      "Text"
+    ]
+  },
+  "direction": {
+    "attrType": "regular",
+    "types": [
+      "enum"
+    ],
+    "values": [
+      "horizontal",
+      "vertical"
+    ],
+    "defaultValue": "horizontal",
+    "reactive": true,
+    "description": "Controls the direction of content.",
+    "usedIn": [
+      "Layout"
+    ]
+  },
+  "gap": {
+    "attrType": "regular",
+    "types": [
+      "number"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Controls how much space will be added between each Element or Component.",
+    "usedIn": [
+      "Layout"
+    ]
+  },
+  "is": {
+    "attrType": "regular",
+    "types": [
+      "string"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Dynamically instantiates a Component.",
+    "usedIn": [
+      "Component"
+    ]
+  },
+  "ref": {
+    "attrType": "regular",
+    "types": [
+      "string"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Refers to the Element or Component in the template.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView",
+      "Component"
+    ]
+  },
+  "for": {
+    "attrType": "regular",
+    "types": [
+      "string"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Directive for repeating multiple instances of an Element or a Component.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView",
+      "Component"
+    ]
+  },
+  "show": {
+    "attrType": "regular",
+    "types": [
+      "string"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Conditionally shows and hides Components and Elements.",
+    "usedIn": [
+      "Element",
+      "Text",
+      "Layout",
+      "RouterView",
+      "Component"
+    ]
+  },
+  "align-items": {
+    "attrType": "regular",
+    "types": [
+      "enum"
+    ],
+    "values": [
+      "start",
+      "center",
+      "end"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Specifies how to align children on the opposite axis.",
+    "usedIn": [
+      "Layout"
+    ]
+  },
+  "padding": {
+    "attrType": "regular",
+    "types": [
+      "number",
+      {
+        "type": "object",
+        "properties": {
+          "top": {
+            "type": "number"
+          },
+          "bottom": {
+            "type": "number"
+          },
+          "left": {
+            "type": "number"
+          },
+          "right": {
+            "type": "number"
+          },
+          "x": {
+            "type": "number"
+          },
+          "y": {
+            "type": "number"
+          }
+        }
+      }
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Adds spacing between the content and the edges of the Layout Component.",
+    "usedIn": [
+      "Layout"
+    ]
+  },
+  "@loaded": {
+    "attrType": "event",
+    "types": [
+      "string"
+    ],
+    "defaultValue": null,
+    "reactive": false,
+    "description": "Fires when an image or text element loads, providing its dimensions. Must be a function reference.",
+    "usedIn": [
+      "Element",
+      "Text"
+    ]
+  },
+  "@error": {
+    "attrType": "event",
+    "types": [
+      "string"
+    ],
+    "defaultValue": null,
+    "reactive": false,
+    "description": " Fires when an image fails to load, passing an error message. Must be a function reference.",
+    "usedIn": [
+      "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"
+    ]
+  }
+}