svelte-spa-history-router 2.1.0 → 2.1.2

package/README.md

@@ -24,7 +24,7 @@ $ yarn add svelte-spa-history-router
 
 ## Usage
 
-Import `Route` and put into your main component (typically App.svelte).
+Import `Router` and put into your main component (typically App.svelte).
 
 For example:
 
@@ -96,8 +96,6 @@ import { push } from 'svelte-spa-history-router';
 
 ### resolver
 
-(Added in v2.0.0)
-
 Resolver is a mechanism to dynamically determine component and can be used in multiple use cases.
 
 Example: code spliting (dynamic import)
@@ -120,6 +118,7 @@ Example: dynamic routing and pass value to component props.
   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);
@@ -145,7 +144,7 @@ Example: guard
 <script>
   import { Router, redirect } from 'svelte-spa-history-router';
 
-import Admin from "./Admin.svelte";
+  import Admin from "./Admin.svelte";
 
   function adminGuard(route) {
     if (!isAdmin($user)) {
@@ -162,12 +161,37 @@ import Admin from "./Admin.svelte";
 <Router {routes}/>
 ```
 
+(Added in v2.0.0)
+
+### 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:
 
 [example](https://github.com/ykrods/svelte-spa-history-router/tree/master/example)
 
 ## ChangeLog
 
+### 2.1.2 (2024-04-29)
+
+* Support types [PR10](https://github.com/ykrods/svelte-spa-history-router/pull/10)
+
+### 2.1.1 (2024-01-13)
+
+* ~~Support Types~~ Add typecheck [PR9](https://github.com/ykrods/svelte-spa-history-router/pull/9)
+
 ### 2.1.0 (2021-04-29)
 
 * Add `currentURL` store to detect URL changes [PR6](https://github.com/ykrods/svelte-spa-history-router/pull/6)

package/example/App.svelte

@@ -9,7 +9,7 @@
   import Admin from './Admin.svelte';
   import NotFound from "./NotFound.svelte";
 
-  function adminGuard(route) {
+  function adminGuard() {
     if ($user === null) {
       return redirect("/login");
     } else {
@@ -17,6 +17,9 @@
     }
   }
 
+  /**
+   * @param {import("../src/types").RouteState} route
+   */
   async function prefetchArticle(route) {
     const article = await getArticle(route.params.postId);
     if (article) {
@@ -32,8 +35,8 @@
     { path: '/', component: Home},
     { path: '/posts/(?<postId>.*)', resolver: prefetchArticle },
     { path: '/admin', resolver: adminGuard },
-    { path: '/login', resolver: _ => import("./Login.svelte") },
-    { path: '/query', resolver: _ => import("./Query.svelte") },
+    { path: '/login', resolver: () => import("./Login.svelte") },
+    { path: '/query', resolver: () => import("./Query.svelte") },
   ];
 </script>
 

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.37.0 */
+/* Article.svelte generated by Svelte v4.2.8 */
 
 const { console: console_1 } = globals;
 const file = "Article.svelte";
@@ -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();
 		}
@@ -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,13 +129,14 @@ 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, 299);
-			html_tag = new HtmlTag(t3);
+			html_tag.a = t3;
 			add_location(div0, file, 17, 2, 349);
 			attr_dev(div1, "class", "article");
 			add_location(div1, file, 14, 0, 275);
@@ -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.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":";;;;;;;;;;;;;;;;;;;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

@@ -1,6 +1,6 @@
-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, n as space, f as add_location, b as attr_dev, h as insert_dev, j as append_dev, p as noop, m as detach_dev, w as set_store_value, t as text, x as listen_dev, o as set_data_dev } from './main2.js';
+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 v3.37.0 */
+/* Login.svelte generated by Svelte v4.2.8 */
 const file = "Login.svelte";
 
 // (18:2) {:else }
@@ -29,7 +29,7 @@ function create_else_block(ctx) {
 			insert_dev(target, button, anchor);
 
 			if (!mounted) {
-				dispose = listen_dev(button, "click", /*logout*/ ctx[2], false, false, false);
+				dispose = listen_dev(button, "click", /*logout*/ ctx[2], false, false, false, false);
 				mounted = true;
 			}
 		},
@@ -37,10 +37,13 @@ function create_else_block(ctx) {
 			if (dirty & /*$user*/ 1) set_data_dev(t1, /*$user*/ ctx[0]);
 		},
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(t0);
-			if (detaching) detach_dev(t1);
-			if (detaching) detach_dev(t2);
-			if (detaching) detach_dev(button);
+			if (detaching) {
+				detach_dev(t0);
+				detach_dev(t1);
+				detach_dev(t2);
+				detach_dev(button);
+			}
+
 			mounted = false;
 			dispose();
 		}
@@ -74,13 +77,16 @@ function create_if_block(ctx) {
 			insert_dev(target, button, anchor);
 
 			if (!mounted) {
-				dispose = listen_dev(button, "click", /*login*/ ctx[1], false, false, false);
+				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);
+			if (detaching) {
+				detach_dev(button);
+			}
+
 			mounted = false;
 			dispose();
 		}
@@ -146,7 +152,10 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(div);
+			if (detaching) {
+				detach_dev(div);
+			}
+
 			if_block.d();
 		}
 	};
@@ -164,10 +173,10 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let $user;
-	validate_store(user, "user");
+	validate_store(user, 'user');
 	component_subscribe($$self, user, $$value => $$invalidate(0, $user = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots("Login", slots, []);
+	validate_slots('Login', slots, []);
 
 	function login() {
 		set_store_value(user, $user = "admin", $user);
@@ -180,7 +189,7 @@ function instance($$self, $$props, $$invalidate) {
 	const writable_props = [];
 
 	Object.keys($$props).forEach(key => {
-		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Login> was created with unknown prop '${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 });
@@ -201,5 +210,5 @@ class Login extends SvelteComponentDev {
 	}
 }
 
-export default Login;
+export { Login as default };
 //# sourceMappingURL=Login.js.map

package/example/dist/Login.js.map

@@ -1 +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":";;;;;;;;;;;;;;;;;uBAkBkB,GAAK;;;;;;;;;;;;;;qDAAiC,GAAM;;;;;uDAA5C,GAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAFQ,GAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAD7B,GAAK,QAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAVV,KAAK;wBACZ,KAAK,GAAG,OAAO;;;UAER,MAAM;wBACb,KAAK,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/example/dist/Query.js

@@ -1,6 +1,8 @@
-import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_store, y as currentURL, c as component_subscribe, a as validate_slots, l as link, n as space, 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, o as set_data_dev, p as noop, m as detach_dev, z as run_all } from './main2.js';
+import { S as SvelteComponentDev, i as init, s as safe_not_equal, d as dispatch_dev, v as validate_store, y as currentURL, c as component_subscribe, a as validate_slots, l as link, g as globals, b as space, e as element, t as text, h as attr_dev, f as add_location, j as insert_dev, k as append_dev, p as action_destroyer, m as set_data_dev, n as noop, o as detach_dev, z as run_all } from './main2.js';
 
-/* Query.svelte generated by Svelte v3.37.0 */
+/* Query.svelte generated by Svelte v4.2.8 */
+
+const { console: console_1 } = globals;
 const file = "Query.svelte";
 
 function create_fragment(ctx) {
@@ -33,14 +35,14 @@ function create_fragment(ctx) {
 			a1.textContent = "bar";
 			document.title = "query";
 			attr_dev(span, "id", "name");
-			add_location(span, file, 10, 11, 256);
-			add_location(p, file, 10, 2, 247);
+			add_location(span, file, 14, 11, 311);
+			add_location(p, file, 14, 2, 302);
 			attr_dev(a0, "href", "/query?name=foo");
-			add_location(a0, file, 11, 2, 294);
+			add_location(a0, file, 15, 2, 349);
 			attr_dev(a1, "href", "/query?name=bar");
-			add_location(a1, file, 12, 2, 339);
+			add_location(a1, file, 16, 2, 394);
 			attr_dev(div, "class", "query");
-			add_location(div, file, 9, 0, 225);
+			add_location(div, file, 13, 0, 280);
 		},
 		l: function claim(nodes) {
 			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -72,8 +74,11 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(t0);
-			if (detaching) detach_dev(div);
+			if (detaching) {
+				detach_dev(t0);
+				detach_dev(div);
+			}
+
 			mounted = false;
 			run_all(dispose);
 		}
@@ -93,20 +98,33 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let name;
 	let $currentURL;
-	validate_store(currentURL, "currentURL");
-	component_subscribe($$self, currentURL, $$value => $$invalidate(1, $currentURL = $$value));
+	validate_store(currentURL, 'currentURL');
+	component_subscribe($$self, currentURL, $$value => $$invalidate(2, $currentURL = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
-	validate_slots("Query", slots, []);
-	const writable_props = [];
+	validate_slots('Query', slots, []);
+	let { article = null } = $$props;
+	console.log(article);
+	const writable_props = ['article'];
 
 	Object.keys($$props).forEach(key => {
-		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Query> was created with unknown prop '${key}'`);
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<Query> was created with unknown prop '${key}'`);
 	});
 
-	$$self.$capture_state = () => ({ link, currentURL, name, $currentURL });
+	$$self.$$set = $$props => {
+		if ('article' in $$props) $$invalidate(1, article = $$props.article);
+	};
+
+	$$self.$capture_state = () => ({
+		link,
+		currentURL,
+		article,
+		name,
+		$currentURL
+	});
 
 	$$self.$inject_state = $$props => {
-		if ("name" in $$props) $$invalidate(0, name = $$props.name);
+		if ('article' in $$props) $$invalidate(1, article = $$props.article);
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
 	};
 
 	if ($$props && "$$inject" in $$props) {
@@ -114,18 +132,18 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*$currentURL*/ 2) {
-			$$invalidate(0, name = $currentURL.searchParams.get("name") || "unknown");
+		if ($$self.$$.dirty & /*$currentURL*/ 4) {
+			$$invalidate(0, name = $currentURL.searchParams.get("name") || 'unknown');
 		}
 	};
 
-	return [name, $currentURL];
+	return [name, article, $currentURL];
 }
 
 class Query extends SvelteComponentDev {
 	constructor(options) {
 		super(options);
-		init(this, options, instance, create_fragment, safe_not_equal, {});
+		init(this, options, instance, create_fragment, safe_not_equal, { article: 1 });
 
 		dispatch_dev("SvelteRegisterComponent", {
 			component: this,
@@ -134,7 +152,15 @@ class Query extends SvelteComponentDev {
 			id: create_fragment.name
 		});
 	}
+
+	get article() {
+		throw new Error("<Query>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set article(value) {
+		throw new Error("<Query>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
 }
 
-export default Query;
+export { Query as default };
 //# sourceMappingURL=Query.js.map

package/example/dist/Query.js.map

@@ -1 +1 @@
-{"version":3,"file":"Query.js","sources":["../Query.svelte"],"sourcesContent":["<script>\n  import { link } from \"../src/link.js\";\n  import { currentURL } from \"../src/stores.js\";\n\n  $: name = $currentURL.searchParams.get(\"name\") || 'unknown';\n</script>\n<svelte:head>\n  <title>query</title>\n</svelte:head>\n<div class=\"query\">\n  <p>name: <span id=\"name\">{ name }</span></p>\n  <a use:link href=\"/query?name=foo\">foo</a>\n  <a use:link href=\"/query?name=bar\">bar</a>\n</div>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;sBAU6B,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAAJ,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAN5B,IAAI,GAAG,WAAW,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,KAAK,SAAS;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Query.js","sources":["../Query.svelte"],"sourcesContent":["<script>\n  import { link } from \"../src/link.js\";\n  import { currentURL } from \"../src/stores.js\";\n\n  export let article = null;\n\n  console.log(article);\n\n  $: name = $currentURL.searchParams.get(\"name\") || 'unknown';\n</script>\n<svelte:head>\n  <title>query</title>\n</svelte:head>\n<div class=\"query\">\n  <p>name: <span id=\"name\">{ name }</span></p>\n  <a use:link href=\"/query?name=foo\">foo</a>\n  <a use:link href=\"/query?name=bar\">bar</a>\n</div>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;aAcK,QAAM,CAAA,CAAA;;sBAAkB,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;GADjC,UAIM,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;GAHJ,UAA4C,CAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;GAAnC,UAA+B,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA;;;GACxC,UAA0C,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA;;GAC1C,UAA0C,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;qDAFf,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAVpB,CAAA,IAAA,EAAA,OAAO,GAAG,IAAI,EAAA,GAAA,OAAA,CAAA;CAEzB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAElB,YAAA,CAAA,CAAA,EAAE,IAAI,GAAG,WAAW,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAA,IAAK,SAAS,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}