@lightningjs/blits 0.9.9 → 1.0.0

package/src/lib/colors/colors.js

@@ -15,64 +15,77 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import htmlColors from './htmlColors.js'
-import { Log } from '../log.js'
+import colorsMap from './htmlColors.js'
+
+const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i
+const rgba =
+  /^(rgba?)\((\s*(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\s*),(\s*(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\s*),(\s*(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\s*)(,(\s*(-?\d+(?:\.\d+)?)\s*))?\)$/
+const hsla =
+  /^(hsla?)\((\s*(360|3[0-5][0-9]|[12]?[0-9]{1,2})\s*),(\s*(100|[1-9]?[0-9])\s*)%,(\s*(100|[1-9]?[0-9])\s*)%(,(\s*(1|0(?:\.\d+)?)\s*))?\)$/
+
+const hexLookup = {}
+
+const decimalToHex = (decimal) => {
+  if (hexLookup[decimal] !== undefined) {
+    return hexLookup[decimal]
+  }
+
+  const resp = parseInt(decimal).toString(16).padStart(2, '0')
+  hexLookup[decimal] = resp
+  return resp
+}
 
 export default {
-  // The defaultColor parameter should be set to null when utilizing this function within the template parser.
-  // Because the template parser evaluates attribute values, even if they are not color codes,
-  // to determine whether they represent color values or not.
-  normalize(color = '', defaultColor = '0xffffffff') {
+  normalize: (color = '', defaultColor = '0xffffffff') => {
     color = color.toString()
 
-    if (color.length > 0) {
-      const normalized = /^0x[0-9a-f]{8}$/
-      const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i
-      const rgba =
-        /^(rgba?)\((\s*(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\s*),(\s*(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\s*),(\s*(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\s*)(,(\s*(-?\d+(?:\.\d+)?)\s*))?\)$/
-      const hsla =
-        /^(hsla?)\((\s*(360|3[0-5][0-9]|[12]?[0-9]{1,2})\s*),(\s*(100|[1-9]?[0-9])\s*)%,(\s*(100|[1-9]?[0-9])\s*)%(,(\s*(1|0(?:\.\d+)?)\s*))?\)$/
+    // its mappable, map it
+    if (colorsMap[color] !== undefined) {
+      return colorsMap[color]
+    }
 
-      if (normalized.test(color)) {
-        return color
+    // its a 0xRRGGBBAA color, store it and return it
+    if (color.startsWith('0x') && color.length === 10) {
+      colorsMap[color] = color
+      return color
+    }
+
+    // check for hex color
+    if (hex.test(color)) {
+      color = color.replace('#', '').toLowerCase()
+      if (color.length === 3) {
+        color = color
+          .split('')
+          .map((c) => c + c)
+          .join('')
       }
 
-      if (hex.test(color)) {
-        color = color.replace('#', '').toLowerCase()
-        if (color.length === 3) {
-          color = color
-            .split('')
-            .map((c) => c + c)
-            .join('')
-        }
+      const colorRGBA = '0x' + color.padEnd(8, 'f')
+      colorsMap[color] = colorRGBA
+      return colorRGBA
+    }
 
-        return '0x' + color.padEnd(8, 'f')
-      }
+    //rgb/a
+    const rgbaMatch = rgba.exec(color)
+    if (rgbaMatch) {
+      const r = decimalToHex(rgbaMatch[3])
+      const g = decimalToHex(rgbaMatch[5])
+      const b = decimalToHex(rgbaMatch[7])
+      let a = 'ff'
 
-      //rgb/a
-      const rgbaMatch = rgba.exec(color)
-      if (rgbaMatch) {
-        return (
-          '0x' +
-          parseInt(rgbaMatch[3]).toString(16).padStart(2, '0') +
-          parseInt(rgbaMatch[5]).toString(16).padStart(2, '0') +
-          parseInt(rgbaMatch[7]).toString(16).padStart(2, '0') +
-          (rgbaMatch[10] && rgbaMatch[1] === 'rgba'
-            ? Math.min(Math.max(Math.round(parseFloat(rgbaMatch[10]) * 255), 0), 255)
-                .toString(16)
-                .padStart(2, '0')
-            : 'ff')
-        )
+      if (rgbaMatch[10] && rgbaMatch[1] === 'rgba') {
+        const alpha = Math.min(Math.max(Math.round(parseFloat(rgbaMatch[10]) * 255), 0), 255)
+        a = decimalToHex(alpha)
       }
 
-      if (hsla.test(color)) {
-        Log.warn('HSL(A) color format is not supported yet')
-        return '0xffffffff'
-      }
+      const resp = '0x' + r + g + b + a
+      colorsMap[color] = resp
+      return resp
+    }
 
-      if (color in htmlColors) {
-        return htmlColors[color]
-      }
+    if (hsla.test(color)) {
+      console.warn('HSL(A) color format is not supported yet')
+      return '0xffffffff'
     }
 
     return defaultColor

package/src/lib/precompiler/precompiler.js

@@ -23,7 +23,8 @@ export default (source, filePath) => {
   if (
     source.indexOf('Blits.Component(') > -1 ||
     source.indexOf('Blits.Application(') > -1 ||
-    /=>\s*Component\(['"][A-Za-z]+['"],/s.test(source) // blits component
+    /=>\s*Component\(['"][A-Za-z]+['"],/s.test(source) || // blits component
+    /\{.*?template\s*:\s*(['"`])((?:\\?.)*?)\1.*?\}/s.test(source) // object with template key
   ) {
     const templates = source.matchAll(/(?<!\/\/\s*)template\s*:\s*(['"`])((?:\\?.)*?)\1/gs)
     let newSource = source

package/src/lib/reactivity/effect.js

@@ -16,6 +16,7 @@
  */
 
 let currentEffect = null
+let currentKey = null
 
 let paused = false
 
@@ -25,22 +26,16 @@ export const pauseTracking = () => {
 
 export const resumeTracking = () => {
   paused = false
-  for (let i = 0; i < trackQueue.length; i++) {
-    const item = trackQueue[i]
-    currentEffect = item.currentEffect
-    track(item.target, item.key)
-  }
-  trackQueue.length = 0
 }
 
 const objectMap = new WeakMap()
 
-const trackQueue = []
-
 export const track = (target, key) => {
   if (currentEffect) {
     if (paused) {
-      trackQueue.push({ target, key, currentEffect })
+      return
+    }
+    if (currentKey !== null && key !== currentKey) {
       return
     }
     let effectsMap = objectMap.get(target)
@@ -58,21 +53,23 @@ export const track = (target, key) => {
 }
 
 export const trigger = (target, key, force = false) => {
-  if (paused) return
+  if (paused === true) return
   const effectsMap = objectMap.get(target)
   if (!effectsMap) {
     return
   }
   const effects = effectsMap.get(key)
   if (effects) {
-    effects.forEach((effect) => {
+    for (let effect of effects) {
       effect(force)
-    })
+    }
   }
 }
 
-export const effect = (effect) => {
+export const effect = (effect, key = null) => {
   currentEffect = effect
+  currentKey = key
   currentEffect()
   currentEffect = null
+  currentKey = null
 }

package/src/lib/reactivity/reactive.js

@@ -18,27 +18,27 @@
 import { track, trigger, pauseTracking, resumeTracking } from './effect.js'
 import symbols from '../symbols.js'
 
-const arrayPatchMethods = ['push', 'pop', 'shift', 'unshift', 'splice']
+const arrayPatchMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort']
 
 const proxyMap = new WeakMap()
 
-const getProxy = (obj) => {
-  return proxyMap.get(obj)
-}
-
-const getRaw = (value) => {
+export const getRaw = (value) => {
   const raw = value && value[symbols.raw]
   return raw ? getRaw(raw) : value
 }
 
 const reactiveProxy = (original, _parent = null, _key) => {
-  // don't create a proxy when a Blits component is assigned to a state variable
-  if (typeof original === 'object' && original[symbols.id]) {
+  // don't create a proxy when a Blits component or an Image Texture
+  // is assigned to a state variable
+  if (
+    (typeof original === 'object' && original[symbols.id]) ||
+    original.constructor.name === '_ImageTexture'
+  ) {
     return original
   }
 
   // if original object is already a proxy, don't create a new one but return the existing one instead
-  const existingProxy = getProxy(original)
+  const existingProxy = proxyMap.get(original)
   if (existingProxy) {
     return existingProxy
   }
@@ -52,21 +52,31 @@ const reactiveProxy = (original, _parent = null, _key) => {
 
       // handling arrays
       if (Array.isArray(target)) {
+        if (typeof target[key] === 'object' && target[key] !== null) {
+          if (Array.isArray(target[key])) {
+            track(target, key)
+          }
+          // create a new reactive proxy
+          return reactiveProxy(getRaw(target[key]), target, key)
+        }
         // augment array path methods (that change the length of the array)
-        if (arrayPatchMethods.indexOf(key) > -1) {
+        if (arrayPatchMethods.indexOf(key) !== -1) {
           return function (...args) {
             pauseTracking()
             const result = target[key].apply(this, args)
+            resumeTracking()
             // trigger a change on the parent object and the key
             // i.e. when pushing a new item to `obj.data`, _parent will equal `obj`
             // and _key will equal `data`
-            resumeTracking()
             trigger(_parent, _key)
             return result
           }
-        } else {
-          return Reflect.get(target, key, receiver)
         }
+        if (key === 'length') {
+          return original.length
+        }
+
+        return Reflect.get(target, key, receiver)
       }
 
       // handling objects (but not null values, which have object type in JS)
@@ -75,7 +85,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
           track(target, key)
         }
         // create a new reactive proxy
-        return reactiveProxy(target[key], target, key)
+        return reactiveProxy(getRaw(target[key]), target, key)
       }
 
       // handling all other types

package/src/lib/symbols.js

@@ -3,6 +3,7 @@ export default {
   cursorTagStart: Symbol('cursorTagStart'),
   computedKeys: Symbol('computedKeys'),
   destroy: Symbol('destroy'),
+  getChildren: Symbol('getChildren'),
   holder: Symbol('holder'),
   id: Symbol('id'),
   identifier: Symbol('identifier'),

package/src/router/router.js

@@ -259,9 +259,23 @@ const removeView = async (route, view, transition) => {
 }
 
 const setOrAnimate = (node, transition, shouldAnimate = true) => {
-  return shouldAnimate
-    ? node.animate(transition.prop, transition.value, transition)
-    : node.set(transition.prop, transition.value)
+  return new Promise((resolve) => {
+    if (shouldAnimate) {
+      // resolve the promise in the transition end-callback
+      // ("extending" end callback when one is already specified)
+      const existingEndCallback = transition.end
+      transition.end = existingEndCallback
+        ? (...args) => {
+            existingEndCallback(...args)
+            resolve()
+          }
+        : resolve
+      node.set(transition.prop, { transition })
+    } else {
+      node.set(transition.prop, transition.value)
+      resolve()
+    }
+  })
 }
 
 export const to = (location, data = {}, options = {}) => {

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