Add standalone TypeScript 7 playground

.gitattributes

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

.gitignore

@@ -66,6 +66,10 @@ typings/
 
 # tdsx
 dist
+!packages/playground-v2/vendor/typescript/dist/
+!packages/playground-v2/vendor/typescript/dist/**
+!packages/playground-v2/vendor/typescript-wasip1-wasm/dist/
+!packages/playground-v2/vendor/typescript-wasip1-wasm/dist/**
 
 .lighthouserc.json
 packages/documentation/output/attribution.json
@@ -78,6 +82,8 @@ 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/7/
+packages/typescriptlang-org/static/play/v2/
 
 .idea/
 

package.json

@@ -41,6 +41,7 @@
       "webpack": "^5.105.3"
     },
     "patchedDependencies": {
+      "@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"
     },
     "ignoredBuiltDependencies": [

packages/ata/src/edgeCases.ts

@@ -58,7 +58,10 @@ export const mapModuleNameToModule = (moduleSpecifier: string) => {
     "zlib",
   ]
 
-  if (moduleSpecifier.indexOf("node:") === 0 || builtInNodeMods.includes(moduleSpecifier)) {
+  if (
+    moduleSpecifier.indexOf("node:") === 0 ||
+    builtInNodeMods.some(moduleName => moduleSpecifier === moduleName || moduleSpecifier.startsWith(`${moduleName}/`))
+  ) {
     return "node"
   }
 

packages/ata/src/index.ts

@@ -82,7 +82,9 @@ export const setupTypeAcquisition = (config: ATABootstrapConfig) => {
     )
 
     const dtTreesOnly = dtTrees.filter(t => !("error" in t)) as NPMTreeMeta[]
-    const dtsFilesFromDT = dtTreesOnly.map(t => treeToDTSFiles(t, `/node_modules/@types/${getDTName(t.moduleName).replace("types__", "")}`))
+    const dtsFilesFromDT = dtTreesOnly.map(t =>
+      treeToDTSFiles(t, `/node_modules/@types/${getDTName(t.moduleName).replace("types__", "")}`)
+    )
 
     // Collect all the npm and DT DTS requests and flatten their arrays
     const allDTSFiles = dtsFilesFromNPM.concat(dtsFilesFromDT).reduce((p, c) => p.concat(c), [])
@@ -91,10 +93,15 @@ export const setupTypeAcquisition = (config: ATABootstrapConfig) => {
       config.delegate.started?.()
     }
 
-    // Grab the package.jsons for each dependency
-    for (const tree of treesOnly) {
-      let prefix = `/node_modules/${tree.moduleName}`
-      if (dtTreesOnly.includes(tree)) prefix = `/node_modules/@types/${getDTName(tree.moduleName).replace("types__", "")}`
+    // Grab the package.jsons for each package that supplied declarations.
+    const declarationTrees = [
+      ...hasDTS.map(tree => ({ prefix: `/node_modules/${tree.moduleName}`, tree })),
+      ...dtTreesOnly.map(tree => ({
+        prefix: `/node_modules/@types/${getDTName(tree.moduleName).replace("types__", "")}`,
+        tree,
+      })),
+    ]
+    for (const { prefix, tree } of declarationTrees) {
       const path = prefix + "/package.json"
       const pkgJSON = await getDTSFileForModuleWithVersion(config, tree.moduleName, tree.version, "/package.json")
 

packages/ata/tests/edgeCases.spec.ts

@@ -9,6 +9,11 @@ describe(mapModuleNameToModule, () => {
     expect(mapModuleNameToModule("node:fs")).toEqual("node")
   })
 
+  it("handles subpaths of known Node modules", () => {
+    expect(mapModuleNameToModule("readline/promises")).toEqual("node")
+    expect(mapModuleNameToModule("stream/iter")).toEqual("node")
+  })
+
   it("handles mandatorily-prefixed node: identifiers", () => {
     expect(mapModuleNameToModule("node:test")).toEqual("node")
     expect(mapModuleNameToModule("test")).toEqual("test")

packages/playground-v2/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@typescript/playground-v2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "dev": "node scripts/build.mjs --serve",
+    "test": "node scripts/smoke-test.mjs",
+    "typecheck": "tsc --noEmit",
+    "vendor-resources": "node scripts/vendor-resources.mjs",
+    "vendor-typescript": "node scripts/vendor-typescript.mjs"
+  },
+  "dependencies": {
+    "@bjorn3/browser_wasi_shim": "^0.4.2",
+    "@fontsource/nunito-sans": "^5.2.6",
+    "@typescript/ata": "file:vendor/ata",
+    "@typescript/typescript": "file:vendor/typescript",
+    "@typescript/typescript-wasip1-wasm": "file:vendor/typescript-wasip1-wasm",
+    "@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",
+    "vscode-json-languageservice": "^5.3.11",
+    "vscode-languageserver-textdocument": "^1.0.11"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.3",
+    "typescript": "*"
+  }
+}

packages/playground-v2/scripts/build.mjs

@@ -0,0 +1,122 @@
+import { context } from "esbuild"
+import { createHash } from "node:crypto"
+import { cp, mkdir, readFile, readdir, rm, writeFile } from "node:fs/promises"
+import { basename, dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const packageDirectory = resolve(dirname(fileURLToPath(import.meta.url)), "..")
+const websiteDirectory = resolve(packageDirectory, "../..")
+const vendorDirectory = resolve(packageDirectory, "vendor")
+const outputDirectory = resolve(packageDirectory, "dist")
+const websiteStaticDirectory = resolve(websiteDirectory, "packages/typescriptlang-org/static/play/v2")
+const legacyWebsiteStaticDirectory = resolve(websiteDirectory, "packages/typescriptlang-org/static/play/7")
+const serve = process.argv.includes("--serve")
+const playgroundBase = serve ? "/" : process.env.PLAYGROUND_BASE ?? "/play/v2/"
+
+const wasmFile = resolve(vendorDirectory, "typescript-wasip1-wasm/lib/tsc.wasm")
+const libDirectory = resolve(vendorDirectory, "lib")
+const configSchema = resolve(websiteDirectory, "packages/tsconfig-reference/scripts/schema/result/schema.json")
+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 version = (await readFile(resolve(vendorDirectory, "version.txt"), "utf8")).trim()
+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 })
+const libFileNames = (await readdir(libDirectory)).filter(fileName => /^lib(?:\..+)?\.d\.ts$/.test(fileName)).sort()
+const libFiles = Object.fromEntries(
+  await Promise.all(
+    libFileNames.map(async fileName => [
+      `/${basename(fileName)}`,
+      await readFile(resolve(libDirectory, fileName), "utf8"),
+    ])
+  )
+)
+const libFilesJSON = JSON.stringify(libFiles)
+const [wasmBytes, schemaBytes] = await Promise.all([readFile(wasmFile), readFile(configSchema)])
+const assetCacheVersion = createHash("sha256")
+  .update(wasmBytes)
+  .update(libFilesJSON)
+  .update(schemaBytes)
+  .digest("hex")
+  .slice(0, 16)
+await Promise.all([
+  writeFile(resolve(outputDirectory, "index.html"), indexHtml),
+  cp(coiServiceWorker, resolve(outputDirectory, "coi-serviceworker.min.js")),
+  cp(configSchema, resolve(outputDirectory, "tsconfig.schema.json")),
+  cp(releaseIndex, resolve(outputDirectory, "versions.json")),
+  cp(examplesIndex, resolve(outputDirectory, "examples.json")),
+  cp(helpIndex, resolve(outputDirectory, "help.json")),
+  cp(wasmFile, resolve(outputDirectory, "tsc.wasm")),
+  writeFile(resolve(outputDirectory, "lib-files.json"), libFilesJSON),
+])
+
+const buildContext = await context({
+  absWorkingDir: packageDirectory,
+  bundle: true,
+  conditions: ["browser", "default"],
+  define: {
+    __ASSET_CACHE_VERSION__: JSON.stringify(assetCacheVersion),
+    __LOAD_ASSET_SIZES__: JSON.stringify({
+      libraries: Buffer.byteLength(libFilesJSON),
+      schema: schemaBytes.byteLength,
+      wasm: wasmBytes.byteLength,
+    }),
+    __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"),
+    "tsgo-lsp.worker": resolve(packageDirectory, "src/tsgo-lsp.worker.ts"),
+  },
+  format: "esm",
+  loader: {
+    ".ttf": "file",
+    ".woff": "file",
+    ".woff2": "file",
+  },
+  outdir: outputDirectory,
+  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 {
+  await buildContext.rebuild()
+  await buildContext.dispose()
+  await Promise.all([
+    rm(websiteStaticDirectory, { force: true, recursive: true }),
+    rm(legacyWebsiteStaticDirectory, { force: true, recursive: true }),
+  ])
+  await cp(outputDirectory, websiteStaticDirectory, { recursive: true })
+  await mkdir(legacyWebsiteStaticDirectory, { recursive: true })
+  await writeFile(
+    resolve(legacyWebsiteStaticDirectory, "index.html"),
+    `<!doctype html>
+<meta charset="utf-8">
+<title>TypeScript Playground v2</title>
+<script>
+  location.replace("/play/v2/" + location.search + location.hash)
+</script>
+<noscript><a href="/play/v2/">Continue to TypeScript Playground v2</a></noscript>
+`
+  )
+  console.log(`Built TypeScript ${version} playground in ${outputDirectory}`)
+}

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

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict"
+import { readFile, readdir } from "node:fs/promises"
+import { resolve } from "node:path"
+import { API } from "@typescript/typescript/unstable/sync"
+import { instantiateWasm, WasmTransport, wasmURL } from "@typescript/typescript-wasip1-wasm"
+
+const packageDirectory = resolve(import.meta.dirname, "..")
+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 {
+  const libDirectory = resolve(packageDirectory, "vendor/lib")
+  const libFileNames = (await readdir(libDirectory)).filter(fileName => /^lib(?:\..+)?\.d\.ts$/.test(fileName))
+  for (const fileName of libFileNames) {
+    transport.setFile(`/${fileName}`, await readFile(resolve(libDirectory, fileName), "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")