Skip to content

Commit

Permalink
Renamed core package to overlay
Browse files Browse the repository at this point in the history
  • Loading branch information
HazAT committed Nov 24, 2023
1 parent d8e2cc9 commit eacbe71
Show file tree
Hide file tree
Showing 79 changed files with 175 additions and 450 deletions.
8 changes: 8 additions & 0 deletions .changeset/sweet-days-reflect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@spotlightjs/astro': patch
'@spotlightjs/overlay': patch
'@spotlightjs/sidecar': patch
'@spotlightjs/tsconfig': patch
---

Renamed core to overlay package
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"private": true,
"type": "module",
"scripts": {
"dev:core": "pnpm --filter core dev",
"dev:overlay": "pnpm --filter overlay dev",
"dev:website": "pnpm --filter website dev",
"dev:playground": "pnpm --filter astro-playground dev",
"build": "pnpm --filter=!astro-playground -r run build",
Expand Down
2 changes: 1 addition & 1 deletion packages/astro/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
".": "./src/index.ts"
},
"dependencies": {
"@spotlightjs/core": "workspace:*",
"@spotlightjs/overlay": "workspace:*",
"@spotlightjs/sidecar": "workspace:*",
"astro": "^3.4.0",
"source-map": "^0.7.4"
Expand Down
2 changes: 1 addition & 1 deletion packages/astro/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,4 @@ const createPlugin = (options?: SpotlightOptions): AstroIntegration => {

export default createPlugin;

export * from '@spotlightjs/core';
export * from '@spotlightjs/overlay';
2 changes: 1 addition & 1 deletion packages/astro/src/overlay/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { DevOverlayPlugin } from 'astro';

import * as Spotlight from '@spotlightjs/core';
import * as Spotlight from '@spotlightjs/overlay';

const sentryLogo = `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="256" height="256" fill="none"/>
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
4 changes: 2 additions & 2 deletions packages/core/package.json → packages/overlay/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@spotlightjs/core",
"description": "The core Spotlight package to add debug functionality to your web app.",
"name": "@spotlightjs/overlay",
"description": "The overlay of Spotlight to add debug interface to your web app.",
"version": "0.0.15",
"license": "Apache-2.0",
"type": "module",
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"@fontsource/raleway": "^5.0.15",
"@sentry/astro": "^7.81.1",
"@spotlightjs/astro": "workspace:*",
"@spotlightjs/core": "workspace:*",
"@spotlightjs/overlay": "workspace:*",
"@types/react": "^18.2.38",
"@types/react-dom": "^18.2.17",
"astro": "^3.6.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/website/src/components/codeblock.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Setup Codeblock
---

```ts
import * as Spotlight from '@spotlightjs/core';
import * as Spotlight from '@spotlightjs/overlay';
Spotlight.init();
```

Expand Down
6 changes: 3 additions & 3 deletions packages/website/src/content/docs/about.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ overlay into development environments, and it does it by leveraging the existing

At a high level, Spotlight consists of two components:

1. An overlay (`@spotlightjs/core`) that renders inside of your application. The overlay is a simple React application, and can
1. An overlay (`@spotlightjs/overlay`) that renders inside of your application. The overlay is a simple React application, and can
seamlessly run in any web application (or even independently!).

2. A proxy server (`@spotlightjs/sidecar`) which enables push-based communication to the overlay. This is achieved via a simple HTTP relay,
Expand All @@ -23,13 +23,13 @@ At a high level, Spotlight consists of two components:
This means that adoption in most projects is two simple additions:

```shell
npm add @spotlightjs/core @spotlightjs/sidecar
npm add @spotlightjs/overlay @spotlightjs/sidecar
```

Registering Spotlight in your frontend application:

```typescript
import * as Spotlight from '@spotlightjs/core';
import * as Spotlight from '@spotlightjs/overlay';
Spotlight.init();
```

Expand Down
12 changes: 6 additions & 6 deletions packages/website/src/content/docs/contribute/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ pnpm install
From there you can spin up the Spotlight repo into watch mode:

```shell
pnpm dev:core
pnpm dev:overlay
```

Depending on what you're doing there's two paths to develop against the core.
Depending on what you're doing there's two paths to develop against the overlay.

If you simply want to run Spotlight against the example application, you can spin that up using:

Expand All @@ -41,17 +41,17 @@ pnpm dev:playground

Additionally you may want to link it into an existing project. This is a little brittle, and we're not experts here, so your mileage may vary.

First, when in the Spotlight root directory, you'll need to link the packages you're referencing (likely `@spotlightjs/core` and `@spotlightjs/sidecar`):
First, when in the Spotlight root directory, you'll need to link the packages you're referencing (likely `@spotlightjs/overlay` and `@spotlightjs/sidecar`):

```shell
pnpm link --global -C packages/core
pnpm link --global -C packages/overlay
pnpm link --global -C packages/sidecar
```

You can now link these within your project. For example if you're using `pnpm`:

```shell
pnpm link --global @spotlightjs/core
pnpm link --global @spotlightjs/overlay
pnpm link --global @spotlightjs/sidecar
```

Expand All @@ -62,7 +62,7 @@ The monorepo is mostly straight forward, but here's a quick summary:
```
spotlight
└── packages
├── core // @spotlightjs/core - the main overlay
├── overlay // @spotlightjs/overlay - the main overlay
├── sidecar // @spotlightjs/sidecar - the sidecar (proxy) for streaming data
├── tsconfig // @spotlightjs/tsconfig - shared tsconfig
└── website // @spotlightjs/website - the main overlay
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: All the configuration options for setting up Spotlight
## `init`

```js
import {init, sentry} as Spotlight from '@spotlightjs/core';
import {init, sentry} as Spotlight from '@spotlightjs/overlay';

init({
integrations: [sentry()],
Expand Down
2 changes: 1 addition & 1 deletion packages/website/src/content/docs/reference/console.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: Interface of ConsoleIntegration
The console integration allows you to easily render console logs within Spotlight.

```ts
import { init, console } from "@spotlightjs/core";
import { init, console } from "@spotlightjs/overlay";

init({
integrations: [console()]
Expand Down
2 changes: 1 addition & 1 deletion packages/website/src/content/docs/reference/sentry.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: Interface of SentryIntegration
The Sentry integration is the default in Spotlight. It receives events and envelope formats from Sentry SDKs (when configured with `spotlight=true`) and renders those as Errors and Traces in the overlay.

```ts
import { init, sentry } from "@spotlightjs/core";
import { init, sentry } from "@spotlightjs/overlay";

init({
integrations: [sentry()],
Expand Down
10 changes: 5 additions & 5 deletions packages/website/src/content/docs/setup/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,32 +15,32 @@ import { LinkCard, CardGrid } from '@astrojs/starlight/components';

You'll start by registering the Spotlight package in your existing frontend application.

Install the `@spotlightjs/core` package:
Install the `@spotlightjs/overlay` package:

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
<TabItem label="npm">
```sh
npm add --save-dev @spotlightjs/core
npm add --save-dev @spotlightjs/overlay
```
</TabItem>
<TabItem label="pnpm">
```sh
pnpm add -D @spotlightjs/core
pnpm add -D @spotlightjs/overlay
```
</TabItem>
<TabItem label="yarn">
```sh
yarn add @spotlightjs/core -D
yarn add @spotlightjs/overlay -D
```
</TabItem>
</Tabs>

Inject Spotlight into your application:

```js
import * as Spotlight from '@spotlightjs/core';
import * as Spotlight from '@spotlightjs/overlay';
// only load Spotlight in dev
if (process.env.NODE_ENV !== "production") {
Expand Down
Loading

0 comments on commit eacbe71

Please sign in to comment.