@lightningjs/blits 1.32.1-rc.0 → 1.33.0

package/src/components/RouterView.js

@@ -27,28 +27,50 @@ export default () =>
     code: {
       render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
         const elms = []
+        const elementConfigs = []
+        const forloops = []
+        const props = []
+        const created = []
+        const skips = []
         let componentType
-        const rootComponent = component
+        let rootComponent = component
         let propData
         let slotComponent
         let inSlot = false
         let slotChildCounter = 0
-        const elementConfig0 = {}
+        let cmps = []
+        elementConfigs[0] = {}
 
         elms[0] = this.element(
           { parent: parent || 'root' },
           inSlot === true ? slotComponent : component
         )
 
-        elementConfig0['w'] = parent.node.width * (100 / 100)
-        elementConfig0['height'] = parent.node.height * (100 / 100)
-        elms[0].populate(elementConfig0)
+        elementConfigs[0]['w'] = parent.node.width * (100 / 100)
+        elementConfigs[0]['height'] = parent.node.height * (100 / 100)
+        elms[0].populate(elementConfigs[0])
 
         if (inSlot === true) {
           slotChildCounter -= 1
         }
 
-        return elms
+        return {
+          elms,
+          cleanup: () => {
+            rootComponent = null
+            propData = null
+            slotComponent = null
+            component = null
+            parent = null
+            cmps.length = 0
+            elms.length = 0
+            components.length = 0
+            elementConfigs.length = 0
+            forloops.length = 0
+            props.length = 0
+            skips.length = 0
+          },
+        }
       },
       effects: [],
       context: {},

package/src/components/Sprite.js

@@ -25,37 +25,59 @@ export default () =>
     code: {
       render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
         const elms = []
+        const elementConfigs = []
+        const forloops = []
+        const props = []
+        const created = []
+        const skips = []
         let componentType
-        const rootComponent = component
+        let rootComponent = component
         let propData
         let slotComponent
         let inSlot = false
         let slotChildCounter = 0
-        const elementConfig0 = {}
+        let cmps = []
+        elementConfigs[0] = {}
 
         elms[0] = this.element(
           { parent: parent || 'root' },
           inSlot === true ? slotComponent : component
         )
 
-        elementConfig0['w'] = parent.node.width * (100 / 100)
-        elementConfig0['h'] = parent.node.height * (100 / 100)
-        elementConfig0['texture'] = component.texture
-        elementConfig0['color'] = component.color
-        elms[0].populate(elementConfig0)
+        elementConfigs[0]['w'] = parent.node.width * (100 / 100)
+        elementConfigs[0]['h'] = parent.node.height * (100 / 100)
+        elementConfigs[0]['texture'] = component.texture
+        elementConfigs[0]['color'] = component.color
+        elms[0].populate(elementConfigs[0])
 
         if (inSlot === true) {
           slotChildCounter -= 1
         }
 
-        return elms
+        return {
+          elms,
+          cleanup: () => {
+            rootComponent = null
+            propData = null
+            slotComponent = null
+            component = null
+            parent = null
+            cmps.length = 0
+            elms.length = 0
+            components.length = 0
+            elementConfigs.length = 0
+            forloops.length = 0
+            props.length = 0
+            skips.length = 0
+          },
+        }
       },
       effects: [
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          if (elms[0] !== undefined) elms[0].set('texture', component.texture)
+          elms[0].set('texture', component.texture)
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          if (elms[0] !== undefined) elms[0].set('color', component.color)
+          elms[0].set('color', component.color)
         },
       ],
       context: {},

package/src/engines/L3/element.js

