Add Playground v2 with TS7, multifile, and more

.gitattributes

@@ -1 +1,2 @@
 * -text
+patches/*.patch -whitespace

.gitignore

@@ -78,6 +78,9 @@ packages/documentation/output/attribution.json
 packages/sandbox/src/releases.json
 packages/sandbox/src/release_data.ts
 packages/typescriptlang-org/src/lib/documentationNavigation.ts
+packages/typescriptlang-org/static/play/v2/
+packages/typescriptlang-org/static/play/7/
+packages/typescriptlang-org/static/v2/
 
 .idea/
 

package.json

@@ -41,7 +41,9 @@
       "webpack": "^5.105.3"
     },
     "patchedDependencies": {
-      "gatsby-remark-shiki-twoslash@3.0.38": "patches/gatsby-remark-shiki-twoslash@3.0.38.patch"
+      "@vscode/monaco-lsp-client@0.1.0": "patches/@vscode__monaco-lsp-client@0.1.0.patch",
+      "gatsby-remark-shiki-twoslash@3.0.38": "patches/gatsby-remark-shiki-twoslash@3.0.38.patch",
+      "monaco-editor-core@0.56.0": "patches/monaco-editor-core@0.56.0.patch"
     },
     "ignoredBuiltDependencies": [
       "@parcel/watcher",

packages/playground-v2/README.md

@@ -0,0 +1,18 @@
+# Playground v2
+
+The application served at `/play/v2/`.
+
+Run the normal repository bootstrap first. From the repository root:
+
+```sh
+pnpm --filter @typescript/playground-v2 dev
+pnpm --filter @typescript/playground-v2 typecheck
+pnpm --filter @typescript/playground-v2 test
+pnpm --filter @typescript/playground-v2 build
+```
+
+Compiler code is fetched at runtime, never bundled.
+Installed compiler packages are development dependencies for types and tests,
+not the default runtime version.
+
+See [package type acquisition](src/ata/README.md) for its API and limitations.

packages/playground-v2/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@typescript/playground-v2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "dev": "node scripts/build.mjs --serve",
+    "test": "node scripts/test-ata.mjs && node scripts/smoke-test.mjs",
+    "typecheck": "node node_modules/typescript/bin/tsc --noEmit && node node_modules/typescript/bin/tsc -p tsconfig.test.json"
+  },
+  "dependencies": {
+    "@bjorn3/browser_wasi_shim": "^0.4.2",
+    "@fontsource/nunito-sans": "^5.2.6",
+    "@vscode/monaco-lsp-client": "github:microsoft/monaco-editor#13f0c872dcf352815cc28d92dfff496c9839ea5c&path:/monaco-lsp-client",
+    "coi-serviceworker": "^0.1.7",
+    "hack-font": "^3.3.0",
+    "jsonc-parser": "^3.3.1",
+    "lz-string": "^1.5.0",
+    "monaco-editor": "0.56.0",
+    "monaco-editor-core": "0.56.0",
+    "reflect-metadata": "^0.2.2",
+    "semver": "7.7.4",
+    "vscode-json-languageservice": "^5.3.11",
+    "vscode-languageserver-textdocument": "^1.0.11"
+  },
+  "devDependencies": {
+    "@typescript/typescript": "npm:typescript@7.1.0-dev.20261030.1",
+    "@typescript/typescript-wasip1-wasm": "7.1.0-dev.20261030.1",
+    "@types/semver": "^7.7.1",
+    "esbuild": "^0.27.3",
+    "typescript": "*"
+  }
+}

packages/playground-v2/scripts/build.mjs

@@ -0,0 +1,82 @@
+import { context } from "esbuild"
+import { cp, mkdir, readFile, rm, writeFile } from "node:fs/promises"
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { compatibilityHtml, compatibilityPaths, playgroundPath } from "./routes.mjs"
+
+const packageDirectory = resolve(dirname(fileURLToPath(import.meta.url)), "..")
+const websiteDirectory = resolve(packageDirectory, "../..")
+const outputDirectory = resolve(packageDirectory, "dist")
+const websitePlayDirectory = resolve(websiteDirectory, "packages/typescriptlang-org/static/play")
+const websiteStaticDirectory = resolve(websitePlayDirectory, "v2")
+const compatibilityDirectories = compatibilityPaths.map(path =>
+  resolve(websiteDirectory, "packages/typescriptlang-org/static", path)
+)
+const serve = process.argv.includes("--serve")
+const playgroundBase = serve ? "/" : process.env.PLAYGROUND_BASE ?? playgroundPath
+
+const editorWorker = fileURLToPath(import.meta.resolve("monaco-editor/editor/editor.worker"))
+const coiServiceWorker = fileURLToPath(import.meta.resolve("coi-serviceworker/coi-serviceworker.min.js"))
+
+const indexHtml = (await readFile(resolve(packageDirectory, "src/index.html"), "utf8")).replaceAll(
+  "__PLAYGROUND_BASE__",
+  playgroundBase
+)
+
+await rm(outputDirectory, { force: true, recursive: true })
+await mkdir(outputDirectory, { recursive: true })
+await Promise.all([
+  writeFile(resolve(outputDirectory, "index.html"), indexHtml),
+  cp(coiServiceWorker, resolve(outputDirectory, "coi-serviceworker.min.js")),
+])
+
+const buildContext = await context({
+  absWorkingDir: packageDirectory,
+  bundle: true,
+  conditions: ["browser", "default"],
+  entryNames: "[name]",
+  entryPoints: {
+    main: resolve(packageDirectory, "src/main.ts"),
+    "editor.worker": editorWorker,
+    "strada.worker": resolve(packageDirectory, "src/strada.worker.ts"),
+    "native.worker": resolve(packageDirectory, "src/native.worker.ts"),
+    "tsgo-lsp.worker": resolve(packageDirectory, "src/tsgo-lsp.worker.ts"),
+  },
+  format: "esm",
+  loader: {
+    ".ttf": "file",
+    ".woff": "file",
+    ".woff2": "file",
+  },
+  outdir: outputDirectory,
+  metafile: true,
+  platform: "browser",
+  sourcemap: true,
+  target: ["es2022"],
+})
+
+if (serve) {
+  await buildContext.watch()
+  const server = await buildContext.serve({
+    host: "127.0.0.1",
+    port: 4173,
+    servedir: outputDirectory,
+  })
+  console.log(`TypeScript Playground v2: http://${server.host}:${server.port}`)
+} else {
+  const result = await buildContext.rebuild()
+  const compilerInputs = Object.keys(result.metafile.inputs).filter(path =>
+    /node_modules\/(?:@typescript\/)?typescript(?:-wasip1-wasm)?\//.test(path)
+  )
+  if (compilerInputs.length) throw new Error(`Compiler implementation was bundled: ${compilerInputs.join(", ")}`)
+  await buildContext.dispose()
+  await rm(websitePlayDirectory, { force: true, recursive: true })
+  await cp(outputDirectory, websiteStaticDirectory, { recursive: true })
+  await Promise.all(
+    compatibilityDirectories.map(async directory => {
+      await mkdir(directory, { recursive: true })
+      await writeFile(resolve(directory, "index.html"), compatibilityHtml)
+    })
+  )
+  console.log(`Built Playground v2 in ${outputDirectory}`)
+}

packages/playground-v2/scripts/routes.mjs

@@ -0,0 +1,14 @@
+export const playgroundPath = "/play/v2/"
+export const compatibilityPaths = ["play/7", "v2"]
+export const compatibilityScript = `location.replace(${JSON.stringify(
+  playgroundPath
+)} + location.search + location.hash)`
+
+export const compatibilityHtml = `<!doctype html>
+<meta charset="utf-8">
+<title>TypeScript Playground v2</title>
+<script>
+  ${compatibilityScript}
+</script>
+<noscript><a href="${playgroundPath}">Continue to TypeScript Playground v2</a></noscript>
+`

packages/playground-v2/scripts/smoke-test.mjs

@@ -0,0 +1,86 @@
+import assert from "node:assert/strict"
+import { readFile, readdir } from "node:fs/promises"
+import { runInNewContext } from "node:vm"
+import { compatibilityHtml, compatibilityPaths, compatibilityScript, playgroundPath } from "./routes.mjs"
+import { API } from "@typescript/typescript/sync"
+import { instantiateWasm, WasmTransport } from "@typescript/typescript/wasm"
+import { wasmURL } from "@typescript/typescript-wasip1-wasm"
+
+const wasm = await readFile(wasmURL)
+const module = await WebAssembly.compile(wasm)
+const instance = await instantiateWasm(module)
+const transport = new WasmTransport({ instance, cwd: "/workspace" })
+const api = new API({ transport })
+
+try {
+  assert(compatibilityHtml.includes(`<script>\n  ${compatibilityScript}\n</script>`))
+  for (const path of compatibilityPaths) {
+    const original = new URL(`https://example.test/${path}/?ts=6.0.3&target=99#code/v2/encoded+project`)
+    let redirected
+    runInNewContext(compatibilityScript, {
+      location: {
+        search: original.search,
+        hash: original.hash,
+        replace(value) {
+          redirected = value
+        },
+      },
+    })
+    assert.equal(redirected, `${playgroundPath}${original.search}${original.hash}`)
+  }
+
+  const libListURL = new URL(import.meta.resolve("@typescript/typescript-wasip1-wasm/lib/libFiles.json"))
+  const libFileNames = JSON.parse(await readFile(libListURL, "utf8"))
+  assert.deepEqual(
+    libFileNames,
+    (await readdir(new URL("./", libListURL))).filter(fileName => /^lib(?:\..+)?\.d\.ts$/.test(fileName)).sort()
+  )
+  for (const fileName of libFileNames) {
+    transport.setFile(`/${fileName}`, await readFile(new URL(fileName, libListURL), "utf8"))
+  }
+
+  const files = {
+    "/workspace/tsconfig.json": JSON.stringify({
+      compilerOptions: {
+        declaration: true,
+        module: "CommonJS",
+        strict: true,
+        target: "ES2022",
+      },
+      include: ["./src/**/*"],
+    }),
+    "/workspace/src/greet.ts": "export const greet = (name: string) => `Hello, ${name}!`;",
+    "/workspace/src/index.ts": 'import { greet } from "./greet"; console.log(greet("TS7"));',
+  }
+  for (const [fileName, source] of Object.entries(files)) {
+    transport.setFile(fileName, source)
+  }
+
+  const config = api.readConfigFile("/workspace/tsconfig.json")
+  assert.equal(config.error, undefined)
+  const parsed = api.parseJsonConfigFileContent(config.config, {
+    configFileName: "/workspace/tsconfig.json",
+  })
+  assert.deepEqual(parsed.fileNames, ["/workspace/src/greet.ts", "/workspace/src/index.ts"])
+  const program = api.createProgram(parsed.fileNames, parsed.options, {
+    projectReferences: parsed.projectReferences,
+    configFileParsingDiagnostics: parsed.errors,
+  })
+  try {
+    assert.equal(program.getSyntacticDiagnostics().length, 0)
+    assert.equal(program.getSemanticDiagnostics().length, 0)
+    const emit = program.emitToString()
+    assert.equal(emit.emitSkipped, false)
+    assert.deepEqual(
+      [...emit.outputFiles.keys()],
+      ["/workspace/src/greet.d.ts", "/workspace/src/greet.js", "/workspace/src/index.d.ts", "/workspace/src/index.js"]
+    )
+    assert.match(emit.outputFiles.get("/workspace/src/index.js").text, /require\("\.\/greet"\)/)
+  } finally {
+    program.dispose()
+  }
+} finally {
+  api.close()
+}
+
+console.log("TypeScript WASM API smoke test passed")

