diff --git a/.changeset/short-pugs-laugh.md b/.changeset/short-pugs-laugh.md
new file mode 100644
index 00000000..fb3eb4b0
--- /dev/null
+++ b/.changeset/short-pugs-laugh.md
@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': minor
+---
+
+Add IIFE for auto load & init over CDN with a single script include
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0c6fa872..e4d8b96d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,10 +6,13 @@
"contextlines",
"Endcaps",
"fontsource",
+ "iife",
+ "outro",
"pageload",
"spotlightjs",
"svgr",
"tailwindcss",
+ "treeshake",
"ttfb",
"uuidv",
"webvitals"
diff --git a/packages/overlay/src/index.tsx b/packages/overlay/src/index.tsx
index efbdf19d..5ad35a86 100644
--- a/packages/overlay/src/index.tsx
+++ b/packages/overlay/src/index.tsx
@@ -23,10 +23,10 @@ export {
DEFAULT_ANCHOR,
DEFAULT_EXPERIMENTS,
DEFAULT_SIDECAR_URL,
- off,
- on,
React,
ReactDOM,
+ off,
+ on,
trigger,
};
@@ -175,20 +175,18 @@ export async function init({
);
function injectSpotlight() {
+ if (isSpotlightInjected()) {
+ log('Spotlight already injected, bailing.');
+ return;
+ }
log('Injecting into application');
document.body.append(docRoot);
}
- if (injectImmediately) {
+ if (document.readyState === 'complete' || injectImmediately) {
injectSpotlight();
} else {
- window.addEventListener('load', () => {
- injectSpotlight();
- });
+ window.addEventListener('load', injectSpotlight);
}
- window.addEventListener('error', () => {
- if (!isSpotlightInjected()) {
- injectSpotlight();
- }
- });
+ window.addEventListener('error', injectSpotlight);
}
diff --git a/packages/overlay/vite.config.ts b/packages/overlay/vite.config.ts
index 9b21bc74..278295d7 100644
--- a/packages/overlay/vite.config.ts
+++ b/packages/overlay/vite.config.ts
@@ -48,9 +48,14 @@ export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.tsx'),
- name: 'sentry-spotlight',
+ name: 'Spotlight',
// the proper extensions will be added
fileName: 'sentry-spotlight',
+ formats: ['es', 'iife'],
+ },
+ rollupOptions: {
+ treeshake: 'smallest',
+ output: { footer: 'window.Spotlight && Spotlight.init()' },
},
sourcemap: true,
},
diff --git a/packages/website/src/content/docs/setup/html.mdx b/packages/website/src/content/docs/setup/html.mdx
index c8892c44..ea14a675 100644
--- a/packages/website/src/content/docs/setup/html.mdx
+++ b/packages/website/src/content/docs/setup/html.mdx
@@ -5,30 +5,18 @@ description: Use the overlay directly in HTML
To use Spotlight directly, you can load the script from a CDN and initialize it in a separate script tag.
-This solution will probably change in the future, as we are working on a better way to load Spotlight.
-
## Configuration
-```html {7, 10, 14-19}
+```html {6}
Spotlight
-
-
-
+
-
-
+ Your app
```