Routing: add hasRoute and hasAnyRoute and make optional components views not render route if they don't exist

src/assets/views/auth/account/NamePanel.svelte

@@ -3,16 +3,18 @@
     import Message from "../../components/Message.svelte";
     import Form from "../../utils/Form.svelte";
     import Field from "../../utils/Field.svelte";
+    import {hasRoute, route} from "../../../../common/Routing";
 
     let newName = '';
 </script>
 
+{#if hasRoute('change-name')}
 <section class="panel">
     <h2><i data-feather="key"></i> Change name</h2>
 
 
     {#if $locals.can_change_name}
-        <Form action={$locals.route('change-name')}
+        <Form action={route('change-name')}
               submitIcon="save" submitText="Change my name {newName.length > 0 ? 'to ' + newName : ''}"
               confirm="Are you sure you want to change your name to {newName}?">
             <Field type="text" name="name" icon="user" placeholder="New name" required bind:value={newName}/>
@@ -29,3 +31,4 @@
         <Message type="info" content="You will be able to change your name in {$locals.can_change_name_in}" sticky discreet/>
     {/if}
 </section>
+{/if}

src/assets/views/auth/account/PasswordPanel.svelte

@@ -2,21 +2,23 @@
     import {locals} from "../../../ts/stores";
     import Form from "../../utils/Form.svelte";
     import Field from "../../utils/Field.svelte";
+    import {hasRoute, route} from "../../../../common/Routing";
 
     let removePasswordMode = false;
 </script>
 
+{#if hasRoute('remove-password', 'change-password')}
 <section class="panel">
     <h2><i data-feather="key"></i> {$locals.has_password ? 'Change' : 'Set'} password</h2>
 
     {#if removePasswordMode}
-        <Form action={$locals.route('remove-password')}
+        <Form action={route('remove-password')}
               submitIcon="trash" submitText="Remove password" submitClass="danger"
               confirm="Are you sure you want to remove your password?">
             <button type="button" on:click={() => removePasswordMode = false}>Go back</button>
         </Form>
     {:else}
-        <Form action={$locals.route('change-password')}
+        <Form action={route('change-password')}
               submitIcon="save" submitText="Set password">
             {#if $locals.has_password}
                 <Field type="password" name="current_password" icon="key" placeholder="Current password"/>
@@ -28,3 +30,4 @@
         </Form>
     {/if}
 </section>
+{/if}

src/assets/views/auth/account/account.svelte

@@ -6,6 +6,7 @@
     import PasswordPanel from "./PasswordPanel.svelte";
     import Form from "../../utils/Form.svelte";
     import Field from "../../utils/Field.svelte";
+    import {route} from "../../../../common/Routing";
 
     const mainEmail = $locals.main_email?.email;
     const personalInfoFields = $locals.user_personal_info_fields || [];
@@ -68,13 +69,13 @@
                                 <td>Secondary</td>
                                 <td>{email.email}</td>
                                 <td class="actions">
-                                    <Form action={$locals.route('set-main-email')} button
+                                    <Form action={route('set-main-email')} button
                                           submitIcon="refresh-ccw" submitText="Set as main address" submitClass="warning"
                                           confirm="Are you sure you want to set {email.email} as your main address?">
                                         <Field type="hidden" name="id" value={email.id}/>
                                     </Form>
 
-                                    <Form action={$locals.route('remove-email')} button
+                                    <Form action={route('remove-email')} button
                                           submitIcon="trash" submitText="Remove" submitClass="danger"
                                           confirm="Are you sure you want to delete {email.email}?">
                                         <Field type="hidden" name="id" value={email.id}/>
@@ -87,7 +88,7 @@
                 </table>
             </div>
 
-            <Form action={$locals.route('add-email')} class="sub-panel"
+            <Form action={route('add-email')} class="sub-panel"
                   submitIcon="plus" submitText="Add email address">
                 <h3>Add an email address:</h3>
 

src/assets/views/auth/auth.svelte

@@ -4,6 +4,7 @@
     import Form from "../utils/Form.svelte";
     import Field from "../utils/Field.svelte";
     import Icon from "../utils/Icon.svelte";
+    import {hasRoute, route} from "../../../common/Routing";
 
     let registerUsingMagicLink = $locals.previousFormData()?.['auth_method'] !== 'password';
     let loginUsingMagicLink = true;
@@ -22,10 +23,11 @@
             h1="Authentication and registration">
 
     <div class="container">
+        {#if hasRoute('login')}
         <section class="panel">
             <h2><i data-feather="log-in"></i> Log in</h2>
 
-            <Form action={$locals.route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
+            <Form action={route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
                 <Field type="text" name="identifier" value={$locals.query?.identifier} icon="at-sign"
                        hint={loginUsingMagicLink ? 'You will receive a magic link in your mailbox. Click on the link from any device to authenticate here.' : ''}
                        placeholder="Your email address or username" required/>
@@ -39,11 +41,13 @@
                 <Field type="checkbox" name="persist_session" icon="clock" placeholder="Stay logged in on this computer."/>
             </Form>
         </section>
+        {/if}
 
+        {#if hasRoute('register')}
         <section class="panel">
             <h2><i data-feather="user-plus"></i> Register</h2>
 
-            <Form action={$locals.route('register') + queryStr} submitText="Register" submitIcon="check">
+            <Form action={route('register') + queryStr} submitText="Register" submitIcon="check">
                 <Field type="hidden" name="auth_method" value={registerUsingMagicLink ? 'magic_link': 'password'}/>
 
                 {#if $locals.has_username}
@@ -68,5 +72,6 @@
                 </Field>
             </Form>
         </section>
+        {/if}
     </div>
 </BaseLayout>

src/assets/views/backend/accounts_approval.svelte

@@ -5,7 +5,7 @@
     import Form from "../utils/Form.svelte";
     import Field from "../utils/Field.svelte";
     import Breadcrumb from "../components/Breadcrumb.svelte";
-    import {route} from "../../../common/Routing";
+    import {hasRoute, route} from "../../../common/Routing";
 
     const accounts = $locals.accounts || [];
 </script>
@@ -49,16 +49,20 @@
                     <td><time datetime={user.created_at_iso}>{user.created_at_human} ago</time></td>
                     <td>
                         <div class="max-content">
-                            <Form action={$locals.route('approve-account')}
+                            {#if hasRoute('approve-account')}
+                            <Form action={route('approve-account')}
                                   submitIcon="check" submitText="Approve" submitClass="success">
                                 <Field type="hidden" name="user_id" value={user.id}/>
                             </Form>
+                            {/if}
 
-                            <Form action={$locals.route('reject-account')}
+                            {#if hasRoute('reject-account')}
+                            <Form action={route('reject-account')}
                                   submitIcon="trash" submitText="Reject" submitClass="danger"
                                   confirm="This will irrevocably delete the {user.mainEmailStr || user.name || user.id} account.">
                                 <Field type="hidden" name="user_id" value={user.id}/>
                             </Form>
+                            {/if}
                         </div>
                     </td>
                 </tr>

src/assets/views/home.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import {locals} from "../ts/stores";
-    import {route} from "../../common/Routing";
+    import {route, hasRoute, hasAnyRoute} from "../../common/Routing";
     import BaseLayout from "./layouts/BaseLayout.svelte";
 </script>
 
@@ -9,11 +9,17 @@
         <h1>swaf - Svelte Web Application Framework</h1>
         <p>Welcome to {$locals.app.name}!</p>
 
+        {#if hasAnyRoute('tests', 'design')}
         <nav>
             <ul>
+                {#if hasRoute('tests')}
                 <li><a href={route('tests')}>Frontend tests</a></li>
+                {/if}
+                {#if hasRoute('design')}
                 <li><a href={route('design')}>Design test</a></li>
+                {/if}
             </ul>
         </nav>
+        {/if}
     </div>
 </BaseLayout>

src/assets/views/layouts/BaseLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import {locals} from "../../ts/stores.js";
-    import {route} from "../../../common/Routing.js";
+    import {hasRoute, route} from "../../../common/Routing.js";
     import FlashMessages from "../components/FlashMessages.svelte";
     import NavMenuItem from "../components/NavMenuItem.svelte";
     import NavMenu from "../components/NavMenu.svelte";
@@ -94,15 +94,17 @@
 <header>
     <a href="/" class="logo"><img src="/img/logo.svg" alt="{$locals.app.name} logo"> {$locals.app.name}</a>
     <NavMenu>
-        {#if $locals.user}
+        {#if hasRoute('auth')}
-            {#if $locals.user.is_admin}
+            {#if $locals.user}
-                <NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
+                {#if $locals.user.is_admin}
-            {/if}
+                    <NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
+                {/if}
 
-            <NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
+                <NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
-            <NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
+                <NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
-        {:else}
+            {:else}
-            <NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
+                <NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
+            {/if}
         {/if}
     </NavMenu>
 </header>

src/common/Routing.ts

@@ -66,3 +66,19 @@ export function route(
 export function getRouteParamRegExp(key: string, flags?: string): RegExp {
     return new RegExp(`:${key}(\\(.+?\\))?\\??`, flags);
 }
+
+export function hasRoute(...routesToMatch: string[]): boolean {
+    for (const route of routesToMatch) {
+        if (!routes[route]) return false;
+    }
+
+    return true;
+}
+
+export function hasAnyRoute(...routesToMatch: string[]): boolean {
+    for (const route of routesToMatch) {
+        if (routes[route]) return true;
+    }
+
+    return false;
+}