@lightningjs/blits 1.11.0 → 1.12.0

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

@@ -19,7 +19,7 @@ jobs:
             --retry 2 \
             --retry-delay 5 \
             ${{ secrets.WEBSITE_DEPLOY_URL }})
-          if [ "$response" -eq 200 ]; then
+          if [ "$response" -ge 200 ] && [ "$response" -lt 300 ]; then
             echo "Deployment triggered successfully"
           else
             echo "Failed to trigger deployment. Status code: $response"

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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_

package/blits.d.ts

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

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/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' {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.11.0",
+  "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/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

@@ -195,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) {