@lightningjs/blits 1.8.1 → 1.8.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## v1.8.3
+
+_31 oct 2024_
+
+- Exported TS interfaces and improved return type of before route hook
+- Fixed test cases for codegenerator
+
+
+## v1.8.2
+
+_30 oct 2024_
+
+- Fixed edge case issue with array based props not triggering reactivity
+
+
 ## v1.8.1
 
 _29 oct 2024_

package/index.d.ts

@@ -19,7 +19,7 @@ import {type ShaderEffect as RendererShaderEffect, type WebGlCoreShader} from '@
 
 declare module '@lightningjs/blits' {
 
-  interface Hooks {
+  export interface Hooks {
     /**
     * Fires when the Component is being instantiated
     * At this moment child elements will not be available yet
@@ -77,7 +77,7 @@ declare module '@lightningjs/blits' {
     exit?: () => void;
   }
 
-  interface Input {
+  export interface Input {
     [key: string]: (event: KeyboardEvent) => void | undefined,
     /**
      * Catch all input function
@@ -88,7 +88,7 @@ declare module '@lightningjs/blits' {
     any?: (event: KeyboardEvent) => void
   }
 
-  interface Log {
+  export interface Log {
     /**
     * Log an info message
     */
@@ -109,16 +109,16 @@ declare module '@lightningjs/blits' {
 
 
 
-  interface RouteData {
+  export interface RouteData {
     [key: string]: any
   }
 
   // todo: specify valid route options
-  interface RouteOptions {
+  export interface RouteOptions {
     [key: string]: any
   }
 
-  interface Router {
+  export interface Router {
     /**
      * Navigate to a different location
      *
@@ -148,7 +148,7 @@ declare module '@lightningjs/blits' {
 
   }
 
-  type ComponentBase = {
+  export type ComponentBase = {
     /**
     * Listen to events emitted by other components
     */
@@ -246,7 +246,7 @@ declare module '@lightningjs/blits' {
   /**
    * Prop object
    */
-  type PropObject = {
+  export type PropObject = {
     /**
      * Name of the prop
      */
@@ -274,7 +274,7 @@ declare module '@lightningjs/blits' {
   };
 
   // Props Array
-  type Props = (string | PropObject)[];
+  export type Props = (string | PropObject)[];
 
   // Extract the prop names from the props array
   type ExtractPropNames<P extends Props> = {
@@ -282,11 +282,11 @@ declare module '@lightningjs/blits' {
   };
 
   // Update the PropsDefinition to handle props as strings or objects
-  type PropsDefinition<P extends Props> = ExtractPropNames<P>;
+  export type PropsDefinition<P extends Props> = ExtractPropNames<P>;
 
-  type ComponentContext<P extends Props, S, M, C> = ThisType<PropsDefinition<P> & S & M & C & ComponentBase>
+  export type ComponentContext<P extends Props, S, M, C> = ThisType<PropsDefinition<P> & S & M & C & ComponentBase>
 
-  interface ComponentConfig<P extends Props, S, M, C, W> {
+  export interface ComponentConfig<P extends Props, S, M, C, W> {
     components?: {
         [key: string]: ComponentFactory,
     },
@@ -365,7 +365,7 @@ declare module '@lightningjs/blits' {
     watch?: W & ComponentContext<P, S, M, C>
   }
 
-  interface ApplicationConfig<P extends Props, S, M, C, W> extends ComponentConfig<P, S, M, C, W> {
+  export interface ApplicationConfig<P extends Props, S, M, C, W> extends ComponentConfig<P, S, M, C, W> {
     /**
      * Routes definition
      *
@@ -383,7 +383,7 @@ declare module '@lightningjs/blits' {
   }
 
 
-  interface Transition {
+  export interface Transition {
     /**
      * Name of the prop to transition (i.e. 'x', 'y', 'alpha', 'color')
      */
@@ -406,7 +406,7 @@ declare module '@lightningjs/blits' {
     delay?: number
   }
 
-  interface Before {
+  export interface Before {
     /**
     * Name of the prop to set before the transition starts
     */
@@ -417,7 +417,7 @@ declare module '@lightningjs/blits' {
     value: any,
   }
 
-  interface RouteTransition {
+  export interface RouteTransition {
     /**
      * Setting or Array of Settings before new view enters into the router view
      */
@@ -432,9 +432,9 @@ declare module '@lightningjs/blits' {
     out: Transition | Transition[],
   }
 
-  type RouteTransitionFunction = (previousRoute: Route, currentRoute: Route) => RequireAtLeastOne<RouteTransition>
+  export type RouteTransitionFunction = (previousRoute: Route, currentRoute: Route) => RequireAtLeastOne<RouteTransition>
 
-  interface RouteAnnounce {
+  export interface RouteAnnounce {
     /**
      * Message to be announced
      */
@@ -447,15 +447,15 @@ declare module '@lightningjs/blits' {
     politeness?: 'off' | 'polite' | 'assertive'
   }
 
-  type RequireAtLeastOne<T> = {
+  export type RequireAtLeastOne<T> = {
     [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;
+  export interface RouteHooks {
+    before?: (to: Route, from: Route) => string | Route | Promise<string | Route>;
   }
 
-  type Route = {
+  export type Route = {
     /**
      * URI path for the route
      */
@@ -575,7 +575,7 @@ declare module '@lightningjs/blits' {
    * Launcher function that sets up the Lightning renderer and instantiates
    * the Blits App
    */
-  interface Settings {
+  export interface Settings {
     /**
      * Width of the Application
      */

package/package.json

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

package/src/components/Circle.js

@@ -25,6 +25,7 @@ export default () =>
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)

package/src/components/FPScounter.js

@@ -27,6 +27,7 @@ export default () =>
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)
@@ -142,7 +143,11 @@ export default () =>
         props7['w'] = 20
         props7['map'] = component.sprite
 
-        props7['frame'] = component.fps[0]
+        propData = component.fps[0]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props7['frame'] = propData
 
         componentType = props7['is'] || 'Sprite'
 
@@ -200,7 +205,11 @@ export default () =>
         props9['w'] = 20
         props9['map'] = component.sprite
 
-        props9['frame'] = component.fps[1]
+        propData = component.fps[1]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props9['frame'] = propData
 
         componentType = props9['is'] || 'Sprite'
 
@@ -258,7 +267,11 @@ export default () =>
         props11['w'] = 20
         props11['map'] = component.sprite
 
-        props11['frame'] = component.fps[2]
+        propData = component.fps[2]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props11['frame'] = propData
 
         componentType = props11['is'] || 'Sprite'
 
@@ -390,7 +403,11 @@ export default () =>
         props17['w'] = 20
         props17['map'] = component.sprite
 
-        props17['frame'] = component.avgFps[0]
+        propData = component.avgFps[0]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props17['frame'] = propData
 
         componentType = props17['is'] || 'Sprite'
 
@@ -448,7 +465,11 @@ export default () =>
         props19['w'] = 20
         props19['map'] = component.sprite
 
-        props19['frame'] = component.avgFps[1]
+        propData = component.avgFps[1]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props19['frame'] = propData
 
         componentType = props19['is'] || 'Sprite'
 
@@ -506,7 +527,11 @@ export default () =>
         props21['w'] = 20
         props21['map'] = component.sprite
 
-        props21['frame'] = component.avgFps[2]
+        propData = component.avgFps[2]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props21['frame'] = propData
 
         componentType = props21['is'] || 'Sprite'
 
@@ -639,7 +664,11 @@ export default () =>
         props27['w'] = 20
         props27['map'] = component.sprite
 
-        props27['frame'] = component.minFps[0]
+        propData = component.minFps[0]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props27['frame'] = propData
 
         componentType = props27['is'] || 'Sprite'
 
@@ -697,7 +726,11 @@ export default () =>
         props29['w'] = 20
         props29['map'] = component.sprite
 
-        props29['frame'] = component.minFps[1]
+        propData = component.minFps[1]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props29['frame'] = propData
 
         componentType = props29['is'] || 'Sprite'
 
@@ -755,7 +788,11 @@ export default () =>
         props31['w'] = 20
         props31['map'] = component.sprite
 
-        props31['frame'] = component.minFps[2]
+        propData = component.minFps[2]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props31['frame'] = propData
 
         componentType = props31['is'] || 'Sprite'
 
@@ -886,7 +923,11 @@ export default () =>
         props37['w'] = 20
         props37['map'] = component.sprite
 
-        props37['frame'] = component.maxFps[0]
+        propData = component.maxFps[0]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props37['frame'] = propData
 
         componentType = props37['is'] || 'Sprite'
 
@@ -944,7 +985,11 @@ export default () =>
         props39['w'] = 20
         props39['map'] = component.sprite
 
-        props39['frame'] = component.maxFps[1]
+        propData = component.maxFps[1]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props39['frame'] = propData
 
         componentType = props39['is'] || 'Sprite'
 
@@ -1002,7 +1047,11 @@ export default () =>
         props41['w'] = 20
         props41['map'] = component.sprite
 
-        props41['frame'] = component.maxFps[2]
+        propData = component.maxFps[2]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props41['frame'] = propData
 
         componentType = props41['is'] || 'Sprite'
 

package/src/components/Layout.js

@@ -8,6 +8,7 @@ export default () => {
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)

package/src/components/RouterView.js

@@ -28,6 +28,7 @@ export default () =>
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)

package/src/components/Sprite.js

@@ -27,6 +27,7 @@ export default () =>
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)

package/src/lib/codegenerator/generator.js

@@ -19,7 +19,12 @@ let counter
 
 export default function (templateObject = { children: [] }) {
   const ctx = {
-    renderCode: ['const elms = []', 'let componentType', 'const rootComponent = component'],
+    renderCode: [
+      'const elms = []',
+      'let componentType',
+      'const rootComponent = component',
+      'let propData',
+    ],
     effectsCode: [],
     context: { props: [], components: this.components },
   }
@@ -213,10 +218,11 @@ const generateComponentCode = function (
         options.component
       )}`)
       renderCode.push(`
-        props${counter}['${key.substring(1)}']=  ${interpolate(
-        templateObject[key],
-        options.component
-      )}`)
+        propData = ${interpolate(templateObject[key], options.component)}
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props${counter}['${key.substring(1)}'] = propData`)
     } else {
       renderCode.push(
         `props${counter}['${key}'] = ${cast(templateObject[key], key, options.component)}`