@@ -546,7 +546,6 @@ const Element = {
    */
   set(prop, value) {
     if (value === undefined) return
-    if (this.props === undefined) return
     // @ts-ignore
     if (this.props.raw[prop] === value) return
     // @ts-ignore

package/src/engines/L3/launch.js

@@ -26,8 +26,8 @@ import colors from '../../lib/colors/colors.js'
 import fontLoader from './fontLoader.js'
 import shaderLoader from './shaderLoader.js'
 
-/** @type {RendererMain|null} */
-export let renderer = null
+/** @type {RendererMain|{}} */
+export let renderer = {}
 
 const renderEngine = (settings) => {
   const renderMode = 'renderMode' in settings ? settings.renderMode : 'webgl'
@@ -99,6 +99,7 @@ export default (App, target, settings = {}) => {
         textureProcessingTimeLimit: settings.textureProcessingTimeLimit,
         textureMemory: textureMemorySettings(settings),
         createImageBitmapSupport: 'auto',
+        targetFPS: 'maxFPS' in settings ? settings.maxFPS : 0,
       },
       ...(settings.advanced || {}),
     },

package/src/launch.js

@@ -89,6 +89,7 @@ async function rendererVersion() {
  * @property {number} [textureProcessingTimeLimit] - Max time renderer can process textures in a frame
  * @property {Partial<import('@lightningjs/renderer').RendererMainSettings>} [advanced] - Advanced renderer settings
  * @property {boolean} [announcer] - Whether or not the announcer should be activated on initialization
+ * @property {number} [maxFPS] - Maximum FPS
  */
 
 /**

package/src/lib/codegenerator/generator.js

@@ -22,14 +22,27 @@ export default function (templateObject = { children: [] }, devMode = false) {
   const ctx = {
     renderCode: [
       'const elms = []',
+      'const elementConfigs = []',
+      'const forloops = []',
+      'const props = []',
+      'const created = []',
+      'const skips = []',
       'let componentType',
-      'const rootComponent = component',
+      'let rootComponent = component',
       'let propData',
       'let slotComponent',
       'let inSlot = false',
       'let slotChildCounter = 0',
+      'let cmps = []',
     ],
     effectsCode: [],
+    cleanupCode: [
+      'rootComponent = null',
+      'propData = null',
+      'slotComponent = null',
+      'component = null',
+      'parent = null',
+    ],
     context: { props: [], components: this.components },
   }
 
@@ -57,7 +70,18 @@ export default function (templateObject = { children: [] }, devMode = false) {
     `)
   }
   generateCode.call(ctx, templateObject)
-  ctx.renderCode.push('return elms')
+  ctx.renderCode.push(`
+    return { elms, cleanup: () => {
+      ${ctx.cleanupCode.join('\n')}
+      cmps.length = 0
+      elms.length = 0
+      components.length = 0
+      elementConfigs.length = 0
+      forloops.length = 0
+      props.length = 0
+      skips.length = 0
+    }}
+  `)
 
   return {
     render: new Function(
@@ -124,7 +148,7 @@ const generateElementCode = function (
     `)
   }
 
-  renderCode.push(`const elementConfig${counter} = {}`)
+  renderCode.push(`elementConfigs[${counter}] = {}`)
 
   if (options.forloop) {
     renderCode.push(`if(${elm} === undefined) {`)
@@ -142,13 +166,13 @@ const generateElementCode = function (
   delete templateObject['children']
 
   if (templateObject[Symbol.for('componentType')] === 'Slot') {
-    renderCode.push(`elementConfig${counter}[Symbol.for('isSlot')] = true`)
+    renderCode.push(`elementConfigs[${counter}][Symbol.for('isSlot')] = true`)
   }
 
   Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
-        elementConfig${counter}['parent'] = slotComponent[Symbol.for('slots')] !== undefined && Array.isArray(slotComponent[Symbol.for('slots')]) === true && slotComponent[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
+        elementConfigs[${counter}]['parent'] = slotComponent[Symbol.for('slots')] !== undefined && Array.isArray(slotComponent[Symbol.for('slots')]) === true && slotComponent[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
       `)
     }
 
@@ -160,16 +184,13 @@ const generateElementCode = function (
       if (options.holder && key === ':color') return
       if (options.holder) {
         this.effectsCode.push(`
-        if(typeof skip${counter} === 'undefined' ||
-          skip${counter}.indexOf('${key.substring(1)}') === -1)
-          if(${elm} !== undefined) ${elm}.set('${key.substring(1)}', ${interpolate(
-          templateObject[key],
-          options.component
-        )})
+        if(typeof skips === 'undefined' || (typeof skips[${counter}] === 'undefined' ||
+          skips[${counter}].indexOf('${key.substring(1)}') === -1))
+          ${elm}.set('${key.substring(1)}', ${interpolate(templateObject[key], options.component)})
         `)
       } else {
         this.effectsCode.push(`
-            if(${elm} !== undefined) ${elm}.set('${key.substring(1)}', ${interpolate(
+            ${elm}.set('${key.substring(1)}', ${interpolate(
           templateObject[key],
           options.component
         )})
@@ -180,23 +201,28 @@ const generateElementCode = function (
         verifyVariables(value, renderCode, 'reactive')
       }
       renderCode.push(
-        `elementConfig${counter}['${key.substring(1)}'] = ${interpolate(value, options.component)}`
+        `elementConfigs[${counter}]['${key.substring(1)}'] = ${interpolate(
+          value,
+          options.component
+        )}`
       )
     } else {
       if (isDev === true && options.component !== 'scope.' && value.includes('$')) {
         verifyVariables(value, renderCode)
       }
-      renderCode.push(`elementConfig${counter}['${key}'] = ${cast(value, key, options.component)}`)
+      renderCode.push(
+        `elementConfigs[${counter}]['${key}'] = ${cast(value, key, options.component)}`
+      )
     }
   })
 
   if (options.holder === true) {
     renderCode.push(`
-    const skip${counter} = []
-    if(typeof cmp${counter} !== 'undefined') {
-      for(let key in cmp${counter}[Symbol.for('config')].props) {
-        delete elementConfig${counter}[cmp${counter}[Symbol.for('config')].props[key]]
-        skip${counter}.push(cmp${counter}[Symbol.for('config')].props[key])
+    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])
       }
     }
     `)
@@ -206,7 +232,7 @@ const generateElementCode = function (
     renderCode.push(`if(${elm}.nodeId === undefined) {`)
   }
 
-  renderCode.push(`${elm}.populate(elementConfig${counter})`)
+  renderCode.push(`${elm}.populate(elementConfigs[${counter}])`)
 
   renderCode.push(`
     if(inSlot === true) {
@@ -237,12 +263,16 @@ const generateComponentCode = function (
   const renderCode = options.forceEffect ? this.effectsCode : this.renderCode
 
   renderCode.push(`
-    const cmp${counter} =
+    cmps[${counter}] =
       (context.components && context.components['${
         templateObject[Symbol.for('componentType')]
       }']) || components['${templateObject[Symbol.for('componentType')]}']
   `)
 
+  this.cleanupCode.push(`
+    cmps[${counter}] = null
+  `)
+
   if ('key' in templateObject) {
     options.key = interpolate(templateObject.key, options.component)
   }
@@ -266,10 +296,11 @@ const generateComponentCode = function (
   }
 
   if (parent) {
-    renderCode.push(`parent = ${parent}`)
+    renderCode.push(`parent = ${parent};`)
   }
 
-  renderCode.push(`const props${counter} = {}`)
+  renderCode.push(`props[${counter}] = {}`)
+  this.cleanupCode.push(`props[${counter}] = null`)
 
   if (options.forloop) {
     renderCode.push(`if(${elm} === undefined) {`)
@@ -287,28 +318,28 @@ const generateComponentCode = function (
         if (Array.isArray(propData) === true) {
           propData = getRaw(propData).slice(0)
         }
-        props${counter}['${key.substring(1)}'] = propData`)
+        props[${counter}]['${key.substring(1)}'] = propData`)
     } else {
       renderCode.push(
-        `props${counter}['${key}'] = ${cast(templateObject[key], key, options.component)}`
+        `props[${counter}]['${key}'] = ${cast(templateObject[key], key, options.component)}`
       )
     }
   })
 
   renderCode.push(`
-    componentType = props${counter}['is'] || '${templateObject[Symbol.for('componentType')]}'
+    componentType = props[${counter}]['is'] || '${templateObject[Symbol.for('componentType')]}'
 
-    let component${counter}
+    components[${counter}]
     if(typeof componentType === 'string') {
-      component${counter} = context.components && context.components[componentType] || components[componentType]
-      if(!component${counter}) {
+      components[${counter}] = context.components && context.components[componentType] || components[componentType]
+      if(!components[${counter}]) {
         throw new Error('Component "${templateObject[Symbol.for('componentType')]}" not found')
       }
     } else if(typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) {
-      component${counter} = componentType
+      components[${counter}] = componentType
     }
 
-    ${elm} = component${counter}.call(null, {props: props${counter}}, ${parent}, component)
+    ${elm} = components[${counter}].call(null, {props: props[${counter}]}, ${parent}, component)
 
     if (${elm}[Symbol.for('slots')][0]) {
       parent = ${elm}[Symbol.for('slots')][0]
@@ -319,6 +350,8 @@ const generateComponentCode = function (
     }
   `)
 
+  this.cleanupCode.push(`components[${counter}] = null`)
+
   if (options.forloop) {
     renderCode.push('}')
   }
@@ -377,6 +410,7 @@ const generateForLoopCode = function (templateObject, parent) {
   const ctx = {
     renderCode: [],
     effectsCode: [],
+    cleanupCode: [],
     context: { props: [], components: this.components },
   }
 
@@ -398,12 +432,12 @@ const generateForLoopCode = function (templateObject, parent) {
   const forStartCounter = counter
 
   ctx.renderCode.push(`
-    const created${forStartCounter} = []
+    created[${forStartCounter}] = []
 
     let from${forStartCounter}
     let to${forStartCounter}
 
-    const forloop${forStartCounter} = (collection = [], elms, created) => {
+    forloops[${forStartCounter}] = (collection = [], elms, created) => {
       const rawCollection = getRaw(collection)
       const keys = new Set()
       let l = rawCollection.length
@@ -415,6 +449,12 @@ const generateForLoopCode = function (templateObject, parent) {
       while(l--) {
         const ${item} = rawCollection[l]
   `)
+
+  ctx.cleanupCode.push(`
+    created[${forStartCounter}].length = 0
+    forloops[${forStartCounter}] = null
+  `)
+
   // push reference of index variable
   if (index !== undefined) {
     ctx.renderCode.push(`
@@ -541,9 +581,10 @@ const generateForLoopCode = function (templateObject, parent) {
 
   for (let i = forStartCounter; i <= forEndCounter; i++) {
     destroyCode.push(`
-          elms[${i}][key] && elms[${i}][key].destroy()
-          delete elms[${i}][key]
-      `)
+        elms[${i}][key] && elms[${i}][key].destroy()
+        elms[${i}][key] = null
+        delete elms[${i}][key]
+    `)
   }
   destroyCode.push(`
       }
@@ -565,14 +606,8 @@ const generateForLoopCode = function (templateObject, parent) {
   const effectKeys = [...range.matchAll(effectKeysRegex)].map((match) => `'${match[1]}'`)
 
   ctx.renderCode.push(`
-    let forEffects${forStartCounter}
-    const eff${forStartCounter} = () => {
-      component[Symbol.for('removeGlobalEffects')](forEffects${forStartCounter})
-      forEffects${forStartCounter} = null
-      forEffects${forStartCounter} = forloop${forStartCounter}(${cast(
-    result[2],
-    ':for'
-  )}, elms, created${forStartCounter})
+    let eff${forStartCounter} = () => {
+      forloops[${forStartCounter}](${cast(result[2], ':for')}, elms, created[${forStartCounter}])
     }
 
     component[Symbol.for('effects')].push(eff${forStartCounter})
@@ -580,6 +615,10 @@ const generateForLoopCode = function (templateObject, parent) {
     effect(eff${forStartCounter}, ['${effectKey}', ${effectKeys.join(',')}] )
   `)
 
+  ctx.cleanupCode.push(`
+    eff${forStartCounter} = null
+  `)
+
   outerScopeEffects.forEach((effect, outerScopeEffectsIndex) => {
     const matches = [...effect.matchAll(scopeRegex)]
 
@@ -597,7 +636,7 @@ const generateForLoopCode = function (templateObject, parent) {
     }
 
     ctx.renderCode.push(`
-      const eff${forStartCounter}_${outerScopeEffectsIndex} = () => {
+      let eff${forStartCounter}_${outerScopeEffectsIndex} = () => {
         void ${refs.join(', ')}
         for(let __index = 0; __index < ${interpolate(result[2])}.length; __index++) {
           if(__index < from${forStartCounter} || __index >= to${forStartCounter}) continue
@@ -606,6 +645,7 @@ const generateForLoopCode = function (templateObject, parent) {
           scope['${item}'] = ${interpolate(result[2])}[__index]
           scope['key'] = ${forKey || '__index'}
     `)
+    ctx.cleanupCode.push(`eff${forStartCounter}_${outerScopeEffectsIndex} = null`)
 
     ctx.renderCode.push(`
           ${effect}
@@ -617,6 +657,7 @@ const generateForLoopCode = function (templateObject, parent) {
   })
 
   this.renderCode.push(ctx.renderCode.join('\n'))
+  this.cleanupCode.push(ctx.cleanupCode.join('\n'))
 }
 
 const generateCode = function (templateObject, parent = false, options = {}) {

package/src/lib/log.js

@@ -19,16 +19,16 @@ import Settings from '../settings.js'
 
 const n = () => {}
 
+const pad = (n) => String(n).padStart(2, '0')
+
 /**
  * Returns the current time as a locale time string (hh:mm:ss).
  * @returns {string} The current time string.
  */
-const time = () =>
-  new Date().toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  })
+const time = () => {
+  const now = new Date()
+  return pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds())
+}
 
 /**
  * Returns a logger object for the given context, with info, warn, debug, and error methods.

package/src/lib/symbols.js

@@ -2,6 +2,7 @@
  * Symbol registry for internal framework properties and generated code.
  *
  * @typedef {Object} BlitsSymbols
+ * @property {symbol} cleanup
  * @property {symbol} currentView
  * @property {symbol} cursorTagStart
  * @property {symbol} computedKeys
@@ -52,6 +53,7 @@
  * @type {BlitsSymbols}
  */
 export default {
+  cleanup: Symbol('cleanup'),
   currentView: Symbol('currentView'),
   cursorTagStart: Symbol('cursorTagStart'),
   computedKeys: Symbol('computedKeys'),

package/src/router/router.js

@@ -132,7 +132,7 @@ export const matchHash = (path, routes = []) => {
   let matchingRoute = false
   let i = 0
   while (!matchingRoute && i < routes.length) {
-    const route = routes[i]
+    const route = { ...routes[i] }
     route.path = normalizePath(route.path)
     if (route.path === path) {
       route.params = {}
@@ -206,7 +206,6 @@ export const navigate = async function () {
     let previousRoute = currentRoute //? Object.assign({}, currentRoute) : undefined
     const { hash, path, queryParams } = getHash()
     let route = matchHash(path, this.parent[symbols.routes])
-
     const queryParamsData = {}
     const queryParamsEntries = [...queryParams.entries()]
     for (let i = 0; i < queryParamsEntries.length; i++) {
@@ -214,8 +213,8 @@ export const navigate = async function () {
     }
 
     route.data = {
-      ...navigationData,
       ...route.data,
+      ...navigationData,
       ...queryParamsData,
     }