Repository navigation
Add Playground v2 with TS7, multifile, and more - #3653
Merged
Jake Bailey (jakebailey) merged 162 commits intoNov 5, 2026
Merged
Conversation
Build a static Monaco 0.56 playground against the local wasip1 compiler API. Support Twoslash type queries, diagnostics, JavaScript emit, standard library types, and a browser console API without playground plugins.
Add the /play/7-1/ Gatsby route and materialize the standalone bundle as ignored static assets during site start and production builds.
Make the playground deployable from a standalone website checkout by committing the wasip1 API packages, standard libraries, WASM module, version metadata, and legal notices. Brand the route as /play/7/.
Force-add the generated API package output and wasip1 module because the website's global dist ignore otherwise omits the files required by a fresh checkout.
Jake Bailey (jakebailey)
added
the
deploy-preview
Port the browser WASI and Monaco LSP transport from the 2026 GopherCon talk. Serve the playground directly at /play/7/ so its service worker can establish cross-origin isolation for SharedArrayBuffer. Keep the synchronous compiler API authoritative for diagnostics, Twoslash, emit, and window.ts while LSP provides completion, hover, signature help, navigation, references, rename, and related editor features.
Set an explicit /play/7/ base in production so Azure's slashless /play/7 route resolves scripts, styles, workers, libraries, and the service worker from the playground directory.
Canonicalize Azure's slashless /play/7 URL before the scoped cross-origin isolation service worker starts. This lets the worker control /play/7/ after its activation reload without repeatedly registering.
Add a virtual project with editable tsconfig.json and multiple source files. Drive native compilation from the config and show all emitted files together in a highlighted, non-Monaco output pane. Restore Run with captured CommonJS console output and reuse the existing playground loading grid while the compiler API and LSP initialize.
Add a collapsible file tree with nested file creation and default to src/index.ts. Persist the complete project and active file in an old-playground-style compressed #code URL. Enable declaration emit by default, trim display-only trailing newlines, remove Twoslash and WebAssembly branding, and provide local JSON Schema completion, hover, and validation for tsconfig.json and jsconfig.json.
Ignore trailing commas and suppress SchemaStore enum diagnostics when TypeScript accepts the value with different casing. Migrate projects saved before the src directory change so their config includes the moved files and enables declaration emit.
Stream the compiler, libraries, and config schema with real byte progress. Show WebAssembly compilation as indeterminate, report library mounting by file count, and finish with the actual LSP startup stages. Reuse the downloaded libraries in the LSP worker, add a Reset control for non-emitting saved projects, and explicitly route Ctrl/Cmd-click through go to definition.
Store the compiler WASM, library bundle, and config schema in a content-versioned browser cache. Refreshes now read those artifacts locally and new compiler artifacts automatically use a new cache namespace. Remove the implementation-detail message about WebAssembly compile progress while keeping that phase honestly indeterminate.
Enable Monaco semantic highlighting and add explicit theme colors for TypeScript semantic token kinds. Recognize bundled library URIs so definitions such as console.log open the read-only lib.dom.d.ts model.
Replace the full-screen loading blocker with a compact translucent progress card. Keep the file tree, Monaco editor, emit pane, and Run output visible and editable throughout compiler and LSP startup.
Widen the explorer slightly and add vertical hierarchy guides, branch connectors, stronger folder rows, and consistent per-level indentation.
Register the ^? inlay provider for JavaScript and build a supplemental allowJs program for source models outside the configured project. This matches LSP inferred-project hover behavior without changing tsconfig-driven emit.
Update the playground to the current wasip1 compiler, JavaScript API client, standard libraries, and legal notices. Adapt createProgram calls to the new API signature and normalize bundled library definition URIs for Monaco navigation.
Add an in-page compiler selector for Native 7.1, classic stable releases, Nightly, and custom or PR CDN build IDs. Run classic compilers in a dedicated worker with project emit, diagnostics, hover, completion, definitions, references, signature help, Run, and type queries. Accept old ?ts= and #code/ URLs, migrate @filename multi-file sources and legacy compiler-option parameters, preserve project state while switching backends, and add a Native 7.1 handoff to the classic playground version menu.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Stack the file browser, editor, and output at phone widths so the workspace remains usable without horizontal page scrolling. Add a collapsible file browser, touch-sized controls, safe-area spacing, and landscape handling.
Make definition jumps reversible so users can inspect project or bundled declarations without losing their previous editor location. Expose Back and Forward controls and label bundled library files clearly.
Provide an explicit Delete action for the active project file while keeping bundled declarations protected and ensuring the project always retains a fallback file. Reload after deletion so the WASI language server is rebuilt without stale files from its startup filesystem.
Selecting a classic TypeScript release should not remove the language-service features users expect from the existing playground. Port Monaco's TypeScript adapters across the Strada worker boundary for rename, formatting, symbols, highlights, quick fixes, inlay hints, and richer completions, with compatibility fallbacks for older compiler APIs.
Inline markers and a toolbar count are not enough when a project has multiple files or configuration diagnostics. Show a severity-sorted Problems list with file locations and direct navigation for both Native and Strada diagnostics.
Package imports should provide diagnostics, completion, and definition navigation without requiring users to manually copy declaration files into the project. Reuse the website's existing ATA implementation, cache downloaded declarations, mount them into Native and Strada, and restart Native only when its immutable LSP filesystem needs newly acquired files.
A replacement playground should retain the existing learning entry points without depending on generated website files that are absent from clean package builds. Bundle the example catalog, load examples as real projects with their compiler settings, and provide responsive help topics written for the unified workspace.
The TS7 playground package must build before repository bootstrap and without generated workspace package outputs. Bundle the existing ATA runtime, declarations, package metadata, and license with the other static playground dependencies.
Examples and help add useful toolbar actions, but the desktop row can exceed the available width before the phone layout activates. Allow the toolbar actions to wrap independently while retaining the tablet workspace columns.
Ryan Cavanaugh (RyanCavanaugh)
previously approved these changes
Nov 3, 2026
Starting a fresh project should not change the compiler under test. Keep its version selector while discarding project files and other URL options, and choose compatible defaults for that compiler.
Jake Bailey (jakebailey)
requested a review
from Ryan Cavanaugh (RyanCavanaugh)
November 4, 2026 00:12
Ryan Cavanaugh (RyanCavanaugh)
previously approved these changes
Nov 4, 2026
Keep sharing focused on copyable links, Markdown and AST inspection. Remove the other external destinations and their unused project-export metadata so the menu and implementation stay aligned.
Ryan Cavanaugh (RyanCavanaugh)
previously approved these changes
Nov 4, 2026
Remove the in-app help surface rather than keeping unused content, routes and styles behind a hidden toolbar action.
Keep the project header compact while making file and symbolic-link creation available from one menu. The choices must remain reachable by keyboard and touch without being clipped by the scrolling sidebar.
Inspecting the current source in AST Viewer should leave the Playground open. Use a normal link so keyboard activation, middle-click and the browser's link menu retain their expected behavior.
Intermediate widths should not leave Settings stranded on a second row. Place Run beside Clear and Settings after the menus, and use an explicit grid so desktop and mobile layouts keep a consistent action order. Allow the workspace grid to shrink at the desktop breakpoint rather than contributing its previous pane widths to page overflow.
Creation should start with the path prompt, with both entry types available in the same place. Keep typed paths when changing kinds and require a target only for symbolic links.
Pane controls and Run output actions should feel like the toolbar, not unrelated small widgets. Share spacing, borders, typography, states and touch sizing while retaining the toolbar's own colors.
Symbolic links accept absolute project paths as well as relative targets. The label should reflect that rather than imply a relative-only limit.
Bare import aliases are not necessarily npm packages. Ignore specifiers that cannot name a package so unrelated imports can still acquire their types.
Restored projects must remain authoritative instead of being reprocessed as legacy URLs. Preserve JSONC, empty sources and selections, consume legacy settings once using the selected compiler's option metadata, and carry current edits when switching versions. Resolve the root config explicitly, including symlinks, so historical backends do not accidentally choose a nested project.
Diagnostics must keep their file and range, including acquired types. Only genuine option errors belong on directives; source errors that mention an option do not. Keep invalid config edits flowing to compiler diagnostics, and load readonly diagnostic documents without treating every cached declaration as a project root.
Rename and code actions must address the real models behind symlinks. Normalize edit URIs and merge duplicate alias edits before handing them to Monaco. Historical compilers must agree on local binding rename preferences, and must not offer file-path rename without actually moving files.
Ryan Cavanaugh (RyanCavanaugh)
previously approved these changes
Nov 4, 2026
The legacy compiler serializes these module kinds as enum values 101 and 102. Translate both to TSConfig strings so opening the project in the new Playground does not turn a valid setting into a config error.
Percent escapes are not part of the compressed alphabet. Reading them as LZ data can return empty text or garbage rather than an error. Decode URL escaping first without treating legitimate empty source as a failed import.
Contributor
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3653.centralus.5.azurestaticapps.net |
Jake Bailey (jakebailey)
requested a review
from Ryan Cavanaugh (RyanCavanaugh)
November 4, 2026 21:21
Jake Bailey (jakebailey)
enabled auto-merge (squash)
November 4, 2026 21:40
Ryan Cavanaugh (RyanCavanaugh)
approved these changes
Nov 5, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This is an all new playground, which began as just making something to support TypeScript v7, but has turned into a feature-rich replacement with multiple files, real tsconfigs, multi file output, and more.