rewrite in Svelte v3

src/components/Redirect.html

@@ -1,8 +1,9 @@
 <script>
-	export default {
+	export let to, push;
-		oncreate() {
+
-			let { r: { router }, to, push } = this.get()
+	import { ROUTER } from './Router.html';
-			router.go(to, !push)
+	import { getContext } from 'svelte';
-		},
+
-	}
+	const { go } = getContext(ROUTER);
+	go(to, push);
 </script>

src/components/Route.html

@@ -1,40 +1,12 @@
-<div ref:mount/>
-
 <script>
-	import matchPath from '../utils/matchPath.js'
+	export let path, exact;
 
-	export default {
+	import { ROUTER } from './Router.html';
-		oncreate() {
+	import matchPath from '../utils/matchPath.js';
-			this.observe('r', update.bind(this))
+	import { getContext } from 'svelte';
-			this.observe('path', update.bind(this))
-		},
-	}
 
-	function update() {
+	const { pathname } = getContext(ROUTER);
-		let {
+	let match; $: match = path && matchPath($pathname, { path, exact });
-			r: { match, pathname, router } = {},
-			path,
-			exact,
-			component,
-		} = this.get()
-		let { _r } = this
-		if (path) {
-			let match = matchPath(pathname, { path, exact })
-			if (match) {
-				if (_r) {
-					_r.set({ match, r: { match, pathname, router } })
-				} else {
-					_r = new component({ target: this.refs.mount, data: { match, r: { match, pathname, router } } })
-				}
-			} else if (_r) {
-				_r.destroy()
-				_r = null
-			}
-		} else if (_r) {
-			_r.set({ match, r: { match, pathname, router } })
-		} else {
-			_r = new component({ target: this.refs.mount, data: { match, r: { match, pathname, router } } })
-		}
-		this._r = _r
-	}
 </script>
+
+{#if match}<slot {match}/>{/if}

src/components/Router.html

@@ -1,47 +1,39 @@
-{{yield}}
+<script context='module'>
+	export const ROUTER = {};
+</script>
 
 <script>
-	export default {
+	import { setContext, onDestroy } from 'svelte';
-		oncreate() {
+	import { writable } from 'svelte/store';
-			document.addEventListener('click', clickHandler.bind(this))
-			window.addEventListener('popstate', popHandler.bind(this))
-			this.set({ r: { router: this, pathname: document.location.pathname } })
-		},
-		methods: {
-			go(url, replace) {
-				history[replace ? 'replaceState' : 'pushState'](null, '', location.origin + url)
-				let r = this.get('r')
-				r.pathname = url
-				this.set({ r })
-			},
-		},
-	}
 
-	function clickHandler(event) {
+	const pathname = writable(document.location.pathname);
-		if (event.ctrlKey || event.metaKey || event.shiftKey || event.which !== 1) {
+	const go = (url, replace) => {
-			return
+		history[replace ? 'replaceState' : 'pushState'](null, '', location.origin + url);
-		}
+		pathname.set(url);
-		let elm = event.target
+	};
-		while (elm.nodeName !== 'A') {
+	setContext(ROUTER, { pathname, go });
-			elm = elm.parentElement
+
-			if (!elm) {
+	const clickHandler = event => {
-				return
+		if (!event.ctrlKey && !event.metaKey && !event.shiftKey && event.which === 1) {
+			const elm = event.target.closest('a');
+			if (elm && !elm.target) {
+				const url = elm.href;
+				if (url.startsWith(document.location.origin + '/')) {
+					event.preventDefault();
+					go(url.slice(document.location.origin.length));
+				}
 			}
 		}
-		if (elm.target) {
+	};
-			return
+	document.addEventListener('click', clickHandler);
-		}
-		let url = elm.href
-		if (!url.startsWith(document.location.origin + '/')) {
-			return
-		}
-		event.preventDefault()
-		this.go(url.slice(document.location.origin.length))
-	}
 
-	function popHandler() {
+	const popstateHandler = () => pathname.set(document.location.pathname);
-		let r = this.get('r')
+	window.addEventListener('popstate', popstateHandler);
-		r.pathname = document.location.pathname
+
-		this.set({ r })
+	onDestroy(() => {
-	}
+		document.removeEventListener('click', clickHandler);
+		window.removeEventListener('popstate', popstateHandler);
+	});
 </script>
+
+<slot/>