Skip to content

Add standalone TypeScript 7 playground - #3653

Draft
Jake Bailey (jakebailey) wants to merge 16 commits into
microsoft:v2from
jakebailey:ts7-playground
Draft

Jake Bailey (jakebailey) wants to merge 16 commits into
microsoft:v2from
jakebailey:ts7-playground

Conversation

@jakebailey

Copy link
Copy Markdown
Member

prototypin

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.
@jakebailey Jake Bailey (jakebailey) added the deploy-preview Enables automatic deployments to preview environments on a PR label Sep 16, 2026
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.
@github-actions

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3653.centralus.5.azurestaticapps.net

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

deploy-preview Enables automatic deployments to preview environments on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant