Skip to content

Commit e542383

Browse files
ItzNotABugItzNotABug
authored
Merge pull request #2762 from appwrite/feat-profiles-lazy-load-components
2 parents 953ac86 + 4e39836 commit e542383

9 files changed

Lines changed: 326 additions & 316 deletions

File tree

‎src/lib/profiles/index.svelte.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import { OAuthProvider, Platform } from '@appwrite.io/console';
44
import { env } from '$env/dynamic/public';
55
import { BillingPlan } from '@appwrite.io/console';
66
import type { Component } from 'svelte';
7-
import UnauthenticatedConsole from './(unauthenticated)/console.svelte';
8-
import UnauthenticatedStudio from './(unauthenticated)/studio.svelte';
97
import StudioCss from './css/studio.css?url';
108
import ConsoleCss from './css/console.css?url';
119
import { isCloud } from '$lib/system';
@@ -61,7 +59,7 @@ export type Profile = {
6159
minimalOrgHeader: boolean;
6260
getProjectRoute: (params: { region: string; project: string }) => ResolvedPathname;
6361
component: {
64-
unauthenticated: Component;
62+
getUnauthenticated: () => Promise<Component>;
6563
};
6664
links: {
6765
docs: string;
@@ -98,9 +96,6 @@ export const base: Profile = {
9896
},
9997
alt: 'Logo Appwrite'
10098
},
101-
component: {
102-
unauthenticated: UnauthenticatedConsole
103-
},
10499
logins: [Logins.EMAIL, isCloud && Logins.GITHUB].filter(Boolean),
105100
oauthProviders: {
106101
github: {
@@ -136,6 +131,9 @@ export const base: Profile = {
136131
project
137132
});
138133
},
134+
component: {
135+
getUnauthenticated: async () => (await import('./(unauthenticated)/console.svelte')).default
136+
},
139137
links: {
140138
website: 'https://appwrite.io',
141139
docs: 'https://appwrite.io/docs',
@@ -205,9 +203,6 @@ export const studio: Profile = {
205203
}
206204
},
207205
css: StudioCss,
208-
component: {
209-
unauthenticated: UnauthenticatedStudio
210-
},
211206
showOnboarding: false,
212207
useCommandCenter: false,
213208
showGithubIssueSupport: false,
@@ -235,6 +230,9 @@ export const studio: Profile = {
235230
project
236231
});
237232
},
233+
component: {
234+
getUnauthenticated: async () => (await import('./(unauthenticated)/studio.svelte')).default
235+
},
238236
links: {
239237
website: 'https://imagine.dev',
240238
docs: 'https://imagine.dev',

‎src/lib/stores/sdk.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@ if (!building) {
114114
scopedConsoleClient.setProject('console');
115115
clientConsole.setEndpoint(endpoint).setProject('console');
116116

117-
// set platform type!
118117
clientConsole.setPlatform(resolvedProfile.platform);
119118
scopedConsoleClient.setPlatform(resolvedProfile.platform);
120119

‎src/routes/(authenticated)/mfa/+page.svelte‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
import { resolvedProfile } from '$lib/profiles/index.svelte';
1313
1414
export let data;
15-
const Unauthenticated = resolvedProfile.component.unauthenticated;
1615
const factors = data.factors as Models.MfaFactors & { recoveryCode: boolean };
1716
1817
let disabled = false;
@@ -53,24 +52,26 @@
5352
<title>Verify - {resolvedProfile.platform}</title>
5453
</svelte:head>
5554

56-
<Unauthenticated align="center">
57-
<svelte:fragment slot="top">
58-
<div class="top u-flex u-position-absolute u-main-center">
59-
<div class="flex u-width-full-line">
60-
<Button compact on:click={back}>
61-
<Icon icon={IconChevronLeft} slot="start" size="s" />
62-
Back
63-
</Button>
55+
{#await resolvedProfile.component.getUnauthenticated() then Unauthenticated}
56+
<Unauthenticated align="center">
57+
<svelte:fragment slot="top">
58+
<div class="top u-flex u-position-absolute u-main-center">
59+
<div class="flex u-width-full-line">
60+
<Button compact on:click={back}>
61+
<Icon icon={IconChevronLeft} slot="start" size="s" />
62+
Back
63+
</Button>
64+
</div>
6465
</div>
65-
</div>
66-
</svelte:fragment>
67-
<svelte:fragment slot="title">Verify your identity</svelte:fragment>
68-
<Form onSubmit={submit}>
69-
<Layout.Stack gap="l" justifyContent="center" alignContent="center" alignItems="center">
70-
<MfaChallengeFormList {factors} bind:challenge bind:code bind:disabled />
71-
</Layout.Stack>
72-
</Form>
73-
</Unauthenticated>
66+
</svelte:fragment>
67+
<svelte:fragment slot="title">Verify your identity</svelte:fragment>
68+
<Form onSubmit={submit}>
69+
<Layout.Stack gap="l" justifyContent="center" alignContent="center" alignItems="center">
70+
<MfaChallengeFormList {factors} bind:challenge bind:code bind:disabled />
71+
</Layout.Stack>
72+
</Form>
73+
</Unauthenticated>
74+
{/await}
7475

7576
<style lang="scss">
7677
@use '@appwrite.io/pink-legacy/src/abstract/variables/devices';

‎src/routes/(public)/(guest)/login/+page.svelte‎

Lines changed: 60 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
let { data }: PageProps = $props();
2222
2323
const profile = $derived(resolvedProfile);
24-
const Unauthenticated = $derived(profile.component.unauthenticated);
2524
2625
async function login() {
2726
try {
@@ -102,61 +101,63 @@
102101
<title>Sign in - {profile.platform}</title>
103102
</svelte:head>
104103

105-
<Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
106-
<svelte:fragment slot="title">Sign in</svelte:fragment>
107-
<svelte:fragment>
108-
<Form onSubmit={login}>
109-
<Layout.Stack>
110-
{#if emailEnabled}
111-
<InputEmail
112-
id="email"
113-
label="Email"
114-
placeholder="Email"
115-
autofocus={true}
116-
required={true}
117-
bind:value={mail} />
118-
<InputPassword
119-
id="password"
120-
label="Password"
121-
placeholder="Password"
122-
required={true}
123-
bind:value={pass} />
124-
<Button fullWidth submit {disabled}>Sign in</Button>
125-
<span class="with-separators eyebrow-heading-3">or</span>
126-
{/if}
127-
{#if profile.logins.includes(Logins.GITHUB)}
128-
<Button
129-
secondary
130-
fullWidth
131-
on:click={() => onOauthLogin(profile.oauthProviders.github)}
132-
{disabled}>
133-
<span class="icon-github" aria-hidden="true"></span>
134-
<span class="text">Sign in with GitHub</span>
135-
</Button>
136-
{/if}
137-
{#if profile.logins.includes(Logins.GOOGLE)}
138-
<Button
139-
secondary
140-
fullWidth
141-
on:click={() => onOauthLogin(profile.oauthProviders.google)}
142-
{disabled}>
143-
<span class="icon-google" aria-hidden="true"></span>
144-
<span class="text">Sign in with Google</span>
145-
</Button>
146-
{/if}
147-
</Layout.Stack>
148-
</Form>
149-
</svelte:fragment>
150-
<svelte:fragment slot="links">
151-
{#if emailEnabled}
152-
<li class="inline-links-item">
153-
<a href={`${base}/recover`}><span class="text">Forgot password?</span></a>
154-
</li>
155-
<li class="inline-links-item">
156-
<a href={`${base}/register${page?.url?.search ?? ''}`}>
157-
<span class="text">Sign up</span>
158-
</a>
159-
</li>
160-
{/if}
161-
</svelte:fragment>
162-
</Unauthenticated>
104+
{#await resolvedProfile.component.getUnauthenticated() then Unauthenticated}
105+
<Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
106+
<svelte:fragment slot="title">Sign in</svelte:fragment>
107+
<svelte:fragment>
108+
<Form onSubmit={login}>
109+
<Layout.Stack>
110+
{#if emailEnabled}
111+
<InputEmail
112+
id="email"
113+
label="Email"
114+
placeholder="Email"
115+
autofocus={true}
116+
required={true}
117+
bind:value={mail} />
118+
<InputPassword
119+
id="password"
120+
label="Password"
121+
placeholder="Password"
122+
required={true}
123+
bind:value={pass} />
124+
<Button fullWidth submit {disabled}>Sign in</Button>
125+
<span class="with-separators eyebrow-heading-3">or</span>
126+
{/if}
127+
{#if profile.logins.includes(Logins.GITHUB)}
128+
<Button
129+
secondary
130+
fullWidth
131+
on:click={() => onOauthLogin(profile.oauthProviders.github)}
132+
{disabled}>
133+
<span class="icon-github" aria-hidden="true"></span>
134+
<span class="text">Sign in with GitHub</span>
135+
</Button>
136+
{/if}
137+
{#if profile.logins.includes(Logins.GOOGLE)}
138+
<Button
139+
secondary
140+
fullWidth
141+
on:click={() => onOauthLogin(profile.oauthProviders.google)}
142+
{disabled}>
143+
<span class="icon-google" aria-hidden="true"></span>
144+
<span class="text">Sign in with Google</span>
145+
</Button>
146+
{/if}
147+
</Layout.Stack>
148+
</Form>
149+
</svelte:fragment>
150+
<svelte:fragment slot="links">
151+
{#if emailEnabled}
152+
<li class="inline-links-item">
153+
<a href={`${base}/recover`}><span class="text">Forgot password?</span></a>
154+
</li>
155+
<li class="inline-links-item">
156+
<a href={`${base}/register${page?.url?.search ?? ''}`}>
157+
<span class="text">Sign up</span>
158+
</a>
159+
</li>
160+
{/if}
161+
</svelte:fragment>
162+
</Unauthenticated>
163+
{/await}

‎src/routes/(public)/(guest)/register/+page.svelte‎

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -113,73 +113,79 @@
113113
scopes: ['read:user', 'user:email']
114114
});
115115
}
116-
117-
const Unauthenticated = resolvedProfile.component.unauthenticated;
118116
</script>
119117

120118
<svelte:head>
121119
<title>Sign up - {resolvedProfile.platform}</title>
122120
</svelte:head>
123121

124-
<Unauthenticated coupon={data?.couponData} campaign={data?.campaign || testimonialCampaign}>
125-
<svelte:fragment slot="title">Sign up</svelte:fragment>
126-
<svelte:fragment>
127-
<Form onSubmit={register}>
128-
<Layout.Stack>
129-
<InputText
130-
id="name"
131-
label="Name"
132-
placeholder="Your name"
133-
autofocus
134-
required
135-
autocomplete
136-
bind:value={name} />
137-
<InputEmail
138-
id="email"
139-
label="Email"
140-
placeholder="Your email"
141-
required
142-
bind:value={mail} />
143-
<InputPassword
144-
id="password"
145-
label="Password"
146-
placeholder="Your password"
147-
helper="Password must be at least 8 characters long"
148-
required
149-
bind:value={pass} />
150-
<InputChoice required bind:value={terms} id="terms" label="terms" showLabel={false}>
151-
By registering, you agree that you have read, understand, and acknowledge our <Link.Anchor
152-
href={resolvedProfile.links.privacy}
153-
target="_blank"
154-
rel="noopener noreferrer">
155-
Privacy Policy</Link.Anchor>
156-
and accept our
157-
<Link.Anchor
158-
href={resolvedProfile.links.privacy}
159-
target="_blank"
160-
rel="noopener noreferrer">General Terms of Use</Link.Anchor
161-
>.</InputChoice>
122+
{#await resolvedProfile.component.getUnauthenticated() then Unauthenticated}
123+
<Unauthenticated coupon={data?.couponData} campaign={data?.campaign || testimonialCampaign}>
124+
<svelte:fragment slot="title">Sign up</svelte:fragment>
125+
<svelte:fragment>
126+
<Form onSubmit={register}>
127+
<Layout.Stack>
128+
<InputText
129+
id="name"
130+
label="Name"
131+
placeholder="Your name"
132+
autofocus
133+
required
134+
autocomplete
135+
bind:value={name} />
136+
<InputEmail
137+
id="email"
138+
label="Email"
139+
placeholder="Your email"
140+
required
141+
bind:value={mail} />
142+
<InputPassword
143+
id="password"
144+
label="Password"
145+
placeholder="Your password"
146+
helper="Password must be at least 8 characters long"
147+
required
148+
bind:value={pass} />
149+
<InputChoice
150+
required
151+
bind:value={terms}
152+
id="terms"
153+
label="terms"
154+
showLabel={false}>
155+
By registering, you agree that you have read, understand, and acknowledge
156+
our <Link.Anchor
157+
href={resolvedProfile.links.privacy}
158+
target="_blank"
159+
rel="noopener noreferrer">
160+
Privacy Policy</Link.Anchor>
161+
and accept our
162+
<Link.Anchor
163+
href={resolvedProfile.links.privacy}
164+
target="_blank"
165+
rel="noopener noreferrer">General Terms of Use</Link.Anchor
166+
>.</InputChoice>
162167

163-
<Button fullWidth submit disabled={disabled || !terms}>Sign up</Button>
168+
<Button fullWidth submit disabled={disabled || !terms}>Sign up</Button>
164169

165-
{#if isCloud}
166-
<span class="with-separators eyebrow-heading-3">or</span>
167-
<Button
168-
secondary
169-
fullWidth
170-
on:click={onGithubLogin}
171-
disabled={disabled || !terms}>
172-
<span class="icon-github" aria-hidden="true"></span>
173-
<span class="text">Sign up with GitHub</span>
174-
</Button>
175-
{/if}
176-
</Layout.Stack>
177-
</Form>
178-
</svelte:fragment>
179-
<svelte:fragment slot="links">
180-
<Typography.Text variant="m-400">
181-
Already got an account? <Link.Anchor href={`${base}/login${page?.url?.search ?? ''}`}
182-
>Sign in</Link.Anchor>
183-
</Typography.Text>
184-
</svelte:fragment>
185-
</Unauthenticated>
170+
{#if isCloud}
171+
<span class="with-separators eyebrow-heading-3">or</span>
172+
<Button
173+
secondary
174+
fullWidth
175+
on:click={onGithubLogin}
176+
disabled={disabled || !terms}>
177+
<span class="icon-github" aria-hidden="true"></span>
178+
<span class="text">Sign up with GitHub</span>
179+
</Button>
180+
{/if}
181+
</Layout.Stack>
182+
</Form>
183+
</svelte:fragment>
184+
<svelte:fragment slot="links">
185+
<Typography.Text variant="m-400">
186+
Already got an account? <Link.Anchor
187+
href={`${base}/login${page?.url?.search ?? ''}`}>Sign in</Link.Anchor>
188+
</Typography.Text>
189+
</svelte:fragment>
190+
</Unauthenticated>
191+
{/await}

0 commit comments

Comments
 (0)