@lightningjs/blits 0.7.1 → 0.7.3

package/.eslintrc.cjs

@@ -46,6 +46,7 @@ module.exports = {
         tabWidth: 2,
         semi: false,
         printWidth: 100,
+        endOfLine: 'auto',
       },
     ],
   },

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+# v0.7.3
+
+_28 feb 2024_
+
+- Added functionality that forces focus hook to fire when parent receives focus from child
+- Improved destroy sequence of nodes to be disposed
+- Fixed issue with tracking reactive objects multiple times (potential max call stack error)
+- Added on the fly MSDF font generation from a `.ttf` file placed in `publics/fonts`
+- Added support for pre-compilation for files with more than 1 Blits component
+- Fixed transitions on scale attribute when passed an object with `x` and `y` values
+
+# v0.7.2
+
+_23 feb 2024_
+
+- Added small fix to support for (re)assigning an array used in a for-loop
+- Added option to enable the Lightning inspector in launch setting (`inspector: true/false`)
+
 # v0.7.1
 
 _22 feb 2024_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "test": "c8 npm run test:run",
-    "test:run": "node -r 'global-jsdom/register' ./node_modules/.bin/tape '{,!(node_modules)/**/}*.test.js' | tap-diff",
+    "test:run": "node -r global-jsdom/register ./node_modules/.bin/tape '{,!(node_modules)/**/}*.test.js' | tap-diff",
     "lint": "eslint '**/*.js'",
     "lint:fix": "eslint '**/*.js' --fix",
     "prepublishOnly": "node scripts/prepublishOnly.js",
@@ -40,6 +40,8 @@
     "husky": "^7.0.4",
     "jsdom": "24.0.0",
     "lint-staged": "^12.3.3",
+    "msdf-bmfont-xml": "^2.7.0",
+    "ora": "^7.0.1",
     "prettier": "^2.5.1",
     "tap-diff": "^0.1.1",
     "tape": "^5.5.0"

package/src/element.js

@@ -158,12 +158,18 @@ const Props = {
   },
   set scale(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if ('x' in v) this._props.scaleX = v.x
-      if ('y' in v) this._props.scaleY = v.y
+      if ('x' in v) {
+        this._set.add('scaleX')
+        this._props.scaleX = v.x
+      }
+      if ('y' in v) {
+        this._set.add('scaleX')
+        this._props.scaleY = v.y
+      }
     } else {
       this._props.scale = v
+      this._set.add('scale')
     }
