@lightningjs/blits 0.10.0 → 1.1.0

package/src/lib/colors/colors.js

@@ -15,64 +15,77 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import htmlColors from './htmlColors.js'
-import { Log } from '../log.js'
+import colorsMap from './htmlColors.js'
+
+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*))?\)$/
+
+const hexLookup = {}
+
+const decimalToHex = (decimal) => {
+  if (hexLookup[decimal] !== undefined) {
+    return hexLookup[decimal]
+  }
+
+  const resp = parseInt(decimal).toString(16).padStart(2, '0')
+  hexLookup[decimal] = resp
+  return resp
+}
 
 export default {
-  // 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') {
+  normalize: (color = '', defaultColor = '0xffffffff') => {
     color = color.toString()
 
-    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*))?\)$/
+    // its mappable, map it
+    if (colorsMap[color] !== undefined) {
+      return colorsMap[color]
+    }
 
-      if (normalized.test(color)) {
-        return color
+    // its a 0xRRGGBBAA color, store it and return it
+    if (color.startsWith('0x') && color.length === 10) {
+      colorsMap[color] = color
+      return color
+    }
+
+    // check for hex color
+    if (hex.test(color)) {
+      color = color.replace('#', '').toLowerCase()
+      if (color.length === 3) {
+        color = color
+          .split('')
+          .map((c) => c + c)
+          .join('')
       }
 
-      if (hex.test(color)) {
-        color = color.replace('#', '').toLowerCase()
-        if (color.length === 3) {
-          color = color
-            .split('')
-            .map((c) => c + c)
-            .join('')
-        }
+      const colorRGBA = '0x' + color.padEnd(8, 'f')
+      colorsMap[color] = colorRGBA
+      return colorRGBA
+    }
 
-        return '0x' + color.padEnd(8, 'f')
-      }
+    //rgb/a
+    const rgbaMatch = rgba.exec(color)
+    if (rgbaMatch) {
+      const r = decimalToHex(rgbaMatch[3])
+      const g = decimalToHex(rgbaMatch[5])
+      const b = decimalToHex(rgbaMatch[7])
+      let a = 'ff'
 
-      //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 (rgbaMatch[10] && rgbaMatch[1] === 'rgba') {
+        const alpha = Math.min(Math.max(Math.round(parseFloat(rgbaMatch[10]) * 255), 0), 255)
+        a = decimalToHex(alpha)
       }
 
-      if (hsla.test(color)) {
-        Log.warn('HSL(A) color format is not supported yet')
-        return '0xffffffff'
-      }
+      const resp = '0x' + r + g + b + a
+      colorsMap[color] = resp
+      return resp
+    }
 
-      if (color in htmlColors) {
-        return htmlColors[color]
-      }
+    if (hsla.test(color)) {
+      console.warn('HSL(A) color format is not supported yet')
+      return '0xffffffff'
     }
 
     return defaultColor

package/src/lib/componentId.js

