@lightningjs/blits 1.1.0 → 1.3.0

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
 
@@ -458,7 +491,7 @@ const generateCode = function (templateObject, parent = false, options = {}) {
 const interpolate = (val, component = 'component.') => {
   if (val === undefined) return val
   const replaceString = /('.*?')+/gi
-  const replaceDollar = /\$/gi
+  const replaceDollar = /\$(\$(?=\$)|\$?)/g
   const matches = val.matchAll(replaceString)
   const restore = []
 
@@ -471,10 +504,19 @@ const interpolate = (val, component = 'component.') => {
     i++
   }
 
-  // replace remaining dollar signs
-  val = val.replace(replaceDollar, component || '')
+  // replace dollar signs using the regex and function
+  val = val.replace(replaceDollar, (match, group1) => {
+    // single dollar sign
+    if (group1 === '') {
+      return component
+    }
+    // consecutive dollar sign, replace only the first $
+    else if (group1 === '$') {
+      return component + '$'
+    }
+  })
 
-  // restore string replacemenet
+  // restore string replacement
   restore.forEach((el, idx) => {
     val = val.replace(`[@@REPLACEMENT${idx}@@]`, el)
   })
@@ -483,6 +525,7 @@ const interpolate = (val, component = 'component.') => {
 }
 
 const cast = (val = '', key = false, component = 'component.') => {
+  const dynamicArgumentRegex = /\$\w+/gi
   let castedValue
 
   // inline content
@@ -533,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}"`
@@ -554,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: [
@@ -2290,3 +2422,55 @@ test('Generate code for a template with a simple for-loop on an Element with an
 
   assert.end()
 })
+
+test('Generate code for a template with double $$ (i.e. referencing a Blits plugin)', (assert) => {
+  const templateObject = {
+    children: [
+      {
+        [Symbol.for('componentType')]: 'Text',
+        ':content': "$$language.translate('hello')",
+      },
+    ],
+  }
+
+  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['content'] = component.$language.translate('hello')
+      elementConfig0['__textnode'] = true
+      elms[0].populate(elementConfig0)
+
+      return elms
+  }
+  `
+
+  const expectedEffect1 = `
+  function anonymous(component, elms, context, components, rootComponent, effect) {
+    elms[0].set('content', component.$language.translate('hello'))
+  }
+  `
+
+  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 === 1,
+    'Generator should return an effects array with 1 item'
+  )
+  assert.equal(
+    normalize(actual.effects[0].toString()),
+    normalize(expectedEffect1),
+    'Generator should return first render function with the correct code'
+  )
+
+  assert.end()
+})

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

@@ -14,6 +14,7 @@ export default {
   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*/
 

package/src/plugin.d.ts

@@ -0,0 +1,71 @@
+
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+declare namespace Plugin {
+
+  interface Plugin {
+    /**
+     * Name of the plugin. The plugin will be accessible on each Component's
+     * `this` scope under this name, prefixed with a `$` (i.e. myplugin => `this.$myplugin`)
+     */
+    name: string,
+    /**
+     * Singleton function that will be used to instantiate the plugin.
+     * Should do all necessary setup and ideally return an object with
+     * properties or methods that can be used in the App
+     */
+    plugin: () => any
+  }
+
+}
+
+
+/**
+ * Blits.Plugin()
+ *
+ * Method to register a plugin
+ */
+declare function Plugin(
+  /**
+   * Plugin object or singleton function that will be used to instantiate the
+   * plugin. Should do all necessary setup and ideally return an object with
+   * properties or methods that can be used in the App
+   */
+  plugin: Plugin.Plugin | (() => any),
+  /**
+   * Name of the plugin or options object, to be passed into the plugin instantiation.
+   *
+   * When passing a string, the value will be used as **name** of the plugin. The plugin
+   * will be accessible on each Component's `this` scope under this name, prefixed with a `$`
+   * (i.e. myplugin => `this.$myplugin`)
+   *
+   * Passing a name is **required** when `plugin` argument is a singleton function
+   *
+   * When passing an object, the value will be considered to be an `options` object.
+   * The options object will be passed into the plugin instantiation method. Can
+   * be used to set default values
+   */
+  nameOrOptions?: string | object,
+  /**
+   * Object with options to be passed into the plugin instantiation method.
+   * Can be used to set default values
+   */
+  options?: object
+) : void
+
+export default Plugin;

package/src/plugin.js

@@ -0,0 +1,23 @@
+export const plugins = {}
+
+const registerPlugin = (plugin, nameOrOptions = '', options = {}) => {
+  // map name and options depending on the arguments provided
+  let name
+  if (typeof nameOrOptions === 'object') {
+    options = nameOrOptions
+    name = ''
+  } else {
+    name = nameOrOptions
+  }
+
+  if (typeof plugin === 'function') {
+    if (name === '') {
+      throw Error('Error registering plugin: name is required for plugin')
+    }
+    plugins[name] = { plugin, options }
+  } else if (plugin.plugin) {
+    registerPlugin(plugin.plugin, plugin.name, options)
+  }
+}
+
+export default registerPlugin

package/src/{components/Image.orig.js → plugins/index.js}

@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Copyright 2024 Comcast Cable Communications Management, LLC
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -15,19 +15,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import Component from '../component.js'
-
-export default () =>
-  Component('Image', {
-    template: `
-      <Element :imageSource="$imageSource" />`,
-    props: ['src'],
-    computed: {
-      imageSource() {
-        if (/^(?:https?:)?\/\//i.test(this.src)) {
-          return this.src
-        }
-        return `${window.location.protocol}//${window.location.host}/${this.src}`
-      },
-    },
-  })
+export { default as language } from './language.js'