chore: replace esno with tsx, migrate release script and playground to TypeScript (#29)

wojtekmaj · web-flow · commit 5587f2cb789d · 2024-02-22T18:29:04.000+01:00
* Replaces esno with tsx. Quoting esno: "From v0.15, esno is essentially an alias of tsx, with automated CJS/ESM mode and caching.".
  * There are no benefits of caching here since we're only parsing one TS file at a time.
  * Updated tsx version uses same esbuild version as Vite, reducing the number of dependencies.
* Migrates release script to TypeScript
  * require() is dead!
  * Minimal changes were required
* Migrates playground to TypeScript
  * Set "type" to "module" - no more deprecated CJS Vite API warning!
  * Removed "setupCounter(document.querySelector('#counter'))" leftover - neither #counter or setupCounter function were present.
diff --git a/package.json b/package.json
@@ -17,9 +17,9 @@
   },
   "scripts": {
     "dev": "unbuild --stub",
-    "build": "unbuild && esno scripts/patchCJS.ts",
+    "build": "unbuild && tsx scripts/patchCJS.ts",
     "test": "vitest run",
-    "release": "node scripts/release.js",
+    "release": "tsx scripts/release.ts",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "engines": {
@@ -40,16 +40,16 @@
   "devDependencies": {
     "conventional-changelog-cli": "^2.2.2",
     "enquirer": "^2.4.1",
-    "esno": "^0.17.0",
     "execa": "^4.1.0",
     "minimist": "^1.2.8",
+    "node-forge": "^1.3.1",
     "picocolors": "^1.0.0",
     "prettier": "^2.8.8",
     "rollup": "^2.79.1",
     "semver": "^7.6.0",
+    "tsx": "^4.7.1",
     "unbuild": "^2.0.0",
     "vite": "^5.0.0",
-    "vitest": "^0.34.6",
-    "node-forge": "^1.3.1"
+    "vitest": "^0.34.6"
   }
 }
diff --git a/playground/env.d.ts b/playground/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/playground/index.html b/playground/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/main.js"></script>
+    <script type="module" src="/main.ts"></script>
   </body>
 </html>
diff --git a/playground/main.ts b/playground/main.ts
@@ -2,7 +2,9 @@ import './style.css'
 import viteLogo from '/vite.svg'
 import lockIcon from '/lock.svg'
 
-document.querySelector('#app').innerHTML = `
+const root = document.querySelector('#app')!
+
+root.innerHTML = `
   <div>
     <a href="https://vitejs.dev" target="_blank">
       <img src="${viteLogo}" class="logo" alt="Vite logo" />
@@ -12,9 +14,7 @@ document.querySelector('#app').innerHTML = `
     </a>
     <h1>Hello Vite + Basic SSL!</h1>
     <p class="read-the-docs">
-        Example of a basic ssl setup using an automatically generated self-signed certificate
+      Example of a basic ssl setup using an automatically generated self-signed certificate
     </p>
   </div>
 `
-
-setupCounter(document.querySelector('#counter'))
diff --git a/playground/package.json b/playground/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "description": "Example of a basic ssl setup using an automatically generated self-signed certificate",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/release.ts b/scripts/release.ts
