64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import svelte from 'rollup-plugin-svelte';
2 | import resolve from 'rollup-plugin-node-resolve';
3 | import commonjs from 'rollup-plugin-commonjs';
4 | import livereload from 'rollup-plugin-livereload';
5 | import { terser } from 'rollup-plugin-terser';
6 | import extensions from 'rollup-plugin-extensions';
7 | import url from 'rollup-plugin-url';
8 | import md from 'rollup-plugin-md';
9 | import visualizer from 'rollup-plugin-visualizer';
10 |
11 | const doc = process.env.NODE_ENV === 'doc';
12 | const ssr = process.env.NODE_ENV === 'ssr';
13 | const production = !process.env.ROLLUP_WATCH;
14 |
15 | let config = {
16 | input: ssr ? 'src/examples/ssr.js' : 'src/examples/main.js',
17 | output: {
18 | sourcemap: true,
19 | format: 'iife',
20 | name: 'app',
21 | dir: 'public',
22 | },
23 | plugins: [
24 | svelte({
25 | dev: !production,
26 | generate: ssr ? 'ssr' : 'dom',
27 | css: css => {
28 | css.write('public/bundle.css');
29 | },
30 | }),
31 | resolve({ browser: true }),
32 | commonjs(),
33 | !production && livereload('public'),
34 | production && terser(),
35 | extensions({
36 | extensions: ['.svelte', '.js'],
37 | resolveIndex: true,
38 | }),
39 | production && visualizer(),
40 | ],
41 | watch: {
42 | clearScreen: false,
43 | },
44 | };
45 |
46 | if (doc) {
47 | config = {
48 | ...config,
49 | input: 'doc/main.js',
50 | output: production
51 | ? {
52 | sourcemap: true,
53 | format: 'iife',
54 | name: 'app',
55 | dir: 'dist_doc',
56 | }
57 | : config.output,
58 | inlineDynamicImports: true,
59 | plugins: [
60 | ...config.plugins,
61 | url(),
62 | md({
63 | tables: true,
64 | gfm: true,
65 | }),
66 | ],
67 | };
68 | } else if (production) {
69 | config = {
70 | ...config,
71 | input: 'src/Router/index.js',
72 | external: ['svelte'],
73 | output: [
74 | {
75 | file: 'dist/es/index.mjs',
76 | format: 'es',
77 | },
78 | {
79 | file: 'dist/cjs/index.js',
80 | format: 'cjs',
81 | },
82 | ],
83 | };
84 | } else {
85 | config = {
86 | ...config,
87 | inlineDynamicImports: true,
88 | };
89 | }
90 |
91 | export default config;
92 |
--------------------------------------------------------------------------------
/doc/components/Example/AddressBar.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
81 |
82 |
92 |
--------------------------------------------------------------------------------
/src/Router/utils/history/memoryHistory.js:
--------------------------------------------------------------------------------
1 | import { onDestroy } from 'svelte';
2 | import { createBaseHistory } from './baseHistory.js';
3 |
4 | export function createMemoryHistory() {
5 | const startPath = '/';
6 | const {
7 | currentPath,
8 | setPath,
9 | block,
10 | unblock,
11 | isBlocked,
12 | acceptLeave,
13 | cancelLeave,
14 | onLeave,
15 | offLeave,
16 | wasTriedToLeave,
17 | } = createBaseHistory(startPath);
18 |
19 | let currentState = 0;
20 | let stack = [startPath];
21 | let pendingAction = null;
22 | let stackListeners = [];
23 |
24 | function push(to) {
25 | if (isBlocked()) return [push, [to]];
26 | if (stack[currentState] === to) return;
27 | currentState++;
28 | stack = stack.slice(0, currentState).concat(to);
29 | setPath(to);
30 | onStackUpdate();
31 | }
32 |
33 | function back() {
34 | if (!isHasPrevious()) return;
35 | if (isBlocked()) return [back, []];
36 | currentState--;
37 | setPath(stack[currentState]);
38 | onStackUpdate();
39 | }
40 |
41 | function forward() {
42 | if (!isHasNext()) return;
43 | if (isBlocked()) return [forward, []];
44 | currentState++;
45 | setPath(stack[currentState]);
46 | onStackUpdate();
47 | }
48 |
49 | function replace(to) {
50 | if (isBlocked()) return [replace, []];
51 | stack[currentState] = to;
52 | setPath(to);
53 | onStackUpdate();
54 | }
55 |
56 | function isHasNext() {
57 | return currentState < stack.length - 1;
58 | }
59 |
60 | function isHasPrevious() {
61 | return !!currentState;
62 | }
63 |
64 | function wrapAfterAction(action) {
65 | return (...args) => {
66 | const presentedPendingAction = action(...args);
67 | if (presentedPendingAction) {
68 | pendingAction = presentedPendingAction;
69 | wasTriedToLeave();
70 | }
71 | };
72 | }
73 |
74 | function onAcceptLeave() {
75 | acceptLeave();
76 | const [fn, args] = pendingAction;
77 | fn(...args);
78 | }
79 |
80 | function stackSubscribe(listener) {
81 | const hasNext = isHasNext();
82 | const hasPrev = isHasPrevious();
83 | listener({ stack, state: currentState, hasNext, hasPrev });
84 | stackListeners.push(listener);
85 |
86 | return function stackUnsubscribe() {
87 | stackListeners = stackListeners.filter(
88 | _listener => _listener !== listener,
89 | );
90 | };
91 | }
92 |
93 | function onStackUpdate() {
94 | const hasNext = isHasNext();
95 | const hasPrev = isHasPrevious();
96 | stackListeners.forEach(listener =>
97 | listener({ stack, state: currentState, hasNext, hasPrev }),
98 | );
99 | }
100 |
101 | onDestroy(() => {
102 | currentState = 0;
103 | stack = null;
104 | pendingAction = null;
105 | stackListeners = null;
106 | });
107 |
108 | return {
109 | currentPath,
110 | push: wrapAfterAction(push),
111 | back: wrapAfterAction(back),
112 | forward: wrapAfterAction(forward),
113 | replace: wrapAfterAction(replace),
114 | block,
115 | unblock,
116 | acceptLeave: onAcceptLeave,
117 | cancelLeave,
118 | onLeave,
119 | offLeave,
120 |
121 | // Memory history specific field
122 | stack: { subscribe: stackSubscribe },
123 | };
124 | }
125 |
--------------------------------------------------------------------------------
/src/Router/utils/history/browserHistory.js:
--------------------------------------------------------------------------------
1 | import { onDestroy } from 'svelte';
2 | import { createBaseHistory } from './baseHistory.js';
3 | const globalHistory = window.history;
4 |
5 | export function createBrowserHistory() {
6 | const {
7 | currentPath,
8 | setPath,
9 | block,
10 | unblock,
11 | isBlocked,
12 | acceptLeave,
13 | cancelLeave,
14 | onLeave,
15 | offLeave,
16 | wasTriedToLeave,
17 | } = createBaseHistory(getCurrentPath());
18 |
19 | let isStateChangedFromUI = false;
20 | let pendingAction = null;
21 | let currentState = globalHistory.state || 0;
22 |
23 | globalHistory.replaceState(currentState, '', getCurrentPath());
24 |
25 | function push(to) {
26 | if (isBlocked()) return [push, [to]];
27 | globalHistory.pushState(++currentState, null, to);
28 | setCurrentPath();
29 | }
30 |
31 | function back() {
32 | if (isBlocked()) return [back, []];
33 | isStateChangedFromUI = true;
34 | globalHistory.back();
35 | currentState--;
36 | }
37 |
38 | function forward() {
39 | if (isBlocked()) return [forward, []];
40 | isStateChangedFromUI = true;
41 | globalHistory.forward();
42 | currentState++;
43 | }
44 |
45 | function replace(to) {
46 | if (isBlocked()) return [replace, [to]];
47 | globalHistory.replaceState(currentState, null, to);
48 | setCurrentPath();
49 | }
50 |
51 | function onStateChange(e) {
52 | if (isStateChangedFromUI) {
53 | setCurrentPath();
54 | isStateChangedFromUI = false;
55 | return;
56 | }
57 |
58 | if (isBlocked()) {
59 | globalHistory[e.state < currentState ? 'forward' : 'back']();
60 | isStateChangedFromUI = true;
61 | return [e.state < currentState ? back : forward, []];
62 | }
63 | currentState = e.state;
64 | setCurrentPath();
65 | }
66 |
67 | function wrapAfterAction(action) {
68 | return (...args) => {
69 | const presentedPendingAction = action(...args);
70 | if (presentedPendingAction) {
71 | pendingAction = presentedPendingAction;
72 | wasTriedToLeave();
73 | }
74 | };
75 | }
76 |
77 | function onAcceptLeave() {
78 | acceptLeave();
79 | const [fn, args] = pendingAction;
80 | fn(...args);
81 | }
82 |
83 | function onPageUnload(e) {
84 | if (isBlocked()) {
85 | e.returnValue = '';
86 | return 'Are you sure?';
87 | }
88 | }
89 |
90 | function getCurrentPath() {
91 | return `${location.pathname}${location.search}${location.hash}`;
92 | }
93 |
94 | function setCurrentPath() {
95 | setPath(getCurrentPath());
96 | }
97 |
98 | const wrappedOnStateChange = wrapAfterAction(onStateChange);
99 |
100 | window.addEventListener('popstate', wrappedOnStateChange);
101 | window.addEventListener('beforeunload', onPageUnload);
102 |
103 | onDestroy(() => {
104 | pendingAction = null;
105 | window.removeEventListener('popstate', wrappedOnStateChange);
106 | window.removeEventListener('beforeunload', onPageUnload);
107 | });
108 |
109 | return {
110 | currentPath,
111 | push: wrapAfterAction(push),
112 | back: wrapAfterAction(back),
113 | forward: wrapAfterAction(forward),
114 | replace: wrapAfterAction(replace),
115 | block,
116 | unblock,
117 | acceptLeave: onAcceptLeave,
118 | cancelLeave,
119 | onLeave,
120 | offLeave,
121 | };
122 | }
123 |
--------------------------------------------------------------------------------
/src/Router/utils/register.js:
--------------------------------------------------------------------------------
1 | import { tick, setContext, getContext, onDestroy } from 'svelte';
2 | import { get, derived, writable, readable } from 'svelte/store';
3 | import { getProtected } from './protection.js';
4 | import { getHistory } from './history/index.js';
5 | import { matchPath } from './matchPath.js';
6 | import { createBasePath } from './basePath.js';
7 | import { dynamicDerived } from './dynamicDerived.js';
8 |
9 | const identity = _ => _;
10 |
11 | const CONTEXT_ROUTER_KEY = '__router';
12 | const CONTEXT_DEPTH_KEY = '__router_depth';
13 | const CONTEXT_RENDER_UNLOCKED = '__render_unlocked';
14 |
15 | export function createRouter(basePath = '/') {
16 | let routes = [];
17 |
18 | createBasePath(basePath);
19 | setContext(CONTEXT_DEPTH_KEY, 0);
20 | setContext(CONTEXT_ROUTER_KEY, {
21 | getRoutes: () => routes,
22 | add(route) {
23 | routes = [...routes, route];
24 | },
25 | remove(route) {
26 | routes = routes.filter(({ path }) => path !== route.path);
27 | },
28 | });
29 | setContext(CONTEXT_RENDER_UNLOCKED, readable(true));
30 | }
31 |
32 | export function createLayout() {
33 | const parentContext = getContext(CONTEXT_ROUTER_KEY);
34 | let isAnyMatch = writable(false);
35 | const dynamicSubjects = dynamicDerived($subjects =>
36 | $subjects.reduce((acc, next) => acc || !!next, false),
37 | );
38 |
39 | const unsubscribe = dynamicSubjects.subscribe(_isAnyMatch => {
40 | isAnyMatch.set(_isAnyMatch);
41 | });
42 |
43 | setContext(CONTEXT_ROUTER_KEY, {
44 | getRoutes: parentContext.getRoutes,
45 | add(route) {
46 | parentContext.add(route);
47 | dynamicSubjects.push(route.subject);
48 | },
49 | remove(route) {
50 | parentContext.remove(route);
51 | dynamicSubjects.remove(route.subject);
52 | },
53 | });
54 |
55 | setContext(CONTEXT_RENDER_UNLOCKED, isAnyMatch);
56 |
57 | onDestroy(() => unsubscribe());
58 |
59 | return isAnyMatch;
60 | }
61 |
62 | export function getDepth() {
63 | const currentDepth = getContext(CONTEXT_DEPTH_KEY) + 1;
64 | setContext(CONTEXT_DEPTH_KEY, currentDepth);
65 | return currentDepth;
66 | }
67 |
68 | export function createRoute({ path, exact, depth }) {
69 | const isProtected = getProtected();
70 | const isRenderUnlocked = getContext(CONTEXT_RENDER_UNLOCKED);
71 | const context = getContext(CONTEXT_ROUTER_KEY);
72 | const { currentPath } = getHistory();
73 |
74 | const subject = derived(
75 | [isProtected, currentPath],
76 | ([$isProtected, $currentPath]) =>
77 | $isProtected && matchPath($currentPath, { path, exact }),
78 | );
79 |
80 | const routeData = { path, exact, isProtected, depth, subject };
81 |
82 | context.add(routeData);
83 | onDestroy(() => context.remove(routeData));
84 |
85 | return [subject, isRenderUnlocked];
86 | }
87 |
88 | export function createRedirect({ from, to, exact, depth }) {
89 | const isProtected = getProtected();
90 | const context = getContext(CONTEXT_ROUTER_KEY);
91 | const { push, replace, currentPath } = getHistory();
92 |
93 | const unsubscribe = derived([isProtected, currentPath], identity).subscribe(
94 | async ([$isProtected, $currentPath]) => {
95 | await tick();
96 | const routes = context.getRoutes();
97 | const isFromMatch = matchPath($currentPath, { path: from, exact });
98 | const isSomeMatch = routes.some(route => {
99 | return (
100 | get(route.isProtected) &&
101 | matchPath($currentPath, route) &&
102 | route.depth === depth
103 | );
104 | });
105 |
106 | if ($isProtected && !isSomeMatch && isFromMatch) {
107 | (from !== '*' ? replace : push)(to);
108 | }
109 | },
110 | );
111 |
112 | onDestroy(unsubscribe);
113 | }
114 |
115 | export function createFallback() {
116 | const context = getContext(CONTEXT_ROUTER_KEY);
117 | const isFallback = writable(false);
118 | const { currentPath } = getHistory();
119 |
120 | const unsubscribe = currentPath.subscribe(async $history => {
121 | await tick();
122 | const routes = context.getRoutes();
123 | const nextFallback = !routes.some(
124 | route => get(route.isProtected) && matchPath($history, route),
125 | );
126 | isFallback.set(nextFallback);
127 | });
128 |
129 | onDestroy(unsubscribe);
130 | return isFallback;
131 | }
132 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
Should be placed on the top of your application. Applies special listener for every <a> element and initializes routing state for application's tree.
Uses browser history API.
40 | 41 | ### <MemoryRouter /> 42 | 43 |The same as <Router> but uses in-memory history API.
Function
46 |
47 | 48 | Function that returns object of helper functions to work with history. 49 |
50 | 51 |This function should be called in the component's initialization step bacause Router and MemoryRouter uses svelte's context API as a core approach
| Name | 59 |Arguments | 60 |Description | 61 |
|---|---|---|
push |
66 | path: String |
67 | Push path to the history | 68 |
replace |
71 | path: String |
72 | Replace path in the current state of the history | 73 |
back |
76 | - | 77 |Move back in the history | 78 |
forward |
81 | - | 82 |Move forward in the history | 83 |
| Name | 93 |Subject | 94 |Description | 95 |
|---|---|---|
currentPath |
100 | currentPath: String |
101 | Current path in history | 102 |
stack( <MemoryRouter> only) |
105 | { stack, hasNext, hasPrev } |
106 | Set of fields with memory histories' metadata | 107 |
Function
112 |
113 |
114 | Svelte action. Allows to control active class (show/hide it) in case of matching href attribute with current path of history. Active class name should be defined explicitly to be compiled with svelte.
115 |
118 | Ex. <a use:navLink={{ exact: true, activeClass: 'active' }} class="active" href="/path" />
119 |
| Name | 127 |Type | 128 |Default / required | 129 |Description | 130 |
|---|---|---|---|
| exact | 135 |Boolean |
136 | false |
137 | If pathes should have exactly matches | 138 | 139 |
| activeClass | 141 |String |
142 | 'active' |
143 | Class name that will be assigned in case of pathes matches | 144 | 145 |
151 | Specifies your route configuration. 152 |
153 | 154 |
155 | It is possible to define nested to routes.
156 | In this case all pathes will calculate relatively the parent path.
157 | Ex. If parent route defined as <Route path="/parent" /> and child as <Route path="/child" /> - in this case nested route will be resolved by path /parent/child.
158 |
| Prop | 164 |Type | 165 |Default / required | 166 |Description | 167 |
|---|---|---|---|
172 | path
173 | |
174 | String |
175 | required | 176 |
177 | Path to access the route. 178 |Could be defined as template with required and optional parameters (ex.
180 | If |
183 |
186 | let:params
187 | |
188 | Object |
189 | null |
190 | Parameters resolved from |
191 |
exact |
194 | Boolean |
195 | false |
196 |
197 | Detects if path should have exactly matches 198 | |
199 |
when |
202 | Boolean |
203 | true |
204 |
205 | Detects if route is using in current flow 206 | |
207 |
component |
210 | SvelteComponent |
211 | null |
212 |
213 | Renders in case if |
215 |
lazy |
218 | () => Promise<SvelteComponent> |
219 | null |
220 |
221 | Function that returns promise that resolving the Svelte component 222 |Loading starts only on the first route matching and after that component will cache 223 | |
224 |
throttle |
227 | Number |
228 | 0 |
229 |
230 | Uses in a couple with 231 | Determines minimal time (in ms) which component will not be displayed. 232 |Necessary for preventing flash effect when switching pending state to component. 233 | |
234 |
<slot /> |
237 | SvelteSlot |
238 | - |
239 |
240 | Renders in the case if |
242 |
<slot name="pending" /> |
245 | SvelteSlot |
246 | - |
247 |
248 | Renders when component from |
250 |
<slot name="catch" /> |
253 | SvelteSlot |
254 | - |
255 |
256 | Renders when component from |
258 |
265 | Provides the possibility to declaratively define layouts around the group of routes and will be rendered only in the case if any path of these routes matches. 266 |
267 | 268 || Prop | 272 |Type | 273 |Default / required | 274 |Description | 275 |
|---|---|---|---|
component |
280 | SvelteComponent |
281 | required | 282 |
283 | Layout component that wraps the group of routes. <slot/> content of <Layout> will be passed to it.
284 | Renders only in case if any path of inner routes matches.
285 | |
286 |
when |
289 | Boolean |
290 | true |
291 |
292 | Detects if layout and it routes' group is using in current flow 293 | |
294 |
<slot /> |
297 | SvelteSlot |
298 | - |
299 |
300 | Will be passed to the |
302 |
309 | Extends <Route> without path property and expands with own ones.
310 |
312 | Route that displays content, when history hash (#) matches. 313 |
314 | 315 || Prop | 319 |Type | 320 |Default / required | 321 |Description | 322 |
|---|---|---|---|
hash |
327 | String |
328 | required | 329 |Should start with # |
330 |
let:removeHash |
333 | Function |
334 | - | 335 |
336 | Passes to component or lazy as property.337 | Function that allows to remove hash from history. 338 | Usefull in a couple with modals etc. 339 | |
340 |
347 | Extends <Route> without path property.
348 |
350 | Renders component from lazy, component or <slot /> if any defined route wasn't rendered.
351 | Usefull for 404 (NotFound) pages.
352 |
357 | Determines overriding of current location.
358 | Nested redirect will define from path relatively to the parent route's path.
359 |
| Prop | 365 |Type | 366 |Default / required | 367 |Description | 368 |
|---|---|---|---|
to |
373 | String |
374 | required | 375 |
376 | Defines path to which redirect in case of from matched
377 | |
378 |
from |
381 | String |
382 | '*' |
383 |
384 | Determines the path that should be overrided. 385 | If * specified than redirect will be triggered from path that doesn't matched for any route.
386 | |
387 |
exact |
390 | Boolean |
391 | false |
392 |
393 | Detects if path of from property should have exactly matches
394 | |
395 |
402 | Provides possibility to prevent leaving from the page. 403 |
404 |405 | Usefull if there is a form on the page and in the case of it's filled to prevent leaving. 406 |
407 | 408 || Prop | 412 |Type | 413 |Default / required | 414 |Description | 415 |
|---|---|---|---|
shouldDetectLeave |
420 | Boolean |
421 | true |
422 | Detects if leaving should be detected | 423 |
let:isLeaving |
426 | Boolean |
427 | true |
428 | Detects if user trying to leave the page | 429 |
let:cancelLeave |
432 | Function |
433 | - | 434 |Cancel transition from the page | 435 |
let:acceptLeave |
438 | Function |
439 | - | 440 |Accept transition from the page. User will be moved to the page where he tried to go before. | 441 |
<slot /> |
444 | SvelteSlot |
445 | - | 446 |Child content of the component | 447 |
454 | Protects displaying of nested routes. If routes was wrapped with some content before - it (content) will be displayed in any case. Uses as an abstraction for <Layout /> but could be usefull in some special cases.
455 |
| Prop | 461 |Type | 462 |Default / required | 463 |Description | 464 |
|---|---|---|---|
when |
469 | Boolean |
470 | true |
471 | Detects if routes should be displayed in the subtree | 472 | 473 |