@lightningjs/blits 0.9.5 → 0.9.7

package/CHANGELOG.md

@@ -1,13 +1,29 @@
 # Changelog
 
-# v0.9.5
+## v0.9.7
+
+_15 apr 2024_
+
+- Added support for direct assignment of an Array element and triggering reactivity
+- Added support for .env in boilerplate
+- Fixed issue with Blits component being wrapped in a Proxy when assigned to a state variable
+- Fixed built-in `hasFocus`-state to also work for components that don't have state in their config object
+
+## v0.9.6
+
+_4 apr 2024_
+
+- Added before hook to router
+- Upgraded Lightning renderer to v0.8.2
+
+## v0.9.5
 
 _29 mar 2024_
 
 - Fixed cancelling  of scheduled / running transitions when starting a new transition on the same prop (broke in v0.7.1).
 - Added viewport relates lifecycle hooks
 
-# v0.9.4
+## v0.9.4
 
 _28 mar 2024_
 
@@ -16,19 +32,19 @@ _28 mar 2024_
 - Introduced new `gpuMemoryLimit` launch setting
 
 
-# v0.9.3
+## v0.9.3
 
 _25 mar 2024_
 
 - Added support for mount / pivot on Text elements and Sprites.
 
-# v0.9.2
+## v0.9.2
 
 _21 mar 2024_
 
 - Fixed issue with updates not triggering during array operation
 
-# v0.9.1
+## v0.9.1
 
 _21 mar 2024_
 
@@ -38,7 +54,7 @@ _21 mar 2024_
 - Introduced `viewportMargin` setting
 - Added `undefined`-check for props sent to renderer
 
-# v0.9.0
+## v0.9.0
 
 _18 mar 2024_
 
@@ -48,7 +64,7 @@ _18 mar 2024_
 - Refactored font loading, removed the need for temporary `src/fontLoader.js` file
 - Replaced using component name with unique identifier for registering and emitting hooks
 
-# v0.8.1
+## v0.8.1
 
 _9 mar 2024_
 
@@ -57,20 +73,20 @@ _9 mar 2024_
 - Removed explicit destroy of child nodes, as the renderer now takes care of this
 - Re-added support for clipping
 
-# v0.8.0
+## v0.8.0
 
 _1 mar 2024_
 
 - Added `this.$clearIntervals()` and `this.$clearTimeouts()` methods that clear all intervals and timers set on a certain component
 - **Breaking change:** Renamed the key `function` to `easing` in the transitions object used to specify a custom easing functio (deprecation notice added)
 
-# v0.7.4
+## v0.7.4
 
 _28 feb 2024_
 
 - Fixed dependency for on the fly MSDF font generation
 
-# v0.7.3
+## v0.7.3
 
 _28 feb 2024_
 
@@ -81,14 +97,14 @@ _28 feb 2024_
 - Added support for pre-compilation for files with more than 1 Blits component
 - Fixed transitions on scale attribute when passed an object with `x` and `y` values
 
-# v0.7.2
+## v0.7.2
 
 _23 feb 2024_
 
 - Added small fix to support for (re)assigning an array used in a for-loop
 - Added option to enable the Lightning inspector in launch setting (`inspector: true/false`)
 
-# v0.7.1
+## v0.7.1
 
 _22 feb 2024_
 
@@ -101,7 +117,7 @@ _22 feb 2024_
 - Added preliminary support for frameTick hook
 - Upgraded to latest version of the renderer (0.7.4)
 
-# v0.7.0
+## v0.7.0
 
 _20 feb 2024_
 
@@ -110,7 +126,7 @@ _20 feb 2024_
 - Added functionality to pass extra data / props when navigating to a new route ( _breaking change_ in signature of `router.to()` method - previously: `router.to(path, options)`, now: `router.to(path, data, options)`)
 - Added configuration option to set the canvas color (aka clear color)
 
-# v0.6.13
+## v0.6.13
 
 _16 feb 2024_
 
