svelte-spa-history-router 2.0.0 → 2.1.1

package/README.md

@@ -5,8 +5,8 @@ History base router for Svelte 3 SPA (Single Page Application).
 ## Features
 
 - History-base routing
-- Regular expression is supported for path matching and caputuring path variables
-- resolver (for dynamic routing, code-splitting, preloading data, etc...)
+- path matching and path variable capturing by regular expression
+- resolver (for dynamic routing, code-splitting, data preloading, etc...)
 
 ## *Not* supported features
 
@@ -74,7 +74,7 @@ For example:
 </div>
 ```
 
-### Navitation methods
+### Navigation methods
 
 To navigate another page, `link` and `push` are available.
 
@@ -96,9 +96,87 @@ import { push } from 'svelte-spa-history-router';
 
 ### resolver
 
+Resolver is a mechanism to dynamically determine component and can be used in multiple use cases.
+
+Example: code spliting (dynamic import)
+
+```html
+<script>
+  import { Router } from 'svelte-spa-history-router';
+
+  const routes = [
+    { path: '/', resolver: _ => import("Home.svelte") },
+  ];
+</script>
+<Router {routes}/>
+```
+
+Example: dynamic routing and pass value to component props.
+
+```html
+<script>
+  import { Router } from 'svelte-spa-history-router';
+
+  import Article from "./Article.svelte";
+  import NotFound from "./NotFound.svelte";
+
+  async function prefetchArticle(route) {
+    const article = await getArticle(route.params.postId);
+    if (article) {
+      // pass value to component props
+      route.props.article = article;
+      return Article;
+    } else {
+      return NotFound;
+    }
+  }
+
+  const routes = [
+    { path: '/posts/(?<postId>.*)', resolver: prefetchArticle },
+  ];
+</script>
+<Router {routes}/>
+```
+
+Example: guard
+
+```html
+<script>
+  import { Router, redirect } from 'svelte-spa-history-router';
+
+  import Admin from "./Admin.svelte";
+
+  function adminGuard(route) {
+    if (!isAdmin($user)) {
+      return redirect("/");
+    }
+    return Admin;
+  }
+
+  const routes = [
+    { path: '/', component: Home },
+    { path: '/admin', resolver: adminGuard },
+  ];
+</script>
+<Router {routes}/>
+```
+
 (Added in v2.0.0)
 
-see [example](https://github.com/ykrods/svelte-spa-history-router/blob/main/example/App.svelte#L13)
+### currentURL
+
+store to detect URL changes (including query string or hash)
+
+```html
+<script>
+  import { currentURL } from "svelte-spa-history-router";
+
+  $: name = $currentURL.searchParams.get("name") || 'unknown';
+</script>
+<div>{ name }</div>
+```
+
+(Added in 2.1.0)
 
 ### Full example:
 
@@ -106,10 +184,18 @@ see [example](https://github.com/ykrods/svelte-spa-history-router/blob/main/exam
 
 ## ChangeLog
 
+### 2.1.1 (2024-01-13)
+
+* Support Types
+
+### 2.1.0 (2021-04-29)
+
+* Add `currentURL` store to detect URL changes [PR6](https://github.com/ykrods/svelte-spa-history-router/pull/6)
+
 ### 2.0.0 (2021-04-15)
 
-* [Added] route resolver
-* [Removed] route guard
+* [Added] resolver
+* [Removed] guard
 
 ### 1.1.1 (2021-04-12)
 

package/example/App.svelte

@@ -1,16 +1,15 @@
 <script>
-  import { Router, link, redirect } from '../src/index';
+  import { Router, link, redirect } from '../src/index.js';
 
-  import { user } from './store';
-  import { getArticle } from './data-source';
+  import { user } from './store.js';
+  import { getArticle } from './data-source.js';
 
   // static routes
   import Home from './Home.svelte';
   import Admin from './Admin.svelte';
-  import Login from './Login.svelte';
   import NotFound from "./NotFound.svelte";
 
-  function adminGuard(route) {
+  function adminGuard() {
     if ($user === null) {
       return redirect("/login");
     } else {
@@ -18,6 +17,9 @@
     }
   }
 
+  /**
+   * @param {import("../src/types").RouteState} route
+   */
   async function prefetchArticle(route) {
     const article = await getArticle(route.params.postId);
     if (article) {
@@ -33,7 +35,8 @@
     { path: '/', component: Home},
     { path: '/posts/(?<postId>.*)', resolver: prefetchArticle },
     { path: '/admin', resolver: adminGuard },
-    { path: '/login', component: Login },
+    { path: '/login', resolver: () => import("./Login.svelte") },
+    { path: '/query', resolver: () => import("./Query.svelte") },
   ];
 </script>
 
@@ -42,6 +45,7 @@
     <li><a use:link href="/">Home</a></li>
     <li><a use:link href="/admin">Admin</a></li>
     <li><a use:link href="/login">Login</a></li>
+    <li><a use:link href="/query">Query</a></li>
   </ul>
 </div>
 

package/example/Article.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { link } from '../src/index';
-  import { routeParams } from '../src/stores';
+  import { link } from '../src/index.js';
+  import { routeParams } from '../src/stores.js';
 
   export let article;
 

package/example/Home.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { link, push } from '../src/index';
+  import { link, push } from '../src/index.js';
 
-  import { getArticles } from './data-source';
+  import { getArticles } from './data-source.js';
 
   let articlesPromise = getArticles();
 

package/example/Login.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { push } from '../src/push';
+  import { push } from '../src/push.js';
 
-  import { user } from './store';
+  import { user } from './store.js';
 
   function login() {
     $user = "admin";

package/example/Query.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { link } from "../src/link.js";
+  import { currentURL } from "../src/stores.js";
+
+  $: name = $currentURL.searchParams.get("name") || 'unknown';
+</script>
+<svelte:head>
+  <title>query</title>
+</svelte:head>
+<div class="query">
+  <p>name: <span id="name">{ name }</span></p>
+  <a use:link href="/query?name=foo">foo</a>
+  <a use:link href="/query?name=bar">bar</a>
+</div>

package/example/data-source.js

@@ -4,12 +4,8 @@
  * Dummy APIs for fetch data
  */
 
-async function sleep(s) {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve();
-    }, s * 1000);
-  });
+function sleep(time) {
+  return new Promise(resolve => setTimeout(resolve, time));
 };
 
 const articles = [
@@ -37,7 +33,7 @@ const articles = [
 ];
 
 export async function getArticles() {
-  await sleep(0.1);
+  await sleep(100);
   return articles;
 }
 

package/example/dist/Article.js

@@ -1,6 +1,6 @@
-import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, g as globals, v as validate_store, r as routeParams, c as component_subscribe, a as validate_slots, l as link, e as element, t as text, b as attr_dev, f as add_location, h as insert_dev, j as append_dev, k as action_destroyer, m as detach_dev, n as space, o as set_data_dev, p as noop, H as HtmlTag } from './main2.js';
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_store, r as routeParams, c as component_subscribe, a as validate_slots, l as link, g as globals, b as space, e as element, t as text, f as add_location, h as attr_dev, j as insert_dev, k as append_dev, m as set_data_dev, n as noop, o as detach_dev, p as action_destroyer, H as HtmlTag } from './main2.js';
 
-/* Article.svelte generated by Svelte v3.35.0 */
+/* Article.svelte generated by Svelte v4.2.8 */
 
 const { console: console_1 } = globals;
 const file = "Article.svelte";
@@ -18,7 +18,7 @@ function create_if_block_1(ctx) {
 			a = element("a");
 			t = text("Prev");
 			attr_dev(a, "href", a_href_value = `/posts/${/*article*/ ctx[0].previous}`);
-			add_location(a, file, 18, 26, 375);
+			add_location(a, file, 18, 26, 381);
 		},
 		m: function mount(target, anchor) {
 			insert_dev(target, a, anchor);
@@ -35,7 +35,10 @@ function create_if_block_1(ctx) {
 			}
 		},
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(a);
+			if (detaching) {
+				detach_dev(a);
+			}
+
 			mounted = false;
 			dispose();
 		}
@@ -65,7 +68,7 @@ function create_if_block(ctx) {
 			a = element("a");
 			t = text("Next");
 			attr_dev(a, "href", a_href_value = `/posts/${/*article*/ ctx[0].next}`);
-			add_location(a, file, 19, 22, 459);
+			add_location(a, file, 19, 22, 465);
 		},
 		m: function mount(target, anchor) {
 			insert_dev(target, a, anchor);
@@ -82,7 +85,10 @@ function create_if_block(ctx) {
 			}
 		},
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(a);
+			if (detaching) {
+				detach_dev(a);
+			}
+
 			mounted = false;
 			dispose();
 		}
@@ -123,16 +129,17 @@ function create_fragment(ctx) {
 			h1 = element("h1");
 			t1 = text(t1_value);
 			t2 = space();
+			html_tag = new HtmlTag(false);
 			t3 = space();
 			div0 = element("div");
 			if (if_block0) if_block0.c();
 			t4 = space();
 			if (if_block1) if_block1.c();
-			add_location(h1, file, 15, 2, 293);
-			html_tag = new HtmlTag(t3);
-			add_location(div0, file, 17, 2, 343);
+			add_location(h1, file, 15, 2, 299);
+			html_tag.a = t3;
+			add_location(div0, file, 17, 2, 349);
 			attr_dev(div1, "class", "article");
-			add_location(div1, file, 14, 0, 269);
+			add_location(div1, file, 14, 0, 275);
 		},
 		l: function claim(nodes) {
 			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -187,8 +194,11 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(t0);
-			if (detaching) detach_dev(div1);
+			if (detaching) {
+				detach_dev(t0);
+				detach_dev(div1);
+			}
+
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
 		}
@@ -207,26 +217,32 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let $routeParams;
-	validate_store(routeParams, "routeParams");
+	validate_store(routeParams, 'routeParams');
 	component_subscribe($$self, routeParams, $$value => $$invalidate(1, $routeParams = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots("Article", slots, []);
+	validate_slots('Article', slots, []);
 	let { article } = $$props;
-	
-	const writable_props = ["article"];
+
+	$$self.$$.on_mount.push(function () {
+		if (article === undefined && !('article' in $$props || $$self.$$.bound[$$self.$$.props['article']])) {
+			console_1.warn("<Article> was created without expected prop 'article'");
+		}
+	});
+
+	const writable_props = ['article'];
 
 	Object.keys($$props).forEach(key => {
-		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console_1.warn(`<Article> was created with unknown prop '${key}'`);
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<Article> was created with unknown prop '${key}'`);
 	});
 
 	$$self.$$set = $$props => {
-		if ("article" in $$props) $$invalidate(0, article = $$props.article);
+		if ('article' in $$props) $$invalidate(0, article = $$props.article);
 	};
 
 	$$self.$capture_state = () => ({ link, routeParams, article, $routeParams });
 
 	$$self.$inject_state = $$props => {
-		if ("article" in $$props) $$invalidate(0, article = $$props.article);
+		if ('article' in $$props) $$invalidate(0, article = $$props.article);
 	};
 
 	if ($$props && "$$inject" in $$props) {
@@ -255,13 +271,6 @@ class Article extends SvelteComponentDev {
 			options,
 			id: create_fragment.name
 		});
