Skip to content

Update Svelte docs #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Svelte docs #92

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 6 additions & 9 deletions npm-packages/docs/docs/quickstart/svelte.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,15 @@ Learn how to query data from Convex in a Svelte app.

<StepByStep>
<Step title="Create a SvelteKit app">
Create a SvelteKit app using the `npx create svelte@latest` command.
Create a SvelteKit app using the `npx sv create` command.

Other sets of options will work with the library as long as Svelte 5 is used but for this quickstart guide:

- For "Which Svelte app template," choose **"Skeleton project."**
- For "Add type checking with TypeScript," choose **"Yes, using TypeScript syntax."**
- For "Select additional options," enable **"Try the Svelte 5 preview."**
- For "Which template would you like?" choose **"SvelteKit minimal".**
- For "Add type checking with TypeScript," choose **"Yes, using TypeScript syntax".**

<br></br>

```sh
npm create svelte@latest my-app
npx sv create my-app
```

</Step>
Expand All @@ -35,7 +32,7 @@ Learn how to query data from Convex in a Svelte app.
To get started, install the `convex` and `convex-svelte` packages.

```sh
cd my-app && npm install convex convex-svelte
cd my-app && npm install -D convex convex-svelte
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that this change shouldn’t be applied because convex and convex-svelte are used at runtime.

Suggested change
cd my-app && npm install -D convex convex-svelte
cd my-app && npm install convex convex-svelte

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In Svelte everything gets compiled in, it's normal for everything to be a dev dependency unless you specifically want something to be externalized

I have multiple large repos (not Convex) with only devDependencies.

It's worth testing if this correctly compiles for prod too, but I'm pretty sure it will

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thomasballinger ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can try this, but is there any downside to putting it in deps instead of dev deps @didier? This distinction is still made in some svelte apps, in which case these are deps, not dev deps (the convex cli is a dev dep, but it's the same package as convex/server (compiled into convex functions) and convex/browser (compiled into svelte client and (I hope? with every adapter?) bundled into server bundles). If a developer publishes their package to reuse functionality in lib/ then they'll probably need to move convex back to deps.

I thought there were issues where the server-side code is not bundled in some situations, maybe that's all been resolved as server endpoints are always bundled?

I'd rather not just so we can skip the step where we explain that if you reuse code from this package you need to move it.

```

</Step>
Expand Down Expand Up @@ -121,7 +118,7 @@ Learn how to query data from Convex in a Svelte app.

<Snippet
source={page}
title="src/routes/page.tsx"
title="src/routes/+page.svelte"
jsExtension="js"
/>

Expand Down