@lightningjs/blits 1.45.1 → 2.0.0-beta.1

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/vite/preCompiler.js

@@ -32,22 +32,12 @@ export default function () {
 
       // we should only precompile .blits, .js and .ts files
       if (
-        filePath.indexOf('node_modules') === -1 &&
-        (fileExtension === '.js' ||
-          fileExtension === '.ts' ||
-          fileExtension === '.blits' ||
-          fileExtension === '.mjs')
+        fileExtension === '.js' ||
+        fileExtension === '.ts' ||
+        fileExtension === '.blits' ||
+        fileExtension === '.mjs'
       ) {
-        const result = compiler(source, filePath, config.mode)
-
-        if (typeof result === 'object') {
-          return {
-            code: result.code,
-            map: result.map,
-          }
-        }
-        // No transformation needed - return null so Vite knows no changes were made
-        return null
+        return compiler(source, filePath, config.mode)
       }
 
       // vite expects null if there is no modification

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",

package/src/plugins/appstate.d.ts

@@ -1,29 +0,0 @@
-/*
- * Copyright 2024 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 type { AppStatePlugin } from '@lightningjs/blits'
-
-// Re-export AppStatePlugin for direct imports
-export type { AppStatePlugin }
-
-declare const appState: {
-  readonly name: 'appState'
-  plugin: <TState extends Record<string, unknown>>(state?: TState) => AppStatePlugin<TState>
-}
-
-export default appState
-

package/src/plugins/index.d.ts

@@ -1,29 +0,0 @@
-/*
- * Copyright 2024 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
- */
-
-export { default as language } from './language.js'
-export { default as theme } from './theme.js'
-export { default as appState } from './appstate.js'
-export { default as storage } from './storage/storage.js'
-
-// Re-export plugin interfaces for convenience
-export type { LanguagePlugin, ThemePlugin, StoragePlugin, AppStatePlugin } from '@lightningjs/blits'
-
-// Re-export option types
-export type { LanguagePluginOptions } from './language.js'
-export type { ThemePluginConfig } from './theme.js'
-

package/src/plugins/language.d.ts

@@ -1,34 +0,0 @@
-/*
- * Copyright 2024 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 type { LanguagePlugin } from '@lightningjs/blits'
-
-export interface LanguagePluginOptions {
-  file?: string
-  language?: string
-}
-
-// Re-export LanguagePlugin for direct imports
-export type { LanguagePlugin }
-
-declare const language: {
-  readonly name: 'language'
-  plugin: (options?: LanguagePluginOptions) => LanguagePlugin
-}
-
-export default language
-

package/src/plugins/storage/storage.d.ts

@@ -1,29 +0,0 @@
-/*
- * Copyright 2024 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 type { StoragePlugin } from '@lightningjs/blits'
-
-// Re-export StoragePlugin for direct imports
-export type { StoragePlugin }
-
-declare const storage: {
-  readonly name: 'storage'
-  plugin: () => StoragePlugin
-}
-
-export default storage
-

package/src/plugins/theme.d.ts

@@ -1,35 +0,0 @@
-/*
- * Copyright 2024 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 type { ThemePlugin } from '@lightningjs/blits'
-
-export interface ThemePluginConfig {
-  themes?: Record<string, Record<string, unknown>>
-  current?: string
-  base?: string
-}
-
-// Re-export ThemePlugin for direct imports
-export type { ThemePlugin }
-
-declare const theme: {
-  readonly name: 'theme'
-  plugin: (config?: ThemePluginConfig | Record<string, unknown>) => ThemePlugin
-}
-
-export default theme
-