Add standalone TypeScript 7 playground

.changeset/legacy-playground-plugin-links.md

@@ -0,0 +1,5 @@
+---
+"create-typescript-playground-plugin": patch
+---
+
+Point plugin installation and development instructions to the legacy playground at `/oldplay/`.

.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/
+packages/typescriptlang-org/static/v2/
 
 .idea/
 

package.json

@@ -41,6 +41,7 @@
       "webpack": "^5.105.3"
     },
     "patchedDependencies": {
+      "@vscode/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]"
     },
     "ignoredBuiltDependencies": [

packages/create-typescript-playground-plugin/README.md

@@ -6,7 +6,7 @@ A template for creating new plugins for the TypeScript playground.
 <p>You need about 5 minutes, Node.js, yarn and Firefox/Edge or Chrome.</p>
 <p><b>Step 1</b>: Use the template to bootstrap: <code>yarn create typescript-playground-plugin playground-my-plugin</code></p>
 <p><b>Step 2</b>: Run <code>yarn start</code> in the new repo, to start up the local dev server</p>
-<p><b>Step 3</b>: Open the playground in your browser, click "Options" and enable <code>"Connect to localhost:5000"</code></p>
+<p><b>Step 3</b>: Open the <a href="https://www.typescriptlang.org/oldplay/">legacy playground</a> in your browser, click "Options" and enable <code>"Connect to localhost:5000"</code></p>
 <p><b>Step 4</b>: Refresh, and see the new tab. That's your plugin up and running</p>
 <p>&nbsp;</p>
 <p>That's all the pieces working in tandem, now you can make changes to the template and build out your plugin. The plugin in dev mode will always become forefront when connected, so you can re-load without a lot off clicks. To understand the template's technology, read the <a href='https://github.com/microsoft/TypeScript-Website/blob/v2/packages/create-typescript-playground-plugin/template/CONTRIBUTING.md'>CONTRIBUTING.md</a></p>

packages/create-typescript-playground-plugin/template/README.md

@@ -4,7 +4,7 @@ My new plugin for the TypeScript playground.
 
 ## Running this plugin
 
-- [Click this link](https://www.typescriptlang.org/play?install-plugin=[name]) to install
+- [Click this link](https://www.typescriptlang.org/oldplay?install-plugin=[name]) to install
 
 or
 

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": "tsc --noEmit && tsc -p tsconfig.test.json",
+    "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/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,117 @@
+import { context } from "esbuild"
+import { createHash } from "node:crypto"
+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 websiteStaticDirectory = resolve(websiteDirectory, "packages/typescriptlang-org/static/play")
+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 wasmFile = new URL(import.meta.resolve("@typescript/typescript-wasip1-wasm/lib/tsc.wasm"))
+const libListURL = new URL(import.meta.resolve("@typescript/typescript-wasip1-wasm/lib/libFiles.json"))
+const configSchema = new URL(import.meta.resolve("@typescript/typescript/schemas/tsconfig.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 = JSON.parse(await readFile(libListURL, "utf8"))
+const libFiles = Object.fromEntries(
+  await Promise.all(
+    libFileNames.map(async fileName => [
+      `/${fileName}`,
+      await readFile(new URL(fileName, libListURL), "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"),
+    "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,
+  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 rm(websiteStaticDirectory, { 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,12 @@
+export const playgroundPath = "/play/"
+export const compatibilityPaths = ["play/v2", "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/unstable/sync"
+import { instantiateWasm, WasmTransport } from "@typescript/typescript/unstable/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,31 @@
+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"].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"],
+    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], {
+    env: { ...process.env, PLAYGROUND_DIR: packageDirectory },
+    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 })))
+}