@lightningjs/blits 1.48.0 → 2.0.0-beta.2

package/src/focus.js

@@ -50,7 +50,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])
@@ -58,7 +58,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
       }
@@ -67,7 +67,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++
     }
 
@@ -105,8 +105,8 @@ export default {
  * @returns array components
  */
 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
@@ -125,8 +125,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
 }
 
@@ -138,11 +138,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/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,
   }
@@ -224,13 +236,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)
       }
     }
     `)
@@ -567,9 +609,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(
@@ -787,12 +829,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) {
@@ -845,6 +887,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

@@ -75,7 +75,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
@@ -84,14 +84,14 @@ 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
+      // update the built-in $hasFocus state variable
       if (v === 'focus' || v === 'unfocus') {
         if (inspectorEnabled === null) {
           inspectorEnabled = Settings.get('inspector', false)
         }
       }
       if (v === 'focus') {
-        this.component[symbols.state].hasFocus = true
+        this.component[symbols.state].$hasFocus = true
         if (
           inspectorEnabled === true &&
           this.component[symbols.holder] &&
@@ -101,7 +101,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/shaders/shaders.js

@@ -0,0 +1,164 @@
+/*
+ * 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
+ */
+
+import { renderer } from '../../engines/L3/launch.js'
+import { parseToObject, isObjectString, isArrayString } from '../utils.js'
+import colors from '../colors/colors.js'
+
+const parseBorder = (border, props = {}, prefixed = false) => {
+  const prefix = prefixed === true ? 'border-' : ''
+  if (isNaN(border) === false) {
+    props[prefix + 'w'] = border
+    return
+  }
+  if (Array.isArray(border) === true) {
+    props[prefix + 'w'] = border
+    return
+  }
+  if (isArrayString(border) === true) {
+    props[prefix + 'w'] = JSON.parse(border)
+    return
+  }
+  if (typeof border === 'object' || isObjectString(border) === true) {
+    border = typeof border === 'string' ? parseToObject(border) : border
+    for (const key in border) {
+      props[prefix + key] = border[key]
+    }
+    return
+  }
+}
+
+const parseShadow = (shadow, props = {}, prefixed = false) => {
+  const prefix = prefixed === true ? 'shadow-' : ''
+  if (Array.isArray(shadow) === true) {
+    props[prefix + 'projection'] = shadow
+    return
+  }
+  if (isArrayString(shadow) === true) {
+    props[prefix + 'projection'] = JSON.parse(shadow)
+    return
+  }
+  if (typeof shadow === 'object' || isObjectString(shadow) === true) {
+    shadow = typeof shadow === 'string' ? parseToObject(shadow) : shadow
+    for (const key in shadow) {
+      props[prefix + key] = shadow[key]
+    }
+    return
+  }
+}
+
+const parseRounded = (rounded, props = {}) => {
+  if (isNaN(rounded) === false) {
+    props.radius = rounded
+    return
+  }
+  if (Array.isArray(rounded) === true) {
+    props.radius = rounded
+    return
+  }
+  if (isArrayString(rounded) === true) {
+    props.radius = JSON.parse(rounded)
+    return
+  }
+  if (typeof rounded === 'object' || isObjectString(rounded) === true) {
+    rounded = typeof rounded === 'string' ? parseToObject(rounded) : rounded
+    for (const key in rounded) {
+      props[key] = rounded[key]
+    }
+    return
+  }
+}
+
+export default {
+  createElementProps(v) {
+    let { border, shadow, rounded } = v
+    const props = {}
+    const hasRounded = rounded !== undefined
+    const hasBorder = border !== undefined
+    const hasShadow = shadow !== undefined
+
+    if (border !== undefined) {
+      parseBorder(border, props, hasRounded || hasShadow)
+    }
+
+    if (shadow !== undefined) {
+      parseShadow(shadow, props, hasRounded || hasBorder)
+    }
+
+    if (hasRounded === true) {
+      parseRounded(rounded, props)
+    }
+    return props
+  },
+  createElementShader(v) {
+    let { border, shadow, rounded } = v
+    const props = this.createElementProps(v)
+    const hasShadow = shadow !== undefined
+    const hasBorder = border !== undefined
+    const hasRounded = rounded !== undefined
+
+    if (hasBorder === true && hasShadow === true) {
+      return renderer.createShader('roundedWithBorderAndShadow', props)
+    }
+
+    if (hasRounded === true) {
+      if (hasBorder === true) {
+        return renderer.createShader('roundedWithBorder', props)
+      }
+
+      if (hasShadow === true) {
+        return renderer.createShader('roundedWithShadow', props)
+      }
+
+      return renderer.createShader('rounded', props)
+    }
+
+    if (hasRounded === false && hasBorder === true) {
+      return renderer.createShader('border', props)
+    }
+
+    //only possible result left
+    return renderer.createShader('shadow', props)
+  },
+  parseProp(v) {
+    if (typeof v === 'number') {
+      return v
+    }
+    if (typeof v === 'string') {
+      return colors.normalize(v, v)
+    }
+    if (Array.isArray(v) === true) {
+      return v.map((i) => this.parseProp(i))
+    }
+    return v
+  },
+  parseProps(v) {
+    if (typeof v === 'string') {
+      v = parseToObject(v)
+    }
+    const keys = Object.keys(v)
+    const length = keys.length
+    for (let i = 0; i < length; i++) {
+      const key = keys[i]
+      if (key === 'type') {
+        continue
+      }
+      v[key] = this.parseProp(v[key])
+    }
+    return v
+  },
+}

package/src/lib/symbols.js

@@ -21,12 +21,14 @@
  * @property {symbol} isProxy
  * @property {symbol} launched
  * @property {symbol} level
+ * @property {symbol} lifecycle
  * @property {symbol} methodKeys
  * @property {symbol} originalState
  * @property {symbol} propKeys
  * @property {symbol} raw
  * @property {symbol} ready
  * @property {symbol} renderer
+ * @property {symbol} rootParent
  * @property {symbol} routes
  * @property {symbol} routerHooks
  * @property {symbol} settings
@@ -43,6 +45,7 @@
  * @property {symbol} config
  * @property {symbol} isSlot
  * @property {symbol} props
+ * @property {symbol} parent
  * @property {symbol} slots
  * @property {symbol} componentType
  * @property {symbol} isComponent
@@ -75,12 +78,15 @@ export default {
   isProxy: Symbol('isProxy'),
   launched: Symbol('launched'),
   level: Symbol('level'),
+  lifecycle: Symbol('lifecycle'),
   methodKeys: Symbol('methodKeys'),
   originalState: Symbol('originalState'),
+  parent: Symbol('parent'),
   propKeys: Symbol('propKeys'),
   raw: Symbol('raw'),
   ready: Symbol('ready'),
   renderer: Symbol('renderer'),
+  rootParent: Symbol('rootParent'),
   routes: Symbol('routes'),
   routerHooks: Symbol('routerHooks'),
   settings: Symbol('settings'),
@@ -115,4 +121,6 @@ export default {
   effects: Symbol.for('effects'),
   // Symbol 'removeGlobalEffects' utilized within generated code
   removeGlobalEffects: Symbol.for('removeGlobalEffects'),
+  // Symbol 'removeGlobalEffects' utilized within generated code
+  tagContent: Symbol.for('tagContent'),
 }

package/src/lib/templateparser/parser.js

@@ -143,7 +143,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
       if (currentTag[symbols.type] === 'opening') {
         const tagContent = template.slice(cursor, template.indexOf('<', cursor))
         if (tagContent) {
-          currentTag.content = tagContent
+          currentTag[Symbol.for('tagContent')] = tagContent
           cursor += tagContent.length
         }
       }
@@ -189,7 +189,11 @@ export default (template = '', componentName, parentComponent, filePath = null)
     }
 
     // process color values
-    if (['color', ':color', ':effects', 'effects'].includes(name)) {
+    if (
+      ['color', ':color', ':border', 'border', 'shadow', ':shadow', 'shader', ':shader'].includes(
+        name
+      )
+    ) {
       return processColors(name, value)
     }
     return { name, value }

package/src/lib/utils.js

@@ -25,3 +25,39 @@ export const screenResolutions = {
   '2160p': 2,
   2160: 2,
 }
+
+/**
+ * Checks if a value is a transition object.
+ * @param {any} value - The value to check.
+ * @returns {boolean} True if the value is a transition object, false otherwise.
+ */
+export const isTransition = (value) => {
+  return value !== null && typeof value === 'object' && 'transition' in value === true
+}
+
+/**
+ * Checks if a string is an object string (starts and ends with curly braces).
+ * @param {string} str - The string to check.
+ * @returns {boolean} True if the string is an object string, false otherwise.
+ */
+export const isObjectString = (str) => {
+  return typeof str === 'string' && str.startsWith('{') && str.endsWith('}')
+}
+
+/**
+ * Checks if a string is an array string (starts and ends with brackets).
+ * @param {string} str - The string to check.
+ * @returns {boolean} True if the string is an object string, false otherwise.
+ */
+export const isArrayString = (str) => {
+  return typeof str === 'string' && str.startsWith('[') && str.endsWith(']')
+}
+
+/**
+ * Parses a string into an object, converting single quotes to double and adding quotes to keys.
+ * @param {string} str - The string to parse.
+ * @returns {object} The parsed object.
+ */
+export const parseToObject = (str) => {
+  return JSON.parse(str.replace(/'/g, '"').replace(/([\w-_]+)\s*:/g, '"$1":'))
+}

package/src/router/router.js

@@ -249,17 +249,17 @@ export const navigate = async function () {
   Announcer.clear()
   state.navigating = true
   let reuse = false
-  if (preventHashChangeNavigation === false && this.parent[symbols.routes]) {
+  if (preventHashChangeNavigation === false && this[symbols.parent][symbols.routes]) {
     let previousRoute = currentRoute //? Object.assign({}, currentRoute) : undefined
-    let route = matchHash(getHash(document.location.hash), this.parent[symbols.routes])
+    let route = matchHash(getHash(document.location.hash), this[symbols.parent][symbols.routes])
 
     currentRoute = route
 
     if (route) {
       const currentPath = currentRoute.path
       let beforeEachResult
-      if (this.parent[symbols.routerHooks]) {
-        const hooks = this.parent[symbols.routerHooks]
+      if (this[symbols.parent][symbols.routerHooks]) {
+        const hooks = this[symbols.parent][symbols.routerHooks]
         if (hooks.beforeEach) {
           try {
             beforeEachResult = await hooks.beforeEach.call(this.parent, route, previousRoute)
@@ -507,8 +507,8 @@ export const navigate = async function () {
         }
       }
 
-      if (this.parent[symbols.routerHooks]) {
-        const hooks = this.parent[symbols.routerHooks]
+      if (this[symbols.parent][symbols.routerHooks]) {
+        const hooks = this[symbols.parent][symbols.routerHooks]
         if (hooks.afterEach) {
           try {
             await hooks.afterEach.call(
@@ -535,9 +535,9 @@ export const navigate = async function () {
       }
     } else {
       Log.error(`Route ${route.hash} not found`)
-      const routerHooks = this.parent[symbols.routerHooks]
+      const routerHooks = this[symbols.parent][symbols.routerHooks]
       if (routerHooks && typeof routerHooks.error === 'function') {
-        routerHooks.error.call(this.parent, `Route ${route.hash} not found`)
+        routerHooks.error.call(this[symbols.parent], `Route ${route.hash} not found`)
       }
     }
   }
@@ -659,7 +659,7 @@ export const back = function () {
     }
     // Construct new path to backtrack to
     path = path.replace(hashEnd, '')
-    const route = matchHash(getHash(path), this.parent[symbols.routes])
+    const route = matchHash(getHash(path), this[symbols.parent][symbols.routes])
 
     if (route && backtrack) {
       to(route.path, route.data, route.options)

package/vite/blitsTips.js

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2025 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
+ */
+
+const tips = ['tip1', 'tip2', 'tip3']
+
+let hmrCount = 0
+let lastTipLines = 0
+const HMR_THRESHOLD = 4
+
+function showTip() {
+  const tip = tips[Math.floor(Math.random() * tips.length)]
+
+  // Clear previous tip (move up and erase lines)
+  if (lastTipLines > 0) {
+    process.stdout.write(`\x1B[${lastTipLines}A`)
+    for (let i = 0; i < lastTipLines; i++) {
+      process.stdout.write('\x1B[2K\x1B[1E') // clear line + move down
+    }
+    process.stdout.write(`\x1B[${lastTipLines}A`)
+  }
+
+  // Print new tip
+  const lines = [`💡 Blits Tip: ${tip}`, '']
+  lastTipLines = lines.length
+  process.stdout.write(lines.join('\n') + '\n')
+}
+
+export default function blitsTipsPlugin() {
+  return {
+    name: 'vite:blits-tips',
+    apply: 'serve',
+
+    configureServer(server) {
+      server.watcher.on('change', () => {
+        hmrCount++
+        if (hmrCount >= HMR_THRESHOLD) {
+          showTip()
+          hmrCount = 0
+        }
+      })
+    },
+  }
+}