@lightningjs/blits 0.6.10 → 0.6.12

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # 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_
+
+- Enabled the use of `type` as a component prop or state variable
+- Removed setting focus to AppComponent on back key press in RouterView
+- Fixed broken app create flow caused by missing dev dependencies in npx command (temporary fix)
+
 # v0.6.10
 
 _2 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.10",
+  "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,22 +36,23 @@
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "esm": "^3.2.25",
-    "execa": "^8.0.1",
+    "global-jsdom": "24.0.0",
     "husky": "^7.0.4",
-    "kolorist": "^1.8.0",
+    "jsdom": "24.0.0",
     "lint-staged": "^12.3.3",
-    "ora": "^7.0.1",
     "prettier": "^2.5.1",
-    "prompts": "^2.4.2",
-    "replace-in-file": "^6.1.0",
     "tap-diff": "^0.1.1",
-    "tape": "^5.5.0",
-    "validate-npm-package-name": "^5.0.0"
+    "tape": "^5.5.0"
   },
   "dependencies": {
     "@lightningjs/renderer": "^0.7.1",
-    "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
+    "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
+    "execa": "^8.0.1",
+    "kolorist": "^1.8.0",
+    "ora": "^7.0.1",
+    "prompts": "^2.4.2",
+    "replace-in-file": "^6.1.0",
+    "validate-npm-package-name": "^5.0.0"
   },
   "repository": {
     "type": "git",

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

@@ -122,12 +122,6 @@ const Component = (name = required('name'), config = required('config')) => {
     this[symbols.wrapper] = parentEl
 
     Object.defineProperties(this, {
-      type: {
-        value: name,
-        writable: false,
-        enumerable: true,
-        configurable: false,
-      },
       componentId: {
         value: createHumanReadableId(name),
         writable: false,

package/src/components/RouterView.js

@@ -63,8 +63,8 @@ export default () =>
       },
     },
     input: {
-      back(e) {
-        if (!Router.back()) this.parent.focus(e)
+      back() {
+        Router.back()
       },
     },
   })

package/src/components/RouterView.orig.js

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

package/src/lib/codegenerator/generator.js

@@ -64,14 +64,11 @@ const generateElementCode = function (
   const children = templateObject['children']
   delete templateObject['children']
 
-  Object.keys(templateObject).forEach((key) => {
-    if (key === 'type') {
-      if (templateObject[key] === 'Slot') {
-        renderCode.push(`elementConfig${counter}[Symbol.for('isSlot')] = true`)
-      }
-      return
-    }
+  if (templateObject[Symbol.for('componentType')] === 'Slot') {
+    renderCode.push(`elementConfig${counter}[Symbol.for('isSlot')] = true`)
+  }
 
+  Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
         elementConfig${counter}['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || component[Symbol.for('slots')][0] || parent
@@ -119,8 +116,10 @@ const generateComponentCode = function (
 
   renderCode.push(`
     const cmp${counter} =
-      (context.components && context.components['${templateObject.type}']) ||
-      component[Symbol.for('components')]['${templateObject.type}']
+      (context.components && context.components['${
+        templateObject[Symbol.for('componentType')]
+      }']) ||
+      component[Symbol.for('components')]['${templateObject[Symbol.for('componentType')]}']
   `)
 
   if ('key' in templateObject) {
@@ -149,7 +148,6 @@ const generateComponentCode = function (
 
   renderCode.push(`const props${counter} = {}`)
   Object.keys(templateObject).forEach((key) => {
-    if (key === 'type') return
     if (isReactiveKey(key)) {
       this.effectsCode.push(`
         ${elm}[Symbol.for('props')]['${key.substring(1)}'] = ${interpolate(
@@ -171,7 +169,13 @@ const generateComponentCode = function (
 
   renderCode.push(`
     if(!${elm}) {
-      ${elm} = (context.components && context.components['${templateObject.type}'] || component[Symbol.for('components')]['${templateObject.type}'] || (() => { console.error('component ${templateObject.type} not found')})).call(null, {props: props${counter}}, ${parent}, component)
+      ${elm} = (context.components && context.components['${
+    templateObject[Symbol.for('componentType')]
+  }'] || component[Symbol.for('components')]['${
+    templateObject[Symbol.for('componentType')]
+  }'] || (() => { console.error('component ${
+    templateObject[Symbol.for('componentType')]
+  } not found')})).call(null, {props: props${counter}}, ${parent}, component)
       if (${elm}[Symbol.for('slots')][0]) {
         parent = ${elm}[Symbol.for('slots')][0]
         component = ${elm}
@@ -245,7 +249,10 @@ const generateForLoopCode = function (templateObject, parent) {
     `)
   }
 
-  if (templateObject.type === 'Element' || templateObject.type === 'Slot') {
+  if (
+    templateObject[Symbol.for('componentType')] === 'Element' ||
+    templateObject[Symbol.for('componentType')] === 'Slot'
+  ) {
     generateElementCode.call(ctx, templateObject, parent, {
       key: 'scope.key',
       component: 'scope.',
@@ -283,7 +290,10 @@ const generateCode = function (templateObject, parent = false, options = {}) {
       if (Object.keys(childTemplateObject).indexOf(':for') > -1) {
         generateForLoopCode.call(this, childTemplateObject, parent)
       } else {
-        if (childTemplateObject.type === 'Element' || childTemplateObject.type === 'Slot') {
+        if (
+          childTemplateObject[Symbol.for('componentType')] === 'Element' ||
+          childTemplateObject[Symbol.for('componentType')] === 'Slot'
+        ) {
           generateElementCode.call(this, childTemplateObject, parent, options)
         } else {
           generateComponentCode.call(this, childTemplateObject, parent, options)

package/src/lib/symbols.js

@@ -36,4 +36,6 @@ export default {
   props: Symbol.for('props'),
   // Symbol 'slots' utilized within generated code
   slots: Symbol.for('slots'),
+  // Symbol 'componentType' utilized within generated code
+  componentType: Symbol.for('componentType'),
 }

package/src/lib/templateparser/parser.js

@@ -77,7 +77,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
     const match = moveCursorOnMatch(emptyTagStartRegex)
     if (match) {
       tags.push({
-        type: null,
+        [Symbol.for('componentType')]: null,
         [symbols.type]: 'opening',
         [symbols.level]: currentLevel,
         [symbols.cursorTagStart]: prevCursor,
@@ -94,7 +94,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
     if (match) {
       currentLevel--
       tags.push({
-        type: null,
+        [Symbol.for('componentType')]: null,
         [symbols.type]: 'closing',
         [symbols.level]: currentLevel,
       })
@@ -108,7 +108,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
     const match = moveCursorOnMatch(tagStartRegex)
     if (match) {
       currentTag = {
-        type: match[1],
+        [Symbol.for('componentType')]: match[1],
         [symbols.level]: currentLevel,
         [symbols.cursorTagStart]: prevCursor,
       }
@@ -221,7 +221,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
           [symbols.level]: element[symbols.level],
           [symbols.type]: element[symbols.type],
           [symbols.cursorTagStart]: element[symbols.cursorTagStart],
-          type: element.type,
+          [Symbol.for('componentType')]: element[Symbol.for('componentType')],
           parent: currentParent, // helps getting the previous parent when closing tag is encountered
         })
       } else if (element[symbols.type] === 'closing') {
@@ -230,7 +230,9 @@ export default (template = '', componentName, parentComponent, filePath = null)
         let isTagMismatch = false
         if (!isStackEmpty) {
           isLevelMismatch = stack[stack.length - 1][symbols.level] !== element[symbols.level]
-          isTagMismatch = stack[stack.length - 1].type !== element.type
+          isTagMismatch =
+            stack[stack.length - 1][Symbol.for('componentType')] !==
+            element[Symbol.for('componentType')]
         }
 
         if (isStackEmpty || isLevelMismatch || isTagMismatch) {
@@ -329,7 +331,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
       let currentParent = parentComponent
 
       while (currentParent) {
-        hierarchy = `${currentParent.type}/${hierarchy}`
+        hierarchy = `${currentParent[Symbol.for('componentType')]}/${hierarchy}`
         currentParent = currentParent.parent
       }
       return hierarchy

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