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>

.changeset/neat-feet-wait.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sveltekit": patch
+---
+
+SvelteKit adaptor package

CHANGESETS.md

@@ -32,7 +32,26 @@ Please follow the best-practice of adding changesets in the same commit as the c
 
 !MAKE SURE TO UPDATE THE TAG IN THE INSTRUCTIONS BELOW!
 
-1. Add changesets as usual `pnpm run changeset:add`
+1. Add changesets as usual
-2. Create a snapshot version (replace "dev" with your tag) `pnpm exec changeset version --snapshot dev`
+
-3. Build the packages: `pnpm run build --filter "@trigger.dev/*"`
+```sh
-4. Publish the snapshot (replace "dev" with your tag) `pnpm exec changeset publish --no-git-tag --snapshot --tag dev`
+pnpm run changeset:add
+```
+
+2. Create a snapshot version (replace "prerelease" with your tag)
+
+```sh
+pnpm exec changeset version --snapshot prerelease
+```
+
+3. Build the packages:
+
+```sh
+pnpm run build --filter "@trigger.dev/*"
+```
+
+4. Publish the snapshot (replace "dev" with your tag)
+
+```sh
+pnpm exec changeset publish --no-git-tag --snapshot --tag prerelease
+```

apps/webapp/app/components/SetupCommands.tsx

@@ -44,7 +44,7 @@ export function InitCommand({ appOrigin, apiKey }: { appOrigin: string; apiKey:
   );
 }
 
