kleap
/
app-golden-quokka-skip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update components/kleap-scripts.tsx

This commit is contained in:
kleap-admin 2026-01-15 14:29:20 +00:00
parent 71d49f9dba
commit d0861eb4a0
1 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/kleap-scripts.tsx Normal file
View File

@ -0,0 +1,53 @@
"use client";
import { useEffect } from "react";
import { KleapBadge } from "./kleap-badge";
import { KleapAnalytics } from "./kleap-analytics";
/**
* Kleap Scripts Loader
*
* NOTE: Tailwind CDN is now loaded in layout.tsx <head> SSR (not here!)
* This ensures it's available BEFORE React renders, fixing JIT class generation
*
* IMPORTANT: Scripts are loaded from kleap.co CDN so that updates propagate
* to all existing sandboxes without needing to update each one individually.
*/
export function KleapScripts() {
useEffect(() => {
// Only load Kleap scripts when inside an iframe (Kleap environment)
if (typeof window !== "undefined" && window.parent !== window) {
// Load scripts from kleap.co CDN for automatic updates across all sandboxes
const CDN_BASE = "https://kleap.co/_kleap";
const scriptNames = [
"kleap-shim.js",
"kleap-nextjs-error-detector.js", // Next.js build error detection
"kleap-component-selector-client.js",
"kleap-react-tagger.js",
];
scriptNames.forEach((name) => {
const src = `${CDN_BASE}/${name}`;
// Check if script is already loaded (check both CDN and local paths)
if (
!document.querySelector(`script[src="${src}"]`) &&
!document.querySelector(`script[src="/_kleap/${name}"]`)
) {
const script = document.createElement("script");
script.src = src;
script.defer = true;
script.crossOrigin = "anonymous"; // Required for CDN scripts
script.onerror = () => console.warn("Kleap script not found:", src);
document.head.appendChild(script);
}
});
}
}, []);
return (
<>
<KleapBadge />
<KleapAnalytics />
</>
);
}