Merge pull request #362 from sandeep-vedam/router-optional-param

Added router support for optional path

Author: uguraslan

docs/plugins/router/navigation.md

@@ -96,6 +96,46 @@ Router.navigate({
 
 This results in: `#player/12/44`
 
+## Optional router path
+
+There might be some cases in which you need a route path with an optional parameter at the end. Normally, you would have to define two different routes to the same component, one with the optional parameter and one without. Starting with Lightning-SDK `v5.3.0`, you can specify an optional router path parameter by adding a `?` suffix to the last parameter name.
+
+Please note that only the last parameter of any path is allowed to be an optional parameter. For example, if you have a route path with three parameters, you can make only the last parameter optional, but not the second parameter.
+
+When we define an optional parameter like this:
+```js
+{
+  path: 'player/:assetId/:playlistId?',
+  component: Player
+  name: 'player'
+}
+```
+
+This will generate two paths internally as below:
+
+```js
+{
+    path: 'player/:assetId/:playlistId'
+    component: Player
+    name: 'player'
+}
+{
+    path: 'player/:assetId',
+    component: Player,
+    name: 'player'
+}
+```
+
+The following example would *not* work because only the last parameter of the path can be optional:
+
+```js
+{
+  path: 'player/:assetId?/:playlistId',
+  component: Player
+  name: 'player'
+}
+```
+
 
 ## isNavigating Method
 

src/Router/utils/router.js

@@ -31,7 +31,7 @@ import { step, navigateQueue } from '../index'
 import { createRoute, getOption } from './route'
 import { createComponent } from './components'
 import Log from '../../Log'
-import { isWildcard } from './regex'
+import { isWildcard, stripRegex } from './regex'
 import emit from './emit'
 import { updateWidgets } from './widgets'
 import { setHistory, updateHistory } from './history'
@@ -262,6 +262,28 @@ const init = config => {
       console.error(`[Router]: ${config.bootComponent} is not a valid boot component`)
     }
   }
+  config.routes.forEach(item => {
+    // replacing regexes with 'R' to avoid issues with pattern matching below
+    const strippedPath = stripRegex(item.path)
+
+    // Pattern to identify the last path of the route
+    // It should start with "/:" + any word  and ends with "?"
+    // It should be the last path of the route
+    // valid => /player/:asset/:assetId? (:assetId is optional)
+    // invalid => /player/:asset/:assetId?/test (:assetId? is not an optional path)
+    // invalid => /player/:asset?/:assetId? (second path is not considered as an optional path)
+    const pattern = /.*\/:.*?\?$/u
+
+    if (pattern.test(strippedPath)) {
+      const optionalPath = item.path.substring(0, item.path.lastIndexOf('/'))
+      const originalPath = item.path.substring(0, item.path.lastIndexOf('?'))
+      item.path = originalPath
+      //Create another entry with the optional path
+      let optionalItem = { ...item }
+      optionalItem.path = optionalPath
+      config.routes.push(optionalItem)
+    }
+  })
   initialised = true
 }