Skip to content

Commit 2a76074

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #1771 from appwrite/svelte5-migration
Refactor: `$page` usage to `page`
2 parents 3dd67d6 + f21a62d commit 2a76074

File tree

312 files changed

+998
-1008
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

312 files changed

+998
-1008
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"build": "node build.js",
1010
"preview": "vite preview",
1111
"prepare": "svelte-kit sync || echo ''",
12+
"clean": "rm -rf node_modules && rm -rf .svelte_kit && pnpm i --force",
1213
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
1314
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
1415
"format": "prettier --write .",

‎src/lib/actions/analytics.ts

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Analytics, { type AnalyticsPlugin } from 'analytics';
22
import Plausible from 'plausible-tracker';
33
import { get } from 'svelte/store';
4-
import { page } from '$app/stores';
4+
import { page } from '$app/state';
55
import { user } from '$lib/stores/user';
66
import { ENV, MODE, VARS, isCloud } from '$lib/system';
77
import { AppwriteException } from '@appwrite.io/console';
@@ -55,13 +55,12 @@ export function trackEvent(name: string, data: object = null): void {
5555
return;
5656
}
5757

58-
const currentPage = get(page);
59-
const path = currentPage.route.id;
58+
const path = page.route.id;
6059

61-
if (currentPage.params?.project) {
60+
if (page.params?.project) {
6261
data = {
6362
...data,
64-
project: currentPage.params.project
63+
project: page.params.project
6564
};
6665
}
6766

‎src/lib/commandCenter/panels/ai.svelte

+2-3
Original file line numberDiff line numberDiff line change
@@ -164,16 +164,15 @@
164164

165165
{#if !$preferences.hideAiDisclaimer}
166166
<div style="padding: 1rem; padding-block-end: 0;">
167-
<Alert
168-
type="default"
167+
<Alert.Inline
169168
dismissible
170169
on:dismiss={() => {
171170
$preferences.hideAiDisclaimer = true;
172171
}}>
173172
<span slot="title">
174173
We collect user responses to refine our experimental AI feature.
175174
</span>
176-
</Alert>
175+
</Alert.Inline>
177176
</div>
178177
{/if}
179178

‎src/lib/components/backupDatabaseAlert.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { page } from '$app/stores';
2+
import { page } from '$app/state';
33
import { BillingPlan } from '$lib/constants';
44
import { Button } from '$lib/elements/forms';
55
import { organization } from '$lib/stores/organization';
@@ -17,15 +17,15 @@
1717
}
1818
</script>
1919

20-
{#if $showPolicyAlert && isCloud && $organization?.$id && $page.url.pathname.match(/\/databases\/database-[^/]+$/)}
20+
{#if $showPolicyAlert && isCloud && $organization?.$id && page.url.pathname.match(/\/databases\/database-[^/]+$/)}
2121
{@const isFreePlan = $organization?.billingPlan === BillingPlan.FREE}
2222

2323
{@const subtitle = isFreePlan
2424
? 'Upgrade your plan to ensure your data stays safe and backed up'
2525
: 'Protect your data by quickly adding a backup policy'}
2626

2727
{@const ctaText = isFreePlan ? 'Upgrade plan' : 'Create policy'}
28-
{@const ctaURL = isFreePlan ? $upgradeURL : `${$page.url.pathname}/backups`}
28+
{@const ctaURL = isFreePlan ? $upgradeURL : `${page.url.pathname}/backups`}
2929

3030
<HeaderAlert type="warning" title="Your database has no backup policy">
3131
<svelte:fragment>{subtitle}</svelte:fragment>

‎src/lib/components/backupRestoreBox.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import { BillingPlan, Dependencies } from '$lib/constants';
88
import type { BackupArchive, BackupRestoration } from '$lib/sdk/backups';
99
import { goto, invalidate } from '$app/navigation';
10-
import { page } from '$app/stores';
10+
import { page } from '$app/state';
1111
import { addNotification } from '$lib/stores/notifications';
1212
import { base } from '$app/paths';
1313
import { getProjectId } from '$lib/helpers/project';
@@ -34,7 +34,7 @@
3434
3535
function showRestoreNotification(newDatabaseId: string, newDatabaseName: string) {
3636
if (newDatabaseId && newDatabaseName && lastDatabaseRestorationId !== newDatabaseId) {
37-
const project = $page.params.project;
37+
const project = page.params.project;
3838
lastDatabaseRestorationId = newDatabaseId;
3939
4040
addNotification({

‎src/lib/components/billing/alerts/limitReached.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { base } from '$app/paths';
3-
import { page } from '$app/stores';
3+
import { page } from '$app/state';
44
import { Click, trackEvent } from '$lib/actions/analytics';
55
import { BillingPlan } from '$lib/constants';
66
import { Button } from '$lib/elements/forms';
@@ -9,7 +9,7 @@
99
import { organization } from '$lib/stores/organization';
1010
</script>
1111

12-
{#if $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes($page.url.pathname)}
12+
{#if $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes(page.url.pathname)}
1313
<HeaderAlert
1414
type="error"
1515
title={`${$organization.name} usage has reached the ${tierToPlan($organization.billingPlan).name} plan limit`}>

‎src/lib/components/billing/alerts/markedForDeletion.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script lang="ts">
2-
import { page } from '$app/stores';
2+
import { page } from '$app/state';
33
import { HeaderAlert } from '$lib/layout';
44
import { hideBillingHeaderRoutes } from '$lib/stores/billing';
55
import { organization } from '$lib/stores/organization';
66
</script>
77

8-
{#if $organization?.markedForDeletion && !hideBillingHeaderRoutes.includes($page.url.pathname)}
8+
{#if $organization?.markedForDeletion && !hideBillingHeaderRoutes.includes(page.url.pathname)}
99
<HeaderAlert title="Organization flagged for deletion">
1010
<svelte:fragment>
1111
All existing projects in the {$organization.name} organization have been paused. This organization

‎src/lib/components/billing/alerts/missingPaymentMethod.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script lang="ts">
22
import { base } from '$app/paths';
3-
import { page } from '$app/stores';
3+
import { page } from '$app/state';
44
import { BillingPlan } from '$lib/constants';
55
import { Button } from '$lib/elements/forms';
66
import { HeaderAlert } from '$lib/layout';
77
import { hideBillingHeaderRoutes } from '$lib/stores/billing';
88
import { orgMissingPaymentMethod } from '$routes/(console)/store';
99
</script>
1010

11-
{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !hideBillingHeaderRoutes.includes($page.url.pathname)}
11+
{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !hideBillingHeaderRoutes.includes(page.url.pathname)}
1212
<HeaderAlert
1313
type="error"
1414
title={`Payment method required for ${$orgMissingPaymentMethod.name}`}>

‎src/lib/components/billing/alerts/newDevUpgradePro.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { base } from '$app/paths';
3-
import { page } from '$app/stores';
3+
import { page } from '$app/state';
44
import { Click, trackEvent } from '$lib/actions/analytics';
55
import { BillingPlan } from '$lib/constants';
66
import { Button } from '$lib/elements/forms';
@@ -21,7 +21,7 @@
2121
}
2222
</script>
2323

24-
{#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !$page.url.pathname.includes('/console/account')}
24+
{#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !page.url.pathname.includes('/console/account')}
2525
<GradientBanner on:close={handleClose}>
2626
<div class="u-flex u-gap-24 u-main-center u-cross-center u-flex-vertical-mobile">
2727
<span class="body-text-1">Get $50 Cloud credits for Appwrite Pro.</span>

‎src/lib/components/billing/alerts/paymentAuthRequired.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { base } from '$app/paths';
3-
import { page } from '$app/stores';
3+
import { page } from '$app/state';
44
import { Button } from '$lib/elements/forms';
55
import { HeaderAlert } from '$lib/layout';
66
import { actionRequiredInvoices, hideBillingHeaderRoutes } from '$lib/stores/billing';
@@ -9,7 +9,7 @@
99
const endpoint = getApiEndpoint();
1010
</script>
1111

12-
{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !hideBillingHeaderRoutes.includes($page.url.pathname)}
12+
{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !hideBillingHeaderRoutes.includes(page.url.pathname)}
1313
<HeaderAlert title="Authorization required" type="error">
1414
Please authorize your upcoming payment for {$organization.name}. Your bank requires this
1515
security measure to proceed with payment.

‎src/lib/components/billing/alerts/paymentMandate.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { page } from '$app/stores';
2+
import { page } from '$app/state';
33
import { Button } from '$lib/elements/forms';
44
import { HeaderAlert } from '$lib/layout';
55
import { hideBillingHeaderRoutes, paymentMissingMandate } from '$lib/stores/billing';
@@ -16,7 +16,7 @@
1616
}
1717
</script>
1818

19-
{#if $paymentMissingMandate && $paymentMissingMandate?.country?.toLowerCase() === 'in' && $paymentMissingMandate.mandateId === null && !hideBillingHeaderRoutes.includes($page.url.pathname)}
19+
{#if $paymentMissingMandate && $paymentMissingMandate?.country?.toLowerCase() === 'in' && $paymentMissingMandate.mandateId === null && !hideBillingHeaderRoutes.includes(page.url.pathname)}
2020
<HeaderAlert title="Authorization required" type="info">
2121
The payment method for {$organization.name} needs to be verified.
2222
<svelte:fragment slot="buttons">

‎src/lib/components/billing/alerts/projectsAtRisk.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script lang="ts">
22
import { base } from '$app/paths';
3-
import { page } from '$app/stores';
3+
import { page } from '$app/state';
44
import { Button } from '$lib/elements/forms';
55
import { diffDays, toLocaleDate } from '$lib/helpers/date';
66
import { HeaderAlert } from '$lib/layout';
77
import { failedInvoice, hideBillingHeaderRoutes } from '$lib/stores/billing';
88
</script>
99

10-
{#if $failedInvoice && !hideBillingHeaderRoutes.includes($page.url.pathname)}
10+
{#if $failedInvoice && !hideBillingHeaderRoutes.includes(page.url.pathname)}
1111
{@const daysPassed = diffDays(new Date($failedInvoice.dueAt), new Date())}
1212
<HeaderAlert title="Your projects are at risk">
1313
<svelte:fragment>

‎src/lib/components/billing/paymentModal.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { invalidate } from '$app/navigation';
77
import { Dependencies } from '$lib/constants';
88
import { addNotification } from '$lib/stores/notifications';
9-
import { page } from '$app/stores';
9+
import { page } from '$app/state';
1010
import { Spinner } from '@appwrite.io/pink-svelte';
1111
1212
export let show = false;
@@ -18,7 +18,7 @@
1818
1919
async function handleSubmit() {
2020
try {
21-
const card = await submitStripeCard(name, $page?.params?.organization ?? null);
21+
const card = await submitStripeCard(name, page?.params?.organization ?? null);
2222
invalidate(Dependencies.PAYMENT_METHODS);
2323
dispatch('submit', card);
2424
show = false;

‎src/lib/components/bottomModalAlert.svelte

+14-4
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
import { upgradeURL } from '$lib/stores/billing';
1515
import { addBottomModalAlerts } from '$routes/(console)/bottomAlerts';
1616
import { project } from '$routes/(console)/project-[project]/store';
17-
import { page } from '$app/stores';
17+
import { page } from '$app/state';
1818
import { Click, trackEvent } from '$lib/actions/analytics';
1919
2020
let currentIndex = 0;
@@ -46,7 +46,7 @@
4646
});
4747
}
4848
49-
$: filteredModalAlerts = filterModalAlerts($bottomModalAlerts, $page.route.id);
49+
$: filteredModalAlerts = filterModalAlerts($bottomModalAlerts, page.route.id);
5050
5151
$: currentModalAlert = filteredModalAlerts[currentIndex] as BottomModalAlertItem;
5252
@@ -93,7 +93,10 @@
9393
<div class="alert-container">
9494
<article class="card">
9595
{#key currentModalAlert.id}
96-
<button class="icon-inline-tag" on:click={() => handleClose()}>
96+
<button
97+
aria-label="Close modal"
98+
class="icon-inline-tag"
99+
on:click={() => handleClose()}>
97100
<svg
98101
xmlns="http://www.w3.org/2000/svg"
99102
width="20"
@@ -129,12 +132,14 @@
129132

130133
<div class="u-flex u-gap-10">
131134
<button
135+
aria-label="Previous"
132136
class="icon-cheveron-left"
133137
on:click={showPrevious}
134138
disabled={currentIndex === 0}
135139
class:active={currentIndex > 0}></button>
136140

137141
<button
142+
aria-label="Next"
138143
class="icon-cheveron-right"
139144
on:click={showNext}
140145
disabled={currentIndex === filteredModalAlerts.length - 1}
@@ -203,7 +208,10 @@
203208
<div class="alert-container">
204209
<article class="card">
205210
{#key currentModalAlert.id}
206-
<button class="icon-inline-tag" on:click={() => handleClose()}>
211+
<button
212+
aria-label="Close modal"
213+
class="icon-inline-tag"
214+
on:click={() => handleClose()}>
207215
<svg
208216
xmlns="http://www.w3.org/2000/svg"
209217
width="20"
@@ -239,12 +247,14 @@
239247

240248
<div class="u-flex u-gap-10">
241249
<button
250+
aria-label="Previous"
242251
class="icon-cheveron-left"
243252
on:click={showPrevious}
244253
disabled={currentIndex === 0}
245254
class:active={currentIndex > 0}></button>
246255

247256
<button
257+
aria-label="Next"
248258
class="icon-cheveron-right"
249259
on:click={showNext}
250260
disabled={currentIndex ===

‎src/lib/components/cardContainer.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { page } from '$app/stores';
2+
import { page } from '$app/state';
33
import { Empty } from '$lib/components';
44
import { CARD_LIMIT } from '$lib/constants';
55
import { getServiceLimit, type PlanServices } from '$lib/stores/billing';
@@ -16,7 +16,7 @@
1616
1717
$: planLimit = getServiceLimit(serviceId) || Infinity;
1818
19-
$: limit = preferences.get($page.route)?.limit ?? CARD_LIMIT;
19+
$: limit = preferences.get(page.route)?.limit ?? CARD_LIMIT;
2020
</script>
2121

2222
<ul class="grid-box" style={`--grid-item-size:${total > 3 ? '22rem' : '25rem'};`} data-private>

‎src/lib/components/feedback/feedback.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import { user } from '$lib/stores/user';
1010
import { organization } from '$lib/stores/organization';
1111
import { addNotification } from '$lib/stores/notifications';
12-
import { page } from '$app/stores';
12+
import { page } from '$app/state';
1313
import { Typography } from '@appwrite.io/pink-svelte';
1414
1515
$: $selectedFeedback = feedbackOptions.find((option) => option.type === $feedback.type);
@@ -21,7 +21,7 @@
2121
await feedback.submitFeedback(
2222
`feedback-${$feedback.type}`,
2323
$feedbackData.message,
24-
$page.url.href,
24+
page.url.href,
2525
$user.name,
2626
$user.email,
2727
$organization.billingPlan,

‎src/lib/components/filePicker.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import { writable } from 'svelte/store';
1010
import { onMount } from 'svelte';
1111
import { base } from '$app/paths';
12-
import { page } from '$app/stores';
12+
import { page } from '$app/state';
1313
import DualTimeView from './dualTimeView.svelte';
1414
import {
1515
Layout,
@@ -355,7 +355,7 @@
355355
slot="actions"
356356
secondary
357357
external
358-
href={`${base}/project-${$page.params.project}/storage`}>
358+
href={`${base}/project-${page.params.project}/storage`}>
359359
Create bucket
360360
</Button>
361361
</Empty>

‎src/lib/components/limit.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { goto } from '$app/navigation';
3-
import { page as pageStore } from '$app/stores';
3+
import { page as pageStore } from '$app/state';
44
import { InputSelect } from '$lib/elements/forms';
55
import { preferences } from '$lib/stores/preferences';
66
import { Layout } from '@appwrite.io/pink-svelte';
@@ -18,7 +18,7 @@
1818
];
1919
2020
async function limitChange() {
21-
const url = new URL($pageStore.url);
21+
const url = new URL(pageStore.url);
2222
const previousLimit = Number(url.searchParams.get('limit'));
2323
url.searchParams.set('limit', limit.toString());
2424
preferences.setLimit(limit);

‎src/lib/components/logs/loggingAlert.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { base } from '$app/paths';
3-
import { page } from '$app/stores';
3+
import { page } from '$app/state';
44
import { Link } from '$lib/elements';
55
import { Alert } from '@appwrite.io/pink-svelte';
66
@@ -11,15 +11,15 @@
1111
<Alert.Inline status="info" title="Your logs are disabled">
1212
To view logs and errors, enable them in your
1313
<Link
14-
href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/settings`}>
14+
href={`${base}/project-${page.params.project}/sites/site-${page.params.site}/settings`}>
1515
site settings</Link
1616
>.
1717
</Alert.Inline>
1818
{:else if product === 'function'}
1919
<Alert.Inline status="info" title="Your execution logs are disabled">
2020
To view execution logs and errors, enable them in your
2121
<Link
22-
href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/settings`}>
22+
href={`${base}/project-${page.params.project}/functions/function-${page.params.function}/settings`}>
2323
function settings</Link
2424
>.
2525
</Alert.Inline>

0 commit comments

Comments
 (0)