@lightningjs/blits 1.7.0 → 1.7.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v1.7.1
+
+_14 oct 2024_
+
+- Fixed support for `.otf` and `.woff` fonts files in combination with MSDF generator
+
+
 ## v1.7.0
 
 _14 oct 2024_

package/docs/components/user_input.md

@@ -125,9 +125,9 @@ Blits comes with a default keycode mapping. This mapping is a sensible default t
 
 But it's possible that the keycodes and mapping of your target device are slightly or even completely different.
 
-In Blits, you can easily configure the key mapping to match your needs. In the `src/index.js` file where we instantiate the App via the `Blits.Launch` function, we can add an extra key, called `keys`, to the _settings object_.
+In Blits, you can easily configure the key mapping to match your needs. In the `src/index.js` file where we instantiate the App via the `Blits.Launch` function, we can add an extra key, called `keymap`, to the _settings object_.
 
-The `keys` item should be an object literal, where you map a `key` or `keyCode` (from the `KeyboardEvent`) to an event name that you can use in your Components.
+The `keymap` should contain an object literal, where you map a `key` or `keyCode` (from the `KeyboardEvent`) to an event name that you can use in your Components.
 
 > You can use a site like [keyjs.dev](https://keyjs.dev/) to find the appropriate key and keyCode for your device
 
@@ -137,7 +137,7 @@ Blits.Launch(App, 'app', {
   w: 1920,
   h: 1080,
   //...
-  keys: {
+  keymap: {
     // switch left and right using the key
     ArrowLeft: 'right',
     ArrowRight: 'left',
@@ -152,7 +152,7 @@ Blits.Launch(App, 'app', {
 })
 ```
 
-The custom keys object will be merged with the default key mapping, that looks like this:
+The custom keymap object will be merged with the default key mapping, that looks like this:
 
 ```js
 const defaultKeyMap = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

package/vite/msdfGenerator.js

@@ -49,9 +49,19 @@ export default function () {
           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)) {
+            // Attempt to find the font file with supported extensions
+            const supportedExtensions = ['ttf', 'otf', 'woff']
+            let fontFile = null
+            for (const fontExt of supportedExtensions) {
+              const potentialPath = path.join(fontDir, `${fontName}.${fontExt}`)
+              if (fs.existsSync(potentialPath)) {
+                fontFile = potentialPath
+                break
+              }
+            }
+
+            if (fontFile) {
               const generatedFontFile = path.join(
                 msdfOutputDir,
                 fontPath,
@@ -83,7 +93,7 @@ export default function () {
                 next() // Handle case where generation might have failed
               }
             } else {
-              next() // ttf file does not exist
+              next() // No supported font file found
             }
           } else {
             next() // file exists
@@ -95,18 +105,18 @@ export default function () {
     },
     // after build ends, the first hook is renderStart where we can modify the output
     async renderStart() {
-      const ttfFiles = findAllTtfFiles(publicDir)
+      const fontFiles = findAllFontFiles(publicDir)
 
-      for (const ttfFile of ttfFiles) {
-        const relativePath = path.relative(publicDir, path.dirname(ttfFile))
-        const baseName = path.basename(ttfFile).replace(/\.ttf$/i, '')
+      for (const fontFile of fontFiles) {
+        const relativePath = path.relative(publicDir, path.dirname(fontFile))
+        const baseName = path.basename(fontFile).replace(/\.(ttf|otf|woff)$/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 generateSDF(ttfFile, path.join(msdfOutputDir, relativePath))
+          console.log(`Generating missing MSDF files for ${fontFile}`)
+          await generateSDF(fontFile, path.join(msdfOutputDir, relativePath))
         }
       }
 
@@ -129,17 +139,17 @@ const generateSDF = async (inputFilePath, outputDirPath) => {
   else console.error('Failed to generate MSDF file')
 }
 
-// finds all TTF files in a directory
-const findAllTtfFiles = (dir, filesList = []) => {
+// Finds all font files (.ttf, .otf, .woff) in a directory
+const findAllFontFiles = (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)
+      findAllFontFiles(dirPath, filesList)
     } else {
-      // Check for all case variations of TTF extension
-      if (file.name.match(/\.ttf$/i)) {
+      // Check for supported font extensions
+      if (file.name.match(/\.(ttf|otf|woff)$/i)) {
         filesList.push(path.join(dir, file.name))
       }
     }