From 75ece5a02e4b45e51ec19a2e3f8f971849824023 Mon Sep 17 00:00:00 2001
From: ItalyPaleAle <43508+ItalyPaleAle@users.noreply.github.com>
Date: Sun, 20 Sep 2020 06:16:18 +0000
Subject: [PATCH] First sample: basic routing
---
.eslintignore | 5 ++-
.gitignore | 5 +++
README.md | 2 ++
examples/basic-routing/dist/index.html | 13 ++++++++
examples/basic-routing/rollup.config.js | 33 +++++++++++++++++++
examples/basic-routing/src/App.svelte | 22 +++++++++++++
examples/basic-routing/src/main.js | 7 ++++
examples/basic-routing/src/routes.js | 22 +++++++++++++
examples/basic-routing/src/routes/Home.svelte | 11 +++++++
examples/basic-routing/src/routes/Name.svelte | 14 ++++++++
.../basic-routing/src/routes/NotFound.svelte | 3 ++
examples/basic-routing/src/routes/Wild.svelte | 10 ++++++
12 files changed, 146 insertions(+), 1 deletion(-)
create mode 100755 examples/basic-routing/dist/index.html
create mode 100755 examples/basic-routing/rollup.config.js
create mode 100644 examples/basic-routing/src/App.svelte
create mode 100644 examples/basic-routing/src/main.js
create mode 100644 examples/basic-routing/src/routes.js
create mode 100644 examples/basic-routing/src/routes/Home.svelte
create mode 100644 examples/basic-routing/src/routes/Name.svelte
create mode 100644 examples/basic-routing/src/routes/NotFound.svelte
create mode 100644 examples/basic-routing/src/routes/Wild.svelte
diff --git a/.eslintignore b/.eslintignore
index 2176928..fed184a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,5 @@
# Test app
-test/app
\ No newline at end of file
+test/app
+
+# Compiled
+examples/*/dist
diff --git a/.gitignore b/.gitignore
index 6652056..5bb3a7a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,11 @@ test/app/dist/bundle*
test/app/dist/*.js
test/app/dist/*.js.map
+# Example apps
+examples/*/dist/bundle*
+examples/*/dist/*.js
+examples/*/dist/*.js.map
+
# This is a module published on NPM, so we can ignore package-lock.json
package-lock.json
diff --git a/README.md b/README.md
index f71d491..174ce2c 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,8 @@ npm install
# Navigate to a sample
cd examples/…
+# For example
+cd examples/basic-routing
# Build and run (in the folder of a sample)
npx rollup -c
diff --git a/examples/basic-routing/dist/index.html b/examples/basic-routing/dist/index.html
new file mode 100755
index 0000000..6424790
--- /dev/null
+++ b/examples/basic-routing/dist/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ svelte-spa-router sample
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/basic-routing/rollup.config.js b/examples/basic-routing/rollup.config.js
new file mode 100755
index 0000000..742d141
--- /dev/null
+++ b/examples/basic-routing/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/basic-routing/src/App.svelte b/examples/basic-routing/src/App.svelte
new file mode 100644
index 0000000..f2907ac
--- /dev/null
+++ b/examples/basic-routing/src/App.svelte
@@ -0,0 +1,22 @@
+svelte-spa-router sample
+Basic routing
+
+
+
+
+
+
+
+
diff --git a/examples/basic-routing/src/main.js b/examples/basic-routing/src/main.js
new file mode 100644
index 0000000..57f6eca
--- /dev/null
+++ b/examples/basic-routing/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/basic-routing/src/routes.js b/examples/basic-routing/src/routes.js
new file mode 100644
index 0000000..ce0c1b1
--- /dev/null
+++ b/examples/basic-routing/src/routes.js
@@ -0,0 +1,22 @@
+// Components
+import Home from './routes/Home.svelte'
+import Name from './routes/Name.svelte'
+import Wild from './routes/Wild.svelte'
+import NotFound from './routes/NotFound.svelte'
+
+// Export the route definition object
+export default {
+ // Exact path
+ '/': Home,
+
+ // Using named parameters, with last being optional
+ '/hello/:first/:last?': Name,
+
+ // Wildcard parameter
+ // Included twice to match both `/wild` (and nothing after) and `/wild/*` (with anything after)
+ '/wild': Wild,
+ '/wild/*': Wild,
+
+ // Catch-all, must be last
+ '*': NotFound,
+}
diff --git a/examples/basic-routing/src/routes/Home.svelte b/examples/basic-routing/src/routes/Home.svelte
new file mode 100644
index 0000000..50c596f
--- /dev/null
+++ b/examples/basic-routing/src/routes/Home.svelte
@@ -0,0 +1,11 @@
+Home component
+
+
+ This sample shows how to set up the router with minimum functionality.
+ The route definition object contains a number of routes (including some with parameters and a catch-all at the end).
+ The links below allow navigating between pages.
+
+
+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/basic-routing/src/routes/Name.svelte b/examples/basic-routing/src/routes/Name.svelte
new file mode 100644
index 0000000..5707e05
--- /dev/null
+++ b/examples/basic-routing/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/basic-routing/src/routes/NotFound.svelte b/examples/basic-routing/src/routes/NotFound.svelte
new file mode 100644
index 0000000..f8b69bd
--- /dev/null
+++ b/examples/basic-routing/src/routes/NotFound.svelte
@@ -0,0 +1,3 @@
+NotFound
+
+Oops, this route doesn't exist!
diff --git a/examples/basic-routing/src/routes/Wild.svelte b/examples/basic-routing/src/routes/Wild.svelte
new file mode 100644
index 0000000..b1c5426
--- /dev/null
+++ b/examples/basic-routing/src/routes/Wild.svelte
@@ -0,0 +1,10 @@
+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}
+
+