Skip to content

Commit f0d13f9

Browse files
jog1tjog1t
committed
feat(devtools): add devtools
1 parent d7ceb84 commit f0d13f9

File tree

16 files changed

+373
-1
lines changed

16 files changed

+373
-1
lines changed

‎pnpm-lock.yaml‎

Lines changed: 41 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎rivetkit-typescript/packages/devtools/README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# RivetKit DevTools
2+
3+
4+
## Contributing
5+
6+
To contribute to the RivetKit DevTools package, please follow these steps:
7+
8+
1. Set up assets server for the `dist` folder:
9+
```bash
10+
pnpm dlx serve dist
11+
```
12+
13+
2. Set your `CUSTOM_RIVETKIT_DEVTOOLS_URL` environment variable to point to the assets server (default is `http://localhost:3000`):
14+
```bash
15+
export CUSTOM_RIVETKIT_DEVTOOLS_URL=http://localhost:5000
16+
```
17+
18+
This will ensure that the RivetKit will use local devtool assets instead of fetching them from the CDN.
19+
20+
3. In another terminal, run the development build:
21+
```bash
22+
pnpm dev
23+
```
24+
25+
or run the production build:
26+
```bash
27+
pnpm build
28+
```

‎rivetkit-typescript/packages/devtools/package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "@rivetkit/devtools",
3+
"private": true,
4+
"version": "2.0.24-rc.1",
5+
"description": "RivetKit DevTools - A set of development tools for RivetKit",
6+
"license": "Apache-2.0",
7+
"keywords": [
8+
"rivetkit"
9+
],
10+
"sideEffects": [
11+
"./dist/chunk-*.js",
12+
"./dist/chunk-*.cjs"
13+
],
14+
"files": [
15+
"dist",
16+
"package.json"
17+
],
18+
"exports": {
19+
".": {
20+
"import": {
21+
"types": "./dist/mod.d.mts",
22+
"default": "./dist/mod.mjs"
23+
},
24+
"require": {
25+
"types": "./dist/mod.d.ts",
26+
"default": "./dist/mod.js"
27+
}
28+
}
29+
},
30+
"scripts": {
31+
"build": "tsup src/mod.ts",
32+
"check-types": "tsc --noEmit"
33+
},
34+
"devDependencies": {
35+
"tsup": "^8.4.0",
36+
"typescript": "^5.5.2",
37+
"rivetkit": "workspace:*"
38+
},
39+
"stableVersion": "0.8.0"
40+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module "*.css" {
2+
const content: string;
3+
export default content;
4+
}
5+
6+
declare module "*.svg" {
7+
const content: string;
8+
export default content;
9+
}

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

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import svg from "./icon.svg";
2+
import styles from "./styles.css";
3+
4+
declare global {
5+
interface Window {
6+
_rivetkit_devtools_configs?: Array<
7+
Parameters<typeof import("rivetkit/client")["createClient"]>[0]
8+
>;
9+
}
10+
}
11+
12+
const root = document.createElement("div");
13+
14+
root.id = "rivetkit-devtools";
15+
const shadow = root.attachShadow({ mode: "open" });
16+
17+
const div = document.createElement("div");
18+
19+
const img = document.createElement("img");
20+
img.src = svg;
21+
div.appendChild(img);
22+
23+
const btn = document.createElement("button");
24+
btn.appendChild(div);
25+
26+
const tooltip = document.createElement("div");
27+
tooltip.className = "tooltip";
28+
tooltip.textContent = "Open Inspector";
29+
30+
const style = document.createElement("style");
31+
style.textContent = styles;
32+
shadow.appendChild(style);
33+
shadow.appendChild(btn);
34+
shadow.appendChild(tooltip);
35+
36+
btn.addEventListener("mouseenter", () => {
37+
tooltip.classList.add("visible");
38+
});
39+
40+
btn.addEventListener("mouseleave", () => {
41+
tooltip.classList.remove("visible");
42+
});
43+
44+
btn.addEventListener("click", () => {
45+
const config = window._rivetkit_devtools_configs?.[0];
46+
if (!config || typeof config !== "object") {
47+
console.error("RivetKit Devtools: No client config found");
48+
return;
49+
}
50+
const url = new URL("https://inspect.rivet.dev/");
51+
if (!config.endpoint) {
52+
console.error("RivetKit Devtools: No endpoint found in client config");
53+
return;
54+
}
55+
url.searchParams.set("u", config.endpoint);
56+
if (config.token) {
57+
url.searchParams.set("t", config.token);
58+
}
59+
if (config.namespace) {
60+
url.searchParams.set("ns", config.namespace);
61+
}
62+
if (config.runnerName) {
63+
url.searchParams.set("r", config.runnerName);
64+
}
65+
window.open(url.toString(), "_blank");
66+
});
67+
68+
document.body.appendChild(root);

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
:host {
2+
all: initial;
3+
position: fixed;
4+
bottom: 12px;
5+
right: 25px;
6+
bottom: 25px;
7+
z-index: 2147483647;
8+
width: 48px;
9+
height: 48px;
10+
}
11+
12+
:host * {
13+
box-sizing: border-box;
14+
}
15+
16+
button {
17+
all: unset;
18+
width: 100%;
19+
height: 100%;
20+
cursor: pointer;
21+
border-radius: 50%;
22+
border: 1px solid #171717;
23+
background-color: #09090b;
24+
transition: background-color .3s ease;
25+
}
26+
27+
button:hover {
28+
background-color: #0e0e11;
29+
}
30+
31+
button div {
32+
width: 100%;
33+
height: 100%;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
border-radius: 50%;
38+
border: 1px solid #292525;
39+
}
40+
41+
img {
42+
width: 28px;
43+
height: 28px;
44+
object-fit: contain;
45+
}
46+
47+
.tooltip {
48+
position: absolute;
49+
right: 60px;
50+
bottom: 50%;
51+
transform: translateY(50%);
52+
background-color: #09090b;
53+
color: #fafafa;
54+
padding: 6px 12px;
55+
border-radius: 6px;
56+
font-size: 12px;
57+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
58+
white-space: nowrap;
59+
pointer-events: none;
60+
opacity: 0;
61+
transition: opacity .3s ease;
62+
border: 1px solid #27272a;
63+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
64+
}
65+
66+
.tooltip::after {
67+
content: "";
68+
position: absolute;
69+
right: -5px;
70+
top: 50%;
71+
transform: translateY(-50%) rotate(45deg);
72+
width: 8px;
73+
height: 8px;
74+
background-color: #09090b;
75+
border-right: 1px solid #27272a;
76+
border-top: 1px solid #27272a;
77+
}
78+
79+
.tooltip.visible {
80+
opacity: 1;
81+
}

