Sample: dynamic imports

ItalyPaleAle · Sep 20, 2020 · bdae3a1 · bdae3a1
1 parent 03336fa
commit bdae3a1
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 0 deletions.
diff --git a/examples/dynamic-imports/dist/index.html b/examples/dynamic-imports/dist/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf8">
+	<meta name="viewport" content="width=device-width">
+
+	<title>svelte-spa-router sample</title>
+</head>
+
+<body>
+	<script defer type="module" src="main.js"></script>
+</body>
+</html>
diff --git a/examples/dynamic-imports/rollup.config.js b/examples/dynamic-imports/rollup.config.js
@@ -0,0 +1,33 @@
+import svelte from 'rollup-plugin-svelte'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+
+export default {
+    input: 'src/main.js',
+    output: {
+        sourcemap: true,
+        name: 'app',
+        format: 'esm',
+        dir: 'dist/',
+        chunkFileNames: '[name].js'
+    },
+    plugins: [
+        svelte({
+            // enable run-time checks when not in production
+            dev: true,
+            // we'll extract any component CSS out into
+            // a separate file  better for performance
+            css: css => {
+                css.write('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/rollup-plugin-commonjs
+        resolve(),
+        commonjs()
+    ]
+}
diff --git a/examples/dynamic-imports/src/App.svelte b/examples/dynamic-imports/src/App.svelte
@@ -0,0 +1,22 @@
+<h1>svelte-spa-router sample</h1>
+<h2>Dynamic imports</h2>
+
+<!-- Navigation links -->
+<ul>
+    <li><a href="#/">Home</a></li>
+    <li><a href="#/hello/svelte">Say hi!</a> (dynamically imported route)</li>
+    <li><a href="#/wild/card">Wildcard route </a> (dynamically imported route, with a 5 seconds artificial delay)</li>
+    <li><a href="#/does/not/exist">Not found</a></li>
+</ul>
+
+<!-- Show the router -->
+<Router {routes} />
+
+<script>
+// Import the router component
+// Normally, this would be: `import Router from 'svelte-spa-router'`
+import Router from '../../../Router.svelte'
+
+// Import the list of routes
+import routes from './routes'
+</script>
diff --git a/examples/dynamic-imports/src/main.js b/examples/dynamic-imports/src/main.js
@@ -0,0 +1,7 @@
+// Initialize the Svelte app and inject it in the DOM
+import App from './App.svelte'
+const app = new App({
+    target: document.body
+})
+
+export default app
diff --git a/examples/dynamic-imports/src/routes.js b/examples/dynamic-imports/src/routes.js
@@ -0,0 +1,55 @@
+/* eslint-disable */
+
+// Import the wrap method
+// Normally, this would be: `import {wrap} from 'svelte-spa-router/wrap'`
+import {wrap} from '../../../wrap'
+
+// Components: only Home, Loading and NotFound are statically included in the bundle
+import Home from './routes/Home.svelte'
+import Loading from './routes/Loading.svelte'
+import NotFound from './routes/NotFound.svelte'
+
+// Export the route definition object
+export default {
+    // Exact path
+    '/': Home,
+
+    // Using named parameters, with last being optional
+    // This is dynamically imported, so the code is loaded on-demand from the server
+    '/hello/:first/:last?': wrap({
+        // Note that this is a function that returns the import
+        asyncRoute: () => import('./routes/Name.svelte'),
+        // Show the loading component while the route is being downloaded
+        loadingRoute: Loading,
+        // Pass values for the `params` prop of the loading route
+        loadingParams: {
+            message: 'Loading the Name route…'
+        }
+    }),
+
+    // Wildcard parameter
+    // This matches `/wild/*` (with anything after), but NOT `/wild` (with nothing after)
+    // This is dynamically imported too
+    '/wild/*': wrap({
+        // Note that this is a function that returns the import
+        // We're adding an artificial delay of 5 seconds so you can experience the loading even on localhost
+        // Note that normally the modules loaded with `import()` are cached, so the delay exists only on the first request.
+        // In this case, we're adding a delay every time the route is loaded
+        asyncRoute: () => import('./routes/Wild.svelte')
+            .then((component) => {
+                return new Promise((resolve) => {
+                    // Wait 5 seconds before returning
+                    setTimeout(() => resolve(component), 5000)
+                })
+            }),
+        // Show the loading component while the route is being downloaded
+        loadingRoute: Loading,
+        // Pass values for the `params` prop of the loading route
+        loadingParams: {
+            message: 'Loading the Wild route…'
+        }
+    }),
+
+    // Catch-all, must be last
+    '*': NotFound,
+}
diff --git a/examples/dynamic-imports/src/routes/Home.svelte b/examples/dynamic-imports/src/routes/Home.svelte
@@ -0,0 +1,10 @@
+<h2>Home component</h2>
+
+<p>
+    This sample shows how to dynamically import components. These are modules imported on-demand with the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import()</code> method</a>.<br/>
+    Bundlers like Rollup and Webpack support automatic code splitting when you use dynamic imports, so after compiling this sample, in the <code>dist/</code> folder you'll see a bunch of different JavaScript files. At runtime, the browser requests them only when you first navigate to the route (and then they're cached).
+</p>
+
+<p>This is the Home component, which contains markup only.</p>
+
+<p><em>Hint:</em> Try navigating with the links below, then use your browser's back and forward buttons.</p>
diff --git a/examples/dynamic-imports/src/routes/Loading.svelte b/examples/dynamic-imports/src/routes/Loading.svelte
@@ -0,0 +1,9 @@
+<h2>Loading…</h2>
+
+<p>We're loading the route!</p>
+<p>Here's your message: {params && params.message}</p>
+
+<script>
+// Prop exported that will be filled by the router
+export let params
+</script>
diff --git a/examples/dynamic-imports/src/routes/Name.svelte b/examples/dynamic-imports/src/routes/Name.svelte
@@ -0,0 +1,14 @@
+<h2>Hi there!</h2>
+
+<p>
+    Your name is:
+    <b>{params.first}</b>
+    <b>{#if params.last}{params.last}{/if}</b>
+</p>
+<p>This comes from the URL, matching <code>/hello/:first/:last?</code>, where the last name is optional.</p>
+<p><em>Hint:</em> Try changing the URL and add your name, e.g. <code>/hello/alex</code> or <code>/hello/jane/doe</code></p>
+
+<script>
+// The params prop contains values matched from the URL
+export let params = {}
+</script>
diff --git a/examples/dynamic-imports/src/routes/NotFound.svelte b/examples/dynamic-imports/src/routes/NotFound.svelte
@@ -0,0 +1,3 @@
+<h2>NotFound</h2>
+
+<p>Oops, this route doesn't exist!</p>
diff --git a/examples/dynamic-imports/src/routes/Wild.svelte b/examples/dynamic-imports/src/routes/Wild.svelte
@@ -0,0 +1,12 @@
+<h2>Wildcard</h2>
+
+<p>Anything in the URL after <code>/wild/</code> is shown below as message. That's found in the <code>params.wild</code> prop.</p>
+
+<p>Your message is: {params.wild}</p>
+
+<p>Note that this route was artificially delayed for 5 seconds to let us see the <code>Loading</code> component even when the network is fast (such as testing on localhost).</p>
+
+<script>
+// The params prop contains values matched from the URL
+export let params = {}
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<h2>NotFound</h2>

		<p>Oops, this route doesn't exist!</p>