@lightningjs/blits 0.9.7 → 0.9.9

package/src/engines/L3/element.js

@@ -210,6 +210,9 @@ const Props = {
   set clipping(v) {
     this._props.clipping = v
   },
+  set overflow(v) {
+    this._props.clipping = !!!v
+  },
   set fontFamily(v) {
     this._props.fontFamily = v
   },
@@ -237,6 +240,10 @@ const Props = {
   set textAlign(v) {
     this._props.textAlign = v
   },
+  set rtt(v) {
+    this._props.rtt = v
+    this._set.add('rtt')
+  },
 }
 
 const Element = {
@@ -268,9 +275,12 @@ const Element = {
     // correct for default white nodes (but not for text nodes)
     if (!props.__textnode && !this.props._set.has('color')) {
       this.props._props.color =
-        this.props._set.has('src') || this.props._set.has('texture') ? 0xffffffff : 0
+        this.props._set.has('src') ||
+        this.props._set.has('texture') ||
+        (this.props._set.has('rtt') && this.props._props.rtt === true)
+          ? 0xffffffff
+          : 0
     }
-
     this.node = props.__textnode
       ? renderer.createTextNode(this.props._props)
       : renderer.createNode(this.props._props)
@@ -309,7 +319,8 @@ const Element = {
       }
     }
   },
-  animate(prop, value, transition) {
+  async animate(prop, value, transition) {
+    // if current value is the same as the value to animate to, instantly resolve
     if (this.node[prop] === value) return Promise.resolve()
     // check if a transition is already scheduled or running on the same prop
     if (this.scheduledTransitions[prop]) {
@@ -342,39 +353,37 @@ const Element = {
       delay: typeof transition === 'object' ? ('delay' in transition ? transition.delay : 0) : 0,
     })
 
-    // schedule transition
-    return new Promise((resolve) => {
-      const startValue = this.node[prop]
-      this.scheduledTransitions[prop] = {
-        v: props[prop],
-        cancel: false,
-        f,
-      }
+    // capture the current value to be used in the transition start
+    const startValue = this.node[prop]
 
-      try {
-        f.start()
-          .waitUntilStarted()
-          .then((animation) => {
-            // fire transition start callback if specified
-            transition.start &&
-              typeof transition.start === 'function' &&
-              transition.start.call(this.component, this, prop, startValue)
-            // continue the chain
-            animation
-              .waitUntilStopped()
-              .then(() => delete this.scheduledTransitions[prop])
-              .then(() => {
-                // fire transition end callback if specified
-                transition.end &&
-                  typeof transition.end === 'function' &&
-                  transition.end.call(this.component, this, prop, this.node[prop])
-              })
-              .then(resolve)
-          })
-      } catch (e) {
-        Log.error(e)
-      }
-    })
+    // schedule the transition for this prop, so it can be canceled /
+    // removed if another transition for the same prop starts in the mean time
+    this.scheduledTransitions[prop] = {
+      v: props[prop],
+      cancel: false,
+      f,
+    }
+
+    // wait until the animation really starts (depending on specified delay)
+    const animation = await f.start().waitUntilStarted()
+
+    // fire transition start callback if specified
+    transition.start &&
+      typeof transition.start === 'function' &&
+      transition.start.call(this.component, this, prop, startValue)
+
+    // wait until the animation ends
+    const finished = await animation.waitUntilStopped()
+
+    // removed the prop from scheduled transitions
+    delete this.scheduledTransitions[prop]
+
+    // fire transition end callback if specified
+    transition.end &&
+      typeof transition.end === 'function' &&
+      transition.end.call(this.component, this, prop, this.node[prop])
+
+    return Promise.resolve()
   },
   destroy() {
     Log.debug('Deleting  Node', this.nodeId)

package/src/engines/L3/launch.js

@@ -24,7 +24,7 @@ import fontLoader from './fontLoader.js'
 
 export let renderer
 
-export default (App, target, settings) => {
+export default (App, target, settings = {}) => {
   const driver = new MainCoreDriver()
   // settings.multithreaded === true
   //   ? new ThreadXRenderDriver({
@@ -62,6 +62,7 @@ You can remove the option from your \`src/index.js\`-file. And you can safely re
       // gpu memory limit, converted from mb to bytes - defaults to 200mb
       txMemByteThreshold:
         'gpuMemoryLimit' in settings ? settings.gpuMemoryLimit * 1024 * 1024 : 200 * 1024 * 1024,
+      renderMode: 'renderMode' in settings ? settings.renderMode : 'webgl',
     },
     target,
     driver

package/src/launch.d.ts

@@ -69,6 +69,7 @@ type Font = WebFont | SdfFont
 export type DebugLevel = 0 | 1 | 2
 export type LogTypes = 'info' | 'warn' | 'error' | 'debug'
 export type ReactivityModes = 'Proxy' | 'defineProperty'
+export type RenderModes = 'webgl' | 'canvas'
 
 interface ExtensionLoader {
   async (stage: Stage): void
@@ -216,7 +217,16 @@ export interface Settings {
    *
    * Defaults to `200` (mb)
    */
-  gpuMemoryLimit?: number
+  gpuMemoryLimit?: number,
+  /**
+   * Defines which mode the renderer should operate in: `webgl` or `canvas`
+   *
+   * SDF fonts are not supported in _canvas_ renderMode. Instead, _web_ fonts should
+   * be used. Also note that Canvas2d rendering doesnt support the use of shaders.
+   *
+   * Defaults to `webgl`
+   */
+  renderMode?: RenderModes
 }
 
 /**

package/src/lib/codegenerator/generator.js

@@ -29,8 +29,10 @@ export default function (templateObject = { children: [] }) {
   ctx.renderCode.push('return elms')
 
   return {
-    render: new Function('parent', 'component', 'context', ctx.renderCode.join('\n')),
-    effects: ctx.effectsCode.map((code) => new Function('component', 'elms', 'context', code)),
+    render: new Function('parent', 'component', 'context', 'components', ctx.renderCode.join('\n')),
+    effects: ctx.effectsCode.map(
+      (code) => new Function('component', 'elms', 'context', 'components', code)
+    ),
     context: ctx.context,
   }
 }
@@ -119,8 +121,7 @@ const generateComponentCode = function (
     const cmp${counter} =
       (context.components && context.components['${
         templateObject[Symbol.for('componentType')]
-      }']) ||
-      component[Symbol.for('components')]['${templateObject[Symbol.for('componentType')]}']
+      }']) || components['${templateObject[Symbol.for('componentType')]}']
   `)
 
   if ('key' in templateObject) {
@@ -174,7 +175,7 @@ const generateComponentCode = function (
     templateObject[Symbol.for('componentType')]
   }'
 
-  ${elm} = (context.components && context.components[componentType] || component[Symbol.for('components')][componentType] || (() => { console.error('component ${
+  ${elm} = (context.components && context.components[componentType] || components[componentType] || (() => { console.error('component ${
     templateObject[Symbol.for('componentType')]
   } not found')})).call(null, {props: props${counter}}, ${parent}, component)
       if (${elm}[Symbol.for('slots')][0]) {
@@ -215,7 +216,7 @@ const generateForLoopCode = function (templateObject, parent) {
   }
 
   if (parent) {
-    ctx.renderCode.push(`parent = ${parent}`)
+    ctx.renderCode.push(`let parent = ${parent}`)
   }
 
   const forStartCounter = counter

package/src/router/router.js

@@ -253,13 +253,6 @@ const removeView = async (route, view, transition) => {
   if (route.options && route.options.keepAlive === true) {
     cacheMap.set(route, { view: view, focus: previousFocus })
   } else {
-    // remove and cleanup
-    for (let i = 0; i < view[symbols.children].length; i++) {
-      // if (view[symbols.children][i] && view[symbols.children][i].destroy) {
-      //   view[symbols.children][i].destroy()
-      view[symbols.children][i] = null
-      // }
-    }
     view.destroy()
     view = null
   }

package/src/lib/setup/base.js

@@ -1,284 +0,0 @@
-/*
- * Copyright 2023 Comcast Cable Communications Management, LLC
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { renderer } from '../../launch.js'
-import Focus from '../../focus.js'
-import { to, currentRoute, navigating, back } from '../../router/router.js'
-import Image from '../../components/Image.js'
-import Circle from '../../components/Circle.js'
-import RouterView from '../../components/RouterView.js'
-import Sprite from '../../components/Sprite.js'
-import Text from '../../components/Text.js'
-import FPScounter from '../../components/FPScounter.js'
-import eventListeners from '../eventListeners.js'
-import { default as log, Log } from '../log.js'
-import symbols from '../symbols.js'
-
-import { trigger } from '../reactivity/effect.js'
-import Announcer from '../../announcer/announcer.js'
-
-const shaderAlias = {
-  rounded: 'radius',
-}
-
-export default (component, name) => {
-  Object.defineProperties(component.prototype, {
-    name: {
-      value: name,
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    [symbols.identifier]: {
-      value: component[symbols.identifier],
-      writable: false,
-      enumerable: false,
-      configurable: false,
-    },
-    focus: {
-      value: function (e) {
-        this[symbols.state].hasFocus = true
-        Focus.set(this, e)
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    unfocus: {
-      value: function () {
-        this[symbols.state].hasFocus = false
-        this.lifecycle.state = 'unfocus'
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    destroy: {
-      value: function () {
-        this.lifecycle.state = 'destroy'
-        this.$clearTimeouts()
-        this.$clearIntervals()
-        eventListeners.removeListeners(this)
-        deleteChildren(this[symbols.children])
-        Log.debug(`Destroyed component ${this.componentId}`)
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    select: {
-      value: function (ref) {
-        let selected = null
-        this[symbols.children].forEach((child) => {
-          if (Array.isArray(child)) {
-            child.forEach((c) => {
-              if (c['ref'] === ref) selected = c
-            })
-          } else if (Object.getPrototypeOf(child) === Object.prototype) {
-            Object.keys(child).forEach((k) => {
-              if (child[k]['ref'] === ref) selected = child[k]
-            })
-          } else {
-            if (child['ref'] === ref) selected = child
-          }
-        })
-
-        return selected
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    shader: {
-      value: function (type, args) {
-        const target = shaderAlias[type] || type
-        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: false,
-      configurable: false,
-    },
-    $router: {
-      value: {
-        to,
-        back,
-        get currentRoute() {
-          return currentRoute
-        },
-        get routes() {
-          return component.prototype[symbols.routes]
-        },
-        get navigating() {
-          return navigating
-        },
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    [symbols.components]: {
-      value: {
-        Image: Image(),
-        Circle: Circle(),
-        RouterView: RouterView(),
-        Sprite: Sprite(),
-        Text: Text(),
-        FPScounter: FPScounter(),
-      },
-      writable: false,
-      enumerable: false,
-      configurable: false,
-    },
-    $setTimeout: {
-      value: function (fn, ms, ...params) {
-        const timeoutId = setTimeout(
-          () => {
-            this[symbols.timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
-            fn.apply(null, params)
-          },
-          ms,
-          params
-        )
-        this[symbols.timeouts].push(timeoutId)
-        return timeoutId
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    $clearTimeout: {
-      value: function (timeoutId) {
-        if (this[symbols.timeouts].indexOf(timeoutId) > -1) {
-          this[symbols.timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
-          clearTimeout(timeoutId)
-        }
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    $clearTimeouts: {
-      value: function () {
-        for (let i = 0; i < this[symbols.timeouts].length; i++) {
-          clearTimeout(this[symbols.timeouts][i])
-        }
-        this[symbols.timeouts] = []
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    $setInterval: {
-      value: function (fn, ms, ...params) {
-        const intervalId = setInterval(() => fn.apply(null, params), ms, params)
-        this[symbols.intervals].push(intervalId)
-        return intervalId
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    $clearInterval: {
-      value: function (intervalId) {
-        if (this[symbols.intervals].indexOf(intervalId) > -1) {
-          this[symbols.intervals] = this[symbols.intervals].filter((id) => id !== intervalId)
-          clearInterval(intervalId)
-        }
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    $clearIntervals: {
-      value: function () {
-        for (let i = 0; i < this[symbols.intervals].length; i++) {
-          clearInterval(this[symbols.intervals][i])
-        }
-        this[symbols.intervals] = []
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    $emit: {
-      value: function (event, params) {
-        eventListeners.executeListeners(event, params)
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    $listen: {
-      value: function (event, callback) {
-        eventListeners.registerListener(this, event, callback)
-      },
-      writable: false,
-      enumerable: true,
-      configurable: false,
-    },
-    [symbols.renderer]: {
-      value: renderer,
-      writable: false,
-      enumerable: false,
-      configurable: false,
-    },
-    $log: {
-      value: log('App'),
-      writable: false,
-      enumerable: false,
-      configurable: false,
-    },
-    $trigger: {
-      value: function (key) {
-        // trigger with force set to true
-        trigger(this[symbols.originalState], key, true)
-      },
-      writable: false,
-      enumerable: false,
-      configurable: false,
-    },
-    $announcer: {
-      value: Announcer,
-      writable: false,
-      enumerable: false,
-      configurable: false,
-    },
-  })
-}
-
-const deleteChildren = function (children) {
-  for (let i = 0; i < children.length; i++) {
-    if (!children[i]) return
-    if (Array.isArray(children[i])) {
-      deleteChildren(children[i])
-    } else if (children[i].destroy) {
-      children[i].destroy()
-    }
-    children[i] = null
-  }
-
-  children.length = 0
-}