@lightningjs/blits 1.6.1 → 1.7.1

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 
-## v1.6.0
+## 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_
+
+- Added cleanup upon component destroy of effects generated by global reactivity
+
+## v1.6.0 / v1.6.1
 
 _9 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.6.1",
+  "version": "1.7.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

package/src/component/base/methods.js

@@ -20,6 +20,7 @@ import Focus from '../../focus.js'
 import eventListeners from '../../lib/eventListeners.js'
 import { trigger } from '../../lib/reactivity/effect.js'
 import { Log } from '../../lib/log.js'
+import { removeGlobalEffects } from '../../lib/reactivity/effect.js'
 
 export default {
   focus: {
@@ -56,6 +57,7 @@ export default {
       this.$clearIntervals()
       eventListeners.removeListeners(this)
       deleteChildren(this[symbols.children])
+      removeGlobalEffects(this[symbols.effects])
       Log.debug(`Destroyed component ${this.componentId}`)
     },
     writable: false,

package/src/component/setup/index.js

@@ -32,6 +32,8 @@ let counter = 0
 export default function (component, config) {
   component[symbols.identifier] = ++counter
 
+  component[symbols.effects] = []
+
   // setup hooks
   registerHooks(config.hooks, component[symbols.identifier])
 

package/src/component.js

@@ -161,9 +161,12 @@ const Component = (name = required('name'), config = required('config')) => {
     // reactive bindings define in the template
     const effects = config.code.effects
     for (let i = 0; i < effects.length; i++) {
-      effect(() => {
+      const eff = () => {
         effects[i](this, this[symbols.children], config, globalComponents, rootComponent, effect)
-      })
+      }
+      // store reference to the effect
+      this[symbols.effects].push(eff)
+      effect(eff)
     }
 
     // setup watchers if the components has watchers specified

package/src/lib/codegenerator/generator.js

@@ -392,13 +392,15 @@ const generateForLoopCode = function (templateObject, parent) {
   }
 
   // inner scope variables are part of the main forloop
-  innerScopeEffects.forEach((effect) => {
+  innerScopeEffects.forEach((effect, index) => {
     const key = effect.indexOf(`scope.${index}`) > -1 ? `'${interpolate(result[2], '')}'` : null
     if (effect.indexOf("Symbol.for('props')") === -1) {
       ctx.renderCode.push(`
-        effect(() => {
+        let eff${index} = () => {
           ${effect}
-        }, ${key})
+        }
+        effect(eff${index}, ${key})
+        component[Symbol.for('effects')].push(eff${index})
       `)
     } else {
       // props shouldn't be wrapped in an effect, but simply passed on

package/src/lib/reactivity/effect.js

@@ -29,8 +29,22 @@ export const resumeTracking = () => {
 }
 
 const objectMap = new WeakMap()
+const globalEffectsMap = new Map()
 
-export const track = (target, key) => {
+export const removeGlobalEffects = (effectsToRemove) => {
+  if (globalEffectsMap.size === 0) return
+  for (const [effect, target] of globalEffectsMap) {
+    if (effectsToRemove.indexOf(effect) === -1) continue
+    const effectsSet = objectMap.get(target)
+    if (effectsSet === undefined) continue
+    for (const set of effectsSet.values()) {
+      set.delete(effect)
+      globalEffectsMap.delete(effect)
+    }
+  }
+}
+
+export const track = (target, key, global = false) => {
   if (currentEffect) {
     if (paused) {
       return
@@ -49,6 +63,8 @@ export const track = (target, key) => {
       effectsMap.set(key, effects)
     }
     effects.add(currentEffect)
+
+    if (global === true) globalEffectsMap.set(currentEffect, target)
   }
 }
 

package/src/lib/reactivity/reactive.js

@@ -28,7 +28,7 @@ export const getRaw = (value) => {
   return raw ? getRaw(raw) : value
 }
 
-const reactiveProxy = (original, _parent = null, _key) => {
+const reactiveProxy = (original, _parent = null, _key, global) => {
   // don't create a proxy when a Blits component or an Image Texture
   // is assigned to a state variable
   if (typeof original === 'object') {
@@ -53,7 +53,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
       if (Array.isArray(target)) {
         if (typeof target[key] === 'object' && target[key] !== null) {
           if (Array.isArray(target[key])) {
-            track(target, key)
+            track(target, key, global)
           }
           // create a new reactive proxy
           return reactiveProxy(getRaw(target[key]), target, key)
@@ -81,7 +81,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
       // handling objects (but not null values, which have object type in JS)
       if (typeof target[key] === 'object' && target[key] !== null) {
         if (Array.isArray(target[key])) {
-          track(target, key)
+          track(target, key, global)
         }
         // create a new reactive proxy
         return reactiveProxy(getRaw(target[key]), target, key)
@@ -89,7 +89,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
 
       // handling all other types
       // track the key on the target
-      track(target, key)
+      track(target, key, global)
       // return the reflected value
       return Reflect.get(target, key, receiver)
     },
@@ -119,7 +119,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
   return proxy
 }
 
-const reactiveDefineProperty = (target) => {
+const reactiveDefineProperty = (target, global) => {
   Object.keys(target).forEach((key) => {
     let internalValue = target[key]
 
@@ -140,7 +140,7 @@ const reactiveDefineProperty = (target) => {
       enumerable: true,
       configurable: true,
       get() {
-        track(target, key)
+        track(target, key, global)
         return internalValue
       },
       set(newValue) {
@@ -157,8 +157,10 @@ const reactiveDefineProperty = (target) => {
   return target
 }
 
-export const reactive = (target, mode = 'Proxy') => {
-  return mode === 'defineProperty' ? reactiveDefineProperty(target) : reactiveProxy(target)
+export const reactive = (target, mode = 'Proxy', global = false) => {
+  return mode === 'defineProperty'
+    ? reactiveDefineProperty(target, global)
+    : reactiveProxy(target, undefined, undefined, global)
 }
 
 export const memo = (raw) => {

package/src/lib/symbols.js

@@ -46,4 +46,6 @@ export default {
   componentType: Symbol.for('componentType'),
   // Symbol 'isComponent' utilized within generated code
   isComponent: Symbol.for('isComponent'),
+  // Symbol 'effects' utilized within generated code
+  effects: Symbol.for('effects'),
 }

package/src/plugins/appstate.js

@@ -21,6 +21,6 @@ import Settings from '../settings.js'
 export default {
   name: 'appState',
   plugin(state = {}) {
-    return reactive(state, Settings.get('reactivityMode'))
+    return reactive(state, Settings.get('reactivityMode'), true)
   },
 }

package/src/plugins/language.js

@@ -32,7 +32,8 @@ export default {
         language: '',
         loaded: 0,
       },
-      Settings.get('reactivityMode')
+      Settings.get('reactivityMode'),
+      true
     )
 
     const setLanguage = (language) => {

package/src/plugins/theme.js

@@ -52,7 +52,8 @@ export default {
       {
         current: 'default',
       },
-      Settings.get('reactivityMode')
+      Settings.get('reactivityMode'),
+      true
     )
 
     let themes = {}

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))
       }
     }