feat: support .tsx file as entry (#82)

Co-authored-by: Hiroki Osame <[email protected]>
privatenumber · Sep 12, 2024 · 9f1195f · 9f1195f
1 parent 865775d
commit 9f1195f
Show file tree

Hide file tree

Showing 7 changed files with 211 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
 	},
 	"devDependencies": {
 		"@types/node": "^20.14.11",
+		"@types/react": "^18.3.5",
 		"clean-pkg-json": "^1.2.0",
 		"cleye": "^1.3.2",
 		"execa": "^9.3.0",
@@ -70,6 +71,7 @@
 		"lintroll": "^1.7.1",
 		"manten": "^1.3.0",
 		"outdent": "^0.8.0",
+		"react": "^18.3.1",
 		"rollup-plugin-dts": "6.1.1",
 		"tsx": "^4.16.2",
 		"type-fest": "^4.22.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/utils/get-source-path.ts b/src/utils/get-source-path.ts
@@ -19,12 +19,12 @@ const tryExtensions = async (
 };
 
 const extensionMap = {
-	'.d.ts': ['.d.ts', '.d.mts', '.d.cts', '.ts', '.mts', '.cts'],
-	'.d.mts': ['.d.mts', '.d.ts', '.d.cts', '.ts', '.mts', '.cts'],
-	'.d.cts': ['.d.cts', '.d.ts', '.d.mts', '.ts', '.mts', '.cts'],
+	'.d.ts': ['.d.ts', '.d.mts', '.d.cts', '.ts', '.tsx', '.mts', '.cts'],
+	'.d.mts': ['.d.mts', '.d.ts', '.d.cts', '.ts', '.tsx', '.mts', '.cts'],
+	'.d.cts': ['.d.cts', '.d.ts', '.d.mts', '.ts', '.tsx', '.mts', '.cts'],
 	'.js': ['.js', '.ts', '.tsx', '.mts', '.cts'],
-	'.mjs': ['.mjs', '.js', '.cjs', '.mts', '.cts', '.ts'],
-	'.cjs': ['.cjs', '.js', '.mjs', '.mts', '.cts', '.ts'],
+	'.mjs': ['.mjs', '.js', '.cjs', '.mts', '.cts', '.ts', '.tsx'],
+	'.cjs': ['.cjs', '.js', '.mjs', '.mts', '.cts', '.ts', '.tsx'],
 } as const;
 
 const distExtensions = Object.keys(extensionMap) as (keyof typeof extensionMap)[];

diff --git a/tests/fixtures.ts b/tests/fixtures.ts
@@ -6,14 +6,18 @@ import type { PackageJson, TsConfigJson } from 'type-fest';
 export const createPackageJson = (packageJson: PackageJson) => JSON.stringify(packageJson);
 export const createTsconfigJson = (tsconfigJson: TsConfigJson) => JSON.stringify(tsconfigJson);
 
-const typeScriptPath = path.resolve('node_modules/typescript');
-
 export const installTypeScript: FileTree = {
-	'node_modules/typescript': ({ symlink }) => symlink(typeScriptPath, 'dir'),
+	'node_modules/typescript': ({ symlink }) => symlink(path.resolve('node_modules/typescript'), 'dir'),
+};
+
+export const installReact: FileTree = {
+	'node_modules/react': ({ symlink }) => symlink(path.resolve('node_modules/react'), 'dir'),
+	'node_modules/@types/react': ({ symlink }) => symlink(path.resolve('node_modules/@types/react'), 'dir'),
 };
 
 type Options = {
 	installTypeScript?: boolean;
+	installReact?: boolean;
 };
 
 export const fixtureFiles = {
@@ -159,20 +163,13 @@ export const fixtureFiles = {
 	`,
 };
 
-export const packageFixture = (
-	options: Options = {},
-): FileTree => ({
+export const packageFixture = (options: Options = {}): FileTree => ({
 	src: fixtureFiles,
-	...(
-		options.installTypeScript
-			? installTypeScript
-			: {}
-	),
+	...(options.installTypeScript ? installTypeScript : {}),
+	...(options.installReact ? installReact : {}),
 });
 
-export const fixtureDependencyExportsMap = (
-	entryFile: string,
-): FileTree => ({
+export const fixtureDependencyExportsMap = (entryFile: string): FileTree => ({
 	'package.json': createPackageJson({
 		main: entryFile,
 	}),

diff --git a/tests/specs/builds/output-commonjs.ts b/tests/specs/builds/output-commonjs.ts
@@ -1,7 +1,7 @@
 import { testSuite, expect } from 'manten';
 import { createFixture } from 'fs-fixture';
 import { pkgroll } from '../../utils.js';
-import { packageFixture, createPackageJson } from '../../fixtures.js';
+import { packageFixture, createPackageJson, createTsconfigJson } from '../../fixtures.js';
 
 export default testSuite(({ describe }, nodePath: string) => {
 	describe('output: commonjs', ({ test }) => {
@@ -126,6 +126,36 @@ export default testSuite(({ describe }, nodePath: string) => {
 			expect(content).toMatch('exports.sayHello =');
 		});
 
+		test('{ type: commonjs, field: component, srcExt: mjs, distExt: cjs }', async () => {
+			await using fixture = await createFixture({
+				...packageFixture({ installReact: true }),
+				'package.json': createPackageJson({
+					main: './dist/component.cjs',
+					peerDependencies: {
+						react: '*',
+					},
+				}),
+				'tsconfig.json': createTsconfigJson({
+					compilerOptions: {
+						jsx: 'react-jsx',
+					},
+				}),
+			});
+
+			const pkgrollProcess = await pkgroll([], {
+				cwd: fixture.path,
+				nodePath,
+			});
+
+			expect(pkgrollProcess.exitCode).toBe(0);
+			expect(pkgrollProcess.stderr).toBe('');
+
+			const content = await fixture.readFile('dist/component.cjs', 'utf8');
+			expect(content).toMatch(`require('react/jsx-runtime')`);
+			expect(content).toMatch('const Component = () => /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Hello World" })');
+			expect(content).toMatch('exports.Component = Component');
+		});
+
 		test('nested directory', async () => {
 			await using fixture = await createFixture({
 				...packageFixture(),

diff --git a/tests/specs/builds/output-module.ts b/tests/specs/builds/output-module.ts
@@ -1,7 +1,7 @@
 import { testSuite, expect } from 'manten';
 import { createFixture } from 'fs-fixture';
 import { pkgroll } from '../../utils.js';
-import { packageFixture, createPackageJson } from '../../fixtures.js';
+import { packageFixture, createPackageJson, createTsconfigJson } from '../../fixtures.js';
 
 export default testSuite(({ describe }, nodePath: string) => {
 	describe('output: module', ({ test }) => {
@@ -86,6 +86,36 @@ export default testSuite(({ describe }, nodePath: string) => {
 			expect(content).toMatch('export { cjs$1 as default }');
 		});
 
+		test('{ type: commonjs, field: component, srcExt: tsx, distExt: mjs }', async () => {
+			await using fixture = await createFixture({
+				...packageFixture({ installReact: true }),
+				'package.json': createPackageJson({
+					main: './dist/component.mjs',
+					peerDependencies: {
+						react: '*',
+					},
+				}),
+				'tsconfig.json': createTsconfigJson({
+					compilerOptions: {
+						jsx: 'react-jsx',
+					},
+				}),
+			});
+
+			const pkgrollProcess = await pkgroll([], {
+				cwd: fixture.path,
+				nodePath,
+			});
+
+			expect(pkgrollProcess.exitCode).toBe(0);
+			expect(pkgrollProcess.stderr).toBe('');
+
+			const content = await fixture.readFile('dist/component.mjs', 'utf8');
+			expect(content).toMatch(`import { jsx } from 'react/jsx-runtime'`);
+			expect(content).toMatch('const Component = () => /* @__PURE__ */ jsx("div", { children: "Hello World" })');
+			expect(content).toMatch('export { Component }');
+		});
+
 		test('{ type: commonjs, field: main, srcExt: mts, distExt: mjs }', async () => {
 			await using fixture = await createFixture({
 				...packageFixture(),

diff --git a/tests/specs/builds/output-types.ts b/tests/specs/builds/output-types.ts
@@ -60,6 +60,105 @@ export default testSuite(({ describe }, nodePath: string) => {
 			expect(content).toMatch('declare function');
 		});
 
+		test('{ srcExt: tsx, distExt: d.ts }', async () => {
+			await using fixture = await createFixture({
+				...packageFixture({
+					installTypeScript: true,
+					installReact: true,
+				}),
+				'package.json': createPackageJson({
+					types: './dist/component.d.ts',
+					peerDependencies: {
+						react: '*',
+					},
+				}),
+				'tsconfig.json': createTsconfigJson({
+					compilerOptions: {
+						jsx: 'react-jsx',
+					},
+				}),
+			});
+
+			const pkgrollProcess = await pkgroll([], {
+				cwd: fixture.path,
+				nodePath,
+			});
+
+			expect(pkgrollProcess.exitCode).toBe(0);
+			expect(pkgrollProcess.stderr).toBe('');
+
+			const content = await fixture.readFile('dist/component.d.ts', 'utf8');
+			expect(content).toMatch(`import * as react_jsx_runtime from 'react/jsx-runtime'`);
+			expect(content).toMatch('declare const Component: () => react_jsx_runtime.JSX.Element');
+			expect(content).toMatch('export { Component }');
+		});
+
+		test('{ srcExt: tsx, distExt: d.mts }', async () => {
+			await using fixture = await createFixture({
+				...packageFixture({
+					installTypeScript: true,
+					installReact: true,
+				}),
+				'package.json': createPackageJson({
+					types: './dist/component.d.mts',
+					peerDependencies: {
+						react: '*',
+					},
+				}),
+				'tsconfig.json': createTsconfigJson({
+					compilerOptions: {
+						jsx: 'react-jsx',
+					},
+				}),
+			});
+
+			const pkgrollProcess = await pkgroll([], {
+				cwd: fixture.path,
+				nodePath,
+			});
+
+			expect(pkgrollProcess.exitCode).toBe(0);
+			expect(pkgrollProcess.stderr).toBe('');
+
+			const content = await fixture.readFile('dist/component.d.mts', 'utf8');
+			expect(content).toMatch(`import * as react_jsx_runtime from 'react/jsx-runtime'`);
+			expect(content).toMatch('declare const Component: () => react_jsx_runtime.JSX.Element');
+			expect(content).toMatch('export { Component }');
+		});
+
+		test('{ srcExt: tsx, distExt: d.cts }', async () => {
+			await using fixture = await createFixture({
+				...packageFixture({
+					installTypeScript: true,
+					installReact: true,
+				}),
+				'package.json': createPackageJson({
+					types: './dist/component.d.cts',
+					peerDependencies: {
+						react: '*',
+					},
+				}),
+				'tsconfig.json': createTsconfigJson({
+					compilerOptions: {
+						jsx: 'react-jsx',
+					},
+				}),
+			});
+
+			const pkgrollProcess = await pkgroll([], {
+				cwd: fixture.path,
+				nodePath,
+			});
+
+			expect(pkgrollProcess.exitCode).toBe(0);
+			expect(pkgrollProcess.stderr).toBe('');
+
+			const content = await fixture.readFile('dist/component.d.cts', 'utf8');
+			expect(content).toMatch(`import * as react_jsx_runtime from 'react/jsx-runtime'`);
+			expect(content).toMatch('declare const Component: () => react_jsx_runtime.JSX.Element');
+			expect(content).toMatch('export { Component }');
+		});
+
 		test('{ srcExt: .mts, distExt: d.cts }', async () => {
 			await using fixture = await createFixture({
 				...packageFixture({ installTypeScript: true }),