‎rivetkit-typescript/packages/devtools/tsconfig.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"useDefineForClassFields": true,
5+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
6+
"module": "ESNext",
7+
"skipLibCheck": true,
8+
9+
/* Bundler mode */
10+
"moduleResolution": "bundler",
11+
"allowImportingTsExtensions": true,
12+
"resolveJsonModule": true,
13+
"isolatedModules": true,
14+
"noEmit": true,
15+
"jsx": "react-jsx",
16+
17+
/* Linting */
18+
"strict": true,
19+
"noUnusedLocals": true,
20+
"noUnusedParameters": true,
21+
"noFallthroughCasesInSwitch": true
22+
},
23+
"include": ["src", "lib"]
24+
}

‎rivetkit-typescript/packages/devtools/tsup.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineConfig } from "tsup";
2+
import defaultConfig from "../../../tsup.base.ts";
3+
4+
export default defineConfig({
5+
...defaultConfig,
6+
loader: {
7+
".svg": "dataurl",
8+
".css": "text",
9+
},
10+
});

‎rivetkit-typescript/packages/devtools/turbo.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"$schema": "https://turbo.build/schema.json",
3+
"extends": ["//"],
4+
"tasks": {
5+
"build": {
6+
"inputs": [
7+
"src/**",
8+
"tsconfig.json",
9+
"tsup.config.ts",
10+
"package.json"
11+
],
12+
"outputs": ["dist/**"]
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)