@lightningjs/blits 1.48.0 → 2.0.0-beta.2

package/vite/msdfGenerator.js

@@ -18,8 +18,7 @@
 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'
+import { createRequire } from 'module'
 
 class TaskQueue {
   constructor() {
@@ -42,6 +41,48 @@ let config
 let checksumPaths = []
 let checksumData = []
 
+let msdfLoaded = false
+let genFont, setGeneratePaths, adjustFont
+async function loadMsdfModules() {
+  // do not try to load it repeatedly
+  if (msdfLoaded) return true
+
+  try {
+    // Create a require function that resolves from the app's working directory
+    // This ensures the msdf-generator is resolved from the app's node_modules
+    const userRequire = createRequire(process.cwd() + '/')
+
+    const msdfGeneratorPath = userRequire.resolve('@lightningjs/msdf-generator')
+    const msdfGeneratorUrl = new URL(`file:///${msdfGeneratorPath.replace(/\\/g, '/')}`).href
+    const msdfGenerator = await import(msdfGeneratorUrl)
+    genFont = msdfGenerator.genFont
+    setGeneratePaths = msdfGenerator.setGeneratePaths
+
+    const adjustFontPath = userRequire.resolve('@lightningjs/msdf-generator/adjustFont')
+    const adjustFontUrl = new URL(`file:///${adjustFontPath.replace(/\\/g, '/')}`).href
+    const adjustFontModule = await import(adjustFontUrl)
+    adjustFont = adjustFontModule.adjustFont
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function getMsdfReady() {
+  msdfLoaded = await loadMsdfModules()
+
+  if (!msdfLoaded) {
+    console.error('\n\x1b[31mError: @lightningjs/msdf-generator package is not installed.\x1b[0m')
+    console.error(
+      'This package is required for generating MSDF fonts during development and build.\n'
+    )
+    console.error('\nPlease install it as a dev dependency in your project:\n')
+    console.error('   \x1b[33mnpm install --save-dev @lightningjs/msdf-generator\x1b[0m\n')
+
+    process.exit(1)
+  }
+}
+
 export default function () {
   let msdfOutputDir = ''
   let buildOutputPath = ''
@@ -156,15 +197,20 @@ export default function () {
 }
 
 const generateSDF = async (inputFilePath, outputDirPath, configFilePath) => {
+  // plugin only required if there is a msdf conversion
+  // so it is better to check when generateSDF is called
+  await getMsdfReady()
+
   // Ensure the destination directory exists
   fs.mkdirSync(outputDirPath, { recursive: true })
-
   setGeneratePaths(path.dirname(inputFilePath), outputDirPath, configFilePath)
 
   let font = await genFont(path.basename(inputFilePath), 'msdf')
-
-  if (font) await adjustFont(font)
-  else console.error('Failed to generate MSDF file')
+  if (font) {
+    await adjustFont(font)
+  } else {
+    console.error('Failed to generate MSDF file')
+  }
 }
 
 // Finds all font files (.ttf, .otf, .woff) in a directory

package/vscode/data/template-attributes.json

@@ -231,6 +231,117 @@
       "RouterView"
     ]
   },
+  "border": {
+    "attrType": "regular",
+    "types": [
+      "number",
+      {
+        "type": "object",
+        "properties": {
+          "width": {
+            "type": "number"
+          },
+          "top": {
+            "type": "number"
+          },
+          "right": {
+            "type": "number"
+          },
+          "bottom": {
+            "type": "number"
+          },
+          "left": {
+            "type": "number"
+          },
+          "color": {
+            "type": "string"
+          }
+        }
+      }
+    ],
+    "defaultValue": "undefined",
+    "reactive": true,
+    "description": "Apply a border, default color is white.",
+    "usedIn": [
+      "Element"
+    ]
+  },
+  "rounded": {
+    "attrType": "regular",
+    "types": [
+      "number",
+      {
+        "type": "object",
+        "properties": {
+          "radius": {
+            "type": "number"
+          },
+          "top-left": {
+            "type": "number"
+          },
+          "top-right": {
+            "type": "number"
+          },
+          "bottom-right": {
+            "type": "number"
+          },
+          "bottom-left": {
+            "type": "number"
+          }
+        }
+      }
+    ],
+    "defaultValue": "undefined",
+    "reactive": true,
+    "description": "Apply a to corners, or (a) specific corner(s)",
+    "usedIn": [
+      "Element"
+    ]
+  },
+  "shadow": {
+    "attrType": "regular",
+    "types": [
+      {
+        "type": "object",
+        "properties": {
+          "x": {
+            "type": "number"
+          },
+          "y": {
+            "type": "number"
+          },
+          "blur": {
+            "type": "number"
+          },
+          "spread": {
+            "type": "number"
+          },
+          "color": {
+            "type": "string"
+          }
+        }
+      }
+    ],
+    "defaultValue": "undefined",
+    "reactive": true,
+    "description": "Apply a to corners, or (a) specific corner(s)",
+    "usedIn": [
+      "Element"
+    ]
+  },
+  "shader": {
+    "attrType": "regular",
+    "types": [
+      "string",
+      "object"
+    ],
+    "defaultValue": null,
+    "reactive": true,
+    "description": "Enable a specific shader to apply.",
+    "usedIn": [
+      "Element"
+    ]
+  },
   "clipping": {
     "attrType": "regular",
     "types": [
@@ -387,6 +498,7 @@
     "values": [
       "none",
       "width",
+      "height",
       "both"
     ],
     "defaultValue": "none",