@lightningjs/blits 0.7.4 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# 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
 
 _28 feb 2024_

package/package.json

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

package/src/application.d.ts

@@ -35,7 +35,7 @@ declare namespace Application {
     /**
      * Easing function to apply to the transition
      */
-    function?: string,
+    easing?: string,
     /**
      * Delay before the transition starts in milliseconds
      */

package/src/element.js

@@ -21,6 +21,21 @@ import colors from './lib/colors/colors.js'
 import { Log } from './lib/log.js'
 import symbols from './lib/symbols.js'
 
+const deprecationMsg = `
+----------------------------------------------------------------------------------------------------
+Deprecation notice:
+----------------------------------------------------------------------------------------------------
+
+The property for defining a transition easing function has been renamed from "function" to "easing".
+
+Please update your code like the example below to keep your custom easing function.
+
+Before: <Element :y.transition=“{v: $y, function: ‘ease-in-out’}” />
+
+After: <Element :y.transition=“{v: $y, easing: ‘ease-in-out’}” />
+
+`
+
 const isTransition = (value) => {
   return typeof value === 'object' && 'transition' in value
 }
@@ -307,7 +322,9 @@ const Element = {
       easing:
         typeof transition === 'object'
           ? 'function' in transition
-            ? transition.function
+            ? Log.warn(deprecationMsg)
+            : 'easing' in transition
+            ? transition.easing
             : 'ease'
           : 'ease',
       delay: typeof transition === 'object' ? ('delay' in transition ? transition.delay : 0) : 0,

package/src/lib/setup/base.js

@@ -62,12 +62,8 @@ export default (component, name) => {
     destroy: {
       value: function () {
         this.lifecycle.state = 'destroy'
-        for (let i = 0; i < this[symbols.timeouts].length; i++) {
-          clearTimeout(this[symbols.timeouts][i])
-        }
-        for (let i = 0; i < this[symbols.intervals].length; i++) {
-          clearInterval(this[symbols.intervals][i])
-        }
+        this.$clearTimeouts()
+        this.$clearIntervals()
         eventListeners.removeListeners(this)
         deleteChildren(this[symbols.children])
         Log.debug(`Destroyed component ${this.componentId}`)
@@ -176,6 +172,17 @@ export default (component, name) => {
       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)
@@ -197,6 +204,17 @@ export default (component, name) => {
       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)