@lightningjs/blits 1.23.2 → 1.24.0

package/.github/workflows/run-blits-tests.yml

@@ -12,6 +12,9 @@ jobs:
     steps:
     - name: Checkout Code
       uses: actions/checkout@v3
+      with:
+        ref: ${{ github.event.pull_request.head.ref }}
+        repository: ${{ github.event.pull_request.head.repo.full_name }}
 
     - name: Set up Node.js
       uses: actions/setup-node@v3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v1.24.0
+
+_26 mar 2025_
+
+- Added additional tests for router
+- Fixed issues with `:show` attribute not working properly
+- Fixed issue with strings starting with a number being casted to a number
+- Fixed named slots functionality
+
 ## v1.23.2
 
 _18 mar 2025_

package/package.json

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

package/src/components/FPScounter.js

@@ -736,7 +736,7 @@ export default () =>
         )
 
         elementConfig23['image'] = component.image
-        elementConfig23['x'] = -2
+        elementConfig23['x'] = '-2'
         elementConfig23['w'] = 47
         elementConfig23['h'] = 25
         elementConfig23['map'] = component.sprite
@@ -759,7 +759,7 @@ export default () =>
         parent = elms[23]
         const props24 = {}
         props24['image'] = component.image
-        props24['x'] = -2
+        props24['x'] = '-2'
         props24['w'] = 47
         props24['h'] = 25
         props24['map'] = component.sprite

package/src/engines/L3/element.js

