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/package.json

@@ -0,0 +1,35 @@
+{
+  "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",
+    "vendor-resources": "node scripts/vendor-resources.mjs",
+    "update-compiler": "node scripts/update-compiler.mjs"
+  },
+  "dependencies": {
+    "@bjorn3/browser_wasi_shim": "^0.4.2",
+    "@fontsource/nunito-sans": "^5.2.6",
+    "@typescript/typescript": "npm:typescript@7.1.0-dev.20261030.1",
+    "@typescript/typescript-wasip1-wasm": "7.1.0-dev.20261030.1",
+    "@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": {
+    "@types/semver": "^7.7.1",
+    "esbuild": "^0.27.3",
+    "typescript": "*"
+  }
+}

packages/playground-v2/scripts/build.mjs

@@ -0,0 +1,96 @@
+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 vendorDirectory = resolve(packageDirectory, "vendor")
+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 releaseIndex = resolve(packageDirectory, "vendor/versions.json")
+const examplesIndex = resolve(packageDirectory, "vendor/examples.json")
+const helpIndex = resolve(packageDirectory, "vendor/help.json")
+const editorWorker = fileURLToPath(import.meta.resolve("monaco-editor/editor/editor.worker"))
+const coiServiceWorker = fileURLToPath(import.meta.resolve("coi-serviceworker/coi-serviceworker.min.js"))
+
+const distribution = JSON.parse(await readFile(resolve(vendorDirectory, "distribution.json"), "utf8"))
+const version = distribution.version
+const indexHtml = (await readFile(resolve(packageDirectory, "src/index.html"), "utf8"))
+  .replaceAll("__PLAYGROUND_BASE__", playgroundBase)
+  .replaceAll("__COMPILER_VERSION__", version)
+  .replace("<title>", `<title data-typescript-version="${version}">`)
+
+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")),
+  cp(releaseIndex, resolve(outputDirectory, "versions.json")),
+  cp(examplesIndex, resolve(outputDirectory, "examples.json")),
+  cp(helpIndex, resolve(outputDirectory, "help.json")),
+  cp(resolve(vendorDirectory, "distribution.json"), resolve(outputDirectory, "distribution.json")),
+])
+
+const buildContext = await context({
+  absWorkingDir: packageDirectory,
+  bundle: true,
+  conditions: ["browser", "default"],
+  define: {
+    __COMPILER_DISTRIBUTION_URL__: JSON.stringify(process.env.COMPILER_DISTRIBUTION_URL || "./distribution.json"),
+    __TS_VERSION__: JSON.stringify(version),
+  },
+  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 =>
+    /(?:vendor|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 TypeScript ${version} playground 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/scripts/update-compiler.mjs

@@ -0,0 +1,76 @@
+import { createHash } from "node:crypto"
+import { readFile, writeFile } from "node:fs/promises"
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const packageDirectory = resolve(dirname(fileURLToPath(import.meta.url)), "..")
+const mainURL = new URL(import.meta.resolve("@typescript/typescript/package.json"))
+const artifactURL = new URL(import.meta.resolve("@typescript/typescript-wasip1-wasm/package.json"))
+const main = JSON.parse(await readFile(mainURL, "utf8"))
+const artifact = JSON.parse(await readFile(artifactURL, "utf8"))
+const dependencies = JSON.parse(await readFile(resolve(packageDirectory, "package.json"), "utf8")).dependencies
+const version = main.version
+const revision = main.gitHead
+if (
+  dependencies["@typescript/typescript"] !== `npm:typescript@${version}` ||
+  dependencies["@typescript/typescript-wasip1-wasm"] !== version
+) {
+  throw new Error("Install the pinned compiler dependencies before updating the distribution")
+}
+if (version !== artifact.version || !revision || revision !== artifact.gitHead) {
+  throw new Error("TypeScript API and WASI artifact versions and revisions must match")
+}
+if (main.imports) throw new Error("The compiler distribution must not require package-private imports")
+
+function entry(manifest, subpath) {
+  const value = manifest.exports[subpath]
+  const path = typeof value === "string" ? value : value?.default
+  if (typeof path !== "string" || !path.startsWith("./")) throw new Error(`Missing package export: ${subpath}`)
+  return path
+}
+
+function cdnEntry(manifest, subpath) {
+  return new URL(entry(manifest, subpath), `https://unpkg.com/${manifest.name}@${version}/`).href
+}
+
+const libraryIndexURL = new URL(entry(artifact, "./lib/libFiles.json"), artifactURL)
+const libraries = JSON.parse(await readFile(libraryIndexURL, "utf8"))
+if (
+  !Array.isArray(libraries) ||
+  libraries.length === 0 ||
+  libraries.some(name => typeof name !== "string" || !/^lib(?:\.[\w.]+)?\.d\.ts$/.test(name))
+) {
+  throw new Error("Invalid WASI library index")
+}
+const paths = {
+  sync: cdnEntry(main, "./sync"),
+  async: cdnEntry(main, "./async"),
+  ast: cdnEntry(main, "./ast"),
+  host: cdnEntry(main, "./wasm"),
+  wasm: cdnEntry(artifact, "./lib/tsc.wasm"),
+  libraryIndex: cdnEntry(artifact, "./lib/libFiles.json"),
+  schema: cdnEntry(main, "./schemas/tsconfig.schema.json"),
+}
+const files = [
+  new URL(entry(artifact, "./lib/tsc.wasm"), artifactURL),
+  libraryIndexURL,
+  new URL(entry(main, "./schemas/tsconfig.schema.json"), mainURL),
+  ...libraries.map(name => new URL(name, libraryIndexURL)),
+]
+const bytes = await Promise.all(files.map(url => readFile(url)))
+const cacheKey = createHash("sha256").update(`${version}\0${revision}`).digest("hex").slice(0, 16)
+await writeFile(
+  resolve(packageDirectory, "vendor/distribution.json"),
+  `${JSON.stringify(
+    {
+      version,
+      revision,
+      cacheKey,
+      ...paths,
+      downloadBytes: bytes.reduce((sum, value) => sum + value.byteLength, 0),
+    },
+    undefined,
+    2
+  )}\n`
+)
+console.log(`Pinned the CDN distribution to TypeScript ${version} at ${revision}`)