svelte-spa-history-router 2.1.1 → 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:
 
@@ -184,9 +184,13 @@ store to detect URL changes (including query string or hash)
 
 ## 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
+* ~~Support Types~~ Add typecheck [PR9](https://github.com/ykrods/svelte-spa-history-router/pull/9)
 
 ### 2.1.0 (2021-04-29)
 

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, 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';
+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 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");
@@ -97,18 +99,31 @@ function instance($$self, $$props, $$invalidate) {
 	let name;
 	let $currentURL;
 	validate_store(currentURL, 'currentURL');
-	component_subscribe($$self, currentURL, $$value => $$invalidate(1, $currentURL = $$value));
+	component_subscribe($$self, currentURL, $$value => $$invalidate(2, $currentURL = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
 	validate_slots('Query', slots, []);
-	const writable_props = [];
+	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) !== '$$' && key !== 'slot') 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 ('article' in $$props) $$invalidate(1, article = $$props.article);
 		if ('name' in $$props) $$invalidate(0, name = $$props.name);
 	};
 
@@ -117,18 +132,18 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*$currentURL*/ 2) {
+		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,
@@ -137,6 +152,14 @@ 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 { Query as default };

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":";;;;;;;;;;;;;;;;;;;;;;;;aAUK,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAN9B,YAAA,CAAA,CAAA,EAAE,IAAI,GAAG,WAAW,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAA,IAAK,SAAS,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "svelte-spa-history-router",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "History base router for Svelte SPA",
   "type": "module",
   "main": "src/index.js",
   "svelte": "src/index.js",
+  "types": "src/index.d.ts",
   "scripts": {
     "example:build": "cd example && rollup -c",
     "example:build:watch": "cd example && rollup -c -w",

package/src/index.d.ts

@@ -0,0 +1,40 @@
+///<reference types="svelte" />
+
+import { SvelteComponent, ComponentType } from 'svelte'
+
+export { Route, RouteParams, Redirection } from "./types.ts"
+
+/**
+ * Router component
+ *
+ * @example
+ *  <script>
+ *    import { Router } from "svelte-spa-history-router";
+ *
+ *    import Top from "./Top.svelte"
+ *    import NotFound from "./NotFound.svelte"
+ *
+ *    const routes = [
+ *      { path: "/", component: Top },
+ *      { path: "/posts/(?<postId>.*)", resolver: () => import("./Article.svelte") },
+ *      { path: ".*", component: NotFound },
+ *    ];
+ *  </script>
+ *  <Router {routes}/>
+ */
+export class Router extends SvelteComponent<{
+    routes: Route[]
+}> {}
+
+export { link } from "./link.js";
+export { push } from "./push.js";
+export { routeParams, currentURL } from "./stores.js";
+
+/**
+ * This is special function used in resolvers.
+ * Normally, you use `push()` to change the url.
+ *
+ * @param {string} to
+ * @return {Redirection}
+ */
+export function redirect(to: string): Redirection;

package/src/link.js

@@ -1,7 +1,13 @@
 import { push } from "./push.js";
 
 /**
- * @param {HTMLElement} node
+ * Svelte action to make `<a>` work as navigation of svelte-spa-history-router
+ *
+ * @param {HTMLElement} node - target `<a>`
+ *
+ * @example
+ *
+ *   <a use:link href="/">top</a>
  */
 export function link(node) {
   /**

package/src/push.js

@@ -1,7 +1,13 @@
 import { currentPath, currentURL } from "./stores.js";
 
 /**
+ * Navigate to next page programmatically
+ *
  * @param {string} next
+ *
+ * @example
+ *
+ *   <button on:click={ () => push(`posts/${id}`) }>next</button>
  */
 export function push(next) {
   window.history.pushState({}, "", next);

package/src/stores.js

@@ -1,15 +1,23 @@
 import { writable, derived } from "svelte/store";
 
 /**
- * @typedef { import("./types.ts").Route } Route
- * @typedef { import("./route_state.js").RouteState } RouteState
+ * @template T
+ * @typedef { import("svelte/store").Writable<T> } Writable
  */
 
 /**
  * @template T
- * @typedef { import("svelte/store").Writable<T> } Writable
+ * @typedef { import("svelte/store").Readable<T> } Readable
  */
 
+/**
+ * @typedef { import("./types.ts").Route } Route
+ * @typedef { import("./types.ts").RouteParams } RouteParams
+ * @typedef { import("./types.ts").CurrentURL } CurrentURL
+ * @typedef { import("./route_state.js").RouteState } RouteState
+ */
+
+
 /**
  * Store to detect changes (internal use).
  * @type { Writable<String> }
@@ -22,12 +30,20 @@ export const currentPath = writable(window.location.pathname);
  */
 export const routeState = writable(null);
 
-// Store of path variables (a bit convinient for getting $currentRoute.params).
+/**
+ * Store of captured variables in path
+ *
+ * @type Readable<RouteParams>
+ */
 export const routeParams = derived(routeState, ($routeState) => {
   return $routeState ? $routeState.params || {} : {};
 });
 
-// Store of current location (to detect changes of query or hash)
+/**
+ * Store of current location (to detect changes of query or hash)
+ *
+ * @type CurrentURL
+ */
 export const currentURL = (() => {
   function getCurrent() {
     return new URL(window.location.href);

package/src/types.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from "svelte";
+import type { Readable } from "svelte/store";
 
 import type { RouteState } from "./route_state.js";
 export type { RouteState } from "./route_state.js";
@@ -19,6 +20,11 @@ export type Redirection = {
   redirect: string,
 }
 
+export interface CurrentURL extends Readable<URL> {
+  set: (url: URL) => void
+  setCurrent: () => void
+}
+
 type ResolverFunc = (routeState: RouteState) => PromiseLike<ComponentType | ComponentModule | Redirection> | ComponentType | Redirection
 
 export type Route = {