Merge pull request #52 from appwrite/feat-new-svelte-routing

feat: new svelte routing

package.json

@@ -26,33 +26,33 @@
         "web-vitals": "^2.1.4"
     },
     "devDependencies": {
-        "@playwright/test": "^1.25.0",
-        "@sveltejs/adapter-auto": "1.0.0-next.64",
-        "@sveltejs/kit": "1.0.0-next.405",
-        "@sveltejs/vite-plugin-svelte": "^1.0.1",
+        "@playwright/test": "^1.25.2",
+        "@sveltejs/adapter-auto": "1.0.0-next.74",
+        "@sveltejs/kit": "1.0.0-next.483",
+        "@sveltejs/vite-plugin-svelte": "^1.0.5",
         "@testing-library/dom": "^8.17.1",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/svelte": "^3.1.3",
-        "@testing-library/user-event": "^14.3.0",
-        "@types/gtag.js": "^0.0.10",
-        "@typescript-eslint/eslint-plugin": "^5.33.1",
-        "@typescript-eslint/parser": "^5.33.1",
-        "@vitest/ui": "^0.22.0",
-        "eslint": "^8.22.0",
+        "@testing-library/svelte": "3.1.3",
+        "@testing-library/user-event": "^14.4.3",
+        "@types/gtag.js": "^0.0.11",
+        "@typescript-eslint/eslint-plugin": "^5.37.0",
+        "@typescript-eslint/parser": "^5.37.0",
+        "@vitest/ui": "^0.23.2",
+        "eslint": "^8.23.1",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte3": "^4.0.0",
         "pre-commit": "^1.2.2",
         "prettier": "^2.7.1",
         "prettier-plugin-svelte": "^2.7.0",
-        "sass": "^1.54.4",
-        "svelte": "^3.49.0",
-        "svelte-check": "^2.8.0",
+        "sass": "^1.54.9",
+        "svelte": "^3.50.1",
+        "svelte-check": "^2.9.0",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^4.10.7",
         "tslib": "^2.4.0",
         "typescript": "^4.7.4",
-        "vite": "^3.0.8",
-        "vitest": "^0.22.0"
+        "vite": "^3.1.1",
+        "vitest": "^0.23.2"
     },
     "type": "module",
     "pre-commit": [

src/lib/components/modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { browser } from '$app/env';
+    import { browser } from '$app/environment';
     import { createEventDispatcher } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
     import { Alert } from '$lib/components';

src/lib/elements/forms/inputSwitch.svelte

@@ -35,6 +35,7 @@
                 type="checkbox"
                 class="switch"
                 role="switch"
+                aria-checked={value}
                 bind:this={element}
                 bind:checked={value}
                 on:change

src/lib/helpers/cache.ts

@@ -1,4 +1,4 @@
-import { browser } from '$app/env';
+import { browser } from '$app/environment';
 import { writable, type Writable } from 'svelte/store';
 
 export function cachedStore<TModel, TMethods = Record<string, unknown>>(

src/lib/helpers/vitals.ts

@@ -45,6 +45,7 @@ function sendToAnalytics(metric: Metric, options: Options) {
         // This content type is necessary for `sendBeacon`
         type: 'application/x-www-form-urlencoded'
     });
+
     if (navigator.sendBeacon) {
         navigator.sendBeacon(vitalsUrl, blob);
     } else

src/lib/layout/shell.svelte

@@ -15,7 +15,7 @@
     import { base } from '$app/paths';
     import { user } from '$lib/stores/user';
     import { goto } from '$app/navigation';
-    import { browser } from '$app/env';
+    import { browser } from '$app/environment';
 
     export let isOpen = false;
     export let showSideNavigation = false;

src/lib/stores/app.ts

@@ -1,4 +1,4 @@
-import { browser } from '$app/env';
+import { browser } from '$app/environment';
 import { writable } from 'svelte/store';
 
 export type AppStore = {

src/lib/stores/layout.ts

@@ -1,6 +1,7 @@
 import { project } from '../../routes/console/project-[project]/store';
 import { get, writable, readable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
+import type { Navigation } from '@sveltejs/kit';
 
 export type Tab = {
     href: string;
@@ -25,10 +26,7 @@ export type updateLayoutArguments = {
         value: string;
     };
     customBase?: string;
-    navigate?: {
-        from: URL | null;
-        to: URL;
-    };
+    navigate?: Navigation;
 };
 
 export const level = writable<number>();
@@ -54,7 +52,7 @@ export function updateLayout(args: updateLayoutArguments) {
 
     if (args?.navigate?.to) {
         const previousTabs = get(tabs);
-        if (previousTabs.some((t) => `${base}/${t.href}` === args.navigate.to.pathname)) {
+        if (previousTabs.some((t) => `${base}/${t.href}` === args.navigate.to.url.pathname)) {
             return;
         }
     }

src/routes/+layout.js

@@ -0,0 +1,2 @@
+import '@aw-labs/ui/src/_index.scss';
+import 'tippy.js/dist/tippy.css';

src/routes/+layout.svelte

@@ -1,8 +1,3 @@
-<script context="module">
-    import '@aw-labs/ui/src/_index.scss';
-    import 'tippy.js/dist/tippy.css';
-</script>
-
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
@@ -10,7 +5,7 @@
     import { redirectTo } from '$lib/stores/organization';
     import { onMount } from 'svelte';
     import { base } from '$app/paths';
-    import { browser } from '$app/env';
+    import { browser, dev } from '$app/environment';
     import { app } from '$lib/stores/app';
     import Notifications from '$lib/layout/notifications.svelte';
     import Loading from './_loading.svelte';
@@ -43,7 +38,7 @@
         }
     });
 
-    $: if (browser && window.VERCEL_ANALYTICS_ID) {
+    $: if (!dev && browser && window.VERCEL_ANALYTICS_ID) {
         webVitals({
             path: $page.url.pathname,
             params: $page.params,

src/routes/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import { base } from '$app/paths';
+
+export const load = async () => {
+    throw redirect(302, `${base}/login`);
+};

src/routes/console/account/activity/+page.svelte

@@ -15,7 +15,7 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import { pageLimit } from '$lib/stores/layout';
     import { onMount } from 'svelte';
-    import { accountActivity } from './store';
+    import { accountActivity } from '../store';
 
     let offset = 0;
 

src/routes/console/account/organizations/+page.svelte

@@ -3,7 +3,7 @@
     import { GridItem1, EmptyGridItem, Empty, Pagination, AvatarGroup } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import CreateOrganization from '../_createOrganization.svelte';
+    import CreateOrganization from '../../_createOrganization.svelte';
     import { organizationList } from '$lib/stores/organization';
     import { onMount } from 'svelte';
     import { sdkForConsole } from '$lib/stores/sdk';

src/routes/console/account/sessions/+page.svelte

@@ -15,7 +15,7 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import { pageLimit } from '$lib/stores/layout';
     import type { Models } from '@aw-labs/appwrite-console';
-    import { accountSession } from './store';
+    import { accountSession } from '../store';
     import { onMount } from 'svelte';
 
     let offset = 0;

src/routes/console/organization-[organization]/members/+page.svelte

@@ -12,7 +12,7 @@
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import Delete from './_deleteMember.svelte';
+    import Delete from '../_deleteMember.svelte';
     import { organization, memberList, newMemberModal } from '$lib/stores/organization';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';

src/routes/console/organization-[organization]/settings/+page.svelte

@@ -6,7 +6,7 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import { organization, memberList } from '$lib/stores/organization';
     import { title, breadcrumbs } from '$lib/stores/layout';
-    import Delete from './_deleteOrganization.svelte';
+    import Delete from '../_deleteOrganization.svelte';
 
     let name: string = $organization.name;
     let showDelete = false;

src/routes/console/project-[project]/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { browser } from '$app/env';
+    import { browser } from '$app/environment';
     import { page } from '$app/stores';
     import { sdkForConsole, sdkForProject, setProject } from '$lib/stores/sdk';
     import { collection } from './databases/database/[database]/collection/[collection]/store';

src/routes/console/project-[project]/authentication/security/+page.svelte

@@ -3,7 +3,7 @@
     import { Pill } from '$lib/elements/';
     import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { project } from '../store';
+    import { project } from '../../store';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
 

src/routes/console/project-[project]/authentication/settings/+page.svelte

@@ -5,7 +5,7 @@
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { project } from '../store';
+    import { project } from '../../store';
     import { authMethods, type AuthMethod } from '$lib/stores/auth-methods';
     import { OAuthProviders } from '$lib/stores/oauth-providers';
     import { event } from '$lib/actions/analytics';

src/routes/console/project-[project]/authentication/teams/+page.svelte

@@ -12,13 +12,13 @@
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import { Empty, Pagination, Avatar, Search } from '$lib/components';
-    import Create from './_createTeam.svelte';
+    import Create from '../_createTeam.svelte';
     import { goto } from '$app/navigation';
     import { event } from '$lib/actions/analytics';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { teamsList } from './store';
+    import { teamsList } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
 
     let search = '';

src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte

@@ -16,9 +16,9 @@
     import { base } from '$app/paths';
     import { sdkForProject } from '$lib/stores/sdk';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { memberships } from './store';
-    import CreateMember from './_createMembership.svelte';
-    import DeleteMembership from './_deleteMembership.svelte';
+    import { memberships } from '../store';
+    import CreateMember from '../_createMembership.svelte';
+    import DeleteMembership from '../_deleteMembership.svelte';
     import { pageLimit } from '$lib/stores/layout';
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();

src/routes/console/project-[project]/authentication/usage/+page.svelte

@@ -2,7 +2,7 @@
     import { Container } from '$lib/layout';
     import { Chart } from '$lib/charts';
     import { Card } from '$lib/components';
-    import { usersUsage } from './store';
+    import { usersUsage } from '../store';
 
     let currentRange = '30d';
 

src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte

@@ -14,8 +14,8 @@
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { sdkForProject } from '$lib/stores/sdk';
-    import DeleteMembership from './_deleteMembership.svelte';
-    import DeleteAllMemberships from './_deleteAllMemberships.svelte';
+    import DeleteMembership from '../_deleteMembership.svelte';
+    import DeleteAllMemberships from '../_deleteAllMemberships.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();

src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte

@@ -14,8 +14,8 @@
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { sdkForProject } from '$lib/stores/sdk';
-    import DeleteAllSessions from './_deleteAllSessions.svelte';
-    import DeleteSessions from './_deleteSession.svelte';
+    import DeleteAllSessions from '../_deleteAllSessions.svelte';
+    import DeleteSessions from '../_deleteSession.svelte';
     import { pageLimit } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import type { Models } from '@aw-labs/appwrite-console';

src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte

@@ -10,14 +10,14 @@
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import { DropList, DropListItem, Empty, Pagination } from '$lib/components';
-    import { collection } from './store';
-    import type { Attributes } from './store';
+    import { collection } from '../store';
+    import type { Attributes } from '../store';
     import { Container } from '$lib/layout';
     import { Pill } from '$lib/elements';
-    import Create from './_createAttribute.svelte';
-    import CreateIndex from './_createIndex.svelte';
-    import Delete from './_deleteAttribute.svelte';
-    import Overview from './_overview.svelte';
+    import Create from '../_createAttribute.svelte';
+    import CreateIndex from '../_createIndex.svelte';
+    import Delete from '../_deleteAttribute.svelte';
+    import Overview from '../_overview.svelte';
 
     let offset = 0;
     const limit = 5;

src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte

@@ -13,11 +13,11 @@
         TableRow
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
-    import { indexList, collection } from './store';
+    import { indexList, collection } from '../store';
     import { onMount } from 'svelte';
-    import Delete from './_deleteIndex.svelte';
-    import Create from './_createIndex.svelte';
-    import Overview from './_overviewIndex.svelte';
+    import Delete from '../_deleteIndex.svelte';
+    import Create from '../_createIndex.svelte';
+    import Overview from '../_overviewIndex.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
 
     let showDropdown = [];

src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte

@@ -2,11 +2,11 @@
     import { Alert, CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, InputTags, InputSwitch, Helper } from '$lib/elements/forms';
-    import { collection } from './store';
+    import { collection } from '../store';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import Delete from './_delete.svelte';
+    import Delete from '../_delete.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { difference } from '$lib/helpers/array';

src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte

@@ -5,8 +5,8 @@
     import { Button, InputText, Helper } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import { database } from './store';
-    import Delete from './_delete.svelte';
+    import { database } from '../store';
+    import Delete from '../_delete.svelte';
     import { onMount } from 'svelte';
 
     const databaseId = $page.params.database;

src/routes/console/project-[project]/databases/database/[database]/store.ts

@@ -1,6 +1,6 @@
 import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
-import { browser } from '$app/env';
+import { browser } from '$app/environment';
 import { cachedStore } from '$lib/helpers/cache';
 
 export const collections = cachedStore<

src/routes/console/project-[project]/settings/domains/+page.svelte

@@ -12,7 +12,7 @@
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import CreateDomain from './_createDomain.svelte';
+    import CreateDomain from '../_createDomain.svelte';
 
     const projectId = $page.params.project;
     const listDomains = () => sdkForConsole.projects.listDomains(projectId);

src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte

@@ -10,12 +10,12 @@
         InputSelect,
         InputSwitch
     } from '$lib/elements/forms';
-    import { bucket } from './store';
+    import { bucket } from '../store';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sizeToBytes, bytesToSize } from '$lib/helpers/sizeConvertion';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import Delete from './_deleteBucket.svelte';
+    import Delete from '../_deleteBucket.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import Pill from '$lib/elements/pill.svelte';
@@ -336,6 +336,7 @@
                                         type="checkbox"
                                         class="switch"
                                         role="switch"
+                                        aria-checked={encryption}
                                         bind:checked={encryption} />
                                 </div>
                                 <div class="choice-item-content">
@@ -358,6 +359,7 @@
                                         type="checkbox"
                                         class="switch"
                                         role="switch"
+                                        aria-checked={antivirus}
                                         bind:checked={antivirus} />
                                 </div>
                                 <div class="choice-item-content">

src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts

@@ -1,7 +1,7 @@
 import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
 import { writable } from 'svelte/store';
-import { browser } from '$app/env';
+import { browser } from '$app/environment';
 
 function createBucketStore() {
     const { subscribe, set } = writable<Models.Bucket>(

src/routes/index.svelte

@@ -1,8 +0,0 @@
-<script context="module">
-    import { base } from '$app/paths';
-
-    export const load = async () => ({
-        status: 302,
-        redirect: `${base}/login`
-    });
-</script>

svelte.config.js

@@ -13,9 +13,6 @@ const config = {
         adapter: adapter(),
         paths: {
             base: ''
-        },
-        prerender: {
-            default: false
         }
     }
 };

tests/unit/elements/inputTextarea.test.ts

@@ -9,7 +9,6 @@ test('shows textarea', () => {
 
     expect(getByText('input')).toBeInTheDocument();
     expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'text');
 });
 
 test('shows textarea - required', () => {
@@ -52,6 +51,27 @@ test('shows textarea - placeholder', () => {
     expect(getByPlaceholderText('find me')).toBeInTheDocument();
 });
 
+test('shows textarea - hide label', () => {
+    render(InputTextarea, {
+        id: 'input',
+        label: 'label',
+        showLabel: false
+    });
+
+    const label = document.querySelector('label');
+    expect(label).toHaveClass('u-hide');
+});
+
+test('shows textarea - maxlength', () => {
+    const { getByLabelText } = render(InputTextarea, {
+        id: 'input',
+        label: 'input',
+        maxlength: 2
+    });
+
+    expect(getByLabelText('input')).toHaveAttribute('maxlength', '2');
+});
+
 test('state', async () => {
     const { component, getByLabelText } = render(InputTextarea, {
         id: 'input',

tests/unit/layout/breadcrumbs.test.ts

@@ -1,9 +1,11 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/svelte';
-import { Breadcrumbs as BreadcrumbsComponent } from '../../../src/lib/layout';
 import { level, updateLayout } from '../../../src/lib/stores/layout';
 import { tick } from 'svelte';
 
+/** @tsignore */
+import BreadcrumbsComponent from '../../../src/lib/layout/breadcrumbs.svelte';
+
 test('shows relevant breadcrumbs', async () => {
     const { queryByText } = render(BreadcrumbsComponent);
 

tests/unit/setup.ts

@@ -0,0 +1,7 @@
+import { vi } from 'vitest';
+
+beforeAll(() => {
+    vi.mock('$app/environment', () => ({
+        browser: 'window' in globalThis
+    }));
+});

vite.config.js

@@ -20,9 +20,10 @@ const config = {
     },
     test: {
         include: ['tests/**/*.test.ts'],
-        globals: true,
         environment: 'jsdom',
-        threads: true
+        globals: true,
+        threads: true,
+        setupFiles: ['./tests/unit/setup.ts']
     }
 };