Router pro Svelte.js

Javascriptový framework Svelte.js nemá vlastní oficiální router. Nabízí sice aplikační framework Sapper, ale ten použít nechci. Zkusím tedy porovnat dostupné routery pro Svelte. Jako kritérium pro zařazení do seznamu jsem dal sto hvězd v GitHubu.

svelte-routing

GitHub 786 hvězd, 692 Used by, poslední změna kódu před měsícem.

Svelte ve FAQ doporučuje pro deklarativní HTML přístup.

<!-- App.svelte -->
<script>
  import { Router, Link, Route } from "svelte-routing";
  import Home from "./routes/Home.svelte";
  import About from "./routes/About.svelte";
  import Blog from "./routes/Blog.svelte";

  export let url = "";
</script>

<Router url="{url}">
  <nav>
    <Link to="/">Home</Link>
    <Link to="about">About</Link>
    <Link to="blog">Blog</Link>
  </nav>
  <div>
    <Route path="blog/:id" component="{BlogPost}" />
    <Route path="blog" component="{Blog}" />
    <Route path="about" component="{About}" />
    <Route path="/"><Home /></Route>
  </div>
</Router>

// main.js
import App from "./App.svelte";

const app = new App({
  target: document.getElementById("app"),
  hydrate: true
});

// server.js
const { createServer } = require("http");
const app = require("./dist/App.js");

createServer((req, res) => {
  const { html } = app.render({ url: req.url });

  res.write(`
    <!DOCTYPE html>
    <div id="app">${html}</div>
    <script src="/dist/bundle.js"></script>
  `);

  res.end();
}).listen(3000);

svelte-spa-router

GitHub 337 hvězd, 325 Used by, poslední změna kódu před dvaceti dny.

Směřování založené na hašování, které je vhodné pro SPA aplikace, tedy nepotřebuje podporu na serveru. Pro moji aplikaci není ideální, protože předává znak „#“, který potřebuji v aplikaci použít pro jiné účely. Toto lze ale vyřešit tím, že Namísto toho, abyste museli psát #před každým odkazem, můžete také použít use:link.

Svelte ve FAQ doporučuje pro hash-based routing na klientské straně.

<a href="/book/321" use:link>The Little Prince</a>

// Příklad definice routování
import Home from './routes/Home.svelte'
import Author from './routes/Author.svelte'
import Book from './routes/Book.svelte'
import NotFound from './routes/NotFound.svelte'

const routes = {
  // Exact path
  '/': Home,

  // Using named parameters, with last being optional
  '/author/:first/:last?': Author,

  // Wildcard parameter
  '/book/*': Book,

  // Catch-all
  // This is optional, 
  //but if present it must be the last
    '*': NotFound,
}
// Navigace mezi stránkami
<a href="#/book/123">Thus Spoke Zarathustra</a>

svero

GitHub 226 hvězd, 109 Used by, poslední změna před osmi měsíci. Vývoj zastaven autorem!

abstract-state-router

GitHub 276 hvězd, poslední změna kódu před třemi lety.

svelte-router

GitHub 166 hvězd, 59 Used by, poslední změna kódu před osmi dny. Navržen především pro SPA. Podporuje lokalizaci.

// Příklad routes.js 

import Login from './views/public/login.svelte'
import PublicIndex from './views/public/index.svelte'
import PublicLayout from './views/public/layout.svelte'
import AdminLayout from './views/admin/layout.svelte'
import AdminIndex from './views/admin/index.svelte'
import EmployeesIndex from './views/admin/employees/index.svelte'

function userIsAdmin() {
  //check if user is admin and returns true or false
}

const routes = [
  {
    name: '/',
    component: PublicLayout
  },
  { name: 'login', component: Login, layout: PublicLayout },
  {
    name: 'admin',
    component: AdminLayout,
    onlyIf: { guard: userIsAdmin, redirect: '/login' },
    nestedRoutes: [
      { name: 'index', component: AdminIndex },
      {
        name: 'employees',
        component: '',
        nestedRoutes: [
          { name: 'index', component: EmployeesIndex },
          { name: 'show/:id', component: EmployeesShow }
        ]
      }
    ]
  }
]

// Import routování pravděpodobně do App.svelte

<script>
  import { Router } from 'svelte-router-spa'
  import { routes } from './routes'
</script>

<Router {routes} />
export { routes }

crayon

GitHub 268 hvězd, poslední změna kódu před dvěma měsíci. SPA router pro všechny frameworky (nejen Svelte) s Express syntaxí.

import React from 'react'
import crayon from 'crayon'
import react from 'crayon-react'

const app = crayon.create()

app.use(react.router())

app.path('/', ctx => {
    return ctx.mount(() => <h1>Hello World</h1>)
})

app.path('/users/:id', ctx => {
    return ctx.mount(() => <div>Hi { ctx.params.id }!</div>)
})

app.path('/**', ctx => {
    return ctx.mount(() => <div>Not Found!</div>)
})

app.load()

// Použití navigace ve Svelte
import svelte from 'crayon-svelte'
app.use(svelte.router())

routify

GitHub 238 hvězd, 75 Used by, poslední změna kódu před dvanácti dny. Automatizované cesty strukturou souborů. (Lze relativní cesty, absolutní cesty, pojmenované cesty a parametrizované cesty). Trasy jsou automatizované strukturou souborů.

Svelte ve FAQ doporučuje pro routování dle souborového systému.

// App.svelte
<script>
  import { Router } from "@sveltech/routify";
  import { routes } from "@sveltech/routify/tmp/routes";
</script>
<Router {routes} />

// main.js
import HMR from  '@sveltech/routify/hmr'
import App from './App.svelte';

const app = HMR(App, { target: document.body }, 'routify-app')
export default app;

// ověřování přístupu
<!-- src/pages/_layout.svelte -->
<script>
  import { authenticate } from 'my-auth-service'
</script>

<!-- Wait with rendering the app till the user/guest is verified.
This prevents small UI glitches and premature authorization checks. -->
{#await authenticate()}

<!-- Show a waiting message/page/animation here -->
Verifying user...

<!-- Pass the user to all nested pages in the project -->
{:then user}
  <slot scoped={{user}} />
{/await}

Závěr

Výběr není malý. Každý může mít své preference. Možná je hlas lidu hlasem božím…