@lightningjs/blits 0.6.5 → 0.6.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# v0.6.6
+
+_24 jan 2024_
+
+- Added temporary fix for renderer issue [#123](https://github.com/lightning-js/renderer/issues/123)
+- Fixed issue with setting mount, pivot and scale values to zero (0) in object literal with x and y key
+- Added automatic mapping of ref string to each item in a for-loop
+
 # v0.6.5
 
 _16 jan 2024_

package/boilerplate/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {

package/src/application.js

@@ -76,9 +76,7 @@ const Application = (config) => {
     setTimeout(() => Focus.set(this))
   }
 
-  const App = Component('App', config)
-
-  return App
+  return Component('App', config)
 }
 
 export default Application

package/src/element.js

@@ -51,6 +51,8 @@ const unpackTransition = (obj) => {
   return obj
 }
 
+let firstNode = false
+
 const Props = {
   set parent(v) {
     this._props.parent = v === 'root' ? renderer.root : v.node
@@ -126,11 +128,11 @@ const Props = {
   },
   set mount(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if (v.x) {
+      if ('x' in v) {
         this._props.mountX = v.x
         this._set.add('mountX')
       }
-      if (v.y) {
+      if ('y' in v) {
         this._props.mountY = v.y
         this._set.add('mountY')
       }
@@ -142,11 +144,11 @@ const Props = {
   },
   set pivot(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if (v.x) {
+      if ('x' in v) {
         this._set.add('pivotX')
         this._props.pivotX = v.x
       }
-      if (v.y) {
+      if ('y' in v) {
         this._set.add('pivotY')
         this._props.pivotY = v.y
       }
@@ -158,8 +160,8 @@ const Props = {
   },
   set scale(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if (v.x) this._props.scaleX = v.x
-      if (v.y) this._props.scaleY = v.y
+      if ('x' in v) this._props.scaleX = v.x
+      if ('y' in v) this._props.scaleY = v.y
     } else {
       this._props.scale = v
     }
@@ -239,6 +241,13 @@ const Element = {
         this.props._set.has('src') || this.props._set.has('texture') ? 0xffffffff : 0
     }
 
+    // temporary workaround for renderer issue https://github.com/lightning-js/renderer/issues/123
+    if (!firstNode) {
+      this.props._props.src =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII='
+      firstNode = true
+    }
+
     this.node = props.__textnode
       ? renderer.createTextNode(this.props._props)
       : renderer.createNode(this.props._props)

package/src/lib/codegenerator/generator.js

@@ -56,7 +56,7 @@ const generateElementCode = function (
 
   renderCode.push(`
     if(!${elm}) {
-      ${elm} = this.element({componentId: component[Symbol.for('id')], parent: parent || 'root'}, component)
+      ${elm} = this.element({parent: parent || 'root'}, component)
     }
     const elementConfig${counter} = {}
   `)
@@ -221,9 +221,19 @@ const generateForLoopCode = function (templateObject, parent) {
       const scope = Object.assign(component, {
         key: Math.random(),
         ${index}: __index,
-        ${item}: collection[__index]
-      })
+        ${item}: collection[__index],
+    `)
+
+  if ('ref' in templateObject && templateObject.ref.indexOf('$') === -1) {
+    // automatically map the ref for each item in the loop based on the given ref key
+    ctx.renderCode.push(`
+      __ref: '${templateObject.ref}' + __index
     `)
+    templateObject.ref = '$__ref'
+  }
+  ctx.renderCode.push(`
+      })
+  `)
 
   if ('key' in templateObject) {
     ctx.renderCode.push(`

package/src/lib/codegenerator/generator.test_.js

@@ -107,7 +107,7 @@ test('Generate render and effect code for a template with a single simple elemen
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -149,7 +149,7 @@ test('Generate code for a template with a simple element and a simple nested ele
   function anonymous(parent,component,context) {
     const elms = []
 
-    elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+    elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
     const elementConfig1 = {}
 
     elementConfig1['type'] = "Component"
@@ -158,7 +158,7 @@ test('Generate code for a template with a simple element and a simple nested ele
 
     parent = elms[1]
 
-    elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+    elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
     const elementConfig2 = {}
 
     elementConfig2['type'] = "Element"
@@ -198,7 +198,7 @@ test('Generate code for a template with a single element with attributes', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -246,7 +246,7 @@ test('Generate code for a template with attributes and a nested element with att
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -257,7 +257,7 @@ test('Generate code for a template with attributes and a nested element with att
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -313,7 +313,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -324,7 +324,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -336,7 +336,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Element"
@@ -403,7 +403,7 @@ test('Generate code for a template with attributes and deep nested elements with
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -414,7 +414,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -426,7 +426,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Element"
@@ -438,7 +438,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[3]
 
-      elms[4] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[4] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig4 = {}
 
       elementConfig4['type'] = "Element"
@@ -448,7 +448,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[3]
 
-      elms[5] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[5] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig5 = {}
 
       elementConfig5['type'] = "Element"
@@ -492,7 +492,7 @@ test('Generate code for a template with simple dynamic attributes', (assert) =>
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -559,7 +559,7 @@ test('Generate code for a template with an attribute with a dash', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -604,7 +604,7 @@ test('Generate code for a template with dynamic attributes with code to be evalu
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -690,7 +690,7 @@ test('Generate code for a template with custom components', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -746,7 +746,7 @@ test('Generate code for a template with an unregistered custom component', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -757,7 +757,7 @@ test('Generate code for a template with an unregistered custom component', (asse
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Poster2"
@@ -813,7 +813,7 @@ test('Generate code for a template with custom components with arguments', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -876,7 +876,7 @@ test('Generate code for a template with custom components with reactive props',
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -946,7 +946,7 @@ test('Generate code for a template with a transition attributes', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"

package/src/lib/symbols.js

@@ -32,8 +32,6 @@ export default {
   children: Symbol.for('children'),
   // Symbol 'components' utilized within generated code
   components: Symbol.for('components'),
-  // Symbol 'id' utilized within generated code
-  id: Symbol.for('id'),
   // Symbol 'isSlot' utilized within generated code
   isSlot: Symbol.for('isSlot'),
   // Symbol 'props' utilized within generated code