diff --git a/package.json b/package.json
index 1cb57299..a72d2f55 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"private": true,
"type": "module",
"scripts": {
- "dev:core": "pnpm --filter core sidecar dev",
+ "dev:core": "pnpm --filter core dev",
"dev:website": "pnpm --filter spotlight-website dev",
"dev:playground": "pnpm --filter spotlight-astro-playground dev",
"build": "pnpm --filter=!spotlight-astro-playground -r run build",
diff --git a/packages/astro/src/snippets.ts b/packages/astro/src/snippets.ts
index d77b3b63..90f1d6d7 100644
--- a/packages/astro/src/snippets.ts
+++ b/packages/astro/src/snippets.ts
@@ -1,10 +1,11 @@
export const SPOTLIGHT_CLIENT_INIT = `
-import { init, sentry, console } from '@spotlightjs/astro';
+import { init, sentry, console, viteInspect } from '@spotlightjs/astro';
init({
integrations: [
sentry(),
- console()
+ console(),
+ viteInspect()
],
showTriggerButton: false,
});
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
index 91bf4990..9f29ee8c 100644
--- a/packages/core/src/index.tsx
+++ b/packages/core/src/index.tsx
@@ -9,6 +9,7 @@ import { initIntegrations } from './integrations/integration.ts';
export { default as console } from './integrations/console/index.ts';
export { default as sentry } from './integrations/sentry/index.ts';
+export { default as viteInspect } from './integrations/vite-inspect/index.ts';
function createStyleSheet(styles: string) {
const sheet = new CSSStyleSheet();
diff --git a/packages/core/src/integrations/vite-inspect/index.ts b/packages/core/src/integrations/vite-inspect/index.ts
new file mode 100644
index 00000000..479ae090
--- /dev/null
+++ b/packages/core/src/integrations/vite-inspect/index.ts
@@ -0,0 +1,17 @@
+import type { Integration } from '../integration';
+import ViteInspect from './vite-inspect';
+
+export default function consoleIntegration() {
+ return {
+ name: 'vite-inspect',
+ tabs: () => [
+ {
+ id: 'vite-inspect',
+ title: 'Vite Inspect',
+ content: ViteInspect,
+ },
+ ],
+
+ setup: () => {},
+ } satisfies Integration;
+}
diff --git a/packages/core/src/integrations/vite-inspect/vite-inspect.tsx b/packages/core/src/integrations/vite-inspect/vite-inspect.tsx
new file mode 100644
index 00000000..4f7270df
--- /dev/null
+++ b/packages/core/src/integrations/vite-inspect/vite-inspect.tsx
@@ -0,0 +1,9 @@
+export default function ViteInspect() {
+ return (
+
+ );
+}
diff --git a/packages/website/astro.config.mjs b/packages/website/astro.config.mjs
index 2228a3a8..8ce80fd8 100644
--- a/packages/website/astro.config.mjs
+++ b/packages/website/astro.config.mjs
@@ -1,16 +1,16 @@
import starlight from '@astrojs/starlight';
import tailwind from '@astrojs/tailwind';
+import vercelStatic from '@astrojs/vercel/static';
import sentry from '@sentry/astro';
import spotlight from '@spotlightjs/astro';
import { defineConfig } from 'astro/config';
import Inspect from 'vite-plugin-inspect';
-import vercelStatic from '@astrojs/vercel/static';
+import react from '@astrojs/react';
// https://astro.build/config
export default defineConfig({
site: 'https://spotlightjs.com',
- // base: '/spotlight',
vite: {
plugins: [
Inspect({
@@ -89,6 +89,7 @@ export default defineConfig({
tailwind({
applyBaseStyles: false,
}),
+ react(),
],
output: 'static',
adapter: vercelStatic(),
diff --git a/packages/website/package.json b/packages/website/package.json
index 201670e9..782d4f9c 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -12,13 +12,18 @@
"astro": "astro"
},
"dependencies": {
+ "@astrojs/react": "^3.0.5",
"@astrojs/starlight": "^0.11.2",
"@astrojs/starlight-tailwind": "^2.0.0",
"@astrojs/tailwind": "^5.0.2",
"@astrojs/vercel": "^5.2.0",
"@fontsource/raleway": "^5.0.8",
"@sentry/astro": "^7.80.0",
+ "@types/react": "^18.0.21",
+ "@types/react-dom": "^18.0.6",
"astro": "^3.5.4",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0",
"sharp": "^0.32.6",
"tailwindcss": "^3.0.24"
},
diff --git a/packages/website/src/content/docs/error.tsx b/packages/website/src/content/docs/error.tsx
new file mode 100644
index 00000000..464fede2
--- /dev/null
+++ b/packages/website/src/content/docs/error.tsx
@@ -0,0 +1,18 @@
+export default function ReactIsland() {
+ const throwError = () => {
+ throw new Error('Error thrown from ReactIsland.tsx');
+ };
+
+ return (
+
+
Hi, I am a React Island
+
+ Nostrud dolore ad voluptate duis proident ullamco duis laboris mollit. Exercitation esse laborum id do ullamco
+ tempor id fugiat. Id commodo anim ad dolore dolore irure officia elit est Lorem magna quis. Tempor ipsum magna
+ labore quis Lorem commodo mollit ipsum labore sint aliqua. Est occaecat amet proident adipisicing quis aliquip
+ fugiat commodo dolor. Consectetur cupidatat cillum occaecat mollit laborum voluptate ea.
+
+
Click me to throw an error
+
+ );
+}
diff --git a/packages/website/src/content/docs/index.mdx b/packages/website/src/content/docs/index.mdx
index 6029f179..9e37f620 100644
--- a/packages/website/src/content/docs/index.mdx
+++ b/packages/website/src/content/docs/index.mdx
@@ -13,9 +13,12 @@ hero:
variant: primary
- text: Read the Spotlight docs
link: /reference/configuration/
+
+
---
import { Card, CardGrid } from '@astrojs/starlight/components';
+import ReactIsland from './error'
## Next steps
@@ -27,9 +30,10 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
TODO
- Throw Error
+ Throw Error
- TODO
+
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c67e88d4..632b70bd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -212,6 +212,9 @@ importers:
packages/website:
dependencies:
+ '@astrojs/react':
+ specifier: ^3.0.5
+ version: 3.0.5(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(vite@4.5.0)
'@astrojs/starlight':
specifier: ^0.11.2
version: 0.11.2(astro@3.5.4)
@@ -229,10 +232,22 @@ importers:
version: 5.0.8
'@sentry/astro':
specifier: ^7.80.0
- version: 7.80.0(astro@3.5.4)
+ version: link:../../../sentry-javascript/packages/astro
+ '@types/react':
+ specifier: ^18.0.21
+ version: 18.2.37
+ '@types/react-dom':
+ specifier: ^18.0.6
+ version: 18.2.15
astro:
specifier: ^3.5.4
version: 3.5.4(typescript@5.2.2)
+ react:
+ specifier: ^18.0.0
+ version: 18.2.0
+ react-dom:
+ specifier: ^18.0.0
+ version: 18.2.0(react@18.2.0)
sharp:
specifier: ^0.32.6
version: 0.32.6
@@ -1950,25 +1965,6 @@ packages:
'@sentry/utils': 7.80.1
dev: false
- /@sentry/astro@7.80.0(astro@3.5.4):
- resolution:
- { integrity: sha512-Ogtvdhw1+fpRWIqLgsAwhIxl7ODVwUXGlZUQnO5PD/ruxlrzY5ieCOdqO6t6X/iI/c0UtBS7PXqQfzNftviiIg== }
- engines: { node: '>=18.14.1' }
- peerDependencies:
- astro: 3.x
- dependencies:
- '@sentry/browser': 7.80.0
- '@sentry/core': 7.80.0
- '@sentry/node': 7.80.0
- '@sentry/types': 7.80.0
- '@sentry/utils': 7.80.0
- '@sentry/vite-plugin': 2.9.0
- astro: 3.5.4(typescript@5.2.2)
- transitivePeerDependencies:
- - encoding
- - supports-color
- dev: false
-
/@sentry/astro@7.80.1(astro@3.5.5):
resolution:
{ integrity: sha512-aKV8V5b8H5EY5JtCT0uZyy8D/Ne2RqNUqzQZbJb/HT8PuRvMUmWH1RJAb6jCUtH0GObgFZLoSP79xglA9IiZGA== }
@@ -1988,18 +1984,6 @@ packages:
- supports-color
dev: false
- /@sentry/browser@7.80.0:
- resolution:
- { integrity: sha512-Ngwjc+yyf/aH5q7iQM1LeDNlhM1Ilt4ZLUogTghZR/guwNWmCtk3OHcjOLz7fxBBj9wGFUc2pHPyeYM6bQhrEw== }
- engines: { node: '>=8' }
- dependencies:
- '@sentry-internal/tracing': 7.80.0
- '@sentry/core': 7.80.0
- '@sentry/replay': 7.80.0
- '@sentry/types': 7.80.0
- '@sentry/utils': 7.80.0
- dev: false
-
/@sentry/browser@7.80.1:
resolution:
{ integrity: sha512-1dPR6vPJ9vOTzgXff9HGheb178XeEv5hyjBNhCO1f6rjCgnVj99XGNZIgO1Ee1ALJbqlfPWaeV+uSWbbcmgJMA== }
@@ -2093,17 +2077,6 @@ packages:
- supports-color
dev: false
- /@sentry/replay@7.80.0:
- resolution:
- { integrity: sha512-wWnpuJq3OaDLp1LutE4oxWXnau04fvwuzBjuaFvOXOV+pB/kn+pDPuVOC5+FH/RMRZ5ftwX5+dF6fojfcLVGCg== }
- engines: { node: '>=12' }
- dependencies:
- '@sentry-internal/tracing': 7.80.0
- '@sentry/core': 7.80.0
- '@sentry/types': 7.80.0
- '@sentry/utils': 7.80.0
- dev: false
-
/@sentry/replay@7.80.1:
resolution:
{ integrity: sha512-yjpftIyybQeWD2i0Nd7C96tZwjNbSMRW515EL9jwlNxYbQtGtMs0HavP9Y7uQvQrzwSHY0Wp+ooe9PMuvzqbHw== }
@@ -2542,7 +2515,7 @@ packages:
resolution:
{ integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA== }
dependencies:
- '@types/react': 18.2.15
+ '@types/react': 18.2.37
dev: true
/@types/react@18.2.15:
@@ -2552,6 +2525,7 @@ packages:
'@types/prop-types': 15.7.9
'@types/scheduler': 0.16.5
csstype: 3.1.2
+ dev: true
/@types/react@18.2.37:
resolution:
@@ -2560,7 +2534,6 @@ packages:
'@types/prop-types': 15.7.9
'@types/scheduler': 0.16.5
csstype: 3.1.2
- dev: false
/@types/sax@1.2.6:
resolution:
@@ -7811,7 +7784,7 @@ packages:
react: '*'
dependencies:
'@types/node': 18.18.8
- '@types/react': 18.2.15
+ '@types/react': 18.2.37
react: 18.2.0
dev: false