Merge branch 'master' of github.com:ItalyPaleAle/svelte-spa-router

Advanced Usage.md

@@ -1,4 +1,4 @@
-# Advnaced usage
+# Advanced usage
 
 svelte-spa-router is simple by design. A minimal router is easy to learn and implement, adds minimum overhead, and leaves more control in the hands of the developers.
 

active.js

@@ -70,7 +70,7 @@ export default function active(node, path, className) {
     return {
         // When the element is destroyed, remove it from the list
         destroy() {
-            nodes = nodes.splice(nodes.indexOf(el), 1)
+            nodes.splice(nodes.indexOf(el), 1)
         }
     }
 }

example/src/App.svelte

@@ -28,6 +28,17 @@
 <!-- Show the router -->
 <Router {routes}/>
 
+<h2>Dynamic links</h2>
+<ul class="navigation-dynamic-links">
+{#each dynamicLinks as dl (dl.id)}
+    <li>
+        <a id="dynamic-link-{dl.id}" href={dl.link} use:link use:active>Dynamic Link {dl.id}</a>
+         - 
+        <i id="delete-link-{dl.id}" on:click={() => dynamicLinks = dynamicLinks.filter(e => e.id != dl.id)}>delete link</i>
+    </li>
+{/each}
+</ul>
+
 <style>
 /* Style for "active" links; need to mark this :global because the router adds the class directly */
 :global(a.active) {
@@ -48,4 +59,19 @@ import active from '../../active'
 
 // Import the list of routes
 import routes from './routes'
+
+let dynamicLinks = [
+    {
+        id: 1,
+        link: '/hello/dynamic-link-1'
+    },
+    {
+        id: 2,
+        link: '/hello/dynamic-link-2'
+    },
+    {
+        id: 3,
+        link: '/hello/dynamic-link-3'
+    }
+]
 </script>

package.json

@@ -32,7 +32,7 @@
     "regexparam": "^1.3.0"
   },
   "devDependencies": {
-    "chromedriver": "^74.0.0",
+    "chromedriver": "^76.0.0",
     "eslint": "^6.1.0",
     "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-svelte3": "^2.7.3",

test/02-active-action.test.js

@@ -46,6 +46,23 @@ describe('use:active action', function() {
             })
     })
 
+    it('active dynamic links', (browser) => {
+
+        // Check if elements are still tagged active after one is removed
+        browser
+            .url('http://localhost:5000/#/')
+            .waitForElementVisible('ul.navigation-dynamic-links')
+            // delete second link
+            .click('i[id=delete-link-2]')
+            .pause(1000)
+            // click second link
+            .click('a[id=dynamic-link-1]')
+            .pause(1000)
+            //check for active class on link-1
+            .expect.element('a[id=dynamic-link-1]').to.have.attribute('class').which.contains('active')
+        browser.end()
+    })
+
     it('navigating pages', (browser) => {
         browser
             .url('http://localhost:5000/#/hello/world')