@lightningjs/blits 1.18.1 → 1.19.0

package/.eslintrc.cjs

@@ -55,6 +55,7 @@ module.exports = {
     parser: 'babel-eslint',
     ecmaVersion: 2018,
     sourceType: 'module',
+    requireConfigFile: false,
     babelOptions: {
       plugins: ['@babel/plugin-syntax-import-assertions'],
     },

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v1.19.0
+
+- Fixed `show`-attribute when an `alpha`-attribute is also present
+- Added `inspector-data`-attribute to help with automated testing based on the Lightning inspector
+- Added reactivity to Route changes (`this.$router.state.path` and `this.$router.state.navigating`)
+- Added `renderQuality` launch setting
+
 ## v1.18.1
 
 _27 jan 2025_

package/docs/router/basics.md

@@ -141,3 +141,35 @@ The Router API provides several useful methods and properties for managing route
 - `this.$router.currentRoute` - retrieve the current route
 - `this.$router.routes` - retrieve the list of all routes
 - `this.$router.navigating` - retrieve the current navigating state
+- `this.$router.state` - reactive router state (see below)
+
+### Reactive router state
+
+The reactive router state (`this.$router.state`) can be useful in situations where you want to hook up reactive changes in your App to Route changes.
+
+The `state` variable on the `this.$router` object returns a reactive object with 2 keys: `path` and `navigating`. The values of these keys will automaticaly update when the router navigates from one page to another.
+
+The router state changes can be used in a Blits template, they can be _watched_ and they can be used in generic busines logic, as demonstrated in the example below.
+
+```js
+export default Blits.Component('MyComponent', {
+  template: `
+    <Element w="1920" h="1080">
+      <!-- dynamically display the current path -->
+      <Text x="100" h="100" :content="$$router.state.path" />
+      <!-- show loading text when router is navigating -->
+      <Text :show="$showLoader">Loading ...</Text>
+    </Element>
+  `,
+  watch: {
+    '$router.state.path'(v, old) {
+      Log.info(`Router Path changed from ${old} to ${v}`)
+    }
+  },
+  computed: {
+    showLoader() {
+      return this.$router.state.navigating
+    }
+  }
+})
+```

package/index.d.ts

@@ -161,6 +161,30 @@ declare module '@lightningjs/blits' {
      */
     readonly navigating: boolean;
 
+    /**
+     * Reactive router state
+     */
+    state: {
+      /**
+       * Path of the current route
+       *
+       * Can be used in:
+       * - a template as `$$router.state.path`
+       * - inside business logic as `this.$router.state.path`
+       * - as a watcher as `$router.state.path(v) {}`
+       */
+      readonly path: string
+      /**
+       * Whether or not the router is currently in the process of navigating
+       * between pages
+       *
+       * Can be used in:
+       * - a template as `$$router.state.navihating`
+       * - inside business logic as `this.$router.state.navigating`
+       * - as a watcher as `$router.state.navigating(v) {}`
+       */
+      readonly navigating: boolean
+    }
   }
 
   export type ComponentBase = {
@@ -599,6 +623,7 @@ declare module '@lightningjs/blits' {
   }
 
   type ScreenResolutions = 'hd' | '720p' | 720 | 'fhd' | 'fullhd' | '1080p' | 1080 | '4k' | '2160p' | 2160
+  type RenderQualities = 'low' | 'medium' | 'high' | 'retina' | number
 
   type ReactivityModes = 'Proxy' | 'defineProperty'
   type RenderModes = 'webgl' | 'canvas'
@@ -667,7 +692,7 @@ declare module '@lightningjs/blits' {
     *
     * Currently 3 screen resolutions are supported, which can be defined with different alias values:
     *
-    * For 720x1080 (1px = 0.66666667px)
+    * For 720x1280 (1px = 0.66666667px)
     * - hd
     * - 720p
     * - 720
@@ -685,6 +710,27 @@ declare module '@lightningjs/blits' {
     */
     screenResolution?: ScreenResolutions,
     /**
+    * Controls the quality of the rendered App.
+    *
+    * Setting a lower quality leads to less detail on screen, but can positively affect overall
+    * performance and smoothness of the App (i.e. a higher FPS).
+    *
+    * The render quality can be one of the following presets:
+    *
+    * - `low` => 66% quality
+    * - `medium` => 85% quality
+    * - `high` => 100% quality
+    * - `retina` => 200% quality
+    *
+    * It's also possible to provide a custom value as a (decimal) number:
+    *
+    * - `0.2` => 20% quality
+    * - `1.5` => 150% quality
+    *
+    * Defaults to 1 (high quality) when not specified
+    */
+    renderQuality?: RenderQualities,
+    /**
     * Custom pixel ratio of the device used to convert dimensions
     * and positions in the App code to the actual device logical coordinates
     *

package/package.json

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

package/src/component/base/router.js

@@ -16,7 +16,7 @@
  */
 
 import symbols from '../../lib/symbols.js'
-import { to, currentRoute, navigating, back } from '../../router/router.js'
+import { to, currentRoute, back, state } from '../../router/router.js'
 
 export default {
   $router: {
@@ -30,8 +30,9 @@ export default {
         return this[symbols.routes]
       },
       get navigating() {
-        return navigating
+        return state.navigating
       },
+      state,
     },
     writable: false,
     enumerable: true,

package/src/components/Circle.js

@@ -19,52 +19,51 @@ import Component from '../component.js'
 
 export default () =>
   Component('Circle', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context,components,effect,getRaw
-) {
-const elms = []
-let componentType
-const rootComponent = component
-let propData
-let slotComponent
-let inSlot = false
-let slotChildCounter = 0
-const elementConfig0 = {}
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context, components, effect, getRaw) {
+        const elms = []
+        let componentType
+        const rootComponent = component
+        let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
+        const elementConfig0 = {}
 
-    elms[0] = this.element({parent: parent || 'root'}, inSlot === true ? slotComponent : component)
-  
-elementConfig0['color'] = component.color
-elementConfig0['w'] = component.size
-elementConfig0['h'] = component.size
-elementConfig0['effects'] = [component.shader('radius', {radius: component.radius})]
-elms[0].populate(elementConfig0)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
-    if(inSlot === true) {
-      slotChildCounter -= 1
-    }
-  
-return elms
-}, effects: [function anonymous(component,elms,context,components,rootComponent,effect
-) {
+        elementConfig0['color'] = component.color
+        elementConfig0['w'] = component.size
+        elementConfig0['h'] = component.size
+        elementConfig0['effects'] = [component.shader('radius', { radius: component.radius })]
+        elms[0].populate(elementConfig0)
 
-            elms[0].set('color', component.color)
-          
-},function anonymous(component,elms,context,components,rootComponent,effect
-) {
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
 
-            elms[0].set('w', component.size)
-          
-},function anonymous(component,elms,context,components,rootComponent,effect
-) {
-
-            elms[0].set('h', component.size)
-          
-},function anonymous(component,elms,context,components,rootComponent,effect
-) {
-
-            elms[0].set('effects', [component.shader('radius', {radius: component.radius})])
-          
-}], context: {}},
+        return elms
+      },
+      effects: [
+        function anonymous(component, elms, context, components, rootComponent, effect) {
+          elms[0].set('color', component.color)
+        },
+        function anonymous(component, elms, context, components, rootComponent, effect) {
+          elms[0].set('w', component.size)
+        },
+        function anonymous(component, elms, context, components, rootComponent, effect) {
+          elms[0].set('h', component.size)
+        },
+        function anonymous(component, elms, context, components, rootComponent, effect) {
+          elms[0].set('effects', [component.shader('radius', { radius: component.radius })])
+        },
+      ],
+      context: {},
+    },
     props: [{ key: 'size', default: 40 }, 'color'],
     computed: {
       radius() {