@@ -120,7 +136,7 @@ _16 feb 2024_
 - Fixed logic to not unfoces a parent when it passes focus to a child
 - Removed temporary fix for renderer issue [#123](https://github.com/lightning-js/renderer/issues/123)
 
-# v0.6.12
+## v0.6.12
 
 _9 feb 2024_
 
@@ -128,7 +144,7 @@ _9 feb 2024_
 - Fixed issue with `.gitignore` in app create flow
 - Added support for dynamic route parts in the router (i.e `/tv/:series/episodes/:episode`)
 
-# v0.6.11
+## v0.6.11
 
 _7 feb 2024_
 
@@ -136,7 +152,7 @@ _7 feb 2024_
 - Removed setting focus to AppComponent on back key press in RouterView
 - Fixed broken app create flow caused by missing dev dependencies in npx command (temporary fix)
 
-# v0.6.10
+## v0.6.10
 
 _2 feb 2024_
 
@@ -145,20 +161,20 @@ _2 feb 2024_
 - Updated flow to create a new App project with an interactive prompt of questions (`npx @lightningjs/blits@latest`)
 - Upgraded to latest version of the Lightning 3 renderer (0.7.1)
 
-# v0.6.9
+## v0.6.9
 
 _31 jan 2024_
 
 - Fixed single quote escaping for all browsers (removing sometimes unsupported negative lookahead)
 - Fixed issue with focus when navigating back to a page that is kept in history
 
-# v0.6.8
+## v0.6.8
 
 _29 jan 2024_
 
 - Reverted fix (initially) empty for-loops
 
-# v0.6.7
+## v0.6.7
 
 _26 jan 2024_
 
@@ -168,7 +184,7 @@ _26 jan 2024_
 - Added setting for specifying maximum number of web workers to spawn (`webWorkersLimit`)
 - Added fix for issue with setting up reactivity for (initially) empty for-loops
 
-# v0.6.6
+## v0.6.6
 
 _24 jan 2024_
 
@@ -176,54 +192,54 @@ _24 jan 2024_
 - Fixed issue with setting mount, pivot and scale values to zero (0) in object literal with x and y key
 - Added automatic mapping of ref string to each item in a for-loop
 
-# v0.6.5
+## v0.6.5
 
 _16 jan 2024_
 
 - Added `path` to boilerplate vite.config.js for deployments in a sub folder
 - Improved error handling in the template parser, with more contextual error messages
 
-# v0.6.4
+## v0.6.4
 
 _15 jan 2024_
 
 - Added fix for sprites not working on certain devices
 
-# v0.6.3
+## v0.6.3
 
 _12 jan 2024_
 
 - Removed prepending protocol and host from sprite image
 
 
-# v0.6.2
+## v0.6.2
 
 _12 jan 2024_
 
 - Fixed issue with Sprites not working correctly due to missing background color
 
-# v0.6.1
+## v0.6.1
 
 _8 jan 2024_
 
 - Fixed issue with using single quotes as Text content
 - Added first Text-to-Speech / Announcer functionality
 
-# v0.6.0
+## v0.6.0
 
 _4 jan 2024_
 
 - Added pre-compilation functionality to improve performance. Requires an update to the `vite.config.js` to enable. Read more details in this [blog post](https://lightningjs.io/blogs/blitsPreCompilation.html)
 - Added `defaultFont` to the Launch settings
 
-# v0.5.10
+## v0.5.10
 
 _3 jan 2024_
 
 - Updated and improved documentation
 - Added `screenResolution` and `pixelRatio` options to settings
 
-# v0.5.9
+## v0.5.9
 
 _21 dec 2023_
 
@@ -234,13 +250,13 @@ _21 dec 2023_
 - Added functionality to override route options during navigation
 - Upgraded to latest version of the renderer (0.6.1) which contains a fix for animations not finishing correctly
 
-# v0.5.8
+## v0.5.8
 
 _15 dec 2023_
 
 - Internal refactor of the `Element`
 
-# v0.5.7
+## v0.5.7
 
 _13 dec 2023_
 
@@ -248,39 +264,39 @@ _13 dec 2023_
 - Linked effects directly to the available shaders exposed by the L3 renderer (starting 0.6.0)
 - Added setting `reactivityMode` to control whether `Proxy` (default) or `defineProperty` is used to trigger reactive side effects
 
-# v0.5.6
+## v0.5.6
 
 _11 dec 2023_
 
 - Upgraded to version 0.6.0 of the Lightning 3 renderer
 
-# v0.5.5
+## v0.5.5
 
 _5 dec 2023_
 
 - Fixed regression in Slots functionality caused by forloop cleanup fix in 0.5.4
 
-# v0.5.4
+## v0.5.4
 
 _5 dec 2023_
 
 - Fixed issue with Components and Elements not always being cleaned up in forloop
 - Added support for nested children inside a forloop on an Element
 
-# v0.5.3
+## v0.5.3
 
 _4 dec 2023_
 
 - Added transition `start` and tranition `end` callbacks
 
-# v0.5.2
+## 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
+## v0.5.1
 
 _29 nov 2023_
 
@@ -288,20 +304,20 @@ _29 nov 2023_
 - Added fastforward of transitions on the same property
 - Added functionality to skip focus change on key hold
 
-# v0.5.0
+## v0.5.0
 
 _23 nov 2023_
 
 - Introduced `wordwrap` and `maxlines` attributes on the Text-component, replacing the previous `w` and `h` attributes (breaking change!)
 
-# v0.4.2
+## v0.4.2
 
 _22 nov 2023_
 
 - Improved parser and added more template validation (i.e. one single root element in a template)
 - Fixed typo in documentation
 
-# v0.4.1
+## v0.4.1
 
 _13 nov 2023_
 

package/boilerplate/common/eslint/.eslintrc.cjs

@@ -32,7 +32,7 @@ module.exports = {
   },
   parserOptions: {
     parser: 'babel-eslint',
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module',
   },
 }

package/boilerplate/common/git/gitignore

@@ -1,5 +1,8 @@
 .DS_Store
+.env
+.env.*
+!.env.example
+
 node_modules
 build
 dist
-env

package/boilerplate/js/default/.env.example

@@ -0,0 +1,4 @@
+# all environment variables need to prefixed with VITE_*
+# to read, use import.meta.env.VITE_FOO
+
+# VITE_FOO=bar

package/boilerplate/js/default/src/pages/Home.js

@@ -2,7 +2,7 @@ import Blits from '@lightningjs/blits'
 
 import Loader from '../components/Loader.js'
 
-export default Blits.Component('Loading', {
+export default Blits.Component('Home', {
   components: {
     Loader,
   },

package/boilerplate/js/default/vite.config.js

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 import { defineConfig } from 'vite'
 import blitsVitePlugins from '@lightningjs/blits/vite'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -45,7 +45,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.8.0",
+    "@lightningjs/renderer": "^0.8.2",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",

package/src/application.d.ts

@@ -1,3 +1,4 @@
+
 /*
  * Copyright 2023 Comcast Cable Communications Management, LLC
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -91,6 +92,10 @@ declare namespace Application {
     [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>
   }[keyof T]
 
+  interface RouteHooks {
+    before?: (to: Route, from: Route) => string | Route;
+  }
+
   type Route = {
     /**
      * URI path for the route
@@ -115,6 +120,26 @@ declare namespace Application {
      * politeness level
      */
     announce?: String | RouteAnnounce
+    /**
+     * Register hooks for the route
+     */
+    hooks?: RouteHooks
+    /**
+     * Route path parameters
+     */
+    readonly params?: {
+      [key: string]: string | number
+    }
+    /**
+     * Allows for attaching custom data to a route, either hardcoded in the
+     * route definition or asigned to the route object in a before hook
+     *
+     * Will be merged with the route params and navigation data and passed as
+     * props into the route component
+     */
+    data?: {
+      [key: string]: any
+    }
   }
 
   export interface ApplicationInstance extends ComponentInstance {}

package/src/component.js

@@ -68,7 +68,7 @@ const Component = (name = required('name'), config = required('config')) => {
     if (config.methods) setupMethods(component, config.methods)
 
     // setup state
-    if (config.state) setupState(component, config.state)
+    setupState(component, config.state)
 
     // setup computed
     if (config.computed) setupComputed(component, config.computed)

package/src/lib/codegenerator/generator.js

@@ -218,7 +218,7 @@ const generateForLoopCode = function (templateObject, parent) {
     ctx.renderCode.push(`parent = ${parent}`)
   }
 
-  const forCounter = counter
+  const forStartCounter = counter
 
   // reference all reactive attributes (except those referencing the iterator item),
   // to ensure that reactivity is registered, even when the initial array is empty
@@ -282,12 +282,15 @@ const generateForLoopCode = function (templateObject, parent) {
   ctx.renderCode = ctx.renderCode.concat(ctx.effectsCode)
   ctx.renderCode.push('}')
 
+  const forEndCounter = counter
   ctx.renderCode.push(`
-   if(elms[${forCounter}]) {
-      Object.keys(elms[${forCounter}]).forEach(key => {
+   if(elms[${forStartCounter}]) {
+      Object.keys(elms[${forStartCounter}]).forEach(key => {
         if(keys.indexOf(key) === -1) {
-          elms[${forCounter}][key].destroy && elms[${forCounter}][key].destroy()
-          delete elms[1][key]
+          for(let i=${forStartCounter}; i <= ${forEndCounter}; i++){
+            elms[i][key].destroy && elms[i][key].destroy()
+            delete elms[i][key]
+          }
         }
       })
     }

package/src/lib/reactivity/effect.js

@@ -58,6 +58,7 @@ export const track = (target, key) => {
 }
 
 export const trigger = (target, key, force = false) => {
+  if (paused) return
   const effectsMap = objectMap.get(target)
   if (!effectsMap) {
     return

package/src/lib/reactivity/reactive.js

@@ -32,6 +32,11 @@ const getRaw = (value) => {
 }
 
 const reactiveProxy = (original, _parent = null, _key) => {
+  // don't create a proxy when a Blits component is assigned to a state variable
+  if (typeof original === 'object' && original[symbols.id]) {
+    return original
+  }
+
   // if original object is already a proxy, don't create a new one but return the existing one instead
   const existingProxy = getProxy(original)
   if (existingProxy) {
@@ -89,7 +94,11 @@ const reactiveProxy = (original, _parent = null, _key) => {
         result = Reflect.set(target, key, value, receiver)
       }
 
-      if (result && oldRawValue !== value) {
+      if (result && oldRawValue !== rawValue) {
+        // if we're assigning an array key directly trigger reactivity on the parent key as well
+        if (Array.isArray(target) && key in target) {
+          trigger(_parent, _key, true)
+        }
         trigger(target, key, true)
       }
       return result

package/src/lib/setup/state.js

@@ -19,7 +19,7 @@ import { Log } from '../log.js'
 
 import symbols from '../symbols.js'
 
-export default (component, state) => {
+export default (component, state = () => {}) => {
   component[symbols.stateKeys] = []
 
   state = { ...state.apply(component.prototype), ...{ hasFocus: false } }

package/src/router/router.js

@@ -46,6 +46,9 @@ const normalizePath = (path) => {
       .toLowerCase()
   )
 }
+const isObject = (v) => typeof v === 'object' && v !== null
+
+const isString = (v) => typeof v === 'string'
 
 export const matchHash = (path, routes = []) => {
   // remove trailing slashes
@@ -57,6 +60,7 @@ export const matchHash = (path, routes = []) => {
     const route = routes[i]
     route.path = normalizePath(route.path)
     if (route.path === path) {
+      route.params = {}
       matchingRoute = route
     } else if (route.path.indexOf(':') > -1) {
       // match dynamic route parts
@@ -96,6 +100,9 @@ export const matchHash = (path, routes = []) => {
 
   if (matchingRoute) {
     matchingRoute.options = { ...matchingRoute.options, ...overrideOptions }
+    if (!matchingRoute.data) {
+      matchingRoute.data = {}
+    }
     currentRoute = matchingRoute
   }
 
@@ -107,9 +114,20 @@ export const navigate = async function () {
   if (this.parent[symbols.routes]) {
     const previousRoute = currentRoute
     const hash = getHash()
-    const route = matchHash(hash, this.parent[symbols.routes])
-
+    let route = matchHash(hash, this.parent[symbols.routes])
+    let beforeHookOutput
     if (route) {
+      if (route.hooks) {
+        if (route.hooks.before) {
+          beforeHookOutput = await route.hooks.before(route, previousRoute)
+          if (isString(beforeHookOutput)) {
+            currentRoute = previousRoute
+            to(beforeHookOutput)
+            return
+          }
+        }
+      }
+      route = isObject(beforeHookOutput) ? beforeHookOutput : route
       // add the previous route (technically still the current route at this point)
       // into the history stack, unless navigating back or inHistory flag of route is false
       if (navigatingBack === false && previousRoute && previousRoute.options.inHistory === true) {
@@ -134,8 +152,8 @@ export const navigate = async function () {
         holder.populate({})
         holder.set('w', '100%')
         holder.set('h', '100%')
-        // merge props with potential route params to be injected into the component instance
-        const props = { ...this[symbols.props], ...route.params, ...navigationData }
+        // merge props with potential route params, navigation data and route data to be injected into the component instance
+        const props = { ...this[symbols.props], ...route.params, ...navigationData, ...route.data }
 
         view = await route.component({ props }, holder, this)
         if (view[Symbol.toStringTag] === 'Module') {