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