@lightningjs/blits 1.48.0 → 2.0.0-beta.2

package/index.d.ts

@@ -18,6 +18,10 @@
 // blits file type reference
 /// <reference path="./blits.d.ts" />
 
+import {type ShaderEffect as RendererShaderEffect, type RendererMainSettings} from '@lightningjs/renderer'
+import { CanvasShaderType } from '@lightningjs/renderer/canvas';
+import { WebGlShaderType } from '@lightningjs/renderer/webgl';
+
 declare module '@lightningjs/blits' {
   type RendererShaderEffect = import('@lightningjs/renderer').ShaderEffect
   type WebGlCoreShader = import('@lightningjs/renderer').WebGlCoreShader
@@ -389,7 +393,7 @@ declare module '@lightningjs/blits' {
     *
     * @returns Boolean
     */
-    hasFocus: boolean,
+    readonly $hasFocus: boolean,
 
     /**
     * Listen to events emitted by other components
@@ -478,12 +482,6 @@ declare module '@lightningjs/blits' {
      * @returns Returns true if this component or a parent component handled the event, false otherwise
      */
     $input: (event: KeyboardEvent) => boolean
-    /**
-     * @deprecated
-     * Deprecated:  use `this.$focus()` instead
-     */
-    focus: (event?: KeyboardEvent) => void
-
     /**
     * Select a child Element or Component by ref
     *
@@ -501,12 +499,6 @@ declare module '@lightningjs/blits' {
     */
     $select: (ref: string) => ComponentBase
 
-    /**
-     * @deprecated
-     * Deprecated: use `this.$select()` instead
-     */
-    select: (ref: string) => ComponentBase
-
     /**
      * Announcer methods for screen reader support
      */
@@ -516,13 +508,6 @@ declare module '@lightningjs/blits' {
      * Triggers a forced update on state variables.
      */
     $trigger: (key: string) => void
-    /**
-     * @deprecated
-     *
-     * Triggers a forced update on state variables.
-     * Deprecated: use `this.$trigger()` instead
-     */
-    trigger: (key: string) => void
     /**
      * Router instance
      */
@@ -572,20 +557,22 @@ declare module '@lightningjs/blits' {
     cast?: () => any
   };
 
-  // Props Array
-  export type Props = (string | PropObject)[];
+  export type Props = Record<string, any>
 
-  // Extract the prop names from the props array
-  type ExtractPropNames<P extends Props> = {
-      readonly [K in P[number] as K extends string ? K : K extends { key: infer Key } ? Key : never]: any;
-  };
+  type InferProp<T> = T extends (...args: any[]) => any ? ReturnType<T> : T
 
-  // Update the PropsDefinition to handle props as strings or objects
-  export type PropsDefinition<P extends Props> = ExtractPropNames<P>;
+  type InferProps<T extends Record<string, any>> = {
+    [K in keyof T]: InferProp<T[K]>
+  }
 
-  export type ComponentContext<P extends Props, S, M, C> = ThisType<PropsDefinition<P> & S & M & C & ComponentBase>
+  export type ComponentContext<
+    P extends Record<string, any>,
+    S,
+    M,
+    C
+  > = ThisType<Readonly<InferProps<P>> & S & M & Readonly<C> & ComponentBase>
 
-  export interface ComponentConfig<P extends Props, S, M, C, W> {
+  export interface ComponentConfig<P extends Props = {}, S, M, C, W> {
     components?: {
         [key: string]: ComponentFactory,
     },
@@ -641,7 +628,7 @@ declare module '@lightningjs/blits' {
      * }
      * ```
      */
-    state?: (this: PropsDefinition<P>) => S;
+    state?: (this: InferProps<P>) => S;
     /**
      * Methods for abstracting more complex business logic into separate function
      */
@@ -930,7 +917,7 @@ declare module '@lightningjs/blits' {
 
   type Shader = {
     name: string,
-    type: WebGlCoreShader
+    type: WebGlShaderType | CanvasShaderType
   }
 
   type ScreenResolutions = 'hd' | '720p' | 720 | 'fhd' | 'fullhd' | '1080p' | 1080 | '4k' | '2160p' | 2160
@@ -966,10 +953,6 @@ declare module '@lightningjs/blits' {
      * Fonts to be used in the Application
      */
     fonts?: Font[],
-    /**
-     * Effects to be used by DynamicShader
-     */
-    effects?: ShaderEffect[],
     /**
      * Shaders to be used in the application
      */
@@ -1102,18 +1085,6 @@ declare module '@lightningjs/blits' {
      * Defaults to `0`
      */
     viewportMargin?: number | [number, number, number, number],
-    /**
-     * Threshold in `Megabytes` after which all the textures that are currently not visible
-     * within the configured viewport margin will be be freed and cleaned up
-     *
-     * When passed `0` the threshold is disabled and textures will not be actively freed
-     * and cleaned up
-     *
-     * Defaults to `200` (mb)
-     * @deprecated
-     * Deprecated:  use `gpuMemory` launch setting instead
-     */
-    gpuMemoryLimit?: number,
     /**
      * Configures the gpu memory settings used by the renderer
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.48.0",
+  "version": "2.0.0-beta.2",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -35,6 +35,7 @@
     "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",
+    "test:run:failures": "node -r global-jsdom/register ./node_modules/.bin/tape '{,!(node_modules|packages)/**/}*.test.js' |  tap-filter test-fail | tap-diff",
     "lint": "node scripts/lint.js",
     "lint:fix": "node scripts/lint.js fix",
     "prepublishOnly": "node scripts/prepublishOnly.js",
@@ -70,11 +71,11 @@
     "prettier": "^3.6.2",
     "sinon": "^21.0.0",
     "tap-diff": "^0.1.1",
+    "tap-filter": "^1.0.3",
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/msdf-generator": "^1.2.0",
-    "@lightningjs/renderer": "^2.21.0",
+    "@lightningjs/renderer": "3.0.0-beta21",
     "magic-string": "^0.30.21"
   },
   "repository": {

package/src/component/base/methods.js

@@ -26,26 +26,14 @@ import { renderer } from '../../launch.js'
 import { keyMap } from '../../application.js'
 
 export default {
-  focus: {
-    /**
-     * @this {import('../../component').BlitsComponent}
-     */
-    value: function (e) {
-      Log.warn('this.focus is deprecated, use this.$focus instead')
-      return this.$focus(e)
-    },
-    writable: false,
-    enumerable: true,
-    configurable: false,
-  },
   $focus: {
     /**
      * @this {import('../../component').BlitsComponent}
      */
     value: function (e) {
       // force refocus when the component is already in focused state
-      if (this.lifecycle.state === 'focus') {
-        this.lifecycle.state = 'refocus'
+      if (this[symbols.lifecycle].state === 'focus') {
+        this[symbols.lifecycle].state = 'refocus'
       }
       Focus.set(this, e)
     },
@@ -93,8 +81,8 @@ export default {
      * @this {import('../../component').BlitsComponent}
      */
     value: function () {
-      this[symbols.state].hasFocus = false
-      this.lifecycle.state = 'unfocus'
+      this[symbols.state].$hasFocus = false
+      this[symbols.lifecycle].state = 'unfocus'
     },
     writable: false,
     enumerable: true,
@@ -106,11 +94,11 @@ export default {
      */
     value: function () {
       this.eol = true
-      this.lifecycle.state = 'destroy'
+      this[symbols.lifecycle].state = 'destroy'
 
       // when destroying a component that currently has focus
       // pass focus to the parent so we don't get lost in focus limbo
-      if (this.hasFocus === true) this.parent.$focus()
+      if (this.$hasFocus === true) this[symbols.parent].$focus()
 
       // @todo - is this really necessary?
       // This cause an issue with auto sizing of parent (and required an extra eol check there)
@@ -143,26 +131,25 @@ export default {
       this[symbols.state] = {}
 
       this[symbols.props] = {}
-      this[symbols.computed] = null
-      this.lifecycle = {}
+      this[symbols.computedKeys] = null
+      this[symbols.lifecycle] = {}
       this[symbols.effects].length = 0
-      this.parent = null
-      this.rootParent = null
+      this[symbols.parent] = null
+      this[symbols.rootParent] = null
       this[symbols.wrapper] = null
       this[symbols.originalState] = null
       this[symbols.slots].length = 0
 
-      delete this[symbols.computed]
-      delete this.parent
-      delete this.rootParent
+      delete this[symbols.computedKeys]
+      delete this[symbols.parent]
+      delete this[symbols.rootParent]
       delete this[symbols.wrapper]
       delete this[symbols.originalState]
       delete this[symbols.children]
       delete this[symbols.slots]
-      delete this.componentId
       delete this[symbols.id]
       delete this.ref
-      delete this[symbols.state].hasFocus
+      delete this[symbols.state].$hasFocus
 
       this[symbols.holder].destroy()
       this[symbols.holder] = null
@@ -173,7 +160,8 @@ export default {
 
       delete this[symbols.effects]
 
-      Log.debug(`Destroyed component ${this.componentId}`)
+      Log.debug(`Destroyed component ${this.$componentId}`)
+      delete this.$componentId
     },
     writable: false,
     enumerable: true,
@@ -190,18 +178,6 @@ export default {
     enumerable: false,
     configurable: false,
   },
-  select: {
-    /**
-     * @this {import('../../component').BlitsComponent}
-     */
-    value: function (ref) {
-      Log.warn('this.select is deprecated, use this.$select instead')
-      return this.$select(ref)
-    },
-    writable: false,
-    enumerable: true,
-    configurable: false,
-  },
   $select: {
     /**
      * @this {import('../../component').BlitsComponent}
@@ -230,18 +206,6 @@ export default {
     enumerable: true,
     configurable: false,
   },
-  trigger: {
-    /**
-     * @this {import('../../component').BlitsComponent}
-     */
-    value: function (key) {
-      Log.warn('this.trigger is deprecated, use this.$trigger instead')
-      return this.$trigger(key)
-    },
-    writable: false,
-    enumerable: true,
-    configurable: false,
-  },
   $trigger: {
     /**
      * @this {import('../../component').BlitsComponent}
@@ -263,30 +227,6 @@ export default {
     enumerable: true,
     configurable: false,
   },
-  shader: {
-    /**
-     * @this {import('../../component').BlitsComponent}
-     */
-    value: function (type, args) {
-      return {
-        type: type,
-        props: args,
-      }
-      // const shaders = renderer.driver.stage.shManager.getRegisteredEffects()
-
-      // if (target in shaders) {
-      //   return {
-      //     type: target,
-      //     props: args,
-      //   }
-      // } else {
-      //   Log.error(`Shader ${type} not found`)
-      // }
-    },
-    writable: false,
-    enumerable: true,
-    configurable: false,
-  },
 }
 
 /**

package/src/component/base/utils.js

@@ -29,6 +29,20 @@ export default {
     enumerable: true,
     configurable: false,
   },
+  $parent: {
+    get: function () {
+      return this[symbols.parent]
+    },
+    enumerable: true,
+    configurable: false,
+  },
+  $id: {
+    get: function () {
+      return this[symbols.id]
+    },
+    enumerable: true,
+    configurable: false,
+  },
   [symbols.renderer]: {
     value: () => renderer,
     writable: false,
@@ -37,7 +51,7 @@ export default {
   },
   [symbols.getChildren]: {
     value() {
-      const parent = this.rootParent || this.parent
+      const parent = this[symbols.rootParent] || this[symbols.parent]
       return (this[symbols.children] || []).concat(
         (parent &&
           parent[symbols.getChildren]()
@@ -46,7 +60,7 @@ export default {
                 return Object.values(child).map((c) => {
                   // ugly hack .. but the point is to reference the right component
                   c.forComponent =
-                    c[Symbol.for('config')] && c[Symbol.for('config')].parent.component
+                    c[Symbol.for('config')] && c[Symbol.for('config')][symbols.parent].component
                   return c
                 })
               }
@@ -57,8 +71,8 @@ export default {
               // problem is that component of a forloop in a slot has component of root component
               if (child && child.component) {
                 return (
-                  (child.component && child.component.componentId === this.componentId) ||
-                  (child.forComponent && child.forComponent.componentId === this.componentId)
+                  (child.component && child.component.$componentId === this.$componentId) ||
+                  (child.forComponent && child.forComponent.$componentId === this.$componentId)
                 )
               }
             })) ||

package/src/component/setup/props.js

@@ -16,46 +16,55 @@
  */
 
 import { Log } from '../../lib/log.js'
-
 import symbols from '../../lib/symbols.js'
 
-const baseProp = {
-  cast: (v) => v,
-  required: false,
+const normalizeProps = (props) => {
+  Log.warn(
+    'Defining props as an Array has been deprecated and will stop working in future versions. Please use the new notation instead (an object with key values pairs).',
+    props
+  )
+  const out = {}
+  const propLength = props.length
+  for (let i = 0; i < propLength; i++) {
+    const prop = props[i]
+    if (typeof prop === 'string') {
+      out[prop] = undefined
+    } else {
+      Log.error(
+        'Defining props as an array of objects is no longer supported. Please use the new format: an object with key-value pairs.'
+      )
+      break
+    }
+  }
+  return out
 }
 
-export default (component, props = []) => {
-  if (props.indexOf('ref') === -1) {
-    props.push('ref')
+export default (component, props = {}) => {
+  if (Array.isArray(props) === true) {
+    props = normalizeProps(props)
+  }
+  if (!('ref' in props)) {
+    props.ref = undefined
   }
-  component[symbols.propKeys] = []
+  const keys = Object.keys(props)
+  component[symbols.propKeys] = keys
 
-  const propsLength = props.length
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const defaultPropValue = props[key]
 
-  for (let i = 0; i < propsLength; i++) {
-    const prop = { ...baseProp, ...(typeof props[i] === 'object' ? props[i] : { key: props[i] }) }
-    component[symbols.propKeys].push(prop.key)
-    Object.defineProperty(component, prop.key, {
+    Object.defineProperty(component, key, {
       get() {
-        const value = prop.cast(
-          this[symbols.props] !== undefined && prop.key in this[symbols.props]
-            ? this[symbols.props][prop.key]
-            : 'default' in prop
-              ? prop.default
-              : undefined
-        )
-
-        if (prop.required === true && value === undefined) {
-          Log.warn(`${prop.key} is required`)
-        }
-
-        return value
+        if (this[symbols.props] === undefined) return undefined
+        // if the key is specified independent of the value (falsy, null, undefined) use that value
+        // otherwise return the default prop value
+        return key in this[symbols.props] ? this[symbols.props][key] : defaultPropValue
       },
       set(v) {
         Log.warn(
-          `Warning! Avoid mutating props directly (prop "${prop.key}" in component "${this.componentId}")`
+          `Warning! Avoid mutating props directly (prop "${key}" in component "${this.componentId}")`
         )
-        this[symbols.props][prop.key] = v
+        this[symbols.props][key] = v
       },
     })
   }

package/src/component/setup/state.js

@@ -28,13 +28,13 @@ export default (component, state = () => {}) => {
   })
 
   const stateKeys = Object.keys(state.apply(component) || {})
-  if (stateKeys.indexOf('hasFocus') > -1) {
+  if (stateKeys.indexOf('$hasFocus') > -1) {
     Log.warn(
-      'State `hasFocus` already exists as a built-in Component variable (to indicate whether the component currently has focus). Avoid using your own `hasFocus` key in the Component state'
+      'State `$hasFocus` already exists as a built-in Component variable (to indicate whether the component currently has focus). Avoid using your own `$hasFocus` key in the Component state'
     )
   } else {
-    // add built-in hasFocus key
-    stateKeys.push(['hasFocus'])
+    // add built-in $hasFocus key
+    stateKeys.push('$hasFocus')
   }
   const stateKeysLength = stateKeys.length
 

package/src/component.js

@@ -135,7 +135,7 @@ const required = (name) => {
  * @property {any[]} [stateKeys] - The keys of the state of the component instance
  * Single props:
  * @property {object} activeView - The active view of the component instance
- * @property {boolean} hasFocus - Indicates if the component has focus
+ * @property {boolean} $hasFocus - Indicates if the component has focus
  * @property {string} ref - The reference name of the component instance
  * @property {number|undefined} index - The index in a for loop
  * @property {number|undefined} activeRow - The active row in a for loop
@@ -194,22 +194,23 @@ const Component = (name = required('name'), config = required('config')) => {
 
   const component = function (opts, parentEl, parentComponent, rootComponent) {
     // generate a human readable ID for the component instance (i.e. Blits::ComponentName1)
-    this.componentId = createHumanReadableId(name)
+    this.$componentId = createHumanReadableId(name)
+
+    this[symbols.effects] = []
 
     this[symbols.effects] = []
 
     // instantiate a lifecycle object for this instance
-    this.lifecycle = Object.assign(Object.create(Lifecycle), {
+    this[symbols.lifecycle] = Object.assign(Object.create(Lifecycle), {
       component: this,
       previous: null,
       current: null,
     })
 
     // set a reference to the parent component
-    this.parent = parentComponent
+    this[symbols.parent] = parentComponent
 
-    //
-    this.rootParent = rootComponent
+    this[symbols.rootParent] = rootComponent
 
     // set a reference to the holder / parentElement
     // Components are wrapped in a holder node (used to apply positioning and transforms
@@ -235,19 +236,19 @@ const Component = (name = required('name'), config = required('config')) => {
     // and store a reference to this original state
     this[symbols.originalState] =
       (config.state && typeof config.state === 'function' && config.state.apply(this)) || {}
-    // add hasFocus key in
-    this[symbols.originalState]['hasFocus'] = false
+    // add $hasFocus key in
+    this[symbols.originalState]['$hasFocus'] = false
 
     // generate a reactive state (using the result of previously execute state function)
     // and store it
     this[symbols.state] = reactive(this[symbols.originalState], Settings.get('reactivityMode'))
 
     // all basic setup has been done now, set the lifecycle to state 'init'
-    this.lifecycle.state = 'init'
+    this[symbols.lifecycle].state = 'init'
 
     // execute the render code that constructs the initial state of the component
     // and store the children result (a flat map of elements and components)
-    const { elms, cleanup } = config.code.render.apply(stage, [
+    const { elms, cleanup, skips } = config.code.render.apply(stage, [
       parentEl,
       this,
       config,
@@ -300,28 +301,28 @@ const Component = (name = required('name'), config = required('config')) => {
       // inBounds event emiting a lifecycle attach event
       if (config.hooks.attach) {
         this[symbols.wrapper].node.on('inBounds', () => {
-          this.lifecycle.state = 'attach'
+          this[symbols.lifecycle].state = 'attach'
         })
       }
 
       // outOfBounds event emiting a lifeycle detach event
       if (config.hooks.detach) {
         this[symbols.wrapper].node.on('outOfBounds', (node, { previous }) => {
-          if (previous > 0) this.lifecycle.state = 'detach'
+          if (previous > 0) this[symbols.lifecycle].state = 'detach'
         })
       }
 
       // inViewport event emiting a lifecycle enter event
       if (config.hooks.enter) {
         this[symbols.wrapper].node.on('inViewport', () => {
-          this.lifecycle.state = 'enter'
+          this[symbols.lifecycle].state = 'enter'
         })
       }
 
       // outOfViewport event emitting a lifecycle exit event
       if (config.hooks.exit) {
         this[symbols.wrapper].node.on('outOfBounds', () => {
-          this.lifecycle.state = 'exit'
+          this[symbols.lifecycle].state = 'exit'
         })
       }
     }
@@ -331,7 +332,15 @@ const Component = (name = required('name'), config = required('config')) => {
     const effects = config.code.effects
     for (let i = 0; i < effects.length; i++) {
       const eff = () => {
-        effects[i](this, this[symbols.children], config, globalComponents, rootComponent, effect)
+        effects[i](
+          this,
+          this[symbols.children],
+          config,
+          globalComponents,
+          rootComponent,
+          skips,
+          effect
+        )
       }
       // store reference to the effect
       this[symbols.effects].push(eff)
@@ -355,7 +364,7 @@ const Component = (name = required('name'), config = required('config')) => {
           }
         }
 
-        let old = this[key]
+        let old = target[key]
 
         const eff = (force = false) => {
           const newValue = target[key]
@@ -372,7 +381,7 @@ const Component = (name = required('name'), config = required('config')) => {
     }
 
     // finaly set the lifecycle state to ready (in the next tick)
-    setTimeout(() => (this.lifecycle.state = 'ready'))
+    setTimeout(() => (this[symbols.lifecycle].state = 'ready'))
 
     // and return this
     return this