-
-		const { ctx } = this.$$;
-		const props = options.props || {};
-
-		if (/*article*/ ctx[0] === undefined && !("article" in props)) {
-			console_1.warn("<Article> was created without expected prop 'article'");
-		}
 	}
 
 	get article() {
@@ -273,5 +282,5 @@ class Article extends SvelteComponentDev {
 	}
 }
 
-export default Article;
+export { Article as default };
 //# sourceMappingURL=Article.js.map

package/example/dist/Article.js.map

@@ -1 +1 @@
-{"version":3,"file":"Article.js","sources":["../Article.svelte"],"sourcesContent":["<script>\n  import { link } from '../src/index';\n  import { routeParams } from '../src/stores';\n\n  export let article;\n\n  $: if ($routeParams.postId) {\n    console.log($routeParams.postId);\n  };\n</script>\n\n<svelte:head>\n  <title>{ article.title }</title>\n</svelte:head>\n<div class=\"article\">\n  <h1>{article.title}</h1>\n  {@html article.html}\n  <div>\n    {#if article.previous}<a use:link href={`/posts/${article.previous}`}>Prev</a>{/if}\n    {#if article.next}<a use:link href={`/posts/${article.next}`}>Next</a>{/if}\n  </div>\n</div>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;4DAkBsD,GAAO,IAAC,QAAQ;;;;;;;;;;;;;uFAAhB,GAAO,IAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4DACpB,GAAO,IAAC,IAAI;;;;;;;;;;;;;uFAAZ,GAAO,IAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAJvD,GAAO,IAAC,KAAK;;;;6BACX,GAAO,IAAC,IAAI;;;;4CAJV,GAAO,IAAC,KAAK;6BAMf,GAAO,IAAC,QAAQ;6BAChB,GAAO,IAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EAPV,GAAO,IAAC,KAAK;;;;qEAGjB,GAAO,IAAC,KAAK;uEACX,GAAO,IAAC,IAAI;;mBAEZ,GAAO,IAAC,QAAQ;;;;;;;;;;;;;mBAChB,GAAO,IAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAfR,OAAO;;;;;;;;;;;;;;;;;;;;;;;;OAEX,YAAY,CAAC,MAAM;IACxB,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Article.js","sources":["../Article.svelte"],"sourcesContent":["<script>\n  import { link } from '../src/index.js';\n  import { routeParams } from '../src/stores.js';\n\n  export let article;\n\n  $: if ($routeParams.postId) {\n    console.log($routeParams.postId);\n  };\n</script>\n\n<svelte:head>\n  <title>{ article.title }</title>\n</svelte:head>\n<div class=\"article\">\n  <h1>{article.title}</h1>\n  {@html article.html}\n  <div>\n    {#if article.previous}<a use:link href={`/posts/${article.previous}`}>Prev</a>{/if}\n    {#if article.next}<a use:link href={`/posts/${article.next}`}>Next</a>{/if}\n  </div>\n</div>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;YAkB0E,MAAI,CAAA,CAAA;AAAxB,GAAA,QAAA,CAAA,CAAA,EAAA,MAAA,EAAA,YAAA,GAAA,CAAA,OAAA,cAAA,GAAO,IAAC,QAAQ,CAAA,CAAA,CAAA,CAAA;;;;GAA5C,UAAwD,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;;AAA5B,GAAA,IAAA,KAAA,eAAA,CAAA,IAAA,YAAA,MAAA,YAAA,GAAA,CAAA,OAAA,cAAA,GAAO,IAAC,QAAQ,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YACJ,MAAI,CAAA,CAAA;AAApB,GAAA,QAAA,CAAA,CAAA,EAAA,MAAA,EAAA,YAAA,GAAA,CAAA,OAAA,cAAA,GAAO,IAAC,IAAI,CAAA,CAAA,CAAA,CAAA;;;;GAAxC,UAAoD,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;;AAAxB,GAAA,IAAA,KAAA,eAAA,CAAA,IAAA,YAAA,MAAA,YAAA,GAAA,CAAA,OAAA,cAAA,GAAO,IAAC,IAAI,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAJvD,CAAA,IAAA,QAAA,eAAA,GAAO,IAAC,KAAK,GAAA,EAAA,CAAA;;;;AACX,CAAA,IAAA,SAAA,eAAA,GAAO,IAAC,IAAI,GAAA,EAAA,CAAA;;;;AAJV,CAAA,QAAA,CAAA,KAAA,GAAA,WAAA,eAAA,GAAO,IAAC,KAAK,CAAA;AAMf,CAAA,IAAA,SAAA,eAAA,GAAO,IAAC,QAAQ,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;AAChB,CAAA,IAAA,SAAA,eAAA,GAAO,IAAC,IAAI,IAAA,eAAA,CAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GALrB,UAOM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;GANJ,UAAwB,CAAA,IAAA,EAAA,EAAA,CAAA,CAAA;;;;;GAExB,UAGM,CAAA,IAAA,EAAA,IAAA,CAAA,CAAA;;;;;;AARG,GAAA,IAAA,KAAA,eAAA,CAAA,IAAA,WAAA,MAAA,WAAA,eAAA,GAAO,IAAC,KAAK,CAAA,EAAA;;;;AAGjB,GAAA,IAAA,KAAA,eAAA,CAAA,IAAA,QAAA,MAAA,QAAA,eAAA,GAAO,IAAC,KAAK,GAAA,EAAA,CAAA,EAAA,YAAA,CAAA,EAAA,EAAA,QAAA,CAAA,CAAA;AACX,GAAA,IAAA,KAAA,eAAA,CAAA,IAAA,SAAA,MAAA,SAAA,eAAA,GAAO,IAAC,IAAI,GAAA,EAAA,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA;;AAEZ,GAAA,gBAAA,GAAO,IAAC,QAAQ,EAAA;;;;;;;;;;;;;AAChB,GAAA,gBAAA,GAAO,IAAC,IAAI,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAfR,OAAO,EAAA,GAAA,OAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEjB,IAAM,YAAY,CAAC,MAAM,EAAA;AACxB,IAAA,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/example/dist/Login.js

@@ -0,0 +1,214 @@
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_store, u as user, c as component_subscribe, a as validate_slots, q as push, e as element, b as space, f as add_location, h as attr_dev, j as insert_dev, k as append_dev, n as noop, o as detach_dev, w as set_store_value, t as text, x as listen_dev, m as set_data_dev } from './main2.js';
+
+/* Login.svelte generated by Svelte v4.2.8 */
+const file = "Login.svelte";
+
+// (18:2) {:else }
+function create_else_block(ctx) {
+	let t0;
+	let t1;
+	let t2;
+	let button;
+	let mounted;
+	let dispose;
+
+	const block = {
+		c: function create() {
+			t0 = text("current user: ");
+			t1 = text(/*$user*/ ctx[0]);
+			t2 = space();
+			button = element("button");
+			button.textContent = "logout";
+			attr_dev(button, "id", "logout");
+			add_location(button, file, 18, 26, 341);
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, t0, anchor);
+			insert_dev(target, t1, anchor);
+			insert_dev(target, t2, anchor);
+			insert_dev(target, button, anchor);
+
+			if (!mounted) {
+				dispose = listen_dev(button, "click", /*logout*/ ctx[2], false, false, false, false);
+				mounted = true;
+			}
+		},
+		p: function update(ctx, dirty) {
+			if (dirty & /*$user*/ 1) set_data_dev(t1, /*$user*/ ctx[0]);
+		},
+		d: function destroy(detaching) {
+			if (detaching) {
+				detach_dev(t0);
+				detach_dev(t1);
+				detach_dev(t2);
+				detach_dev(button);
+			}
+
+			mounted = false;
+			dispose();
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_else_block.name,
+		type: "else",
+		source: "(18:2) {:else }",
+		ctx
+	});
+
+	return block;
+}
+
+// (16:2) {#if $user === null }
+function create_if_block(ctx) {
+	let button;
+	let mounted;
+	let dispose;
+
+	const block = {
+		c: function create() {
+			button = element("button");
+			button.textContent = "login";
+			attr_dev(button, "id", "login");
+			add_location(button, file, 16, 2, 253);
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, button, anchor);
+
+			if (!mounted) {
+				dispose = listen_dev(button, "click", /*login*/ ctx[1], false, false, false, false);
+				mounted = true;
+			}
+		},
+		p: noop,
+		d: function destroy(detaching) {
+			if (detaching) {
+				detach_dev(button);
+			}
+
+			mounted = false;
+			dispose();
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_if_block.name,
+		type: "if",
+		source: "(16:2) {#if $user === null }",
+		ctx
+	});
+
+	return block;
+}
+
+function create_fragment(ctx) {
+	let div;
+	let h1;
+	let t1;
+
+	function select_block_type(ctx, dirty) {
+		if (/*$user*/ ctx[0] === null) return create_if_block;
+		return create_else_block;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type(ctx);
+
+	const block = {
+		c: function create() {
+			div = element("div");
+			h1 = element("h1");
+			h1.textContent = "Login";
+			t1 = space();
+			if_block.c();
+			add_location(h1, file, 14, 2, 212);
+			attr_dev(div, "class", "login");
+			add_location(div, file, 13, 0, 190);
+		},
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, div, anchor);
+			append_dev(div, h1);
+			append_dev(div, t1);
+			if_block.m(div, null);
+		},
+		p: function update(ctx, [dirty]) {
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(div, null);
+				}
+			}
+		},
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			if (detaching) {
+				detach_dev(div);
+			}
+
+			if_block.d();
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let $user;
+	validate_store(user, 'user');
+	component_subscribe($$self, user, $$value => $$invalidate(0, $user = $$value));
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Login', slots, []);
+
+	function login() {
+		set_store_value(user, $user = "admin", $user);
+	}
+
+	function logout() {
+		set_store_value(user, $user = null, $user);
+	}
+
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Login> was created with unknown prop '${key}'`);
+	});
+
+	$$self.$capture_state = () => ({ push, user, login, logout, $user });
+	return [$user, login, logout];
+}
+
+class Login extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Login",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export { Login as default };
+//# sourceMappingURL=Login.js.map

package/example/dist/Login.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Login.js","sources":["../Login.svelte"],"sourcesContent":["<script>\n  import { push } from '../src/push.js';\n\n  import { user } from './store.js';\n\n  function login() {\n    $user = \"admin\";\n  }\n  function logout() {\n    $user = null;\n  }\n</script>\n\n<div class=\"login\">\n  <h1>Login</h1>\n  {#if $user === null }\n  <button id=\"login\" on:click={login}>login</button>\n  {:else }\n  current user: { $user } <button id=\"logout\" on:click={logout}>logout</button>\n  {/if }\n</div>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;aAiBU,gBACM,CAAA,CAAA;uBAAE,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;GAAG,UAAqD,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,CAAA;;;qDAAvB,GAAM,CAAA,CAAA,CAAA,EAAA,KAAA,EAAA,KAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA;;;;;uDAA5C,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAFrB,UAAkD,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,CAAA;;;oDAArB,GAAK,CAAA,CAAA,CAAA,EAAA,KAAA,EAAA,KAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAD7B,EAAA,cAAA,GAAK,QAAK,IAAI,EAAA,OAAA,eAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;GAFrB,UAOM,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;GANJ,UAAc,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UATL,KAAK,GAAA;AACZ,EAAA,eAAA,CAAA,IAAA,EAAA,KAAK,GAAG,OAAO,EAAA,KAAA,CAAA,CAAA;;;UAER,MAAM,GAAA;AACb,EAAA,eAAA,CAAA,IAAA,EAAA,KAAK,GAAG,IAAI,EAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}