@lightningjs/blits 2.0.0-beta.1 → 2.0.0-beta.4

package/src/focus/hover.js

@@ -0,0 +1,94 @@
+/*
+ * Copyright 2025 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 { Log } from '../lib/log.js'
+import { getAncestors } from './helpers.js'
+import symbols from '../lib/symbols.js'
+
+let hoveredComponent = null
+let hoverChain = []
+
+export default {
+  get() {
+    return hoveredComponent
+  },
+  set(component) {
+    if (component === undefined || component.eol === true) return
+
+    // early return if already hovered
+    if (component === hoveredComponent) return
+
+    if (hoveredComponent === null) {
+      hoverChain = getAncestors([component])
+    }
+
+    // unhover currently hovered components
+    if (hoveredComponent !== null) {
+      if (hoverChain[hoverChain.length - 1] === component.$parent) {
+        hoverChain.push(component)
+      } else {
+        const newhoverChain = getAncestors([component])
+        let i = hoverChain.length
+        while (i--) {
+          // don't unhover when part of the new hover chain
+          if (newhoverChain.indexOf(hoverChain[i]) > -1) break
+          // skip if component is destroyed
+          if (hoverChain[i].eol !== true) {
+            hoverChain[i][symbols.lifecycle].state = 'unhover'
+          }
+        }
+        hoverChain = newhoverChain
+      }
+    }
+
+    // ensure that all components in the hover path have hover state
+    let i = 0
+    while (i < hoverChain.length - 1) {
+      // skip if component is destroyed
+      if (hoverChain[i].eol !== true) {
+        hoverChain[i][symbols.lifecycle].state = 'hover'
+      }
+      i++
+    }
+
+    setHover(component)
+  },
+  clear() {
+    if (hoveredComponent === null) return
+    for (let i = 0; i < hoverChain.length; i++) {
+      if (hoverChain[i].eol !== true) {
+        hoverChain[i][symbols.lifecycle].state = 'unhover'
+      }
+    }
+    hoveredComponent = null
+    hoverChain = []
+  },
+}
+
+/**
+ * Set the hover to the Component
+ * @param {Object} component  - The component to hover
+ */
+const setHover = (component) => {
+  Log.info(
+    '\nHover chain:\n',
+    hoverChain.map((c, index) => '\t'.repeat(index) + '↳ ' + c.$componentId).join('\n')
+  )
+
+  hoveredComponent = component
+  component[symbols.lifecycle].state = 'hover'
+}

package/src/launch.js