@@ -25,3 +25,12 @@ export const createHumanReadableId = (name) => {
 export const createInternalId = () => {
   return ++counter
 }
+
+/**
+ * Resets the counter value back to 0.
+ * Used in automated tests to ensure consistent results, not intended
+ * to be used in the actual framework code!
+ */
+export const resetCounter = () => {
+  counter = 0
+}

package/src/lib/componentId.test.js

@@ -16,7 +16,7 @@
  */
 
 import test from 'tape'
-import { createHumanReadableId, createInternalId } from './componentId.js'
+import { createHumanReadableId, createInternalId, resetCounter } from './componentId.js'
 
 test('Type createHumandReadableId', (assert) => {
   const expected = 'function'
@@ -59,6 +59,7 @@ test('Type createInternalId', (assert) => {
 })
 
 test('Returns an internal id, disregarding the component name', (assert) => {
+  resetCounter()
   const expected = 1
   const actual = createInternalId('Spinner')
 

package/src/lib/precompiler/precompiler.js

@@ -17,13 +17,13 @@
 
 import parser from '../templateparser/parser.js'
 import generator from '../codegenerator/generator.js'
-import path from 'path'
 
 export default (source, filePath) => {
   if (
     source.indexOf('Blits.Component(') > -1 ||
     source.indexOf('Blits.Application(') > -1 ||
-    /=>\s*Component\(['"][A-Za-z]+['"],/s.test(source) // blits component
+    /=>\s*Component\(['"][A-Za-z]+['"],/s.test(source) || // blits component
+    /\{.*?template\s*:\s*(['"`])((?:\\?.)*?)\1.*?\}/s.test(source) // object with template key
   ) {
     const templates = source.matchAll(/(?<!\/\/\s*)template\s*:\s*(['"`])((?:\\?.)*?)\1/gs)
     let newSource = source
@@ -45,8 +45,7 @@ export default (source, filePath) => {
           resourceName = source.match(/Blits\.Component\(['"](.*)['"]\s*,/)[1]
         }
 
-        const componentPath = path.relative(process.cwd(), filePath)
-        const parsed = parser(templateContent, resourceName, null, componentPath)
+        const parsed = parser(templateContent, resourceName, null, filePath)
 
         // Generate the code
         const code = generator.call({ components: {} }, parsed)

package/src/lib/reactivity/effect.js

@@ -16,6 +16,7 @@
  */
 
 let currentEffect = null
+let currentKey = null
 
 let paused = false
 
@@ -25,22 +26,16 @@ export const pauseTracking = () => {
 
 export const resumeTracking = () => {
   paused = false
-  for (let i = 0; i < trackQueue.length; i++) {
-    const item = trackQueue[i]
-    currentEffect = item.currentEffect
-    track(item.target, item.key)
-  }
-  trackQueue.length = 0
 }
 
 const objectMap = new WeakMap()
 
-const trackQueue = []
-
 export const track = (target, key) => {
   if (currentEffect) {
     if (paused) {
-      trackQueue.push({ target, key, currentEffect })
+      return
+    }
+    if (currentKey !== null && key !== currentKey) {
       return
     }
     let effectsMap = objectMap.get(target)
@@ -58,21 +53,23 @@ export const track = (target, key) => {
 }
 
 export const trigger = (target, key, force = false) => {
-  if (paused) return
+  if (paused === true) return
   const effectsMap = objectMap.get(target)
   if (!effectsMap) {
     return
   }
   const effects = effectsMap.get(key)
   if (effects) {
-    effects.forEach((effect) => {
+    for (let effect of effects) {
       effect(force)
-    })
+    }
   }
 }
 
-export const effect = (effect) => {
+export const effect = (effect, key = null) => {
   currentEffect = effect
+  currentKey = key
   currentEffect()
   currentEffect = null
+  currentKey = null
 }

package/src/lib/reactivity/reactive.js

@@ -18,27 +18,27 @@
 import { track, trigger, pauseTracking, resumeTracking } from './effect.js'
 import symbols from '../symbols.js'
 
-const arrayPatchMethods = ['push', 'pop', 'shift', 'unshift', 'splice']
+const arrayPatchMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort']
 
 const proxyMap = new WeakMap()
 
-const getProxy = (obj) => {
-  return proxyMap.get(obj)
-}
-
-const getRaw = (value) => {
+export const getRaw = (value) => {
   const raw = value && value[symbols.raw]
   return raw ? getRaw(raw) : value
 }
 
 const reactiveProxy = (original, _parent = null, _key) => {
-  // don't create a proxy when a Blits component is assigned to a state variable
-  if (typeof original === 'object' && original[symbols.id]) {
+  // don't create a proxy when a Blits component or an Image Texture
+  // is assigned to a state variable
+  if (
+    (typeof original === 'object' && original[symbols.id]) ||
+    original.constructor.name === '_ImageTexture'
+  ) {
     return original
   }
 
   // if original object is already a proxy, don't create a new one but return the existing one instead
-  const existingProxy = getProxy(original)
+  const existingProxy = proxyMap.get(original)
   if (existingProxy) {
     return existingProxy
   }
@@ -52,21 +52,31 @@ const reactiveProxy = (original, _parent = null, _key) => {
 
       // handling arrays
       if (Array.isArray(target)) {
+        if (typeof target[key] === 'object' && target[key] !== null) {
+          if (Array.isArray(target[key])) {
+            track(target, key)
+          }
+          // create a new reactive proxy
+          return reactiveProxy(getRaw(target[key]), target, key)
+        }
         // augment array path methods (that change the length of the array)
-        if (arrayPatchMethods.indexOf(key) > -1) {
+        if (arrayPatchMethods.indexOf(key) !== -1) {
           return function (...args) {
             pauseTracking()
             const result = target[key].apply(this, args)
+            resumeTracking()
             // trigger a change on the parent object and the key
             // i.e. when pushing a new item to `obj.data`, _parent will equal `obj`
             // and _key will equal `data`
-            resumeTracking()
             trigger(_parent, _key)
             return result
           }
-        } else {
-          return Reflect.get(target, key, receiver)
         }
+        if (key === 'length') {
+          return original.length
+        }
+
+        return Reflect.get(target, key, receiver)
       }
 
       // handling objects (but not null values, which have object type in JS)
@@ -75,7 +85,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
           track(target, key)
         }
         // create a new reactive proxy
-        return reactiveProxy(target[key], target, key)
+        return reactiveProxy(getRaw(target[key]), target, key)
       }
 
       // handling all other types

package/src/lib/symbols.js

@@ -3,6 +3,7 @@ export default {
   cursorTagStart: Symbol('cursorTagStart'),
   computedKeys: Symbol('computedKeys'),
   destroy: Symbol('destroy'),
+  getChildren: Symbol('getChildren'),
   holder: Symbol('holder'),
   id: Symbol('id'),
   identifier: Symbol('identifier'),

package/src/router/router.js

@@ -259,9 +259,23 @@ const removeView = async (route, view, transition) => {
 }
 
 const setOrAnimate = (node, transition, shouldAnimate = true) => {
-  return shouldAnimate
-    ? node.animate(transition.prop, transition.value, transition)
-    : node.set(transition.prop, transition.value)
+  return new Promise((resolve) => {
+    if (shouldAnimate) {
+      // resolve the promise in the transition end-callback
+      // ("extending" end callback when one is already specified)
+      const existingEndCallback = transition.end
+      transition.end = existingEndCallback
+        ? (...args) => {
+            existingEndCallback(...args)
+            resolve()
+          }
+        : resolve
+      node.set(transition.prop, { transition })
+    } else {
+      node.set(transition.prop, transition.value)
+      resolve()
+    }
+  })
 }
 
 export const to = (location, data = {}, options = {}) => {

package/vite/index.js

@@ -15,13 +15,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { importChunkUrl } from '@lightningjs/vite-plugin-import-chunk-url'
-
 import preCompiler from './preCompiler.js'
 import msdfGenerator from './msdfGenerator.js'
 
-export { importChunkUrl as importChunkUrl } from '@lightningjs/vite-plugin-import-chunk-url'
 export { default as preCompiler } from './preCompiler.js'
 export { default as msdfGenerator } from './msdfGenerator.js'
 
-export default [importChunkUrl(), preCompiler(), msdfGenerator()]
+export default [preCompiler(), msdfGenerator()]

package/vite/preCompiler.js

@@ -16,6 +16,7 @@
  */
 
 import compiler from '../src/lib/precompiler/precompiler.js'
+import path from 'path'
 
 export default function () {
   let config
@@ -26,7 +27,8 @@ export default function () {
     },
     transform(source, filePath) {
       if (config.blits && config.blits.precompile === false) return source
-      return compiler(source, filePath)
+      const relativePath = path.relative(process.cwd(), filePath)
+      return compiler(source, relativePath)
     },
   }
 }

package/boilerplate/js/default/src/renderer.js

@@ -1,4 +0,0 @@
-// @ts-ignore
-import renderer from '@lightningjs/blits/renderer'
-
-renderer()

package/src/components/Text.js

@@ -1,119 +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 Component from '../component.js'
-import Settings from '../settings.js'
-
-export default () =>
-  Component('Text', {
-    /* eslint-disable no-unused-vars */
-    code: {
-      render: function anonymous(parent, component, context, components) {
-        const elms = []
-
-        if (!elms[0]) {
-          elms[0] = this.element({ parent: parent || 'root' }, component)
-        }
-        const elementConfig0 = {}
-
-        elementConfig0['__textnode'] = true
-        elementConfig0['fontFamily'] = component.font
-        elementConfig0['letterSpacing'] = component.letterspacing
-        elementConfig0['lineHeight'] = component._lineheight
-        elementConfig0['stretch'] = component.stretch
-        elementConfig0['contain'] = component._contain
-        elementConfig0['@loaded'] = component['@loaded'] && component['@loaded'].bind(component)
-        elementConfig0['@error'] = component['@error'] && component['@error'].bind(component)
-
-        if (!elms[0].nodeId) {
-          elms[0].populate(elementConfig0)
-        }
-
-        return elms
-      },
-      effects: [
-        function anonymous(component, elms, context, components) {
-          elms[0].set('text', component.content)
-        },
-        function anonymous(component, elms, context, components) {
-          elms[0].set('fontSize', component.size)
-        },
-        function anonymous(component, elms, context, components) {
-          elms[0].set('color', component.color)
-        },
-        function anonymous(component, elms, context, components) {
-          elms[0].set('style', component.style)
-        },
-        function anonymous(component, elms, context, components) {
-          elms[0].set('weight', component.weight)
-        },
-        function anonymous(component, elms, context, components) {
-          elms[0].set('wordWrap', component.wordwrap)
-        },
-        function anonymous(component, elms, context, components) {
-          elms[0].set('maxLines', component.maxlines)
-        },
-        function anonymous(component, elms, context, components) {
-          elms[0].set('h', component.maxheight)
-        },
-        function anonymous(component, elms, context, components) {
-          elms[0].set('textAlign', component.align)
-        },
-        function anonymous(component, elms, context, components) {
-          elms[0].set('overflowSuffix', component.textoverflow)
-        },
-      ],
-      context: {},
-    },
-    props: [
-      'content',
-      {
-        key: 'font',
-        default: Settings.get('defaultFont', 'lato'),
-      },
-      {
-        key: 'size',
-        cast: Number,
-        default: 32,
-      },
-      'style',
-      'color',
-      'weight',
-      'letterspacing',
-      'stretch',
-      'align',
-      'wordwrap',
-      'maxlines',
-      'maxheight',
-      'lineheight',
-      'contain',
-      '@loaded',
-      '@error',
-      'textoverflow',
-    ],
-    computed: {
-      _contain() {
-        return (
-          this.contain ||
-          (this.maxheight && this.wordwrap ? 'both' : this.wordwrap ? 'width' : 'none')
-        )
-      },
-      _lineheight() {
-        return this.lineheight !== undefined ? this.lineheight : this.size
-      },
-    },
-  })

package/src/components/Text.orig.js

@@ -1,81 +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 Component from '../component.js'
-import Settings from '../settings.js'
-
-export default () =>
-  Component('Text', {
-    template: `
-      <Element
-        __textnode="true"
-        :text="$content"
-        fontFamily="$font"
-        :fontSize="$size"
-        :color="$color"
-        :style="$style"
-        :weight="$weight"
-        letterSpacing="$letterspacing"
-        lineHeight="$_lineheight"
-        stretch="$stretch"
-        contain="$_contain"
-        :wordWrap="$wordwrap"
-        :maxLines="$maxlines"
-        :h="$maxheight"
-        :textAlign="$align"
-        :overflowSuffix="$textoverflow"
-        @loaded="$@loaded"
-        @error="$@error"
-      />`,
-    props: [
-      'content',
-      {
-        key: 'font',
-        default: Settings.get('defaultFont', 'lato'),
-      },
-      {
-        key: 'size',
-        cast: Number,
-        default: 32,
-      },
-      'style',
-      'color',
-      'weight',
-      'letterspacing',
-      'stretch',
-      'align',
-      'wordwrap',
-      'maxlines',
-      'maxheight',
-      'lineheight',
-      'contain',
-      '@loaded',
-      '@error',
-      'textoverflow',
-    ],
-    computed: {
-      _contain() {
-        return (
-          this.contain ||
-          (this.maxheight && this.wordwrap ? 'both' : this.wordwrap ? 'width' : 'none')
-        )
-      },
-      _lineheight() {
-        return this.lineheight !== undefined ? this.lineheight : this.size
-      },
-    },
-  })