-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #243 from microbit-foundation/add-simple-routing
Add simple routing
- Loading branch information
Showing
18 changed files
with
203 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| <script></script> | ||
|
|
||
| <div class="justify-center items-center self-center m-auto"> | ||
| <img alt="loading" src="imgs/loadingspinner.gif" width="150px" /> | ||
| <img alt="loading" src="/imgs/loadingspinner.gif" width="150px" /> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <script lang="ts"> | ||
| import { onMount } from 'svelte'; | ||
| import DataPage from '../pages/DataPage.svelte'; | ||
| import Homepage from '../pages/Homepage.svelte'; | ||
| import ModelPage from '../pages/ModelPage.svelte'; | ||
| import FilterPage from '../pages/filter/FilterPage.svelte'; | ||
| import TrainingPage from '../pages/training/TrainingPage.svelte'; | ||
| import { currentPageComponent } from '../views/currentComponentStore'; | ||
| import { currentPath, navigate, Paths, PathType } from './paths'; | ||
| function getRoutedComponent(path: PathType) { | ||
| switch (path) { | ||
| case Paths.HOME: | ||
| return Homepage; | ||
| case Paths.DATA: | ||
| return DataPage; | ||
| case Paths.TRAINING: | ||
| return TrainingPage; | ||
| case Paths.MODEL: | ||
| return ModelPage; | ||
| case Paths.FILTERS: | ||
| return FilterPage; | ||
| } | ||
| // Hacky way of ensuring exhaustive switch statement (at compile time) | ||
| // since typescript does not have this by default. | ||
| const exhaustiveCheck: never = path; | ||
| // eslint-disable-next-line @typescript-eslint/restrict-template-expressions | ||
| throw new Error(`Non Exhaustive switch. ${exhaustiveCheck} not handled.`); | ||
| } | ||
| const onPathChange = (path: PathType) => { | ||
| currentPageComponent.set(getRoutedComponent(path)); | ||
| let shouldPushState = true; | ||
| const historyState = pathFromBrowserHistoryState(history.state); | ||
| if (historyState !== undefined && historyState === path) { | ||
| shouldPushState = false; | ||
| } | ||
| if (shouldPushState) { | ||
| const url = window.location.origin + (path.startsWith('/') ? '' : '/') + path; | ||
| history.pushState({ path: path }, '', url); | ||
| } | ||
| }; | ||
| const pathFromBrowserHistoryState = (state: unknown): PathType | undefined => { | ||
| if (typeof state !== 'object' || state == null) { | ||
| return undefined; | ||
| } | ||
| if (!('path' in state)) { | ||
| return undefined; | ||
| } | ||
| if (typeof state.path !== 'string') { | ||
| return undefined; | ||
| } | ||
| if (!Object.values(Paths).includes(state.path as PathType)) { | ||
| return undefined; | ||
| } | ||
| return state.path as PathType; | ||
| }; | ||
| const navigateFromUrl = () => { | ||
| let urlPath = window.location.pathname; | ||
| if (urlPath.startsWith('/')) { | ||
| urlPath = urlPath.substring(1, urlPath.length); | ||
| } | ||
| let path: PathType = Paths.HOME; | ||
| if (Object.values(Paths).includes(urlPath as PathType)) { | ||
| path = urlPath as PathType; | ||
| navigate(path); | ||
| } else { | ||
| history.replaceState({}, '', Paths.HOME); | ||
| } | ||
| }; | ||
| navigateFromUrl(); | ||
| $: onPathChange($currentPath); | ||
| const onPopstateEvent = (event: PopStateEvent) => { | ||
| const state: unknown = event.state; | ||
| const path = pathFromBrowserHistoryState(state); | ||
| if (path !== undefined) { | ||
| navigate(path); | ||
| } | ||
| }; | ||
| onMount(() => { | ||
| addEventListener('popstate', onPopstateEvent); | ||
| return () => { | ||
| removeEventListener('popstate', onPopstateEvent); | ||
| }; | ||
| }); | ||
| </script> | ||
|
|
||
| <slot /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { writable, Writable, get, derived } from 'svelte/store'; | ||
|
|
||
| export const Paths = { | ||
| HOME: '/', | ||
| DATA: 'data', | ||
| TRAINING: 'training', | ||
| MODEL: 'model', | ||
| FILTERS: 'training/filters', | ||
| } as const; | ||
|
|
||
| export type PathType = (typeof Paths)[keyof typeof Paths]; | ||
|
|
||
| export const currentPathPrivate: Writable<PathType> = writable(Paths.HOME); | ||
| export const currentPath = derived(currentPathPrivate, path => path); | ||
|
|
||
| export function navigate(path: PathType) { | ||
| if (path === get(currentPath)) { | ||
| return; | ||
| } | ||
| currentPathPrivate.set(path); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.