was created with unknown prop 'router'` in the browser's console?**\n\nIf you're not using the `router` prop inside your route-components then just add:\n\n```html\n\n```\n\nThat will remove the warning and also will make `eslint-plugin-svelte3` in your workflow happy.\n\n**Why `router.subscribe` is called two times when I first open the page?**\n\nAny subscription to stores will fire twice as they have an initial value, once the router resolves (e.g. the initial route) then a second event is fired.\n\n> In this case, and additional property `initial` is added to identify such event.\n\n**Is there any method that allows me to detect route change?**\n\nYes, you can subscribe to the router store, e.g. `router.subscribe(...)` — [see above](#route-info).\n\n**Is there a way to reduce the bundle size of yrv?**\n\nSince `v0.0.46` you'll be getting the most reduced version we can ship, however it comes without development warnings.\n\n> Consume it as `import { ... } from 'yrv/debug'` right away and you'll get a more complete version with included DEBUG information.\n"
},
{
"path": "components.js",
"content": "export { default as Router } from './src/lib/Router.svelte';\nexport { default as Route } from './src/lib/Route.svelte';\nexport { default as Link } from './src/lib/Link.svelte';\n\nexport { navigateTo, router } from './src/lib/utils';\n"
},
{
"path": "debug.js",
"content": "export * from './build/dev/index.js';\n"
},
{
"path": "e2e/app/import.esm.js",
"content": "import App from '../components/Import.svelte';\n\nnew App({ target: document.body }); // eslint-disable-line\n"
},
{
"path": "e2e/app/routers.js",
"content": "import App from '../components/nested-routers/App.svelte';\n\nnew App({ target: document.body }); // eslint-disable-line\n"
},
{
"path": "e2e/app/testing.js",
"content": "import App from '../components/Main.svelte';\n\n/* global USE_HASH_CHANGE */\nlet hashchange;\nif (typeof USE_HASH_CHANGE !== 'undefined' && USE_HASH_CHANGE) {\n hashchange = USE_HASH_CHANGE;\n}\n\nnew App({ target: document.body, props: { hashchange } }); // eslint-disable-line\n"
},
{
"path": "e2e/cases/main.test.js",
"content": "import { Selector } from 'testcafe';\nimport { url, href } from '../helpers';\n\n/* global fixture, test */\n\nfixture('yrv (dsl)')\n .page(url('/'));\n\ntest('it just loads!', async t => {\n await t.expect(Selector('h1').withText('Example page').visible).ok();\n await t.expect(Selector('[data-test=counter]').innerText).contains(1);\n await t.expect(Selector('a').withText('Home').getAttribute('href')).eql(href('/'));\n await t.expect(Selector('a').withText('Home').hasAttribute('aria-current')).ok();\n});\n\ntest('it would mount Route-less content', async t => {\n await t.expect(Selector('p[data-test=routeless]').visible).ok();\n await t.expect(Selector('[data-test=counter]').innerText).contains(1);\n});\n\ntest('it should mount from slot-content nodes', async t => {\n await t.click(Selector('a').withText('Test page'));\n await t.expect(Selector('h2').withText('Testing features').visible).ok();\n await t.expect(Selector('[data-test=counter]').innerText).contains(2);\n});\n\ntest('it should allow to bind Components can be lazy-loaded through `() => import('...')` calls.
\n"
},
{
"path": "e2e/components/Import.svelte",
"content": "\n\n\n \n delay(import('./Example.svelte'))} />\n \n
\n"
},
{
"path": "e2e/components/Main.svelte",
"content": "\n\n\n Example page \n {$router.path} \n \n\nThis content is static, always shown.
\n\n\n Links can open windows, and they can set callbacks too:\n
\n\n\n \n Not found? \n Hello World \n Hello {router.params.name} \n
\n \n\n\n Routes with exactly one segment are considered nested routes, e.g.\n\n
\n\n\n Link's `href` can be changed as well, e.g.\n
\n\n\n \n ? \n a \n b \n c \n \n
\n\n\n \n Testing features \n\n This content is always mounted when the current URL starts-with /test .
\n\n \n Wrong! \n /* eslint-disable no-alert */ window.confirm('Are you sure?')}>Yay! \n
\n \n\n Any Route -less content is always shown!
\n \n\n\n \n GIST INFO \n \n SHA1: {router.params.sha1 || 'N/A'} \n (edit) \n (save) \n \n \n
\n\n\n \n \n\n \n loggedIn} redirect=\"/auth/login\">O.K. \n Log-in \n\n loggedIn} exact redirect=\"/auth/login\" />\n Welcome back. \n \n
\n\n\n \n Shhhh! Top-secret \n
\n \n\n\n \n \n\n \n HOME \n ABOUT \n
\n \n\n\n \n It works! \n \n\n \n NOT FOUND \n \n \n\n\n
You can also hook into the router's state with `router.subscribe(...)`, e.g.
\n
Times router-info has been changed: {count}
\n
\n \n I \n II \n III \n \n
\n\n↑ \n"
},
{
"path": "e2e/components/Testing.svelte",
"content": "\n\nInjected parameters \n\n\n router \n \n key: {JSON.stringify(router.key)} \n matches: {JSON.stringify(router.matches)} \n params: {JSON.stringify(router.params)} \n route: {JSON.stringify(router.route)} \n query: {JSON.stringify(router.query)} \n path: {JSON.stringify(router.path)} \n \n\n \n\n \n\n\n \n Value: {router.params.value}
\n \n \n"
},
{
"path": "e2e/components/nested-routers/App.svelte",
"content": "\n\n\n {#if isLoggedIn}\n \n"
},
{
"path": "e2e/components/nested-routers/Home.svelte",
"content": "This is Home \n"
},
{
"path": "e2e/components/nested-routers/List.svelte",
"content": "This is List \n"
},
{
"path": "e2e/components/nested-routers/Login.svelte",
"content": "This is Login \n"
},
{
"path": "e2e/components/nested-routers/NewTeam.svelte",
"content": "This is New Team \n"
},
{
"path": "e2e/components/nested-routers/NotFound.svelte",
"content": "This is NotFound \n"
},
{
"path": "e2e/components/nested-routers/Players.svelte",
"content": "\n\nThis is Players \n\n\n \n"
},
{
"path": "e2e/helpers.js",
"content": "const prefix = process.env.BASE_URL || 'http://localhost:8080';\n\nexport function url(x, y) {\n if (!y && process.env.HASHCHANGE) {\n return `${prefix}#${x}`;\n }\n\n return prefix + x;\n}\n\nexport function href(x) {\n if (process.env.HASHCHANGE) {\n return `#${x !== '/' ? x : ''}`;\n }\n return x;\n}\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"yrv\",\n \"version\": \"0.0.57\",\n \"description\": \"Your routing!\",\n \"types\": \"types/index.d.ts\",\n \"_main\": \"build/dist/index.js\",\n \"_module\": \"build/src/index.js\",\n \"svelte\": \"build/dist/index.js\",\n \"files\": [\n \"build/dev/**\",\n \"build/dist/**\",\n \"build/src/index.js\",\n \"types/*.*\",\n \"debug.js\"\n ],\n \"scripts\": {\n \"release\": \"standard-version\",\n \"lint\": \"eslint --ext js,svelte src e2e\",\n \"dev\": \"npm run build:test -- -w\",\n \"postbuild\": \"npm run copy:vendor && npm run copy:index\",\n \"prebuild\": \"rm -rf build\",\n \"copy:vendor\": \"cp build/src/vendor.js build/dev/ && cp build/src/vendor.js build/dist/\",\n \"copy:index\": \"cp src/index.js build/dev/ && cp src/index.js build/dist/\",\n \"mortero\": \"mortero -ayrv:./components USE_HASH_CHANGE=$HASHCHANGE DEBUG=true --platform browser\",\n \"build:module\": \"npm run mortero -- src -Xtest -Dbuild/src -Nsvelte -fyindex.js --format esm\",\n \"build:debug\": \"npm run mortero -- src/lib -Xtest -fKDbuild/dev --format esm\",\n \"build:test\": \"npm run mortero -- src e2e -X{lib,cases,components} -Xhelpers.js -X'**/_*'\",\n \"build:all\": \"mortero src/lib -fKXtest -Dbuild/dist --format esm --platform browser\",\n \"build\": \"npm run build:all && npm run build:debug && npm run build:module\",\n \"test:e2e\": \"testcafe ${BROWSER:-chrome:headless} --color -q\",\n \"test\": \"npm run build:test -- -fyjs && npm run test:e2e -- -a 'npm run dev' e2e/cases\"\n },\n \"mortero\": {\n \"bundle\": [\n \"**/app/*.js\",\n \"**/index.js\",\n \"**/vendor.js\"\n ],\n \"rename\": [\n \"**/test/**/!(index).html:{basedir}/{name}/index.html\",\n \"**/{src,e2e}/**:{filepath/1}\",\n \"**/test/**:{filepath/1}\"\n ]\n },\n \"bugs\": {\n \"url\": \"https://github.com/pateketrueke/yrv/issues\"\n },\n \"homepage\": \"https://github.com/pateketrueke/yrv\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/pateketrueke/yrv.git\"\n },\n \"author\": \"Alvaro Cabrera \",\n \"license\": \"MIT\",\n \"keywords\": [\n \"router\",\n \"svelte\",\n \"svelte3\",\n \"svelte-router\",\n \"svelte3-router\"\n ],\n \"peerDependencies\": {\n \"svelte\": \"3.x\"\n },\n \"devDependencies\": {\n \"abstract-nested-router\": \"^0.2.1\",\n \"eslint\": \"^7.27.0\",\n \"eslint-config-airbnb-base\": \"^14.0.0\",\n \"eslint-plugin-import\": \"^2.18.2\",\n \"eslint-plugin-svelte3\": \"^3.2.0\",\n \"eslint-utils\": \">=1.4.1\",\n \"mortero\": \"^0.0.62\",\n \"pug\": \"^3.0.0\",\n \"query-string\": \"^6.8.3\",\n \"standard-version\": \"^9.0.0\",\n \"svelte\": \"^3.48.0\",\n \"testcafe\": \"1.18.6\"\n }\n}\n"
},
{
"path": "src/index.js",
"content": "export { default as Router } from './lib/Router.svelte';\nexport { default as Route } from './lib/Route.svelte';\nexport { default as Link } from './lib/Link.svelte';\n\nexport { navigateTo, router } from './lib/utils';\n"
},
{
"path": "src/lib/Link.svelte",
"content": "\n\n{#if button}\n \n \n{:else}\n \n \n{/if}\n"
},
{
"path": "src/lib/Route.svelte",
"content": "\n\n\n\n\n\n\n{#if failure}\n {failure}
\n{/if}\n\n\n{#if activeRouter}\n\n {#if !hasLoaded}\n {#if pending || pendingComponent}\n {#if isSvelteComponent(pending)}\n \n Router failure: {path} \n {failure} \n \n{/if}\n\n"
},
{
"path": "src/lib/router.js",
"content": "import { writable } from 'svelte/store';\nimport { Router, parse } from '../vendor';\n\nimport {\n ROOT_URL, navigateTo, cleanPath, isActive, router,\n} from './utils';\n\nexport const baseRouter = new Router();\nexport const routeInfo = writable({});\n\n// private registries\nconst onError = {};\nconst shared = {};\n\nlet errors = [];\nlet routers = 0;\nlet interval;\nlet currentURL;\n\n// take snapshot from current state...\nrouter.subscribe(value => { shared.router = value; });\nrouteInfo.subscribe(value => { shared.routeInfo = value; });\n\nexport function doFallback(failure, fallback) {\n routeInfo.update(defaults => ({\n ...defaults,\n [fallback]: {\n ...shared.router,\n failure,\n },\n }));\n}\n\nexport function handleRoutes(map, params, enforce) {\n map.some(x => {\n if (x.key && (enforce || (x.matches && !shared.routeInfo[x.key]))) {\n if (x.redirect && (x.condition === null || x.condition(shared.router) !== true)) {\n if (x.exact && shared.router.path !== x.path) return false;\n navigateTo(x.redirect);\n return true;\n }\n\n if (x.exact && x.path !== currentURL) {\n if (currentURL.replace(/[#/]$/, '') !== x.path) return false;\n }\n\n if (enforce && x.fallback) {\n return false;\n }\n\n Object.assign(params, x.params);\n\n // upgrade matching routes!\n routeInfo.update(defaults => ({\n ...defaults,\n [x.key]: {\n ...shared.router,\n ...x,\n },\n }));\n }\n\n return false;\n });\n}\n\nexport function evtHandler() {\n let baseUri = !router.hashchange ? window.location.href.replace(window.location.origin, '') : window.location.hash || '/';\n let failure;\n\n // unprefix active URL\n if (ROOT_URL !== '/') {\n baseUri = baseUri.replace(cleanPath(ROOT_URL), '');\n }\n\n // skip given anchors if already exists on document, see #43\n if (\n /^#[\\w-]+$/.test(window.location.hash)\n && document.querySelector(window.location.hash)\n && currentURL === baseUri.split('#')[0]\n ) return;\n\n // trailing slash is required to keep route-info on nested routes!\n // see: https://github.com/pateketrueke/abstract-nested-router/commit/0f338384bddcfbaee30f3ea2c4eb0c24cf5174cd\n const normalizedURL = baseUri.replace('/#', '#').replace(/^#\\//, '/');\n const [path, qs] = normalizedURL.split('?');\n const fullpath = path.replace(/\\/?$/, '/');\n const params = {};\n\n if (currentURL !== normalizedURL) {\n currentURL = normalizedURL;\n router.set({\n path: cleanPath(fullpath),\n query: parse(qs),\n params,\n });\n }\n\n routeInfo.set({});\n\n // load all matching routes...\n baseRouter.resolve(fullpath, (err, result) => {\n if (err) {\n failure = err;\n return;\n }\n\n handleRoutes(result, params);\n });\n\n if (!failure) {\n try {\n handleRoutes(baseRouter.find(fullpath), params, true);\n } catch (e) {\n // noop\n }\n }\n\n // it's fine to omit failures for '/' paths\n if (failure && failure.path !== '/') {\n console.debug(failure);\n } else {\n failure = null;\n }\n\n // clear previously failed handlers\n errors.forEach(cb => cb());\n errors = [];\n\n let fallback;\n\n // invoke error-handlers to clear out previous state!\n Object.keys(onError).forEach(root => {\n if (isActive(root, fullpath, false)) {\n const fn = onError[root].callback;\n\n fn(failure);\n errors.push(fn);\n }\n\n if (!fallback && onError[root].fallback) {\n fallback = onError[root].fallback;\n }\n });\n\n // handle unmatched fallbacks\n if (failure && fallback) {\n doFallback(failure, fallback);\n }\n}\n\nexport function findRoutes() {\n clearTimeout(interval);\n interval = setTimeout(evtHandler);\n}\n\nexport function addRouter(root, fallback, callback) {\n if (!routers) {\n window.addEventListener('popstate', findRoutes, false);\n }\n\n // register error-handlers\n if (!onError[root] || fallback) {\n onError[root] = { fallback, callback };\n }\n\n routers += 1;\n\n return () => {\n routers -= 1;\n\n if (!routers) {\n window.removeEventListener('popstate', findRoutes, false);\n }\n };\n}\n"
},
{
"path": "src/lib/utils.js",
"content": "import { writable } from 'svelte/store';\nimport { Router, stringify } from '../vendor';\n\nconst cache = {};\nconst baseTag = document.getElementsByTagName('base');\nconst basePrefix = (baseTag[0] && baseTag[0].href) || '/';\n\nexport const ROOT_URL = basePrefix.replace(window.location.origin, '');\n\nexport const router = writable({\n path: '/',\n query: {},\n params: {},\n initial: true,\n});\n\nexport const CTX_ROUTER = {};\nexport const CTX_ROUTE = {};\n\n// use location.hash on embedded pages, e.g. Svelte REPL\nlet HASHCHANGE = window.location.origin === 'null';\n\nexport function hashchangeEnable(value) {\n if (typeof value === 'boolean') {\n HASHCHANGE = !!value;\n }\n\n return HASHCHANGE;\n}\n\nObject.defineProperty(router, 'hashchange', {\n set: value => hashchangeEnable(value),\n get: () => hashchangeEnable(),\n configurable: false,\n enumerable: false,\n});\n\nexport function fixedLocation(path, callback, doFinally) {\n const baseUri = router.hashchange ? window.location.hash.replace('#', '') : window.location.pathname;\n\n // this will rebase anchors to avoid location changes\n if (path.charAt() !== '/') {\n path = baseUri + path;\n }\n\n const currentURL = baseUri + window.location.hash + window.location.search;\n\n // do not change location et all...\n if (currentURL !== path) {\n callback(path);\n }\n\n // invoke final guard regardless of previous result\n if (typeof doFinally === 'function') {\n doFinally();\n }\n}\n\nexport function cleanPath(uri, fix) {\n return uri !== '/' || fix ? uri.replace(/\\/$/, '') : uri;\n}\n\nexport function navigateTo(path, options) {\n const {\n reload, replace,\n params, queryParams,\n } = options || {};\n\n // If path empty or no string, throws error\n if (!path || typeof path !== 'string' || (path[0] !== '/' && path[0] !== '#')) {\n throw new Error(`Expecting '/${path}' or '#${path}', given '${path}'`);\n }\n\n if (params) {\n path = path.replace(/:([a-zA-Z][a-zA-Z0-9_-]*)/g, (_, key) => params[key]);\n }\n\n if (queryParams) {\n const qs = stringify(queryParams);\n\n if (qs) {\n path += `?${qs}`;\n }\n }\n\n if (router.hashchange) {\n let fixedURL = path.replace(/^#|#$/g, '');\n\n if (ROOT_URL !== '/') {\n fixedURL = fixedURL.replace(cleanPath(ROOT_URL), '');\n }\n\n window.location.hash = fixedURL !== '/' ? fixedURL : '';\n return;\n }\n\n // If no History API support, fallbacks to URL redirect\n if (reload || !window.history.pushState || !window.dispatchEvent) {\n window.location.href = path;\n return;\n }\n\n // If has History API support, uses it\n fixedLocation(path, nextURL => {\n window.history[replace ? 'replaceState' : 'pushState'](null, '', nextURL);\n window.dispatchEvent(new Event('popstate'));\n });\n}\n\nexport function getProps(given, required) {\n const { props: sub, ...others } = given;\n\n // prune all declared props from this component\n required.forEach(k => {\n delete others[k];\n });\n\n return {\n ...sub,\n ...others,\n };\n}\n\nexport function isActive(uri, path, exact) {\n if (!cache[[uri, path, exact]]) {\n if (exact !== true && path.indexOf(uri) === 0) {\n cache[[uri, path, exact]] = /^[#/?]?$/.test(path.substr(uri.length, 1));\n } else if (uri.includes('*') || uri.includes(':')) {\n cache[[uri, path, exact]] = Router.matches(uri, path);\n } else {\n cache[[uri, path, exact]] = cleanPath(path) === uri;\n }\n }\n\n return cache[[uri, path, exact]];\n}\n\nexport function isPromise(object) {\n return object && typeof object.then === 'function';\n}\n\nexport function isSvelteComponent(object) {\n return object && object.prototype;\n}\n"
},
{
"path": "src/test/_layout.pug",
"content": "doctype html\nhtml(lang='en')\n head\n meta(charset='UTF-8')\n meta(name='viewport', content='width=device-width, initial-scale=1.0')\n meta(http-equiv='X-UA-Compatible', content='ie=edge')\n block head\n style.\n a[aria-current]{font-weight:bold}\n body\n script.\n if (!!window.MSInputMethodContext && !!document.documentMode)\n document.write('