fix: Use amaro for stripping types in code samples (supabase#41229)

* Fix the error for babel/preset-typescript in docs.

* Unfix the version.

* Try using amaro for type stripping.

* Run prettier after stripping types.

* Fix tests.

---------

Co-authored-by: Charis Lam <[email protected]>

Author: ivasilov

apps/docs/features/directives/CodeSample.test.ts

@@ -1,4 +1,4 @@
-import { afterAll, beforeAll, describe, it, expect, vi } from 'vitest'
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
 
 import { stripIndent } from 'common-tags'
 import { fromMarkdown } from 'mdast-util-from-markdown'
@@ -593,35 +593,35 @@ Some more text.
         const users = [
           { id: 1, name: 'John', email: '[email protected]' },
           { id: 2, name: 'Jane' },
-        ];
+        ]
 
         function getUserById(id) {
-          return users.find((user) => user.id === id);
+          return users.find((user) => user.id === id)
         }
 
         function createUser(name, email) {
-          const newId = Math.max(...users.map((u) => u.id)) + 1;
-          const newUser = { id: newId, name };
+          const newId = Math.max(...users.map((u) => u.id)) + 1
+          const newUser = { id: newId, name }
           if (email) {
-            newUser.email = email;
+            newUser.email = email
           }
-          users.push(newUser);
-          return newUser;
+          users.push(newUser)
+          return newUser
         }
 
         class UserManager {
-          users = [];
+          users = []
 
           constructor(initialUsers = []) {
-            this.users = initialUsers;
+            this.users = initialUsers
           }
 
           addUser(user) {
-            this.users.push(user);
+            this.users.push(user)
           }
 
           getUsers() {
-            return [...this.users];
+            return [...this.users]
           }
         }
 	\`\`\`
@@ -698,33 +698,33 @@ Some more text.
         const users = [
           { id: 1, name: 'John', email: '[email protected]' },
           { id: 2, name: 'Jane' },
-        ];
+        ]
 
         // ...
 
         function createUser(name, email) {
-          const newId = Math.max(...users.map((u) => u.id)) + 1;
-          const newUser = { id: newId, name };
+          const newId = Math.max(...users.map((u) => u.id)) + 1
+          const newUser = { id: newId, name }
           if (email) {
-            newUser.email = email;
+            newUser.email = email
           }
-          users.push(newUser);
-          return newUser;
+          users.push(newUser)
+          return newUser
         }
 
         class UserManager {
-          users = [];
+          users = []
 
           constructor(initialUsers = []) {
-            this.users = initialUsers;
+            this.users = initialUsers
           }
 
           addUser(user) {
-            this.users.push(user);
+            this.users.push(user)
           }
 
           getUsers() {
-            return [...this.users];
+            return [...this.users]
           }
         }
         \`\`\`

apps/docs/features/directives/CodeSample.ts

@@ -33,12 +33,13 @@
 
 import * as acorn from 'acorn'
 import tsPlugin from 'acorn-typescript'
-import { type DefinitionContent, type BlockContent, type Code, type Root } from 'mdast'
+import amaro from 'amaro'
+import { type BlockContent, type Code, type DefinitionContent, type Root } from 'mdast'
 import type { MdxJsxAttributeValueExpression, MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
 import assert from 'node:assert'
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
-import { removeTypes } from 'remove-types'
+import prettier from 'prettier'
 import { type Parent } from 'unist'
 import { visitParents } from 'unist-util-visit-parents'
 import { z, type SafeParseError } from 'zod'
@@ -260,7 +261,11 @@ async function rewriteNodes(contentMap: Map<MdxJsxFlowElement, [CodeSampleMeta,
 
     let processedContent = content
     if (meta.convertToJs) {
-      processedContent = await removeTypes(content)
+      const { code } = amaro.transformSync(content, { mode: 'strip-only' })
+
+      const prettierConfig = await prettier.resolveConfig('./.prettierrc.js')
+      processedContent = await prettier.format(code, { ...prettierConfig, parser: 'typescript' })
+
       // Convert TypeScript/TSX language to JavaScript/JSX when converting types
       assert(
         lang === 'typescript' || lang === 'tsx',

apps/docs/package.json

@@ -109,7 +109,6 @@
     "remark-emoji": "^3.1.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^6.0.0",
-    "remove-types": "1.0.0",
     "server-only": "^0.0.1",
     "shared-data": "workspace:*",
     "ui": "workspace:*",
@@ -142,6 +141,7 @@
     "@types/react-dom": "catalog:",
     "@types/unist": "^2.0.6",
     "@types/uuid": "^10.0.0",
+    "amaro": "^1.1.5",
     "api-types": "workspace:*",
     "cheerio": "^1.0.0-rc.12",
     "chokidar": "^4.0.3",