@@ -88,6 +88,7 @@ async function rendererVersion() {
  * @property {number} [textureProcessingTimeLimit] - Max time renderer can process textures in a frame
  * @property {Partial<import('@lightningjs/renderer').RendererMainSettings>} [advanced] - Advanced renderer settings
  * @property {boolean} [announcer] - Whether or not the announcer should be activated on initialization
+ * @property {boolean} [enableMouse] - Enable mouse support (hover and click-to-focus). Defaults to false.
  * @property {number} [maxFPS] - Maximum FPS
  */
 

package/src/lib/codegenerator/generator.js

@@ -163,6 +163,10 @@ const generateElementCode = function (
 
   renderCode.push(`elementConfigs[${counter}] = {}`)
 
+  if (counter === 0) {
+    renderCode.push(`elementConfigs[${counter}]['___wrapper'] = true `)
+  }
+
   if (options.forloop) {
     renderCode.push(`if(${elm} === undefined) {`)
   }
@@ -182,6 +186,10 @@ const generateElementCode = function (
     renderCode.push(`elementConfigs[${counter}][Symbol.for('isSlot')] = true`)
   }
 
+  if (options.holder) {
+    renderCode.push(`elementConfigs[${counter}]['holder'] = true`)
+  }
+
   Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
@@ -325,9 +333,11 @@ const generateComponentCode = function (
 
   const children = templateObject.children
   delete templateObject.children
+  // Capture holder counter before generating element code (which may process children and increment counter)
+  const holderCounter = counter
   generateElementCode.call(this, templateObject, parent, { ...options, ...{ holder: true } })
 
-  parent = options.key ? `elms[${counter}][${options.key}]` : `elms[${counter}]`
+  parent = options.key ? `elms[${holderCounter}][${options.key}]` : `elms[${holderCounter}]`
 
   counter++
 
@@ -396,6 +406,21 @@ const generateComponentCode = function (
     }
   `)
 
+  if (isDev === true) {
+    const templateTagName = templateObject[Symbol.for('componentType')]
+    const holderElm = options.key
+      ? `elms[${holderCounter}][${options.key}]`
+      : `elms[${holderCounter}]`
+    const componentDisplayName = `typeof componentType === 'string'
+      ? componentType
+      : (componentType?.[Symbol.for('componentType')] || '${templateTagName}')`
+    renderCode.push(`
+      if (${holderElm} !== undefined && typeof ${holderElm}.setInspectorMetadata === 'function') {
+        ${holderElm}.setInspectorMetadata({ 'blits-componentType': ${componentDisplayName} })
+      }
+    `)
+  }
+
   this.cleanupCode.push(`components[${counter}] = null`)
 
   if (options.forloop) {
@@ -451,7 +476,7 @@ const generateForLoopCode = function (templateObject, parent) {
     .replace(')', '')
     .split(/\s*,\s*/)
 
-  const scopeRegex = new RegExp(`(scope\\.(?!${item}\\.|${index}|key)(\\$?\\w+))`, 'gi')
+  const scopeRegex = new RegExp(`(scope\\.(?!${item}\\.|${index}|key)([\\w$]+))`, 'gi')
 
   // local context
   const ctx = {
@@ -524,10 +549,16 @@ const generateForLoopCode = function (templateObject, parent) {
 
       component !== null && component[Symbol.for('removeGlobalEffects')](effects[${forStartCounter}])
 
-      for(let i = 0; i < effects[${forStartCounter}].length; i++) {
-        const value = effects[${forStartCounter}][i]
-        const index = component[Symbol.for('effects')].indexOf(value)
-        if (index > -1) component[Symbol.for('effects')].splice(index, 1)
+     const effectsToRemove = new Set(effects[${forStartCounter}].slice(0))
+      if (effectsToRemove.size > 0) {
+        const componentEffects = component?.[Symbol.for('effects')] || []
+        let writeIndex = 0
+        for (let readIndex = 0; readIndex < componentEffects.length; readIndex++) {
+          if (!effectsToRemove.has(componentEffects[readIndex])) {
+            componentEffects[writeIndex++] = componentEffects[readIndex]
+          }
+        }
+        componentEffects.length = writeIndex
       }
 
       effects[${forStartCounter}].length = 0
@@ -825,8 +856,13 @@ const cast = (val = '', key = false, component = 'component.') => {
   }
   // @-listener
   else if (key.startsWith('@') && val) {
-    const c = component.slice(0, -1)
-    castedValue = `${c}['${val.replace('$', '')}'] && ${c}['${val.replace('$', '')}'].bind(${c})`
+    const trimmed = val.trim()
+    if (/^\$?\w+$/.test(trimmed)) {
+      const c = component.slice(0, -1)
+      castedValue = `${c}['${trimmed.replace('$', '')}'] && ${c}['${trimmed.replace('$', '')}'].bind(${c})`
+    } else {
+      castedValue = interpolate(trimmed, component)
+    }
   }
   // dynamic value
   else if (val.startsWith('$')) {

package/src/lib/lifecycle.js

@@ -18,6 +18,9 @@
 import { Log } from './log.js'
 import { emit, privateEmit } from './hooks.js'
 import symbols from './symbols.js'
+import Settings from '../settings.js'
+
+let inspectorEnabled = null
 
 /**
  * List of valid lifecycle states for a component.
@@ -28,6 +31,8 @@ const states = [
   'ready', // fired when component instantiated, reactivity setup done and template spawned
   'focus', // fired when receiving focus (can occur multiple times)
   'unfocus', // fired when losing focus (can occur multiple times)
+  'hover', // fired when receiving focus (can occur multiple times)
+  'unhover', // fired when losing focus (can occur multiple times)
   'destroy', // fired when component is destroyed and removed
   'attach', // fired when entering the viewport margin and attached to the render tree
   'detach', // fired when leaving the viewport margin and detached from the render tree
@@ -81,9 +86,35 @@ export default {
       privateEmit(v, this.component[symbols.identifier], this.component)
       // emit 'public' hook
       emit(v, this.component[symbols.identifier], this.component)
-      // update the built-in hasFocus state variable
-      if (v === 'focus') this.component[symbols.state].$hasFocus = true
-      if (v === 'unfocus') this.component[symbols.state].$hasFocus = false
+      // update the built-in $hasFocus state variable
+      if (v === 'focus' || v === 'unfocus') {
+        if (inspectorEnabled === null) {
+          inspectorEnabled = Settings.get('inspector', false)
+        }
+      }
+      // update the built-in isHovered state variable
+      if (v === 'hover') this.component[symbols.state].isHovered = true
+      if (v === 'unhover') this.component[symbols.state].isHovered = false
+      if (v === 'focus') {
+        this.component[symbols.state].$hasFocus = true
+        if (
+          inspectorEnabled === true &&
+          this.component[symbols.holder] &&
+          typeof this.component[symbols.holder].setInspectorMetadata === 'function'
+        ) {
+          this.component[symbols.holder].setInspectorMetadata({ 'blits-hasFocus': true })
+        }
+      }
+      if (v === 'unfocus') {
+        this.component[symbols.state].$hasFocus = false
+        if (
+          inspectorEnabled === true &&
+          this.component[symbols.holder] &&
+          typeof this.component[symbols.holder].setInspectorMetadata === 'function'
+        ) {
+          this.component[symbols.holder].setInspectorMetadata({ 'blits-hasFocus': false })
+        }
+      }
     }
   },
 }

package/src/lib/log.js

@@ -46,7 +46,7 @@ const logger = (context) => {
       return (
         ((level >= 1 || (Array.isArray(level) && level.indexOf('info') > -1)) &&
           console.info.bind(
-            window.console,
+            console,
             `%c ⚡️ ${context} %c ${time()}`,
             'background-color: #0284c7; color: white; padding: 3px 6px 3px 1px; border-radius: 3px',
             'color: ##94a3b8;'
@@ -61,7 +61,7 @@ const logger = (context) => {
       return (
         ((level >= 1 || (Array.isArray(level) && level.indexOf('warn') > -1)) &&
           console.warn.bind(
-            window.console,
+            console,
             `%c ⚡️ ${context} %c ${time()}`,
             'background-color: #fbbf24; color: white; padding: 3px 6px 3px 1px; border-radius: 3px',
             'color: ##94a3b8;'
@@ -76,7 +76,7 @@ const logger = (context) => {
       return (
         ((level >= 1 || (Array.isArray(level) && level.indexOf('error') > -1)) &&
           console.error.bind(
-            window.console,
+            console,
             `%c ⚡️ ${context} %c ${time()}`,
             'background-color: #dc2626; color: white; padding: 3px 6px 3px 1px; border-radius: 3px',
             'color: ##94a3b8;'
@@ -91,7 +91,7 @@ const logger = (context) => {
       return (
         ((level >= 2 || (Array.isArray(level) && level.indexOf('debug') > -1)) &&
           console.debug.bind(
-            window.console,
+            console,
             `%c ⚡️ ${context} %c (${new Date().toLocaleTimeString([], {
               hour: '2-digit',
               minute: '2-digit',

package/src/lib/precompiler/precompiler.js

@@ -17,6 +17,7 @@
 
 import parser from '../templateparser/parser.js'
 import generator from '../codegenerator/generator.js'
+import MagicString from 'magic-string'
 
 export default (source, filePath, mode) => {
   if (
@@ -26,12 +27,9 @@ export default (source, filePath, mode) => {
     /\{.*?template\s*:\s*(['"`])((?:\\?.)*?)\1.*?\}/s.test(source) // object with template key
   ) {
     const templates = source.matchAll(/(?<!\/\/\s*)template\s*:\s*(['"`])((?:\\?.)*?)\1/gs)
-    let newSource = source
-    /*
-      if there are multiple templates in the file, we need to keep
-      track of the offset caused by the previous replacements
-    */
-    let offset = 0
+
+    // Use MagicString to track changes
+    const s = new MagicString(source)
 
     for (const template of templates) {
       if (template[2]) {
@@ -39,7 +37,8 @@ export default (source, filePath, mode) => {
 
         // Only process if it looks like a Blits template
         if (templateContent.match(/^\s*(<!--[\s\S]*?-->|<[A-Za-z][^>]*>)/s)) {
-          const templateStartIndex = template.index + offset
+          // Use original indices - MagicString handles position tracking automatically
+          const templateStartIndex = template.index
           const templateEndIndex = templateStartIndex + template[0].length
 
           // Parse the template
@@ -58,16 +57,26 @@ export default (source, filePath, mode) => {
             (fn) => fn.toString()
           )}], context: {}}`
 
-          offset += replacement.length - template[0].length
-
-          newSource =
-            newSource.substring(0, templateStartIndex) +
-            replacement +
-            newSource.substring(templateEndIndex)
+          // MagicString tracks all changes automatically, no offset needed
+          s.overwrite(templateStartIndex, templateEndIndex, replacement)
         }
       }
     }
-    return newSource
+
+    const newSource = s.toString()
+
+    if (newSource !== source) {
+      const fileName = filePath.split(/[\\/]/).pop()
+      return {
+        code: newSource,
+        map: s.generateMap({
+          hires: true,
+          source: fileName,
+          includeContent: true,
+          file: fileName,
+        }),
+      }
+    }
   }
   return source
 }

package/src/lib/reactivity/effect.js

@@ -32,9 +32,10 @@ const objectMap = new WeakMap()
 const globalEffectsMap = new Map()
 
 export const removeGlobalEffects = (effectsToRemove) => {
-  if (globalEffectsMap.size === 0) return
+  if (globalEffectsMap.size === 0 || effectsToRemove.length === 0) return
+  const effectsToRemoveSet = new Set(effectsToRemove)
   for (const [effect, target] of globalEffectsMap) {
-    if (effectsToRemove.indexOf(effect) === -1) continue
+    if (!effectsToRemoveSet.has(effect)) continue
     const effectsSet = objectMap.get(target)
     if (effectsSet === undefined) continue
     for (const set of effectsSet.values()) {

package/src/lib/reactivityguard/computedprops.js

@@ -35,10 +35,12 @@ const findMatchingBrace = (text, startPos) => {
     // Skip comments when not in strings
     else if (!inString && char === '/' && text[position + 1] === '/') {
       // Skip line comment
-      position = text.indexOf('\n', position) || text.length - 1
+      const nextNewline = text.indexOf('\n', position + 2)
+      position = nextNewline === -1 ? text.length - 1 : nextNewline
     } else if (!inString && char === '/' && text[position + 1] === '*') {
       // Skip block comment
-      position = text.indexOf('*/', position + 2) || text.length - 1
+      const end = text.indexOf('*/', position + 2)
+      position = end === -1 ? text.length - 1 : end + 1
     }
     // Count braces only outside strings and comments
     else if (!inString) {
@@ -60,6 +62,44 @@ const findComputedFunctionEnd = (computedObj, openingBracePos) => {
   return findMatchingBrace(computedObj, openingBracePos)
 }
 
+// Skip whitespace + commas + comments (line and block) starting from `pos`, return next code position.
+const skipNonCode = (text, pos) => {
+  let p = pos
+  while (p < text.length) {
+    const c = text[p]
+
+    // whitespace
+    if (c === ' ' || c === '\t' || c === '\n' || c === '\r') {
+      p++
+      continue
+    }
+
+    // separators between object members
+    if (c === ',') {
+      p++
+      continue
+    }
+
+    // line comment
+    if (c === '/' && text[p + 1] === '/') {
+      const nextNewline = text.indexOf('\n', p + 2)
+      p = nextNewline === -1 ? text.length : nextNewline + 1
+      continue
+    }
+
+    // block comment
+    if (c === '/' && text[p + 1] === '*') {
+      const end = text.indexOf('*/', p + 2)
+      p = end === -1 ? text.length : end + 2
+      continue
+    }
+
+    return p
+  }
+
+  return p
+}
+
 export default (code) => {
   // Find component declarations
   const componentRegex =
@@ -83,6 +123,8 @@ export default (code) => {
 
       if (computedEnd !== -1) {
         const computedObj = configObject.substring(computedStart, computedEnd)
+        const computedBlockStart = computedKeywordMatch.index
+        const computedBlockEnd = computedEnd
 
         // Process each computed property
         const computedProps = []
@@ -93,15 +135,20 @@ export default (code) => {
         // using cursor-based parsing gives better accuracy
         while (currentPos < computedObj.length - 1) {
           // -1 to exclude the closing brace
-          // Find the next function name
-          const functionNameMatch = /\s*(\w+)\s*\(\)/.exec(computedObj.substring(currentPos))
+          // Skip whitespace/comments so we don't match commented-out computed functions
+          currentPos = skipNonCode(computedObj, currentPos)
+          if (currentPos >= computedObj.length - 1) break
+
+          // Find the next function name (computed properties are `name() { ... }`)
+          const functionNameMatch = /^(\w+)\s*\(\)\s*/.exec(computedObj.substring(currentPos))
           if (!functionNameMatch) break
 
           const funcName = functionNameMatch[1]
-          const funcNamePos = currentPos + functionNameMatch.index
+          const funcNamePos = currentPos
 
           // Find opening brace for this function
-          const openingBracePos = computedObj.indexOf('{', funcNamePos)
+          const afterSignaturePos = funcNamePos + functionNameMatch[0].length
+          const openingBracePos = computedObj.indexOf('{', afterSignaturePos)
           if (openingBracePos === -1) break
 
           // Find closing brace for individual computed function
@@ -133,21 +180,22 @@ export default (code) => {
         }
 
         // Store the original computed object for later replacement
-        const originalComputedObj = configObject.substring(
-          computedStart - 'computed: '.length,
-          computedEnd
-        )
+        const originalComputedObj = configObject.substring(computedBlockStart, computedBlockEnd)
+        const computedObjOffsetInOriginal = computedStart - computedBlockStart
+        const computedObjEndInOriginal = computedObjOffsetInOriginal + computedObj.length
 
         let modifiedComputedObj = originalComputedObj
         let hasChanges = false
 
+        const replacements = []
+
         for (const prop of computedProps) {
           const thisRefs = extractThisReferences(prop.body)
 
           if (thisRefs.size > 0) {
             // Skip if already modified
             if (
-              prop.body.includes(commentText) ||
+              prop.body.includes(commentText.trim()) ||
               Array.from(thisRefs).some((ref) => prop.body.startsWith(ref))
             ) {
               continue
@@ -181,13 +229,31 @@ export default (code) => {
                 prop.fullText.substring(0, openBraceIndex).match(/^(\s*)/)[0] +
                 '}'
 
-              // Replace this property in the computed object text
-              modifiedComputedObj = modifiedComputedObj.replace(prop.fullText, modifiedPropText)
-              hasChanges = true
+              replacements.push({
+                start: prop.startPos,
+                end: prop.endPos,
+                text: modifiedPropText,
+              })
             }
           }
         }
 
+        if (replacements.length > 0) {
+          let modifiedComputedInner = computedObj
+
+          replacements.sort((a, b) => b.start - a.start)
+          for (const r of replacements) {
+            modifiedComputedInner =
+              modifiedComputedInner.slice(0, r.start) + r.text + modifiedComputedInner.slice(r.end)
+          }
+
+          modifiedComputedObj =
+            originalComputedObj.slice(0, computedObjOffsetInOriginal) +
+            modifiedComputedInner +
+            originalComputedObj.slice(computedObjEndInOriginal)
+          hasChanges = true
+        }
+
         if (hasChanges) {
           // Store the modification of the entire computed object
           modifications.push({
@@ -213,7 +279,12 @@ export default (code) => {
       modifiedCode = modifiedCode.replace(mod.original, mod.replacement)
     }
 
-    return { code: modifiedCode }
+    // Returning code without a source map
+    // Vite will automatically chain this with the next plugin's source map (preCompiler)
+    return {
+      code: modifiedCode,
+      map: { mappings: '' },
+    }
   }
 
   return null

package/src/lib/shaders/shaders.js

@@ -139,11 +139,12 @@ export default {
       return v
     }
     if (typeof v === 'string') {
-      return colors.normalize(v)
+      return colors.normalize(v, v)
     }
     if (Array.isArray(v) === true) {
       return v.map((i) => this.parseProp(i))
     }
+    return v
   },
   parseProps(v) {
     if (typeof v === 'string') {

package/src/lib/symbols.js

@@ -17,6 +17,7 @@
  * @property {symbol} inputEvents
  * @property {symbol} internalEvent
  * @property {symbol} intervals
+ * @property {symbol} debounces
  * @property {symbol} isProxy
  * @property {symbol} launched
  * @property {symbol} level
@@ -73,6 +74,7 @@ export default {
   inputEvents: Symbol('inputEvents'),
   internalEvent: Symbol('internalEvent'),
   intervals: Symbol('intervals'),
+  debounces: Symbol('debounces'),
   isProxy: Symbol('isProxy'),
   launched: Symbol('launched'),
   level: Symbol('level'),

package/src/plugins/appstate.d.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 type AppStatePlugin<TState extends Record<string, unknown> = Record<string, unknown>> = TState
+
+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

@@ -0,0 +1,28 @@
+/*
+ * 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, LanguagePluginOptions } from './language.js'
+export type { ThemePlugin, ThemePluginConfig } from './theme.js'
+export type { StoragePlugin } from './storage/storage.js'
+export type { AppStatePlugin } from './appstate.js'
+

package/src/plugins/language.d.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 interface LanguagePlugin {
+  translate(key: string, ...replacements: any[]): string
+  readonly language: string
+  set(language: string): void
+  translations(translationsObject: Record<string, unknown>): void
+  load(file: string): Promise<void>
+}
+
+export interface LanguagePluginOptions {
+  file?: string
+  language?: string
+}
+
+declare const language: {
+  readonly name: 'language'
+  plugin: (options?: LanguagePluginOptions) => LanguagePlugin
+}
+
+export default language
+