forked from mefechoel/svelte-navigator
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
334 additions
and
26 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 |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| ## Route Transitions | ||
|
|
||
| An example showcasing how to animate the transition between two routes. | ||
|
|
||
| ### Try it out | ||
|
|
||
| ```bash | ||
| git clone https://github.com/mefechoel/svelte-navigator.git | ||
| cd svelte-navigator/example/transitions | ||
| npm install # if you're using yarn run 'yarn install' | ||
| npm start # 'yarn start' | ||
| # open browser at 'http://localhost:6065' | ||
| ``` |
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,20 @@ | ||
| { | ||
| "scripts": { | ||
| "start": "rollup -c -w", | ||
| "serve": "sirv public --single --port 6065" | ||
| }, | ||
| "dependencies": { | ||
| "svelte-navigator": "^3.1.5" | ||
| }, | ||
| "devDependencies": { | ||
| "@rollup/plugin-commonjs": "^17.0.0", | ||
| "@rollup/plugin-node-resolve": "^11.1.0", | ||
| "@rollup/plugin-replace": "^2.3.4", | ||
| "rollup": "2.36.2", | ||
| "rollup-plugin-css-only": "^3.1.0", | ||
| "rollup-plugin-livereload": "^2.0.0", | ||
| "rollup-plugin-svelte": "^7.0.0", | ||
| "sirv-cli": "^1.0.10", | ||
| "svelte": "^3.31.2" | ||
| } | ||
| } |
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,13 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Svelte Navigator</title> | ||
| <link rel="stylesheet" href="/build/bundle.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script src="/build/main.js"></script> | ||
| </body> | ||
| </html> |
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,80 @@ | ||
| import svelte from "rollup-plugin-svelte"; | ||
| import { nodeResolve as resolve } from "@rollup/plugin-node-resolve"; | ||
| import commonjs from "@rollup/plugin-commonjs"; | ||
| import livereload from "rollup-plugin-livereload"; | ||
| import replace from "@rollup/plugin-replace"; | ||
| import css from "rollup-plugin-css-only"; | ||
|
|
||
| const production = !process.env.ROLLUP_WATCH; | ||
|
|
||
| function serve() { | ||
| let server; | ||
|
|
||
| function toExit() { | ||
| if (server) server.kill(0); | ||
| } | ||
|
|
||
| return { | ||
| writeBundle() { | ||
| if (server) return; | ||
| // eslint-disable-next-line global-require | ||
| server = require("child_process").spawn( | ||
| "npm", | ||
| ["run", "serve", "--", "--dev"], | ||
| { | ||
| stdio: ["ignore", "inherit", "inherit"], | ||
| shell: true, | ||
| }, | ||
| ); | ||
|
|
||
| process.on("SIGTERM", toExit); | ||
| process.on("exit", toExit); | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| export default { | ||
| input: "src/main.js", | ||
| output: { | ||
| sourcemap: true, | ||
| format: "iife", | ||
| name: "app", | ||
| dir: "public/build", | ||
| }, | ||
| plugins: [ | ||
| svelte({ | ||
| compilerOptions: { | ||
| // enable run-time checks when not in production | ||
| dev: !production, | ||
| }, | ||
| }), | ||
| // we'll extract any component CSS out into | ||
| // a separate file - better for performance | ||
| css({ output: "bundle.css" }), | ||
|
|
||
| // If you have external dependencies installed from | ||
| // npm, you'll most likely need these plugins. In | ||
| // some cases you'll need additional configuration - | ||
| // consult the documentation for details: | ||
| // https://github.com/rollup/plugins/tree/master/packages/commonjs | ||
| resolve({ | ||
| browser: true, | ||
| dedupe: ["svelte"], | ||
| }), | ||
| commonjs(), | ||
| replace({ | ||
| process: `(${JSON.stringify({ env: { NODE_ENV: "development" } })})`, | ||
| }), | ||
|
|
||
| // In dev mode, call `yarn serve` once | ||
| // the bundle has been generated | ||
| !production && serve(), | ||
|
|
||
| // Watch the `public` directory and refresh the | ||
| // browser on changes when not in production | ||
| !production && livereload("public"), | ||
| ], | ||
| watch: { | ||
| clearScreen: false, | ||
| }, | ||
| }; |
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,93 @@ | ||
| <script> | ||
| import { Router, Route, Link } from "svelte-navigator"; | ||
| import GoodBoi from "./GoodBoi.svelte"; | ||
| import RouteTransition from "./RouteTransition.svelte"; | ||
| import TransitionContainer from "./TransitionContainer.svelte"; | ||
| </script> | ||
|
|
||
| <Router> | ||
| <div class="page-wrapper"> | ||
| <div class="page"> | ||
| <h1>Route Transitions</h1> | ||
| <nav> | ||
| <Link to="/">Home</Link> | ||
| <Link to="about">About</Link> | ||
| <Link to="something">Something</Link> | ||
| </nav> | ||
| <main> | ||
| <TransitionContainer> | ||
| <Route path="/"> | ||
| <RouteTransition x={200} duration={900}> | ||
| <h2>Home</h2> | ||
| <GoodBoi /> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet | ||
| itaque illo harum, fugit fuga non repellat accusamus commodi | ||
| deserunt deleniti dignissimos magni iste facilis! Voluptatibus | ||
| adipisci provident ipsa aut repellat! | ||
| </p> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet | ||
| itaque illo harum, fugit fuga non repellat accusamus commodi | ||
| deserunt deleniti dignissimos magni iste facilis! Voluptatibus | ||
| adipisci provident ipsa aut repellat! | ||
| </p> | ||
| </RouteTransition> | ||
| </Route> | ||
| <Route path="about"> | ||
| <RouteTransition x={200} duration={900}> | ||
| <h2>About</h2> | ||
| <GoodBoi /> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet | ||
| itaque illo harum, fugit fuga non repellat accusamus commodi | ||
| deserunt deleniti dignissimos magni iste facilis! Voluptatibus | ||
| adipisci provident ipsa aut repellat! | ||
| </p> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet | ||
| itaque illo harum, fugit fuga non repellat accusamus commodi | ||
| deserunt deleniti dignissimos magni iste facilis! Voluptatibus | ||
| adipisci provident ipsa aut repellat! | ||
| </p> | ||
| </RouteTransition> | ||
| </Route> | ||
| <Route path="something"> | ||
| <RouteTransition x={200} duration={900}> | ||
| <h2>Something</h2> | ||
| <GoodBoi /> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet | ||
| itaque illo harum, fugit fuga non repellat accusamus commodi | ||
| deserunt deleniti dignissimos magni iste facilis! Voluptatibus | ||
| adipisci provident ipsa aut repellat! | ||
| </p> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet | ||
| itaque illo harum, fugit fuga non repellat accusamus commodi | ||
| deserunt deleniti dignissimos magni iste facilis! Voluptatibus | ||
| adipisci provident ipsa aut repellat! | ||
| </p> | ||
| </RouteTransition> | ||
| </Route> | ||
| </TransitionContainer> | ||
| </main> | ||
| </div> | ||
| </div> | ||
| </Router> | ||
|
|
||
| <style> | ||
| :global(*) { | ||
| font-family: sans-serif; | ||
| } | ||
|
|
||
| .page-wrapper { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .page { | ||
| width: 70vw; | ||
| } | ||
| </style> |
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,25 @@ | ||
| <script> | ||
| import { onMount } from "svelte"; | ||
|
|
||
| let src = ""; | ||
|
|
||
| onMount(() => { | ||
| fetch("https://dog.ceo/api/breeds/image/random") | ||
| .then(res => res.json()) | ||
| .then(({ message }) => { | ||
| src = message; | ||
| }); | ||
| }); | ||
| </script> | ||
|
|
||
| <img {src} alt="A very good boi" /> | ||
|
|
||
| <style> | ||
| img { | ||
| display: block; | ||
| width: 600px; | ||
| height: 400px; | ||
| object-fit: cover; | ||
| background: #ddd; | ||
| } | ||
| </style> |
Oops, something went wrong.