Vite Inspect Integration + React for Website

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",

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,
 });

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();

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;
+}

packages/core/src/integrations/vite-inspect/vite-inspect.tsx

@@ -0,0 +1,9 @@
+export default function ViteInspect() {
+  return (
+    <div className="h-full w-full divide-y divide-indigo-500 bg-indigo-950 p-4">
+      <div className="flex h-full w-full flex-col gap-2">
+        <iframe src="http://localhost:4321/__inspect/" className="h-full w-full" />
+      </div>
+    </div>
+  );
+}

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(),

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"
   },

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 (
+    <div style={{ border: '3px solid blue', padding: '1rem' }}>
+      <h3>Hi, I am a React Island</h3>
+      <p>
+        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.
+      </p>
+      <button onClick={throwError}>Click me to throw an error</button>
+    </div>
+  );
+}

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
   </Card>
   <Card title="TODO" icon="setting">
-    <button onClick="throw new Error('Houston, we have a problem!')">Throw Error</button>
+    <button onClick="throwError()">Throw Error</button>
   </Card>
   <Card title="TODO" icon="open-book">
-    TODO
+    <ReactIsland client:load />
   </Card>
 </CardGrid>
+