📝 Migrate playgrounds in documentation to StackBlitz by dubzzz · Pull Request #6753 · dubzzz/fast-check

dubzzz · 2026-03-19T22:24:13Z

Description

This PR migrates the interactive code playgrounds in the documentation from CodeSandbox's Sandpack to StackBlitz's SDK. The change affects the race condition detection tutorial and Advent of PBT puzzles.

Key Changes

Playground Components:

Replaced SandpackProvider and related Sandpack components with a new StackBlitzEmbed component that uses @stackblitz/sdk
Created a reusable StackBlitzEmbed component that handles StackBlitz project embedding with configurable options (height, openFile, view, hideExplorer)
Simplified file configuration by removing Sandpack-specific metadata (readOnly, active, hidden flags)
Updated package.json generation to include StackBlitz-specific configuration (installDependencies, startCommand)

Test Infrastructure:

Migrated test runner from Jest to Vitest for local test validation
Updated all test file naming from .spec.js to .test.js to match Vitest conventions
Updated test imports to use Vitest (import { test, expect, vi } from 'vitest') instead of Jest
Replaced jest.fn() with vi.fn() throughout test snippets
Removed Jest configuration file and updated test execution script

Styling:

Renamed CSS class from .openInCodeSandbox to .playgroundActions
Updated button styling to be more consistent with the new platform
Simplified hover states and removed CodeSandbox-specific styling

Dependencies:

Removed @codesandbox/sandpack-react and @codesandbox/sandpack-themes
Removed @jest/globals
Added @stackblitz/sdk as a dependency
Vitest is already present in devDependencies

Benefits

StackBlitz provides a more modern development environment with better IDE features
Vitest is more aligned with modern JavaScript testing practices
Simplified component code with less boilerplate
Better integration with Node.js-based projects

Checklist

I have a full understanding of every line in this PR
I flagged the impact of my change (pending changeset)
I kept this PR focused on a single concern
I followed the gitmoji specification
Existing tests pass with the new test runner

https://claude.ai/code/session_01S8LkWyJcRRfX5gGUx2ZZeB

Replace @codesandbox/sandpack-react with @stackblitz/sdk for interactive code playgrounds. Migrate all test snippets from Jest syntax (jest.fn) to Vitest syntax (vi.fn with explicit imports). Update the snippet validation spec to run Vitest instead of Jest. Remove jest.config.cjs and Jest dependencies that are no longer needed. https://claude.ai/code/session_01S8LkWyJcRRfX5gGUx2ZZeB

changeset-bot · 2026-03-19T22:24:22Z

⚠️ No Changeset found

Latest commit: 58f0ba0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

dubzzz · 2026-03-23T19:55:45Z

