From a4f13ca2b743a32b183c99cddeb3535ae362e141 Mon Sep 17 00:00:00 2001
From: Sumanth Chinthagunta
Date: Mon, 1 Jul 2024 22:55:41 -0700
Subject: [PATCH 1/4] fix: convert store into context store
---
.../src/lib/components/layout/header.svelte | 3 +-
.../components/layout/wait-for-auth.svelte | 4 +-
.../magic-spell-textarea.svelte | 1 +
apps/console/src/lib/graphql/client.ts | 5 +-
apps/console/src/lib/nhost.ts | 10 +-
apps/console/src/lib/stores/loading.ts | 1 -
apps/console/src/lib/stores/nhost.ts | 146 +++++++
apps/console/src/routes/(app)/+layout.svelte | 3 +-
.../console/src/routes/(app)/profile/+page.ts | 3 +-
.../(app)/profile/components/elevate.svelte | 3 +-
.../components/security-key-form.svelte | 4 +-
.../profile/components/security-key.svelte | 3 +-
.../src/routes/(auth)/reset/+page.server.ts | 19 +
.../src/routes/(auth)/reset/+page.svelte | 171 ++++----
apps/console/src/routes/(auth)/reset/+page.ts | 13 -
.../src/routes/(auth)/signin/+page.server.ts | 3 -
.../src/routes/(auth)/signin/+page.svelte | 377 +----------------
.../console/src/routes/(auth)/signin/+page.ts | 14 -
.../(auth)/signin/components/divider.svelte | 6 +
.../(auth)/signin/components/password.svelte | 139 +++++++
.../signin/components/passwordless.svelte | 145 +++++++
.../(auth)/signin/components/social.svelte | 43 ++
.../src/routes/(auth)/signup/+page.server.ts | 2 -
.../src/routes/(auth)/signup/+page.svelte | 385 +++++++++---------
.../console/src/routes/(auth)/signup/+page.ts | 13 -
.../src/routes/(home)/about/+page.svelte | 4 +-
.../src/routes/(home)/contact/+page.svelte | 4 +-
apps/console/src/routes/+layout.svelte | 11 +-
28 files changed, 816 insertions(+), 719 deletions(-)
create mode 100644 apps/console/src/lib/stores/nhost.ts
delete mode 100644 apps/console/src/routes/(auth)/reset/+page.ts
delete mode 100644 apps/console/src/routes/(auth)/signin/+page.ts
create mode 100644 apps/console/src/routes/(auth)/signin/components/divider.svelte
create mode 100644 apps/console/src/routes/(auth)/signin/components/password.svelte
create mode 100644 apps/console/src/routes/(auth)/signin/components/passwordless.svelte
create mode 100644 apps/console/src/routes/(auth)/signin/components/social.svelte
delete mode 100644 apps/console/src/routes/(auth)/signup/+page.ts
diff --git a/apps/console/src/lib/components/layout/header.svelte b/apps/console/src/lib/components/layout/header.svelte
index 0cdef412..dd96c044 100644
--- a/apps/console/src/lib/components/layout/header.svelte
+++ b/apps/console/src/lib/components/layout/header.svelte
@@ -6,7 +6,7 @@ import LangSwitch from '$lib/components/layout/lang-switch.svelte';
// import LoadingIndicatorSpinner from '$lib/components/layout/loading-indicator-spinner.svelte';
import LoadingIndicatorBar from '$lib/components/layout/loading-indicator-bar.svelte';
import { storeTheme } from '$lib/stores';
-import { elevated, isAuthenticated, user } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
import type { DrawerSettings, ModalSettings } from '@skeletonlabs/skeleton';
import { AppBar, LightSwitch, getDrawerStore, getModalStore, popup } from '@skeletonlabs/skeleton';
import { LogoIcon } from '@spectacular/skeleton/components/logos';
@@ -29,6 +29,7 @@ const drawerStore = getDrawerStore();
// Local
let isOsMac = false;
const modalStore = getModalStore();
+const { elevated, isAuthenticated, user } = getNhostClient();
// Set Search Keyboard Shortcut
if (browser) {
diff --git a/apps/console/src/lib/components/layout/wait-for-auth.svelte b/apps/console/src/lib/components/layout/wait-for-auth.svelte
index bda94a71..7a4bc4d5 100644
--- a/apps/console/src/lib/components/layout/wait-for-auth.svelte
+++ b/apps/console/src/lib/components/layout/wait-for-auth.svelte
@@ -3,7 +3,9 @@
* Ensure that Auth is initialized before rendering the app.
* Otherwise all authorized graphql queries will get errors.
*/
-import { isAuthenticated } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
+
+const { isAuthenticated } = getNhostClient();
{#if $isAuthenticated}
diff --git a/apps/console/src/lib/components/magic-spell-textarea/magic-spell-textarea.svelte b/apps/console/src/lib/components/magic-spell-textarea/magic-spell-textarea.svelte
index c691d48b..110e81cc 100644
--- a/apps/console/src/lib/components/magic-spell-textarea/magic-spell-textarea.svelte
+++ b/apps/console/src/lib/components/magic-spell-textarea/magic-spell-textarea.svelte
@@ -60,6 +60,7 @@ onMount(() => {
>
-
@@ -108,9 +108,12 @@ $: meta = {
- Elevate
- Elevate user security level
-
+ JWT Claims
+
+ You can refresh session token or elevate user security level
+ here
+
+
{/if}
diff --git a/apps/console/src/routes/(app)/profile/+page.ts b/apps/console/src/routes/(app)/profile/+page.ts
index 33721087..46d99a93 100644
--- a/apps/console/src/routes/(app)/profile/+page.ts
+++ b/apps/console/src/routes/(app)/profile/+page.ts
@@ -1,17 +1,40 @@
+import { load_GetUser } from '$houdini';
import { getNhostClient } from '$lib/stores/nhost';
import { Logger } from '@spectacular/utils';
import { error } from '@sveltejs/kit';
import { get } from 'svelte/store';
-import type { GetUserVariables as Variables } from './$houdini';
+import type { PageLoad, GetUserVariables as Variables } from './$houdini';
const log = new Logger('user.profile.browser');
-export const _GetUserVariables: Variables = async (event) => {
+// export const _GetUserVariables: Variables = async (event) => {
+// const { user } = getNhostClient();
+// if (!userId) {
+// log.error('not authenticated');
+// throw error(400, 'not authenticated');
+// }
+// return { userId };
+// };
+
+/**
+ * TODO: is this going to be a blocking call?
+ */
+export const load: PageLoad = async (event) => {
const { user } = getNhostClient();
const userId = get(user)?.id;
if (!userId) {
log.error('not authenticated');
throw error(400, 'not authenticated');
}
- return { userId };
+ return {
+ ...(await load_GetUser({
+ event,
+ variables: {
+ userId,
+ },
+ metadata: {
+ useRole: 'me',
+ },
+ })),
+ };
};
diff --git a/apps/console/src/routes/(app)/profile/components/change-email.svelte b/apps/console/src/routes/(app)/profile/components/change-email.svelte
index 208be02b..0f98348d 100644
--- a/apps/console/src/routes/(app)/profile/components/change-email.svelte
+++ b/apps/console/src/routes/(app)/profile/components/change-email.svelte
@@ -1,17 +1,23 @@
diff --git a/apps/console/src/routes/(app)/profile/components/change-password.svelte b/apps/console/src/routes/(app)/profile/components/change-password.svelte
index 5009e20c..c7dda4f2 100644
--- a/apps/console/src/routes/(app)/profile/components/change-password.svelte
+++ b/apps/console/src/routes/(app)/profile/components/change-password.svelte
@@ -1,15 +1,22 @@
-
{JSON.stringify(userOrgRoles, null, 2)}
+
+
+
+
+ Organization |
+ Role |
+ isDefaultRole |
+
+
+
+ {#each userOrgRoles as role, i}
+
+ {role.organization} |
+ {role.role} |
+ {role.isDefaultRole} |
+
+ {/each}
+
+
+
diff --git a/apps/console/src/routes/(app)/reports/+page.svelte b/apps/console/src/routes/(app)/reports/+page.svelte
index 6c9dac20..3664ac74 100644
--- a/apps/console/src/routes/(app)/reports/+page.svelte
+++ b/apps/console/src/routes/(app)/reports/+page.svelte
@@ -1,5 +1,4 @@
-
+
-
+
With Tooltip and Highlight
-
+
Gradient encoding
-
+
-
+
diff --git a/apps/console/src/routes/(auth)/signout/+page.server.ts b/apps/console/src/routes/(auth)/signout/+page.server.ts
index dcd71363..81b4a643 100644
--- a/apps/console/src/routes/(auth)/signout/+page.server.ts
+++ b/apps/console/src/routes/(auth)/signout/+page.server.ts
@@ -19,7 +19,6 @@ export const actions = {
await nhost.auth.signOut();
cookies.delete(NHOST_SESSION_KEY, { path: '/' });
- // cookies.set(NHOST_SESSION_KEY, '', { httpOnly: true, path: '/', maxAge: 0 });
const message: App.Superforms.Message = { type: 'success', message: 'Signout sucessfull 😎' } as const;
redirectWithFlash(303, i18n.resolveRoute('/'), message, event);
// redirectWithFlash(303, i18n.resolveRoute('/signin'), message, event);
diff --git a/apps/console/src/routes/+layout.svelte b/apps/console/src/routes/+layout.svelte
index 3cf6b104..5aa2d6af 100644
--- a/apps/console/src/routes/+layout.svelte
+++ b/apps/console/src/routes/+layout.svelte
@@ -20,15 +20,17 @@ import type { ModalComponent } from '@skeletonlabs/skeleton';
import { AppShell } from '@skeletonlabs/skeleton';
import { Logger, startsWith } from '@spectacular/utils';
import { inject } from '@vercel/analytics';
-import { onMount, type ComponentEvents } from 'svelte';
+import { mountVercelToolbar } from '@vercel/toolbar/vite';
+import { type ComponentEvents, onMount } from 'svelte';
import { setupViewTransition } from 'sveltekit-view-transition';
import '../app.pcss';
-import { getNhostClient, setNhostClient } from '$lib/stores/nhost';
+import { setNhostClient } from '$lib/stores/nhost';
const log = new Logger('layout:root:browser');
export let data;
+//*** initializations ***//
// Floating UI for Popups
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
@@ -38,15 +40,15 @@ initializeStores();
setLoadingState();
// initialize nhost client
// TODO: initialize different clients for server-side and client-side
-setNhostClient()
-
-
+const nhost = setNhostClient()
// Handle Vercel Production Mode
storeVercelProductionMode.set(data.vercelEnv === 'production');
// Init Vercel Analytics
// if ($storeVercelProductionMode) import('@vercel/analytics').then((mod) => mod.inject());
inject({ mode: dev ? 'development' : 'production' });
+// initialize Vercel Toolbar
+onMount(() => mountVercelToolbar());
// Registered list of Components for Modals
const modalComponentRegistry: Record = {
@@ -82,14 +84,12 @@ function scrollHandler(event: ComponentEvents['scroll']) {
});
}
-
// Reactive
// Disable left sidebar on homepage
$: slotSidebarLeft = matchNoSidebarPaths($page.url.pathname) ? 'w-0' : 'bg-surface-50-900-token lg:w-auto';
$: allyPageSmoothScroll = !$prefersReducedMotionStore ? 'scroll-smooth' : '';
// update nhost session
-const nhost = getNhostClient()
// HINT: https://blog.flotes.app/posts/performant-reactivity
$: ({ session } = data);
$: if (browser) {
diff --git a/apps/console/turbo.json b/apps/console/turbo.json
index 3f0b4a2b..916f8f99 100644
--- a/apps/console/turbo.json
+++ b/apps/console/turbo.json
@@ -40,6 +40,7 @@
"VERCEL",
"VERCEL_URL",
"VERCEL_ENV",
+ "FLAGS_SECRET",
"BUILD_VERSION",
"BUILD_TIME",
"BUN_ENV",
diff --git a/apps/console/vite.config.ts b/apps/console/vite.config.ts
index 5377eba2..40cea483 100644
--- a/apps/console/vite.config.ts
+++ b/apps/console/vite.config.ts
@@ -2,6 +2,7 @@ import * as child_process from 'node:child_process';
import { paraglide } from '@inlang/paraglide-js-adapter-sveltekit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { sveltekit } from '@sveltejs/kit/vite';
+import { vercelToolbar } from '@vercel/toolbar/plugins/vite';
import houdini from 'houdini/vite';
import { defineConfig } from 'vitest/config';
@@ -28,6 +29,7 @@ export default defineConfig({
project: './project.inlang',
outdir: './src/i18n',
}),
+ vercelToolbar(),
],
define: {
// to burn-in release version in the footer.svelte
diff --git a/apps/console/vitest.config.ts b/apps/console/vitest.config.ts
index 50de9f35..9810a3b1 100644
--- a/apps/console/vitest.config.ts
+++ b/apps/console/vitest.config.ts
@@ -1,8 +1,14 @@
+import { sveltekit } from '@sveltejs/kit/vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { svelteTesting } from '@testing-library/svelte/vite';
import { configDefaults, defineConfig } from 'vitest/config';
export default defineConfig({
- plugins: [svelte({ hot: !process.env.VITEST })],
+ plugins: [
+ // svelte({ hot: !process.env.VITEST }),
+ sveltekit(),
+ svelteTesting(),
+ ],
test: {
globals: true,
environment: 'jsdom',
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 90af9b10..170da301 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -24,7 +24,7 @@
"astro": "4.11.3",
"sharp": "0.33.4",
"tailwindcss": "3.4.4",
- "typescript": "5.5.2"
+ "typescript": "5.5.3"
},
"devDependencies": {
"@spectacular/biome-config": "workspace:*"
diff --git a/apps/playground/package.json b/apps/playground/package.json
index 6af667a4..c03d7b4b 100644
--- a/apps/playground/package.json
+++ b/apps/playground/package.json
@@ -25,7 +25,7 @@
"test:unit:ui": "dotenv-run -f .env -f .secrets -v -- vitest --ui"
},
"devDependencies": {
- "@floating-ui/dom": "1.6.6",
+ "@floating-ui/dom": "1.6.7",
"@fontsource-variable/inter": "5.0.18",
"@inlang/cli": "2.18.1",
"@inlang/paraglide-js": "1.11.0",
@@ -45,15 +45,15 @@
"@tailwindcss/container-queries": "0.1.1",
"@tailwindcss/forms": "0.5.7",
"@tailwindcss/typography": "0.5.13",
- "@tsparticles/engine": "3.4.0",
- "@tsparticles/slim": "3.4.0",
+ "@tsparticles/engine": "3.5.0",
+ "@tsparticles/slim": "3.5.0",
"@tsparticles/svelte": "3.1.1",
"@types/d3-scale": "4.0.8",
"@types/node": "20.14.9",
"@vercel/analytics": "1.3.1",
"@vincjo/datatables": "1.14.10",
"@vitest/coverage-v8": "1.6.0",
- "@xyflow/svelte": "0.1.7",
+ "@xyflow/svelte": "0.1.8",
"autoprefixer": "10.4.19",
"d3-array": "3.2.4",
"d3-scale": "4.0.2",
@@ -61,7 +61,7 @@
"d3-shape": "3.2.0",
"date-fns": "3.6.0",
"formsnap": "1.0.1",
- "layerchart": "0.43.4",
+ "layerchart": "0.43.6",
"lucide-svelte": "0.399.0",
"paneforge": "0.0.5",
"postcss": "8.4.39",
@@ -70,7 +70,7 @@
"svelte-check": "3.8.4",
"svelte-meta-tags": "3.1.2",
"svelte-persisted-store": "0.11.0",
- "svelte-ux": "0.71.3",
+ "svelte-ux": "0.72.1",
"sveltekit-flash-message": "2.4.4",
"sveltekit-rate-limiter": "0.5.1",
"sveltekit-superforms": "2.15.2",
@@ -80,13 +80,13 @@
"tailwindcss": "3.4.4",
"tailwindcss-animate": "1.0.7",
"tslib": "2.6.3",
- "typescript": "5.5.2",
- "vite": "5.3.2",
+ "typescript": "5.5.3",
+ "vite": "5.2.13",
"vitest": "1.6.0",
"zod": "3.23.8"
},
"optionalDependencies": {
- "@playwright/test": "1.45.0",
+ "@playwright/test": "1.45.1",
"@vitest/ui": "1.6.0"
}
}
diff --git a/apps/web/package.json b/apps/web/package.json
index 7f2a6634..14b9587f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -42,7 +42,7 @@
"svelte": "4.2.18",
"tailwind-merge": "2.3.0",
"tailwindcss": "3.4.4",
- "typescript": "5.5.2",
+ "typescript": "5.5.3",
"vitest": "1.6.0"
}
}
diff --git a/compose.override.yml b/compose.override.yml
index de476d0c..32d77698 100644
--- a/compose.override.yml
+++ b/compose.override.yml
@@ -36,7 +36,7 @@ services:
HASURA_GRAPHQL_DEV_MODE: 'true'
HASURA_GRAPHQL_LOG_LEVEL: warn
HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup,http-log,webhook-log,websocket-log
- HASURA_GRAPHQL_UNAUTHORIZED_ROLE: anonymous
+ HASURA_GRAPHQL_UNAUTHORIZED_ROLE: public
HASURA_GRAPHQL_ENABLE_TELEMETRY: 'false'
HASURA_GRAPHQL_STRINGIFY_NUMERIC_TYPES: 'false'
HASURA_GRAPHQL_TX_ISOLATION: read-committed
diff --git a/docs/awesome-sveltekit.md b/docs/awesome-sveltekit.md
index 9f02cd44..fe2b6702 100644
--- a/docs/awesome-sveltekit.md
+++ b/docs/awesome-sveltekit.md
@@ -151,6 +151,7 @@ Awesome **SvelteKit** Links
- [repo](https://github.com/altschuler/reshared/)
- [game-chronicle](https://github.com/ItsCentric/game-chronicle) - Use Superforms, shadcn-svelte, formsnap, tauri for native app
- [climbing_noteboo](https://github.com/diericx/climbing_notebook) - Use skeleton, Superforms, sveltekit-flash-message
+- [Vercel Toolbar and Feature Flags SvelteKit Starter](https://github.com/vercel/examples/tree/main/toolbar/toolbar-feature-flags-sveltekit), [Demo](https://toolbar-feature-flags-sveltekit.vercel.app/)
## Deployment
@@ -262,3 +263,4 @@ Awesome **SvelteKit** Links
-
- Learn something new with GraphQL, every week - [graphql.wtf](https://graphql.wtf/)
- [VS code setup for Svelte](https://webjeda.com/blog/vscode-setup-svelte)
+- [component-party](https://component-party.dev/) website showcase how reactivity work in **React Framework** vs **Svelte Framework**
diff --git a/docs/wip.md b/docs/wip.md
index bd497864..2c0ed211 100644
--- a/docs/wip.md
+++ b/docs/wip.md
@@ -1,6 +1,7 @@
```shell
# clean exclude TODO & .env (remove `-n` , it used to try dry-run)
-git clean -dfx -e TODO -e .env.local -e .env -e .env.prod -e .env.test -e .secrets -e .secrets.prod -e apps/playground/.env.test -e infra/base/traefik/certs -e infra/helm -e compose.nhost.yml -e .idea -n
+git clean -dfx -e TODO -e .env.local -e .env -e .env.prod -e .env.test -e .secrets -e .secrets.prod \
+-e apps/playground/.env.test -e infra/base/traefik/certs -e infra/base/mailpit/certs -e infra/helm -e compose.nhost.yml -e .idea -n
# update deps
pnpm up --latest -r
# convert docker-compose file to helm
diff --git a/infra/base/mailpit/README.md b/infra/base/mailpit/README.md
index c2ea7763..ebe01b6d 100644
--- a/infra/base/mailpit/README.md
+++ b/infra/base/mailpit/README.md
@@ -27,3 +27,6 @@ cd infra/base/mailpit
# go back to project root
cd ../../..
```
+
+> [!IMPORTANT]
+> Append newly created `infra/base/mailpit/certs/ca.pem` file content to `infra/components/cacerts/ca-certificates.crt`
diff --git a/nhost/tests/.env.example b/nhost/tests/.env.example
index 90aa4522..1358c5d7 100644
--- a/nhost/tests/.env.example
+++ b/nhost/tests/.env.example
@@ -1,2 +1,6 @@
+## local env
PUBLIC_GRAPHQL_ENDPOINT= 'https://hasura.traefik.me/v1/graphql'
HASURA_GRAPHQL_ADMIN_SECRET = 'hasura-admin-secret'
+## nonprod env
+# PUBLIC_GRAPHQL_ENDPOINT= 'fillme'
+# HASURA_GRAPHQL_ADMIN_SECRET = 'fillme'
diff --git a/package.json b/package.json
index 85e1ddfb..3b84c512 100644
--- a/package.json
+++ b/package.json
@@ -54,14 +54,14 @@
"devDependencies": {
"@biomejs/biome": "1.8.3",
"@changesets/changelog-github": "0.5.0",
- "@changesets/cli": "2.27.6",
+ "@changesets/cli": "2.27.7",
"@dotenv-run/cli": "1.3.5",
"@markuplint/astro-parser": "4.6.5",
"@markuplint/svelte-parser": "4.6.5",
"@spectacular/biome-config": "workspace:*",
"@spectacular/typescript-config": "workspace:*",
"concurrently": "8.2.2",
- "cspell": "8.9.1",
+ "cspell": "8.10.0",
"husky": "9.0.11",
"lint-staged": "15.2.7",
"markuplint": "4.9.2",
@@ -75,6 +75,7 @@
},
"pnpm": {
"overrides": {
+ "vite": "5.2.13",
"xstate": "4.38.3"
}
}
diff --git a/packages/skeleton-ui/package.json b/packages/skeleton-ui/package.json
index 4235290a..8839e90d 100644
--- a/packages/skeleton-ui/package.json
+++ b/packages/skeleton-ui/package.json
@@ -30,7 +30,7 @@
"test:watch": "vitest"
},
"devDependencies": {
- "@floating-ui/dom": "1.6.6",
+ "@floating-ui/dom": "1.6.7",
"@fontsource-variable/inter": "5.0.18",
"@skeletonlabs/skeleton": "2.10.1",
"@skeletonlabs/tw-plugin": "0.4.0",
@@ -59,8 +59,8 @@
"tailwind-variants": "0.2.1",
"tailwindcss": "3.4.4",
"tslib": "2.6.3",
- "typescript": "5.5.2",
- "vite": "5.3.2",
+ "typescript": "5.5.3",
+ "vite": "5.2.13",
"vitest": "1.6.0",
"zod": "3.23.8"
},
diff --git a/packages/skeleton-ui/src/components/form/form-alerts.svelte b/packages/skeleton-ui/src/components/form/form-alerts.svelte
index d146ada8..f56aaedd 100644
--- a/packages/skeleton-ui/src/components/form/form-alerts.svelte
+++ b/packages/skeleton-ui/src/components/form/form-alerts.svelte
@@ -30,7 +30,7 @@ export let errors: string[] | undefined;
{/if}
{#if errors && errors.length}
-