new config action

README.MD

@@ -40,8 +40,6 @@ router(<routes>, <options>);
 
 ### As legacy javascript files using script tags. ###
 ```javascript
-// path-to-regexp need to be loaded before steroid-router.min.js
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/steroid-router@latest/dist/steroid-router.min.js"></script>
 ...
 <script>
@@ -105,7 +103,7 @@ Note: Always first matching route will be used.
 
 Navigation
 ----------
-steroid-router supports both declative and imperative navigation approach
+steroid-router supports both declarative and imperative navigation approach
 
 ### Declarative navigation
 Just add the class `steroid-route` to the anchor tag `<a>` to make it as steroid route.
@@ -117,18 +115,19 @@ where,
 
 Additonally, optinal navigation parameters can be passed using `data-*` attributes like below:
 ```html
-<a class="steroid-route" href="/course" data-withstack="true" data-withstate='{"id":2}' data-withtitle="course">Course</a>
+<a class="steroid-route" href="/course" data-withstack="true" data-withstate='{"id":2}' data-withtitle="course" data-withaction="true">Course</a>
 ```
 ###  Imperative navigation
 Router function returns object with navigation menthod named navigateTo()
 ```javascript
-routeHandler.navigateTo(url, withStack?, state?, title?);
+routeHandler.navigateTo(url, withStack?, state?, title?, action?);
 ```
 
  - `url` - the client side route to navigate to
  - `withStack` (optional) - whether the current route route need to be stacked. `default: false`
  - `state` (optional) - state object to pass to the route
  - `title` (optional) - Title of the route - not widely adopted (Refer: https://github.com/whatwg/html/issues/2174 for more details)
+ - `action` (optional) - Whether route action should be triggered - useful for post navigation url updates. `default: true`
 
 Server
 -------

docs/demo/200.html

@@ -15,7 +15,6 @@
   <div id="root" class="container mx-auto d-flex flex-column align-items-center">
     <h1>This is index page</h1>
   </div>
-  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/steroid-router@latest/dist/steroid-router.min.js"></script>
   <script type="text/javascript" src="/js/index.js"></script>
 </body>

docs/demo/index.html

@@ -15,7 +15,6 @@
   <div id="root" class="container mx-auto d-flex flex-column align-items-center">
     <h1>This is index page</h1>
   </div>
-  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/steroid-router@latest/dist/steroid-router.min.js"></script>
   <script type="text/javascript" src="/js/index.js"></script>
 </body>

package.json

@@ -43,6 +43,7 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.14",
+    "rollup-plugin-external-globals": "^0.6.1",
     "rollup-plugin-terser": "^7.0.2"
   },
   "dependencies": {

rollup.config.js

@@ -13,8 +13,6 @@ export default [
     input,
     plugins: [
       nodeResolve(),
-      excludeDependenciesFromBundle(),
-      commonjs(),
       babel({
         babelHelpers: "bundled",
       }),

src/index.js

@@ -23,13 +23,15 @@ const router = (routes, options = {}) => {
     }
   };
 
-  const navigateTo = (url, withStack = false, state = {}, title = '') => {
+  const navigateTo = (url, withStack = false, state = {}, title = '', action = true) => {
     if (!withStack) {
       window.history.replaceState(state, title, url);
     } else {
       window.history.pushState(state, title, url);
     }
-    handleRoute();
+    if (action) {
+      handleRoute();
+    }
   };
 
   const listener = () => {
@@ -46,7 +48,9 @@ const router = (routes, options = {}) => {
         const withStack = Boolean(target.getAttribute('data-withstack'));
         const withState = target.getAttribute('data-withstate');
         const withTitle = target.getAttribute('data-withtitle');
-        navigateTo(path, (currentPath !== path && withStack), JSON.parse(withState), withTitle || '');
+        let withAction = target.getAttribute('data-withaction');
+        withAction = withAction ? Boolean(withAction) : true;
+        navigateTo(path, (currentPath !== path && withStack), JSON.parse(withState), withTitle || '', withAction);
       }
     });
   };