From f07ebc83b2a52397b7870a93aa67a2bb8d075ff5 Mon Sep 17 00:00:00 2001
From: Will Harney <wharney@salesforce.com>
Date: Wed, 11 Jun 2025 15:44:46 -0400
Subject: [PATCH] feat(ts): almost enable TypeScript in the playground

---
 packages/lwc/package.json   |  3 +++
 playground/README.md        |  4 ++++
 playground/package.json     |  4 ++++
 playground/rollup.config.js |  2 ++
 playground/tsconfig.json    | 12 ++++++++++++
 5 files changed, 25 insertions(+)
 create mode 100644 playground/tsconfig.json

diff --git a/packages/lwc/package.json b/packages/lwc/package.json
index 85169c07b7..ffd7dc1401 100644
--- a/packages/lwc/package.json
+++ b/packages/lwc/package.json
@@ -76,5 +76,8 @@
         "./synthetic-shadow": "./synthetic-shadow.js",
         "./template-compiler": "./template-compiler.js",
         "./wire-service": "./wire-service.js"
+    },
+    "volta": {
+        "extends": "../../package.json"
     }
 }
diff --git a/playground/README.md b/playground/README.md
index b0ca22359c..428b3d1d97 100644
--- a/playground/README.md
+++ b/playground/README.md
@@ -7,3 +7,7 @@ $ npm run dev       # Get app server running
 $ npm run build     # Build app in production mode
 $ npx serve         # Serve the app (after running `npm run build`).
 ```
+
+## TypeScript
+
+To enable TypeScript in the LWC playground, add `@rollup/plugin-typescript` to the list of plugins in `rollup.config.js`. The playground has a pre-configured `tsconfig.json` that allows both JS and TS files to be used.
diff --git a/playground/package.json b/playground/package.json
index 70e3b4374e..25ed8beb65 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -11,6 +11,7 @@
     "devDependencies": {
         "@lwc/rollup-plugin": "8.20.0",
         "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-typescript": "^12.1.2",
         "lwc": "8.20.0",
         "rollup": "^4.40.0",
         "rollup-plugin-livereload": "^2.0.5",
@@ -24,5 +25,8 @@
                 ]
             }
         }
+    },
+    "volta": {
+        "extends": "../package.json"
     }
 }
diff --git a/playground/rollup.config.js b/playground/rollup.config.js
index ba32b28768..4e428c8fd8 100644
--- a/playground/rollup.config.js
+++ b/playground/rollup.config.js
@@ -2,6 +2,7 @@ import lwc from '@lwc/rollup-plugin';
 import replace from '@rollup/plugin-replace';
 import serve from 'rollup-plugin-serve';
 import livereload from 'rollup-plugin-livereload';
+// import typescript from '@rollup/plugin-typescript'; // Only required for TypeScript projects
 
 const __ENV__ = process.env.NODE_ENV ?? 'development';
 
@@ -15,6 +16,7 @@ export default (args) => {
         },
 
         plugins: [
+            // typescript(), // Only required for TypeScript projects
             replace({
                 'process.env.NODE_ENV': JSON.stringify(__ENV__),
                 preventAssignment: true,
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
new file mode 100644
index 0000000000..a1feaf7931
--- /dev/null
+++ b/playground/tsconfig.json
@@ -0,0 +1,12 @@
+// A tsconfig.json file is only required for TypeScript projects
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "experimentalDecorators": false, // Required for LWC decorators to work
+        "module": "nodenext",
+        "noEmit": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "target": "esnext" // Required for LWC decorators to work
+    }
+}