Package svelte

packages/core/package.json

@@ -13,7 +13,7 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/esm/index.js",
       "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
@@ -35,6 +35,7 @@
     "@trigger.dev/tsconfig": "workspace:*",
     "@types/jest": "^29.5.3",
     "@types/node": "16",
+    "esbuild-plugin-polyfill-node": "^0.3.0",
     "jest": "^29.6.2",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.1.1",

packages/core/tsup.config.ts

@@ -1,20 +1,31 @@
 import { defineConfig } from "tsup";
+import { polyfillNode } from "esbuild-plugin-polyfill-node";
 
 export default defineConfig([
   {
     name: "main",
     config: "tsconfig.build.json",
     entry: ["./src/index.ts"],
     outDir: "./dist",
-    platform: "neutral",
-    format: ["cjs"],
+    platform: "node",
+    format: ["cjs", "esm"],
     legacyOutput: true,
     sourcemap: true,
     clean: true,
     bundle: true,
     splitting: false,
     dts: true,
-    external: ["http", "https", "util", "events", "tty", "os", "timers"],
-    esbuildPlugins: [],
+    external: ["http", "https", "util", "events", "tty", "os", "timers" ],
+    esbuildPlugins: [polyfillNode({
+			globals: {
+        global: false,
+        buffer: true,
+        process: false,
+        navigator: false
+      },
+      polyfills: {
+        buffer: true,
+      },
+		}) as any],
   },
 ]);

packages/react/src/events.ts

@@ -15,7 +15,7 @@ export function useEventDetails(eventId: string | undefined): UseEventDetailsRes
 
   return useQuery(
     {
-      queryKey: [`triggerdotdev-event-${eventId}`],
+      queryKey: [`triggerdotdev-eventdetails-${eventId}`],
       queryFn: async () => {
         return await zodfetch(GetEventSchema, `${apiUrl}/api/v1/events/${eventId}`, {
           method: "GET",

packages/react/src/runs.ts

@@ -28,7 +28,7 @@ export function useRunDetails(
 
   return useQuery(
     {
-      queryKey: [`triggerdotdev-run-${runId}`],
+      queryKey: [`triggerdotdev-details-${runId}`],
       queryFn: async () => {
         return await zodfetch(GetRunSchema, url, {
           method: "GET",

packages/react/src/statuses.ts

@@ -47,7 +47,7 @@ export function useRunStatuses(
 
   const queryResult = useQuery(
     {
-      queryKey: [`triggerdotdev-run-${runId}`],
+      queryKey: [`triggerdotdev-runstatuses-${runId}`],
       queryFn: async () => {
         return await zodfetch(GetRunStatusesSchema, `${apiUrl}/api/v1/runs/${runId}/statuses`, {
           method: "GET",

packages/svelte/.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

packages/svelte/.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'
+			}
+		}
+	]
+};

packages/svelte/.gitignore

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

packages/svelte/.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

packages/svelte/.prettierrc

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

packages/svelte/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## 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
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase 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.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

packages/svelte/package.json

@@ -0,0 +1,64 @@
+{
+	"name": "@trigger.dev/svelte",
+	"version": "2.1.9",
+	"description": "Trigger.dev Svelte SDK",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "svelte-package --input ./src --output ./build",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"type": "module",
+	"types": "dist/trigger.d.ts",
+	"module": "dist/trigger.js",
+	"exports": {
+		".": {
+			"types": "./dist/trigger.d.ts",
+			"import": "./dist/trigger.js",
+			"svelte": "./dist/trigger.js",
+			"default": "./dist/trigger.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/package": "^2.0.0",
+		"@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",
+		"publint": "^0.1.9",
+		"svelte": "^4.2.1",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2",
+		"vitest": "^0.34.0"
+	},
+	"dependencies": {
+		"@tanstack/svelte-query": "^4.33.0",
+		"@trigger.dev/core": "workspace:*",
+		"@trigger.dev/sdk": "workspace:*",
+		"esm-env": "^1.0.0",
+		"zod": "3.22.3"
+	}
+}

packages/svelte/src/app.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="@sveltejs/kit" />
+
+// 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 {}
+	}
+}
+declare module '*.svelte'
+export {};

packages/svelte/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>

packages/svelte/src/lib/TriggerProvider.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
+	import { setTriggerContext } from './providerContext.js';
+
+	export let publicApiKey: string;
+	export let apiUrl: string | undefined = undefined;
+
+	setTriggerContext({
+		publicApiKey,
+		apiUrl
+	});
+	const publicApiKeyStartsWith = 'pk_';
+	const privateApiKeyStartsWith = 'tr_';
+
+	// SvelteKit defaults to rendering routes with SSR.
+	// Because of this, you need to disable the query on the server. Otherwise, your query will continue executing on the server asynchronously,
+	//  even after the HTML has been sent to the client.
+	//https://tanstack.com/query/latest/docs/svelte/ssr
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				enabled: BROWSER
+			}
+		}
+	});
+
+	if (!publicApiKey) {
+		throw new Error('TriggerProvider requires `publicApiKey` to be set with a value.');
+	}
+
+	$: {
+		verifyApiKey(publicApiKey);
+	}
+
+	function verifyApiKey(apiKey: string) {
+		if (apiKey.startsWith(privateApiKeyStartsWith)) {
+			throw new Error(
+				`You are using a private API key, you should not do this because the value is visible to the client.`
+			);
+		}
+
+		if (!apiKey.startsWith(publicApiKeyStartsWith)) {
+			console.error(
+				`TriggerProvider publicApiKey wasn't in the correct format. Should be ${publicApiKeyStartsWith}...`
+			);
+		}
+	}
+
+
+
+</script>
+
+<div>
+	<QueryClientProvider client={queryClient}>
+		<slot />
+	</QueryClientProvider>
+</div>