@lightningjs/blits 0.9.9 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v0.10.0
+
+_17 june 2024_
+
+- Updated renderer to version v0.9.1
+- Updated font generation to use the new `@lightningjs/msdf-generator`-package with required font metrics
+- Added queue mechanism to font generation to prevent hanging process
+- Added functionality to pass a component into the Component `:is` attribute
+
+Please read refer to the [breaking changes](https://github.com/lightning-js/renderer/releases/tag/v0.9.0) in the
+renderer related to MSDF fonts. When you have custom msdf fonts in your `/public` folder you may need to regenerate
+them (or remove the files and let Blits take care of [generating for you from a `.ttf`](https://lightning-js.github.io/blits/#/essentials/displaying_text?id=using-custom-fonts))
+
+
 ## v0.9.9
 
 _22 may 2024_

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.9.9",
+  "version": "0.10.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
     ".": "./index.js",
     "./vite": "./vite/index.js",
-    "./fontloader": "./src/fontLoader.js",
     "./transitions": "./src/router/transitions/index.js"
   },
   "scripts": {
@@ -45,11 +44,11 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.8.4",
+    "@lightningjs/msdf-generator": "^1.0.1",
+    "@lightningjs/renderer": "0.9.1",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",
-    "msdf-bmfont-xml": "^2.7.0",
     "ora": "^7.0.1",
     "prompts": "^2.4.2",
     "replace-in-file": "^6.1.0",

package/src/components/FPScounter.js

@@ -96,13 +96,19 @@ export default () =>
         if (!elms[4]) {
           const componentType = props4['is'] || 'Sprite'
 
-          elms[4] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props4 }, elms[3], component)
+          let component4
+          if (typeof componentType === 'string') {
+            component4 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component4) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component4 = componentType
+          }
+
+          elms[4] = component4.call(null, { props: props4 }, elms[3], component)
+
           if (elms[4][Symbol.for('slots')][0]) {
             parent = elms[4][Symbol.for('slots')][0]
             component = elms[4]
@@ -162,13 +168,19 @@ export default () =>
         if (!elms[7]) {
           const componentType = props7['is'] || 'Sprite'
 
-          elms[7] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props7 }, elms[6], component)
+          let component7
+          if (typeof componentType === 'string') {
+            component7 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component7) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component7 = componentType
+          }
+
+          elms[7] = component7.call(null, { props: props7 }, elms[6], component)
+
           if (elms[7][Symbol.for('slots')][0]) {
             parent = elms[7][Symbol.for('slots')][0]
             component = elms[7]
@@ -214,13 +226,19 @@ export default () =>
         if (!elms[9]) {
           const componentType = props9['is'] || 'Sprite'
 
-          elms[9] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props9 }, elms[8], component)
+          let component9
+          if (typeof componentType === 'string') {
+            component9 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component9) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component9 = componentType
+          }
+
+          elms[9] = component9.call(null, { props: props9 }, elms[8], component)
+
           if (elms[9][Symbol.for('slots')][0]) {
             parent = elms[9][Symbol.for('slots')][0]
             component = elms[9]
@@ -266,13 +284,19 @@ export default () =>
         if (!elms[11]) {
           const componentType = props11['is'] || 'Sprite'
 
-          elms[11] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props11 }, elms[10], component)
+          let component11
+          if (typeof componentType === 'string') {
+            component11 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component11) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component11 = componentType
+          }
+
+          elms[11] = component11.call(null, { props: props11 }, elms[10], component)
+
           if (elms[11][Symbol.for('slots')][0]) {
             parent = elms[11][Symbol.for('slots')][0]
             component = elms[11]
@@ -332,13 +356,19 @@ export default () =>
         if (!elms[14]) {
           const componentType = props14['is'] || 'Sprite'
 
-          elms[14] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props14 }, elms[13], component)
+          let component14
+          if (typeof componentType === 'string') {
+            component14 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component14) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component14 = componentType
+          }
+
+          elms[14] = component14.call(null, { props: props14 }, elms[13], component)
+
           if (elms[14][Symbol.for('slots')][0]) {
             parent = elms[14][Symbol.for('slots')][0]
             component = elms[14]
@@ -398,13 +428,19 @@ export default () =>
         if (!elms[17]) {
           const componentType = props17['is'] || 'Sprite'
 
-          elms[17] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props17 }, elms[16], component)
+          let component17
+          if (typeof componentType === 'string') {
+            component17 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component17) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component17 = componentType
+          }
+
+          elms[17] = component17.call(null, { props: props17 }, elms[16], component)
+
           if (elms[17][Symbol.for('slots')][0]) {
             parent = elms[17][Symbol.for('slots')][0]
             component = elms[17]
@@ -450,13 +486,19 @@ export default () =>
         if (!elms[19]) {
           const componentType = props19['is'] || 'Sprite'
 
-          elms[19] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props19 }, elms[18], component)
+          let component19
+          if (typeof componentType === 'string') {
+            component19 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component19) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component19 = componentType
+          }
+
+          elms[19] = component19.call(null, { props: props19 }, elms[18], component)
+
           if (elms[19][Symbol.for('slots')][0]) {
             parent = elms[19][Symbol.for('slots')][0]
             component = elms[19]
@@ -502,13 +544,19 @@ export default () =>
         if (!elms[21]) {
           const componentType = props21['is'] || 'Sprite'
 
-          elms[21] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props21 }, elms[20], component)
+          let component21
+          if (typeof componentType === 'string') {
+            component21 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component21) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component21 = componentType
+          }
+
+          elms[21] = component21.call(null, { props: props21 }, elms[20], component)
+
           if (elms[21][Symbol.for('slots')][0]) {
             parent = elms[21][Symbol.for('slots')][0]
             component = elms[21]
@@ -569,13 +617,19 @@ export default () =>
         if (!elms[24]) {
           const componentType = props24['is'] || 'Sprite'
 
-          elms[24] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props24 }, elms[23], component)
+          let component24
+          if (typeof componentType === 'string') {
+            component24 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component24) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component24 = componentType
+          }
+
+          elms[24] = component24.call(null, { props: props24 }, elms[23], component)
+
           if (elms[24][Symbol.for('slots')][0]) {
             parent = elms[24][Symbol.for('slots')][0]
             component = elms[24]
@@ -635,13 +689,19 @@ export default () =>
         if (!elms[27]) {
           const componentType = props27['is'] || 'Sprite'
 
-          elms[27] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props27 }, elms[26], component)
+          let component27
+          if (typeof componentType === 'string') {
+            component27 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component27) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component27 = componentType
+          }
+
+          elms[27] = component27.call(null, { props: props27 }, elms[26], component)
+
           if (elms[27][Symbol.for('slots')][0]) {
             parent = elms[27][Symbol.for('slots')][0]
             component = elms[27]
@@ -687,13 +747,19 @@ export default () =>
         if (!elms[29]) {
           const componentType = props29['is'] || 'Sprite'
 
-          elms[29] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props29 }, elms[28], component)
+          let component29
+          if (typeof componentType === 'string') {
+            component29 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component29) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component29 = componentType
+          }
+
+          elms[29] = component29.call(null, { props: props29 }, elms[28], component)
+
           if (elms[29][Symbol.for('slots')][0]) {
             parent = elms[29][Symbol.for('slots')][0]
             component = elms[29]
@@ -739,13 +805,19 @@ export default () =>
         if (!elms[31]) {
           const componentType = props31['is'] || 'Sprite'
 
-          elms[31] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props31 }, elms[30], component)
+          let component31
+          if (typeof componentType === 'string') {
+            component31 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component31) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component31 = componentType
+          }
+
+          elms[31] = component31.call(null, { props: props31 }, elms[30], component)
+
           if (elms[31][Symbol.for('slots')][0]) {
             parent = elms[31][Symbol.for('slots')][0]
             component = elms[31]
@@ -804,13 +876,19 @@ export default () =>
         if (!elms[34]) {
           const componentType = props34['is'] || 'Sprite'
 
-          elms[34] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props34 }, elms[33], component)
+          let component34
+          if (typeof componentType === 'string') {
+            component34 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component34) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component34 = componentType
+          }
+
+          elms[34] = component34.call(null, { props: props34 }, elms[33], component)
+
           if (elms[34][Symbol.for('slots')][0]) {
             parent = elms[34][Symbol.for('slots')][0]
             component = elms[34]
@@ -870,13 +948,19 @@ export default () =>
         if (!elms[37]) {
           const componentType = props37['is'] || 'Sprite'
 
-          elms[37] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props37 }, elms[36], component)
+          let component37
+          if (typeof componentType === 'string') {
+            component37 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component37) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component37 = componentType
+          }
+
+          elms[37] = component37.call(null, { props: props37 }, elms[36], component)
+
           if (elms[37][Symbol.for('slots')][0]) {
             parent = elms[37][Symbol.for('slots')][0]
             component = elms[37]
@@ -922,13 +1006,19 @@ export default () =>
         if (!elms[39]) {
           const componentType = props39['is'] || 'Sprite'
 
-          elms[39] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props39 }, elms[38], component)
+          let component39
+          if (typeof componentType === 'string') {
+            component39 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component39) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component39 = componentType
+          }
+
+          elms[39] = component39.call(null, { props: props39 }, elms[38], component)
+
           if (elms[39][Symbol.for('slots')][0]) {
             parent = elms[39][Symbol.for('slots')][0]
             component = elms[39]
@@ -974,13 +1064,19 @@ export default () =>
         if (!elms[41]) {
           const componentType = props41['is'] || 'Sprite'
 
-          elms[41] = (
-            (context.components && context.components[componentType]) ||
-            components[componentType] ||
-            (() => {
-              console.error('component Sprite not found')
-            })
-          ).call(null, { props: props41 }, elms[40], component)
+          let component41
+          if (typeof componentType === 'string') {
+            component41 =
+              (context.components && context.components[componentType]) || components[componentType]
+            if (!component41) {
+              throw new Error('Component "Sprite" not found')
+            }
+          } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+            component41 = componentType
+          }
+
+          elms[41] = component41.call(null, { props: props41 }, elms[40], component)
+
           if (elms[41][Symbol.for('slots')][0]) {
             parent = elms[41][Symbol.for('slots')][0]
             component = elms[41]

package/src/engines/L3/fontLoader.js

@@ -16,10 +16,24 @@ export default () => {
         font.json = font.file.replace(/\.[^.]+$/, `.${font.type}.json`)
       }
       stage.fontManager.addFontFace(
-        new SdfTrFontFace(font.family, {}, font.type, stage, font.png, font.json)
+        new SdfTrFontFace(font.type, {
+          fontFamily: font.family,
+          descriptors: {},
+          atlasUrl: font.png,
+          atlasDataUrl: font.json,
+          stage,
+          metrics: font.metrics,
+        })
       )
     } else if (font.type === 'web') {
-      stage.fontManager.addFontFace(new WebTrFontFace(font.family, {}, font.file))
+      stage.fontManager.addFontFace(
+        new WebTrFontFace({
+          fontFamily: font.family,
+          fontUrl: font.file,
+          descriptors: {},
+          metrics: font.metrics,
+        })
+      )
     }
   })
 }

package/src/lib/codegenerator/generator.js

@@ -175,9 +175,18 @@ const generateComponentCode = function (
     templateObject[Symbol.for('componentType')]
   }'
 
-  ${elm} = (context.components && context.components[componentType] || components[componentType] || (() => { console.error('component ${
-    templateObject[Symbol.for('componentType')]
-  } not found')})).call(null, {props: props${counter}}, ${parent}, component)
+      let component${counter}
+      if(typeof componentType === 'string') {
+        component${counter} = context.components && context.components[componentType] || components[componentType]
+        if(!component${counter}) {
+          throw new Error('Component "${templateObject[Symbol.for('componentType')]}" not found')
+        }
+      } else if(typeof componentType === 'function' && componentType.name === 'factory') {
+        component${counter} = componentType
+      }
+
+      ${elm} = component${counter}.call(null, {props: props${counter}}, ${parent}, component)
+
       if (${elm}[Symbol.for('slots')][0]) {
         parent = ${elm}[Symbol.for('slots')][0]
         component = ${elm}