+
+  useEffect(() => {
+    if (!ref.current) return;
+    sdk.embedProject(


@claude is there a clean up? Probably worth calling it to avoid double mount

Claude finished @dubzzz's task in 1m 1s —— View job

Analyze the useEffect in AdventPlayground.tsx for cleanup

Fix both AdventPlayground.tsx and Playgrounds.tsx

Good catch! Both useEffect hooks were missing cleanup. sdk.embedProject injects an iframe into the container div, so without cleanup React strict mode's double-mount would create two iframes.

Added return () => { el.innerHTML = ''; } to both:

AdventPlayground.tsx:56 — clears the embed on unmount

Playgrounds.tsx:43 — same fix for the StackBlitzEmbed component

Pushed in cf1660b.

Co-authored-by: Nicolas DUBIEN <[email protected]>

dubzzz · 2026-03-27T15:21:18Z

+  };
+};
+
+function StackBlitzEmbed({ files, options = {} }: EmbedProps) {


@claude I have this error:

Unable to run Embedded Project

Looks like this project is being embedded without proper isolation headers.

With a link to https://developer.stackblitz.com/platform/webcontainers/browser-support#web-platform-requirements

Please fix it.

I also want to never hide the show ansewr button

dubzzz · 2026-03-27T15:22:12Z

+  };
+};
+
+function StackBlitzEmbed({ files, options = {} }: EmbedProps) {


@claude I want the code editor to run the tests in live for the user, it seems that your current setup does not run any test

dubzzz · 2026-03-27T16:11:59Z

@claude take into account the untreated commets

claude · 2026-03-27T16:12:16Z

Claude finished @dubzzz's task in 9m 57s —— View job

Addressing untreated review comments

Fix StackBlitz "Unable to run Embedded Project" isolation headers error
Always show the "show answer" button (never hide it)
Make the embedded project run tests live for the user
Push changes

Changes made (`4a5d2a1`)

Fix: Isolation headers error — Replaced sdk.embedProject() (which uses WebContainers requiring COOP/COEP headers on the host page) with a form POST approach that submits project data to https://stackblitz.com/run and loads the result in an iframe. Since the iframe is served from stackblitz.com (which has proper isolation headers), WebContainers work without requiring any special headers on fast-check.dev.

Fix: Always show "Show answer" button — Removed the conditional specFile.content !== anwserSpecCode check that was hiding the button after showing the answer.

Fix: Tests running live — Added --watch flag to the startCommand (npx vitest --watch --reporter=verbose) to ensure Vitest runs in watch mode and re-runs tests as the user edits code. The startCommand in the embedded package.json triggers automatically when StackBlitz opens the project.

Cleanup — Removed the @stackblitz/sdk dependency from website/package.json since it's no longer imported.

Note: CSP update needed

The CI workflow (.github/workflows/build-status.yml:552) still references *.codesandbox.io in the frame-src CSP directive. This should be updated to *.stackblitz.com to allow the StackBlitz iframes. I cannot modify workflow files directly — this needs to be done manually.

View job

Replace sdk.embedProject (WebContainers) with form POST to stackblitz.com/run which loads in an iframe served from StackBlitz's own domain, avoiding the need for isolation headers on the host page. Also: always show "Show answer" button, add --watch flag to vitest startCommand, and remove @stackblitz/sdk dependency. Co-authored-by: Nicolas DUBIEN <[email protected]>

dubzzz · 2026-03-27T16:28:52Z

@claude move back to the SDK as you said it would work on fast-check.dev just make sure that our CSP are correctly defined for it

claude · 2026-03-27T16:29:06Z

Claude finished @dubzzz's task in 3m 12s —— View job

Reverting to StackBlitz SDK with proper CSP

Read current files to understand the form POST approach
Revert Playgrounds.tsx to use @stackblitz/sdk with embedProject()
Revert AdventPlayground.tsx to use @stackblitz/sdk with embedProject()
Add @stackblitz/sdk back to website/package.json
Update CSP configuration for StackBlitz
Push changes

Changes made (`53591d9`)

Reverted both Playgrounds.tsx and AdventPlayground.tsx from the form POST workaround back to using @stackblitz/sdk's embedProject() API directly. Both components now use a ref-based container <div> with proper useEffect cleanup (clearing innerHTML on unmount).

Added @stackblitz/sdk back to website/package.json dependencies.

CSP update needed (manual)

I cannot modify .github/workflows/build-status.yml due to GitHub App permissions. You need to manually update line 552 to change:

- frame-src 'self' *.codesandbox.io www.youtube-nocookie.com;
+ frame-src 'self' *.stackblitz.com www.youtube-nocookie.com;

This is required for the StackBlitz SDK embeds to load in the iframe on fast-check.dev.
·

Replace the form POST workaround with the proper StackBlitz SDK embedProject() API. Add @stackblitz/sdk back to website dependencies. Co-authored-by: Nicolas DUBIEN <[email protected]>

dubzzz · 2026-04-08T21:49:53Z

@claude in advent 22 we have a mismatch between two names: computeSantaMindScore and findOptimalPacking

import { test, expect } from 'vitest';
import fc from 'fast-check';
import computeSantaMindScore from './advent.js';

// declare type Icon = '🎄' | '🦌' | '⛄' | '🛷' | '🎈' | '🎀' | '🎅' | '🎁';
// declare type Sequence = [Icon, Icon, Icon, Icon, Icon];
// declare function findOptimalPacking(secretSequence: Sequence, guessedSequence: Sequence): { goodPlacement: number; misplaced: number };
test('helping Santa', () => {
fc.assert(fc.property(fc.constant('noop'), (noop) => {
}));
})

please list me all the other cases with mismatch

claude · 2026-04-08T21:50:08Z

Claude finished @dubzzz's task in 2m 23s —— View job

Checking Advent of PBT puzzles for function name mismatches

Understand the issue: imported name vs declared name mismatch
Find all 24 Advent puzzle files
Check each puzzle for mismatches between functionName and signature
Report findings

Results

I checked all 24 days. Day 22 is the only function name mismatch:

Day	`functionName` (import)	`signature` function name	Status
22	`computeSantaMindScore`	`findOptimalPacking`	❌ Name mismatch

All other days (1–21, 23–24) have matching function names between the import and the type declaration.

Bonus finding: Day 10 return type mismatch

Day 10 has a return type mismatch (not a name mismatch):

signature: 'isProbablyEnchantedWordV2(word: string): string;'
But the actual reference implementation returns boolean (line 19: function isProbablyEnchantedWordV2(word: string): boolean)

This is a different kind of mismatch — the function name is correct, but the declared return type in the signature (string) doesn't match the actual return type (boolean).

…est-migration-mq5sK

socket-security · 2026-04-08T21:55:33Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@stackblitz/sdk@1.11.0

View full report

pkg-pr-new · 2026-04-08T21:56:22Z

@fast-check/examples

@fast-check/ava

npm i https://pkg.pr.new/@fast-check/ava@6753

fast-check

npm i https://pkg.pr.new/fast-check@6753

@fast-check/jest

npm i https://pkg.pr.new/@fast-check/jest@6753

@fast-check/packaged

npm i https://pkg.pr.new/@fast-check/packaged@6753

@fast-check/poisoning

npm i https://pkg.pr.new/@fast-check/poisoning@6753

@fast-check/vitest

npm i https://pkg.pr.new/@fast-check/vitest@6753

@fast-check/worker

npm i https://pkg.pr.new/@fast-check/worker@6753

commit: 58f0ba0

codecov · 2026-04-08T22:02:25Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.86%. Comparing base (22ed91a) to head (58f0ba0).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6753   +/-   ##
=======================================
  Coverage   94.86%   94.86%           
=======================================
  Files         209      209           
  Lines        5665     5665           
  Branches     1489     1488    -1     
=======================================
  Hits         5374     5374           
  Misses        283      283           
  Partials        8        8

Flag	Coverage Δ
tests	`94.86% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

dubzzz commented Mar 23, 2026

View reviewed changes

Add useEffect cleanup to avoid double mount in StackBlitz embeds

cf1660b

Co-authored-by: Nicolas DUBIEN <[email protected]>

dubzzz commented Mar 27, 2026

View reviewed changes

github-actions Bot and others added 2 commits March 27, 2026 16:32

Revert to @stackblitz/sdk embedProject() API

53591d9

Replace the form POST workaround with the proper StackBlitz SDK embedProject() API. Add @stackblitz/sdk back to website dependencies. Co-authored-by: Nicolas DUBIEN <[email protected]>

better config

d351320

dubzzz added 3 commits April 8, 2026 21:51

add type definition in advents

1333403

fix typo on 22nd

439094b

Merge remote-tracking branch 'origin/main' into claude/stackblitz-vit…

e74bdd3

…est-migration-mq5sK

dubzzz added 2 commits April 8, 2026 22:07

revamp playground

5df54aa

larger playground

60ea699

dubzzz changed the title ~~🔄 Migrate playgrounds from Sandpack to StackBlitz~~ 📝 Migrate playgrounds in documentation to StackBlitz Apr 8, 2026

type issue

58f0ba0

dubzzz enabled auto-merge (squash) April 8, 2026 22:17

dubzzz merged commit 0886ed6 into main Apr 8, 2026
48 checks passed

dubzzz deleted the claude/stackblitz-vitest-migration-mq5sK branch April 8, 2026 22:23

Uh oh!

Conversation

dubzzz commented Mar 19, 2026

Description

Key Changes

Benefits

Checklist

Uh oh!

changeset-bot Bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

dubzzz Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

claude Bot Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dubzzz Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

dubzzz Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

dubzzz commented Mar 27, 2026

Uh oh!

claude Bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Addressing untreated review comments

Changes made (4a5d2a1)

Note: CSP update needed

Uh oh!

dubzzz commented Mar 27, 2026

Uh oh!

claude Bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reverting to StackBlitz SDK with proper CSP

Changes made (53591d9)

CSP update needed (manual)

Uh oh!

dubzzz commented Apr 8, 2026

Uh oh!

claude Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checking Advent of PBT puzzles for function name mismatches

Results

Bonus finding: Day 10 return type mismatch

Uh oh!

socket-security Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Mar 19, 2026 •

edited

Loading

claude Bot Mar 23, 2026 •

edited

Loading

claude Bot commented Mar 27, 2026 •

edited

Loading

Changes made (`4a5d2a1`)

claude Bot commented Mar 27, 2026 •

edited

Loading

Changes made (`53591d9`)

claude Bot commented Apr 8, 2026 •

edited

Loading

socket-security Bot commented Apr 8, 2026 •

edited

Loading

pkg-pr-new Bot commented Apr 8, 2026 •

edited

Loading

codecov Bot commented Apr 8, 2026 •

edited

Loading