-    this._set.add('scale')
   },
   set show(v) {
     this._props.alpha = v ? 1 : 0
@@ -346,7 +352,7 @@ const Element = {
     Object.values(this.scheduledTransitions).forEach((scheduledTransition) => {
       clearTimeout(scheduledTransition.timeout)
     })
-    this.node.parent = null
+    this.node.destroy()
   },
   get nodeId() {
     return this.node && this.node.id

package/src/fontLoader.js

@@ -6,6 +6,15 @@ export default class FontLoader extends CoreExtension {
   async run(stage) {
     Settings.get('fonts', []).forEach((font) => {
       if (font.type === 'sdf' || font.type === 'msdf') {
+        // automatically map png key to file name
+        if (!font.png && font.file) {
+          font.png = font.file.replace(/\.[^.]+$/, `.${font.type}.png`)
+        }
+        // automatically map json to file name
+        if (!font.json && font.file) {
+          font.json = font.file.replace(/\.[^.]+$/, `.${font.type}.json`)
+        }
+
         stage.fontManager.addFontFace(
           new SdfTrFontFace(font.family, {}, font.type, stage, font.png, font.json)
         )

package/src/launch.d.ts

@@ -32,15 +32,14 @@ interface WebFont {
   file: string
 }
 
-interface SdfFont {
+interface SdfFontWithFile {
   /**
-  * Name of the font family
-  */
-  family: string,
-  /**
-  * Type of font (msdf or sdf)
-  */
-  type: 'msdf' | 'sdf',
+    * Location of the font file (i.e. `/fonts/OpenSans-Medium.ttf`)
+    */
+  file: string
+}
+
+interface SdfFontWithPngJson {
   /**
   * Location of the font map (i.e. `'/fonts/Lato-Regular.msdf.json'`)
   */
@@ -51,6 +50,18 @@ interface SdfFont {
   png: string
 }
 
+type SdfFont = {
+  /**
+  * Name of the font family
+  */
+  family: string,
+  /**
+  * Type of font (msdf or sdf)
+  */
+  type: 'msdf' | 'sdf',
+} & (SdfFontWithFile | SdfFontWithPngJson)
+
+
 type ScreenResolutions = 'hd' | '720p' | 720 | 'fhd' | 'fullhd' | '1080p' | 1080 | '4k' | '2160p' | 2160
 
 type Font = WebFont | SdfFont
@@ -172,6 +183,15 @@ export interface Settings {
    *
    */
   canvasColor?: string,
+  /**
+   * Enable inspector
+   *
+   * Enables the inspector tool for debugging and inspecting the application, the node tree
+   * will be replicated in the DOM and can be inspected using the browser's developer tools
+   *
+   * Defaults to `false`
+   */
+  inspector?: boolean
 }
 
 /**

package/src/launch.js

@@ -52,6 +52,7 @@ export default (App, target, settings) => {
           ? settings.webWorkersLimit
           : window.navigator.hardwareConcurrency || 2,
       clearColor: (settings.canvasColor && colors.normalize(settings.canvasColor)) || 0x00000000,
+      enableInspector: settings.inspector || false,
     },
     target,
     driver

package/src/lib/lifecycle.js

@@ -27,7 +27,7 @@ export default {
     return this.current
   },
   set state(v) {
-    if (states.indexOf(v) > -1 && v !== this.current) {
+    if (states.indexOf(v) > -1 && (v !== this.current || v === 'focus')) {
       Log.debug(
         `Setting lifecycle state from ${this.current} to ${v} for ${this.component.componentId}`
       )

package/src/lib/precompiler/precompiler.js

@@ -25,40 +25,46 @@ export default (source, filePath) => {
     source.indexOf('Blits.Application(') > -1 ||
     /=>\s*Component\(['"][A-Za-z]+['"],/s.test(source) // blits component
   ) {
-    // get the start of the template key in de component configuration object
-    const templateKeyRegex = /template:\s*([`"'])*/g
-    const templateStartResult = templateKeyRegex.exec(source)
+    const templates = source.matchAll(/(?<!\/\/\s*)template\s*:\s*(['"`])((?:\\?.)*?)\1/gs)
+    let newSource = source
+    /*
+      if there are multiple templates in the file, we need to keep
+      track of the offset caused by the previous replacements
+    */
+    let offset = 0
 
-    if (templateStartResult) {
-      const typeOfQuotesUsed = templateStartResult[1]
-      const templateStartIndex = templateStartResult.index
+    for (const template of templates) {
+      if (template[2]) {
+        const templateStartIndex = template.index + offset
+        const templateEndIndex = templateStartIndex + template[0].length
+        const templateContent = template[2]
 
-      // get the template contents from the configuration object
-      const templateContentsRegex = new RegExp(`${typeOfQuotesUsed}([\\s\\S]*?)${typeOfQuotesUsed}`)
-      const templateContentResult = templateContentsRegex.exec(source.slice(templateStartIndex))
-      const templateEndIndex =
-        templateStartIndex + templateContentResult.index + templateContentResult[0].length
+        // Parse the template
+        let resourceName = 'Blits.Application'
+        if (source.indexOf('Blits.Component(') > -1) {
+          resourceName = source.match(/Blits\.Component\(['"](.*)['"]\s*,/)[1]
+        }
 
-      // Parse the template
-      let resourceName = 'Blits.Application'
-      if (source.indexOf('Blits.Component(') > -1) {
-        resourceName = source.match(/Blits\.Component\(['"](.*)['"]\s*,/)[1]
-      }
-      const componentPath = path.relative(process.cwd(), filePath)
-      const parsed = parser(templateContentResult[1], resourceName, null, componentPath)
+        const componentPath = path.relative(process.cwd(), filePath)
+        const parsed = parser(templateContent, resourceName, null, componentPath)
+
+        // Generate the code
+        const code = generator.call({ components: {} }, parsed)
 
-      // Generate the code
-      const code = generator.call({ components: {} }, parsed)
+        // 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(
+          (fn) => fn.toString()
+        )}], context: {}}`
 
-      // 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(
-        (fn) => fn.toString()
-      )}], context: {}}`
-      const newSource =
-        source.substring(0, templateStartIndex) + replacement + source.substring(templateEndIndex)
+        offset += replacement.length - template[0].length
 
-      return newSource
+        newSource =
+          newSource.substring(0, templateStartIndex) +
+          replacement +
+          newSource.substring(templateEndIndex)
+      }
     }
+    return newSource
   }
   return source
 }

package/src/lib/reactivity/reactive.js

@@ -46,12 +46,12 @@ const reactiveProxy = (target) => {
       if (Array.isArray(target) && arrayMethods.includes(key)) {
         return Reflect.get(target, key, receiver)
       }
-      track(target, key)
 
       if (target[key] !== null && typeof target[key] === 'object') {
         return reactiveProxy(target[key])
       }
 
+      track(target, key)
       return Reflect.get(target, key, receiver)
     },
     set(target, key, value, receiver) {
@@ -59,7 +59,11 @@ const reactiveProxy = (target) => {
 
       let result
       if (typeof value === 'object' && Array.isArray(value) && proxyMap.get(target[key])) {
-        result = target[key].splice(0, target[key].length, ...value)
+        if (oldValue !== value) {
+          result = oldValue.splice(0, target[key].length, ...value)
+        } else {
+          result = true
+        }
       } else {
         result = Reflect.set(target, key, value, receiver)
       }

package/vite/index.js

@@ -15,10 +15,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import preCompiler from './preCompiler.js'
 import { importChunkUrl } from '@lightningjs/vite-plugin-import-chunk-url'
 
+import preCompiler from './preCompiler.js'
+import msdfGenerator from './msdfGenerator.js'
+
 export { importChunkUrl as importChunkUrl } from '@lightningjs/vite-plugin-import-chunk-url'
 export { default as preCompiler } from './preCompiler.js'
+export { default as msdfGenerator } from './msdfGenerator.js'
 
-export default [importChunkUrl(), preCompiler()]
+export default [importChunkUrl(), preCompiler(), msdfGenerator()]

package/vite/msdfGenerator.js

@@ -0,0 +1,164 @@
+import path from 'path'
+import * as fs from 'fs'
+import generateBMFont from 'msdf-bmfont-xml'
+
+let config
+
+export default function () {
+  let msdfOutputDir = ''
+  let buildOutputPath = ''
+  let publicDir = ''
+
+  return {
+    name: 'msdfGenerator',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+      buildOutputPath = config.build.outDir
+      publicDir = path.join(config.root, 'public')
+      msdfOutputDir = path.resolve(config.root, 'node_modules', '.tmp-msdf-fonts')
+    },
+    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(/^\//, '')
+          const fontDir = path.join(publicDir, fontPath) // actual font directory
+          const targetDir = path.join(msdfOutputDir, fontPath) // target for generated fonts
+
+          if (!fs.existsSync(path.resolve(fontDir, file))) {
+            const fontName = match[1]
+            const ext = match[2]
+            const fontFile = path.join(fontDir, `${fontName}.ttf`)
+
+            if (fs.existsSync(fontFile)) {
+              const generatedFontFile = path.join(
+                msdfOutputDir,
+                fontPath,
+                `${fontName}.msdf.${ext}`
+              )
+              const mimeType = ext === 'png' ? 'image/png' : 'application/json'
+
+              if (!fs.existsSync(generatedFontFile)) {
+                console.log(`Generating ${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)
+              } else {
+                // this should never happen except some edge cases
+                console.error(`ERROR: Headers already sent for ${req.url}`, res.getHeaders())
+              }
+            } else {
+              next() // ttf file does not exist
+            }
+          } else {
+            next() // file exists
+          }
+        } else {
+          next() // not msdf.json or msdf.png
+        }
+      })
+    },
+    // 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) {
+        const relativePath = path.relative(publicDir, path.dirname(ttfFile))
+        const baseName = path.basename(ttfFile).replace(/\.ttf$/i, '')
+        const msdfJsonPath = path.join(msdfOutputDir, relativePath, `${baseName}.msdf.json`)
+        const msdfPngPath = path.join(msdfOutputDir, relativePath, `${baseName}.msdf.png`)
+
+        // 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)
+        }
+      }
+
+      if (fs.existsSync(msdfOutputDir)) {
+        copyDir(msdfOutputDir, buildOutputPath)
+      }
+    },
+  }
+}
+
+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)
+          }
+        }
+      }
+    )
+  })
+}
+
+// finds all TTF files in a directory
+const findAllTtfFiles = (dir, filesList = []) => {
+  const files = fs.readdirSync(dir, { withFileTypes: true })
+
+  files.forEach((file) => {
+    if (file.isDirectory()) {
+      const dirPath = path.join(dir, file.name)
+      findAllTtfFiles(dirPath, filesList)
+    } else {
+      // Check for all case variations of TTF extension
+      if (file.name.match(/\.ttf$/i)) {
+        filesList.push(path.join(dir, file.name))
+      }
+    }
+  })
+
+  return filesList
+}
+
+const copyDir = (src, dest) => {
+  // Ensure the destination directory exists
+  fs.mkdirSync(dest, { recursive: true })
+
+  const entries = fs.readdirSync(src, { withFileTypes: true })
+
+  for (let entry of entries) {
+    const srcPath = path.join(src, entry.name)
+    const destPath = path.join(dest, entry.name)
+
+    entry.isDirectory() ? copyDir(srcPath, destPath) : fs.copyFileSync(srcPath, destPath) // Copy files
+  }
+}