build: Move package from spotlight to core (#34)

To be more consistent, naming wise

CONTRIBUTING.md

@@ -11,7 +11,7 @@ If you want to locally open two terminals
 
 One is for building & watching Spotlight locally.
 
-1. `cd packages/spotlight`
+1. `cd packages/core`
 2. `pnpm dev`
 
 The other is to run the website locally:

packages/spotlight/postcss.config.js → packages/core/postcss.config.js

@@ -3,4 +3,4 @@ export default {
  tailwindcss: {},
  autoprefixer: {},
  },
-}
+};

packages/spotlight/src/components/Debugger.tsx → packages/core/src/components/Debugger.tsx

@@ -1,8 +1,8 @@
-import useKeyPress from '~/lib/useKeyPress';
-import Overview from './Overview';
-import { useNavigation } from '~/lib/useNavigation';
 import { useEffect } from 'react';
 import classNames from '~/lib/classNames';
+import useKeyPress from '~/lib/useKeyPress';
+import { useNavigation } from '~/lib/useNavigation';
+import Overview from './Overview';
 
 export default function Debugger({
  isOpen,
@@ -36,27 +36,27 @@ export default function Debugger({
  display: isOpen ? undefined : 'none',
  }}
  >
- <div className="flex items-center text-indigo-200 bg-indigo-950 px-6 py-4 gap-x-2">
- <h1 className="flex-1 flex items-end gap-x-1 font-raleway opacity-80">
- <div className="uppercase font-light tracking-widest text-3xl">Spotlight</div>
- <div className="flex gap-x-1 text-sm items-center text-indigo-300">
+ <div className="flex items-center gap-x-2 bg-indigo-950 px-6 py-4 text-indigo-200">
+ <h1 className="font-raleway flex flex-1 items-end gap-x-1 opacity-80">
+ <div className="text-3xl font-light uppercase tracking-widest">Spotlight</div>
+ <div className="flex items-center gap-x-1 text-sm text-indigo-300">
  by{' '}
- <a href="https://sentry.io" className="hover:underline font-semibold">
+ <a href="https://sentry.io" className="font-semibold hover:underline">
  Sentry
  </a>
- <div className={classNames('pl-2 ml-2 flex items-center gap-x-2 text-xs', isOnline ? '' : 'text-red-400')}>
+ <div className={classNames('ml-2 flex items-center gap-x-2 pl-2 text-xs', isOnline ? '' : 'text-red-400')}>
  <div
  className={classNames(
- ' rounded-full w-2 h-2 block',
- isOnline ? 'bg-green-400' : 'bg-red-400 animate-pulse',
+ ' block h-2 w-2 rounded-full',
+ isOnline ? 'bg-green-400' : 'animate-pulse bg-red-400',
  )}
  />
  {isOnline ? 'Connected to Sidecar' : 'Not connected to Sidecar'}
  </div>
  </div>
  </h1>
  <button
- className="cursor-pointer px-3 py-1 -my-1 text-2xl -mr-3 rounded bg-indigo-950 hover:bg-black font-mono"
+ className="-my-1 -mr-3 cursor-pointer rounded bg-indigo-950 px-3 py-1 font-mono text-2xl hover:bg-black"
  onClick={() => {
  setOpen(false);
  }}

packages/spotlight/src/index.css → packages/core/src/index.css

@@ -3,20 +3,20 @@
 @tailwind utilities;
 
 .sentry-trigger {
- @apply fixed border font-medium right-2 bottom-2 px-3 py-2 rounded inline-flex gap-x-2 items-center justify-center opacity-80 hover:opacity-100;
- @apply border-indigo-950 bg-indigo-900 text-white uppercase font-light tracking-widest font-raleway text-sm;
+ @apply fixed bottom-2 right-2 inline-flex items-center justify-center gap-x-2 rounded border px-3 py-2 font-medium opacity-80 hover:opacity-100;
+ @apply font-raleway border-indigo-950 bg-indigo-900 text-sm font-light uppercase tracking-widest text-white;
 
  z-index: 2147483647;
  cursor: pointer;
  /* transform: rotate(-90deg) translateY(16px); */
 }
 
 .sentry-trigger span {
- @apply rounded py-0.5 px-1.5 text-xs font-medium font-sans;
+ @apply rounded px-1.5 py-0.5 font-sans text-xs font-medium;
 }
 
 .sentry-debugger {
- @apply fixed inset-0 h-screen w-screen bg-indigo-900 text-white overflow-auto flex flex-col font-sans;
+ @apply fixed inset-0 flex h-screen w-screen flex-col overflow-auto bg-indigo-900 font-sans text-white;
 
  z-index: 2147483647;
 }
@@ -79,7 +79,7 @@ ul.tree ul.tree > li:before {
  margin-top: -2px;
  height: 15px;
  width: 12px;
- content: "";
+ content: '';
  display: inline-block;
  margin-left: -16px;
 }
@@ -89,23 +89,23 @@ ul.tree li:last-child:before {
 }
 
 .tree .node {
- @apply w-[65%] flex items-center gap-x-1 py-1 overflow-auto;
+ @apply flex w-[65%] items-center gap-x-1 overflow-auto py-1;
 }
 
 .tree .waterfall {
- @apply absolute left-[65%] right-0 h-7 bg-indigo-950 border-l border-l-indigo-800 py-1;
+ @apply absolute left-[65%] right-0 h-7 border-l border-l-indigo-800 bg-indigo-950 py-1;
 }
 
 .table-values {
- @apply border-collapse text-sm bg-indigo-900;
+ @apply border-collapse bg-indigo-900 text-sm;
 }
 
 .table-values tbody th {
- @apply font-mono px-2 py-1 text-right font-normal text-indigo-300 w-1/12 border-y border-indigo-950;
+ @apply w-1/12 border-y border-indigo-950 px-2 py-1 text-right font-mono font-normal text-indigo-300;
 }
 
 .table-values tbody td {
- @apply px-2 py-1 border-y border-indigo-950;
+ @apply border-y border-indigo-950 px-2 py-1;
 }
 
 /* 

packages/spotlight/src/index.tsx → packages/core/src/index.tsx

@@ -3,12 +3,12 @@ import ReactDOM from 'react-dom/client';
 import fontStyles from '@fontsource/raleway/index.css?inline';
 
 import App from './App.tsx';
-import type { Integration } from './integrations/integration';
-import { initIntegrations } from './integrations/integration';
 import globalStyles from './index.css?inline';
+import type { Integration } from './integrations/integration.ts';
+import { initIntegrations } from './integrations/integration.ts';
 
-export { default as sentry } from './integrations/sentry';
-export { default as console } from './integrations/console';
+export { default as console } from './integrations/console/index.ts';
+export { default as sentry } from './integrations/sentry/index.ts';
 
 function createStyleSheet(styles: string) {
  const sheet = new CSSStyleSheet();

packages/spotlight/src/integrations/console/console-tab.tsx → packages/core/src/integrations/console/console-tab.tsx

@@ -9,13 +9,13 @@ export default function ConsoleTab({ integrationData }: Props) {
 
  return (
  <div className="divide-y divide-indigo-500 bg-indigo-950 p-4">
- <h1 className="text-xl mb-2">Console Logs</h1>
+ <h1 className="mb-2 text-xl">Console Logs</h1>
  <div className="flex flex-col gap-2">
  {messages.map((message, index) => {
  return (
- <div key={index} className="py-4 bg-indigo-500 pl-4">
- <span className="bg-indigo-600 font-bold p-2">{message.type.toUpperCase()}</span>
- <span className="font-mono ml-4">{message.msg}</span>
+ <div key={index} className="bg-indigo-500 py-4 pl-4">
+ <span className="bg-indigo-600 p-2 font-bold">{message.type.toUpperCase()}</span>
+ <span className="ml-4 font-mono">{message.msg}</span>
  </div>
  );
  })}

packages/spotlight/src/integrations/sentry/components/EventBreadcrumbs.tsx → packages/core/src/integrations/sentry/components/EventBreadcrumbs.tsx

@@ -10,7 +10,7 @@ const EXAMPLE_BREADCRUMB = `Sentry.addBreadcrumb({
 export default function EventBreadcrumbs({ event }: { event: SentryEvent }) {
  if (!event.breadcrumbs || !event.breadcrumbs.values.length) {
  return (
- <div className="px-6 space-y-4">
+ <div className="space-y-4 px-6">
  <div className="text-indigo-300">
  No breadcrumbs available for this event. Try adding some to make debugging easier.
  </div>
@@ -19,14 +19,14 @@ export default function EventBreadcrumbs({ event }: { event: SentryEvent }) {
  );
  }
  return (
- <div className="space-y-2 divide-y divide-indigo-800 -mx-2">
+ <div className="-mx-2 space-y-2 divide-y divide-indigo-800">
  {event.breadcrumbs.values.map((crumb, crumbIdx) => {
  return (
  <div key={crumbIdx} className="flex items-center p-2">
  <div className="w-32 text-indigo-300">
  <Time date={crumb.timestamp} />
  </div>
- <div className="w-32 text-indigo-300 truncate">{crumb.category}</div>
+ <div className="w-32 truncate text-indigo-300">{crumb.category}</div>
  <div className="flex-1 font-mono">{crumb.message}</div>
  </div>
  );

packages/spotlight/src/integrations/sentry/components/EventContexts.tsx → packages/core/src/integrations/sentry/components/EventContexts.tsx

@@ -10,7 +10,7 @@ export default function EventContexts({ event }: { event: SentryEvent }) {
  const contexts = { extra: event.extra, ...event.contexts };
  if (!contexts || !Object.values(contexts).find(v => !!v)) {
  return (
- <div className="px-6 space-y-4">
+ <div className="space-y-4 px-6">
  <div className="text-indigo-300">
  No context available for this event. Try adding some to make debugging easier.
  </div>
@@ -30,8 +30,8 @@ export default function EventContexts({ event }: { event: SentryEvent }) {
  {Object.entries(ctxValues).map(([key, value]) => {
  return (
  <tr key={key}>
- <th className="w-1/12 text-left text-indigo-300 font-normal font-mono pr-4 py-0.5">
- <div className="truncate w-full">{key}</div>
+ <th className="w-1/12 py-0.5 pr-4 text-left font-mono font-normal text-indigo-300">
+ <div className="w-full truncate">{key}</div>
  </th>
  <td className="py-0.5">
  <pre className="whitespace-nowrap font-mono">{JSON.stringify(value, undefined, 2)}</pre>

packages/spotlight/src/integrations/sentry/components/EventList.tsx → packages/core/src/integrations/sentry/components/EventList.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import { SentryEvent } from '~/types';
-import { useSentryEvents } from './../data/useSentryEvents';
+import { useSentryEvents } from '../data/useSentryEvents';
 import { ErrorSummary } from './Events/Error';
 import PlatformIcon from './PlatformIcon';
 import TimeSince from './TimeSince';

packages/spotlight/src/integrations/sentry/components/Events/Error.tsx → packages/core/src/integrations/sentry/components/Events/Error.tsx

@@ -15,7 +15,7 @@ export function ErrorSummary({ event }: { event: SentryErrorEvent }) {
  const values = 'values' in event.exception ? event.exception.values : [event.exception.value];
 
  return (
- <div className="font-mono space-y-4">
+ <div className="space-y-4 font-mono">
  <h3 className="flex flex-col">
  <strong className="text-xl">{values[0].type}</strong>
  <span className="">{values[0].value}</span>
@@ -32,7 +32,7 @@ export default function Error({ event }: { event: SentryErrorEvent }) {
  <ol className="space-y-4">
  {values.map((value, valueIdx) => {
  return (
- <li key={valueIdx} className="font-mono space-y-4">
+ <li key={valueIdx} className="space-y-4 font-mono">
  <h3 className="flex flex-col bg-indigo-950">
  <strong className="text-xl">{value.type}</strong>
  <span className="">{value.value}</span>

packages/spotlight/src/integrations/sentry/components/Events/Error/Frame.tsx → packages/core/src/integrations/sentry/components/Events/Error/Frame.tsx

@@ -12,13 +12,13 @@ function formatFilename(filename: string) {
 
 function ContextLocals({ vars }: { vars: FrameVars }) {
  return (
- <table className="w-full table-values">
+ <table className="table-values w-full">
  <tbody>
  {Object.entries(vars).map(([key, value]) => {
  return (
  <tr key={key}>
  <th>
- <div className="truncate w-full">{key}</div>
+ <div className="w-full truncate">{key}</div>
  </th>
  <td>
  <pre className="whitespace-nowrap font-mono">{value}</pre>
@@ -39,11 +39,11 @@ export default function Frame({ frame, defaultExpand = false }: { frame: EventFr
  <li
  className={classNames(
  hasSource ? 'cursor-pointer hover:bg-indigo-800' : '',
- 'bg-indigo-900 border-b border-indigo-900 last:border-b-0',
+ 'border-b border-indigo-900 bg-indigo-900 last:border-b-0',
  )}
  onClick={() => setOpen(!isOpen)}
  >
- <div className="text-indigo-400 border-b border-indigo-950 px-2 py-1">
+ <div className="border-b border-indigo-950 px-2 py-1 text-indigo-400">
  <span className="text-indigo-100">{formatFilename(frame.filename)}</span> in{' '}
  <span className="text-indigo-100">{frame.function}</span>
  {frame.lineno !== undefined && (
@@ -64,11 +64,11 @@ export default function Frame({ frame, defaultExpand = false }: { frame: EventFr
  return (
  <div className="flex items-center" key={lineNo}>
  {frame.lineno !== undefined && (
- <div className="text-right w-16 text-indigo-300">
+ <div className="w-16 text-right text-indigo-300">
  {frame.lineno - frame.pre_context!.length + lineNo}
  </div>
  )}
- <pre className="whitespace-pre-wrap flex-1  text-indigo-100 px-2 py-1">{line}</pre>
+ <pre className="flex-1 whitespace-pre-wrap px-2 py-1 text-indigo-100">{line}</pre>
  </div>
  );
  })}
@@ -79,18 +79,18 @@ export default function Frame({ frame, defaultExpand = false }: { frame: EventFr
  'flex items-center',
  )}
  >
- {frame.lineno !== undefined && <div className="text-right w-16 text-indigo-300">{frame.lineno}</div>}
- <pre className="whitespace-pre-wrap text-indigo-100 px-2 py-1">{frame.context_line}</pre>
+ {frame.lineno !== undefined && <div className="w-16 text-right text-indigo-300">{frame.lineno}</div>}
+ <pre className="whitespace-pre-wrap px-2 py-1 text-indigo-100">{frame.context_line}</pre>
  </div>
  )}
  {frame.post_context &&
  frame.post_context.map((line, lineNo) => {
  return (
  <div className="flex items-center" key={lineNo}>
  {frame.lineno !== undefined && (
- <div className="text-right w-16 text-indigo-300">{frame.lineno + 1 + lineNo}</div>
+ <div className="w-16 text-right text-indigo-300">{frame.lineno + 1 + lineNo}</div>
  )}
- <pre className="whitespace-pre-wrap flex-1  text-indigo-100 px-2 py-1">{line}</pre>
+ <pre className="flex-1 whitespace-pre-wrap px-2 py-1 text-indigo-100">{line}</pre>
  </div>
  );
  })}

packages/spotlight/src/integrations/sentry/components/PlatformIcon.tsx → packages/core/src/integrations/sentry/components/PlatformIcon.tsx

@@ -1,7 +1,7 @@
-import { ReactComponent as PythonIcon } from 'platformicons/svg/python.svg';
+import { ReactComponent as DefaultIcon } from 'platformicons/svg/default.svg';
 import { ReactComponent as JavaScriptIcon } from 'platformicons/svg/javascript.svg';
 import { ReactComponent as NodeIcon } from 'platformicons/svg/nodejs.svg';
-import { ReactComponent as DefaultIcon } from 'platformicons/svg/default.svg';
+import { ReactComponent as PythonIcon } from 'platformicons/svg/python.svg';
 
 import { ComponentPropsWithoutRef } from 'react';
 

packages/spotlight/src/integrations/sentry/data/sentryDataCache.ts → packages/core/src/integrations/sentry/data/sentryDataCache.ts

@@ -1,7 +1,7 @@
-import { Sdk, SentryEvent, SentryTransactionEvent, Span, Trace } from '~/types';
 import { Envelope } from '@sentry/types';
-import { groupSpans } from '../utils/traces';
 import { generate_uuidv4 } from '~/lib/uuid';
+import { Sdk, SentryEvent, SentryTransactionEvent, Span, Trace } from '~/types';
+import { groupSpans } from '../utils/traces';
 
 function toTimestamp(date: string | number) {
  if (typeof date === 'string') return new Date(date).getTime();

packages/spotlight/src/integrations/sentry/index.ts → packages/core/src/integrations/sentry/index.ts

@@ -5,8 +5,8 @@ import type { Integration } from '../integration';
 
 import sentryDataCache from './data/sentryDataCache';
 import ErrorsTab from './tabs/ErrorsTab';
-import TracesTab from './tabs/TracesTab';
 import SdksTab from './tabs/SdksTab';
+import TracesTab from './tabs/TracesTab';
 
 const HEADER = 'application/x-sentry-envelope';
 

packages/spotlight/src/sidecar.ts → packages/core/src/sidecar.ts

@@ -1,5 +1,5 @@
-import { Integration } from './integrations/integration';
 import React from 'react';
+import { Integration } from './integrations/integration';
 
 export function connectToSidecar(
  sidecarUrl: string,

packages/spotlight/tailwind.config.js → packages/core/tailwind.config.js

@@ -1,17 +1,17 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 /** @type {import('tailwindcss').Config} */
 export default {
- content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
  extend: {
  fontFamily: {
- raleway: ["Raleway", ...defaultTheme.fontFamily.sans],
+ raleway: ['Raleway', ...defaultTheme.fontFamily.sans],
  },
  },
  },
  // only exists for demo
- plugins: [require("@tailwindcss/forms")],
+ plugins: [require('@tailwindcss/forms')],
  // corePlugins: {
  // preflight: false,
  // },

packages/spotlight/vite.config.ts → packages/core/vite.config.ts

@@ -1,8 +1,8 @@
-import { resolve } from "path";
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import dts from "vite-plugin-dts";
-import svgr from "vite-plugin-svgr";
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import svgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -15,16 +15,16 @@ export default defineConfig({
  ],
  resolve: {
  alias: {
- "~": resolve(__dirname, "src"),
+ '~': resolve(__dirname, 'src'),
  },
  },
  build: {
  lib: {
  // Could also be a dictionary or array of multiple entry points
- entry: resolve(__dirname, "src/index.tsx"),
- name: "sentry-spotlight",
+ entry: resolve(__dirname, 'src/index.tsx'),
+ name: 'sentry-spotlight',
  // the proper extensions will be added
- fileName: "sentry-spotlight",
+ fileName: 'sentry-spotlight',
  },
  // rollupOptions: {
  // // make sure to externalize deps that shouldn't be bundled