Skip to content

Commit 0558b2c

Browse files
matt-aitkenChigala
matt-aitken
and
Chigala
authored
feat: sveltekit adaptor (#575)
* Feat/svelte kit support (#467) * feat: implemented svelte-kit adapter * feat: implemented the @trigger.dev/svelte package * scaffolded a sveltekit example project with trigger.dev * added the convertToStandardRequest function in the sveltekit package * example sveltekit project with the @trigger.dev/svelte package * doc: added the manual setup guide for sveltekit * updated the web app onboard for sveltekit * formatted the manual setup guide for sveltekit * added a link to webapp sveltekit onboarding * added a wait function to the sveltekit example app job * typo fix * removed comments from the @trigger.dev/svelte - commented out the useEventRunDetails * updated package.json to use internal packages * added a .env.example file * updated the example-svelte-app * updated the svelte-example * updated the onboarding page to reflect requested changes * made the manual setup guide more specific * created a .env.example file for svelte-example * added import aliases * updated the tsconfig and svelte.config file * updated to use uint8Array * added missing paths in the tsconfig --------- Co-authored-by: Matt Aitken <matt@mattaitken.com> * Moved examples to references * Tweaked the SveleteKit manual setup guide * Updated zod, and set the svelte/sveltekit package versions to match other packages * Added the headers to the response from the SvelteKit api/trigger route * Changeset for Svelte and SvelteKit packages * Revert change to rawBody * Remove core from changeset packages * Delete svelte .npmrc file * Build svelte package to build, not build/lib * Made the snapshot instructions easier to copy * Delete the svelte package * Latest lockfile * Updated the SvelteKit docs * Attempt to get Svelte to import the package * Updates for port and host options * Updated lockfile from main * Update neat-feet-wait.md --------- Co-authored-by: Chigala <92148630+Chigala@users.noreply.github.com>
1 parent b12bc60 commit 0558b2c

34 files changed

Lines changed: 1482 additions & 122 deletions

File tree

‎.changeset/neat-feet-wait.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@trigger.dev/sveltekit": patch
3+
---
4+
5+
SvelteKit adaptor package

‎CHANGESETS.md‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,26 @@ Please follow the best-practice of adding changesets in the same commit as the c
3232

3333
!MAKE SURE TO UPDATE THE TAG IN THE INSTRUCTIONS BELOW!
3434

35-
1. Add changesets as usual `pnpm run changeset:add`
36-
2. Create a snapshot version (replace "dev" with your tag) `pnpm exec changeset version --snapshot dev`
37-
3. Build the packages: `pnpm run build --filter "@trigger.dev/*"`
38-
4. Publish the snapshot (replace "dev" with your tag) `pnpm exec changeset publish --no-git-tag --snapshot --tag dev`
35+
1. Add changesets as usual
36+
37+
```sh
38+
pnpm run changeset:add
39+
```
40+
41+
2. Create a snapshot version (replace "prerelease" with your tag)
42+
43+
```sh
44+
pnpm exec changeset version --snapshot prerelease
45+
```
46+
47+
3. Build the packages:
48+
49+
```sh
50+
pnpm run build --filter "@trigger.dev/*"
51+
```
52+
53+
4. Publish the snapshot (replace "dev" with your tag)
54+
55+
```sh
56+
pnpm exec changeset publish --no-git-tag --snapshot --tag prerelease
57+
```

‎apps/webapp/app/components/SetupCommands.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export function InitCommand({ appOrigin, apiKey }: { appOrigin: string; apiKey:
4444
);
4545
}
4646

47-
export function RunDevCommand() {
47+
export function RunDevCommand({ extra }: { extra?: string }) {
4848
return (
4949
<ClientTabs defaultValue="npm">
5050
<ClientTabsList>
@@ -53,19 +53,19 @@ export function RunDevCommand() {
5353
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
5454
</ClientTabsList>
5555
<ClientTabsContent value={"npm"}>
56-
<ClipboardField variant="primary/medium" className="mb-4" value={`npm run dev`} />
56+
<ClipboardField variant="primary/medium" className="mb-4" value={`npm run dev${extra}`} />
5757
</ClientTabsContent>
5858
<ClientTabsContent value={"pnpm"}>
59-
<ClipboardField variant="primary/medium" className="mb-4" value={`pnpm run dev`} />
59+
<ClipboardField variant="primary/medium" className="mb-4" value={`pnpm run dev${extra}`} />
6060
</ClientTabsContent>
6161
<ClientTabsContent value={"yarn"}>
62-
<ClipboardField variant="primary/medium" className="mb-4" value={`yarn run dev`} />
62+
<ClipboardField variant="primary/medium" className="mb-4" value={`yarn run dev${extra}`} />
6363
</ClientTabsContent>
6464
</ClientTabs>
6565
);
6666
}
6767

68-
export function TriggerDevCommand() {
68+
export function TriggerDevCommand({ extra }: { extra?: string }) {
6969
return (
7070
<ClientTabs defaultValue="npm">
7171
<ClientTabsList>
@@ -77,34 +77,34 @@ export function TriggerDevCommand() {
7777
<ClipboardField
7878
variant="primary/medium"
7979
className="mb-4"
80-
value={`npx @trigger.dev/cli@latest dev`}
80+
value={`npx @trigger.dev/cli@latest dev${extra}`}
8181
/>
8282
</ClientTabsContent>
8383
<ClientTabsContent value={"pnpm"}>
8484
<ClipboardField
8585
variant="primary/medium"
8686
className="mb-4"
87-
value={`pnpm dlx @trigger.dev/cli@latest dev`}
87+
value={`pnpm dlx @trigger.dev/cli@latest dev${extra}`}
8888
/>
8989
</ClientTabsContent>
9090
<ClientTabsContent value={"yarn"}>
9191
<ClipboardField
9292
variant="primary/medium"
9393
className="mb-4"
94-
value={`yarn dlx @trigger.dev/cli@latest dev`}
94+
value={`yarn dlx @trigger.dev/cli@latest dev${extra}`}
9595
/>
9696
</ClientTabsContent>
9797
</ClientTabs>
9898
);
9999
}
100100

101-
export function TriggerDevStep() {
101+
export function TriggerDevStep({ extra }: { extra?: string }) {
102102
return (
103103
<>
104104
<Paragraph spacing>
105105
In a <span className="text-amber-400">separate terminal window or tab</span> run:
106106
</Paragraph>
107-
<TriggerDevCommand />
107+
<TriggerDevCommand extra={extra} />
108108
<Paragraph spacing variant="small">
109109
If you’re not running on the default you can specify the port by adding{" "}
110110
<InlineCode variant="extra-small">--port 3001</InlineCode> to the end.

‎apps/webapp/app/components/frameworks/FrameworkSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export function FrameworkSelector() {
6666
<FrameworkLink to={projectSetupNuxtPath(organization, project)}>
6767
<NuxtLogo className="w-32" />
6868
</FrameworkLink>
69-
<FrameworkLink to={projectSetupSvelteKitPath(organization, project)}>
69+
<FrameworkLink to={projectSetupSvelteKitPath(organization, project)} supported>
7070
<SvelteKitLogo className="w-44" />
7171
</FrameworkLink>
7272
<FrameworkLink to={projectSetupFastifyPath(organization, project)}>

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.sveltekit/route.tsx‎

Lines changed: 102 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,113 @@
1-
import { SvelteKitLogo } from "~/assets/logos/SveltekitLogo";
2-
import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon";
1+
import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
2+
import invariant from "tiny-invariant";
3+
import { Feedback } from "~/components/Feedback";
4+
import { PageGradient } from "~/components/PageGradient";
5+
import { RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
6+
import { StepContentContainer } from "~/components/StepContentContainer";
7+
import { InlineCode } from "~/components/code/InlineCode";
38
import { BreadcrumbLink } from "~/components/navigation/NavBar";
9+
import { Button, LinkButton } from "~/components/primitives/Buttons";
10+
import { ClipboardField } from "~/components/primitives/ClipboardField";
11+
import { Header1 } from "~/components/primitives/Headers";
12+
import { NamedIcon } from "~/components/primitives/NamedIcon";
13+
import { Paragraph } from "~/components/primitives/Paragraph";
14+
import { StepNumber } from "~/components/primitives/StepNumber";
15+
import { useAppOrigin } from "~/hooks/useAppOrigin";
16+
import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
17+
import { useDevEnvironment } from "~/hooks/useEnvironments";
18+
import { useOrganization } from "~/hooks/useOrganizations";
19+
import { useProject } from "~/hooks/useProject";
420
import { Handle } from "~/utils/handle";
5-
import { trimTrailingSlash } from "~/utils/pathBuilder";
6-
21+
import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder";
22+
import { Callout } from "~/components/primitives/Callout";
23+
import { Badge } from "~/components/primitives/Badge";
724
export const handle: Handle = {
825
breadcrumb: (match) => (
926
<BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="SvelteKit" />
1027
),
1128
};
1229

13-
export default function Page() {
30+
export default function SetUpSveltekit() {
31+
const organization = useOrganization();
32+
const project = useProject();
33+
useProjectSetupComplete();
34+
const devEnvironment = useDevEnvironment();
35+
invariant(devEnvironment, "Dev environment must be defined");
1436
return (
15-
<FrameworkComingSoon
16-
frameworkName="SvelteKit"
17-
githubIssueUrl="https://github.com/triggerdotdev/trigger.dev/issues/453"
18-
githubIssueNumber={453}
19-
>
20-
<SvelteKitLogo className="w-56" />
21-
</FrameworkComingSoon>
37+
<PageGradient>
38+
<div className="mx-auto max-w-3xl">
39+
<div className="flex items-center justify-between">
40+
<Header1 spacing className="text-bright">
41+
Get setup in 5 minutes
42+
</Header1>
43+
<div className="flex items-center gap-2">
44+
<LinkButton
45+
to={projectSetupPath(organization, project)}
46+
variant="tertiary/small"
47+
LeadingIcon={Squares2X2Icon}
48+
>
49+
Choose a different framework
50+
</LinkButton>
51+
<Feedback
52+
button={
53+
<Button variant="tertiary/small" LeadingIcon={ChatBubbleLeftRightIcon}>
54+
I'm stuck!
55+
</Button>
56+
}
57+
defaultValue="help"
58+
/>
59+
</div>
60+
</div>
61+
<div>
62+
<Callout
63+
variant={"info"}
64+
to="https://github.com/triggerdotdev/trigger.dev/discussions/430"
65+
className="mb-8"
66+
>
67+
Trigger.dev has full support for serverless. We will be adding support for long-running
68+
servers soon.
69+
</Callout>
70+
<div>
71+
<StepNumber
72+
stepNumber="1"
73+
title="Follow the steps from the Sveltekit manual installation guide"
74+
/>
75+
<StepContentContainer className="flex flex-col gap-2">
76+
<Paragraph className="mt-2">Copy your server API Key to your clipboard:</Paragraph>
77+
<div className="mb-2 flex w-full items-center justify-between">
78+
<ClipboardField
79+
secure
80+
className="w-fit"
81+
value={devEnvironment.apiKey}
82+
variant={"secondary/medium"}
83+
icon={<Badge variant="outline">Server</Badge>}
84+
/>
85+
</div>
86+
<Paragraph>Now follow this guide:</Paragraph>
87+
<LinkButton
88+
to="https://trigger.dev/docs/documentation/guides/manual/sveltekit"
89+
variant="primary/medium"
90+
TrailingIcon="external-link"
91+
>
92+
Manual installation guide
93+
</LinkButton>
94+
<div className="flex items-start justify-start gap-2"></div>
95+
</StepContentContainer>
96+
<StepNumber stepNumber="2" title="Run your sveltekit app" />
97+
<StepContentContainer>
98+
<RunDevCommand extra=" -- --open --host" />
99+
</StepContentContainer>
100+
<StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
101+
<StepContentContainer>
102+
<TriggerDevStep extra=" --port 5173" />
103+
</StepContentContainer>
104+
<StepNumber stepNumber="6" title="Wait for Jobs" displaySpinner />
105+
<StepContentContainer>
106+
<Paragraph>This page will automatically refresh.</Paragraph>
107+
</StepContentContainer>
108+
</div>
109+
</div>
110+
</div>
111+
</PageGradient>
22112
);
23113
}

0 commit comments

Comments
 (0)