support stripping types only (close #42)

package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@gplane/tsconfig": "^6.1.0",
+    "@swc/wasm-typescript-esm": "^1.7.1",
     "@types/node": "^20.8.6",
     "@types/pako": "^2.0.1",
     "@types/react": "^18.2.28",

src/components/Configuration.tsx

@@ -29,7 +29,12 @@ import MangleOptionsModal from './MangleOptionsModal'
 
 const STORAGE_KEY = 'v1.config'
 
-export default function Configuration() {
+interface Props {
+  stripTypes: boolean
+  onStripTypesChange(value: boolean): void
+}
+
+export default function Configuration(props: Props) {
   const [swcConfig, setSwcConfig] = useAtom(swcConfigAtom)
   const [parsedSwcConfig] = useAtom(parsedSwcConfigAtom)
   const bg = useBgColor()
@@ -426,6 +431,16 @@ export default function Configuration() {
               </FormControl>
             </>
           )}
+          <FormControl display="flex" alignItems="center">
+            <Switch
+              id="strip-types"
+              isChecked={props.stripTypes}
+              onChange={(event) => props.onStripTypesChange(event.target.checked)}
+            />
+            <FormLabel htmlFor="strip-types" ml="2" mb="0">
+              Strip Types Only
+            </FormLabel>
+          </FormControl>
         </VStack>
         <ConfigEditorModal />
       </Flex>

src/components/Workspace.tsx

@@ -6,9 +6,7 @@ import { useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { Err } from 'ts-results'
 import { codeAtom, fileNameAtom, parsedSwcConfigAtom } from '../state'
-import { loadSwc, parse, swcVersionAtom, transform } from '../swc'
-import type { AST } from '../swc'
-
+import { type AST, loadSwc, parse, stripTypes, swcVersionAtom, transform } from '../swc'
 import Configuration from './Configuration'
 import InputEditor from './InputEditor'
 import OutputEditor from './OutputEditor'
@@ -52,6 +50,7 @@ export default function Workspace() {
   const [swcConfig] = useAtom(parsedSwcConfigAtom)
   const [fileName] = useAtom(fileNameAtom)
   const [viewMode, setViewMode] = useState('code')
+  const [isStripTypes, setIsStripTypes] = useState(false)
   const output = useMemo(() => {
     if (error) {
       return Err(String(error))
@@ -63,12 +62,14 @@ export default function Workspace() {
 
     switch (viewMode) {
       case 'ast':
-        return parse({ code, config: swcConfig, swc })
+        return parse({ code, config: swcConfig, swc: swc[0] })
       case 'code':
       default:
-        return transform({ code, fileName, config: swcConfig, swc })
+        return isStripTypes
+          ? stripTypes({ code, fileName, config: swcConfig, swc: swc[1] })
+          : transform({ code, fileName, config: swcConfig, swc: swc[0] })
     }
-  }, [code, fileName, swc, error, swcConfig, viewMode])
+  }, [code, fileName, swc, error, swcConfig, viewMode, isStripTypes])
   const toast = useToast()
 
   useEffect(() => {
@@ -105,7 +106,7 @@ export default function Workspace() {
   return (
     <Main>
       <VStack spacing={4} alignItems="unset" gridArea="sidebar">
-        <Configuration />
+        <Configuration stripTypes={isStripTypes} onStripTypesChange={setIsStripTypes} />
         <VersionSelect isLoadingSwc={!swc && !error} />
       </VStack>
       <InputEditor output={output} />

src/swc.ts

@@ -1,7 +1,7 @@
+import type * as SwcStripTypes from '@swc/wasm-typescript-esm'
 import { atom } from 'jotai'
 import semver from 'semver'
-import { Err, Ok } from 'ts-results'
-import type { Result } from 'ts-results'
+import { Err, Ok, type Result } from 'ts-results'
 
 interface SwcModule {
   default(): Promise<unknown>
@@ -282,7 +282,11 @@ export function getPackageName(version: string) {
     : '@swc/wasm-web'
 }
 
-export async function loadSwc(version: string): Promise<SwcModule> {
+export async function loadSwc(version: string): Promise<[SwcModule, typeof SwcStripTypes]> {
+  return Promise.all([loadSwcCore(version), loadSwcStripTypes(version)])
+}
+
+async function loadSwcCore(version: string): Promise<SwcModule> {
   const packageName = getPackageName(version)
   const entryFileName = semver.gt(version, '1.2.165') && semver.lt(version, '1.6.7')
     ? 'wasm-web.js'
@@ -295,6 +299,15 @@ export async function loadSwc(version: string): Promise<SwcModule> {
   return swcModule
 }
 
+async function loadSwcStripTypes(version: string): Promise<typeof SwcStripTypes> {
+  const swcModule: typeof SwcStripTypes = await import(
+    /* webpackIgnore: true */
+    `https://cdn.jsdelivr.net/npm/@swc/wasm-typescript-esm@${version}/wasm.js`
+  )
+  await swcModule.default()
+  return swcModule
+}
+
 export type TransformationResult = Result<TransformationOutput, string>
 
 export function transform({
@@ -348,3 +361,26 @@ function handleSwcError(error: unknown): Err<string> {
     return Err(String(error))
   }
 }
+
+export function stripTypes({
+  code,
+  config,
+  fileName,
+  swc,
+}: {
+  code: string,
+  config: Config,
+  fileName: string,
+  swc: typeof SwcStripTypes,
+}): Result<SwcStripTypes.TransformOutput, string> {
+  try {
+    return Ok(
+      swc.transformSync(code, {
+        filename: fileName,
+        module: config.module?.type === 'es6',
+      })
+    )
+  } catch (error) {
+    return handleSwcError(error)
+  }
+}