Improve setup docs to cover Vite/always show dev check (#164)

getsentry · Nov 28, 2023 · 111f603 · 111f603
1 parent d7f152c
commit 111f603
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/packages/website/src/components/codeblock.mdx b/packages/website/src/components/codeblock.mdx
@@ -4,7 +4,10 @@ title: Setup Codeblock
 
 ```ts
 import * as Spotlight from '@spotlightjs/overlay';
-Spotlight.init();
+
+if (import.meta.env.DEV) {
+  Spotlight.init();
+}
 ```
 
 ```shell

diff --git a/packages/website/src/content/docs/about.mdx b/packages/website/src/content/docs/about.mdx
@@ -30,7 +30,11 @@ Registering Spotlight in your frontend application:
 
 ```typescript
 import * as Spotlight from '@spotlightjs/overlay';
-Spotlight.init();
+
+// only load Spotlight in dev
+if (process.env.NODE_ENV === "development") {
+  Spotlight.init();
+}
 ```
 
 Running the sidecar in the background:

diff --git a/packages/website/src/content/docs/setup/index.mdx b/packages/website/src/content/docs/setup/index.mdx
@@ -22,31 +22,49 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 <Tabs>
   <TabItem label="npm">
   ```sh 
-  npm add --save-dev @spotlightjs/overlay 
+  npm add @spotlightjs/overlay 
   ```
   </TabItem>
   <TabItem label="pnpm">
   ```sh 
-  pnpm add -D @spotlightjs/overlay
+  pnpm add @spotlightjs/overlay
   ```
   </TabItem>
   <TabItem label="yarn">
   ```sh 
-  yarn add @spotlightjs/overlay -D
+  yarn add @spotlightjs/overlay
   ```
   </TabItem>
 </Tabs>
 
-Inject Spotlight into your application:
+:::note
+We're loading Spotlight with production dependencies as the import is static, but the expectation is it will be tree-shaken out using the environment test.
+:::
 
-```js
-import * as Spotlight from '@spotlightjs/overlay';
+Inject Spotlight into your application:
 
-// only load Spotlight in dev
-if (process.env.NODE_ENV === "development") {
-  Spotlight.init();
-}
-```
+<Tabs>
+  <TabItem label="Vite">
+  ```js
+  import * as Spotlight from '@spotlightjs/overlay';
+
+  // only load Spotlight in dev
+  if (import.meta.env.DEV) {
+    Spotlight.init();
+  }
+  ```
+  </TabItem>
+  <TabItem label="Other">
+  ```js
+  import * as Spotlight from '@spotlightjs/overlay';
+
+  // only load Spotlight in dev
+  if (process.env.NODE_ENV === "development") {
+    Spotlight.init();
+  }
+  ```
+  </TabItem>
+</Tabs>
 
 Upon loading your UI you should now see the Spotlight toolbar in bottom-right corner of your application.