feat(devtools): add devtools

Author: jog1t

pnpm-lock.yaml

@@ -0,0 +1,28 @@
+# RivetKit DevTools
+
+
+## Contributing
+
+To contribute to the RivetKit DevTools package, please follow these steps:
+
+1. Set up assets server for the `dist` folder:
+    ```bash
+    pnpm dlx serve dist
+    ```
+
+2. Set your `CUSTOM_RIVETKIT_DEVTOOLS_URL` environment variable to point to the assets server (default is `http://localhost:3000`):
+    ```bash
+    export CUSTOM_RIVETKIT_DEVTOOLS_URL=http://localhost:5000
+    ```
+
+    This will ensure that the RivetKit will use local devtool assets instead of fetching them from the CDN.
+
+3. In another terminal, run the development build:
+    ```bash
+    pnpm dev
+    ```
+
+    or run the production build:
+    ```bash
+    pnpm build
+    ```

rivetkit-typescript/packages/devtools/README.md

@@ -0,0 +1,40 @@
+{
+	"name": "@rivetkit/devtools",
+	"private": true,
+	"version": "2.0.24-rc.1",
+	"description": "RivetKit DevTools - A set of development tools for RivetKit",
+	"license": "Apache-2.0",
+	"keywords": [
+		"rivetkit"
+	],
+	"sideEffects": [
+		"./dist/chunk-*.js",
+		"./dist/chunk-*.cjs"
+	],
+	"files": [
+		"dist",
+		"package.json"
+	],
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/mod.d.mts",
+				"default": "./dist/mod.mjs"
+			},
+			"require": {
+				"types": "./dist/mod.d.ts",
+				"default": "./dist/mod.js"
+			}
+		}
+	},
+	"scripts": {
+		"build": "tsup src/mod.ts",
+		"check-types": "tsc --noEmit"
+	},
+	"devDependencies": {
+		"tsup": "^8.4.0",
+		"typescript": "^5.5.2",
+		"rivetkit": "workspace:*"
+	},
+	"stableVersion": "0.8.0"
+}

rivetkit-typescript/packages/devtools/package.json

@@ -0,0 +1,9 @@
+declare module "*.css" {
+	const content: string;
+	export default content;
+}
+
+declare module "*.svg" {
+	const content: string;
+	export default content;
+}

rivetkit-typescript/packages/devtools/src/globals.d.ts

@@ -0,0 +1,52 @@
+import svg from "./icon.svg";
+import styles from "./styles.css";
+
+declare global {
+	interface Window {
+		_rivetkit_devtools_configs?: Array<
+			Parameters<typeof import("rivetkit/client")["createClient"]>[0]
+		>;
+	}
+}
+
+const root = document.createElement("div");
+
+root.id = "rivetkit-devtools";
+const shadow = root.attachShadow({ mode: "open" });
+
+const img = document.createElement("img");
+img.src = svg;
+
+const btn = document.createElement("button");
+btn.appendChild(img);
+
+const style = document.createElement("style");
+style.textContent = styles;
+shadow.appendChild(style);
+shadow.appendChild(btn);
+
+btn.addEventListener("click", () => {
+	const config = window._rivetkit_devtools_configs?.[0];
+	if (!config || typeof config !== "object") {
+		console.error("RivetKit Devtools: No client config found");
+		return;
+	}
+	const url = new URL("https://inspect.rivet.dev/");
+	if (!config.endpoint) {
+		console.error("RivetKit Devtools: No endpoint found in client config");
+		return;
+	}
+	url.searchParams.set("u", config.endpoint);
+	if (config.token) {
+		url.searchParams.set("t", config.token);
+	}
+	if (config.namespace) {
+		url.searchParams.set("ns", config.namespace);
+	}
+	if (config.runnerName) {
+		url.searchParams.set("r", config.runnerName);
+	}
+	window.open(url.toString(), "_blank");
+});
+
+document.body.appendChild(root);

rivetkit-typescript/packages/devtools/src/icon.svg

@@ -0,0 +1,21 @@
+:host {
+    all: initial;
+    position: fixed;
+    bottom: 12px;
+    right: 12px;
+    width: 48px;
+}
+
+button {
+    all: unset;
+    width: 48px;
+    height: 48px;
+    display: block;
+    cursor: pointer;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}

rivetkit-typescript/packages/devtools/src/mod.ts

@@ -0,0 +1,24 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src", "lib"]
+}

rivetkit-typescript/packages/devtools/src/styles.css

@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup";
+import defaultConfig from "../../../tsup.base.ts";
+
+export default defineConfig({
+	...defaultConfig,
+	loader: {
+		".svg": "dataurl",
+		".css": "text",
+	},
+});

rivetkit-typescript/packages/devtools/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"extends": ["//"],
+	"tasks": {
+		"build": {
+			"inputs": [
+				"src/**",
+				"tsconfig.json",
+				"tsup.config.ts",
+				"package.json"
+			],
+			"outputs": ["dist/**"]
+		}
+	}
+}