@lightningjs/blits 1.10.1 → 1.12.0

package/.github/workflows/deploy-docs.yml

@@ -0,0 +1,27 @@
+name: Trigger Website Docs Update
+
+on:
+  push:
+    branches: [ master ]
+    paths:
+      - 'docs/**'
+
+jobs:
+  trigger:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Trigger Deployment
+        timeout-minutes: 5
+        run: |
+          response=$(curl -X POST -w "%{http_code}" -s -o /dev/null \
+            --max-time 30 \
+            --connect-timeout 10 \
+            --retry 2 \
+            --retry-delay 5 \
+            ${{ secrets.WEBSITE_DEPLOY_URL }})
+          if [ "$response" -ge 200 ] && [ "$response" -lt 300 ]; then
+            echo "Deployment triggered successfully"
+          else
+            echo "Failed to trigger deployment. Status code: $response"
+            exit 1
+          fi

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## v1.12.0
+
+- Fixed `$hasFocus` state variable not being set when navigating back to a page with `keepAlive` enabled
+- Added `@updated`-event to Layout component
+- Fixed issue with simple config for Theme plugin
+
+
+## v1.11.0
+
+_19 nov 2024_
+
+- Added support for splitting up translation file per language
+- Added hasFocus property to ComponentBase type
+- Fixed issue with alpha during router transitions
+
+
 ## v1.10.1
 
 _15 nov 2024_
@@ -7,6 +23,7 @@ _15 nov 2024_
 - Upgraded to renderer 2.7.1
 - Added documentation on Router
 
+
 ## v1.10.0
 
 _8 nov 2024_

package/blits.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="./index.d.ts" />
+
+declare module '*.blits' {
+  const component: any;
+  export default component;
+}

package/docs/_sidebar.md

@@ -27,6 +27,7 @@
 - Router
   - [Basics](/router/basics.md)
   - [Hooks](/router/hooks.md)
+  - [Transitions](/router/transitions.md)
 - Plugins
   - [Text-to-Speech / Announcer](/plugins/text-to-speech-announcer.md)
   - [Language](/plugins/language.md)

package/docs/built-in/layout.md

@@ -63,7 +63,35 @@ And of course you can nest _vertical_ Layouts inside a _horizontal_ one - and vi
 
 ### Transitioning layouts
 
-The `<Layout>`-component can also take into account when dimensions of children change with a transition applied to it. The component will recalculate the position of its children as the transition progresses, making sure that elements are always perfectly positioned relative to one another.
+The `<Layout>`-component can also take into account when dimensions of children change with a transition applied to it (i.e. `<Element :w.transition="$myWidth">`). The component will recalculate the position of its children as the transition progresses, making sure that elements are always perfectly positioned relative to one another.
+
+### Updated event
+
+The `<Layout>`-tag automatically updates its dimensions based on the dimensions of its children. After each update in the children, the an `updated`-event is emitted on the `<Layout>`-tag. It will receive the current dimensions of the layout.
+
+You can tap into this event by adding an `@updated`-attribute to the `<Layout />`-tag and refer to a method in your Component logic.
+
+
+```js
+export default Blits.Component('LayoutUpdate', {
+  template: `
+    <Element>
+      <Layout @updated="$layoutUpdate">
+        <Element :w="$width" h="40" color="red" />
+        <Element :w="$width" h="40" color="blue" />
+        <Element :w="$width" h="40" color="green" />
+      </Layout>
+    </Element>
+  `,
+  methods: {
+    layoutUpdate(dimensions, el) {
+      console.log(`Layout (${el.nodeId}) dimensions updated! Width: ${dimensions.w}, Height: ${dimensions.h}`)
+    }
+  }
+})
+```
+
+> Please be aware that the `@updated` event can fire multiple times. The size of the Layout-tag is recalculated for each change in children. Also note that the `@updated` event does not guarantee a change in dimensions. It is possible that it fires for a children update, but remains the same size.
 
 ## Performance
 

package/docs/plugins/global_app_state.md

@@ -75,3 +75,24 @@ The second `$`-sign is needed, since the appState plugin itself is prefixed with
 
 In order to read or update variables on the global app state inside the component logic, you can access the entire state via `this.$appState`.
 
+### Watching global state
+
+Similar to component state, you can watch for changes in the global state as well. You can to refer to global state variables using _dot-notation_ in the watcher function name, and _prefixing_ it with `$appState`. This means that you need to define your watcher as a `String`, matching one of the examples below, depending on your style preference.
+
+```js
+Blits.Component('MyComponent', {
+  template: `
+    <Element>
+      <Text :content="$$appState.loggedIn ? $$appState.user.name : 'Not logged in'" />
+    </Element>
+  `,
+  watch: {
+    '$appState.fooBar'(v, old) {
+      console.log(`$appState.fooBar changed from ${old} to ${v}`)
+    },
+    '$appState.my.nested.data': function(v, old) {
+      console.log(`My nested App state data changed!`)
+    }
+  },
+})
+```

package/docs/sidebar.json

@@ -118,6 +118,10 @@
       {
         "text": "Hooks",
         "link": "/router/hooks"
+      },
+      {
+        "text": "Transitions",
+        "link": "/router/transitions"
       }
     ]
   },

package/index.d.ts

