@lightningjs/blits 1.21.1 → 1.23.0

package/src/lib/eventListeners.js

@@ -39,11 +39,11 @@ export default {
   deregisterListener(component, event) {
     let componentsMap = eventsMap.get(event)
     if (componentsMap === undefined) {
-      return;
+      return
     }
 
-    if (componentsMap.contains(component)) {
-      componentsMap.delete(component);
+    if (componentsMap.has(component)) {
+      componentsMap.delete(component)
       eventsMap.set(event, componentsMap)
       callbackCache.delete(event)
     }

package/src/lib/precompiler/precompiler.js

@@ -18,7 +18,7 @@
 import parser from '../templateparser/parser.js'
 import generator from '../codegenerator/generator.js'
 
-export default (source, filePath) => {
+export default (source, filePath, mode) => {
   if (
     source.indexOf('Blits.Component(') > -1 ||
     source.indexOf('Blits.Application(') > -1 ||
@@ -42,7 +42,6 @@ export default (source, filePath) => {
           const templateStartIndex = template.index + offset
           const templateEndIndex = templateStartIndex + template[0].length
 
-
           // Parse the template
           let resourceName = 'Blits.Application'
           if (source.indexOf('Blits.Component(') > -1) {
@@ -52,7 +51,7 @@ export default (source, filePath) => {
           const parsed = parser(templateContent, resourceName, null, filePath)
 
           // Generate the code
-          const code = generator.call({ components: {} }, parsed)
+          const code = generator.call({ components: {} }, parsed, mode === 'development')
 
           // Insert the code in the component using the 'code' key, replacing the template key
           const replacement = `/* eslint-disable no-unused-vars */ \ncode: { render: ${code.render.toString()}, effects: [${code.effects.map(

package/src/lib/reactivity/reactive.js

@@ -115,6 +115,7 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
           if (Array.isArray(value) === true) {
             value = getRaw(value).slice(0)
           } else if (
+            value !== null &&
             target[key] !== null &&
             target[key] !== undefined &&
             Array.isArray(target) === false &&

package/src/lib/reactivityguard/computedprops.js

@@ -0,0 +1,207 @@
+/*
+ * 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 (code) => {
+  // Find component declarations
+  const componentRegex =
+    /Blits\.(Component|Application)\s*\(\s*(?:'[^']*'|"[^"]*")?\s*(?:,\s*)?({[\s\S]*?})\s*\)/g
+  const modifications = []
+  const commentText = ' /* auto-generated reactivity guard */ '
+
+  let match
+  while ((match = componentRegex.exec(code)) !== null) {
+    const configObject = match[2]
+
+    // Find computed section with proper brace balancing
+    const computedKeywordMatch = /computed\s*:\s*{/.exec(configObject)
+
+    if (computedKeywordMatch) {
+      // Find start position of the computed block
+      const computedStart = computedKeywordMatch.index + computedKeywordMatch[0].length - 1 // Position of the opening brace
+
+      // Find the matching closing brace with balance tracking
+      let braceLevel = 1
+      let pos = computedStart + 1
+
+      while (braceLevel > 0 && pos < configObject.length) {
+        if (configObject[pos] === '{') braceLevel++
+        else if (configObject[pos] === '}') braceLevel--
+        pos++
+      }
+
+      if (braceLevel === 0) {
+        const computedEnd = pos
+        const computedObj = configObject.substring(computedStart, computedEnd)
+
+        // Process each computed property
+        const computedProps = []
+        let currentPos = 1 // Start after the opening brace
+
+        // Process computed properties content
+        // intentionally not using regexes to extract functions and their content
+        // using cursor-based parsing gives better accuracy
+        while (currentPos < computedObj.length - 1) {
+          // -1 to exclude the closing brace
+          // Find the next function name
+          const functionNameMatch = /\s*(\w+)\s*\(\)/.exec(computedObj.substring(currentPos))
+          if (!functionNameMatch) break
+
+          const funcName = functionNameMatch[1]
+          const funcNamePos = currentPos + functionNameMatch.index
+
+          // Find opening brace for this function
+          const openingBracePos = computedObj.indexOf('{', funcNamePos)
+          if (openingBracePos === -1) break
+
+          // Find closing brace with proper nesting
+          let braceLevel = 1
+          let closingBracePos = openingBracePos + 1
+
+          while (braceLevel > 0 && closingBracePos < computedObj.length) {
+            if (computedObj[closingBracePos] === '{') braceLevel++
+            else if (computedObj[closingBracePos] === '}') braceLevel--
+            closingBracePos++
+          }
+
+          if (braceLevel !== 0) {
+            // Could not find matching brace
+            break
+          }
+
+          // Extract the entire function and its body
+          // This is better and more accurate than using regex to avoid nested braces
+          const functionStartPos = funcNamePos
+          const functionEndPos = closingBracePos
+          const fullFunction = computedObj.substring(functionStartPos, functionEndPos)
+          const functionBody = computedObj
+            .substring(openingBracePos + 1, closingBracePos - 1)
+            .trim()
+
+          computedProps.push({
+            name: funcName,
+            fullText: fullFunction,
+            body: functionBody,
+            startPos: functionStartPos,
+            endPos: functionEndPos,
+          })
+
+          // Move past this function
+          currentPos = closingBracePos
+        }
+
+        // Store the original computed object for later replacement
+        const originalComputedObj = configObject.substring(
+          computedStart - 'computed: '.length,
+          computedEnd
+        )
+
+        let modifiedComputedObj = originalComputedObj
+        let hasChanges = false
+
+        for (const prop of computedProps) {
+          const thisRefs = extractThisReferences(prop.body)
+
+          if (thisRefs.size > 0) {
+            // Skip if already modified
+            if (
+              prop.body.includes(commentText) ||
+              Array.from(thisRefs).some((ref) => prop.body.startsWith(ref))
+            ) {
+              continue
+            }
+
+            // reactivity code
+            const refCode = Array.from(thisRefs)
+              .map((ref) => `${ref};`)
+              .join(' ')
+
+            // replacement with the same whitespace
+            const openBraceIndex = prop.fullText.indexOf('{')
+
+            if (openBraceIndex !== -1) {
+              const modifiedPropText =
+                prop.fullText.substring(0, openBraceIndex + 1) +
+                commentText +
+                refCode +
+                ' ' +
+                prop.body +
+                '}'
+
+              // Replace this property in the computed object text
+              modifiedComputedObj = modifiedComputedObj.replace(prop.fullText, modifiedPropText)
+              hasChanges = true
+            }
+          }
+        }
+
+        if (hasChanges) {
+          // Store the modification of the entire computed object
+          modifications.push({
+            original: originalComputedObj,
+            replacement: modifiedComputedObj,
+          })
+        }
+      }
+    }
+  }
+
+  // Apply all modifications at once, from last to first to preserve positions
+  if (modifications.length > 0) {
+    let modifiedCode = code
+    // Sort modifications from last to first to avoid position changes
+    modifications.sort((a, b) => {
+      const posA = modifiedCode.indexOf(a.original)
+      const posB = modifiedCode.indexOf(b.original)
+      return posB - posA
+    })
+
+    for (const mod of modifications) {
+      modifiedCode = modifiedCode.replace(mod.original, mod.replacement)
+    }
+
+    return { code: modifiedCode }
+  }
+
+  return null
+}
+
+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()
+  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)
+    }
+  }
+
+  return thisRefs
+}

package/src/lib/symbols.js

@@ -20,6 +20,7 @@ export default {
   ready: Symbol('ready'),
   renderer: Symbol('renderer'),
   routes: Symbol('routes'),
+  routerHooks: Symbol('routerHooks'),
   settings: Symbol('settings'),
   state: Symbol('state'),
   stateKeys: Symbol('stateKeys'),

package/src/router/router.js

@@ -33,7 +33,9 @@ export const state = reactive({
   hash: '',
 })
 
-const cacheMap = new WeakMap()
+// Changed from WeakMap to Map to allow for caching of views by the url hash.
+// We are manually doing the cleanup of the cache when the route is not marked as keepAlive.
+const cacheMap = new Map()
 const history = []
 
 let overrideOptions = {}
@@ -133,8 +135,22 @@ export const navigate = async function () {
     }
 
     currentRoute = route
-    let beforeHookOutput
     if (route) {
+      let beforeEachResult
+      if (this.parent[symbols.routerHooks]) {
+        const hooks = this.parent[symbols.routerHooks]
+        if (hooks.beforeAll) {
+          beforeEachResult = await hooks.beforeAll(route, previousRoute)
+          if (isString(beforeEachResult)) {
+            to(beforeEachResult)
+            return
+          }
+        }
+      }
+      // If the resolved result is an object, assign it to the target route object
+      route = isObject(beforeEachResult) ? beforeEachResult : route
+
+      let beforeHookOutput
       if (route.hooks) {
         if (route.hooks.before) {
           beforeHookOutput = await route.hooks.before.call(this.parent, route, previousRoute)
@@ -163,7 +179,7 @@ export const navigate = async function () {
 
       let holder
       let routeData
-      let { view, focus } = cacheMap.get(route) || {}
+      let { view, focus } = cacheMap.get(route.hash) || {}
 
       if (!view) {
         // create a holder element for the new view
@@ -312,9 +328,15 @@ const removeView = async (route, view, transition) => {
   }
 
   // cache the page when it's as 'keepAlive' instead of destroying
-  if (route.options && route.options.keepAlive === true) {
-    cacheMap.set(route, { view: view, focus: previousFocus })
-  } else {
+  if (route.options && route.options.keepAlive === true && navigatingBack === false) {
+    cacheMap.set(route.hash, { view: view, focus: previousFocus })
+  } else if (navigatingBack === true) {
+    // remove the previous route from the cache when navigating back
+    // cacheMap.delete will not throw an error if the route is not in the cache
+    cacheMap.delete(route.hash)
+  }
+
+  if (route.options && route.options.keepAlive !== true) {
     view.destroy()
     view = null
   }

package/vite/index.js

@@ -18,9 +18,11 @@
 import preCompiler from './preCompiler.js'
 import msdfGenerator from './msdfGenerator.js'
 import blitsFileConverter from './blitsFileConverter.js'
+import reactivityGuard from './reactivityGuard.js'
 
 export { default as preCompiler } from './preCompiler.js'
 export { default as msdfGenerator } from './msdfGenerator.js'
 export { default as blitsFileConverter } from './blitsFileConverter.js'
+export { default as reactivityGuard } from './reactivityGuard.js'
 
-export default [blitsFileConverter(), preCompiler(), msdfGenerator()]
+export default [blitsFileConverter(), reactivityGuard(), preCompiler(), msdfGenerator()]

package/vite/preCompiler.js

@@ -32,7 +32,7 @@ export default function () {
 
       // we should only precompile .blits, .js and .ts files
       if (fileExtension === '.js' || fileExtension === '.ts' || fileExtension === '.blits') {
-        return compiler(source, filePath)
+        return compiler(source, filePath, config.mode)
       }
 
       // vite expects null if there is no modification

package/vite/reactivityGuard.js

@@ -0,0 +1,45 @@
+/*
+ * 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 { default as processComputedProps } from './../src/lib/reactivityguard/computedprops.js'
+
+export default function reactivityGuard() {
+  return {
+    name: 'reactivityGuard',
+    // run before other plugings except blitsFileConverter
+    // the order between blitsFileConverter and this plugin is maintained by the order of the plugins in the array in index.js
+    enforce: 'pre',
+
+    transform(code, id) {
+      if (!id.endsWith('.js') && !id.endsWith('.ts') && !id.endsWith('.blits')) {
+        return null
+      }
+
+      // Skip if no Blits component/application
+      if (!code.includes('Blits.Component') && !code.includes('Blits.Application')) {
+        return null
+      }
+
+      try {
+        return processComputedProps(code)
+      } catch (error) {
+        console.error(`[blits-reactivity-guard] Error processing ${id}:`, error)
+        return null // Return original code on error
+      }
+    },
+  }
+}