@lightningjs/blits 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -1,4 +1,18 @@
 # Changelog
+# v0.5.2
+
+_30 nov 2023_
+
+- Fixed issue in code generator leading to creation unnecessary child nodes
+- Added focus handler to router view (that passes focus to the current active page)
+
+# v0.5.1
+
+_29 nov 2023_
+
+- Fixed issue with unexpected unfocus
+- Added fastforward of transitions on the same property
+- Added functionality to skip focus change on key hold
 
 # v0.5.0
 

package/boilerplate/package.json

@@ -9,7 +9,7 @@
     "lint": "eslint '**/*.js'",
     "lint:fix": "eslint '**/*.js' --fix",
     "build": "vite build",
-    "dev": "vite dev"
+    "dev": "vite dev --host"
   },
   "lint-staged": {
     "*.js": [
@@ -31,6 +31,6 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
-    "@lightningjs/blits": "^0.5.0"
+    "@lightningjs/blits": "^0.5.2"
   }
 }

package/package.json

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

package/src/application.js

@@ -43,21 +43,34 @@ const Application = (config) => {
 
   config.hooks = config.hooks || {}
 
-  let handler
+  let keyDownHandler
+  let keyUpHandler
+  let holdTimeout
 
   config.hooks[symbols.destroy] = function () {
-    document.removeEventListener('keydown', handler)
+    document.removeEventListener('keydown', keyDownHandler)
+    document.removeEventListener('keyup', keyUpHandler)
   }
 
   config.hooks[symbols.init] = function () {
     const keyMap = { ...defaultKeyMap, ...Settings.get('keymap', {}) }
 
-    handler = (e) => {
+    keyDownHandler = (e) => {
       const key = keyMap[e.key] || keyMap[e.keyCode] || e.key || e.keyCode
       Focus.input(key, e)
+      clearTimeout(holdTimeout)
+      holdTimeout = setTimeout(() => {
+        Focus.hold = true
+      }, 50)
     }
 
-    document.addEventListener('keydown', handler)
+    keyUpHandler = () => {
+      clearTimeout(holdTimeout)
+      Focus.hold = false
+    }
+
+    document.addEventListener('keydown', keyDownHandler)
+    document.addEventListener('keyup', keyUpHandler)
 
     // next tick
     setTimeout(() => Focus.set(this))

package/src/components/RouterView.js

@@ -25,6 +25,11 @@ export default () =>
     template: `
       <Element w="100%" height="100%"></Element>
     `,
+    state() {
+      return {
+        activeView: null,
+      }
+    },
     hooks: {
       ready() {
         handler = () => Router.navigate.apply(this)
@@ -34,5 +39,8 @@ export default () =>
       destroy() {
         window.removeEventListener('hashchange', handler, false)
       },
+      focus() {
+        this.activeView && this.activeView.focus()
+      },
     },
   })

package/src/element.js

@@ -248,6 +248,15 @@ const Element = {
     return this.initData.ref || null
   },
   animate(prop, value) {
+    if (this.scheduledTransitions[prop]) {
+      clearTimeout(this.scheduledTransitions[prop].timeout)
+      if (this.scheduledTransitions[prop].f.state === 'running') {
+        this.scheduledTransitions[prop].f.pause()
+        // fastforward to final value
+        this.node[prop] = this.scheduledTransitions[prop].v
+      }
+    }
+
     const props = {}
     props[prop] = transformations.unpackTransition(value)
 
@@ -271,9 +280,16 @@ const Element = {
           typeof value === 'object' ? ('function' in value ? value.function : 'ease') : 'ease',
       })
       return new Promise((resolve) => {
-        value.delay
-          ? setTimeout(() => f.start().waitUntilStopped().then(resolve), value.delay)
-          : f.start().waitUntilStopped().then(resolve)
+        this.scheduledTransitions[prop] = {
+          v: props[prop],
+          f,
+          timeout: setTimeout(() => {
+            f.start()
+              .waitUntilStopped()
+              .then(() => delete this.scheduledTransitions[prop])
+              .then(resolve)
+          }, value.delay || 0),
+        }
       })
     }
   },
@@ -283,6 +299,7 @@ export default (config) =>
   Object.assign(Object.create(Element), {
     node: null,
     setProperties: [],
+    scheduledTransitions: {},
     initData: {},
     config,
   })

package/src/focus.js

@@ -19,33 +19,46 @@ import symbols from './lib/symbols.js'
 import { navigating } from './router/router.js'
 
 let focusedComponent = null
+let focusChain = []
+let setFocusTimeout
 
 export default {
+  _hold: false,
+  set hold(v) {
+    this._hold = v
+  },
+  get hold() {
+    return this._hold
+  },
   get() {
     return focusedComponent
   },
   set(component, event) {
+    clearTimeout(setFocusTimeout)
+    focusedComponent && focusedComponent.unfocus()
+    focusChain.reverse().forEach((cmp) => cmp.unfocus())
     if (component !== focusedComponent) {
-      if (focusedComponent && focusedComponent !== component.parent) {
-        focusedComponent.unfocus()
-      }
-      focusedComponent = component
-      focusedComponent.lifecycle.state = 'focus'
-      if (event instanceof KeyboardEvent) {
-        document.dispatchEvent(new KeyboardEvent('keydown', event))
-      }
+      setFocusTimeout = setTimeout(
+        () => {
+          focusedComponent = component
+          focusedComponent.lifecycle.state = 'focus'
+          if (event instanceof KeyboardEvent) {
+            document.dispatchEvent(new KeyboardEvent('keydown', event))
+          } else {
+            focusChain = []
+          }
+        },
+        // todo: make the hold timeout configurable?
+        this.hold ? 50 : 0
+      )
     }
   },
   input(key, event) {
     if (navigating === true) return
-    const focusChain = walkChain([focusedComponent], key)
+    focusChain = walkChain([focusedComponent], key)
     const componentWithInputEvent = focusChain.shift()
 
     if (componentWithInputEvent) {
-      if (componentWithInputEvent !== focusedComponent) {
-        focusChain.reverse().forEach((component) => component.unfocus())
-        componentWithInputEvent.focus()
-      }
       if (componentWithInputEvent[symbols.inputEvents][key]) {
         componentWithInputEvent[symbols.inputEvents][key].call(componentWithInputEvent, event)
       } else if (componentWithInputEvent[symbols.inputEvents].any) {

package/src/lib/codegenerator/generator.js

@@ -182,7 +182,9 @@ const generateComponentCode = function (
   `)
 
   counter++
-  generateElementCode.call(this, { children }, false, { ...options })
+  if (children) {
+    generateElementCode.call(this, { children }, false, { ...options })
+  }
 }
 
 const generateForLoopCode = function (templateObject, parent) {

package/src/router/router.js

@@ -123,6 +123,7 @@ export const navigate = async function () {
 
       // focus the new view
       focus ? Focus.set(focus) : view.focus()
+      this.activeView = this[symbols.children][this[symbols.children].length - 1]
     } else {
       Log.error(`Route ${hash} not found`)
     }