@lightningjs/blits 1.42.0 → 1.43.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## v1.43.0
+
+_12 Nov 2025_
+
+- Exposed different renderer events as hooks (`idle`, `fpsUpdate` and `frameTick`)
+- Added `$clearListeners` utility helper
+- Added `$clearListeners` and `$unlisten` to type definitions
+- Fixed issue with __DEV__ flag being set in vite config
+- Fixed `lint` and `lint:fix` scripts to work cross platform (added Windows support)
+- Added support for utterance options (`rate`, `pitch`, `lang`, `voice` and `volume`) to Announcer plugin
+- Added reactivity to `src`-attribute of the Sprite
+- Updates deprecated `assert` keyword for new `with` keyword
+
+
+## v1.42.1
+
+_28 Oct 2025_
+
+- Updated to version 2.19.1 of the renderer
+- Fixed scale animation snapping issue when using object notation with transitions (again)
+
 ## v1.42.0
 
 _24 Oct 2025_

package/eslint.config.cjs

@@ -15,71 +15,75 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-const {
-    defineConfig,
-    globalIgnores,
-} = require("eslint/config");
+const { defineConfig, globalIgnores } = require('eslint/config')
 
-const globals = require("globals");
-const prettier = require("eslint-plugin-prettier");
-const babelParser = require("@babel/eslint-parser");
-const js = require("@eslint/js");
+const globals = require('globals')
+const prettier = require('eslint-plugin-prettier')
+const babelParser = require('@babel/eslint-parser')
+const js = require('@eslint/js')
 
-const {
-    FlatCompat,
-} = require("@eslint/eslintrc");
+const { FlatCompat } = require('@eslint/eslintrc')
 
 const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
-});
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
 
-module.exports = defineConfig([{
+module.exports = defineConfig([
+  {
     languageOptions: {
-        globals: {
-            ...globals.browser,
-            ...globals.node,
-            globalThis: false,
-        },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        globalThis: false,
+      },
 
-        parser: babelParser,
-        ecmaVersion: 2018,
-        sourceType: "module",
+      parser: babelParser,
+      ecmaVersion: 2018,
+      sourceType: 'module',
 
-        parserOptions: {
-            requireConfigFile: false,
+      parserOptions: {
+        requireConfigFile: false,
 
-            babelOptions: {
-                plugins: ["@babel/plugin-syntax-import-assertions"],
-            },
+        babelOptions: {
+          plugins: ['@babel/plugin-syntax-import-assertions'],
         },
+      },
     },
 
     plugins: {
-        prettier,
+      prettier,
     },
 
-    extends: compat.extends("eslint:recommended", "plugin:prettier/recommended", "prettier"),
+    extends: compat.extends('eslint:recommended', 'plugin:prettier/recommended', 'prettier'),
 
     rules: {
-        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
-        quotes: [2, "single", "avoid-escape"],
-        semi: [2, "never"],
-        "no-extra-boolean-cast": "off",
+      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      quotes: [2, 'single', 'avoid-escape'],
+      semi: [2, 'never'],
+      'no-extra-boolean-cast': 'off',
 
-        "no-unused-vars": [1, {
-            argsIgnorePattern: "res|next|^err",
-        }],
+      'no-unused-vars': [
+        1,
+        {
+          argsIgnorePattern: 'res|next|^err',
+        },
+      ],
 
-        "prettier/prettier": ["error", {
-            trailingComma: "es5",
-            singleQuote: true,
-            tabWidth: 2,
-            semi: false,
-            printWidth: 100,
-            endOfLine: "auto",
-        }],
+      'prettier/prettier': [
+        'error',
+        {
+          trailingComma: 'es5',
+          singleQuote: true,
+          tabWidth: 2,
+          semi: false,
+          printWidth: 100,
+          endOfLine: 'auto',
+        },
+      ],
     },
-}, globalIgnores(["**/node_modules"])]);
+  },
+  globalIgnores(['**/node_modules']),
+])

package/index.d.ts

