@lightningjs/blits 0.6.11 → 0.6.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# 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.12",
   "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,7 +36,9 @@
     "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",

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/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()
+})