@@ -15,6 +15,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+// blits file type reference
+/// <reference path="./blits.d.ts" />
+
 import {type ShaderEffect as RendererShaderEffect, type WebGlCoreShader} from '@lightningjs/renderer'
 
 declare module '@lightningjs/blits' {
@@ -149,6 +152,11 @@ declare module '@lightningjs/blits' {
   }
 
   export type ComponentBase = {
+    /**
+    * Check if a component has focus
+    */
+    hasFocus: boolean,
+
     /**
     * Listen to events emitted by other components
     */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.10.1",
+  "version": "1.12.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

package/src/engines/L3/element.js

@@ -30,7 +30,7 @@ const layoutFn = function (config) {
   const dimension = config.direction === 'vertical' ? 'height' : 'width'
   const oppositeDimension = config.direction === 'vertical' ? 'width' : 'height'
 
-  const children = this.children
+  const children = this.node.children
   const childrenLength = children.length
   let otherDimension = 0
   const gap = config.gap || 0
@@ -53,8 +53,8 @@ const layoutFn = function (config) {
     otherDimension = Math.max(otherDimension, node[oppositeDimension])
   }
   // adjust the size of the layout container
-  this[dimension] = offset - gap
-  this[oppositeDimension] = otherDimension
+  this.node[dimension] = offset - gap
+  this.node[oppositeDimension] = otherDimension
 
   const align = {
     start: 0,
@@ -69,6 +69,11 @@ const layoutFn = function (config) {
       node[oppositeMount] = align
     }
   }
+
+  // emit an updated event
+  if (config['@updated'] !== undefined) {
+    config['@updated']({ w: this.node.width, h: this.node.height }, this)
+  }
 }
 
 const isTransition = (value) => {
@@ -363,7 +368,7 @@ const Element = {
     }
 
     if (props.__layout === true) {
-      this.triggerLayout = layoutFn.bind(this.node)
+      this.triggerLayout = layoutFn.bind(this)
     }
 
     if (this.config.parent.props !== undefined && this.config.parent.props.__layout === true) {

package/src/plugins/language.js

@@ -37,22 +37,45 @@ export default {
     )
 
     const setLanguage = (language) => {
-      // define the dictionary
-      dictionary = translations[language] || {}
-      // set the current language in the reactive state
-      state.language = language
-
-      // warnings
-      if (Object.keys(translations).length === 0) {
-        Log.warn(
-          'No translations loaded. Please load a file with translations or specify a translations object manually'
-        )
-      }
-      if (language in translations === false) {
-        Log.warn(`Language ${language} not available in the loaded translations`)
+      const warningMsg =
+        Object.keys(translations).length === 0
+          ? 'No translations loaded. Please load a file with translations or specify a translations object manually'
+          : language in translations === false
+          ? `Language ${language} not available in the loaded translations`
+          : false
+      if (warningMsg) {
+        Log.warn(warningMsg)
+        // set the current language in the reactive state
+        state.language = language
+      } else {
+        setDict(language).then(() => {
+          state.language = language
+        })
       }
     }
 
+    const setDict = (language) => {
+      return new Promise((resolve) => {
+        const translationObj = translations[language]
+        if (typeof translationObj === 'object') {
+          dictionary = translationObj
+          resolve()
+        } else if (typeof translationObj === 'string') {
+          fetchJson(translationObj)
+            .then((result) => {
+              // save the translations for this language (to prevent loading twice)
+              translations[language] = result
+              // define the dictionary
+              dictionary = result
+              resolve()
+            })
+            .catch((e) => {
+              Log.error(e)
+            })
+        }
+      })
+    }
+
     const loadLanguageFile = (filePath) => {
       return fetchJson(filePath)
         .then((result) => {
@@ -65,8 +88,9 @@ export default {
 
     const setTranslations = (translationsObject) => {
       translations = translationsObject
-      dictionary = translations[state.language] || {}
-      state.loaded++
+      setDict(state.language).then(() => {
+        state.loaded++
+      })
     }
 
     if ('file' in options) {

package/src/plugins/theme.js

@@ -72,7 +72,7 @@ export default {
         // theme get function when current theme is modified
         state.current
         if (themeMap[key] !== undefined) return themeMap[key]
-        const value = getValueByDotNotation(themes[state.current], themes[base], key)
+        const value = getValueByDotNotation(themes[state.current], themes[base] || null, key)
         if (value !== undefined) {
           // store the value for next time
           themeMap[key] = value

package/src/router/router.js

@@ -168,6 +168,25 @@ export const navigate = async function () {
         }
       } else {
         holder = view[symbols.holder]
+
+        // Check, whether cached view holder's alpha prop is exists in transition or not
+        let hasAlphaProp = false
+        if (route.transition.before) {
+          if (Array.isArray(route.transition.before)) {
+            for (let i = 0; i < route.transition.before.length; i++) {
+              if (route.transition.before[i].prop === 'alpha') {
+                hasAlphaProp = true
+                break
+              }
+            }
+          } else if (route.transition.before.prop === 'alpha') {
+            hasAlphaProp = true
+          }
+        }
+        // set holder alpha when alpha prop is not exists in route transition
+        if (hasAlphaProp === false) {
+          holder.set('alpha', 1)
+        }
       }
 
       this[symbols.children].push(view)
@@ -176,7 +195,7 @@ export const navigate = async function () {
       previousFocus = Focus.get()
 
       // set focus to the view that we're routing to
-      focus ? Focus.set(focus) : Focus.set(view)
+      focus ? focus.$focus() : view.$focus()
 
       // apply before settings to holder element
       if (route.transition.before) {