First sample: basic routing

ItalyPaleAle · Sep 20, 2020 · 75ece5a · 75ece5a
1 parent 0b04827
commit 75ece5a
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 1 deletion.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,5 @@
 # Test app
-test/app
+test/app
+
+# Compiled
+examples/*/dist
diff --git 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
@@ -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
@@ -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/basic-routing/rollup.config.js 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
@@ -0,0 +1,22 @@
+<h1>svelte-spa-router sample</h1>
+<h2>Basic routing</h2>
+
+<!-- Navigation links -->
+<ul>
+    <li><a href="#/">Home</a></li>
+    <li><a href="#/hello/svelte">Say hi!</a></li>
+    <li><a href="#/wild/card">Wildcard route</a></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: `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/basic-routing/src/main.js 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
@@ -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
@@ -0,0 +1,11 @@
+<h2>Home component</h2>
+
+<p>
+    This sample shows how to set up the router with minimum functionality. <br/>
+    The route definition object contains a number of routes (including some with parameters and a catch-all at the end).<br/>
+    The links below allow navigating between pages.
+</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/basic-routing/src/routes/Name.svelte b/examples/basic-routing/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/basic-routing/src/routes/NotFound.svelte b/examples/basic-routing/src/routes/NotFound.svelte
@@ -0,0 +1,3 @@
+<h2>NotFound</h2>
+
+<p>Oops, this route doesn't exist!</p>
diff --git a/examples/basic-routing/src/routes/Wild.svelte b/examples/basic-routing/src/routes/Wild.svelte
@@ -0,0 +1,10 @@
+<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>
+
+<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>