@lightningjs/blits 1.2.0 → 1.3.1

package/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,7 +258,7 @@ 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
     }
 
@@ -274,57 +266,55 @@ const Element = {
       ? 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'),

package/src/lib/codegenerator/generator.js

@@ -70,7 +70,7 @@ const generateElementCode = function (
   renderCode.push(`const elementConfig${counter} = {}`)
 
   if (options.forloop) {
-    renderCode.push(`if(!${elm}) {`)
+    renderCode.push(`if(${elm} === undefined) {`)
   }
 
   renderCode.push(`
@@ -99,9 +99,20 @@ const generateElementCode = function (
 
     if (isReactiveKey(key)) {
       if (options.holder && key === ':color') return
-      this.effectsCode.push(
-        `${elm}.set('${key.substring(1)}', ${interpolate(templateObject[key], options.component)})`
-      )
+      if (options.holder) {
+        this.effectsCode.push(`
+        if(typeof skip${counter} === 'undefined' ||
+          skip${counter}.indexOf('${key.substring(1)}') === -1)
+          ${elm}.set('${key.substring(1)}', ${interpolate(templateObject[key], options.component)})
+        `)
+      } else {
+        this.effectsCode.push(`
+            ${elm}.set('${key.substring(1)}', ${interpolate(
+          templateObject[key],
+          options.component
+        )})
+          `)
+      }
       renderCode.push(
         `elementConfig${counter}['${key.substring(1)}'] = ${interpolate(
           templateObject[key],
@@ -117,16 +128,18 @@ const generateElementCode = function (
 
   if (options.holder === true) {
     renderCode.push(`
+    const skip${counter} = []
     if(typeof cmp${counter} !== 'undefined') {
       for(let key in cmp${counter}.config.props) {
         delete elementConfig${counter}[cmp${counter}.config.props[key]]
+        skip${counter}.push(cmp${counter}.config.props[key])
       }
     }
     `)
   }
 
   if (options.forloop) {
-    renderCode.push(`if(!${elm}.nodeId) {`)
+    renderCode.push(`if(${elm}.nodeId === undefined) {`)
   }
 
   renderCode.push(`${elm}.populate(elementConfig${counter})`)
@@ -187,6 +200,11 @@ const generateComponentCode = function (
   }
 
   renderCode.push(`const props${counter} = {}`)
+
+  if (options.forloop) {
+    renderCode.push(`if(${elm} === undefined) {`)
+  }
+
   Object.keys(templateObject).forEach((key) => {
     if (isReactiveKey(key)) {
       this.effectsCode.push(`
@@ -207,10 +225,6 @@ const generateComponentCode = function (
     }
   })
 
-  if (options.forloop) {
-    renderCode.push(`if(!${elm}) {`)
-  }
-
   renderCode.push(`
     componentType = props${counter}['is'] || '${templateObject[Symbol.for('componentType')]}'
 
@@ -256,6 +270,11 @@ const generateForLoopCode = function (templateObject, parent) {
   const key = templateObject['key']
   const forKey = interpolate(key, 'scope.')
 
+  const shallow = !!!(
+    templateObject['$shallow'] && templateObject['$shallow'].toLowerCase() === 'false'
+  )
+  delete templateObject['$shallow']
+
   delete templateObject['key']
   const regex = /(.+)\s+in\s+(.+)/gi
   //   const regex = /(:?\(*)(.+)\s+in\s+(.+)/gi
@@ -287,7 +306,12 @@ const generateForLoopCode = function (templateObject, parent) {
     const created${forStartCounter} = []
     const forloop${forStartCounter} = (collection = [], elms, created) => {
       const rawCollection = getRaw(collection)
-      const keys = new Set(rawCollection.map((${item}) => '' +  ${interpolate(key, '')}))
+      const keys = new Set()
+      let l = rawCollection.length
+      while(l--) {
+        const ${item} = rawCollection[l]
+        keys.add('' +  ${interpolate(key, '') || 'l'})
+      }
   `)
 
   // keep track of the index in the render code so we can inject
@@ -297,13 +321,13 @@ const generateForLoopCode = function (templateObject, parent) {
 
   ctx.renderCode.push(`
       created.length = 0
-      const length = collection.length
+      const length = rawCollection.length
       for(let __index = 0; __index < length; __index++) {
         const scope = Object.create(component)
         parent = ${parent}
         scope['${index}'] = __index
         scope['${item}'] = rawCollection[__index]
-        scope['key'] = ${forKey || '__index'}
+        scope['key'] = '' + ${forKey || '__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
@@ -347,24 +371,33 @@ const generateForLoopCode = function (templateObject, parent) {
     (effect) => [...effect.matchAll(scopeRegex)].length !== 0
   )
 
-  ctx.renderCode.push(`
-    scope['${item}'] = collection[__index]
+  if (shallow === false) {
+    ctx.renderCode.push(`
+      scope['${item}'] = null
+      scope['${item}'] = collection[__index]
   `)
+  }
 
   // inner scope variables are part of the main forloop
   innerScopeEffects.forEach((effect) => {
     const key = effect.indexOf(`scope.${index}`) > -1 ? `'${interpolate(result[2], '')}'` : null
-    ctx.renderCode.push(`
-      effect(() => {
+    if (effect.indexOf("Symbol.for('props')") === -1) {
+      ctx.renderCode.push(`
+        effect(() => {
+          ${effect}
+        }, ${key})
+      `)
+    } else {
+      // props shouldn't be wrapped in an effect, but simply passed on
+      ctx.renderCode.push(`
         ${effect}
-      }, ${key})
-    `)
+      `)
+    }
   })
-
+  // if(elms[${forStartCounter}][0] && elms[${forStartCounter}][0].forComponent && elms[${forStartCounter}][0].forComponent.___layout) {
+  //   elms[${forStartCounter}][0].forComponent.___layout()
+  // }
   ctx.renderCode.push(`
-      if(elms[${forStartCounter}][0] && elms[${forStartCounter}][0].forComponent && elms[${forStartCounter}][0].forComponent.___layout) {
-        elms[${forStartCounter}][0].forComponent.___layout()
-      }
     }
   }`)
 
@@ -374,8 +407,8 @@ const generateForLoopCode = function (templateObject, parent) {
       let i = created.length
 
       while (i--) {
-        const key = created[i]
-        if (!keys.has(key)) {
+        if (keys.has(created[i]) === false) {
+          const key = created[i]
   `)
   const forEndCounter = counter
 
@@ -492,6 +525,7 @@ const interpolate = (val, component = 'component.') => {
 }
 
 const cast = (val = '', key = false, component = 'component.') => {
+  const dynamicArgumentRegex = /\$\w+/gi
   let castedValue
 
   // inline content
@@ -542,6 +576,21 @@ const cast = (val = '', key = false, component = 'component.') => {
   else if (val.startsWith('$')) {
     castedValue = `${component}${val.replace('$', '')}`
   }
+  // dynamic value in object
+  else if (dynamicArgumentRegex.exec(val)) {
+    const rex = /\w+\s*:\s*(?:[^\s,}]+|".*?"|'.*?')/g
+    const results = val.match(rex)
+    castedValue = {}
+    if (results) {
+      for (let i = 0; i < results.length; i++) {
+        const members = results[i].split(/\s*:\s*/)
+        if (members) {
+          populateFields(members[0], members[1], component, castedValue)
+        }
+      }
+    }
+    return interpolateObject(castedValue)
+  }
   // static string
   else {
     castedValue = `"${val}"`
@@ -563,3 +612,21 @@ const parseInlineContent = (val, component) => {
   }
   return val
 }
+
+// Populate value into target's prop
+const populateFields = (prop, val, component, target) => {
+  if (val.startsWith('$')) {
+    target[prop] = `${component}${val.replace('$', '')}`
+  } else {
+    target[prop] = val
+  }
+}
+
+const interpolateObject = (input) => {
+  const interpolatedResults = []
+  Object.keys(input).forEach((key) => {
+    interpolatedResults.push(`${key}: ${input[key]}`)
+  })
+
+  return ` { ${interpolatedResults.join(', ')} }`
+}

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

@@ -684,6 +684,138 @@ test('Generate code for a template with dynamic attributes with code to be evalu
   assert.end()
 })
 
+test('Generate code for a template with attribute (object)', (assert) => {
+  const templateObject = {
+    children: [
+      {
+        [Symbol.for('componentType')]: 'Element',
+        w: '100',
+        h: '100',
+        color: '{top: 0xff0000ff, bottom: 0x008000ff, left: 0xffff00ff }',
+      },
+    ],
+  }
+
+  const expectedRender = `
+    function anonymous(parent,component,context,components,effect,getRaw) {
+      const elms = []
+      let componentType
+      const rootComponent = component
+      const elementConfig0 = {}
+
+      elms[0] = this.element({parent: parent || 'root'}, component)
+      elementConfig0['w'] = 100
+      elementConfig0['h'] = 100
+      elementConfig0['color'] = "{top: 0xff0000ff, bottom: 0x008000ff, left: 0xffff00ff}"
+      elms[0].populate(elementConfig0)
+
+      return elms
+    }
+  `
+
+  const actual = generator.call(scope, templateObject)
+  console.log(actual.render.toString())
+  assert.equal(
+    normalize(actual.render.toString()),
+    normalize(expectedRender),
+    'Generator should return a render function with the correct code'
+  )
+  assert.ok(
+    Array.isArray(actual.effects) && actual.effects.length === 0,
+    'Generator should return an empty effects array'
+  )
+
+  assert.end()
+})
+
+test('Generate code for a template with dynamic attribute (object)', (assert) => {
+  const templateObject = {
+    children: [
+      {
+        [Symbol.for('componentType')]: 'Element',
+        w: '100',
+        h: '100',
+        color: '{top: $colorT, bottom: $colorB, left:$colorL}',
+      },
+    ],
+  }
+
+  const expectedRender = `
+    function anonymous(parent,component,context,components,effect,getRaw) {
+      const elms = []
+      let componentType
+      const rootComponent = component
+      const elementConfig0 = {}
+
+      elms[0] = this.element({parent: parent || 'root'}, component)
+      elementConfig0['w'] = 100
+      elementConfig0['h'] = 100
+      elementConfig0['color'] =  { top: component.colorT, bottom: component.colorB, left: component.colorL }
+      elms[0].populate(elementConfig0)
+
+      return elms
+    }
+  `
+
+  const actual = generator.call(scope, templateObject)
+
+  assert.equal(
+    normalize(actual.render.toString()),
+    normalize(expectedRender),
+    'Generator should return a render function with the correct code'
+  )
+  assert.ok(
+    Array.isArray(actual.effects) && actual.effects.length === 0,
+    'Generator should return an empty effects array'
+  )
+
+  assert.end()
+})
+
+test('Generate code for a template with attribute (object) with mixed dynamic & static value', (assert) => {
+  const templateObject = {
+    children: [
+      {
+        [Symbol.for('componentType')]: 'Element',
+        w: '100',
+        h: '100',
+        color: '{top: 0xff0000ff, bottom: $colorB, left: $colorL}',
+      },
+    ],
+  }
+
+  const expectedRender = `
+    function anonymous(parent,component,context,components,effect,getRaw) {
+      const elms = []
+      let componentType
+      const rootComponent = component
+      const elementConfig0 = {}
+
+      elms[0] = this.element({parent: parent || 'root'}, component)
+      elementConfig0['w'] = 100
+      elementConfig0['h'] = 100
+      elementConfig0['color'] =  { top: 0xff0000ff, bottom: component.colorB, left: component.colorL }
+      elms[0].populate(elementConfig0)
+
+      return elms
+    }
+  `
+
+  const actual = generator.call(scope, templateObject)
+
+  assert.equal(
+    normalize(actual.render.toString()),
+    normalize(expectedRender),
+    'Generator should return a render function with the correct code'
+  )
+  assert.ok(
+    Array.isArray(actual.effects) && actual.effects.length === 0,
+    'Generator should return an empty effects array'
+  )
+
+  assert.end()
+})
+
 test('Generate code for a template with @-listeners', (assert) => {
   const templateObject = {
     children: [

package/src/lib/colors/colors.js

@@ -39,17 +39,16 @@ export default {
   normalize: (color = '', defaultColor = '0xffffffff') => {
     color = color.toString()
 
-    // its mappable, map it
-    if (colorsMap[color] !== undefined) {
-      return colorsMap[color]
-    }
-
-    // its a 0xRRGGBBAA color, store it and return it
+    // it is a 0xRRGGBBAA color, return it
     if (color.startsWith('0x') && color.length === 10) {
-      colorsMap[color] = color
       return color
     }
 
+    // it is a previously mapped color, return it
+    if (colorsMap[color] !== undefined) {
+      return colorsMap[color]
+    }
+
     // check for hex color
     if (hex.test(color)) {
       color = color.replace('#', '').toLowerCase()

package/src/lib/reactivity/reactive.js

@@ -30,11 +30,9 @@ export const getRaw = (value) => {
 const reactiveProxy = (original, _parent = null, _key) => {
   // don't create a proxy when a Blits component or an Image Texture
   // is assigned to a state variable
-  if (
-    (typeof original === 'object' && original[symbols.id]) ||
-    original.constructor.name === '_ImageTexture'
-  ) {
-    return original
+  if (typeof original === 'object') {
+    if (original[symbols.id] !== undefined) return original
+    if (original.constructor.name === '_ImageTexture') return original
   }
 
   // if original object is already a proxy, don't create a new one but return the existing one instead

package/src/lib/symbols.js

@@ -11,10 +11,10 @@ export default {
   init: Symbol('init'),
   inputEvents: Symbol('inputEvents'),
   intervals: Symbol('intervals'),
+  launched: Symbol('launched'),
   level: Symbol('level'),
   methodKeys: Symbol('methodKeys'),
   originalState: Symbol('originalState'),
-  pluginsRegistered: Symbol('pluginsRegistered'),
   propKeys: Symbol('propKeys'),
   raw: Symbol('raw'),
   ready: Symbol('ready'),

package/src/lib/templateparser/parser.js

@@ -28,7 +28,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
   // regular expressions
   const tagStartRegex = /^<\/?([a-zA-Z0-9_\-.]+)\s*/
   const tagEndRegex = /^\s*(\/?>)\s*/
-  const attrNameRegex = /^([A-Za-z0-9:.\-_@]+)=\s*(["'])/
+  const attrNameRegex = /^([A-Za-z0-9:.\-_@$]+)=\s*(["'])/
   const emptyTagStartRegex = /^<>\s*/
   const emptyTagEndRegex = /^\s*(<\/>)\s*/