From 0d6f8145174998d971b1d0ddcb7f76c9a7f04515 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Wed, 3 Dec 2025 14:31:49 +1100 Subject: [PATCH 1/4] chore: better codesandbox error --- packages/dev/s2-docs/src/CodePlatter.tsx | 16 ++++--- packages/dev/s2-docs/src/CodeSandbox.tsx | 55 ++++++++++++------------ 2 files changed, 39 insertions(+), 32 deletions(-) diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx index ac9d5abf6d6..fe3f2633eeb 100644 --- a/packages/dev/s2-docs/src/CodePlatter.tsx +++ b/packages/dev/s2-docs/src/CodePlatter.tsx @@ -126,7 +126,7 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) { Copy link } - {files && + {files && { let filesToDownload = getCodeSandboxFiles(getExampleFiles(codeRef, files, urls, entry), deps, type, entry); @@ -157,16 +157,22 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) { Install with shadcn } - {files && + {files && { - createCodeSandbox(getExampleFiles(codeRef, files, urls, entry), deps, type, entry); + onAction={async () => { + try { + let result = await createCodeSandbox(getExampleFiles(codeRef, files, urls, entry), deps, type, entry); + let url = `https://codesandbox.io/p/devbox/${result}`; + window.open(url, '_blank')?.focus(); + } catch { + ToastQueue.negative('Failed to create CodeSandbox, make sure you are logged in to CodeSandbox. If you are already logged in, logout and log back in.'); + } }}> Open in CodeSandbox } - {files && type !== 's2' && + {files && type !== 's2' && { createStackBlitz(getExampleFiles(codeRef, files, urls, entry), deps, type, entry); diff --git a/packages/dev/s2-docs/src/CodeSandbox.tsx b/packages/dev/s2-docs/src/CodeSandbox.tsx index 1f7b32ce9cb..3aa58cf1331 100644 --- a/packages/dev/s2-docs/src/CodeSandbox.tsx +++ b/packages/dev/s2-docs/src/CodeSandbox.tsx @@ -1,42 +1,43 @@ import type {DownloadFiles} from './CodeBlock'; import LZString from 'lz-string'; -export function createCodeSandbox( +export async function createCodeSandbox( files: DownloadFiles['files'], deps: DownloadFiles['deps'], type: 'vanilla' | 'tailwind' | 's2' = 'vanilla', entry: string = 'Example' ) { - let form = document.createElement('form'); - form.hidden = true; - form.method = 'POST'; - form.action = 'https://codesandbox.io/api/v1/sandboxes/define'; - form.target = '_blank'; - - let input = document.createElement('input'); - input.type = 'hidden'; - input.name = 'query'; - input.value = 'file=src/Example.tsx'; - form.appendChild(input); + const parameters = LZString.compressToBase64(JSON.stringify({ + files: getCodeSandboxFiles(files, deps, type, entry) + })); - input = document.createElement('input'); - input.type = 'hidden'; - input.name = 'environment'; - input.value = 'server'; - form.appendChild(input); + // Validate with CodeSandbox API first + const response = await fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + query: 'file=src/Example.tsx', + environment: 'server', + parameters + }) + }); - input = document.createElement('input'); - input.type = 'hidden'; - input.name = 'parameters'; + console.log(response); + if (!response.ok) { + const errorText = await response.text(); + throw new Error(`CodeSandbox API error: ${response.status} - ${errorText}`); + } - input.value = LZString.compressToBase64(JSON.stringify({ - files: getCodeSandboxFiles(files, deps, type, entry) - })); - form.appendChild(input); + const result = await response.json(); + console.log(result); + // Check if there's an error in the response + if (result.error) { + throw new Error(`CodeSandbox error: ${result.error}`); + } - document.body.appendChild(form); - form.submit(); - form.remove(); + return result.sandbox_id; } const devDependencies = { From 6ec8b74d1a863ce24910107a4410597c1595e94a Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Wed, 3 Dec 2025 14:38:43 +1100 Subject: [PATCH 2/4] remove console logs --- packages/dev/s2-docs/src/CodeSandbox.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/dev/s2-docs/src/CodeSandbox.tsx b/packages/dev/s2-docs/src/CodeSandbox.tsx index 3aa58cf1331..ec7e37a04fd 100644 --- a/packages/dev/s2-docs/src/CodeSandbox.tsx +++ b/packages/dev/s2-docs/src/CodeSandbox.tsx @@ -24,14 +24,12 @@ export async function createCodeSandbox( }) }); - console.log(response); if (!response.ok) { const errorText = await response.text(); throw new Error(`CodeSandbox API error: ${response.status} - ${errorText}`); } const result = await response.json(); - console.log(result); // Check if there's an error in the response if (result.error) { throw new Error(`CodeSandbox error: ${result.error}`); From 4652d9f6fc24a7456a7ff65973433b7e3a0785d6 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Thu, 4 Dec 2025 15:32:45 +1100 Subject: [PATCH 3/4] Move to a dialog with more explanation --- packages/dev/s2-docs/src/CodePlatter.tsx | 41 ++++++++++++++---- packages/dev/s2-docs/src/CodeSandbox.tsx | 53 ++++++++++++------------ 2 files changed, 60 insertions(+), 34 deletions(-) diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx index fe3f2633eeb..280756d405b 100644 --- a/packages/dev/s2-docs/src/CodePlatter.tsx +++ b/packages/dev/s2-docs/src/CodePlatter.tsx @@ -72,6 +72,7 @@ export function ShareUrlProvider(props: ProviderProps) { export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) { let codeRef = useRef(null); let [showShadcn, setShowShadcn] = useState(false); + let [showCodeSandbox, setShowCodeSandbox] = useState(false); let getText = () => codeRef.current!.querySelector('pre')!.textContent!; let {library} = useContext(CodePlatterContext); if (!type) { @@ -159,14 +160,8 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) { } {files && { - try { - let result = await createCodeSandbox(getExampleFiles(codeRef, files, urls, entry), deps, type, entry); - let url = `https://codesandbox.io/p/devbox/${result}`; - window.open(url, '_blank')?.focus(); - } catch { - ToastQueue.negative('Failed to create CodeSandbox, make sure you are logged in to CodeSandbox. If you are already logged in, logout and log back in.'); - } + onAction={() => { + setShowCodeSandbox(true); }}> Open in CodeSandbox @@ -197,6 +192,11 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
{children}
+ setShowCodeSandbox(false)}> + {showCodeSandbox && + + } + setShowShadcn(false)}> {showShadcn && @@ -319,6 +319,31 @@ function ShadcnDialog({registryUrl}) { ); } +function CodeSandboxDialog({getExampleFiles, codeRef, files, urls, entry, deps, type}) { + return ( + + {({close}) => (<> + Create a CodeSandbox + +

This will open a new tab with a CodeSandbox containing this example. If you see a 403 error, please log in to CodeSandbox and try again. If you are already logged in, please logout and log back in and then try again.

+ + + + + + + )} + + ); +} + const pulseAnimation = keyframes(` 0% { outline-width: 0px; diff --git a/packages/dev/s2-docs/src/CodeSandbox.tsx b/packages/dev/s2-docs/src/CodeSandbox.tsx index ec7e37a04fd..1f7b32ce9cb 100644 --- a/packages/dev/s2-docs/src/CodeSandbox.tsx +++ b/packages/dev/s2-docs/src/CodeSandbox.tsx @@ -1,41 +1,42 @@ import type {DownloadFiles} from './CodeBlock'; import LZString from 'lz-string'; -export async function createCodeSandbox( +export function createCodeSandbox( files: DownloadFiles['files'], deps: DownloadFiles['deps'], type: 'vanilla' | 'tailwind' | 's2' = 'vanilla', entry: string = 'Example' ) { - const parameters = LZString.compressToBase64(JSON.stringify({ - files: getCodeSandboxFiles(files, deps, type, entry) - })); + let form = document.createElement('form'); + form.hidden = true; + form.method = 'POST'; + form.action = 'https://codesandbox.io/api/v1/sandboxes/define'; + form.target = '_blank'; - // Validate with CodeSandbox API first - const response = await fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - query: 'file=src/Example.tsx', - environment: 'server', - parameters - }) - }); + let input = document.createElement('input'); + input.type = 'hidden'; + input.name = 'query'; + input.value = 'file=src/Example.tsx'; + form.appendChild(input); - if (!response.ok) { - const errorText = await response.text(); - throw new Error(`CodeSandbox API error: ${response.status} - ${errorText}`); - } + input = document.createElement('input'); + input.type = 'hidden'; + input.name = 'environment'; + input.value = 'server'; + form.appendChild(input); - const result = await response.json(); - // Check if there's an error in the response - if (result.error) { - throw new Error(`CodeSandbox error: ${result.error}`); - } + input = document.createElement('input'); + input.type = 'hidden'; + input.name = 'parameters'; + + input.value = LZString.compressToBase64(JSON.stringify({ + files: getCodeSandboxFiles(files, deps, type, entry) + })); + form.appendChild(input); - return result.sandbox_id; + document.body.appendChild(form); + form.submit(); + form.remove(); } const devDependencies = { From c9cf4af40cd16c89cbaf15dfb0a81a6356f0cbf0 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Mon, 8 Dec 2025 08:04:41 +1100 Subject: [PATCH 4/4] review feedback --- packages/dev/s2-docs/src/CodePlatter.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx index 280756d405b..ff9a2b900a7 100644 --- a/packages/dev/s2-docs/src/CodePlatter.tsx +++ b/packages/dev/s2-docs/src/CodePlatter.tsx @@ -325,7 +325,8 @@ function CodeSandboxDialog({getExampleFiles, codeRef, files, urls, entry, deps, {({close}) => (<> Create a CodeSandbox -

This will open a new tab with a CodeSandbox containing this example. If you see a 403 error, please log in to CodeSandbox and try again. If you are already logged in, please logout and log back in and then try again.

+

This will create an editable sandbox with this example in a new tab.

+

Troubleshooting: If the sandbox fails to open or isn't created, try logging in to CodeSandbox first. If you're already logged in, try signing out and back in.