@lightningjs/blits 1.51.0 → 2.0.0-beta.10

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

@@ -1,3 +1,20 @@
+/*
+ * 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
+ */
+
 /**
  * Symbol registry for internal framework properties and generated code.
  *
@@ -21,12 +38,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 +62,7 @@
  * @property {symbol} config
  * @property {symbol} isSlot
  * @property {symbol} props
+ * @property {symbol} parent
  * @property {symbol} slots
  * @property {symbol} componentType
  * @property {symbol} isComponent
@@ -75,12 +95,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 +138,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

@@ -1,3 +1,20 @@
+/*
+ * 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
+ */
+
 /**
  * A mapping of common screen resolution names to their scale factors relative to 1080p (Full HD).
  *
@@ -25,3 +42,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/plugin.js

@@ -1,3 +1,20 @@
+/*
+ * 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 log from './plugins/log.js'
 
 export const plugins = {

package/src/plugins/storage/localCookie.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 2019 Metrological
- *
- * Licensed under the Apache License, Version 2.0 (the License);
+ * 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
  *
@@ -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
  */
 
 // LocalStorage and Cookie storage library

package/src/router/router.js

@@ -254,20 +254,24 @@ 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(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)
+            beforeEachResult = await hooks.beforeEach.call(
+              this[symbols.parent],
+              route,
+              previousRoute
+            )
             if (isString(beforeEachResult)) {
               currentRoute = previousRoute
               to(beforeEachResult)
@@ -308,7 +312,11 @@ export const navigate = async function () {
       let beforeHookOutput
       if (route.hooks.before) {
         try {
-          beforeHookOutput = await route.hooks.before.call(this.parent, route, previousRoute)
+          beforeHookOutput = await route.hooks.before.call(
+            this[symbols.parent],
+            route,
+            previousRoute
+          )
           if (isString(beforeHookOutput)) {
             currentRoute = previousRoute
             to(beforeHookOutput)
@@ -517,12 +525,12 @@ 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(
-              this.parent,
+              this[symbols.parent],
               route, // to
               previousRoute // from
             )
@@ -535,7 +543,7 @@ export const navigate = async function () {
       if (route.hooks.after) {
         try {
           await route.hooks.after.call(
-            this.parent,
+            this[symbols.parent],
             route, // to
             previousRoute // from
           )
@@ -545,9 +553,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`)
       }
     }
   }
@@ -641,11 +649,11 @@ const setOrAnimate = (node, transition, shouldAnimate = true) => {
   })
 }
 
-export const to = (location, data = {}, options = {}) => {
+export const to = (path, data = {}, options = {}) => {
   navigationData = data
   overrideOptions = options
 
-  window.location.hash = location
+  location.hash = path.replace(/^#/, '')
 }
 
 export const back = function () {
@@ -682,7 +690,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
+        }
+      })
+    },
+  }
+}

package/vite/inject-dev-config.js

@@ -1,3 +1,20 @@
+/*
+ * 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
+ */
+
 export default function injectDevFlag() {
   return {
     name: 'inject-dev-config',

package/vite/msdfGenerator.js

@@ -18,8 +18,7 @@
 import path from 'path'
 import * as fs from 'fs'
 import { createHash } from 'crypto'
-import { genFont, setGeneratePaths } from '@lightningjs/msdf-generator'
-import { adjustFont } from '@lightningjs/msdf-generator/adjustFont'
+import { createRequire } from 'module'
 
 class TaskQueue {
   constructor() {
@@ -42,6 +41,48 @@ let config
 let checksumPaths = []
 let checksumData = []
 
+let msdfLoaded = false
+let genFont, setGeneratePaths, adjustFont
+async function loadMsdfModules() {
+  // do not try to load it repeatedly
+  if (msdfLoaded) return true
+
+  try {
+    // Create a require function that resolves from the app's working directory
+    // This ensures the msdf-generator is resolved from the app's node_modules
+    const userRequire = createRequire(process.cwd() + '/')
+
+    const msdfGeneratorPath = userRequire.resolve('@lightningjs/msdf-generator')
+    const msdfGeneratorUrl = new URL(`file:///${msdfGeneratorPath.replace(/\\/g, '/')}`).href
+    const msdfGenerator = await import(msdfGeneratorUrl)
+    genFont = msdfGenerator.genFont
+    setGeneratePaths = msdfGenerator.setGeneratePaths
+
+    const adjustFontPath = userRequire.resolve('@lightningjs/msdf-generator/adjustFont')
+    const adjustFontUrl = new URL(`file:///${adjustFontPath.replace(/\\/g, '/')}`).href
+    const adjustFontModule = await import(adjustFontUrl)
+    adjustFont = adjustFontModule.adjustFont
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function getMsdfReady() {
+  msdfLoaded = await loadMsdfModules()
+
+  if (!msdfLoaded) {
+    console.error('\n\x1b[31mError: @lightningjs/msdf-generator package is not installed.\x1b[0m')
+    console.error(
+      'This package is required for generating MSDF fonts during development and build.\n'
+    )
+    console.error('\nPlease install it as a dev dependency in your project:\n')
+    console.error('   \x1b[33mnpm install --save-dev @lightningjs/msdf-generator\x1b[0m\n')
+
+    process.exit(1)
+  }
+}
+
 export default function () {
   let msdfOutputDir = ''
   let buildOutputPath = ''
@@ -156,15 +197,20 @@ export default function () {
 }
 
 const generateSDF = async (inputFilePath, outputDirPath, configFilePath) => {
+  // plugin only required if there is a msdf conversion
+  // so it is better to check when generateSDF is called
+  await getMsdfReady()
+
   // Ensure the destination directory exists
   fs.mkdirSync(outputDirPath, { recursive: true })
-
   setGeneratePaths(path.dirname(inputFilePath), outputDirPath, configFilePath)
 
   let font = await genFont(path.basename(inputFilePath), 'msdf')
-
-  if (font) await adjustFont(font)
-  else console.error('Failed to generate MSDF file')
+  if (font) {
+    await adjustFont(font)
+  } else {
+    console.error('Failed to generate MSDF file')
+  }
 }
 
 // Finds all font files (.ttf, .otf, .woff) in a directory