@lightningjs/blits 1.51.0 → 2.0.0-beta.10

package/src/engines/L3/shaderLoader.js

@@ -1,12 +1,79 @@
+/*
+ * 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
+ */
+
 import Settings from '../../settings.js'
 import { renderer } from './launch.js'
+import * as webglShaders from '@lightningjs/renderer/webgl/shaders'
+import * as canvasShaders from '@lightningjs/renderer/canvas/shaders'
+
+function registerBlitsDefaultShaders(
+  shManager,
+  Rounded,
+  Border,
+  Shadow,
+  RoundedWithBorder,
+  RoundedWithShadow,
+  RoundedWithBorderAndShadow,
+  HolePunch,
+  RadialGradient,
+  LinearGradient
+) {
+  shManager.registerShaderType('rounded', Rounded)
+  shManager.registerShaderType('border', Border)
+  shManager.registerShaderType('shadow', Shadow)
+  shManager.registerShaderType('roundedWithBorder', RoundedWithBorder)
+  shManager.registerShaderType('roundedWithShadow', RoundedWithShadow)
+  shManager.registerShaderType('roundedWithBorderAndShadow', RoundedWithBorderAndShadow)
+  shManager.registerShaderType('holePunch', HolePunch)
+  shManager.registerShaderType('radialGradient', RadialGradient)
+  shManager.registerShaderType('linearGradient', LinearGradient)
+}
 
 export default () => {
   const stage = renderer.stage
-  Settings.get('shaders', []).forEach((shader) => {
-    stage.shManager.registerShaderType(shader.name, shader.type)
-  })
-  Settings.get('effects', []).forEach((effect) => {
-    stage.shManager.registerShaderType(effect.name, effect.type)
-  })
+
+  const {
+    Rounded,
+    Border,
+    Shadow,
+    RoundedWithBorder,
+    RoundedWithShadow,
+    RoundedWithBorderAndShadow,
+    HolePunch,
+    RadialGradient,
+    LinearGradient,
+  } = Settings.get('renderMode', 'webgl') === 'webgl' ? webglShaders : canvasShaders
+
+  registerBlitsDefaultShaders(
+    stage.shManager,
+    Rounded,
+    Border,
+    Shadow,
+    RoundedWithBorder,
+    RoundedWithShadow,
+    RoundedWithBorderAndShadow,
+    HolePunch,
+    RadialGradient,
+    LinearGradient
+  )
+
+  const shaders = Settings.get('shaders', [])
+  const len = shaders.length
+  for (let i = 0; i < len; i++) {
+    stage.shManager.registerShaderType(shaders[i].name, shaders[i].type)
+  }
 }

package/src/engines/index.js

@@ -1 +1,18 @@
+/*
+ * Copyright 2023 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
+ */
+
 export { default as L3 } from './L3/index.js'

package/src/focus/focus.js

