From ab59285301ce2d241cb03b2616b747d571884969 Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Tue, 6 Aug 2024 21:32:58 +0100 Subject: [PATCH 1/3] feat: Add IIFE bundle for single script include This change adds an Immediately Invoked Function Expression (IIFE) bundle which automatically initializes Spotlight upon loading. Greatly simplifies the HTML include method for Spotlight. It also fixes a bug where Spotlight won't be initialized if it loads after page `load` event and `injectImmediately` was not set to `true`. --- .changeset/short-pugs-laugh.md | 5 +++++ .vscode/settings.json | 3 +++ packages/overlay/src/index.tsx | 6 ++--- packages/overlay/vite.config.ts | 22 ++++++++++++++++++- .../website/src/content/docs/setup/html.mdx | 18 +++------------ 5 files changed, 35 insertions(+), 19 deletions(-) create mode 100644 .changeset/short-pugs-laugh.md 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..2320a597 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, }; @@ -179,7 +179,7 @@ export async function init({ document.body.append(docRoot); } - if (injectImmediately) { + if (document.readyState === 'complete' || injectImmediately) { injectSpotlight(); } else { window.addEventListener('load', () => { diff --git a/packages/overlay/vite.config.ts b/packages/overlay/vite.config.ts index 9b21bc74..dc9dc3e7 100644 --- a/packages/overlay/vite.config.ts +++ b/packages/overlay/vite.config.ts @@ -23,6 +23,21 @@ const removeReactDevToolsMessagePlugin: () => PluginOption = () => ({ // https://vitejs.dev/config/ export default defineConfig({ + // { + // input: [ 'src/index.bundle.ts' ], + // output: { + // entryFileNames: [Function: entryFileNames], + // dir: 'build', + // sourcemap: true, + // strict: false, + // esModule: false, + // format: 'iife', + // name: 'Sentry', + // intro: [Function: intro] + // }, + // treeshake: 'smallest', + // context: 'window' + // }, plugins: [ react(), dts({ @@ -48,9 +63,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 ``` From 9f87482b5a7686ad6a29ad5e4c7e4d677c06310b Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Tue, 6 Aug 2024 21:33:57 +0100 Subject: [PATCH 2/3] delete carry over comments --- packages/overlay/vite.config.ts | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/overlay/vite.config.ts b/packages/overlay/vite.config.ts index dc9dc3e7..278295d7 100644 --- a/packages/overlay/vite.config.ts +++ b/packages/overlay/vite.config.ts @@ -23,21 +23,6 @@ const removeReactDevToolsMessagePlugin: () => PluginOption = () => ({ // https://vitejs.dev/config/ export default defineConfig({ - // { - // input: [ 'src/index.bundle.ts' ], - // output: { - // entryFileNames: [Function: entryFileNames], - // dir: 'build', - // sourcemap: true, - // strict: false, - // esModule: false, - // format: 'iife', - // name: 'Sentry', - // intro: [Function: intro] - // }, - // treeshake: 'smallest', - // context: 'window' - // }, plugins: [ react(), dts({ From 6b04a4d508e85fcb8462767f4752cf4f005b7019 Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Tue, 6 Aug 2024 21:39:39 +0100 Subject: [PATCH 3/3] simplify inject logic --- packages/overlay/src/index.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/overlay/src/index.tsx b/packages/overlay/src/index.tsx index 2320a597..5ad35a86 100644 --- a/packages/overlay/src/index.tsx +++ b/packages/overlay/src/index.tsx @@ -175,6 +175,10 @@ export async function init({ ); function injectSpotlight() { + if (isSpotlightInjected()) { + log('Spotlight already injected, bailing.'); + return; + } log('Injecting into application'); document.body.append(docRoot); } @@ -182,13 +186,7 @@ export async function init({ 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); }