@lightningjs/blits 1.25.1 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v1.26.0
+
+- Announcer updates: queue, cancel individual messages, promise based chaining
+- Fixed naming collision for `config`-key on component instance
+- Fixed logging correct renderer version
+
+_08 apr 2025_
+
+
 ## v1.25.1
 
 _01 apr 2025_

package/docs/plugins/text-to-speech-announcer.md

@@ -25,7 +25,7 @@ const routes = [
 Furthermore, it's possible to speak out custom messages anywhere in your App logic, for example when a component receives focus, as a reaction to user input, or to announce error messages when a remote API call
 fails.
 
-Each component in Blits has a `this.$announcer.speak()` available, which accepts `string` of a message to be announced.
+Each component in Blits has a `this.$announcer.speak()` available, which accepts a `string` with the message to be announced.
 
 ```js
 Blits.Component('MyComponent', {
@@ -47,9 +47,65 @@ Blits.Component('MyComponent', {
 })
 ```
 
+### Execute logic when done
+
+The `speak()`-function returns a promise that resolves when it's done speaking, or when it's interupted or errors out. The reason of the `speak()` method resolving is passed as an argument into the resolve function.
+
+```js
+this.$announcer.speak('Hello').then((reason) => console.log('Speaking hello finished', reason))
+```
+
+### Announcement queue
+
+The `speak()`-method places the messages in an announcement queue and then starts processing that queue. That means that when the queue is empty, it will instantly announce the messages passed. If there are other messages in the queue, the messages will be spoken when all previous messages are announced.
+
+Optionally you can set the politeness of a message to `assertive` and pass it a the second argument of the `speak()`-method.
+
+```js
+this.$announcer.speak('Very important message that should get priority', 'assertive')
+```
+
+This will place the message at the beginning of the queue, making in the first message to be announced after the current message (if any) has finished.
+
+#### Clearing and interupting
+
+Since each message added into the queue may take a bit of time to actually be announced, it's possible that the user has navigated elsewhere in the mean time, making the queued up messages not relevant.
+
+The announcer plugin allows you to clear the entire queue by calling `this.$announcer.clear()`. Additionally if you want to interup the messages being currently spoken, the announcer plugin offers the `this.$announcer.stop()`-method.
+
+#### Canceling individual messages
+
+In some cases you may not want to clear the entire queue, but instead cancel out a single message.
+
+Imagine an App with a row of tiles, it's possible that before the title of the role is being spoken out, the user already navigates through the tiles within the row. Traditionally you'd use the focus event to speak out info about each tile (i.e. adding tot the queue). You don't want all previously focused tiles to still be announced, but would still want the category of the row to be announced, making clearing the queue not required.
+
+The `speak()`-method return a Promise that also contains a `cancel()` function. When called, it will cancel that specific message and remove it from the queue before it can be spoken out.
+
+```js
+Blits.Component('MyTile', {
+  //
+  props: ['title'],
+  state() {
+    return {
+      message: null
+    }
+  },
+  hooks: {
+    focus() {
+      // add message to the announcement queue
+      this.message = this.$announcer.speak(`This is tile ${this.title}`)
+    },
+    unfocus() {
+      // when unfocused cancel the message and remove it from the queue
+      this.message.cancel()
+    }
+  }
+})
+```
+
 ## Enabling / disabling the announcer
 
-By default the announcer is disabled. This mean that whenever you call `this.$announcer.speak()` there will actually not be anything spoken out via the Text To Speech engine.
+By default the announcer is disabled. This means that whenever you call `this.$announcer.speak()` there will actually not be anything spoken out via the Text To Speech engine.
 
 In order to enable utterances being spoken out, you can set the Blits launch setting `announcer` to `true` in the index.js.
 

package/index.d.ts

@@ -22,6 +22,58 @@ import {type ShaderEffect as RendererShaderEffect, type WebGlCoreShader, type Re
 
 declare module '@lightningjs/blits' {
 
+
+  export interface AnnouncerUtterance extends Promise {
+    /**
+     * Removes a specific message from the announcement queue,
+     * to make sure it isn't spoke out.
+     *
+     * Does not interupt the message when it's already being announced.
+     */
+    cancel()
+  }
+
+  export interface Announcer {
+    /**
+     * Instruct the Announcer to speak a message. Will add the message
+     * to the end of announcement queue by default
+     *
+     * When a message is added with politeness set to `assertive` the message
+     * will be added to the beginning of the queue
+     *
+     */
+    speak(message: string | number, politeness?: 'off' | 'polite' | 'assertive'): AnnouncerUtterance;
+    /**
+     * Instruct the Announcer to add a pause of a certain duration (in ms). Will add this pause
+     * to the end of announcement queue
+     *
+     */
+    pause(delay: number): AnnouncerUtterance;
+    /**
+     * Interupts and instantly stops any running text to speech utterance
+     *
+     */
+    stop(): void;
+    /**
+     * Clears out the announcement queue of messages.
+     */
+    clears(): void;
+    /**
+     * Enables the announcer.
+     */
+    enable(): void;
+    /**
+     * Disables the announcer. Any messages passed in the announcer.speak() message
+     * will not be added to the queue
+     */
+    disable(): void;
+    /**
+     * Toggles the announcer based on the passed toggle value (Boolean)
+     */
+    toggle(toggle: Boolean): void;
+  }
+
+
   export interface Hooks {
     /**
     * Fires when the Component is being instantiated
@@ -269,7 +321,7 @@ declare module '@lightningjs/blits' {
     /**
      * Announcer methods for screen reader support
      */
-    // $announcer: Announcer
+    $announcer: Announcer
 
     /**
      * Triggers a forced update on state variables.

package/package.json

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

package/src/announcer/announcer.js

@@ -17,9 +17,10 @@
 
 import speechSynthesis from './speechSynthesis.js'
 
-let debounce
-
 let active = false
+let count = 0
+const queue = []
+let isProcessing = false
 
 const enable = () => {
   active = true
@@ -35,16 +36,75 @@ const toggle = (v) => {
 
 const speak = (message, politeness = 'off') => {
   if (active === false) return
-  clearTimeout(debounce)
-  speechSynthesis.cancel()
-  // assertive messages get spoken immediately
-  if (politeness === 'assertive') {
-    speechSynthesis.speak({ value: message })
+
+  return addToQueue(message, politeness)
+}
+
+const pause = (delay) => {
+  if (active === false) return
+
+  return addToQueue(undefined, undefined, delay)
+}
+
+const addToQueue = (message, politeness, delay = false) => {
+  // keep track of the id so message can be canceled
+  const id = count++
+
+  // setup a promise to allow developer to chain functionality
+  // when specific utterances are done
+  let resolveFn
+  const done = new Promise((resolve) => {
+    resolveFn = resolve
+  })
+
+  // augment the promise with a cancel function
+  done.cancel = () => {
+    const index = queue.findIndex((item) => item.id === id)
+    if (index !== -1) queue.splice(index, 1)
+    resolveFn('canceled')
+  }
+
+  // add message of pause
+  if (delay === false) {
+    politeness === 'assertive'
+      ? queue.unshift({ message, resolveFn, id })
+      : queue.push({ message, resolveFn, id })
   } else {
-    debounce = setTimeout(() => {
-      speechSynthesis.speak({ value: message })
-    }, 400)
+    queue.push({ delay, resolveFn, id })
   }
+
+  setTimeout(() => {
+    processQueue()
+  }, 100)
+
+  return done
+}
+
+const processQueue = async () => {
+  if (isProcessing === true || queue.length === 0) return
+  isProcessing = true
+
+  const { message, resolveFn, delay } = queue.shift()
+
+  if (delay !== false) {
+    setTimeout(() => {
+      isProcessing = false
+      resolveFn('finished')
+      processQueue()
+    }, delay)
+    return
+  }
+  speechSynthesis
+    .speak({ message })
+    .then(() => {
+      isProcessing = false
+      resolveFn('finished')
+      processQueue()
+    })
+    .catch((e) => {
+      isProcessing = false
+      resolveFn(e.error)
+    })
 }
 
 const polite = (message) => speak(message, 'polite')
@@ -55,6 +115,10 @@ const stop = () => {
   speechSynthesis.cancel()
 }
 
+const clear = () => {
+  queue.length = 0
+}
+
 export default {
   speak,
   polite,
@@ -63,4 +127,6 @@ export default {
   enable,
   disable,
   toggle,
+  clear,
+  pause,
 }

package/src/announcer/speechSynthesis.js

@@ -17,8 +17,7 @@
 
 const syn = window.speechSynthesis
 
-const getUA = () => (window.navigator || {}).userAgent || ''
-const isAndroid = () => /android/i.test(getUA())
+const isAndroid = /android/i.test((window.navigator || {}).userAgent || '')
 
 let initialized = false
 let infinityTimer = null
@@ -37,7 +36,7 @@ const resumeInfinity = (target) => {
   }, 5000)
 }
 
-const utterProps = {
+const defaultUtteranceProps = {
   lang: 'en-US',
   pitch: 1,
   rate: 1,
@@ -46,82 +45,54 @@ const utterProps = {
 }
 
 const initialize = () => {
-  utterProps.voice = syn.getVoices()[0]
+  defaultUtteranceProps.voice = syn.getVoices()[0]
   initialized = true
 }
 
-const utterance = (scope, e) => {
-  const utter = new SpeechSynthesisUtterance(e.value)
+const speak = (options) => {
+  const utterance = new SpeechSynthesisUtterance(options.message)
 
-  // utter props
-  utter.lang = e.lang || utterProps.lang
-  utter.pitch = e.pitch || utterProps.pitch
-  utter.rate = e.rate || utterProps.rate
-  utter.voice = e.voice || utterProps.voice
-  utter.volume = e.volume || utterProps.volume
+  utterance.lang = options.lang || defaultUtteranceProps.lang
+  utterance.pitch = options.pitch || defaultUtteranceProps.pitch
+  utterance.rate = options.rate || defaultUtteranceProps.rate
+  utterance.voice = options.voice || defaultUtteranceProps.voice
+  utterance.volume = options.volume || defaultUtteranceProps.volume
 
-  // utter events
-  utter.onstart = () => {
-    if (!isAndroid()) {
-      resumeInfinity(utter)
+  if (isAndroid === false) {
+    utterance.onstart = () => {
+      resumeInfinity(utterance)
     }
-    scope.onstart()
-  }
 
-  utter.onresume = () => {
-    if (!isAndroid()) {
-      resumeInfinity(utter)
+    utterance.onresume = () => {
+      resumeInfinity(utterance)
     }
-    scope.onresume()
   }
 
-  utter.onpause = () => {
-    scope.onpause()
-  }
-  utter.onend = () => {
-    scope.onend()
-  }
-  utter.onerror = () => {
-    clear()
-    scope.onerror()
-  }
-  syn.speak(utter)
+  return new Promise((resolve, reject) => {
+    utterance.onend = () => {
+      resolve()
+    }
+    utterance.onerror = (e) => {
+      reject(e)
+    }
+
+    syn.speak(utterance)
+  })
 }
 
 export default {
-  speak(e) {
+  speak(options) {
     if (!initialized) {
       initialize()
     }
-    this.cancel()
-    utterance(this, e)
-  },
-  resume() {
-    syn.resume()
-  },
-  pause() {
-    syn.pause()
+    return speak(options)
   },
   cancel() {
     syn.cancel()
     clear()
   },
-  getVoices() {
-    return syn.getVoices()
-  },
-  onend() {
-    //event placeholder
-  },
-  onerror() {
-    //event placeholder
-  },
-  onstart() {
-    //event placeholder
-  },
-  onresume() {
-    //event placeholder
-  },
-  onpause() {
-    //eventplaceholder
-  },
+  // @todo
+  // getVoices() {
+  //   return syn.getVoices()
+  // },
 }

package/src/component/base/utils.js

@@ -45,7 +45,8 @@ export default {
               if (Object.getPrototypeOf(child) === Object.prototype) {
                 return Object.values(child).map((c) => {
                   // ugly hack .. but the point is to reference the right component
-                  c.forComponent = c.config && c.config.parent.component
+                  c.forComponent =
+                    c[Symbol.for('config')] && c[Symbol.for('config')].parent.component
                   return c
                 })
               }

package/src/component.js

@@ -272,7 +272,7 @@ const Component = (name = required('name'), config = required('config')) => {
 
   // store the config on the factory, in order to access the config
   // during the code generation step
-  factory.config = config
+  factory[Symbol.for('config')] = config
 
   // To determine whether dynamic component is actual Blits component or not
   factory[symbols.isComponent] = true

package/src/components/FPScounter.js

@@ -92,9 +92,9 @@ export default () =>
 
         const skip3 = []
         if (typeof cmp3 !== 'undefined') {
-          for (let key in cmp3.config.props) {
-            delete elementConfig3[cmp3.config.props[key]]
-            skip3.push(cmp3.config.props[key])
+          for (let key in cmp3[Symbol.for('config')].props) {
+            delete elementConfig3[cmp3[Symbol.for('config')].props[key]]
+            skip3.push(cmp3[Symbol.for('config')].props[key])
           }
         }
 
@@ -177,9 +177,9 @@ export default () =>
 
         const skip6 = []
         if (typeof cmp6 !== 'undefined') {
-          for (let key in cmp6.config.props) {
-            delete elementConfig6[cmp6.config.props[key]]
-            skip6.push(cmp6.config.props[key])
+          for (let key in cmp6[Symbol.for('config')].props) {
+            delete elementConfig6[cmp6[Symbol.for('config')].props[key]]
+            skip6.push(cmp6[Symbol.for('config')].props[key])
           }
         }
 
@@ -252,9 +252,9 @@ export default () =>
 
         const skip8 = []
         if (typeof cmp8 !== 'undefined') {
-          for (let key in cmp8.config.props) {
-            delete elementConfig8[cmp8.config.props[key]]
-            skip8.push(cmp8.config.props[key])
+          for (let key in cmp8[Symbol.for('config')].props) {
+            delete elementConfig8[cmp8[Symbol.for('config')].props[key]]
+            skip8.push(cmp8[Symbol.for('config')].props[key])
           }
         }
 
@@ -327,9 +327,9 @@ export default () =>
 
         const skip10 = []
         if (typeof cmp10 !== 'undefined') {
-          for (let key in cmp10.config.props) {
-            delete elementConfig10[cmp10.config.props[key]]
-            skip10.push(cmp10.config.props[key])
+          for (let key in cmp10[Symbol.for('config')].props) {
+            delete elementConfig10[cmp10[Symbol.for('config')].props[key]]
+            skip10.push(cmp10[Symbol.for('config')].props[key])
           }
         }
 
@@ -417,9 +417,9 @@ export default () =>
 
         const skip13 = []
         if (typeof cmp13 !== 'undefined') {
-          for (let key in cmp13.config.props) {
-            delete elementConfig13[cmp13.config.props[key]]
-            skip13.push(cmp13.config.props[key])
+          for (let key in cmp13[Symbol.for('config')].props) {
+            delete elementConfig13[cmp13[Symbol.for('config')].props[key]]
+            skip13.push(cmp13[Symbol.for('config')].props[key])
           }
         }
 
@@ -503,9 +503,9 @@ export default () =>
 
         const skip16 = []
         if (typeof cmp16 !== 'undefined') {
-          for (let key in cmp16.config.props) {
-            delete elementConfig16[cmp16.config.props[key]]
-            skip16.push(cmp16.config.props[key])
+          for (let key in cmp16[Symbol.for('config')].props) {
+            delete elementConfig16[cmp16[Symbol.for('config')].props[key]]
+            skip16.push(cmp16[Symbol.for('config')].props[key])
           }
         }
 
@@ -578,9 +578,9 @@ export default () =>
 
         const skip18 = []
         if (typeof cmp18 !== 'undefined') {
-          for (let key in cmp18.config.props) {
-            delete elementConfig18[cmp18.config.props[key]]
-            skip18.push(cmp18.config.props[key])
+          for (let key in cmp18[Symbol.for('config')].props) {
+            delete elementConfig18[cmp18[Symbol.for('config')].props[key]]
+            skip18.push(cmp18[Symbol.for('config')].props[key])
           }
         }
 
@@ -653,9 +653,9 @@ export default () =>
 
         const skip20 = []
         if (typeof cmp20 !== 'undefined') {
-          for (let key in cmp20.config.props) {
-            delete elementConfig20[cmp20.config.props[key]]
-            skip20.push(cmp20.config.props[key])
+          for (let key in cmp20[Symbol.for('config')].props) {
+            delete elementConfig20[cmp20[Symbol.for('config')].props[key]]
+            skip20.push(cmp20[Symbol.for('config')].props[key])
           }
         }
 
@@ -744,9 +744,9 @@ export default () =>
 
         const skip23 = []
         if (typeof cmp23 !== 'undefined') {
-          for (let key in cmp23.config.props) {
-            delete elementConfig23[cmp23.config.props[key]]
-            skip23.push(cmp23.config.props[key])
+          for (let key in cmp23[Symbol.for('config')].props) {
+            delete elementConfig23[cmp23[Symbol.for('config')].props[key]]
+            skip23.push(cmp23[Symbol.for('config')].props[key])
           }
         }
 
@@ -830,9 +830,9 @@ export default () =>
 
         const skip26 = []
         if (typeof cmp26 !== 'undefined') {
-          for (let key in cmp26.config.props) {
-            delete elementConfig26[cmp26.config.props[key]]
-            skip26.push(cmp26.config.props[key])
+          for (let key in cmp26[Symbol.for('config')].props) {
+            delete elementConfig26[cmp26[Symbol.for('config')].props[key]]
+            skip26.push(cmp26[Symbol.for('config')].props[key])
           }
         }
 
@@ -905,9 +905,9 @@ export default () =>
 
         const skip28 = []
         if (typeof cmp28 !== 'undefined') {
-          for (let key in cmp28.config.props) {
-            delete elementConfig28[cmp28.config.props[key]]
-            skip28.push(cmp28.config.props[key])
+          for (let key in cmp28[Symbol.for('config')].props) {
+            delete elementConfig28[cmp28[Symbol.for('config')].props[key]]
+            skip28.push(cmp28[Symbol.for('config')].props[key])
           }
         }
 
@@ -980,9 +980,9 @@ export default () =>
 
         const skip30 = []
         if (typeof cmp30 !== 'undefined') {
-          for (let key in cmp30.config.props) {
-            delete elementConfig30[cmp30.config.props[key]]
-            skip30.push(cmp30.config.props[key])
+          for (let key in cmp30[Symbol.for('config')].props) {
+            delete elementConfig30[cmp30[Symbol.for('config')].props[key]]
+            skip30.push(cmp30[Symbol.for('config')].props[key])
           }
         }
 
@@ -1070,9 +1070,9 @@ export default () =>
 
         const skip33 = []
         if (typeof cmp33 !== 'undefined') {
-          for (let key in cmp33.config.props) {
-            delete elementConfig33[cmp33.config.props[key]]
-            skip33.push(cmp33.config.props[key])
+          for (let key in cmp33[Symbol.for('config')].props) {
+            delete elementConfig33[cmp33[Symbol.for('config')].props[key]]
+            skip33.push(cmp33[Symbol.for('config')].props[key])
           }
         }
 
@@ -1155,9 +1155,9 @@ export default () =>
 
         const skip36 = []
         if (typeof cmp36 !== 'undefined') {
-          for (let key in cmp36.config.props) {
-            delete elementConfig36[cmp36.config.props[key]]
-            skip36.push(cmp36.config.props[key])
+          for (let key in cmp36[Symbol.for('config')].props) {
+            delete elementConfig36[cmp36[Symbol.for('config')].props[key]]
+            skip36.push(cmp36[Symbol.for('config')].props[key])
           }
         }
 
@@ -1230,9 +1230,9 @@ export default () =>
 
         const skip38 = []
         if (typeof cmp38 !== 'undefined') {
-          for (let key in cmp38.config.props) {
-            delete elementConfig38[cmp38.config.props[key]]
-            skip38.push(cmp38.config.props[key])
+          for (let key in cmp38[Symbol.for('config')].props) {
+            delete elementConfig38[cmp38[Symbol.for('config')].props[key]]
+            skip38.push(cmp38[Symbol.for('config')].props[key])
           }
         }
 
@@ -1305,9 +1305,9 @@ export default () =>
 
         const skip40 = []
         if (typeof cmp40 !== 'undefined') {
-          for (let key in cmp40.config.props) {
-            delete elementConfig40[cmp40.config.props[key]]
-            skip40.push(cmp40.config.props[key])
+          for (let key in cmp40[Symbol.for('config')].props) {
+            delete elementConfig40[cmp40[Symbol.for('config')].props[key]]
+            skip40.push(cmp40[Symbol.for('config')].props[key])
           }
         }
 

package/src/launch.js

@@ -18,7 +18,8 @@
 import Settings from './settings.js'
 import { initLog, Log } from './lib/log.js'
 import engine from './engine.js'
-import packageInfo from '../package.json' assert { type: 'json' }
+import blitsPackageInfo from '../package.json' assert { type: 'json' }
+import rendererPackageInfo from '../../renderer/package.json' assert { type: 'json' }
 
 export let renderer = {}
 export const stage = {}
@@ -27,8 +28,8 @@ export default (App, target, settings) => {
   Settings.set(settings)
 
   initLog()
-  Log.info('Blits Version ', packageInfo.version)
-  Log.info('Renderer Version ', packageInfo.dependencies['@lightningjs/renderer'])
+  Log.info('Blits Version ', blitsPackageInfo.version)
+  Log.info('Renderer Version ', rendererPackageInfo.version)
 
   stage.element = engine.Element
 

package/src/lib/codegenerator/generator.js

@@ -191,9 +191,9 @@ const generateElementCode = function (
     renderCode.push(`
     const skip${counter} = []
     if(typeof cmp${counter} !== 'undefined') {
-      for(let key in cmp${counter}.config.props) {
-        delete elementConfig${counter}[cmp${counter}.config.props[key]]
-        skip${counter}.push(cmp${counter}.config.props[key])
+      for(let key in cmp${counter}[Symbol.for('config')].props) {
+        delete elementConfig${counter}[cmp${counter}[Symbol.for('config')].props[key]]
+        skip${counter}.push(cmp${counter}[Symbol.for('config')].props[key])
       }
     }
     `)

package/src/lib/codegenerator/generator.test.js

@@ -1103,9 +1103,9 @@ test('Generate code for a template with custom components', (assert) => {
     const skip1 = []
 
     if (typeof cmp1 !== 'undefined') {
-        for (let key in cmp1.config.props) {
-            delete elementConfig1[cmp1.config.props[key]]
-            skip1.push(cmp1.config.props[key])
+        for (let key in cmp1[Symbol.for('config')].props) {
+            delete elementConfig1[cmp1[Symbol.for('config')].props[key]]
+            skip1.push(cmp1[Symbol.for('config')].props[key])
         }
     }
 
@@ -1149,9 +1149,9 @@ test('Generate code for a template with custom components', (assert) => {
     const skip3 = []
 
     if (typeof cmp3 !== 'undefined') {
-        for (let key in cmp3.config.props) {
-            delete elementConfig3[cmp3.config.props[key]]
-            skip3.push(cmp3.config.props[key])
+        for (let key in cmp3[Symbol.for('config')].props) {
+            delete elementConfig3[cmp3[Symbol.for('config')].props[key]]
+            skip3.push(cmp3[Symbol.for('config')].props[key])
         }
     }
 
@@ -1252,9 +1252,9 @@ test('Generate code for a template with an unregistered custom component', (asse
     elms[1] = this.element({ parent: parent || 'root' }, inSlot === true ? slotComponent : component)
     const skip1 = []
     if (typeof cmp1 !== 'undefined') {
-        for (let key in cmp1.config.props) {
-            delete elementConfig1[cmp1.config.props[key]]
-            skip1.push(cmp1.config.props[key])
+        for (let key in cmp1[Symbol.for('config')].props) {
+            delete elementConfig1[cmp1[Symbol.for('config')].props[key]]
+            skip1.push(cmp1[Symbol.for('config')].props[key])
         }
     }
     elms[1].populate(elementConfig1)
@@ -1292,9 +1292,9 @@ test('Generate code for a template with an unregistered custom component', (asse
     elms[3] = this.element({ parent: parent || 'root' }, inSlot === true ? slotComponent : component)
     const skip3 = []
     if (typeof cmp3 !== 'undefined') {
-        for (let key in cmp3.config.props) {
-            delete elementConfig3[cmp3.config.props[key]]
-            skip3.push(cmp3.config.props[key])
+        for (let key in cmp3[Symbol.for('config')].props) {
+            delete elementConfig3[cmp3[Symbol.for('config')].props[key]]
+            skip3.push(cmp3[Symbol.for('config')].props[key])
         }
     }
     elms[3].populate(elementConfig3)
@@ -1394,9 +1394,9 @@ test('Generate code for a template with custom components with arguments', (asse
     elementConfig1['x'] = 10
     const skip1 = []
     if (typeof cmp1 !== 'undefined') {
-        for (let key in cmp1.config.props) {
-            delete elementConfig1[cmp1.config.props[key]]
-            skip1.push(cmp1.config.props[key])
+        for (let key in cmp1[Symbol.for('config')].props) {
+            delete elementConfig1[cmp1[Symbol.for('config')].props[key]]
+            skip1.push(cmp1[Symbol.for('config')].props[key])
         }
     }
     elms[1].populate(elementConfig1)
@@ -1437,9 +1437,9 @@ test('Generate code for a template with custom components with arguments', (asse
     elementConfig3['img'] = component.img
     const skip3 = []
     if (typeof cmp3 !== 'undefined') {
-        for (let key in cmp3.config.props) {
-            delete elementConfig3[cmp3.config.props[key]]
-            skip3.push(cmp3.config.props[key])
+        for (let key in cmp3[Symbol.for('config')].props) {
+            delete elementConfig3[cmp3[Symbol.for('config')].props[key]]
+            skip3.push(cmp3[Symbol.for('config')].props[key])
         }
     }
     elms[3].populate(elementConfig3)
@@ -1561,9 +1561,9 @@ test('Generate code for a template with custom components with argument value as
 
     const skip1 = []
     if (typeof cmp1 !== 'undefined') {
-        for (let key in cmp1.config.props) {
-            delete elementConfig1[cmp1.config.props[key]]
-            skip1.push(cmp1.config.props[key])
+        for (let key in cmp1[Symbol.for('config')].props) {
+            delete elementConfig1[cmp1[Symbol.for('config')].props[key]]
+            skip1.push(cmp1[Symbol.for('config')].props[key])
         }
     }
 
@@ -1681,9 +1681,9 @@ test('Generate code for a template with custom components with reactive props',
     elementConfig1['img'] = component.image
     const skip1 = []
     if(typeof cmp1 !== 'undefined') {
-      for(let key in cmp1.config.props) {
-        delete elementConfig1[cmp1.config.props[key]]
-        skip1.push(cmp1.config.props[key])
+      for(let key in cmp1[Symbol.for('config')].props) {
+        delete elementConfig1[cmp1[Symbol.for('config')].props[key]]
+        skip1.push(cmp1[Symbol.for('config')].props[key])
       }
     }
     elms[1].populate(elementConfig1)
@@ -1730,9 +1730,9 @@ test('Generate code for a template with custom components with reactive props',
     elementConfig3['img'] = component.image
     const skip3 = []
     if(typeof cmp3 !== 'undefined') {
-      for(let key in cmp3.config.props) {
-        delete elementConfig3[cmp3.config.props[key]]
-        skip3.push(cmp3.config.props[key])
+      for(let key in cmp3[Symbol.for('config')].props) {
+        delete elementConfig3[cmp3[Symbol.for('config')].props[key]]
+        skip3.push(cmp3[Symbol.for('config')].props[key])
       }
     }
     elms[3].populate(elementConfig3)
@@ -1943,9 +1943,9 @@ test('Generate code for a template with slot content', (assert) => {
     elementConfig1['h'] = 1080
     const skip1 = []
     if (typeof cmp1 !== 'undefined') {
-        for (let key in cmp1.config.props) {
-            delete elementConfig1[cmp1.config.props[key]]
-            skip1.push(cmp1.config.props[key])
+        for (let key in cmp1[Symbol.for('config')].props) {
+            delete elementConfig1[cmp1[Symbol.for('config')].props[key]]
+            skip1.push(cmp1[Symbol.for('config')].props[key])
         }
     }
     elms[1].populate(elementConfig1)
@@ -2087,9 +2087,9 @@ test('Generate code for a template with slot content, using a named slot', (asse
     elementConfig1['h'] = 1080
     const skip1 = []
     if (typeof cmp1 !== 'undefined') {
-        for (let key in cmp1.config.props) {
-            delete elementConfig1[cmp1.config.props[key]]
-            skip1.push(cmp1.config.props[key])
+        for (let key in cmp1[Symbol.for('config')].props) {
+            delete elementConfig1[cmp1[Symbol.for('config')].props[key]]
+            skip1.push(cmp1[Symbol.for('config')].props[key])
         }
     }
     elms[1].populate(elementConfig1)
@@ -3173,9 +3173,9 @@ test('Generate code for a template with a simple for-loop on a Component with a
             }
             const skip1 = []
             if (typeof cmp1 !== 'undefined') {
-                for (let key in cmp1.config.props) {
-                    delete elementConfig1[cmp1.config.props[key]]
-                    skip1.push(cmp1.config.props[key])
+                for (let key in cmp1[Symbol.for('config')].props) {
+                    delete elementConfig1[cmp1[Symbol.for('config')].props[key]]
+                    skip1.push(cmp1[Symbol.for('config')].props[key])
                 }
             }
             if (elms[1][scope.key].nodeId === undefined) {

package/src/lib/symbols.js

@@ -37,6 +37,8 @@ export default {
   children: Symbol.for('children'),
   // Symbol 'components' utilized within generated code
   components: Symbol.for('components'),
+  // Symbol 'config' utilized within generated code
+  config: Symbol.for('config'),
   // Symbol 'isSlot' utilized within generated code
   isSlot: Symbol.for('isSlot'),
   // Symbol 'props' utilized within generated code

package/src/router/router.js

@@ -125,6 +125,8 @@ export const matchHash = (path, routes = []) => {
 }
 
 export const navigate = async function () {
+  Announcer.stop()
+  Announcer.clear()
   state.navigating = true
   if (this.parent[symbols.routes]) {
     let previousRoute = currentRoute ? Object.assign({}, currentRoute) : undefined
@@ -183,6 +185,16 @@ export const navigate = async function () {
       let routeData
       let { view, focus } = cacheMap.get(route.hash) || {}
 
+      // Announce route change if a message has been specified for this route
+      if (route.announce) {
+        if (typeof route.announce === 'string') {
+          route.announce = {
+            message: route.announce,
+          }
+        }
+        Announcer.speak(route.announce.message, route.announce.politeness)
+      }
+
       if (!view) {
         // create a holder element for the new view
         holder = stage.element({ parent: this[symbols.children][0] })
@@ -210,6 +222,7 @@ export const navigate = async function () {
         }
 
         view = await route.component({ props }, holder, this)
+
         if (view[Symbol.toStringTag] === 'Module') {
           if (view.default && typeof view.default === 'function') {
             view = view.default({ props }, holder, this)
@@ -294,16 +307,6 @@ export const navigate = async function () {
         }
       }
 
-      // Announce route change if a message has been specified for this route
-      if (route.announce) {
-        if (typeof route.announce === 'string') {
-          route.announce = {
-            message: route.announce,
-          }
-        }
-        Announcer.speak(route.announce.message, route.announce.politeness)
-      }
-
       this.activeView = this[symbols.children][this[symbols.children].length - 1]
     } else {
       Log.error(`Route ${hash} not found`)