@@ -23,7 +23,40 @@ import {type ShaderEffect as RendererShaderEffect, type WebGlCoreShader, type Re
 declare module '@lightningjs/blits' {
 
 
-  export interface AnnouncerUtterance extends Promise<T> {
+  export interface AnnouncerUtteranceOptions {
+    /**
+     * Language code (BCP 47 format, e.g., 'en-US', 'fr-FR')
+     *
+     * @default 'en-US'
+     */
+    lang?: string,
+    /**
+     * Voice pitch (0 to 2, where 1 is normal)
+     *
+     * @default 1
+     */
+    pitch?: number,
+    /**
+     * Speech rate (0.1 to 10, where 1 is normal)
+     *
+     * @default 1
+     */
+    rate?: number,
+    /**
+     * Voice to use (obtained from `speechSynthesis.getVoices()`)
+     *
+     * @default null
+     */
+    voice?: SpeechSynthesisVoice | null,
+    /**
+     * Volume level (0 to 1, where 1 is full volume)
+     *
+     * @default 1
+     */
+    volume?: number,
+  }
+
+  export interface AnnouncerUtterance<T = any> extends Promise<T> {
     /**
      * Removes a specific message from the announcement queue,
      * to make sure it isn't spoke out.
@@ -46,8 +79,34 @@ declare module '@lightningjs/blits' {
      * When a message is added with politeness set to `assertive` the message
      * will be added to the beginning of the queue
      *
+     * @param message - The message to be spoken
+     * @param politeness - Politeness level ('off', 'polite', or 'assertive')
+     * @param options - Optional utterance options (rate, pitch, lang, voice, volume)
+     */
+    speak(message: string | number, politeness?: 'off' | 'polite' | 'assertive', options?: AnnouncerUtteranceOptions): AnnouncerUtterance;
+    /**
+     * Instruct the Announcer to speak a message with 'polite' politeness level.
+     * Will add the message to the end of announcement queue.
+     *
+     * @param message - The message to be spoken
+     * @param options - Optional utterance options (rate, pitch, lang, voice, volume)
+     */
+    polite(message: string | number, options?: AnnouncerUtteranceOptions): AnnouncerUtterance;
+    /**
+     * Instruct the Announcer to speak a message with 'assertive' politeness level.
+     * Will add the message to the beginning of announcement queue.
+     *
+     * @param message - The message to be spoken
+     * @param options - Optional utterance options (rate, pitch, lang, voice, volume)
      */
-    speak(message: string | number, politeness?: 'off' | 'polite' | 'assertive'): AnnouncerUtterance;
+    assertive(message: string | number, options?: AnnouncerUtteranceOptions): AnnouncerUtterance;
+    /**
+     * Configure global default utterance options that will be applied to all
+     * subsequent announcements unless overridden by per-call options.
+     *
+     * @param options - Default utterance options (rate, pitch, lang, voice, volume)
+     */
+    configure(options?: AnnouncerUtteranceOptions): void;
     /**
      * Instruct the Announcer to add a pause of a certain duration (in ms). Will add this pause
      * to the end of announcement queue
@@ -135,6 +194,18 @@ declare module '@lightningjs/blits' {
     * This event can fire multiple times during the component's lifecycle
     */
     exit?: () => void;
+    /**
+    * Fires when the renderer is done rendering and enters an idle state
+    *
+    * Note: This event can fire multiple times
+    */
+    idle?: () => void;
+    /**
+    * Fires at a predefined interval and reports the current FPS value
+    *
+    * Note: This event fire multiple times
+    */
+    fpsUpdate?: () => void;
   }
 
   export interface Input {
@@ -305,6 +376,14 @@ declare module '@lightningjs/blits' {
     $listen: {
       (event: string, callback: (args: any) => void, priority?: number): void;
     }
+
+    /**
+     * Remove an event listener previously registered with $listen
+     */
+    $unlisten: {
+      (event: string): void;
+    }
+
     /**
      * Emit events that other components can listen to
      * @param name - name of the event to be emitted
@@ -316,6 +395,13 @@ declare module '@lightningjs/blits' {
      */
     $emit(name: string, data?: any, byReference?: boolean): void;
 
+    /**
+     * Remove all listeners for this component from all events
+     */
+    $clearListeners: {
+      (): void;
+    }
+
     /**
     * Set a timeout that is automatically cleaned upon component destroy
     */
@@ -1078,7 +1164,24 @@ declare module '@lightningjs/blits' {
      *
      * @default false
      */
-    announcer?: boolean
+    announcer?: boolean,
+    /**
+     * Global default utterance options for the announcer.
+     *
+     * These options will be applied to all announcements unless overridden
+     * by per-call options passed to `speak()`, `polite()`, or `assertive()`.
+     *
+     * @example
+     * ```js
+     * announcerOptions: {
+     *   rate: 1.0,
+     *   pitch: 1.0,
+     *   lang: 'en-US',
+     *   volume: 1.0
+     * }
+     * ```
+     */
+    announcerOptions?: AnnouncerUtteranceOptions,
     /**
      * Maximum FPS at which the App will be rendered
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.42.0",
+  "version": "1.43.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -16,8 +16,8 @@
     "test": "c8 node scripts/runTests.js",
     "test:ci": "c8 npm run test:run",
     "test:run": "node -r global-jsdom/register ./node_modules/.bin/tape '{,!(node_modules|packages)/**/}*.test.js' | tap-diff",
-    "lint": "eslint '**/*.js'",
-    "lint:fix": "eslint '**/*.js' --fix",
+    "lint": "node scripts/lint.js",
+    "lint:fix": "node scripts/lint.js fix",
     "prepublishOnly": "node scripts/prepublishOnly.js",
     "postpublish": "node scripts/postpublish.js",
     "prepare": "husky",
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.2.0",
-    "@lightningjs/renderer": "^2.18.2"
+    "@lightningjs/renderer": "^2.19.1"
   },
   "repository": {
     "type": "git",

package/scripts/lint.js

@@ -0,0 +1,50 @@
+import fg from 'fast-glob'
+import { resolve } from 'path'
+import { fileURLToPath } from 'url'
+import { ESLint } from 'eslint'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = resolve(__filename, '../..')
+
+// Get "fix" flag from command line arguments
+const isFix = process.argv[2] === 'fix'
+
+console.log('Starting the linting process...')
+console.log(`Fix mode is ${isFix ? 'enabled' : 'disabled'}`)
+
+const lintFiles = await fg(['**/*.js', '!node_modules/**'], {
+  cwd: __dirname,
+})
+
+console.log(`Found ${lintFiles.length} JavaScript file(s) to lint.`)
+
+if (lintFiles.length === 0) {
+  console.log('No JavaScript files found to lint.')
+  process.exit(0)
+}
+
+const lint = new ESLint({
+  fix: isFix,
+  cwd: __dirname,
+})
+
+const results = await lint.lintFiles(lintFiles)
+
+// Apply fixes to files if "fix" option is enabled
+if (isFix) {
+  await ESLint.outputFixes(results)
+}
+
+const formatter = await lint.loadFormatter('stylish')
+const resultText = formatter.format(results)
+
+if (resultText) {
+  console.log(resultText)
+} else {
+  console.log('Linting complete: All files passed without issues.')
+}
+
+// Determine if there were any errors (not warnings)
+const hasErrors = results.some((result) => result.errorCount > 0)
+
+process.exit(hasErrors ? 1 : 0)

package/scripts/prepush.js

@@ -43,9 +43,13 @@ try {
     })
   } else {
     // Only check files in the commits that are being pushed right now
-    filesToLint = execSync(`git diff --name-only ${remoteSha}..${localSha} | grep '\\.js$'`, {
-      encoding: 'utf8',
-    })
+    // Added --diff-filter=AM to exclude deleted files from linting.
+    filesToLint = execSync(
+      `git diff --diff-filter=AM --name-only ${remoteSha}..${localSha} | grep '\\.js$'`,
+      {
+        encoding: 'utf8',
+      }
+    )
   }
 } catch (error) {
   // grep will exit with code 1 if it doesn't find anything
@@ -60,7 +64,6 @@ if (!filesToLint.trim()) {
 
 const fileList = filesToLint.trim().split('\n')
 console.log(`Running ESLint on ${fileList.length} changed JavaScript files:\n`)
-console.log(filesToLint)
 
 try {
   // Run ESLint on the changed files

package/src/announcer/announcer.js

@@ -25,6 +25,9 @@ let isProcessing = false
 let currentId = null
 let debounce = null
 
+// Global default utterance options
+let globalDefaultOptions = {}
+
 const noopAnnouncement = {
   then() {},
   done() {},
@@ -45,10 +48,10 @@ const toggle = (v) => {
   active = v ? true : false
 }
 
-const speak = (message, politeness = 'off') => {
+const speak = (message, politeness = 'off', options = {}) => {
   if (active === false) return noopAnnouncement
 
-  return addToQueue(message, politeness)
+  return addToQueue(message, politeness, false, options)
 }
 
 const pause = (delay) => {
@@ -57,7 +60,7 @@ const pause = (delay) => {
   return addToQueue(undefined, undefined, delay)
 }
 
-const addToQueue = (message, politeness, delay = false) => {
+const addToQueue = (message, politeness, delay = false, options = {}) => {
   // keep track of the id so message can be canceled
   const id = count++
 
@@ -88,8 +91,8 @@ const addToQueue = (message, politeness, delay = false) => {
   // add message of pause
   if (delay === false) {
     politeness === 'assertive'
-      ? queue.unshift({ message, resolveFn, id })
-      : queue.push({ message, resolveFn, id })
+      ? queue.unshift({ message, resolveFn, id, options })
+      : queue.push({ message, resolveFn, id, options })
   } else {
     queue.push({ delay, resolveFn, id })
   }
@@ -107,7 +110,7 @@ const processQueue = async () => {
   if (isProcessing === true || queue.length === 0) return
   isProcessing = true
 
-  const { message, resolveFn, delay, id } = queue.shift()
+  const { message, resolveFn, delay, id, options = {} } = queue.shift()
 
   currentId = id
 
@@ -125,7 +128,12 @@ const processQueue = async () => {
       Log.debug(`Announcer - speaking: "${message}" (id: ${id})`)
 
       speechSynthesis
-        .speak({ message, id })
+        .speak({
+          message,
+          id,
+          ...globalDefaultOptions,
+          ...options,
+        })
         .then(() => {
           Log.debug(`Announcer - finished speaking: "${message}" (id: ${id})`)
 
@@ -146,9 +154,9 @@ const processQueue = async () => {
   }
 }
 
-const polite = (message) => speak(message, 'polite')
+const polite = (message, options = {}) => speak(message, 'polite', options)
 
-const assertive = (message) => speak(message, 'assertive')
+const assertive = (message, options = {}) => speak(message, 'assertive', options)
 
 const stop = () => {
   speechSynthesis.cancel()
@@ -159,6 +167,10 @@ const clear = () => {
   queue.length = 0
 }
 
+const configure = (options = {}) => {
+  globalDefaultOptions = { ...globalDefaultOptions, ...options }
+}
+
 export default {
   speak,
   polite,
@@ -169,4 +181,5 @@ export default {
   toggle,
   clear,
   pause,
+  configure,
 }

package/src/application.js

@@ -58,6 +58,11 @@ const Application = (config) => {
   config.hooks[symbols.init] = function () {
     // set the initial activation state of the announcer based on launch setting
     this.$announcer.toggle(Settings.get('announcer', false))
+    // configure global default utterance options if provided in settings
+    const announcerOptions = Settings.get('announcerOptions', null)
+    if (announcerOptions && typeof announcerOptions === 'object') {
+      this.$announcer.configure(announcerOptions)
+    }
     const keyMap = { ...defaultKeyMap, ...Settings.get('keymap', {}) }
 
     /** @type {number} Input throttle time in milliseconds (0 = disabled) */

package/src/component/base/events.js

@@ -72,4 +72,18 @@ export default {
     enumerable: true,
     configurable: false,
   },
+
+  /**
+   * Removes all listeners for this component from all events.
+   *
+   * @returns {void}
+   */
+  $clearListeners: {
+    value: function () {
+      eventListeners.removeListeners(this)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
 }

package/src/component.js

@@ -266,20 +266,33 @@ const Component = (name = required('name'), config = required('config')) => {
     this[symbols.rendererEventListeners] = []
     // register hooks if component has hooks specified
     if (config.hooks) {
-      // frame tick event
-      if (config.hooks.frameTick) {
-        const cb = (r, data) => emit('frameTick', this[symbols.identifier], this, [data])
-        this[symbols.rendererEventListeners].push({ event: 'frameTick', cb })
-        renderer.on('frameTick', cb)
-      }
+      // push to next tick to ensure
+      setTimeout(() => {
+        // frame tick event
+        if (config.hooks.frameTick) {
+          const cb = (r, data) => emit('frameTick', this[symbols.identifier], this, [data])
+          this[symbols.rendererEventListeners].push({ event: 'frameTick', cb })
+          renderer.on('frameTick', cb)
+        }
 
-      if (config.hooks.idle) {
-        const cb = () => {
-          emit('idle', this[symbols.identifier], this)
+        // idle event
+        if (config.hooks.idle) {
+          const cb = () => {
+            emit('idle', this[symbols.identifier], this)
+          }
+          this[symbols.rendererEventListeners].push({ event: 'idle', cb })
+          renderer.on('idle', cb)
         }
-        this[symbols.rendererEventListeners].push({ event: 'idle', cb })
-        renderer.on('idle', cb)
-      }
+
+        // fpsUpdate event
+        if (config.hooks.fpsUpdate) {
+          const cb = (r, data) => {
+            emit('fpsUpdate', this[symbols.identifier], this, [data.fps])
+          }
+          this[symbols.rendererEventListeners].push({ event: 'fpsUpdate', cb })
+          renderer.on('fpsUpdate', cb)
+        }
+      })
 
       // inBounds event emiting a lifecycle attach event
       if (config.hooks.attach) {

package/src/components/Sprite.js

@@ -81,27 +81,65 @@ export default () =>
         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('effects', component.effects)
-        },
       ],
       context: {},
     },
     props: ['image', 'map', 'frame', 'color', 'effects'],
+
     state() {
       return {
         spriteTexture: null,
+        currentSrc: null,
       }
     },
+
     computed: {
       texture() {
-        const options =
-          'frames' in this.map
-            ? Object.assign({}, this.map.defaults || {}, this.map.frames[this.frame])
-            : this.map[this.frame]
+        // If no image - nothing to render
+        if (this.image === undefined || this.image === null) {
+          return null
+        }
 
-        if (this.spriteTexture !== null && options) {
-          return this[symbols.renderer]().createTexture('SubTexture', {
+        // Get renderer
+        const renderer = this[symbols.renderer]()
+        if (renderer === null || renderer === undefined || renderer.createTexture === undefined) {
+          return null
+        }
+
+        // Recreate texture only when image src changes
+        if (
+          this.spriteTexture === undefined ||
+          this.spriteTexture === null ||
+          this.currentSrc !== this.image
+        ) {
+          this.spriteTexture = renderer.createTexture('ImageTexture', {
+            src: this.image,
+          })
+          this.currentSrc = this.image
+        }
+
+        // Resolve frame data from sprite map
+        let options = null
+        if (
+          this.map !== undefined &&
+          this.map !== null &&
+          this.frame !== undefined &&
+          this.frame !== null
+        ) {
+          options =
+            'frames' in this.map
+              ? Object.assign({}, this.map.defaults || {}, this.map.frames[this.frame])
+              : this.map[this.frame]
+        }
+
+        // If no map but frame is object (manual subtexture)
+        if ((options === null || options === undefined) && typeof this.frame === 'object') {
+          options = this.frame
+        }
+
+        // Create SubTexture only if frame data exists
+        if (options !== null && options !== undefined) {
+          return renderer.createTexture('SubTexture', {
             texture: this.spriteTexture,
             x: options.x,
             y: options.y,
@@ -109,13 +147,9 @@ export default () =>
             height: options.h,
           })
         }
-      },
-    },
-    hooks: {
-      ready() {
-        this.spriteTexture = this[symbols.renderer]().createTexture('ImageTexture', {
-          src: this.image,
-        })
+
+        // Default fallback (single image)
+        return this.spriteTexture
       },
     },
   })

package/src/launch.js

@@ -18,7 +18,7 @@
 import Settings from './settings.js'
 import { initLog, Log } from './lib/log.js'
 import engine from './engine.js'
-import blitsPackageInfo from '../package.json' assert { type: 'json' }
+import blitsPackageInfo from '../package.json' with { type: 'json' }
 
 /**
  * @typedef {Object} Font

package/src/router/router.js

@@ -78,7 +78,9 @@ let navigationData = {}
 let navigatingBack = false
 let navigatingBackTo = undefined
 let previousFocus
-
+// Skips internal router navigation when set to true only for the next "navigate"
+// execution, needed for window.history management
+let preventHashChangeNavigation = false
 /**
  * Get the current hash
  * @returns {Hash}
@@ -243,7 +245,7 @@ export const navigate = async function () {
   Announcer.clear()
   state.navigating = true
   let reuse = false
-  if (this.parent[symbols.routes]) {
+  if (preventHashChangeNavigation === false && this.parent[symbols.routes]) {
     let previousRoute = currentRoute //? Object.assign({}, currentRoute) : undefined
     let route = matchHash(getHash(document.location.hash), this.parent[symbols.routes])
 
@@ -255,10 +257,22 @@ export const navigate = async function () {
       if (this.parent[symbols.routerHooks]) {
         const hooks = this.parent[symbols.routerHooks]
         if (hooks.beforeEach) {
-          beforeEachResult = await hooks.beforeEach.call(this.parent, route, previousRoute)
-          if (isString(beforeEachResult)) {
+          try {
+            beforeEachResult = await hooks.beforeEach.call(this.parent, route, previousRoute)
+            if (isString(beforeEachResult)) {
+              currentRoute = previousRoute
+              to(beforeEachResult)
+              return
+            }
+          } catch (error) {
+            Log.error('Error or Rejected Promise in "BeforeEach" Hook', error)
+
+            preventHashChangeNavigation = true
             currentRoute = previousRoute
-            to(beforeEachResult)
+            window.history.back()
+
+            navigatingBack = false
+            state.navigating = false
             return
           }
           // If the resolved result is an object, redirect if the path in the object was changed
@@ -267,15 +281,37 @@ export const navigate = async function () {
             to(beforeEachResult.path, beforeEachResult.data, beforeEachResult.options)
             return
           }
+          // If the resolved result is false, cancel navigation
+          if (beforeEachResult === false) {
+            preventHashChangeNavigation = true
+            currentRoute = previousRoute
+            window.history.back()
+
+            navigatingBack = false
+            state.navigating = false
+            return
+          }
         }
       }
 
       let beforeHookOutput
       if (route.hooks.before) {
-        beforeHookOutput = await route.hooks.before.call(this.parent, route, previousRoute)
-        if (isString(beforeHookOutput)) {
+        try {
+          beforeHookOutput = await route.hooks.before.call(this.parent, route, previousRoute)
+          if (isString(beforeHookOutput)) {
+            currentRoute = previousRoute
+            to(beforeHookOutput)
+            return
+          }
+        } catch (error) {
+          Log.error('Error or Rejected Promise in "Before" Hook', error)
+
+          preventHashChangeNavigation = true
           currentRoute = previousRoute
-          to(beforeHookOutput)
+          window.history.back()
+
+          navigatingBack = false
+          state.navigating = false
           return
         }
         // If the resolved result is an object, redirect if the path in the object was changed
@@ -284,6 +320,16 @@ export const navigate = async function () {
           to(beforeHookOutput.path, beforeHookOutput.data, beforeHookOutput.options)
           return
         }
+        // If the resolved result is false, cancel navigation
+        if (beforeHookOutput === false) {
+          preventHashChangeNavigation = true
+          currentRoute = previousRoute
+          window.history.back()
+
+          navigatingBack = false
+          state.navigating = false
+          return
+        }
       }
       // add the previous route (technically still the current route at this point)
       // into the history stack when inHistory is true and we're not navigating back
@@ -462,6 +508,7 @@ export const navigate = async function () {
   // reset navigating indicators
   navigatingBack = false
   state.navigating = false
+  preventHashChangeNavigation = false
 }
 
 /**

package/vite/index.js

@@ -19,10 +19,18 @@ import preCompiler from './preCompiler.js'
 import msdfGenerator from './msdfGenerator.js'
 import blitsFileConverter from './blitsFileConverter.js'
 import reactivityGuard from './reactivityGuard.js'
+import injectDevConfig from './inject-dev-config.js'
 
 export { default as preCompiler } from './preCompiler.js'
 export { default as msdfGenerator } from './msdfGenerator.js'
 export { default as blitsFileConverter } from './blitsFileConverter.js'
 export { default as reactivityGuard } from './reactivityGuard.js'
+export { default as injectDevConfig } from './inject-dev-config.js'
 
-export default [blitsFileConverter(), reactivityGuard(), preCompiler(), msdfGenerator()]
+export default [
+  injectDevConfig(),
+  blitsFileConverter(),
+  reactivityGuard(),
+  preCompiler(),
+  msdfGenerator(),
+]

package/vite/inject-dev-config.js

@@ -0,0 +1,14 @@
+export default function injectDevFlag() {
+  return {
+    name: 'inject-dev-config',
+    config(config, { mode }) {
+      return {
+        define: {
+          __DEV__: mode !== 'production',
+          // merge any existing define block
+          ...config.define,
+        },
+      }
+    },
+  }
+}