Merge pull request #138 from lightning-js/dev

Release 1.3.0

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v1.3.0
+
+_19 aug 2024_
+
+- Fixed bug in for-loop when key is not a string but a number
+- Added `$shallow`-modifier to for-loop
+- Added several performance optimizations
+- Added support for dynamic arguments in object notation (i.e. `mount="{x: $x, y: $y}"`)
+
 ## v1.2.0
 
 _5 aug 2024_

package.json

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

src/component.js

@@ -160,16 +160,11 @@ const Component = (name = required('name'), config = required('config')) => {
 
     // setup (and execute) all the generated side effects based on the
     // reactive bindings define in the template
-    for (let i = 0; i < config.code.effects.length; i++) {
+    const effects = config.code.effects
+    for (let i = 0; i < effects.length; i++) {
+      // console.log(config.code.effects[i].toString())
       effect(() => {
-        config.code.effects[i].apply(stage, [
-          this,
-          this[symbols.children],
-          config,
-          globalComponents,
-          rootComponent,
-          effect,
-        ])
+        effects[i](this, this[symbols.children], config, globalComponents, rootComponent, effect)
       })
     }
 

src/component/base/methods.js

@@ -95,9 +95,8 @@ export default {
   },
   shader: {
     value: function (type, args) {
-      const target = type
       return {
-        type: target,
+        type: type,
         props: args,
       }
       // const shaders = renderer.driver.stage.shManager.getRegisteredEffects()

src/component/setup/state.js

@@ -37,18 +37,14 @@ export default (component, state = () => {}) => {
       Log.error(`State ${key} already exists as a method`)
     }
     component[symbols.stateKeys].push(key)
-    try {
-      Object.defineProperty(component, key, {
-        get() {
-          return this[symbols.state] && key in this[symbols.state] && this[symbols.state][key]
-        },
-        set(v) {
-          if (this[symbols.state]) this[symbols.state][key] = v
-        },
-        // enumerable: true,
-      })
-    } catch (e) {
-      Log.error(e)
-    }
+    Object.defineProperty(component, key, {
+      get() {
+        return this[symbols.state][key]
+      },
+      set(v) {
+        this[symbols.state][key] = v
+      },
+      // enumerable: true,
+    })
   })
 }

src/engines/L3/element.js

@@ -23,7 +23,7 @@ import symbols from '../../lib/symbols.js'
 import Settings from '../../settings.js'
 
 const isTransition = (value) => {
-  return value !== null && typeof value === 'object' && 'transition' in value
+  return value !== null && typeof value === 'object' && 'transition' in value === true
 }
 
 const isObjectString = (str) => {
@@ -48,13 +48,12 @@ const parsePercentage = function (v, base) {
 }
 
 const unpackTransition = (v) => {
-  if (v === null) return v
-  if (typeof v === 'string') return v
-  else if (typeof v === 'number') return v
-  else if (typeof v === 'object' && v.constructor === Object) {
-    if ('value' in v) {
+  if (typeof v !== 'object' || v === null) return v
+  if (v.constructor === Object) {
+    if ('value' in v === true) {
       return v.value
-    } else if ('transition' in v) {
+    }
+    if ('transition' in v === true) {
       return unpackTransition(v.transition)
     }
   }
@@ -68,7 +67,7 @@ const colorMap = {
   right: 'colorRight',
 }
 
-let textDefaults
+let textDefaults = null
 
 const propsTransformer = {
   set parent(v) {
@@ -102,9 +101,9 @@ const propsTransformer = {
     this.props['zIndex'] = v
   },
   set color(v) {
-    if (typeof v === 'string' && v.indexOf('{') === -1) {
+    if (typeof v === 'string' && v.startsWith('{') === false) {
       this.props['color'] = colors.normalize(v)
-    } else if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
+    } else if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
       this.props['color'] = 0
       Object.entries(v).forEach((color) => {
         this.props[colorMap[color[0]]] = colors.normalize(color[1])
@@ -113,31 +112,31 @@ const propsTransformer = {
   },
   set src(v) {
     this.props['src'] = v
-    if (this.raw.get('color') === undefined) {
+    if (this.raw['color'] === undefined) {
       this.props['color'] = 0xffffffff
     }
   },
   set texture(v) {
     this.props['texture'] = v
 
-    if (this.raw.get('color') === undefined && (v === null || v === undefined)) {
+    if (this.raw['color'] === undefined && (v === null || v === undefined)) {
       this.props['color'] = 0x00000000
-    } else if (this.raw.get('color') === undefined) {
+    } else if (this.raw['color'] === undefined) {
       this.props['color'] = 0xffffffff
     }
   },
   set rtt(v) {
     this.props['rtt'] = v
-    if (v === true && this.raw.get('color') === undefined) {
+    if (v === true && this.raw['color'] === undefined) {
       this.props['color'] = 0xffffffff
     }
   },
   set mount(v) {
-    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if ('x' in v) {
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      if ('x' in v === true) {
         this.props['mountX'] = v.x
       }
-      if ('y' in v) {
+      if ('y' in v === true) {
         this.props['mountY'] = v.y
       }
     } else {
@@ -146,11 +145,11 @@ const propsTransformer = {
     }
   },
   set pivot(v) {
-    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if ('x' in v) {
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      if ('x' in v === true) {
         this.props['pivotX'] = v.x
       }
-      if ('y' in v) {
+      if ('y' in v === true) {
         this.props['pivotY'] = v.y
       }
     } else {
@@ -159,11 +158,11 @@ const propsTransformer = {
     }
   },
   set scale(v) {
-    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if ('x' in v) {
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      if ('x' in v === true) {
         this.props['scaleX'] = v.x
       }
-      if ('y' in v) {
+      if ('y' in v === true) {
         this.props['scaleY'] = v.y
       }
     } else {
@@ -185,12 +184,7 @@ const propsTransformer = {
   },
   set effects(v) {
     this.props['shader'] = renderer.createShader('DynamicShader', {
-      effects: v.map((eff) => {
-        if (eff.props && eff.props.color) {
-          eff.props.color = colors.normalize(eff.props.color)
-        }
-        return eff
-      }),
+      effects: v,
     })
   },
   set clipping(v) {
@@ -238,24 +232,22 @@ const propsTransformer = {
 
 const Element = {
   populate(data) {
-    const props = {
-      ...this.config,
-      ...data,
-    }
+    const props = data
+    props['node'] = this.config.node
 
-    if (props[symbols.isSlot]) {
+    if (props[symbols.isSlot] === true) {
       this[symbols.isSlot] = true
     }
 
     this.props.element = this
 
-    const propKeys = Object.keys(props)
-    const length = propKeys.length
-
-    this.props['parent'] = props.parent
+    this.props['parent'] = this.config.parent
     delete props.parent
 
-    this.props.raw = new Map(Object.entries(props))
+    this.props.raw = data
+
+    const propKeys = Object.keys(props)
+    const length = propKeys.length
 
     for (let i = 0; i < length; i++) {
       const key = propKeys[i]
@@ -266,65 +258,63 @@ const Element = {
     }
 
     // correct for default white nodes (but not for text nodes)
-    if (this.props.props['color'] === undefined && !('__textnode' in props)) {
+    if (this.props.props['color'] === undefined && '__textnode' in props === false) {
       this.props.props['color'] = 0
     }
 
     this.node = props.__textnode
       ? renderer.createTextNode({ ...textDefaults, ...this.props.props })
       : renderer.createNode(this.props.props)
 
-    if (props['@loaded']) {
+    if (props['@loaded'] !== undefined && typeof props['@loaded'] === 'function') {
       this.node.on('loaded', (el, { type, dimensions }) => {
         props['@loaded']({ w: dimensions.width, h: dimensions.height, type }, this)
       })
     }
 
-    if (props['@error']) {
+    if (props['@error'] !== undefined && typeof props['@error'] === 'function') {
       this.node.on('failed', (el, error) => {
         props['@error'](error, this)
       })
     }
 
-    if (this.component && this.component.___layout) {
-      this.node.on('loaded', () => {
-        this.component.___layout()
-      })
-    }
+    // if (this.component && this.component.___layout) {
+    //   this.node.on('loaded', () => {
+    //     this.component.___layout()
+    //   })
+    // }
   },
   set(prop, value) {
     if (value === undefined) return
-    if (this.props.raw.get(prop) === value) return
-
-    this.props.raw.set(prop, value)
+    if (this.props.raw[prop] === value) return
+    this.props.raw[prop] = value
 
     this.props.props = {}
     this.props[prop] = unpackTransition(value)
-    const props = Object.entries(this.props.props)
 
-    if (props.length === 1) {
-      const [p, v] = props[0]
-      if (isTransition(value)) {
-        return this.animate(p, v, value.transition)
+    const propsKeys = Object.keys(this.props.props)
+
+    if (propsKeys.length === 1) {
+      if (isTransition(value) === true) {
+        return this.animate(propsKeys[0], this.props.props[propsKeys[0]], value.transition)
       }
       // set the prop to the value on the node
-      this.node[p] = v
+      this.node[propsKeys[0]] = this.props.props[propsKeys[0]]
     } else {
-      for (let i = 0; i < props.length; i++) {
+      for (let i = 0; i < propsKeys.length; i++) {
         // todo: fix code duplication
-        const [p, v] = props[i]
-        if (isTransition(value)) {
-          return this.animate(p, v, value.transition)
+        if (isTransition(value) === true) {
+          return this.animate(propsKeys[i], this.props.props[propsKeys[i]], value.transition)
         }
         // set the prop to the value on the node
-        this.node[p] = v
+        this.node[propsKeys[i]] = this.props.props[propsKeys[i]]
       }
     }
 
     // todo: review naming
-    if (this.component && this.component.___layout) {
-      this.component.___layout()
-    }
+    // if (this.component && this.component.___layout) {
+    //   this.component.___layout()
+    // }
   },
   animate(prop, value, transition) {
     // if current value is the same as the value to animate to, instantly resolve
@@ -409,7 +399,7 @@ const Element = {
 }
 
 export default (config, component) => {
-  if (!textDefaults) {
+  if (textDefaults === null) {
     textDefaults = {
       fontSize: 32,
       fontFamily: Settings.get('defaultFont', 'sans-serif'),