-export function RunDevCommand() {
+export function RunDevCommand({ extra }: { extra?: string }) {
   return (
     <ClientTabs defaultValue="npm">
       <ClientTabsList>
@@ -53,19 +53,19 @@ export function RunDevCommand() {
         <ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
       </ClientTabsList>
       <ClientTabsContent value={"npm"}>
-        <ClipboardField variant="primary/medium" className="mb-4" value={`npm run dev`} />
+        <ClipboardField variant="primary/medium" className="mb-4" value={`npm run dev${extra}`} />
       </ClientTabsContent>
       <ClientTabsContent value={"pnpm"}>
-        <ClipboardField variant="primary/medium" className="mb-4" value={`pnpm run dev`} />
+        <ClipboardField variant="primary/medium" className="mb-4" value={`pnpm run dev${extra}`} />
       </ClientTabsContent>
       <ClientTabsContent value={"yarn"}>
-        <ClipboardField variant="primary/medium" className="mb-4" value={`yarn run dev`} />
+        <ClipboardField variant="primary/medium" className="mb-4" value={`yarn run dev${extra}`} />
       </ClientTabsContent>
     </ClientTabs>
   );
 }
 
-export function TriggerDevCommand() {
+export function TriggerDevCommand({ extra }: { extra?: string }) {
   return (
     <ClientTabs defaultValue="npm">
       <ClientTabsList>
@@ -77,34 +77,34 @@ export function TriggerDevCommand() {
         <ClipboardField
           variant="primary/medium"
           className="mb-4"
-          value={`npx @trigger.dev/cli@latest dev`}
+          value={`npx @trigger.dev/cli@latest dev${extra}`}
         />
       </ClientTabsContent>
       <ClientTabsContent value={"pnpm"}>
         <ClipboardField
           variant="primary/medium"
           className="mb-4"
-          value={`pnpm dlx @trigger.dev/cli@latest dev`}
+          value={`pnpm dlx @trigger.dev/cli@latest dev${extra}`}
         />
       </ClientTabsContent>
       <ClientTabsContent value={"yarn"}>
         <ClipboardField
           variant="primary/medium"
           className="mb-4"
-          value={`yarn dlx @trigger.dev/cli@latest dev`}
+          value={`yarn dlx @trigger.dev/cli@latest dev${extra}`}
         />
       </ClientTabsContent>
     </ClientTabs>
   );
 }
 
-export function TriggerDevStep() {
+export function TriggerDevStep({ extra }: { extra?: string }) {
   return (
     <>
       <Paragraph spacing>
         In a <span className="text-amber-400">separate terminal window or tab</span> run:
       </Paragraph>
-      <TriggerDevCommand />
+      <TriggerDevCommand extra={extra} />
       <Paragraph spacing variant="small">
         If you’re not running on the default you can specify the port by adding{" "}
         <InlineCode variant="extra-small">--port 3001</InlineCode> to the end.

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

@@ -66,7 +66,7 @@ export function FrameworkSelector() {
           <FrameworkLink to={projectSetupNuxtPath(organization, project)}>
             <NuxtLogo className="w-32" />
           </FrameworkLink>
-          <FrameworkLink to={projectSetupSvelteKitPath(organization, project)}>
+          <FrameworkLink to={projectSetupSvelteKitPath(organization, project)} supported>
             <SvelteKitLogo className="w-44" />
           </FrameworkLink>
           <FrameworkLink to={projectSetupFastifyPath(organization, project)}>

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

@@ -1,23 +1,113 @@
-import { SvelteKitLogo } from "~/assets/logos/SveltekitLogo";
+import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
-import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon";
+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
+    <PageGradient>
-      frameworkName="SvelteKit"
+      <div className="mx-auto max-w-3xl">
-      githubIssueUrl="https://github.com/triggerdotdev/trigger.dev/issues/453"
+        <div className="flex items-center justify-between">
-      githubIssueNumber={453}
+          <Header1 spacing className="text-bright">
-    >
+            Get setup in 5 minutes
-      <SvelteKitLogo className="w-56" />
+          </Header1>
-    </FrameworkComingSoon>
+          <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>
   );
 }

docs/_snippets/manual-setup-sveltekit.mdx

@@ -1 +1,217 @@
-We're in the process of building support for the SvelteKit framework. You can follow along with progress or contribute via [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues).
+## Installing Required Packages
+
+To begin, install the necessary packages in your Sveltekit project directory. You can choose one of the following package managers:
+
+<CodeGroup>
+
+```bash npm
+npm i @trigger.dev/sdk @trigger.dev/sveltekit
+```
+
+```bash pnpm
+pnpm install @trigger.dev/sdk @trigger.dev/sveltekit
+```
+
+```bash yarn
+yarn add @trigger.dev/sdk @trigger.dev/sveltekit
+```
+
+</CodeGroup>
+<br />
+
+<Note>Ensure that you execute this command within a SvelteKit project.</Note>
+## Obtaining the Development API Key
+
+To locate your development API key, login to the [Trigger.dev
+dashboard](https://cloud.trigger.dev) and select the Project you want to
+connect to. Then click on the Environments & API Keys tab in the left menu.
+You can copy your development API Key from the field at the top of this page.
+(Your development key will start with `tr_dev_`).
+
+## Adding Environment Variables
+
+Create a `.env` file at the root of your project and include your Trigger API key and URL like this:
+
+```bash
+TRIGGER_API_KEY=ENTER_YOUR_DEVELOPMENT_API_KEY_HERE
+TRIGGER_API_URL=https://api.trigger.dev # this is only necessary if you are self-hosting
+```
+
+Replace `ENTER_YOUR_DEVELOPMENT_API_KEY_HERE` with the actual API key obtained from the previous step.
+
+## Syncing Environment Variable types (TypeScript)
+
+You will have type errors for your environment variables unless you run this command:
+
+```sh
+npx svelte-kit sync
+```
+
+## Configuring the Trigger Client
+
+Create a file at `<root>/src/trigger.ts` or `<root>/trigger.ts` depending on whether you're using the `src` directory or not. `<root>` represents the root directory of your project.
+
+Next, add the following code to the file which creates and exports a new `TriggerClient`:
+
+```typescript src/trigger.(ts/js)
+// trigger.ts (for TypeScript) or trigger.js (for JavaScript)
+
+import { TriggerClient } from "@trigger.dev/sdk";
+import { TRIGGER_API_KEY, TRIGGER_API_URL } from "$env/static/private";
+
+export const client = new TriggerClient({
+  id: "my-app",
+  apiKey: TRIGGER_API_KEY,
+  apiUrl: TRIGGER_API_URL,
+});
+```
+
+Replace **"my-app"** with an appropriate identifier for your project.
+
+## Creating the API Route
+
+To establish an API route for interacting with Trigger.dev, follow these steps based on your project's file type and structure
+
+Create a new file named `+server.(ts/js)` within the `src/routes/api/trigger` directory, and add the following code:
+
+```typescript
+import { createSvelteRoute } from "@trigger.dev/sveltekit";
+import { client } from "../../../trigger";
+
+//import all jobs
+import "../../../jobs";
+
+// Create the Svelte route handler using the createSvelteRoute function
+const svelteRoute = createSvelteRoute(client);
+
+// Define your API route handler
+export const POST = svelteRoute.POST;
+```
+
+## Creating the Example Job
+
+1. Create a folder named `jobs` alongside your `src` directory
+2. Inside the `jobs` folder, add two files named `example.(ts/js)` and `index.(ts/js)`.
+
+<CodeGroup>
+
+```typescript src/jobs/example.(ts/js)
+import { eventTrigger } from "@trigger.dev/sdk";
+import { client } from "../trigger";
+
+// your first job
+client.defineJob({
+  id: "example-job",
+  name: "Example Job",
+  version: "0.0.1",
+  trigger: eventTrigger({
+    name: "example.event",
+  }),
+  run: async (payload, io, ctx) => {
+    await io.logger.info("Hello world!", { payload });
+
+    return {
+      message: "Hello world!",
+    };
+  },
+});
+```
+
+```typescript src/jobs/index.(ts/js)
+// export all your job files here
+export * from "./example";
+```
+
+</CodeGroup>
+
+## Additonal Job Definitions
+
+You can define more job definitions by creating additional files in the `jobs` folder and exporting them in the `src/jobs/index` file.
+
+For example, in `index.(ts/js)`, you can export other job files like this:
+
+```typescript
+// export all your job files here
+export * from "./example";
+export * from "./other-job-file";
+```
+
+## Adding Configuration to `package.json`
+
+Inside the `package.json` file, add the following configuration under the root object:
+
+```json
+"trigger.dev": {
+  "endpointId": "my-app"
+}
+```
+
+Your `package.json` file might look something like this:
+
+```json
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "dependencies": {
+    // ... other dependencies
+  },
+  "trigger.dev": {
+    "endpointId": "my-app"
+  }
+}
+```
+
+Replace **"my-app"** with the appropriate identifier you used during the step for creating the Trigger Client.
+
+## Running
+
+### Run your Sveltekit app
+
+Run your Sveltekit app locally. You need to use the `--host` flag to allow the Trigger.dev CLI to connect to your app.
+
+For example:
+
+<CodeGroup>
+
+```bash npm
+npm run dev -- --open --host
+```
+
+```bash pnpm
+pnpm run dev -- --open --host
+```
+
+```bash yarn
+yarn run dev -- --open --host
+```
+
+</CodeGroup>
+
+### Run the CLI 'dev' command
+
+In a **_separate terminal window or tab_** run:
+
+<CodeGroup>
+
+```bash npm
+npx @trigger.dev/cli@latest dev --port 5173
+```
+
+```bash pnpm
+pnpm dlx @trigger.dev/cli@latest dev --port 5173
+```
+
+```bash yarn
+yarn dlx @trigger.dev/cli@latest dev --port 5173
+```
+
+</CodeGroup>
+<br />
+<Note>
+  You can optionally pass the port if you're not running on 3000 by adding
+  `--port 5173` to the end
+</Note>
+<Note>
+  You can optionally pass the hostname if you're not running on localhost by adding
+  `--hostname <host>`. Example, in case your Sveltekit app is running on 0.0.0.0: `--hostname 0.0.0.0`.
+</Note>

docs/documentation/concepts/client-adaptors.mdx

@@ -24,11 +24,12 @@ Adaptors allows Clients to receive data from the Trigger API. They do this by cr
 
 Each platform has one or more adaptors, see the guides below:
 
-| Platform                                          | Adaptor              |
+| Platform                                               | Adaptor               |
-| ------------------------------------------------- | -------------------- |
+| ------------------------------------------------------ | --------------------- |
-| [Next.js](/documentation/guides/platforms/nextjs) | `createPagesRoute()` |
+| [Next.js](/documentation/guides/platforms/nextjs)      | `createPagesRoute()`  |
-| [Next.js](/documentation/guides/platforms/nextjs) | `createAppRoute()`   |
+| [Next.js](/documentation/guides/platforms/nextjs)      | `createAppRoute()`    |
-| [NestJS](/documentation/guides/manual/nestjs)     | `TriggerDevModule`   |
+| [NestJS](/documentation/guides/manual/nestjs)          | `TriggerDevModule`    |
-| [Astro](/documentation/guides/platforms/astro)    | `createAstroRoute()` |
+| [Astro](/documentation/guides/platforms/astro)         | `createAstroRoute()`  |
-| [Remix](/documentation/guides/platforms/remix)    | `createRemixRoute()` |
+| [Remix](/documentation/guides/platforms/remix)         | `createRemixRoute()`  |
-| Express                                           | Coming soon          |
+| [Sveltekit](/documentation/guides/platforms/sveltekit) | `createSvelteRoute()` |
+| Express                                                | Coming soon           |

packages/sveltekit/LICENSE

@@ -0,0 +1,19 @@
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/sveltekit/README.md

@@ -0,0 +1,9 @@
+# SvelteKit and Trigger.dev
+
+Trigger.dev provides full support for the SvelteKit framework.
+
+For information about using Trigger.dev in your SvelteKit app, check out these useful documentation links:
+
+- [`Quick start guide for setting up Trigger.dev in a SvelteKit project`](https://trigger.dev/docs/documentation/quickstarts/sveltekit)
+- [`Manually set up SvelteKit with Trigger.dev`](https://trigger.dev/docs/documentation/guides/manual/sveltekit)
+- [`Using Trigger.dev with SvelteKit, handling middleware, and more`](https://trigger.dev/docs/documentation/guides/platforms/sveltekit)

packages/sveltekit/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@trigger.dev/sveltekit",
+  "version": "2.1.9",
+  "description": "Trigger.dev svelteKit integration",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "commonjs",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "^1.20.4",
+    "@trigger.dev/tsconfig": "workspace:*",
+    "@types/debug": "^4.1.7",
+    "@types/ws": "^8.5.3",
+    "rimraf": "^3.0.2",
+    "tsup": "^6.5.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && npm run build:tsup",
+    "build:tsup": "tsup"
+  },
+  "peerDependencies": {
+    "@trigger.dev/sdk": "workspace:^2.0.14"
+  },
+  "dependencies": {
+    "debug": "^4.3.4"
+  },
+  "engines": {
+    "node": ">=16.8.0"
+  }
+}

packages/sveltekit/src/index.ts

@@ -0,0 +1,42 @@
+import type { TriggerClient } from "@trigger.dev/sdk";
+
+import { json } from "@sveltejs/kit";
+import type { RequestHandler } from "@sveltejs/kit";
+
+export function createSvelteRoute(client: TriggerClient) {
+  const POST: RequestHandler = async ({ request }) => {
+    const standardizedRequest = await convertToStandardRequest(request);
+    const response = await client.handleRequest(standardizedRequest);
+
+    if (!response) {
+      return json({ error: "Resource not found" }, { status: 404 });
+    }
+
+    return json(response.body, { status: response.status, headers: response.headers });
+  };
+  return { POST };
+}
+
+async function convertToStandardRequest(req: Request): Promise<Request> {
+  // Prepare the request to be a fetch-compatible Request object:
+  const requestHeaders = req.headers;
+  const requestMethod = req.method;
+  const responseHeaders = Object.create(null);
+
+  for (const [headerName, headerValue] of requestHeaders.entries()) {
+    responseHeaders[headerName] = headerValue;
+  }
+
+  // Create a new Request object to be passed to the TriggerClient
+  // where we pass the clone the incoming request metadata such as
+  // headers, method, body.
+  const request = new Request("https://svelte/api/trigger", {
+    headers: responseHeaders,
+    method: requestMethod,
+    // @ts-ignore
+    body: req.body ? req.body : req,
+    duplex: "half",
+  });
+
+  return request;
+}

packages/sveltekit/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@trigger.dev/tsconfig/node18.json",
+  "include": ["./src/**/*.ts", "tsup.config.ts"],
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "declaration": false,
+    "declarationMap": false,
+    "lib": ["DOM", "DOM.Iterable"],
+    "paths": {
+      "@trigger.dev/sdk": ["../trigger-sdk/src/index"],
+      "@trigger.dev/sdk/*": ["../trigger-sdk/src/*"], 
+      "@trigger.dev/core": ["../core/src/index"],
+      "@trigger.dev/core/*": ["../core/src/*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}

packages/sveltekit/tsup.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig([
+  {
+    name: "main",
+    entry: ["./src/index.ts"],
+    outDir: "./dist",
+    platform: "node",
+    format: ["cjs"],
+    legacyOutput: true,
+    sourcemap: true,
+    clean: true,
+    bundle: true,
+    splitting: false,
+    dts: true,
+    external: ["http", "https", "util", "events", "tty", "os", "timers"],
+    esbuildPlugins: [],
+  },
+]);

references/svelte-example/.env.example

@@ -0,0 +1,3 @@
+TRIGGER_API_KEY= 
+TRIGGER_API_URL=
+

references/svelte-example/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

references/svelte-example/.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

references/svelte-example/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

references/svelte-example/.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

references/svelte-example/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

references/svelte-example/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

references/svelte-example/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

references/svelte-example/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "svelte-example",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"dependencies": {
+		"@trigger.dev/sdk": "workspace:*", 
+		"@trigger.dev/sveltekit": "workspace:*"
+	},
+	"trigger.dev": {
+		"endpointId": "sveltekit-example"
+	},
+	"type": "module"
+}

references/svelte-example/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

references/svelte-example/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

references/svelte-example/src/jobs/example.ts

@@ -0,0 +1,20 @@
+import { eventTrigger } from '@trigger.dev/sdk';
+import { client } from '../trigger';
+
+// your first job
+client.defineJob({
+	id: 'test-svelte-job',
+	name: 'Test sveltekit',
+	version: '0.0.1',
+	trigger: eventTrigger({
+		name: 'test.event'
+	}),
+	run: async (payload, io, ctx) => {
+		await io.wait("waiting", 5)
+		await io.logger.info('Hello world!', { payload });
+
+		return {
+			message: 'Hello world!'
+		};
+	}
+});

references/svelte-example/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

references/svelte-example/src/routes/+page.svelte

@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

references/svelte-example/src/routes/api/trigger/+server.ts

@@ -0,0 +1,12 @@
+import { createSvelteRoute } from '@trigger.dev/sveltekit';
+
+import { client } from '$trigger';
+
+// // Replace this with your own jobs
+import '$jobs/example';
+
+// Create the Svelte route handler using the createSvelteRoute function
+const svelteRoute = createSvelteRoute(client);
+
+// Define your API route handler
+export const POST = svelteRoute.POST;

references/svelte-example/src/trigger.ts

@@ -0,0 +1,7 @@
+import { TriggerClient } from '@trigger.dev/sdk';
+import { TRIGGER_API_KEY } from '$env/static/private';
+
+export const client = new TriggerClient({
+	id: 'sveltekit-example',
+	apiKey: TRIGGER_API_KEY, 
+});

references/svelte-example/svelte.config.js

@@ -0,0 +1,28 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter(),
+		alias: {
+			$trigger: 'src/trigger',
+			'$jobs/*': 'src/jobs/*',
+			'@trigger.dev/sveltekit': '../../packages/sveltekit/src/index',
+			'@trigger.dev/sveltekit/*': '../../packages/sveltekit/src/*',
+			'@trigger.dev/sdk': '../../packages/trigger-sdk/src/index',
+			'@trigger.dev/sdk/*': '../../packages/trigger-sdk/src/*',
+			'@trigger.dev/core': '../../packages/core/src/index',
+			'@trigger.dev/core/*': '../../packages/core/src/*'
+		}
+	}
+};
+
+export default config;

references/svelte-example/tsconfig.json

@@ -0,0 +1,25 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"lib": ["DOM", "DOM.Iterable", "ES2019"],
+		"isolatedModules": true,
+		"esModuleInterop": true,
+		"ignoreDeprecations": "5.0",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"target": "ES2019",
+		"strict": true,
+		"allowJs": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": ".",
+		"paths": {
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"],
+			"$trigger": ["src/trigger"],
+			"$jobs/*": ["src/jobs/*"]
+		}
+	},
+	"include": ["src/**/*", "src/node_modules", ".svelte-kit/ambient.d.ts"], // see last element
+
+	"exclude": ["node_modules"]
+}

references/svelte-example/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});