@lightningjs/blits 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -19,6 +19,7 @@
     "prepublishOnly": "node scripts/prepublishOnly.js",
     "postpublish": "node scripts/postpublish.js"
   },
+  "types": "./index.d.ts",
   "lint-staged": {
     "*.js": [
       "eslint --fix"
@@ -47,8 +48,8 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/msdf-generator": "^1.0.2",
-    "@lightningjs/renderer": "^2.3.2"
+    "@lightningjs/msdf-generator": "^1.1.0",
+    "@lightningjs/renderer": "^2.4.0"
   },
   "repository": {
     "type": "git",

package/src/engines/L3/element.js

@@ -386,13 +386,21 @@ const Element = {
       f,
     }
 
-    if (transition.start && typeof transition.start === 'function') {
+    if (transition.start !== undefined && typeof transition.start === 'function') {
       // fire transition start callback when animation really starts (depending on specified delay)
       f.once('animating', () => {
         transition.start.call(this.component, this, prop, startValue)
       })
     }
 
+    if (transition.progress !== undefined && typeof transition.progress === 'function') {
+      let prevProgress = 0
+      f.on('tick', (_node, { progress }) => {
+        transition.progress.call(this.component, this, prop, progress, prevProgress)
+        prevProgress = progress
+      })
+    }
+
     f.once('stopped', () => {
       // remove the prop from scheduled transitions
       this.scheduledTransitions[prop] = undefined

package/vite/msdfGenerator.js

@@ -1,5 +1,6 @@
 import path from 'path'
 import * as fs from 'fs'
+import { createHash } from 'crypto'
 import { genFont, setGeneratePaths } from '@lightningjs/msdf-generator'
 import { adjustFont } from '@lightningjs/msdf-generator/adjustFont'
 
@@ -21,6 +22,8 @@ class TaskQueue {
 
 const fontGenerationQueue = new TaskQueue()
 let config
+let checksumPaths = []
+let checksumData = []
 
 export default function () {
   let msdfOutputDir = ''
@@ -49,9 +52,21 @@ 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
+            let fontType = null
+            for (const fontExt of supportedExtensions) {
+              const potentialPath = path.join(fontDir, `${fontName}.${fontExt}`)
+              if (fs.existsSync(potentialPath)) {
+                fontFile = potentialPath
+                fontType = '.' + fontExt
+                break
+              }
+            }
+
+            if (fontFile) {
               const generatedFontFile = path.join(
                 msdfOutputDir,
                 fontPath,
@@ -60,10 +75,13 @@ export default function () {
               const mimeType = ext === 'png' ? 'image/png' : 'application/json'
 
               await fontGenerationQueue.enqueue(async () => {
-                if (!fs.existsSync(generatedFontFile)) {
-                  // Check if generation is needed
+                if (isGenerationRequired(fontDir, targetDir, fontName, fontType)) {
+                  const configFilePath = path.join(fontDir, `${fontName}.config.json`)
+
                   console.log(`\nGenerating ${targetDir}/${fontName}.msdf.${ext}`)
-                  await generateSDF(fontFile, path.join(targetDir))
+                  await generateSDF(fontFile, path.join(targetDir), configFilePath)
+
+                  saveChecksum()
                 }
               })
 
@@ -83,7 +101,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 +113,21 @@ export default function () {
     },
     // after build ends, the first hook is renderStart where we can modify the output
     async renderStart() {
-      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 generateSDF(ttfFile, path.join(msdfOutputDir, relativePath))
+      const fontFiles = findAllFontFiles(publicDir)
+
+      for (const fontFile of fontFiles) {
+        const relativePath = path.relative(publicDir, path.dirname(fontFile))
+        const fontExt = path.extname(fontFile)
+        const baseName = path.basename(fontFile).replace(/\.(ttf|otf|woff)$/i, '')
+        const targetDir = path.join(msdfOutputDir, relativePath)
+
+        // Check MSDF generation is required
+        if (isGenerationRequired(path.dirname(fontFile), targetDir, baseName, fontExt)) {
+          const configFilePath = path.join(path.dirname(fontFile), `${baseName}.config.json`)
+          console.log(`Generating missing MSDF files for ${fontFile}`)
+          await generateSDF(fontFile, path.join(msdfOutputDir, relativePath), configFilePath)
+
+          saveChecksum()
         }
       }
 
@@ -117,11 +138,11 @@ export default function () {
   }
 }
 
-const generateSDF = async (inputFilePath, outputDirPath) => {
+const generateSDF = async (inputFilePath, outputDirPath, configFilePath) => {
   // Ensure the destination directory exists
   fs.mkdirSync(outputDirPath, { recursive: true })
 
-  setGeneratePaths(path.dirname(inputFilePath), outputDirPath)
+  setGeneratePaths(path.dirname(inputFilePath), outputDirPath, configFilePath)
 
   let font = await genFont(path.basename(inputFilePath), 'msdf')
 
@@ -129,17 +150,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))
       }
     }
@@ -158,6 +179,74 @@ const copyDir = (src, dest) => {
     const srcPath = path.join(src, entry.name)
     const destPath = path.join(dest, entry.name)
 
+    // Should not copy .checksum files to dist directory
+    if (srcPath.indexOf('.checksum') !== -1) continue
+
     entry.isDirectory() ? copyDir(srcPath, destPath) : fs.copyFileSync(srcPath, destPath) // Copy files
   }
 }
+
+// Check font config.json or font file modified since last generation
+const isGenerationRequired = (fontDir, targetDir, fontName, fontExt) => {
+  const fontFilePath = path.resolve(fontDir, fontName + fontExt)
+  const fontChecksumPath = path.resolve(targetDir, fontName + fontExt + '.checksum')
+
+  const configJsonPath = path.resolve(fontDir, fontName + '.config.json')
+  const configChecksumPath = path.resolve(targetDir, fontName + '.config.checksum')
+
+  // If font file checksum not exists, should generate msdf
+  if (!fs.existsSync(fontChecksumPath)) {
+    checksumPaths.push(fontChecksumPath)
+    checksumData.push(generateHash(fontFilePath))
+
+    if (fs.existsSync(configJsonPath)) {
+      checksumPaths.push(configChecksumPath)
+      checksumData.push(generateHash(configJsonPath))
+    }
+    return true
+  }
+
+  // If config.json exists, can be newly added or modified since last generation of msdf
+  if (fs.existsSync(configJsonPath)) {
+    // If config.json checksum not exists, should generate msdf
+    if (!fs.existsSync(configChecksumPath)) {
+      checksumPaths.push(configChecksumPath)
+      checksumData.push(generateHash(configJsonPath))
+      return true
+    }
+    const isConfigModified = isInputFileModified(configJsonPath, configChecksumPath)
+
+    // If config.json is modified, should generate msdf
+    if (isConfigModified) return true
+  }
+
+  // Check font file modified, if modified, should generate msdf
+  return isInputFileModified(fontFilePath, fontChecksumPath)
+}
+
+const isInputFileModified = (inputFilePath, targetFilePath) => {
+  const inputChecksum = generateHash(inputFilePath)
+  const targetChecksum = fs.readFileSync(targetFilePath).toString()
+  if (inputChecksum !== targetChecksum) {
+    checksumPaths.push(targetFilePath)
+    checksumData.push(inputChecksum)
+    return true
+  }
+  return false
+}
+
+const generateHash = (filePath) => {
+  const buffer = fs.readFileSync(filePath)
+  return createHash('md5').update(buffer).digest('hex')
+}
+
+const saveChecksum = () => {
+  if (checksumPaths.length > 0 && checksumData.length > 0) {
+    for (let i = 0; i < checksumPaths.length; i++) {
+      // Save checksum
+      fs.writeFileSync(checksumPaths[i], checksumData[i])
+    }
+    checksumData.length = 0
+    checksumPaths.length = 0
+  }
+}

package/src/application.d.ts

@@ -1,174 +0,0 @@
-
-/*
- * Copyright 2023 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 {default as Component} from './component'
-
-declare namespace Application {
-
-  interface Transition {
-    /**
-     * Name of the prop to transition (i.e. 'x', 'y', 'alpha', 'color')
-     */
-    prop: string,
-    /**
-     * Value the prop should transition to (i.e. 0, 100, '#223388')
-     */
-    value: any,
-    /**
-     * Duration of the transition in milliseconds, defaults to 300
-     */
-    duration?: number,
-    /**
-     * Easing function to apply to the transition
-     */
-    easing?: string,
-    /**
-     * Delay before the transition starts in milliseconds
-     */
-    delay?: number
-  }
-
-  interface Before {
-    /**
-    * Name of the prop to set before the transition starts
-    */
-    prop: string,
-    /**
-     * Value the prop to set before the transition starts
-     */
-    value: any,
-  }
-
-  interface RouteTransition {
-    /**
-     * Setting or Array of Settings before new view enters into the router view
-     */
-    before: Before | Before[],
-    /**
-     * Transition or Array of Transitions for new view to enters into the router view
-     */
-    in: Transition | Transition[],
-    /**
-     * Transition or Array of Transitions for old view to leave the router view
-     */
-    out: Transition | Transition[],
-  }
-
-  type RouteTransitionFunction = (previousRoute: Route, currentRoute: Route) => RequireAtLeastOne<RouteTransition>
-
-  interface RouteAnnounce {
-    /**
-     * Message to be announced
-     */
-    message: String,
-    /**
-     * Politeness level
-     *
-     * Defaults to 'off'
-     */
-    politeness?: 'off' | 'polite' | 'assertive'
-  }
-
-  type RequireAtLeastOne<T> = {
-    [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>
-  }[keyof T]
-
-  interface RouteHooks {
-    before?: (to: Route, from: Route) => string | Route;
-  }
-
-  type Route = {
-    /**
-     * URI path for the route
-     */
-    path: string,
-    /**
-     * Component to load when activating the route
-     */
-    component: Component,
-    /**
-     * Transition configuration for the route
-     */
-    transition?: RequireAtLeastOne<RouteTransition> | RouteTransitionFunction,
-    /**
-     * Extra route options
-     */
-    options?: object // todo: specify which options are available,
-    /**
-     * Message to be announced when visiting the route (often used for accessibility purposes)
-     *
-     * Can be either a `String` with the message or an object that defines the message and the
-     * politeness level
-     */
-    announce?: String | RouteAnnounce
-    /**
-     * Register hooks for the route
-     */
-    hooks?: RouteHooks
-    /**
-     * Route path parameters
-     */
-    readonly params?: {
-      [key: string]: string | number
-    }
-    /**
-     * Allows for attaching custom data to a route, either hardcoded in the
-     * route definition or asigned to the route object in a before hook
-     *
-     * Will be merged with the route params and navigation data and passed as
-     * props into the route component
-     */
-    data?: {
-      [key: string]: any
-    }
-  }
-
-  export interface ApplicationInstance extends Component.ComponentInstance {}
-
-  export interface ApplicationConfig<Props extends string, S, M> extends Component.ComponentConfig<Props, S, M> {
-    /**
-     * Routes definition
-     *
-     * @example
-     *
-     * ```js
-     * routes: [
-     *  { path: '/', component: Home },
-     *  { path: '/details', component: Details },
-     *  { path: '/account', component: Account },
-     * ]
-     * ```
-     */
-    routes?: Route[]
-  }
-}
-
-/**
- * Blits.Application()
- *
- * Root App component
- */
-declare function Application<
-  Props extends string,
-  S extends Component.State,
-  M extends Component.Methods
-  >(
-    config: Application.ApplicationConfig<Props, S, M>
-) : Application.ApplicationInstance
-
-export default Application;