-
-
Notifications
You must be signed in to change notification settings - Fork 608
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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 <[email protected]> * 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 <[email protected]>
- Loading branch information
1 parent
b12bc60
commit 0558b2c
Showing
34 changed files
with
1,482 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@trigger.dev/sveltekit": patch | ||
| --- | ||
|
|
||
| SvelteKit adaptor package |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 102 additions & 12 deletions
114
...p/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.sveltekit/route.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,113 @@ | ||
| import { SvelteKitLogo } from "~/assets/logos/SveltekitLogo"; | ||
| import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon"; | ||
| import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid"; | ||
| import invariant from "tiny-invariant"; | ||
| import { Feedback } from "~/components/Feedback"; | ||
| import { PageGradient } from "~/components/PageGradient"; | ||
| import { RunDevCommand, TriggerDevStep } from "~/components/SetupCommands"; | ||
| import { StepContentContainer } from "~/components/StepContentContainer"; | ||
| import { InlineCode } from "~/components/code/InlineCode"; | ||
| import { BreadcrumbLink } from "~/components/navigation/NavBar"; | ||
| import { Button, LinkButton } from "~/components/primitives/Buttons"; | ||
| import { ClipboardField } from "~/components/primitives/ClipboardField"; | ||
| import { Header1 } from "~/components/primitives/Headers"; | ||
| import { NamedIcon } from "~/components/primitives/NamedIcon"; | ||
| import { Paragraph } from "~/components/primitives/Paragraph"; | ||
| import { StepNumber } from "~/components/primitives/StepNumber"; | ||
| import { useAppOrigin } from "~/hooks/useAppOrigin"; | ||
| import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete"; | ||
| import { useDevEnvironment } from "~/hooks/useEnvironments"; | ||
| import { useOrganization } from "~/hooks/useOrganizations"; | ||
| import { useProject } from "~/hooks/useProject"; | ||
| import { Handle } from "~/utils/handle"; | ||
| import { trimTrailingSlash } from "~/utils/pathBuilder"; | ||
|
|
||
| import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder"; | ||
| import { Callout } from "~/components/primitives/Callout"; | ||
| import { Badge } from "~/components/primitives/Badge"; | ||
| export const handle: Handle = { | ||
| breadcrumb: (match) => ( | ||
| <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="SvelteKit" /> | ||
| ), | ||
| }; | ||
|
|
||
| export default function Page() { | ||
| export default function SetUpSveltekit() { | ||
| const organization = useOrganization(); | ||
| const project = useProject(); | ||
| useProjectSetupComplete(); | ||
| const devEnvironment = useDevEnvironment(); | ||
| invariant(devEnvironment, "Dev environment must be defined"); | ||
| return ( | ||
| <FrameworkComingSoon | ||
| frameworkName="SvelteKit" | ||
| githubIssueUrl="https://github.com/triggerdotdev/trigger.dev/issues/453" | ||
| githubIssueNumber={453} | ||
| > | ||
| <SvelteKitLogo className="w-56" /> | ||
| </FrameworkComingSoon> | ||
| <PageGradient> | ||
| <div className="mx-auto max-w-3xl"> | ||
| <div className="flex items-center justify-between"> | ||
| <Header1 spacing className="text-bright"> | ||
| Get setup in 5 minutes | ||
| </Header1> | ||
| <div className="flex items-center gap-2"> | ||
| <LinkButton | ||
| to={projectSetupPath(organization, project)} | ||
| variant="tertiary/small" | ||
| LeadingIcon={Squares2X2Icon} | ||
| > | ||
| Choose a different framework | ||
| </LinkButton> | ||
| <Feedback | ||
| button={ | ||
| <Button variant="tertiary/small" LeadingIcon={ChatBubbleLeftRightIcon}> | ||
| I'm stuck! | ||
| </Button> | ||
| } | ||
| defaultValue="help" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <Callout | ||
| variant={"info"} | ||
| to="https://github.com/triggerdotdev/trigger.dev/discussions/430" | ||
| className="mb-8" | ||
| > | ||
| Trigger.dev has full support for serverless. We will be adding support for long-running | ||
| servers soon. | ||
| </Callout> | ||
| <div> | ||
| <StepNumber | ||
| stepNumber="1" | ||
| title="Follow the steps from the Sveltekit manual installation guide" | ||
| /> | ||
| <StepContentContainer className="flex flex-col gap-2"> | ||
| <Paragraph className="mt-2">Copy your server API Key to your clipboard:</Paragraph> | ||
| <div className="mb-2 flex w-full items-center justify-between"> | ||
| <ClipboardField | ||
| secure | ||
| className="w-fit" | ||
| value={devEnvironment.apiKey} | ||
| variant={"secondary/medium"} | ||
| icon={<Badge variant="outline">Server</Badge>} | ||
| /> | ||
| </div> | ||
| <Paragraph>Now follow this guide:</Paragraph> | ||
| <LinkButton | ||
| to="https://trigger.dev/docs/documentation/guides/manual/sveltekit" | ||
| variant="primary/medium" | ||
| TrailingIcon="external-link" | ||
| > | ||
| Manual installation guide | ||
| </LinkButton> | ||
| <div className="flex items-start justify-start gap-2"></div> | ||
| </StepContentContainer> | ||
| <StepNumber stepNumber="2" title="Run your sveltekit app" /> | ||
| <StepContentContainer> | ||
| <RunDevCommand extra=" -- --open --host" /> | ||
| </StepContentContainer> | ||
| <StepNumber stepNumber="3" title="Run the CLI 'dev' command" /> | ||
| <StepContentContainer> | ||
| <TriggerDevStep extra=" --port 5173" /> | ||
| </StepContentContainer> | ||
| <StepNumber stepNumber="6" title="Wait for Jobs" displaySpinner /> | ||
| <StepContentContainer> | ||
| <Paragraph>This page will automatically refresh.</Paragraph> | ||
| </StepContentContainer> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </PageGradient> | ||
| ); | ||
| } |
Oops, something went wrong.