Fix StackBlitz embed isolation (#945)

Author: tannerlinsley

src/components/InteractiveSandbox.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { stackBlitzIframeProps } from '~/utils/stackblitz-embed'
 
 interface InteractiveSandboxProps {
   isActive: boolean
@@ -17,6 +18,8 @@ export function InteractiveSandbox({
   libraryName,
   embedEditor,
 }: InteractiveSandboxProps) {
+  const isStackBlitz = embedEditor === 'stackblitz'
+
   return (
     <div
       className={`absolute inset-0 ${
@@ -25,8 +28,9 @@ export function InteractiveSandbox({
       aria-hidden={!isActive}
     >
       <iframe
-        src={embedEditor === 'codesandbox' ? codeSandboxUrl : stackBlitzUrl}
+        src={isStackBlitz ? stackBlitzUrl : codeSandboxUrl}
         title={`${libraryName} | ${examplePath}`}
+        {...(isStackBlitz ? stackBlitzIframeProps : {})}
         sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
         className="w-full h-full min-h-[80dvh] overflow-hidden shadow-lg bg-white dark:bg-black"
       />

src/components/StackBlitzEmbed.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useIsDark } from '~/hooks/useIsDark'
+import { stackBlitzIframeProps } from '~/utils/stackblitz-embed'
 
 type StackBlitzEmbedProps = {
   repo: string
@@ -32,6 +33,7 @@ export function StackBlitzEmbed({
       title={title || `${repo}: ${examplePath}`}
       key={`${examplePath}-${themeParam}`}
       src={src}
+      {...stackBlitzIframeProps}
       sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
       className="shadow-lg"
       loading="lazy"

src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx

@@ -24,6 +24,7 @@ import {
   ExampleDeployDialog,
   type DeployProvider,
 } from '~/components/ExampleDeployDialog'
+import { stackBlitzEmbedHeaders } from '~/utils/stackblitz-embed'
 
 const renderedFileQueryOptions = (
   repo: string,
@@ -136,6 +137,7 @@ export const Route = createFileRoute(
       }),
     }
   },
+  headers: () => stackBlitzEmbedHeaders,
   staleTime: 1000 * 60 * 5, // 5 minutes
 })
 

src/routes/-library-landing.tsx

@@ -9,13 +9,18 @@ import { getTanstackDocsConfig } from '~/utils/config'
 import { fetchLandingCodeExample } from '~/utils/landing-code-example.functions'
 import { seo } from '~/utils/seo'
 import { ogImageUrl } from '~/utils/og'
+import { stackBlitzEmbedHeaders } from '~/utils/stackblitz-embed'
 
 export type LandingComponentProps = {
   landingCodeExampleRsc?: ReactNode
 }
 
 type LandingComponent = ComponentType<LandingComponentProps>
 
+type LibraryLandingPageOptions = {
+  hasStackBlitzEmbed?: boolean
+}
+
 type StaticLandingRoutePath =
   | '/ai/$version/'
   | '/cli/$version/'
@@ -108,6 +113,7 @@ export function createLibraryLandingPage<TId extends StaticLandingRoutePath>(
   routePath: TId,
   libraryId: LibraryId,
   LandingComponent: LandingComponent,
+  options: LibraryLandingPageOptions = {},
 ) {
   const library = getLibrary(libraryId)
   const routeApi = getRouteApi(routePath)
@@ -181,6 +187,9 @@ export function createLibraryLandingPage<TId extends StaticLandingRoutePath>(
         noindex: library.visible === false,
       }),
     }),
+    ...(options.hasStackBlitzEmbed
+      ? { headers: () => stackBlitzEmbedHeaders }
+      : {}),
     staticData: {
       Title: () => (
         <LibraryNavbarTitle libraryId={libraryId} routePath={routePath} />

src/routes/form.$version.index.tsx

@@ -3,5 +3,7 @@ import FormLanding from '~/components/landing/FormLanding'
 import { createLibraryLandingPage } from './-library-landing'
 
 export const Route = createFileRoute('/form/$version/')(
-  createLibraryLandingPage('/form/$version/', 'form', FormLanding),
+  createLibraryLandingPage('/form/$version/', 'form', FormLanding, {
+    hasStackBlitzEmbed: true,
+  }),
 )

src/routes/query.$version.index.tsx

@@ -3,5 +3,7 @@ import QueryLanding from '~/components/landing/QueryLanding'
 import { createLibraryLandingPage } from './-library-landing'
 
 export const Route = createFileRoute('/query/$version/')(
-  createLibraryLandingPage('/query/$version/', 'query', QueryLanding),
+  createLibraryLandingPage('/query/$version/', 'query', QueryLanding, {
+    hasStackBlitzEmbed: true,
+  }),
 )

src/routes/ranger.$version.index.tsx

@@ -3,5 +3,7 @@ import RangerLanding from '~/components/landing/RangerLanding'
 import { createLibraryLandingPage } from './-library-landing'
 
 export const Route = createFileRoute('/ranger/$version/')(
-  createLibraryLandingPage('/ranger/$version/', 'ranger', RangerLanding),
+  createLibraryLandingPage('/ranger/$version/', 'ranger', RangerLanding, {
+    hasStackBlitzEmbed: true,
+  }),
 )

src/routes/router.$version.index.tsx

@@ -3,5 +3,7 @@ import RouterLanding from '~/components/landing/RouterLanding'
 import { createLibraryLandingPage } from './-library-landing'
 
 export const Route = createFileRoute('/router/$version/')(
-  createLibraryLandingPage('/router/$version/', 'router', RouterLanding),
+  createLibraryLandingPage('/router/$version/', 'router', RouterLanding, {
+    hasStackBlitzEmbed: true,
+  }),
 )

src/routes/table.$version.index.tsx

@@ -3,5 +3,7 @@ import TableLanding from '~/components/landing/TableLanding'
 import { createLibraryLandingPage } from './-library-landing'
 
 export const Route = createFileRoute('/table/$version/')(
-  createLibraryLandingPage('/table/$version/', 'table', TableLanding),
+  createLibraryLandingPage('/table/$version/', 'table', TableLanding, {
+    hasStackBlitzEmbed: true,
+  }),
 )

src/routes/virtual.$version.index.tsx

@@ -3,5 +3,7 @@ import VirtualLanding from '~/components/landing/VirtualLanding'
 import { createLibraryLandingPage } from './-library-landing'
 
 export const Route = createFileRoute('/virtual/$version/')(
-  createLibraryLandingPage('/virtual/$version/', 'virtual', VirtualLanding),
+  createLibraryLandingPage('/virtual/$version/', 'virtual', VirtualLanding, {
+    hasStackBlitzEmbed: true,
+  }),
 )