From bdae3a13fc061109a3dd39c906f380a158b5cd29 Mon Sep 17 00:00:00 2001
From: ItalyPaleAle <43508+ItalyPaleAle@users.noreply.github.com>
Date: Sun, 20 Sep 2020 06:38:51 +0000
Subject: [PATCH] Sample: dynamic imports
---
examples/dynamic-imports/dist/index.html | 13 +++++
examples/dynamic-imports/rollup.config.js | 33 +++++++++++
examples/dynamic-imports/src/App.svelte | 22 ++++++++
examples/dynamic-imports/src/main.js | 7 +++
examples/dynamic-imports/src/routes.js | 55 +++++++++++++++++++
.../dynamic-imports/src/routes/Home.svelte | 10 ++++
.../dynamic-imports/src/routes/Loading.svelte | 9 +++
.../dynamic-imports/src/routes/Name.svelte | 14 +++++
.../src/routes/NotFound.svelte | 3 +
.../dynamic-imports/src/routes/Wild.svelte | 12 ++++
10 files changed, 178 insertions(+)
create mode 100755 examples/dynamic-imports/dist/index.html
create mode 100755 examples/dynamic-imports/rollup.config.js
create mode 100644 examples/dynamic-imports/src/App.svelte
create mode 100644 examples/dynamic-imports/src/main.js
create mode 100644 examples/dynamic-imports/src/routes.js
create mode 100644 examples/dynamic-imports/src/routes/Home.svelte
create mode 100644 examples/dynamic-imports/src/routes/Loading.svelte
create mode 100644 examples/dynamic-imports/src/routes/Name.svelte
create mode 100644 examples/dynamic-imports/src/routes/NotFound.svelte
create mode 100644 examples/dynamic-imports/src/routes/Wild.svelte
diff --git a/examples/dynamic-imports/dist/index.html b/examples/dynamic-imports/dist/index.html
new file mode 100755
index 0000000..6424790
--- /dev/null
+++ b/examples/dynamic-imports/dist/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ svelte-spa-router sample
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/dynamic-imports/rollup.config.js b/examples/dynamic-imports/rollup.config.js
new file mode 100755
index 0000000..742d141
--- /dev/null
+++ 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
new file mode 100644
index 0000000..3684362
--- /dev/null
+++ b/examples/dynamic-imports/src/App.svelte
@@ -0,0 +1,22 @@
+svelte-spa-router sample
+Dynamic imports
+
+
+
+
+
+
+
+
diff --git a/examples/dynamic-imports/src/main.js b/examples/dynamic-imports/src/main.js
new file mode 100644
index 0000000..57f6eca
--- /dev/null
+++ 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
new file mode 100644
index 0000000..95a68fe
--- /dev/null
+++ 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
new file mode 100644
index 0000000..4ca9488
--- /dev/null
+++ b/examples/dynamic-imports/src/routes/Home.svelte
@@ -0,0 +1,10 @@
+Home component
+
+
+ This sample shows how to dynamically import components. These are modules imported on-demand with the import() method.
+ Bundlers like Rollup and Webpack support automatic code splitting when you use dynamic imports, so after compiling this sample, in the dist/ 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).
+
+
+This is the Home component, which contains markup only.
+
+Hint: Try navigating with the links below, then use your browser's back and forward buttons.
diff --git a/examples/dynamic-imports/src/routes/Loading.svelte b/examples/dynamic-imports/src/routes/Loading.svelte
new file mode 100644
index 0000000..b659593
--- /dev/null
+++ b/examples/dynamic-imports/src/routes/Loading.svelte
@@ -0,0 +1,9 @@
+Loading…
+
+We're loading the route!
+Here's your message: {params && params.message}
+
+
diff --git a/examples/dynamic-imports/src/routes/Name.svelte b/examples/dynamic-imports/src/routes/Name.svelte
new file mode 100644
index 0000000..5707e05
--- /dev/null
+++ b/examples/dynamic-imports/src/routes/Name.svelte
@@ -0,0 +1,14 @@
+Hi there!
+
+
+ Your name is:
+ {params.first}
+ {#if params.last}{params.last}{/if}
+
+This comes from the URL, matching /hello/:first/:last?, where the last name is optional.
+Hint: Try changing the URL and add your name, e.g. /hello/alex or /hello/jane/doe
+
+
diff --git a/examples/dynamic-imports/src/routes/NotFound.svelte b/examples/dynamic-imports/src/routes/NotFound.svelte
new file mode 100644
index 0000000..f8b69bd
--- /dev/null
+++ b/examples/dynamic-imports/src/routes/NotFound.svelte
@@ -0,0 +1,3 @@
+NotFound
+
+Oops, this route doesn't exist!
diff --git a/examples/dynamic-imports/src/routes/Wild.svelte b/examples/dynamic-imports/src/routes/Wild.svelte
new file mode 100644
index 0000000..bdbff6f
--- /dev/null
+++ b/examples/dynamic-imports/src/routes/Wild.svelte
@@ -0,0 +1,12 @@
+Wildcard
+
+Anything in the URL after /wild/ is shown below as message. That's found in the params.wild prop.
+
+Your message is: {params.wild}
+
+Note that this route was artificially delayed for 5 seconds to let us see the Loading component even when the network is fast (such as testing on localhost).
+
+