@lightningjs/blits 0.9.8 → 0.10.0

package/src/components/Image.js

@@ -21,7 +21,7 @@ export default () =>
   Component('Image', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context) {
+      render: function anonymous(parent, component, context, components) {
         const elms = []
 
         if (!elms[0]) {
@@ -36,7 +36,7 @@ export default () =>
         return elms
       },
       effects: [
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('imageSource', component.imageSource)
         },
       ],

package/src/components/RouterView.js

@@ -24,7 +24,7 @@ export default () =>
   Component('RouterView', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context) {
+      render: function anonymous(parent, component, context, components) {
         const elms = []
 
         if (!elms[0]) {

package/src/components/Sprite.js

@@ -23,7 +23,7 @@ export default () =>
   Component('Sprite', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context) {
+      render: function anonymous(parent, component, context, components) {
         const elms = []
 
         if (!elms[0]) {
@@ -41,10 +41,10 @@ export default () =>
         return elms
       },
       effects: [
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('texture', component.texture)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('color', component.color)
         },
       ],
@@ -64,7 +64,7 @@ export default () =>
             : this.map[this.frame]
 
         if (this.spriteTexture && options) {
-          return this[symbols.renderer].createTexture('SubTexture', {
+          return this[symbols.renderer]().createTexture('SubTexture', {
             texture: this.spriteTexture,
             x: options.x,
             y: options.y,
@@ -76,7 +76,7 @@ export default () =>
     },
     hooks: {
       ready() {
-        this.spriteTexture = this[symbols.renderer].createTexture('ImageTexture', {
+        this.spriteTexture = this[symbols.renderer]().createTexture('ImageTexture', {
           src: this.image,
         })
       },

package/src/components/Sprite.orig.js

@@ -38,7 +38,7 @@ export default () =>
             : this.map[this.frame]
 
         if (this.spriteTexture && options) {
-          return this[symbols.renderer].createTexture('SubTexture', {
+          return this[symbols.renderer]().createTexture('SubTexture', {
             texture: this.spriteTexture,
             x: options.x,
             y: options.y,
@@ -50,7 +50,7 @@ export default () =>
     },
     hooks: {
       ready() {
-        this.spriteTexture = this[symbols.renderer].createTexture('ImageTexture', {
+        this.spriteTexture = this[symbols.renderer]().createTexture('ImageTexture', {
           src: this.image,
         })
       },

package/src/components/Text.js

@@ -22,7 +22,7 @@ export default () =>
   Component('Text', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context) {
+      render: function anonymous(parent, component, context, components) {
         const elms = []
 
         if (!elms[0]) {
@@ -46,34 +46,34 @@ export default () =>
         return elms
       },
       effects: [
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('text', component.content)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('fontSize', component.size)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('color', component.color)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('style', component.style)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('weight', component.weight)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('wordWrap', component.wordwrap)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('maxLines', component.maxlines)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('h', component.maxheight)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('textAlign', component.align)
         },
-        function anonymous(component, elms, context) {
+        function anonymous(component, elms, context, components) {
           elms[0].set('overflowSuffix', component.textoverflow)
         },
       ],

package/src/components/index.js

@@ -0,0 +1,32 @@
+/*
+ * 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 Image from './Image.js'
+import Circle from './Circle.js'
+import RouterView from './RouterView.js'
+import Sprite from './Sprite.js'
+import Text from './Text.js'
+import FPScounter from './FPScounter.js'
+
+export default () => ({
+  Image: Image(),
+  Circle: Circle(),
+  RouterView: RouterView(),
+  Sprite: Sprite(),
+  Text: Text(),
+  FPScounter: FPScounter(),
+})

package/src/components/index.orig.js

@@ -0,0 +1,32 @@
+/*
+ * 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 Image from './Image.js'
+import Circle from './Circle.js'
+import RouterView from './RouterView.js'
+import Sprite from './Sprite.js'
+import Text from './Text.js'
+import FPScounter from './FPScounter.js'
+
+export default () => ({
+  Image: Image(),
+  Circle: Circle(),
+  RouterView: RouterView(),
+  Sprite: Sprite(),
+  Text: Text(),
+  FPScounter: FPScounter(),
+})

package/src/engines/L3/element.js

@@ -240,6 +240,10 @@ const Props = {
   set textAlign(v) {
     this._props.textAlign = v
   },
+  set rtt(v) {
+    this._props.rtt = v
+    this._set.add('rtt')
+  },
 }
 
 const Element = {
@@ -271,9 +275,12 @@ const Element = {
     // correct for default white nodes (but not for text nodes)
     if (!props.__textnode && !this.props._set.has('color')) {
       this.props._props.color =
-        this.props._set.has('src') || this.props._set.has('texture') ? 0xffffffff : 0
+        this.props._set.has('src') ||
+        this.props._set.has('texture') ||
+        (this.props._set.has('rtt') && this.props._props.rtt === true)
+          ? 0xffffffff
+          : 0
     }
-
     this.node = props.__textnode
       ? renderer.createTextNode(this.props._props)
       : renderer.createNode(this.props._props)
@@ -312,7 +319,8 @@ const Element = {
       }
     }
   },
-  animate(prop, value, transition) {
+  async animate(prop, value, transition) {
+    // if current value is the same as the value to animate to, instantly resolve
     if (this.node[prop] === value) return Promise.resolve()
     // check if a transition is already scheduled or running on the same prop
     if (this.scheduledTransitions[prop]) {
@@ -345,39 +353,37 @@ const Element = {
       delay: typeof transition === 'object' ? ('delay' in transition ? transition.delay : 0) : 0,
     })
 
-    // schedule transition
-    return new Promise((resolve) => {
-      const startValue = this.node[prop]
-      this.scheduledTransitions[prop] = {
-        v: props[prop],
-        cancel: false,
-        f,
-      }
+    // capture the current value to be used in the transition start
+    const startValue = this.node[prop]
 
-      try {
-        f.start()
-          .waitUntilStarted()
-          .then((animation) => {
-            // fire transition start callback if specified
-            transition.start &&
-              typeof transition.start === 'function' &&
-              transition.start.call(this.component, this, prop, startValue)
-            // continue the chain
-            animation
-              .waitUntilStopped()
-              .then(() => delete this.scheduledTransitions[prop])
-              .then(() => {
-                // fire transition end callback if specified
-                transition.end &&
-                  typeof transition.end === 'function' &&
-                  transition.end.call(this.component, this, prop, this.node[prop])
-              })
-              .then(resolve)
-          })
-      } catch (e) {
-        Log.error(e)
-      }
-    })
+    // schedule the transition for this prop, so it can be canceled /
+    // removed if another transition for the same prop starts in the mean time
+    this.scheduledTransitions[prop] = {
+      v: props[prop],
+      cancel: false,
+      f,
+    }
+
+    // wait until the animation really starts (depending on specified delay)
+    const animation = await f.start().waitUntilStarted()
+
+    // fire transition start callback if specified
+    transition.start &&
+      typeof transition.start === 'function' &&
+      transition.start.call(this.component, this, prop, startValue)
+
+    // wait until the animation ends
+    const finished = await animation.waitUntilStopped()
+
+    // removed the prop from scheduled transitions
+    delete this.scheduledTransitions[prop]
+
+    // fire transition end callback if specified
+    transition.end &&
+      typeof transition.end === 'function' &&
+      transition.end.call(this.component, this, prop, this.node[prop])
+
+    return Promise.resolve()
   },
   destroy() {
     Log.debug('Deleting  Node', this.nodeId)

package/src/engines/L3/fontLoader.js

@@ -16,10 +16,24 @@ export default () => {
         font.json = font.file.replace(/\.[^.]+$/, `.${font.type}.json`)
       }
       stage.fontManager.addFontFace(
-        new SdfTrFontFace(font.family, {}, font.type, stage, font.png, font.json)
+        new SdfTrFontFace(font.type, {
+          fontFamily: font.family,
+          descriptors: {},
+          atlasUrl: font.png,
+          atlasDataUrl: font.json,
+          stage,
+          metrics: font.metrics,
+        })
       )
     } else if (font.type === 'web') {
-      stage.fontManager.addFontFace(new WebTrFontFace(font.family, {}, font.file))
+      stage.fontManager.addFontFace(
+        new WebTrFontFace({
+          fontFamily: font.family,
+          fontUrl: font.file,
+          descriptors: {},
+          metrics: font.metrics,
+        })
+      )
     }
   })
 }

package/src/engines/L3/launch.js

@@ -24,7 +24,7 @@ import fontLoader from './fontLoader.js'
 
 export let renderer
 
-export default (App, target, settings) => {
+export default (App, target, settings = {}) => {
   const driver = new MainCoreDriver()
   // settings.multithreaded === true
   //   ? new ThreadXRenderDriver({

package/src/lib/codegenerator/generator.js

@@ -29,8 +29,10 @@ export default function (templateObject = { children: [] }) {
   ctx.renderCode.push('return elms')
 
   return {
-    render: new Function('parent', 'component', 'context', ctx.renderCode.join('\n')),
-    effects: ctx.effectsCode.map((code) => new Function('component', 'elms', 'context', code)),
+    render: new Function('parent', 'component', 'context', 'components', ctx.renderCode.join('\n')),
+    effects: ctx.effectsCode.map(
+      (code) => new Function('component', 'elms', 'context', 'components', code)
+    ),
     context: ctx.context,
   }
 }
@@ -119,8 +121,7 @@ const generateComponentCode = function (
     const cmp${counter} =
       (context.components && context.components['${
         templateObject[Symbol.for('componentType')]
-      }']) ||
-      component[Symbol.for('components')]['${templateObject[Symbol.for('componentType')]}']
+      }']) || components['${templateObject[Symbol.for('componentType')]}']
   `)
 
   if ('key' in templateObject) {
@@ -174,9 +175,18 @@ const generateComponentCode = function (
     templateObject[Symbol.for('componentType')]
   }'
 
-  ${elm} = (context.components && context.components[componentType] || component[Symbol.for('components')][componentType] || (() => { console.error('component ${
-    templateObject[Symbol.for('componentType')]
-  } not found')})).call(null, {props: props${counter}}, ${parent}, component)
+      let component${counter}
+      if(typeof componentType === 'string') {
+        component${counter} = context.components && context.components[componentType] || components[componentType]
+        if(!component${counter}) {
+          throw new Error('Component "${templateObject[Symbol.for('componentType')]}" not found')
+        }
+      } else if(typeof componentType === 'function' && componentType.name === 'factory') {
+        component${counter} = componentType
+      }
+
+      ${elm} = component${counter}.call(null, {props: props${counter}}, ${parent}, component)
+
       if (${elm}[Symbol.for('slots')][0]) {
         parent = ${elm}[Symbol.for('slots')][0]
         component = ${elm}
@@ -215,7 +225,7 @@ const generateForLoopCode = function (templateObject, parent) {
   }
 
   if (parent) {
-    ctx.renderCode.push(`parent = ${parent}`)
+    ctx.renderCode.push(`let parent = ${parent}`)
   }
 
   const forStartCounter = counter

package/vite/msdfGenerator.js

@@ -1,7 +1,25 @@
 import path from 'path'
 import * as fs from 'fs'
-import generateBMFont from 'msdf-bmfont-xml'
+import { genFont, setGeneratePaths } from '@lightningjs/msdf-generator'
+import { adjustFont } from '@lightningjs/msdf-generator/adjustFont'
 
+class TaskQueue {
+  constructor() {
+    this.currentTask = Promise.resolve()
+  }
+
+  async enqueue(task) {
+    // Wait for the current task to complete before starting a new one
+    this.currentTask = this.currentTask.then(task, this.handleError)
+    await this.currentTask
+  }
+
+  handleError(error) {
+    console.error('Error during task execution:', error)
+  }
+}
+
+const fontGenerationQueue = new TaskQueue()
 let config
 
 export default function () {
@@ -15,14 +33,13 @@ export default function () {
       config = resolvedConfig
       buildOutputPath = config.build.outDir
       publicDir = path.join(config.root, 'public')
-      msdfOutputDir = path.resolve(config.root, 'node_modules', '.tmp-msdf-fonts')
+      msdfOutputDir = path.resolve(config.root, 'node_modules', '.tmp-msdf-fonts-v2')
     },
     async configureServer(server) {
       server.middlewareMode = true
       server.middlewares.use('/', async (req, res, next) => {
         const file = req.url.substring(req.url.lastIndexOf('/') + 1)
         const match = file.match(/(.+)\.msdf\.(json|png)/)
-
         // msdf font request
         if (match) {
           const fontPath = path.dirname(req.url.split('?')[0]).replace(/^\//, '')
@@ -42,21 +59,28 @@ export default function () {
               )
               const mimeType = ext === 'png' ? 'image/png' : 'application/json'
 
-              if (!fs.existsSync(generatedFontFile)) {
-                console.log(`\nGenerating ${targetDir}/${fontName}.msdf.${ext}`)
-                await generateFont(fontFile, targetDir, fontName)
-              }
-
-              const fileContent = fs.readFileSync(generatedFontFile)
-
-              // Check if headers have already been sent
-              if (!res.headersSent) {
-                res.setHeader('Content-Type', mimeType)
-                res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
-                res.end(fileContent)
+              await fontGenerationQueue.enqueue(async () => {
+                if (!fs.existsSync(generatedFontFile)) {
+                  // Check if generation is needed
+                  console.log(`\nGenerating ${targetDir}/${fontName}.msdf.${ext}`)
+                  await generateSDF(fontFile, path.join(targetDir))
+                }
+              })
+
+              if (fs.existsSync(generatedFontFile)) {
+                const fileContent = fs.readFileSync(generatedFontFile)
+
+                // Check if headers have already been sent
+                if (!res.headersSent) {
+                  res.setHeader('Content-Type', mimeType)
+                  res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
+                  res.end(fileContent)
+                } else {
+                  // this should never happen except some edge cases
+                  console.error(`ERROR: Headers already sent for ${req.url}`, res.getHeaders())
+                }
               } else {
-                // this should never happen except some edge cases
-                console.error(`ERROR: Headers already sent for ${req.url}`, res.getHeaders())
+                next() // Handle case where generation might have failed
               }
             } else {
               next() // ttf file does not exist
@@ -71,7 +95,6 @@ export default function () {
     },
     // after build ends, the first hook is renderStart where we can modify the output
     async renderStart() {
-      // Find all TTF files under publicDir
       const ttfFiles = findAllTtfFiles(publicDir)
 
       for (const ttfFile of ttfFiles) {
@@ -83,7 +106,7 @@ export default function () {
         // Check if MSDF files are generated, if not, generate them
         if (!fs.existsSync(msdfJsonPath) || !fs.existsSync(msdfPngPath)) {
           console.log(`Generating missing MSDF files for ${ttfFile}`)
-          await generateFont(ttfFile, path.join(msdfOutputDir, relativePath), baseName)
+          await generateSDF(ttfFile, path.join(msdfOutputDir, relativePath))
         }
       }
 
@@ -94,40 +117,16 @@ export default function () {
   }
 }
 
-const generateFont = (fontFile, fontDir, fontName) => {
-  return new Promise((resolve, reject) => {
-    if (!fs.existsSync(fontDir)) {
-      fs.mkdirSync(fontDir, { recursive: true })
-    }
-    generateBMFont(
-      fontFile,
-      {
-        outputType: 'json',
-      },
-      (err, textures, font) => {
-        if (err) {
-          console.error(err)
-          reject(err)
-        } else {
-          textures.forEach((texture) => {
-            try {
-              fs.writeFileSync(path.resolve(fontDir, `${fontName}.msdf.png`), texture.texture)
-            } catch (e) {
-              console.error(e)
-              reject(e)
-            }
-          })
-          try {
-            fs.writeFileSync(path.resolve(fontDir, `${fontName}.msdf.json`), font.data)
-            resolve()
-          } catch (e) {
-            console.error(err)
-            reject(e)
-          }
-        }
-      }
-    )
-  })
+const generateSDF = async (inputFilePath, outputDirPath) => {
+  // Ensure the destination directory exists
+  fs.mkdirSync(outputDirPath, { recursive: true })
+
+  setGeneratePaths(path.dirname(inputFilePath), outputDirPath)
+
+  let font = await genFont(path.basename(inputFilePath), 'msdf')
+
+  if (font) await adjustFont(font)
+  else console.error('Failed to generate MSDF file')
 }
 
 // finds all TTF files in a directory