@@ -51,7 +51,7 @@ export default {
 
     // unfocus currently focused components
     if (focusedComponent !== null) {
-      if (focusChain[focusChain.length - 1] === component.parent) {
+      if (focusChain[focusChain.length - 1] === component[symbols.parent]) {
         focusChain.push(component)
       } else {
         const newFocusChain = getAncestors([component])
@@ -59,7 +59,7 @@ export default {
         while (i--) {
           // don't unfocus when part of the new focus chain
           if (newFocusChain.indexOf(focusChain[i]) > -1) break
-          focusChain[i].lifecycle.state = 'unfocus'
+          focusChain[i][symbols.lifecycle].state = 'unfocus'
         }
         focusChain = newFocusChain
       }
@@ -68,7 +68,7 @@ export default {
     // ensure that all components in the focus path have focus state
     let i = 0
     while (i < focusChain.length - 1) {
-      focusChain[i].lifecycle.state = 'focus'
+      focusChain[i][symbols.lifecycle].state = 'focus'
       i++
     }
 
@@ -113,8 +113,8 @@ export const getComponentWithInputEvent = (component, key) => {
       typeof component[symbols.inputEvents].any === 'function')
   ) {
     return component
-  } else if (component.parent !== undefined) {
-    return getComponentWithInputEvent(component.parent, key)
+  } else if (component[symbols.parent] !== undefined) {
+    return getComponentWithInputEvent(component[symbols.parent], key)
   } else return null
 }
 
@@ -126,11 +126,11 @@ export const getComponentWithInputEvent = (component, key) => {
 const setFocus = (component, event) => {
   Log.info(
     '\nFocus chain:\n',
-    focusChain.map((c, index) => '\t'.repeat(index) + '↳ ' + c.componentId).join('\n')
+    focusChain.map((c, index) => '\t'.repeat(index) + '↳ ' + c.$componentId).join('\n')
   )
 
   focusedComponent = component
-  component.lifecycle.state = 'focus'
+  component[symbols.lifecycle].state = 'focus'
 
   if (event instanceof KeyboardEvent) {
     const internalEvent = new KeyboardEvent('keydown', event)

package/src/focus/helpers.js

@@ -15,14 +15,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import symbols from '../lib/symbols.js'
+
 /**
  * Recursive function that retrieves the ancestors of a component
  * @param {Array} components
  * @returns array components
  */
 export const getAncestors = (components) => {
-  if (components[0].parent !== undefined) {
-    components.unshift(components[0].parent)
+  if (components[0][symbols.parent] !== undefined) {
+    components.unshift(components[0][symbols.parent])
     return getAncestors(components)
   }
   return components

package/src/focus/hover.js

@@ -17,6 +17,7 @@
 
 import { Log } from '../lib/log.js'
 import { getAncestors } from './helpers.js'
+import symbols from '../lib/symbols.js'
 
 let hoveredComponent = null
 let hoverChain = []
@@ -37,7 +38,7 @@ export default {
 
     // unhover currently hovered components
     if (hoveredComponent !== null) {
-      if (hoverChain[hoverChain.length - 1] === component.parent) {
+      if (hoverChain[hoverChain.length - 1] === component.$parent) {
         hoverChain.push(component)
       } else {
         const newhoverChain = getAncestors([component])
@@ -47,7 +48,7 @@ export default {
           if (newhoverChain.indexOf(hoverChain[i]) > -1) break
           // skip if component is destroyed
           if (hoverChain[i].eol !== true) {
-            hoverChain[i].lifecycle.state = 'unhover'
+            hoverChain[i][symbols.lifecycle].state = 'unhover'
           }
         }
         hoverChain = newhoverChain
@@ -59,7 +60,7 @@ export default {
     while (i < hoverChain.length - 1) {
       // skip if component is destroyed
       if (hoverChain[i].eol !== true) {
-        hoverChain[i].lifecycle.state = 'hover'
+        hoverChain[i][symbols.lifecycle].state = 'hover'
       }
       i++
     }
@@ -70,7 +71,7 @@ export default {
     if (hoveredComponent === null) return
     for (let i = 0; i < hoverChain.length; i++) {
       if (hoverChain[i].eol !== true) {
-        hoverChain[i].lifecycle.state = 'unhover'
+        hoverChain[i][symbols.lifecycle].state = 'unhover'
       }
     }
     hoveredComponent = null
@@ -85,9 +86,9 @@ export default {
 const setHover = (component) => {
   Log.info(
     '\nHover chain:\n',
-    hoverChain.map((c, index) => '\t'.repeat(index) + '↳ ' + c.componentId).join('\n')
+    hoverChain.map((c, index) => '\t'.repeat(index) + '↳ ' + c.$componentId).join('\n')
   )
 
   hoveredComponent = component
-  component.lifecycle.state = 'hover'
+  component[symbols.lifecycle].state = 'hover'
 }

package/src/helpers/fetchJson.js

@@ -1,10 +1,6 @@
 /*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2020 Metrological
- *
- * Licensed under the Apache License, Version 2.0 (the License);
+ * 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,6 +11,8 @@
  * 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
  */
 
 export default (file) => {

package/src/launch.js

@@ -41,9 +41,8 @@ import blitsPackageInfo from '../package.json' with { type: 'json' }
 
 /**
  * @typedef {import('@lightningjs/renderer').RendererMain} RendererMain
- * @type {RendererMain}
+ * @type {RendererMain | {}}
  */
-// @ts-ignore - We ignore this because it will be replaced by the renderer once the app is launched
 export let renderer = {}
 export const stage = {}
 

package/src/lib/codegenerator/generator.js

@@ -18,10 +18,13 @@
 let counter
 let isDev
 
+import { elementAttributes } from '../../engines/L3/element.js'
+
 export default function (templateObject = { children: [] }, devMode = false) {
   const ctx = {
     renderCode: [
       'const elms = []',
+      `const validAttributes = ${JSON.stringify(elementAttributes)}`,
       'const elementConfigs = []',
       'const forloops = []',
       'const props = []',
@@ -81,7 +84,7 @@ export default function (templateObject = { children: [] }, devMode = false) {
       forloops.length = 0
       props.length = 0
       skips.length = 0
-    }}
+    }, skips}
   `)
 
   return {
@@ -97,7 +100,16 @@ export default function (templateObject = { children: [] }, devMode = false) {
     ),
     effects: ctx.effectsCode.map(
       (code) =>
-        new Function('component', 'elms', 'context', 'components', 'rootComponent', 'effect', code)
+        new Function(
+          'component',
+          'elms',
+          'context',
+          'components',
+          'rootComponent',
+          'skips',
+          'effect',
+          code
+        )
     ),
     context: ctx.context,
   }
@@ -228,13 +240,43 @@ const generateElementCode = function (
     }
   })
 
+  if (templateObject[Symbol.for('tagContent')] !== undefined) {
+    const val = templateObject[Symbol.for('tagContent')]
+
+    // Check if the string contains interpolation (`{{ }}`).
+    const regex = /\{\{\s*.+?\s*\}\}/
+    const containsInterpolation = regex.test(val)
+
+    if (containsInterpolation === false) {
+      // Inline text is treated as static content when interpolation is not defined.
+      renderCode.push(`elementConfigs[${counter}]['content'] = '${val}'`)
+    } else {
+      const output = parseTagContent(val, options.component)
+      renderCode.push(`elementConfigs[${counter}]['content'] = ${output}`)
+
+      const variableRegEx = /\{\{\s*(?=[^}]*\$).+?\s*\}\}/
+      // Check if the interpolation contains $ variable
+      const isReactive = variableRegEx.test(val)
+      if (isReactive === true) {
+        this.effectsCode.push(`
+          ${elm}.set('content', ${output})
+        `)
+      }
+    }
+  }
+
   if (options.holder === true) {
     renderCode.push(`
     skips[${counter}] = []
-    if(typeof cmps[${counter}] !== 'undefined') {
-      for(let key in cmps[${counter}][Symbol.for('config')].props) {
-        delete elementConfigs[${counter}][cmps[${counter}][Symbol.for('config')].props[key]]
-        skips[${counter}].push(cmps[${counter}][Symbol.for('config')].props[key])
+    if(typeof cmps[${counter}] !== 'undefined' && cmps[${counter}][Symbol.for('config')].props !== undefined) {
+      // attributes that are a prop should be removed from element config (even if it's a know element prop)
+      let props = cmps[${counter}][Symbol.for('config')].props
+      if(Array.isArray(props) === false) props = Object.keys(cmps[${counter}][Symbol.for('config')].props)
+      for(let k = 0; k < props.length; k++) {
+        const key = props[k]
+        if(validAttributes.indexOf(key) !== -1) continue
+        delete elementConfigs[${counter}][key]
+        skips[${counter}].push(key)
       }
     }
     `)
@@ -571,9 +613,9 @@ const generateForLoopCode = function (templateObject, parent) {
   }
 
   // separate effects that only rely on variables in the itteration
-  const innerScopeEffects = ctx.effectsCode.filter(
-    (effect) => [...effect.matchAll(scopeRegex)].length === 0
-  )
+  const innerScopeEffects = ctx.effectsCode.filter((effect) => {
+    return [...effect.matchAll(scopeRegex)].length === 0
+  })
 
   // separate effects that (also) rely on variables in the outer scope
   const outerScopeEffects = ctx.effectsCode.filter(
@@ -622,11 +664,21 @@ const generateForLoopCode = function (templateObject, parent) {
   const forEndCounter = counter
 
   for (let i = forStartCounter; i <= forEndCounter; i++) {
-    destroyCode.push(`
+    if (i == forStartCounter) {
+      destroyCode.push(`
         elms[${i}][key] && elms[${i}][key].destroy()
         elms[${i}][key] = null
         delete elms[${i}][key]
     `)
+    } else {
+      destroyCode.push(`
+        if (elms[${i}][key] && elms[${i}][key].$componentId !== undefined) {
+          elms[${i}][key] && elms[${i}][key].destroy()
+        }
+        elms[${i}][key] = null
+        delete elms[${i}][key]
+      `)
+    }
   }
   destroyCode.push(`
       }
@@ -791,12 +843,12 @@ const cast = (val = '', key = false, component = 'component.') => {
     castedValue = parseFloat(val)
     if (val.endsWith('%')) {
       const map = {
-        w: 'width',
-        width: 'width',
-        x: 'width',
-        h: 'height',
-        height: 'height',
-        y: 'height',
+        w: 'w',
+        width: 'w',
+        x: 'w',
+        h: 'h',
+        height: 'h',
+        y: 'h',
       }
       const base = map[key]
       if (base) {
@@ -849,6 +901,65 @@ const cast = (val = '', key = false, component = 'component.') => {
   return castedValue
 }
 
+function escapeSingleQuotes(str) {
+  return str.replace(/(\\*)'/g, (match, backslashes) => {
+    // If the number of backslashes is odd, quote is already escaped
+    if (backslashes.length % 2 === 1) {
+      return match
+    }
+    // Otherwise, escape the quote
+    return backslashes + "\\'"
+  })
+}
+
+const parseTagContent = (val = '', component = 'component.') => {
+  // unescaped single quotes must be escaped while preserving escaped backslashes
+  let escapedVal = escapeSingleQuotes(val)
+
+  const dynamicParts = /\{\{\s*.+?\s*\}\}/g
+  const matches = [...escapedVal.matchAll(dynamicParts)]
+
+  if (matches.length > 0) {
+    const isValStartsWithBrace = escapedVal.startsWith('{{')
+    const isValEndsWithBrace = escapedVal.endsWith('}}')
+    for (let matchObj of matches) {
+      const { 0: match, index } = matchObj
+      const isMatchAtStart = index === 0
+      const isMatchAtLast = val[index + match.length] === undefined ? true : false
+
+      let parsedMatch = match
+
+      const replaceDollar = /\$(\$(?=\$)|\$?)/g
+      const dollarMatches = [...parsedMatch.matchAll(replaceDollar)]
+      if (dollarMatches.length > 0) {
+        parsedMatch = parsedMatch.replace(replaceDollar, (match, group1) => {
+          if (group1 === '') {
+            return component
+          } else if (group1 === '$') {
+            return component + '$'
+          }
+        })
+      }
+
+      parsedMatch = parsedMatch.replace('{{', '(').replace('}}', ')')
+      if (isMatchAtStart === false) {
+        parsedMatch = `"+${parsedMatch}`
+      }
+      if (isMatchAtLast === false) {
+        parsedMatch = `${parsedMatch}+"`
+      }
+      escapedVal = escapedVal.replace(match, parsedMatch)
+    }
+    if (isValStartsWithBrace === false) {
+      escapedVal = '"' + escapedVal
+    }
+    if (isValEndsWithBrace === false) {
+      escapedVal = escapedVal + '"'
+    }
+  }
+  return escapedVal
+}
+
 const isReactiveKey = (str) => str.startsWith(':')
 
 const parseInlineContent = (val, component) => {

package/src/lib/colors/colors.js

@@ -86,7 +86,6 @@ export default {
       console.warn('HSL(A) color format is not supported yet')
       return '0xffffffff'
     }
-
     return defaultColor
   },
 }

package/src/lib/lifecycle.js

@@ -31,8 +31,8 @@ const states = [
   'ready', // fired when component instantiated, reactivity setup done and template spawned
   'focus', // fired when receiving focus (can occur multiple times)
   'unfocus', // fired when losing focus (can occur multiple times)
-  'hover', // fired when receiving focus (can occur multiple times)
-  'unhover', // fired when losing focus (can occur multiple times)
+  'hover', // fired when pointer enters the component (mouse support only; can occur multiple times)
+  'unhover', // fired when pointer leaves the component (mouse support only; can occur multiple times)
   'destroy', // fired when component is destroyed and removed
   'attach', // fired when entering the viewport margin and attached to the render tree
   'detach', // fired when leaving the viewport margin and detached from the render tree
@@ -77,7 +77,7 @@ export default {
   set state(v) {
     if ((states.indexOf(v) > -1 && v !== this.current) || v === 'refocus') {
       Log.debug(
-        `Setting lifecycle state from ${this.current} to ${v} for ${this.component.componentId}`
+        `Setting lifecycle state from ${this.current} to ${v} for ${this.component.$componentId}`
       )
       this.previous = this.current
       this.current = v
@@ -86,19 +86,17 @@ export default {
       privateEmit(v, this.component[symbols.identifier], this.component)
       // emit 'public' hook
       emit(v, this.component[symbols.identifier], this.component)
-      // update the built-in hasFocus state variable
-      if (v === 'focus') this.component[symbols.state].hasFocus = true
-      if (v === 'unfocus') this.component[symbols.state].hasFocus = false
+      // update the built-in $hasFocus state variable
       if (v === 'focus' || v === 'unfocus') {
         if (inspectorEnabled === null) {
           inspectorEnabled = Settings.get('inspector', false)
         }
       }
       // update the built-in isHovered state variable
-      if (v === 'hover') this.component[symbols.state].isHovered = true
-      if (v === 'unhover') this.component[symbols.state].isHovered = false
+      if (v === 'hover') this.component[symbols.state].$isHovered = true
+      if (v === 'unhover') this.component[symbols.state].$isHovered = false
       if (v === 'focus') {
-        this.component[symbols.state].hasFocus = true
+        this.component[symbols.state].$hasFocus = true
         if (
           inspectorEnabled === true &&
           this.component[symbols.holder] &&
@@ -108,7 +106,7 @@ export default {
         }
       }
       if (v === 'unfocus') {
-        this.component[symbols.state].hasFocus = false
+        this.component[symbols.state].$hasFocus = false
         if (
           inspectorEnabled === true &&
           this.component[symbols.holder] &&

package/src/lib/log.js

@@ -46,7 +46,7 @@ const logger = (context) => {
       return (
         ((level >= 1 || (Array.isArray(level) && level.indexOf('info') > -1)) &&
           console.info.bind(
-            window.console,
+            console,
             `%c ⚡️ ${context} %c ${time()}`,
             'background-color: #0284c7; color: white; padding: 3px 6px 3px 1px; border-radius: 3px',
             'color: ##94a3b8;'
@@ -61,7 +61,7 @@ const logger = (context) => {
       return (
         ((level >= 1 || (Array.isArray(level) && level.indexOf('warn') > -1)) &&
           console.warn.bind(
-            window.console,
+            console,
             `%c ⚡️ ${context} %c ${time()}`,
             'background-color: #fbbf24; color: white; padding: 3px 6px 3px 1px; border-radius: 3px',
             'color: ##94a3b8;'
@@ -76,7 +76,7 @@ const logger = (context) => {
       return (
         ((level >= 1 || (Array.isArray(level) && level.indexOf('error') > -1)) &&
           console.error.bind(
-            window.console,
+            console,
             `%c ⚡️ ${context} %c ${time()}`,
             'background-color: #dc2626; color: white; padding: 3px 6px 3px 1px; border-radius: 3px',
             'color: ##94a3b8;'
@@ -91,7 +91,7 @@ const logger = (context) => {
       return (
         ((level >= 2 || (Array.isArray(level) && level.indexOf('debug') > -1)) &&
           console.debug.bind(
-            window.console,
+            console,
             `%c ⚡️ ${context} %c (${new Date().toLocaleTimeString([], {
               hour: '2-digit',
               minute: '2-digit',

package/src/lib/reactivityguard/computedprops.js

@@ -293,24 +293,38 @@ export default (code) => {
 const extractThisReferences = (funcBody) => {
   const thisRefs = new Set()
 
-  // Find all this.X references, but exclude method calls
-  const refRegex = /this\.\w+(?!\s*\()/g // matches this.X but not this.X() or this.X.Y()
+  // Match full property chains, including optional chaining
+  const refRegex = /this(?:\.[$\w]+|\?\.[$\w]+)+/g
   let refMatch
 
   while ((refMatch = refRegex.exec(funcBody)) !== null) {
     const fullRef = refMatch[0]
 
-    // Extract just the variable part (this.X)
-    // We need to avoid method calls or chained methods
-    const varRef = fullRef.split('.').slice(0, 2).join('.')
-
-    // Don't add if it's part of a method call
-    if (
-      !funcBody
-        .substring(refMatch.index)
-        .match(new RegExp(`^${varRef.replace(/\./g, '\\.')}\\s*\\(`))
-    ) {
-      thisRefs.add(varRef)
+    const segmentRegex = /(\??\.)([$\w]+)/g
+    let segMatch
+    let lastValidRef = 'this'
+
+    while ((segMatch = segmentRegex.exec(fullRef.substring(4))) !== null) {
+      const candidate = 'this' + fullRef.substring(4, 4 + segMatch.index + segMatch[0].length)
+      const afterCandidate = funcBody.substring(refMatch.index + candidate.length)
+      if (afterCandidate.match(/^\s*\(/)) {
+        break
+      }
+      lastValidRef = candidate
+    }
+
+    if (lastValidRef !== 'this') {
+      thisRefs.add(lastValidRef)
+    }
+  }
+
+  // Remove shorter prefixes when a longer chain already covers them
+  for (const ref of [...thisRefs]) {
+    for (const other of thisRefs) {
+      if (other !== ref && other.startsWith(ref + '.')) {
+        thisRefs.delete(ref)
+        break
+      }
     }
   }