feat: tsx support (#1)

* test: add tsx

* feat: add tsx compilation

Author: leimonio

package.json

@@ -26,10 +26,14 @@
     "@egoist/prettier-config": "1.0.0",
     "prettier": "2.8.4",
     "tsup": "6.6.3",
-    "typescript": "4.9.5",
     "vitest": "0.28.5"
   },
   "dependencies": {
-    "ts-blank-space": "^0.4.1"
+    "@rspack/core": "^1.0.8",
+    "ts-blank-space": "^0.4.1",
+    "typescript": "5.1.6 - 5.6.x"
+  },
+  "peerDependencies": {
+    "typescript": "^5.1.6"
   }
 }

pnpm-lock.yaml

@@ -1,6 +1,10 @@
+import ts from "typescript"
+import type { LoaderDefinitionFunction } from "@rspack/core"
 import type TsBlankSpace from "ts-blank-space"
+import { type blankSourceFile as TsBlankSourceFile } from "ts-blank-space"
 
 let tsBlankSpace: typeof TsBlankSpace
+let tsBlankSourceFile: typeof TsBlankSourceFile
 
 class TsBlankLoaderError extends Error {
   name = "TsBlankLoaderError"
@@ -11,20 +15,35 @@ class TsBlankLoaderError extends Error {
   }
 }
 
-export default async function (content: any) {
-  // @ts-ignore
+export default async function (this: LoaderDefinitionFunction, content: any) {
   const callback = this.async()
 
   if (!tsBlankSpace) {
-    const { default: tsBlankSpaceImport } = await import("ts-blank-space")
+    const {
+      default: tsBlankSpaceImport,
+      blankSourceFile: tsBlankSourceFileImport,
+    } = await import("ts-blank-space")
     tsBlankSpace = tsBlankSpaceImport
+    tsBlankSourceFile = tsBlankSourceFileImport
   }
 
   try {
     const onError = (n: any): void => {
       throw new TsBlankLoaderError(n)
     }
 
+    if (this.resourcePath?.includes(".tsx")) {
+      const tsxSource = ts.createSourceFile(
+        this.resourcePath,
+        content,
+        ts.ScriptTarget.ESNext,
+        false,
+        ts.ScriptKind.TSX,
+      )
+      const jsxOutput = tsBlankSourceFile(tsxSource, onError)
+      return callback(null, jsxOutput)
+    }
+
     const output = tsBlankSpace(content, onError)
     return callback(null, output)
   } catch (err: any) {

src/index.ts

@@ -1,10 +1,11 @@
 import { afterEach, describe, expect, it, vi } from "vitest"
 import tsBlankLoaderOriginal from "../src"
 
-function setupModule() {
+function setupModule({ mockedThis } = { mockedThis: {} }) {
   const mockCallback = vi.fn()
   const mockThis = {
     async: vi.fn().mockImplementation(() => mockCallback),
+    ...mockedThis,
   }
   const tsBlankLoader = tsBlankLoaderOriginal.bind(mockThis)
   return { mockCallback, mockThis, tsBlankLoader }
@@ -24,4 +25,28 @@ describe("ts-blank-loader", () => {
     expect(mockCallback).toHaveBeenCalledTimes(1)
     expect(mockCallback).toHaveBeenCalledWith(null, "let x        ;")
   })
+
+  it("should call callback with preserved tsx", async () => {
+    const { mockCallback, mockThis, tsBlankLoader } = setupModule({
+      mockedThis: {
+        resourcePath: "App.tsx",
+      },
+    })
+
+    const tsxContent = `
+const App = () => {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>Hello, World!</h1>
+    </div>
+  )
+}
+`
+
+    await tsBlankLoader(tsxContent)
+
+    expect(mockThis.async).toHaveBeenCalledTimes(1)
+    expect(mockCallback).toHaveBeenCalledTimes(1)
+    expect(mockCallback).toHaveBeenCalledWith(null, tsxContent)
+  })
 })