@lightningjs/blits 0.7.4 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+# v0.8.1
+
+_9 mar 2024_
+
+- Added pre-processing of hardcoded colors used in the template
+- Upgraded Lightning renderer to v0.7.5
+- Removed explicit destroy of child nodes, as the renderer now takes care of this
+- Re-added support for clipping
+
+# 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.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -40,13 +40,12 @@
     "husky": "^7.0.4",
     "jsdom": "24.0.0",
     "lint-staged": "^12.3.3",
-    "ora": "^7.0.1",
     "prettier": "^2.5.1",
     "tap-diff": "^0.1.1",
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.7.4",
+    "@lightningjs/renderer": "^0.7.5",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",

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
 }
@@ -192,6 +207,9 @@ const Props = {
     })
     this._set.add('effects')
   },
+  set clipping(v) {
+    this._props.clipping = v
+  },
   set fontFamily(v) {
     this._props.fontFamily = v
   },
@@ -307,7 +325,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/colors/colors.js

@@ -19,52 +19,62 @@ import htmlColors from './htmlColors.js'
 import { Log } from '../log.js'
 
 export default {
-  normalize(color = '') {
+  // The defaultColor parameter should be set to null when utilizing this function within the template parser.
+  // Because the template parser evaluates attribute values, even if they are not color codes,
+  // to determine whether they represent color values or not.
+  normalize(color = '', defaultColor = '0xffffffff') {
     color = color.toString()
 
-    if (color.startsWith('0x')) {
-      return color
-    }
+    if (color.length > 0) {
+      const normalized = /^0x[0-9a-f]{8}$/
+      const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i
+      const rgba =
+        /^(rgba?)\((\s*(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\s*),(\s*(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\s*),(\s*(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\s*)(,(\s*(-?\d+(?:\.\d+)?)\s*))?\)$/
+      const hsla =
+        /^(hsla?)\((\s*(360|3[0-5][0-9]|[12]?[0-9]{1,2})\s*),(\s*(100|[1-9]?[0-9])\s*)%,(\s*(100|[1-9]?[0-9])\s*)%(,(\s*(1|0(?:\.\d+)?)\s*))?\)$/
+
+      if (normalized.test(color)) {
+        return color
+      }
 
-    const rgbaRegex = /rgba?\((.+)\)/gi
-    const hslaRegex = /hsla?\((.+)\)/gi
+      if (hex.test(color)) {
+        color = color.replace('#', '').toLowerCase()
+        if (color.length === 3) {
+          color = color
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        }
 
-    // RGB(A) color format
-    if (rgbaRegex.test(color)) {
-      const match = new RegExp(rgbaRegex).exec(color)
-      if (match[1]) {
-        color = match[1]
-          .split(',')
-          .map((c, i) => {
-            if (i == 3) {
-              c = Math.min(Math.max(Math.round(c * 255), 0), 255)
-            }
-            return parseInt(c).toString(16).padStart(2, '0')
-          })
-          .join('')
-        return color.padEnd(8, 'f').padStart(10, '0x')
+        return '0x' + color.padEnd(8, 'f')
+      }
+
+      //rgb/a
+      const rgbaMatch = rgba.exec(color)
+      if (rgbaMatch) {
+        return (
+          '0x' +
+          parseInt(rgbaMatch[3]).toString(16).padStart(2, '0') +
+          parseInt(rgbaMatch[5]).toString(16).padStart(2, '0') +
+          parseInt(rgbaMatch[7]).toString(16).padStart(2, '0') +
+          (rgbaMatch[10] && rgbaMatch[1] === 'rgba'
+            ? Math.min(Math.max(Math.round(parseFloat(rgbaMatch[10]) * 255), 0), 255)
+                .toString(16)
+                .padStart(2, '0')
+            : 'ff')
+        )
+      }
+
+      if (hsla.test(color)) {
+        Log.warn('HSL(A) color format is not supported yet')
+        return '0xffffffff'
+      }
+
+      if (color in htmlColors) {
+        return htmlColors[color]
       }
-    }
-    // HSL(A) color format
-    else if (hslaRegex.test(color)) {
-      Log.warn('HSL(A) color format is not supported yet')
-      return 0xffffffff
-    }
-    // HTMl name color format
-    else if (color in htmlColors) {
-      return htmlColors[color]
-    }
-    // hex rgba format
-    else if (color.startsWith('#')) {
-      color = color.substring(1)
-    }
-    if (color.length === 3) {
-      color = color
-        .split('')
-        .map((c) => c + c)
-        .join('')
     }
 
-    return color.padEnd(8, 'f').padStart(10, '0x')
+    return defaultColor
   },
 }

package/src/lib/colors/colors.test.js

@@ -27,8 +27,30 @@ test('Object', (assert) => {
 })
 
 test('6 character hex', (assert) => {
-  const input = ['#ffffff', '#000000', '#c0ffee', '#7dd3fc', '#0c4a6e']
-  const expected = ['0xffffffff', '0x000000ff', '0xc0ffeeff', '0x7dd3fcff', '0x0c4a6eff']
+  const input = [
+    '#ffffff',
+    '#000000',
+    '#c0ffee',
+    '#7dd3fc',
+    '#0c4a6e',
+    'ffffff',
+    '000000',
+    'c0ffee',
+    '7dd3fc',
+    '0c4a6e',
+  ]
+  const expected = [
+    '0xffffffff',
+    '0x000000ff',
+    '0xc0ffeeff',
+    '0x7dd3fcff',
+    '0x0c4a6eff',
+    '0xffffffff',
+    '0x000000ff',
+    '0xc0ffeeff',
+    '0x7dd3fcff',
+    '0x0c4a6eff',
+  ]
 
   const actual = input.map(colors.normalize)
 
@@ -41,8 +63,15 @@ test('6 character hex', (assert) => {
 })
 
 test('3 character hex', (assert) => {
-  const input = ['#fff', '#000', '#c8c']
-  const expected = ['0xffffffff', '0x000000ff', '0xcc88ccff']
+  const input = ['#fff', '#000', '#c8c', 'fff', '000', 'c8c']
+  const expected = [
+    '0xffffffff',
+    '0x000000ff',
+    '0xcc88ccff',
+    '0xffffffff',
+    '0x000000ff',
+    '0xcc88ccff',
+  ]
 
   const actual = input.map(colors.normalize)
 
@@ -55,8 +84,30 @@ test('3 character hex', (assert) => {
 })
 
 test('8 character hex (rgba)', (assert) => {
-  const input = ['#ffffffff', '#000000ff', '#c0ffee80', '#7dd3fc10', '#0c4a6eff']
-  const expected = ['0xffffffff', '0x000000ff', '0xc0ffee80', '0x7dd3fc10', '0x0c4a6eff']
+  const input = [
+    '#ffffffff',
+    '#000000ff',
+    '#c0ffee80',
+    '#7dd3fc10',
+    '#0c4a6eff',
+    'ffffffff',
+    '000000ff',
+    'c0ffee80',
+    '7dd3fc10',
+    '0c4a6eff',
+  ]
+  const expected = [
+    '0xffffffff',
+    '0x000000ff',
+    '0xc0ffee80',
+    '0x7dd3fc10',
+    '0x0c4a6eff',
+    '0xffffffff',
+    '0x000000ff',
+    '0xc0ffee80',
+    '0x7dd3fc10',
+    '0x0c4a6eff',
+  ]
 
   const actual = input.map(colors.normalize)
 
@@ -68,6 +119,44 @@ test('8 character hex (rgba)', (assert) => {
   assert.end()
 })
 
+test('Invalid hex values', (assert) => {
+  const input = [
+    '#fde4',
+    '#1000',
+    '#ddc8c',
+    'hg0',
+    '000fffa',
+    '#a',
+    '#0',
+    'c8O',
+    'fffff',
+    '000f00000',
+    '##000000',
+  ]
+  const expected = [
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+  ]
+
+  const actual = input.map((color) => colors.normalize(color))
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'Invalid hex values should return white color as the default color'
+  )
+  assert.end()
+})
+
 test('RGB colors', (assert) => {
   const input = [
     'rgb(255,255,255)',
@@ -80,23 +169,35 @@ test('RGB colors', (assert) => {
 
   const actual = input.map(colors.normalize)
 
-  assert.deepEqual(
-    actual,
-    expected,
-    'RGB codes prefixed with # should return the correct color in rgba format'
-  )
+  assert.deepEqual(actual, expected, 'RGB codes should return the correct color in rgba format')
+  assert.end()
+})
+
+test('Invalid RGB colors', (assert) => {
+  const input = [
+    'rgb(256,255,255)',
+    'rgb(123,432,211)',
+    'rgb(192, 255)',
+    'rgb(125,, 211, 252)',
+    'rgb(-12, 74, 110)',
+  ]
+  const expected = ['0xffffffff', '0xffffffff', '0xffffffff', '0xffffffff', '0xffffffff']
+
+  const actual = input.map((color) => colors.normalize(color))
+
+  assert.deepEqual(actual, expected, 'Invalid RGB codes should return white color in rgba format')
   assert.end()
 })
 
 test('RGBA colors', (assert) => {
   const input = [
-    'rgb(255,255,255,1)',
-    'rgb(0,0,0,1)',
-    'rgb(192, 255, 238, 0.5)',
-    'rgb(125, 211, 252, 0.1)',
-    'rgb(12, 74, 110, 0)',
-    'rgb(12, 74, 110, -0.5)', // negative alpha should become 0
-    'rgb(12, 74, 110, 1.2)', // highher than 1 alpha should become 1
+    'rgba(255,255,255,1)',
+    'rgba(0,0,0,1)',
+    'rgba(192, 255, 238, 0.5)',
+    'rgba(125, 211, 252, 0.1)',
+    'rgba(12, 74, 110, 0)',
+    'rgba(12, 74, 110, -0.5)', // negative alpha should become 0
+    'rgba(12, 74, 110, 1.2)', // highher than 1 alpha should become 1
   ]
   const expected = [
     '0xffffffff',
@@ -110,61 +211,60 @@ test('RGBA colors', (assert) => {
 
   const actual = input.map(colors.normalize)
 
-  assert.deepEqual(
-    actual,
-    expected,
-    'RGB codes prefixed with # should return the correct color in rgba format'
-  )
+  assert.deepEqual(actual, expected, 'RGBA codes should return the correct color in rgba format')
   assert.end()
 })
 
-test('RGBA colors', (assert) => {
+test('Invalid RGBA colors', (assert) => {
   const input = [
     'rgb(255,255,255,1)',
-    'rgb(0,0,0,1)',
-    'rgb(192, 255, 238, 0.5)',
-    'rgb(125, 211, 252, 0.1)',
-    'rgb(12, 74, 110, 0)',
-    'rgb(12, 74, 110, -0.5)', // negative alpha should become 0
-    'rgb(12, 74, 110, 1.2)', // highher than 1 alpha should become 1
+    'rgba(0,0,0,a)',
+    'rgba(192, 256, 238, 0.5)',
+    'rgba(125, 252, 0.1)',
+    'rgba(12,, 74, 110, 0)',
+    'rgba(-12, 74, 110, -0.5)',
+    'rgba(12, 74, 110, --1.2)',
   ]
   const expected = [
     '0xffffffff',
-    '0x000000ff',
-    '0xc0ffee80',
-    '0x7dd3fc1a',
-    '0x0c4a6e00',
-    '0x0c4a6e00',
-    '0x0c4a6eff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
+    '0xffffffff',
   ]
 
+  const actual = input.map((color) => colors.normalize(color))
+
+  assert.deepEqual(actual, expected, 'Invalid RGBA codes should return white color in rgba format')
+  assert.end()
+})
+
+test('HTML colors', (assert) => {
+  const input = ['blanchedalmond', 'salmon', 'tomato', 'saddlebrown', 'red']
+  const expected = ['0xffebcdff', '0xfa8072ff', '0xff6347ff', '0x8b4513ff', '0xff0000ff']
+
   const actual = input.map(colors.normalize)
 
   assert.deepEqual(
     actual,
     expected,
-    'RGB codes prefixed with # should return the correct color in rgba format'
+    'HTML color codes should return the correct color in rgba format'
   )
   assert.end()
 })
 
-test('HTML colors', (assert) => {
-  const input = ['blanchedalmond', 'salmon', 'tomato', 'saddlebrown', 'red']
+test('Invalid HTML colors', (assert) => {
+  const input = ['darkblanchedalmond', 'selmon', 'lighttomato', 'sadlebrown', 'darkbrown']
+  const expected = ['0xffffffff', '0xffffffff', '0xffffffff', '0xffffffff', '0xffffffff']
 
-  const expected = [
-    parseInt('0xffebcdff', 16),
-    parseInt('0xfa8072ff', 16),
-    parseInt('0xff6347ff', 16),
-    parseInt('0x8b4513ff', 16),
-    parseInt('0xff0000ff', 16),
-  ]
-
-  const actual = input.map(colors.normalize)
+  const actual = input.map((color) => colors.normalize(color))
 
   assert.deepEqual(
     actual,
     expected,
-    'RGB codes prefixed with # should return the correct color in rgba format'
+    'Invalid HTML color codes should return white color in rgba format'
   )
   assert.end()
 })