@@ -82,6 +82,9 @@ const layoutFn = function (config) {
   let otherDimension = 0
   const gap = config.gap || 0
   for (let i = 0; i < childrenLength; i++) {
+    if (this.children[i] !== undefined && this.children[i].props.raw.show === false) {
+      continue
+    }
     const node = children[i]
     node[position] = offset
     node[oppositePosition] = padding.oppositeStart
@@ -303,12 +306,8 @@ const propsTransformer = {
   set show(v) {
     if (v) {
       this.props['alpha'] = this.raw['alpha'] !== undefined ? this.raw['alpha'] : 1
-      this.props['width'] = this.raw['w'] || this.raw['width'] || 0
-      this.props['height'] = this.raw['h'] || this.raw['height'] || 0
     } else {
       this.props['alpha'] = 0
-      this.props['width'] = 0
-      this.props['height'] = 0
     }
   },
   set alpha(v) {

package/src/lib/codegenerator/generator.js

@@ -148,7 +148,7 @@ const generateElementCode = function (
   Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
-        elementConfig${counter}['parent'] = component[Symbol.for('slots')] !== undefined && Array.isArray(component[Symbol.for('slots')]) === true && component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
+        elementConfig${counter}['parent'] = slotComponent[Symbol.for('slots')] !== undefined && Array.isArray(slotComponent[Symbol.for('slots')]) === true && slotComponent[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
       `)
     }
 
@@ -691,7 +691,7 @@ const cast = (val = '', key = false, component = 'component.') => {
     }
   }
   // numeric
-  else if (key !== 'color' && !isNaN(parseFloat(val))) {
+  else if (key !== 'color' && /[^0-9%\s.eE]/.test(val) === false && !isNaN(parseFloat(val))) {
     castedValue = parseFloat(val)
     if (val.endsWith('%')) {
       const map = {

package/src/lib/codegenerator/generator.test.js

@@ -296,6 +296,71 @@ test('Generate code for a template with a single element with attributes with a
   assert.end()
 })
 
+test('Generate code for a template with a single element with attributes with numeric & alpha numeric value', (assert) => {
+  const templateObject = {
+    children: [
+      {
+        [Symbol.for('componentType')]: 'Element',
+        x: '10e2',
+        y: '100',
+        h: '45%',
+        w: '45.45%',
+        one: 'Pure String',
+        two: '123abc',
+        three: '1E',
+        four: 'E1',
+      },
+    ],
+  }
+
+  const expectedRender = `
+  function anonymous(parent, component, context, components, effect, getRaw, Log) {
+    const elms = []
+    let componentType
+    const rootComponent = component
+    let propData
+    let slotComponent
+    let inSlot = false
+    let slotChildCounter = 0
+    const elementConfig0 = {}
+
+    elms[0] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+    )
+
+    elementConfig0['x'] = 1000
+    elementConfig0['y'] = 100
+    elementConfig0['h'] = parent.node.height * (45 / 100)
+    elementConfig0['w'] = parent.node.width * (45.45 / 100)
+    elementConfig0['one'] = "Pure String"
+    elementConfig0['two'] = "123abc"
+    elementConfig0['three'] = 1
+    elementConfig0['four'] = "E1"
+
+    elms[0].populate(elementConfig0)
+
+    if (inSlot === true) {
+        slotChildCounter -= 1
+    }
+
+    return elms
+  }
+  `
+
+  const actual = generator.call(scope, templateObject)
+  assert.equal(
+    normalize(actual.render.toString()),
+    normalize(expectedRender),
+    'Generator should return a render function with the correct code'
+  )
+  assert.ok(
+    Array.isArray(actual.effects) && actual.effects.length === 0,
+    'Generator should return an empty effects array'
+  )
+  assert.end()
+})
+
 test('Generate code for a template with attributes and a nested element with attributes', (assert) => {
   const templateObject = {
     children: [
@@ -1427,6 +1492,144 @@ test('Generate code for a template with custom components with arguments', (asse
   assert.end()
 })
 
+test('Generate code for a template with custom components with argument value as numeric & alpha numeric', (assert) => {
+  const templateObject = {
+    children: [
+      {
+        [Symbol.for('componentType')]: 'Element',
+        children: [
+          {
+            [Symbol.for('componentType')]: 'Poster',
+            x: '10e2',
+            y: '100',
+            h: '45%',
+            w: '45.45%',
+            one: 'Pure String',
+            two: '123abc',
+            three: '1E',
+            four: 'E1',
+          },
+        ],
+      },
+    ],
+  }
+
+  const scope = {
+    components: {
+      Poster: () => {},
+    },
+  }
+
+  const expectedRender = `
+  function anonymous(parent, component, context, components, effect, getRaw, Log) {
+    const elms = []
+    let componentType
+    const rootComponent = component
+    let propData
+    let slotComponent
+    let inSlot = false
+    let slotChildCounter = 0
+    const elementConfig0 = {}
+
+    elms[0] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+    )
+    elms[0].populate(elementConfig0)
+
+    if (inSlot === true) {
+        slotChildCounter -= 1
+    }
+
+    const cmp1 = (context.components && context.components['Poster']) || components['Poster']
+    parent = elms[0]
+    const elementConfig1 = {}
+
+    elms[1] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+    )
+
+    elementConfig1['x'] = 1000
+    elementConfig1['y'] = 100
+    elementConfig1['h'] = parent.node.height * (45 / 100)
+    elementConfig1['w'] = parent.node.width * (45.45 / 100)
+    elementConfig1['one'] = "PureString"
+    elementConfig1['two'] = "123abc"
+    elementConfig1['three'] = 1
+    elementConfig1['four'] = "E1"
+
+    const skip1 = []
+    if (typeof cmp1 !== 'undefined') {
+        for (let key in cmp1.config.props) {
+            delete elementConfig1[cmp1.config.props[key]]
+            skip1.push(cmp1.config.props[key])
+        }
+    }
+
+    elms[1].populate(elementConfig1)
+
+    if (inSlot === true) {
+        slotChildCounter -= 1
+    }
+
+    parent = elms[1]
+    const props2 = {}
+
+    props2['x'] = 1000
+    props2['y'] = 100
+    props2['h'] = parent.node.height * (45 / 100)
+    props2['w'] = parent.node.width * (45.45 / 100)
+    props2['one'] = "PureString"
+    props2['two'] = "123abc"
+    props2['three'] = 1
+    props2['four'] = "E1"
+
+    componentType = props2['is'] || 'Poster'
+    let component2
+
+    if (typeof componentType === 'string') {
+        component2 = context.components && context.components[componentType] || components[componentType]
+        if (!component2) {
+            throw new Error('Component "Poster" not found')
+        }
+    } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) {
+        component2 = componentType
+    }
+
+    elms[2] = component2.call(null, { props: props2 }, elms[1], component)
+
+    if (elms[2][Symbol.for('slots')][0]) {
+        parent = elms[2][Symbol.for('slots')][0]
+        slotComponent = elms[2]
+        inSlot = true
+    } else {
+        parent = elms[2][Symbol.for('children')][0]
+    }
+
+    if (inSlot === true && slotChildCounter === 0) {
+      inSlot = false
+    }
+
+    return elms
+  }
+  `
+
+  const actual = generator.call(scope, templateObject)
+
+  assert.equal(
+    normalize(actual.render.toString()),
+    normalize(expectedRender),
+    'Generator should return a render function with the correct code'
+  )
+  assert.ok(
+    Array.isArray(actual.effects) && actual.effects.length === 0,
+    'Generator should return an empty effects array'
+  )
+
+  assert.end()
+})
+
 test('Generate code for a template with custom components with reactive props', (assert) => {
   const templateObject = {
     children: [
@@ -1933,9 +2136,9 @@ test('Generate code for a template with slot content, using a named slot', (asse
     elms[4] = this.element({ parent: parent || 'root' }, inSlot === true ? slotComponent : component)
     elementConfig4['x'] = 100
     elementConfig4['y'] = component.y
-    elementConfig4['parent'] = component[Symbol.for('slots')] !== undefined &&
-      Array.isArray(component[Symbol.for('slots')]) === true &&
-      component[Symbol.for('slots')].filter(slot => slot.ref === 'mySlot').shift() || parent
+    elementConfig4['parent'] = slotComponent[Symbol.for('slots')] !== undefined &&
+      Array.isArray(slotComponent[Symbol.for('slots')]) === true &&
+       slotComponent[Symbol.for('slots')].filter(slot => slot.ref === 'mySlot').shift() || parent
     elementConfig4['slot'] = "mySlot"
     elms[4].populate(elementConfig4)
 

package/src/router/router.js

@@ -66,7 +66,7 @@ const isString = (v) => typeof v === 'string'
 
 export const matchHash = (path, routes = []) => {
   // remove trailing slashes
-  const originalPath = path
+  const originalPath = path.replace(/^\/+|\/+$/g, '')
   path = normalizePath(path)
   let matchingRoute = false
   let i = 0
@@ -89,6 +89,8 @@ export const matchHash = (path, routes = []) => {
           dynamicRoutePartsRegex.substring(part.index + part[0].length)
       })
 
+      dynamicRoutePartsRegex = '^' + dynamicRoutePartsRegex
+
       // test if the constructed regex matches the path
       const match = originalPath.match(new RegExp(`${dynamicRoutePartsRegex}`, 'i'))
 

package/src/router/router.test.js

@@ -16,7 +16,7 @@
  */
 
 import test from 'tape'
-import { matchHash } from './router.js'
+import { matchHash, getHash, to } from './router.js'
 
 const routes = [
   {
@@ -31,6 +31,9 @@ const routes = [
   {
     path: '/tv/:show/seasons/:season',
   },
+  {
+    path: '/movies/special',
+  },
   {
     path: '/movies/:name',
   },
@@ -40,6 +43,9 @@ const routes = [
   {
     path: '/route/with/trailing/slash/',
   },
+  {
+    path: '/dutchmovies/:id',
+  },
   {
     path: '*',
   },
@@ -54,6 +60,7 @@ test('Type of matchHash', (assert) => {
 })
 
 test('Match paths with static routes that have an exact match', (assert) => {
+  assert.equal(matchHash('', routes), routes[0], 'Should return the correct route object')
   assert.equal(matchHash('/', routes), routes[0], 'Should return the correct route object')
   assert.equal(matchHash('/page1', routes), routes[1], 'Should return the correct route object')
   assert.equal(
@@ -61,6 +68,11 @@ test('Match paths with static routes that have an exact match', (assert) => {
     routes[2],
     'Should return the correct route object'
   )
+  assert.equal(
+    matchHash('/movies/special', routes),
+    routes[4],
+    'Should return the correct route object'
+  )
   assert.end()
 })
 
@@ -71,32 +83,69 @@ test('Match paths with dynamic route parts', (assert) => {
     'Should return the correct route object'
   )
 
+  assert.equal(
+    matchHash('/tv/simpsons/season/first', routes),
+    routes[9],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/examples/test/seasons/5', routes),
+    routes[6],
+    'Should return the correct route object'
+  )
+
   assert.equal(
     matchHash('/movies/avengers-endgame', routes),
-    routes[4],
+    routes[5],
     'Should return the correct route object'
   )
+
+  assert.equal(
+    matchHash('/movies/special-1', routes),
+    routes[5],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/dutchmovies/123', routes),
+    routes[8],
+    'Should return the correct route object'
+  )
+
   assert.end()
 })
 
 test('Match paths with a wildcard asterix', (assert) => {
   assert.equal(
     matchHash('/examples/example1', routes),
-    routes[5],
+    routes[6],
     'Should return the correct route object'
   )
 
   assert.equal(
     matchHash('/examples/example1/subexample/and-another-page', routes),
-    routes[5],
+    routes[6],
     'Should return the correct route object'
   )
 
-  assert.equal(matchHash('/404', routes), routes[7], 'Should return the correct route object')
+  assert.equal(matchHash('/404', routes), routes[9], 'Should return the correct route object')
+
+  assert.equal(
+    matchHash('/page1/non-existing-path', routes),
+    routes[9],
+    'Should return the correct route object'
+  )
 
   assert.equal(
     matchHash('/page1/subpage1/i-dont-exist', routes),
-    routes[7],
+    routes[9],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/completely/unexpected/route', routes),
+    routes[9],
     'Should return the correct route object'
   )
 
@@ -124,6 +173,15 @@ test('Add params to route for dynamic route matches', (assert) => {
     'Should return the correct route object'
   )
 
+  const match3 = matchHash('/dutchmovies/1', routes)
+  assert.deepEqual(
+    match3.params,
+    {
+      id: '1',
+    },
+    'Should return the correct route object'
+  )
+
   assert.end()
 })
 
@@ -166,7 +224,13 @@ test('Work with trailing slashes', (assert) => {
 
   assert.equal(
     matchHash('/route/with/trailing/slash', routes),
-    routes[6],
+    routes[7],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/tv/simpsons/seasons/first', routes),
+    routes[3],
     'Should return the correct route object'
   )
 
@@ -185,7 +249,13 @@ test('Work with and without leading slashes', (assert) => {
 
   assert.equal(
     matchHash('route/with/trailing/slash', routes),
-    routes[6],
+    routes[7],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('//tv/simpsons/seasons/first//', routes),
+    routes[3],
     'Should return the correct route object'
   )
 
@@ -208,7 +278,7 @@ test('Match routes case insensitive', (assert) => {
 
   assert.equal(
     matchHash('/Movies/Avengers-Endgame', routes),
-    routes[4],
+    routes[5],
     'Should return the correct route object'
   )
   assert.end()
@@ -234,5 +304,170 @@ test('Match routes case insensitive, but pass props with original casing', (asse
     'Should return the correct params object'
   )
 
+  const match3 = matchHash('/DutchMovies/ID_123', routes)
+  assert.deepEqual(
+    match3.params,
+    {
+      id: 'ID_123',
+    },
+    'Should return the correct params object'
+  )
+
+  assert.end()
+})
+
+test('Match paths with dynamic route parts along with query string params', (assert) => {
+  const hash1 = '#/tv/simpsons/seasons/first?token=123&ln=en'
+  document.location.hash = hash1
+
+  const { hash, path, queryParams } = getHash()
+
+  assert.equal(hash, hash1, 'Should return correct hash')
+  assert.equal(path, '/tv/simpsons/seasons/first', 'Should return the correct route path')
+  assert.equal(matchHash(path, routes), routes[3], 'Should return the correct route object')
+  assert.equal(
+    queryParams.get('token'),
+    '123',
+    'Should contain the correct query parameter key with value'
+  )
+  assert.equal(
+    queryParams.get('ln'),
+    'en',
+    'Should contain the correct query parameter key with value'
+  )
+  assert.end()
+})
+
+test('Get the hash from the URL', (assert) => {
+  const hash = '#/movies/action/the-avengers'
+  document.location.hash = hash
+
+  const result = getHash()
+
+  assert.equal(
+    result.hash,
+    hash,
+    'The result object should contain a hash key with the correct location hash'
+  )
+
+  assert.equal(
+    result.path,
+    '/movies/action/the-avengers',
+    'The result object should contain a path key with the hash (stripped the # symbol)'
+  )
+
+  assert.end()
+})
+
+test('Get the hash from the URL and handle query params', (assert) => {
+  const hash = '#/movies/comedy/the-hangover?category=1&item=2'
+  document.location.hash = hash
+
+  const result = getHash()
+
+  assert.equal(
+    result.hash,
+    hash,
+    'The result object should contain a hash key with the correct location hash without the query params'
+  )
+
+  assert.equal(
+    result.path,
+    '/movies/comedy/the-hangover',
+    'The result object should contain a path key with the hash (stripped the # symbol)'
+  )
+
+  assert.equal(
+    result.queryParams instanceof URLSearchParams,
+    true,
+    'The result object should contain a queryParams key with an URLSearchParams object'
+  )
+
+  assert.equal(
+    result.queryParams.get('category'),
+    '1',
+    'The result object should contain a queryParams key with the correct route query param values'
+  )
+
+  assert.equal(
+    result.queryParams.get('item'),
+    '2',
+    'The result object should contain a queryParams key with the correct route query param values'
+  )
+
+  assert.end()
+})
+
+test('Get route object from Match hash when navigating using to() method', (assert) => {
+  const hash = '/page1/subpage1'
+
+  to(hash)
+
+  const result = matchHash(hash, routes)
+
+  assert.equal(
+    result.path,
+    'page1/subpage1',
+    'The result object should contain a path key with path hash'
+  )
+  assert.equal(
+    Object.keys(result.params).length,
+    0,
+    'The results object should contain a params key with zero props'
+  )
+  assert.equal(
+    Object.keys(result.data).length,
+    0,
+    'The results object should contain a data key with zero props'
+  )
+  assert.equal(
+    Object.keys(result.options).length,
+    0,
+    'The results object should contain a options key with zero props'
+  )
+  assert.end()
+})
+
+test('Get route object from Match hash when navigating using to() method with options', (assert) => {
+  const hash = '/page1/subpage1'
+
+  to(hash, undefined, { keepAlive: true })
+
+  const result = matchHash(hash, routes)
+
+  assert.equal(
+    result.path,
+    'page1/subpage1',
+    'The result object should contain a path key with path hash'
+  )
+
+  assert.equal(
+    result.options.keepAlive,
+    true,
+    'The results object should contain a options key with keep alive as True'
+  )
+
+  assert.end()
+})
+
+test('Get Hash from URL when navigating using to() method', (assert) => {
+  const hash = '#/movies/action/avengers'
+
+  to(hash)
+
+  const result = getHash()
+
+  assert.equal(
+    result.hash,
+    hash,
+    'The result object key property should contain correct location hash'
+  )
+
+  assert.equal(
+    result.path,
+    '/movies/action/avengers',
+    'The result object should contain a path key with hash without #'
+  )
+
   assert.end()
 })