@lightningjs/blits 1.9.1 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## v1.10.0
+
+_8 nov 2024_
+
+- Fixed issue with back button not bubbling to App component after last page in router history is popped
+- Added `align-items` attribute to Layout component
+- Fixed issue with watching nested state variables and global state
+- Upgraded to renderer 2.6.2
+- Fixed issue with white background for Elements with falsy src attribute
+- Fixed issue with calling focus on component that already is focussed
+
+
+## v1.9.2
+
+_5 nov 2024_
+
+- Fixed Element related tests
+- Bumped renderer to version 2.6.0
+
 ## v1.9.1
 
 _4 nov 2024_

package/docs/built-in/layout.md

@@ -37,6 +37,14 @@ In order to align vertically use `<Layout direction="vertical"></Layout>`. And u
 
 By default the Layout-component places each Element directly besides (or below) the previous one. By adding the `gap`-attribute you can control how much space will be added between each Element or Component. The `gap`-attribute accepts a number in pixels.
 
+### Aligning items
+
+The layout component positions its children based on the provided direction (`horizontal` or `vertical`). With the `align-items`-attribute you can specify how to align the children on the opposite axis:
+
+- `start` (the default value) - aligns the children in the _top_ for horizontal layouts, and on the _left_ for vertical layouts
+- `center` - align the children in the center
+- `end` - aligns the children in the _bottom_ for horizontal layouts, and on the _right_ for vertical layouts
+
 ### Dynamic dimensions
 
 For the Layout component to work properly, the direct children all need to have dimensions (i.e `w` and `h` attributes). The exception here being Text elements.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -9,7 +9,8 @@
     "./transitions": "./src/router/transitions/index.js",
     "./precompiler": "./src/lib/precompiler/precompiler.js",
     "./plugins": "./src/plugins/index.js",
-    "./symbols": "./src/lib/symbols.js"
+    "./symbols": "./src/lib/symbols.js",
+    "./blitsFileConverter": "./src/lib/blitsfileconverter/blitsfileconverter.js"
   },
   "scripts": {
     "test": "c8 npm run test:run",
@@ -49,7 +50,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.1.0",
-    "@lightningjs/renderer": "^2.5.1"
+    "@lightningjs/renderer": "^2.6.2"
   },
   "repository": {
     "type": "git",

package/src/component.js

@@ -176,6 +176,7 @@ const Component = (name = required('name'), config = required('config')) => {
       for (let i = 0; i < watcherkeysLength; i++) {
         let target = this
         let key = watcherkeys[i]
+        const watchKey = key
         // when dot notation used, find the nested target
         if (key.indexOf('.') > -1) {
           const keys = key.split('.')
@@ -190,7 +191,7 @@ const Component = (name = required('name'), config = required('config')) => {
         effect((force = false) => {
           const newValue = target[key]
           if (old !== newValue || force === true) {
-            this[symbols.watchers][key].apply(this, [newValue, old])
+            this[symbols.watchers][watchKey].apply(this, [newValue, old])
             old = newValue
           }
         })

package/src/components/RouterView.js

@@ -60,8 +60,11 @@ export default () =>
       },
     },
     input: {
-      back() {
-        Router.back()
+      back(e) {
+        const navigating = Router.back()
+        if (navigating === false) {
+          this.parent.$focus(e)
+        }
       },
     },
   })

package/src/components/RouterView.orig.js

@@ -44,8 +44,11 @@ export default () =>
       },
     },
     input: {
-      back() {
-        Router.back()
+      back(e) {
+        const navigating = Router.back()
+        if (navigating === false) {
+          this.parent.$focus(e)
+        }
       },
     },
   })

package/src/engines/L3/element.js

