docs: playground button for TypeScript code example (#19671)

Tanujkanti4441 · web-flow · commit 34f0723e2d0f · 2025-08-07T13:19:01.000+02:00
* docs: add plyground button for ts code example

* send languageOptions with ts code

* fix lint error
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
@@ -219,18 +219,33 @@ module.exports = function (eleventyConfig) {
 
 			const isRuleRemoved = !Object.hasOwn(env.rules_meta, env.title);
 
-			/*
-			 * TypeScript isn't yet supported on the playground:
-			 * https://github.com/eslint/eslint.org/issues/709
-			 */
-			if (isRuleRemoved || isTypeScriptCode) {
+			const tsLanguageOptions = {
+				languageOptions: {
+					...languageOptions,
+					parser: "@typescript-eslint/parser",
+					parserOptions: {
+						ecmaFeatures: {
+							jsx: true,
+						},
+						sourceType: "module",
+					},
+				},
+			};
+
+			const languageOptionsForPlayground = languageOptions
+				? { languageOptions }
+				: void 0;
+
+			if (isRuleRemoved) {
 				return `<div class="${type}">`;
 			}
 
 			// See https://github.com/eslint/eslint.org/blob/29e1d8a000592245e4a30c1996e794643e9b263a/src/playground/App.js#L91-L105
 			const state = encodeToBase64(
 				JSON.stringify({
-					options: languageOptions ? { languageOptions } : void 0,
+					options: isTypeScriptCode
+						? tsLanguageOptions
+						: languageOptionsForPlayground,
 					text: code,
 				}),
 			);
