@lightningjs/blits 1.45.0 → 2.0.0-beta.1

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,
   }
@@ -220,13 +232,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)
       }
     }
     `)
@@ -409,7 +451,7 @@ const generateForLoopCode = function (templateObject, parent) {
     .replace(')', '')
     .split(/\s*,\s*/)
 
-  const scopeRegex = new RegExp(`(scope\\.(?!${item}\\.|${index}|key)([\\w$]+))`, 'gi')
+  const scopeRegex = new RegExp(`(scope\\.(?!${item}\\.|${index}|key)(\\$?\\w+))`, 'gi')
 
   // local context
   const ctx = {
@@ -540,9 +582,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(
@@ -760,12 +802,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) {
@@ -813,6 +855,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

@@ -72,7 +72,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
@@ -82,8 +82,8 @@ export default {
       // 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
+      if (v === 'focus') this.component[symbols.state].$hasFocus = true
+      if (v === 'unfocus') this.component[symbols.state].$hasFocus = false
     }
   },
 }

package/src/lib/precompiler/precompiler.js

@@ -17,7 +17,6 @@
 
 import parser from '../templateparser/parser.js'
 import generator from '../codegenerator/generator.js'
-import MagicString from 'magic-string'
 
 export default (source, filePath, mode) => {
   if (
@@ -27,9 +26,12 @@ export default (source, filePath, mode) => {
     /\{.*?template\s*:\s*(['"`])((?:\\?.)*?)\1.*?\}/s.test(source) // object with template key
   ) {
     const templates = source.matchAll(/(?<!\/\/\s*)template\s*:\s*(['"`])((?:\\?.)*?)\1/gs)
-
-    // Use MagicString to track changes
-    const s = new MagicString(source)
+    let newSource = source
+    /*
+      if there are multiple templates in the file, we need to keep
+      track of the offset caused by the previous replacements
+    */
+    let offset = 0
 
     for (const template of templates) {
       if (template[2]) {
@@ -37,8 +39,7 @@ export default (source, filePath, mode) => {
 
         // Only process if it looks like a Blits template
         if (templateContent.match(/^\s*(<!--[\s\S]*?-->|<[A-Za-z][^>]*>)/s)) {
-          // Use original indices - MagicString handles position tracking automatically
-          const templateStartIndex = template.index
+          const templateStartIndex = template.index + offset
           const templateEndIndex = templateStartIndex + template[0].length
 
           // Parse the template
@@ -57,26 +58,16 @@ export default (source, filePath, mode) => {
             (fn) => fn.toString()
           )}], context: {}}`
 
-          // MagicString tracks all changes automatically, no offset needed
-          s.overwrite(templateStartIndex, templateEndIndex, replacement)
-        }
-      }
-    }
-
-    const newSource = s.toString()
+          offset += replacement.length - template[0].length
 
-    if (newSource !== source) {
-      const fileName = filePath.split(/[\\/]/).pop()
-      return {
-        code: newSource,
-        map: s.generateMap({
-          hires: true,
-          source: fileName,
-          includeContent: true,
-          file: fileName,
-        }),
+          newSource =
+            newSource.substring(0, templateStartIndex) +
+            replacement +
+            newSource.substring(templateEndIndex)
+        }
       }
     }
+    return newSource
   }
   return source
 }

package/src/lib/reactivityguard/computedprops.js

@@ -213,12 +213,7 @@ export default (code) => {
       modifiedCode = modifiedCode.replace(mod.original, mod.replacement)
     }
 
-    // Returning code without a source map
-    // Vite will automatically chain this with the next plugin's source map (preCompiler)
-    return {
-      code: modifiedCode,
-      map: { mappings: '' },
-    }
+    return { code: modifiedCode }
   }
 
   return null

package/src/lib/shaders/shaders.js

@@ -0,0 +1,163 @@
+/*
+ * 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)
+    }
+    if (Array.isArray(v) === true) {
+      return v.map((i) => this.parseProp(i))
+    }
+  },
+  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

@@ -20,12 +20,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
@@ -42,6 +44,7 @@
  * @property {symbol} config
  * @property {symbol} isSlot
  * @property {symbol} props
+ * @property {symbol} parent
  * @property {symbol} slots
  * @property {symbol} componentType
  * @property {symbol} isComponent
@@ -73,12 +76,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'),
@@ -113,4 +119,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

@@ -245,17 +245,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)
@@ -502,9 +502,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`)
       }
     }
   }
@@ -626,7 +626,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
+        }
+      })
+    },
+  }
+}