packages/playground-v2/scripts/test-ata.mjs

@@ -0,0 +1,32 @@
+import { build } from "esbuild"
+import { spawnSync } from "node:child_process"
+import { mkdir, rm } from "node:fs/promises"
+import { resolve } from "node:path"
+
+const packageDirectory = resolve(import.meta.dirname, "..")
+const testFiles = ["ata.test.mjs", "native-compiler.test.mjs", "lsp-filesystem.test.mjs"].map(name =>
+  resolve(packageDirectory, "dist", name)
+)
+await mkdir(resolve(packageDirectory, "dist"), { recursive: true })
+try {
+  await build({
+    absWorkingDir: packageDirectory,
+    bundle: true,
+    conditions: ["browser"],
+    entryPoints: ["src/ata/ata.test.ts", "src/native-compiler.test.ts", "src/lsp-filesystem.test.ts"],
+    entryNames: "[name]",
+    outExtension: { ".js": ".mjs" },
+    external: ["jsonc-parser"],
+    format: "esm",
+    outdir: resolve(packageDirectory, "dist"),
+    platform: "node",
+    target: ["es2022"],
+  })
+  const result = spawnSync(process.execPath, ["--test", ...testFiles], {
+    stdio: "inherit",
+  })
+  if (result.error) throw result.error
+  if (result.status !== 0) process.exitCode = result.status ?? 1
+} finally {
+  await Promise.all(testFiles.map(file => rm(file, { force: true })))
+}

packages/playground-v2/src/ata/README.md

@@ -0,0 +1,18 @@
+# Package type acquisition
+
+`PackageTypeAcquirer.acquire` accepts source files, a parser-backed `discover`
+callback, acquisition options, and an abort signal. It returns a complete declaration
+snapshot and per-package errors. See [types.ts](types.ts) for the interfaces.
+
+Only declarations and package metadata are downloaded, never package JavaScript.
+Packages use their own declarations when available, falling back to
+DefinitelyTyped. Node builtins use `@types/node`. Source annotations of the form
+`// types: VERSION` select a package version.
+
+The Playground's automatic-types setting disables all acquisition. Otherwise,
+the root configuration's `typeAcquisition` options apply; exclusions win.
+Inherited acquisition settings and filename-based inference are not supported.
+An explicit root `compilerOptions.types` list is preserved.
+
+Only one version of each package can be loaded at a time. DefinitelyTyped
+fallback uses its latest version, which may not support historical compilers.