@lightningjs/blits 0.6.11 → 0.6.13

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+# v0.6.13
+
+_16 feb 2024_
+
+- Upgraded to 0.7.2 of the renderer
+- Introduced new `maxheight` attribute (besided the existing `maxlines` attribute) for the `<Text />` component
+- Fixed issue with order of lifecycle event emits
+- Fixed logic to not unfoces a parent when it passes focus to a child
+- Removed temporary fix for renderer issue [#123](https://github.com/lightning-js/renderer/issues/123)
+
+# v0.6.12
+
+_9 feb 2024_
+
+- Added type hinting for `this.$clearInterval` and `this.$clearTimeout`
+- Fixed issue with `.gitignore` in app create flow
+- Added support for dynamic route parts in the router (i.e `/tv/:series/episodes/:episode`)
+
 # v0.6.11
 
 _7 feb 2024_

package/bin/helpers.js

@@ -182,7 +182,7 @@ export const gitInit = (cwd, fixturesBase) => {
     .then(({ stdout }) => (msg = stdout))
     .then(() => {
       return fs.copyFileSync(
-        path.join(fixturesBase, 'common/git/.gitignore'),
+        path.join(fixturesBase, 'common/git/gitignore'),
         path.join(cwd, '.gitignore')
       )
     })

package/boilerplate/common/git/gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+build
+dist
+env

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.6.11",
+  "version": "0.6.13",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "test": "c8 npm run test:run",
-    "test:run": "tape '{,!(node_modules)/**/}*.test.js' | tap-diff",
+    "test:run": "node -r 'global-jsdom/register' ./node_modules/.bin/tape '{,!(node_modules)/**/}*.test.js' | tap-diff",
     "lint": "eslint '**/*.js'",
     "lint:fix": "eslint '**/*.js' --fix",
     "prepublishOnly": "node scripts/prepublishOnly.js",
@@ -36,14 +36,16 @@
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "global-jsdom": "24.0.0",
     "husky": "^7.0.4",
+    "jsdom": "24.0.0",
     "lint-staged": "^12.3.3",
     "prettier": "^2.5.1",
     "tap-diff": "^0.1.1",
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.7.1",
+    "@lightningjs/renderer": "^0.7.2",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",

package/src/component.d.ts

@@ -142,12 +142,22 @@ declare namespace Component {
     * Set a timeout that is automatically cleaned upon component destroy
     */
     $setTimeout: (callback: (args: any) => void, ms?: number | undefined) => ReturnType<typeof setTimeout>
+    
+    /**
+    * Clear a timeout 
+    */
+    $clearTimeout: (id: ReturnType<typeof setTimeout>) => void
 
     /**
     * Set an interval that is automatically cleaned upon component destroy
     */
     $setInterval: (callback: (args: any) => void, ms?: number | undefined) => ReturnType<typeof setInterval>
-
+    
+    /**
+    * Clear a interval 
+    */
+    $clearInterval: (id: ReturnType<typeof setInterval>) => void
+    
     /**
     * Log to the console with prettier output and configurable debug levels in Settings
     */

package/src/component.js

@@ -97,15 +97,13 @@ const Component = (name = required('name'), config = required('config')) => {
       },
       set state(v) {
         if (states.indexOf(v) > -1 && v !== this.current) {
-          Log.debug(
-            `Setting lifecycle state from ${this.previous} to ${v} for ${scope.componentId}`
-          )
+          Log.debug(`Setting lifecycle state from ${this.current} to ${v} for ${scope.componentId}`)
           this.previous = this.current
+          this.current = v
           // emit 'private' hook
           privateEmit(v, name, scope)
           // emit 'public' hook
           emit(v, name, scope)
-          this.current = v
         }
       },
     }

package/src/components/FPScounter.js

@@ -19,8 +19,6 @@ import Component from '../component.js'
 import { renderer } from '../launch.js'
 import fps_sprite from '../../public/assets/fps_sprite.base64.js'
 
-console.log(fps_sprite)
-
 export default () =>
   Component('FPScounter', {
     /* eslint-disable no-unused-vars */

package/src/components/FPScounter.orig.js

@@ -19,8 +19,6 @@ import Component from '../component.js'
 import { renderer } from '../launch.js'
 import fps_sprite from '../../public/assets/fps_sprite.base64.js'
 
-console.log(fps_sprite)
-
 export default () =>
   Component('FPScounter', {
     template: `

package/src/components/Text.js

@@ -67,6 +67,9 @@ export default () =>
         function anonymous(component, elms, context) {
           elms[0].set('maxLines', component.maxlines)
         },
+        function anonymous(component, elms, context) {
+          elms[0].set('h', component.maxheight)
+        },
         function anonymous(component, elms, context) {
           elms[0].set('textAlign', component.align)
         },
@@ -95,6 +98,7 @@ export default () =>
       'align',
       'wordwrap',
       'maxlines',
+      'maxheight',
       'lineheight',
       'contain',
       '@loaded',
@@ -105,7 +109,7 @@ export default () =>
       _contain() {
         return (
           this.contain ||
-          (this.wordwrap && this.maxlines ? 'both' : this.wordwrap ? 'width' : 'none')
+          (this.maxheight && this.wordwrap ? 'both' : this.wordwrap ? 'width' : 'none')
         )
       },
       _lineheight() {

package/src/components/Text.orig.js

@@ -35,6 +35,7 @@ export default () =>
         contain="$_contain"
         :wordWrap="$wordwrap"
         :maxLines="$maxlines"
+        :h="$maxheight"
         :textAlign="$align"
         :overflowSuffix="$textoverflow"
         @loaded="$@loaded"
@@ -59,6 +60,7 @@ export default () =>
       'align',
       'wordwrap',
       'maxlines',
+      'maxheight',
       'lineheight',
       'contain',
       '@loaded',
@@ -69,7 +71,7 @@ export default () =>
       _contain() {
         return (
           this.contain ||
-          (this.wordwrap && this.maxlines ? 'both' : this.wordwrap ? 'width' : 'none')
+          (this.maxheight && this.wordwrap ? 'both' : this.wordwrap ? 'width' : 'none')
         )
       },
       _lineheight() {

package/src/element.js

@@ -51,8 +51,6 @@ const unpackTransition = (obj) => {
   return obj
 }
 
-let firstNode = false
-
 const Props = {
   set parent(v) {
     this._props.parent = v === 'root' ? renderer.root : v.node
@@ -201,7 +199,7 @@ const Props = {
     this._props.contain = v
   },
   set maxLines(v) {
-    this.height = v * this.element.node.lineHeight
+    this._props.maxLines = v
   },
   set overflowSuffix(v) {
     this._props.overflowSuffix = v === false ? ' ' : v === true ? undefined : v
@@ -247,13 +245,6 @@ const Element = {
         this.props._set.has('src') || this.props._set.has('texture') ? 0xffffffff : 0
     }
 
-    // temporary workaround for renderer issue https://github.com/lightning-js/renderer/issues/123
-    if (!firstNode) {
-      this.props._props.src =
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII='
-      firstNode = true
-    }
-
     this.node = props.__textnode
       ? renderer.createTextNode(this.props._props)
       : renderer.createNode(this.props._props)

package/src/focus.js

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

package/src/router/router.js

@@ -36,17 +36,68 @@ export const getHash = () => {
   return (document.location.hash || '/').replace(/^#/, '')
 }
 
+const normalizePath = (path) => {
+  return (
+    path
+      // remove leading and trailing slashes
+      .replace(/^\/+|\/+$/g, '')
+      .toLowerCase()
+  )
+}
+
 export const matchHash = (path, routes = []) => {
-  const route = routes
-    .filter((r) => {
-      return r.path === path
-    })
-    .pop()
-  if (route) {
-    route.options = { ...route.options, ...overrideOptions }
-    currentRoute = route
+  // remove trailing slashes
+  const originalPath = path
+  path = normalizePath(path)
+  let matchingRoute = false
+  let i = 0
+  while (!matchingRoute && i < routes.length) {
+    const route = routes[i]
+    route.path = normalizePath(route.path)
+    if (route.path === path) {
+      matchingRoute = route
+    } else if (route.path.indexOf(':') > -1) {
+      // match dynamic route parts
+      const dynamicRouteParts = [...route.path.matchAll(/:([^\s/]+)/gi)]
+
+      // construct a regex for the route with dynamic parts
+      let dynamicRoutePartsRegex = route.path
+      dynamicRouteParts.reverse().forEach((part) => {
+        dynamicRoutePartsRegex =
+          dynamicRoutePartsRegex.substring(0, part.index) +
+          '([^\\s/]+)' +
+          dynamicRoutePartsRegex.substring(part.index + part[0].length)
+      })
+
+      // test if the constructed regex matches the path
+      const match = originalPath.match(new RegExp(`${dynamicRoutePartsRegex}`, 'i'))
+
+      if (match) {
+        // map the route params to a params object
+        route.params = dynamicRouteParts.reverse().reduce((acc, part, index) => {
+          acc[part[1]] = match[index + 1]
+          return acc
+        }, {})
+        matchingRoute = route
+      }
+    } else if (route.path.endsWith('*')) {
+      const regex = new RegExp(route.path.replace(/\/?\*/, '/?([^\\s]*)'), 'i')
+      const match = path.match(regex)
+
+      if (match) {
+        if (match[1]) route.params = { path: match[1] }
+        matchingRoute = route
+      }
+    }
+    i++
   }
-  return route
+
+  if (matchingRoute) {
+    matchingRoute.options = { ...matchingRoute.options, ...overrideOptions }
+    currentRoute = matchingRoute
+  }
+
+  return matchingRoute
 }
 
 export const navigate = async function () {
@@ -81,16 +132,18 @@ export const navigate = async function () {
         holder.populate({})
         holder.set('w', '100%')
         holder.set('h', '100%')
-        view = await route.component(this[symbols.props], holder, this)
+        // merge props with potential route params to be injected into the component instance
+        const props = { ...this[symbols.props], ...route.params }
+        view = await route.component({ props }, holder, this)
         if (view[Symbol.toStringTag] === 'Module') {
           if (view.default && typeof view.default === 'function') {
-            view = view.default(this[symbols.props], holder, this)
+            view = view.default({ props }, holder, this)
           } else {
             Log.error("Dynamic import doesn't have a default export or default is not a function")
           }
         }
         if (typeof view === 'function') {
-          view = view(this[symbols.props], holder, this)
+          view = view({ props }, holder, this)
         }
       } else {
         holder = view[symbols.wrapper]
@@ -207,7 +260,13 @@ export const back = () => {
   if (route) {
     // set indicator that we are navigating back (to prevent adding page to history stack)
     navigatingBack = true
-    to(route.path)
+    let targetRoutePath = route.path
+    if (targetRoutePath.indexOf(':') > -1) {
+      Object.keys(route.params).forEach((item) => {
+        targetRoutePath = targetRoutePath.replace(`:${item}`, route.params[item])
+      })
+    }
+    to(targetRoutePath)
     return true
   } else {
     return false

package/src/router/router.test.js

@@ -0,0 +1,238 @@
+/*
+ * Copyright 2024 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 test from 'tape'
+import { matchHash } from './router.js'
+
+const routes = [
+  {
+    path: '/',
+  },
+  {
+    path: '/page1',
+  },
+  {
+    path: '/page1/subpage1',
+  },
+  {
+    path: '/tv/:show/seasons/:season',
+  },
+  {
+    path: '/movies/:name',
+  },
+  {
+    path: '/examples/*',
+  },
+  {
+    path: '/route/with/trailing/slash/',
+  },
+  {
+    path: '*',
+  },
+]
+
+test('Type of matchHash', (assert) => {
+  const expected = 'function'
+  const actual = typeof matchHash
+
+  assert.equal(actual, expected, 'matchhash should be a function')
+  assert.end()
+})
+
+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('/page1', routes), routes[1], 'Should return the correct route object')
+  assert.equal(
+    matchHash('/page1/subpage1', routes),
+    routes[2],
+    'Should return the correct route object'
+  )
+  assert.end()
+})
+
+test('Match paths with dynamic route parts', (assert) => {
+  assert.equal(
+    matchHash('/tv/simpsons/seasons/first', routes),
+    routes[3],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/movies/avengers-endgame', routes),
+    routes[4],
+    'Should return the correct route object'
+  )
+  assert.end()
+})
+
+test('Match paths with a wildcard asterix', (assert) => {
+  assert.equal(
+    matchHash('/examples/example1', routes),
+    routes[5],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/examples/example1/subexample/and-another-page', routes),
+    routes[5],
+    'Should return the correct route object'
+  )
+
+  assert.equal(matchHash('/404', routes), routes[7], 'Should return the correct route object')
+
+  assert.equal(
+    matchHash('/page1/subpage1/i-dont-exist', routes),
+    routes[7],
+    'Should return the correct route object'
+  )
+
+  assert.end()
+})
+
+test('Add params to route for dynamic route matches', (assert) => {
+  const match1 = matchHash('/tv/simpsons/seasons/first', routes)
+
+  assert.deepEqual(
+    match1.params,
+    {
+      show: 'simpsons',
+      season: 'first',
+    },
+    'Should return the correct params object'
+  )
+
+  const match2 = matchHash('/movies/avengers-endgame', routes)
+  assert.deepEqual(
+    match2.params,
+    {
+      name: 'avengers-endgame',
+    },
+    'Should return the correct route object'
+  )
+
+  assert.end()
+})
+
+test('Add remaining path as param for wild card routes', (assert) => {
+  const match1 = matchHash('/examples/example1', routes)
+  assert.deepEqual(match1.params, { path: 'example1' }, 'Should return the correct route object')
+
+  const match2 = matchHash('/examples/example1/subexample/and-another-page', routes)
+  assert.deepEqual(
+    match2.params,
+    { path: 'example1/subexample/and-another-page' },
+    'Should return the correct params object'
+  )
+
+  const match3 = matchHash('/404', routes)
+  assert.deepEqual(match3.params, { path: '404' }, 'Should return the correct params object')
+
+  const match4 = matchHash('/page1/subpage1/i-dont-exist', routes)
+  assert.deepEqual(
+    match4.params,
+    { path: 'page1/subpage1/i-dont-exist' },
+    'Should return the correct params object'
+  )
+
+  assert.end()
+})
+
+test('Work with trailing slashes', (assert) => {
+  assert.equal(matchHash('/page1/', routes), routes[1], 'Should return the correct route object')
+  assert.equal(
+    matchHash('/page1//////', routes),
+    routes[1],
+    'Should return the correct route object'
+  )
+  assert.equal(
+    matchHash('/page1/subpage1/', routes),
+    routes[2],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/route/with/trailing/slash', routes),
+    routes[6],
+    'Should return the correct route object'
+  )
+
+  assert.end()
+})
+
+test('Work with and without leading slashes', (assert) => {
+  assert.equal(matchHash('page1/', routes), routes[1], 'Should return the correct route object')
+
+  assert.equal(matchHash('////page1', routes), routes[1], 'Should return the correct route object')
+  assert.equal(
+    matchHash('page1/subpage1/', routes),
+    routes[2],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('route/with/trailing/slash', routes),
+    routes[6],
+    'Should return the correct route object'
+  )
+
+  assert.end()
+})
+
+test('Match routes case insensitive', (assert) => {
+  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(
+    matchHash('/pagE1/SUBpage1', routes),
+    routes[2],
+    'Should return the correct route object'
+  )
+  assert.equal(
+    matchHash('/Tv/SimpsonS/Seasons/First', routes),
+    routes[3],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/Movies/Avengers-Endgame', routes),
+    routes[4],
+    'Should return the correct route object'
+  )
+  assert.end()
+})
+
+test('Match routes case insensitive, but pass props with original casing', (assert) => {
+  const match1 = matchHash('/Tv/SimpsonS/Seasons/First', routes)
+  assert.deepEqual(
+    match1.params,
+    {
+      show: 'SimpsonS',
+      season: 'First',
+    },
+    'Should return the correct params object'
+  )
+
+  const match2 = matchHash('/Movies/Avengers-Endgame', routes)
+  assert.deepEqual(
+    match2.params,
+    {
+      name: 'Avengers-Endgame',
+    },
+    'Should return the correct params object'
+  )
+
+  assert.end()
+})