@@ -24,9 +24,11 @@ import Settings from '../../settings.js'
 
 const layoutFn = function (config) {
   let offset = 0
-  const xy = config.direction === 'vertical' ? 'y' : 'x'
-  const wh = config.direction === 'vertical' ? 'height' : 'width'
-  const opositeWh = config.direction === 'vertical' ? 'width' : 'height'
+  const position = config.direction === 'vertical' ? 'y' : 'x'
+  const oppositePosition = config.direction === 'vertical' ? 'x' : 'y'
+  const oppositeMount = config.direction === 'vertical' ? 'mountX' : 'mountY'
+  const dimension = config.direction === 'vertical' ? 'height' : 'width'
+  const oppositeDimension = config.direction === 'vertical' ? 'width' : 'height'
 
   const children = this.children
   const childrenLength = children.length
@@ -34,11 +36,11 @@ const layoutFn = function (config) {
   const gap = config.gap || 0
   for (let i = 0; i < childrenLength; i++) {
     const node = children[i]
-    node[xy] = offset
+    node[position] = offset
     // todo: temporary text check, due to 1px width of empty text node
-    if (wh === 'width') {
+    if (dimension === 'width') {
       offset += node.width + (node.width !== ('text' in node ? 1 : 0) ? gap : 0)
-    } else if (wh === 'height') {
+    } else if (dimension === 'height') {
       offset +=
         'text' in node
           ? node.width > 1
@@ -48,11 +50,25 @@ const layoutFn = function (config) {
           ? node.height + gap
           : 0
     }
-    otherDimension = Math.max(otherDimension, node[opositeWh])
+    otherDimension = Math.max(otherDimension, node[oppositeDimension])
   }
   // adjust the size of the layout container
-  this[wh] = offset - gap
-  this[opositeWh] = otherDimension
+  this[dimension] = offset - gap
+  this[oppositeDimension] = otherDimension
+
+  const align = {
+    start: 0,
+    end: 1,
+    center: 0.5,
+  }[config['align-items'] || 'start']
+
+  if (align !== 0) {
+    for (let i = 0; i < childrenLength; i++) {
+      const node = children[i]
+      node[oppositePosition] = otherDimension
+      node[oppositeMount] = align
+    }
+  }
 }
 
 const isTransition = (value) => {
@@ -146,7 +162,7 @@ const propsTransformer = {
   set src(v) {
     this.props['src'] = v
     if (this.raw['color'] === undefined) {
-      this.props['color'] = 0xffffffff
+      this.props['color'] = this.props['src'] ? 0xffffffff : 0x00000000
     }
   },
   set texture(v) {
@@ -225,7 +241,15 @@ const propsTransformer = {
     }
   },
   set show(v) {
-    this.props['alpha'] = v ? 1 : 0
+    if (v) {
+      this.props['alpha'] = 1
+      this.props['width'] = this.raw['w'] || this.raw['width']
+      this.props['height'] = this.raw['h'] || this.raw['height']
+    } else {
+      this.props['alpha'] = 0
+      this.props['width'] = 0
+      this.props['height'] = 0
+    }
   },
   set alpha(v) {
     this.props['alpha'] = v

package/src/engines/L3/element.test.js

@@ -101,7 +101,7 @@ test('Element - Set `w` property', (assert) => {
 
   assert.equal(el.node['width'], 100, 'Node width parameter should be set')
   assert.equal(el.props.props['width'], 100, 'Props width parameter should be set')
-  assert.equal(el.props.raw.get('w'), 100, "Props' raw map entry should be added")
+  assert.equal(el.props.raw['w'], 100, "Props' raw map entry should be added")
   assert.end()
 })
 
@@ -116,7 +116,7 @@ test('Element - Set `mount` property', (assert) => {
   assert.equal(el.node['mountY'], 20, 'Node mountY parameter should be set')
   assert.equal(el.props.props['mountX'], 10, 'Props mountX parameter should be set')
   assert.equal(el.props.props['mountY'], 20, 'Props mountY parameter should be set')
-  assert.equal(el.props.raw.get('mount'), value, "Props' raw map entry should be added")
+  assert.equal(el.props.raw['mount'], value, "Props' raw map entry should be added")
   assert.end()
 })
 
@@ -128,7 +128,7 @@ test('Element - Set `color` property', (assert) => {
 
   assert.equal(el.node['color'], '0xf0ffffff', 'Node color parameter should be set')
   assert.equal(el.props.props['color'], '0xf0ffffff', 'Props color parameter should be set')
-  assert.equal(el.props.raw.get('color'), 'azure', "Props' raw map entry should be added")
+  assert.equal(el.props.raw['color'], 'azure', "Props' raw map entry should be added")
   assert.end()
 })
 
@@ -141,7 +141,7 @@ test('Element - Set `src` property', (assert) => {
 
   assert.equal(el.node['src'], value, 'Node src parameter should be set')
   assert.equal(el.props.props['src'], value, 'Props src parameter should be set')
-  assert.equal(el.props.raw.get('src'), value, "Props' raw map entry should be added")
+  assert.equal(el.props.raw['src'], value, "Props' raw map entry should be added")
   assert.equal(el.props.props['color'], 0xffffffff, 'Props default color parameter should be set')
   assert.end()
 })
@@ -154,7 +154,7 @@ test('Element - Set `texture` property', (assert) => {
 
   assert.equal(el.node['texture'], 'foo', 'Node texture parameter should be set')
   assert.equal(el.props.props['texture'], 'foo', 'Props texture parameter should be set')
-  assert.equal(el.props.raw.get('texture'), 'foo', "Props' raw map entry should be added")
+  assert.equal(el.props.raw['texture'], 'foo', "Props' raw map entry should be added")
   assert.equal(el.props.props['color'], 0xffffffff, 'Props default color parameter should be set')
   assert.end()
 })
@@ -181,7 +181,7 @@ test('Element - Set `fit` property with a string type value', (assert) => {
     fitVal,
     'Props textureOptions parameter should be set'
   )
-  assert.equal(el.props.raw.get('fit'), fitVal, "Props' raw map entry should be added")
+  assert.equal(el.props.raw['fit'], fitVal, "Props' raw map entry should be added")
   assert.end()
 })
 
@@ -212,7 +212,7 @@ test('Element - Set `fit` property with an object type value', (assert) => {
     1,
     'Node resizeMode "clipY" parameter should be set to correct value'
   )
-  assert.equal(el.props.raw.get('fit'), fitVal, "Props' raw map entry should be added")
+  assert.equal(el.props.raw['fit'], fitVal, "Props' raw map entry should be added")
   assert.end()
 })
 
@@ -243,7 +243,7 @@ test('Element - Set `fit` property with position key as a string type value', (a
     1,
     'Node resizeMode "clipY" parameter should be set to correct value'
   )
-  assert.equal(el.props.raw.get('fit'), fitVal, "Props' raw map entry should be added")
+  assert.equal(el.props.raw['fit'], fitVal, "Props' raw map entry should be added")
   assert.end()
 })
 

package/src/focus.js

@@ -38,6 +38,7 @@ export default {
     return focusedComponent
   },
   set(component, event) {
+    if (component === focusedComponent) return
     clearTimeout(setFocusTimeout)
     focusedComponent && focusedComponent !== component.parent && focusedComponent.unfocus()
     focusChain.reverse().forEach((cmp) => cmp.unfocus())

package/src/lib/blitsfileconverter/blitsfileconverter.js

@@ -0,0 +1,52 @@
+/*
+ * 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
+ */
+
+export default (source) => {
+  const { template, script } = parseBlitsFile(source)
+  return injectTemplate(script, template)
+}
+
+const parseBlitsFile = (source) => {
+  const templateMatch = source.match(/<template>([\s\S]*?)<\/template>/)
+  const scriptMatch = source.match(/<script(?:\s+lang=["'](?:js|ts)["'])?\s*>([\s\S]*?)<\/script>/)
+
+  return {
+    template: templateMatch ? templateMatch[1].trim() : '',
+    script: scriptMatch ? scriptMatch[1].trim() : '',
+  }
+}
+
+const injectTemplate = (script, template) => {
+  const componentRegex =
+    /(Blits\.Component|Component)\s*\(\s*(['"`])(?:(?=(\\?))\3.)*?\2\s*,\s*\{|Blits\.Application\s*\(\s*\{/
+
+  const match = script.match(componentRegex)
+
+  if (!match) {
+    // we might consider initializing a component if it's not found automatically
+    throw new Error(
+      'Could not find Blits.Component, Component, or Blits.Application initialization in the script'
+    )
+  }
+
+  // The insertion point is right after the opening curly brace
+  const insertIndex = match.index + match[0].length
+
+  // Using template literals to preserve multiline strings and escape characters
+  const injection = `\n  template: \`${template.replace(/`/g, '\\`')}\`,\n`
+  return script.slice(0, insertIndex) + injection + script.slice(insertIndex)
+}

package/vite/blitsFileConverter.js

@@ -0,0 +1,38 @@
+/*
+ * 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 blitsfileconverter from '../src/lib/blitsfileconverter/blitsfileconverter.js'
+
+export default function blitsFileType() {
+  return {
+    name: 'vite-plugin-blits-file-type',
+    enforce: 'pre',
+    transform(src, id) {
+      if (id.endsWith('.blits')) {
+        try {
+          const transformedCode = blitsfileconverter(src)
+          return {
+            code: transformedCode,
+            map: null, // no source map
+          }
+        } catch (error) {
+          this.error(error)
+        }
+      }
+    },
+  }
+}

package/vite/index.js

@@ -17,8 +17,10 @@
 
 import preCompiler from './preCompiler.js'
 import msdfGenerator from './msdfGenerator.js'
+import blitsFileConverter from './blitsFileConverter.js'
 
 export { default as preCompiler } from './preCompiler.js'
 export { default as msdfGenerator } from './msdfGenerator.js'
+export { default as blitsFileConverter } from './blitsFileConverter.js'
 
-export default [preCompiler(), msdfGenerator()]
+export default [blitsFileConverter(), preCompiler(), msdfGenerator()]

package/vite/msdfGenerator.js

@@ -1,3 +1,20 @@
+/*
+ * 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 path from 'path'
 import * as fs from 'fs'
 import { createHash } from 'crypto'

package/vite/preCompiler.js

@@ -27,6 +27,13 @@ export default function () {
     },
     transform(source, filePath) {
       if (config.blits && config.blits.precompile === false) return source
+
+      const fileExtension = path.extname(filePath)
+
+      // we should only precompile .js and .ts files
+      if (fileExtension === '.js' || fileExtension === '.ts') {
+        return compiler(source, filePath)
+      }
       const relativePath = path.relative(process.cwd(), filePath)
       return compiler(source, relativePath)
     },