Merge branch 'develop'

package.json

@@ -1,6 +1,6 @@
 {
     "name": "swaf",
-    "version": "0.24.3",
+    "version": "0.24.4",
     "description": "Structure Web Application Framework.",
     "repository": "https://eternae.ink/ashpie/swaf",
     "author": "Alice Gaudon <alice@gaudon.pro>",
@@ -52,7 +52,6 @@
         "@typescript-eslint/eslint-plugin": "^5.3.0",
         "@typescript-eslint/parser": "^5.3.0",
         "chokidar": "^3.5.1",
-        "clear-module": "^4.1.1",
         "concurrently": "^6.0.0",
         "eslint": "^8.2.0",
         "eslint-plugin-import": "^2.22.1",
@@ -66,7 +65,6 @@
         "maildev": "^1.1.0",
         "node-fetch": "^3.0.0",
         "nodemon": "^2.0.6",
-        "normalize.css": "^8.0.1",
         "require-from-string": "^2.0.2",
         "rollup": "^2.42.3",
         "rollup-plugin-css-only": "^3.1.0",
@@ -76,14 +74,13 @@
         "rollup-plugin-terser": "^7.0.2",
         "sass": "^1.32.12",
         "supertest": "^6.0.0",
-        "svelte": "^3.35.0",
         "svelte-check": "^2.2.8",
-        "svelte-preprocess": "4.6.9",
         "ts-jest": "^27.0.7",
         "typescript": "^4.0.2"
     },
     "dependencies": {
         "argon2": "^0.28.2",
+        "clear-module": "^4.1.1",
         "compression": "^1.7.4",
         "config": "^3.3.1",
         "connect-flash": "^0.1.1",
@@ -97,9 +94,12 @@
         "mysql": "^2.18.1",
         "nanoid": "^3.1.20",
         "nodemailer": "^6.4.6",
+        "normalize.css": "^8.0.1",
         "nunjucks": "^3.2.1",
         "on-finished": "^2.3.0",
         "redis": "^3.0.2",
+        "svelte": "^3.35.0",
+        "svelte-preprocess": "4.6.9",
         "ts-node": "^10.4.0",
         "tslog": "^3.0.1",
         "uuid": "^8.0.0",

scripts/dist.js

@@ -16,3 +16,7 @@ fs.mkdirSync('dist/types', {recursive: true});
 fs.readdirSync('src/types').forEach(file => {
     copyRecursively(path.join('src/types', file), 'dist/types');
 });
+
+fs.readdirSync('src/assets').forEach(file => {
+    copyRecursively(path.join('src/assets', file), 'dist/assets');
+});

scripts/prepare-sources.js

@@ -18,10 +18,5 @@ if (!fs.existsSync(symlink)) {
     fs.symlinkSync(path.resolve('dist/common'), symlink);
 }
 
-// Copy assets
-fs.readdirSync('src/assets').forEach(file => {
-    copyRecursively(path.join('src/assets', file), 'dist/assets');
-});
-
 // Copy package.json
 fs.copyFileSync('package.json', 'dist/package.json');

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,9 +1,7 @@
 <script lang="ts">
-    import {locals} from "../../ts/stores.js";
-    import {route} from "../../../common/Routing.js";
     import FlashMessages from "../components/FlashMessages.svelte";
-    import NavMenuItem from "../components/NavMenuItem.svelte";
+    import BaseFooter from "./base/BaseFooter.svelte";
-    import NavMenu from "../components/NavMenu.svelte";
+    import BaseHeader from "./base/BaseHeader.svelte";
 
     export let title: string;
     export let h1: string = title;
@@ -15,57 +13,11 @@
     @import "../../scss/vars";
     @import "../../scss/helpers";
 
-    header {
-		@if $headerContainer {
-			@include container;
-		}
-
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-        margin-bottom: 16px;
-		padding: 0;
-
-		height: $headerHeight;
-
-        @include medium-le {
-            z-index: 1;
-			position: sticky;
-			top: 0;
-			flex-direction: row-reverse;
-
-			@include surface(3);
-        }
-
-		.logo {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-
-			padding: 0 8px;
-			font-size: 24px;
-
-			img {
-				flex-shrink: 0;
-				width: initial;
-				height: calc(#{$headerHeight} - 16px);
-				margin-right: 8px;
-				padding: 8px;
-			}
-		}
-    }
-
     main {
         @include container;
         flex-grow: 1;
     }
 
-    footer {
-        padding: 8px;
-        text-align: center;
-    }
-
 	.flash-messages {
         @include container;
     }
@@ -91,21 +43,7 @@
     <link rel="stylesheet" href="/css/layout.css">
 </svelte:head>
 
-<header>
+<BaseHeader/>
-    <a href="/" class="logo"><img src="/img/logo.svg" alt="{$locals.app.name} logo"> {$locals.app.name}</a>
-    <NavMenu>
-        {#if $locals.user}
-            {#if $locals.user.is_admin}
-                <NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
-            {/if}
-
-            <NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
-            <NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
-        {:else}
-            <NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
-        {/if}
-    </NavMenu>
-</header>
 
 <div class="flash-messages">
     <FlashMessages/>
@@ -123,4 +61,4 @@
     <slot/>
 </main>
 
-<footer>{$locals.app.name} v{$locals.app_version} - all rights reserved.</footer>
+<BaseFooter/>

src/assets/views/layouts/base/BaseFooter.svelte

@@ -0,0 +1,12 @@
+<script>
+    import {locals} from "../../../ts/stores.js";
+</script>
+
+<style>
+    footer {
+        padding: 8px;
+        text-align: center;
+    }
+</style>
+
+<footer>{$locals.app.name} v{$locals.app_version} - all rights reserved.</footer>

src/assets/views/layouts/base/BaseHeader.svelte

@@ -0,0 +1,43 @@
+<script>
+    import BaseHeaderLogo from "./BaseHeaderLogo.svelte";
+    import NavMenu from "../../components/NavMenu.svelte";
+    import BaseNavMenuLinks from "./BaseNavMenuLinks.svelte";
+    import BaseNavMenuAuth from "./BaseNavMenuAuth.svelte";
+</script>
+
+<style lang="scss">
+	@import "../../../scss/vars";
+	@import "../../../scss/helpers";
+
+    header {
+        @if $headerContainer {
+            @include container;
+        }
+
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+        padding: 0;
+
+        height: $headerHeight;
+
+		@include medium-le {
+			z-index: 1;
+			position: sticky;
+			top: 0;
+			flex-direction: row-reverse;
+
+			@include surface(3);
+		}
+    }
+</style>
+
+<header>
+    <BaseHeaderLogo/>
+    <NavMenu>
+        <BaseNavMenuLinks/>
+        <BaseNavMenuAuth/>
+    </NavMenu>
+</header>

src/assets/views/layouts/base/BaseHeaderLogo.svelte

@@ -0,0 +1,26 @@
+<script>
+    import {locals} from "../../../ts/stores.js";
+</script>
+
+<style lang="scss">
+	@import "../../../scss/vars";
+
+    .logo {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        padding: 0 8px;
+        font-size: 24px;
+
+        img {
+            flex-shrink: 0;
+            width: initial;
+            height: calc(#{$headerHeight} - 16px);
+            margin-right: 8px;
+            padding: 8px;
+        }
+    }
+</style>
+
+<a href="/" class="logo"><img src="/img/logo.svg" alt="{$locals.app.name} logo"> {$locals.app.name}</a>

src/assets/views/layouts/base/BaseNavMenuAuth.svelte

@@ -0,0 +1,18 @@
+<script>
+    import {locals} from "../../../ts/stores.js";
+    import NavMenuItem from "../../components/NavMenuItem.svelte";
+    import {hasRoute, route} from "../../../../common/Routing";
+</script>
+
+{#if hasRoute('auth')}
+    {#if $locals.user}
+        {#if $locals.user.is_admin}
+            <NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
+        {/if}
+
+        <NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
+        <NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
+    {:else}
+        <NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
+    {/if}
+{/if}

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;
+}

src/frontend/SvelteViewEngine.ts

@@ -295,7 +295,7 @@ export default class SvelteViewEngine extends ViewEngine {
         });
 
         // Load locals into locals store
-        const localsModulePath = "../../intermediates/assets/ts/stores.js";
+        const localsModulePath = path.resolve(this.targetDir, "../ts/stores.js");
         const localsModule = await import(localsModulePath);
         const locals = this.getGlobals().get();
         const localMap = this.compileBackendCalls(backendCalls, locals, true);