Render option default slot when no route was found

NestedRoute.html

@@ -6,6 +6,8 @@
     on:response
     on:event
   />
+{:else}
+  <slot></slot>
 {/if}
 
 <script>
@@ -14,6 +16,11 @@
       return {
         page: null
       }
+    },
+    onupdate({ changed, current }) {
+      if(changed.page && current.page == null) {
+        this.fire('notFound')
+      }
     }
   }
 </script>

README.md

@@ -89,19 +89,27 @@ Available events:
 - `strict` - If false, match trailling slash `(default: true)`
 - `hashbang` - Add `#!` before urls `(default: true)`
 
-## Static methods
+## Slots
 
-```js
-import Router from 'svelte-page/Router.html';
+Both `<Router>` and `<NestedRoute>` have the optional `default` slot which is only rendered when the current route isn't associated with any component.
 
-/** Show the specified route with an optional data object */
-Router.go(path, optionalData)
+```html
+<Router ...>
+  404 - Route not found
+</Router>
 
-/** Go back to the previous route */
-Router.back()
+<NestedRoute>
+  Nested route not found
+</NestedRoute>
+```
 
-/** Get the router current path */
-Router.getCurrentPath() // '/about/me'
+## Events
+
+When a route isn't found, both the `<Router>` and `<NestedRoute>` fire a `notFound` event.
+
+```html
+<Router on:notFound="console.log('Route not found!!!')" />
+<NestedRoute on:notFound="console.log('NestedRoute not found!!!')" />
 ```
 
 ## Store events
@@ -117,6 +125,21 @@ store.on('router:navigation', context => {
 })
 ```
 
+## Static methods
+
+```js
+import Router from 'svelte-page/Router.html';
+
+/** Show the specified route with an optional data object */
+Router.go(path, optionalData)
+
+/** Go back to the previous route */
+Router.back()
+
+/** Get the router current path */
+Router.getCurrentPath() // '/about/me'
+```
+
 ## Example
 
 **App.html**

Router.html

@@ -1,5 +1,10 @@
-{#if page}
-<svelte:component this={page.child} {...page.props} /> {/if}
+{#if _hasDefaultSlot}
+  <NestedRoute {page} on:notFound>
+    <slot></slot>
+  </NestedRoute>
+{:else}
+  <NestedRoute {page}/>
+{/if}
 
 <script>
   import page from 'page'
@@ -70,7 +75,7 @@
 
   const getSveltedHierarchy = Router => ctx => {
     const { components } = ctx
-    const props = {}
+    const props = { page: null }
 
     /** Data needs to always be an object or else nesting won't work */
     components.reduce((prev, { component, data = {} }) => {
@@ -95,6 +100,9 @@
   }
 
   export default {
+    components: {
+      NestedRoute: './NestedRoute.html',
+    },
     setup(Router) {
       Router.go = page.show
       Router.back = page.back
@@ -105,10 +113,15 @@
         page: null,
         strict: true,
         hashbang: true,
+        _hasDefaultSlot: false,
       }
     },
     oncreate() {
-      const { routes, strict, hashbang } = this.get();
+      const { routes, strict, hashbang } = this.get()
+
+      if (this.options.slots && this.options.slots['default']) {
+        this.set({ _hasDefaultSlot: true })
+      }
 
       /** Set up the component hierarchy */
       page('*', (ctx, next) => {
@@ -129,6 +142,6 @@
 
       /** Start the router */
       page.start({ hashbang })
-    }
+    },
   }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-page",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "license": "MIT",
   "description": "Why not another option for routing in svelte?",
   "author": "Christian Kaisermann <christian@kaisermann.me>",