Fix jsx transform to work with additional options

Fixes #61
cometkim · Dec 10, 2022 · b947900 · b947900
1 parent 10ac4e4
commit b947900
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 34 deletions.
diff --git a/.changeset/tiny-lizards-march.md b/.changeset/tiny-lizards-march.md
@@ -0,0 +1,5 @@
+---
+"nanobundle": patch
+---
+
+Fix jsx transform to work with additional options
diff --git a/src/cli.ts b/src/cli.ts
@@ -10,35 +10,44 @@ Available Commands
   build    Build once and exit
 
 Options
-  --version          Display current version
+  --version            Display current version
 
-  --cwd              Use an alternative working directory
+  --cwd                Use an alternative working directory
 
-  --tsconfig         Specify the path to a custom tsconfig.json
+  --tsconfig           Specify the path to a custom tsconfig.json
 
-  --import-maps      Specify import map file path (default: package.json)
+  --import-maps        Specify import map file path (default: package.json)
 
-  --root-dir         Specify the path to resolve source entry (default: ./src)
-                     This also can be configured by tsconfig.json
+  --root-dir           Specify the path to resolve source entry (default: ./src)
+                       This also can be configured by tsconfig.json
 
-  --out-dir          Specify the path to resolve source entry (default: ./lib)
-                     This also can be configured by tsconfig.json
+  --out-dir            Specify the path to resolve source entry (default: ./lib)
+                       This also can be configured by tsconfig.json
 
-  --jsx              Specify JSX mode. One of "preserve", "automatic" is allowed.
-                     This also can be configured by tsconfig.json
+  --platform           Specify bundle target platform (default: "netural")
+                       One of "netural", "browser", "node" is allowed
 
-  --platform         Specify bundle target platform (default: "netural")
-                     One of "netural", "browser", "node" is allowed.
+  --standalone         Embed external dependencies into the bundle (default: false)
 
-  --standalone       Embed external dependencies into the bundle (default: false)
+  --external           Specify external dependencies to exclude from the bundle
 
-  --external         Specify external dependencies to exclude from the bundle
+  --jsx                Specify JSX mode. One of "transform", "preserve", "automatic" is allowed
+                       This also can be configured by tsconfig.json
 
-  --no-sourcemap     Disable source map generation
+  --jsx-factory        Specify JSX factory (default: "React.createElement")
+                       This also can be configured by tsconfig.json
 
-  --no-dts           Disable TypeScript .d.ts build
+  --jsx-fragment       Specify JSX <Fragment> factory (default: "Fragment")
+                       This also can be configured by tsconfig.json
 
-  --help             Display this message
+  --jsx-import-source  Specify JSX import source (default: "react")
+                       This also can be configured by tsconfig.json
+
+  --no-sourcemap       Disable source map generation
+
+  --no-dts             Disable TypeScript .d.ts build
+
+  --help               Display this message
 `, {
   importMeta: import.meta,
   flags: {
@@ -60,9 +69,6 @@ Options
       type: 'string',
       default: 'package.json',
     },
-    jsx: {
-      type: 'string',
-    },
     external: {
       type: 'string',
       isMultiple: true,
@@ -83,6 +89,18 @@ Options
       type: 'boolean',
       default: true,
     },
+    jsx: {
+      type: 'string',
+    },
+    jsxFactory: {
+      type: 'string',
+    },
+    jsxFragment: {
+      type: 'string',
+    },
+    jsxImportSource: {
+      type: 'string',
+    },
   },
 });
 

diff --git a/src/commands/build/tasks/buildBundleTask.ts b/src/commands/build/tasks/buildBundleTask.ts
@@ -33,7 +33,7 @@ export class BuildBundleTaskError extends NanobundleError {
 type BuildBundleTaskOptions = {
   context: Context,
   bundleEntries: BundleEntry[],
-}
+};
 
 type BuildBundleTaskResult = {
   outputFiles: OutputFile[],
@@ -56,6 +56,8 @@ export async function buildBundleTask({
   const subtasks: Array<Promise<BuildBundleGroupResult>> = [];
   for (const [optionsHash, entries] of Object.entries(bundleGroup)) {
     const options = optionsFromHash(optionsHash);
+    context.reporter.debug('bundle options %o', options);
+
     subtasks.push(
       buildBundleGroup({
         context,
@@ -143,8 +145,11 @@ async function buildBundleGroup({
     entryPoints,
     outdir: baseDir,
     bundle: true,
-    jsx: context.jsx ?? undefined,
+    jsx: context.jsx,
     jsxDev: context.jsxDev,
+    jsxFactory: context.jsxFactory,
+    jsxFragment: context.jsxFragment,
+    jsxImportSource: context.jsxImportSource,
     treeShaking: true,
     target: context.targets,
     format: options.module === 'commonjs' ? 'cjs' : 'esm',
@@ -177,6 +182,8 @@ async function buildBundleGroup({
     ...plugins,
   ];
 
+  context.reporter.debug('esbuild build options %o', esbuildOptions);
+
   const result = await esbuild.build({
     ...esbuildOptions,
     write: false,

diff --git a/src/context.test.ts b/src/context.test.ts
@@ -27,6 +27,9 @@ describe('parseConfig', () => {
     tsconfig: 'tsconfig.json',
     importMaps: 'package.json',
     jsx: undefined,
+    jsxFactory: undefined,
+    jsxFragment: undefined,
+    jsxImportSource: undefined,
     external: [],
     standalone: false,
     dts: true,
@@ -63,8 +66,11 @@ describe('parseConfig', () => {
       sourcemap: true,
       declaration: false,
       standalone: false,
-      jsx: null,
+      jsx: undefined,
       jsxDev: false,
+      jsxFactory: 'React.createElement',
+      jsxFragment: 'Fragment',
+      jsxImportSource: 'react',
       rootDir: 'src',
       outDir: 'lib',
       tsconfigPath: undefined,
@@ -100,8 +106,11 @@ describe('parseConfig', () => {
         standalone: false,
         rootDir: '.',
         outDir: 'lib',
-        jsx: null,
+        jsx: undefined,
         jsxDev: false,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
         tsconfigPath: undefined,
         importMapsPath: 'package.json',
         externalDependencies: [],
@@ -135,8 +144,11 @@ describe('parseConfig', () => {
         rootDir: 'src',
         outDir: '.',
         tsconfigPath: undefined,
-        jsx: null,
+        jsx: undefined,
         jsxDev: false,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
         importMapsPath: 'package.json',
         externalDependencies: [],
         forceExternalDependencies: [],
@@ -190,8 +202,11 @@ describe('parseConfig', () => {
         outDir: 'lib',
         tsconfigPath: undefined,
         importMapsPath: 'package.json',
-        jsx: null,
+        jsx: undefined,
         jsxDev: false,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
         externalDependencies: [],
         forceExternalDependencies: [],
         manifest,
@@ -226,8 +241,11 @@ describe('parseConfig', () => {
         outDir: 'lib',
         tsconfigPath: undefined,
         importMapsPath: 'package.json',
-        jsx: null,
+        jsx: undefined,
         jsxDev: false,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
         externalDependencies: [],
         forceExternalDependencies: [],
         manifest: defaultManifest,
@@ -269,8 +287,11 @@ describe('parseConfig', () => {
         outDir: 'lib',
         tsconfigPath: 'tsconfig.json',
         importMapsPath: 'package.json',
-        jsx: null,
+        jsx: undefined,
         jsxDev: false,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
         externalDependencies: [],
         forceExternalDependencies: [],
         manifest: defaultManifest,
@@ -308,8 +329,11 @@ describe('parseConfig', () => {
         outDir: 'lib',
         tsconfigPath: 'tsconfig.json',
         importMapsPath: 'package.json',
-        jsx: null,
+        jsx: undefined,
         jsxDev: false,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
         externalDependencies: [],
         forceExternalDependencies: [],
         manifest: defaultManifest,
@@ -344,8 +368,11 @@ describe('parseConfig', () => {
         outDir: 'lib',
         tsconfigPath: 'tsconfig.json',
         importMapsPath: 'package.json',
-        jsx: null,
+        jsx: undefined,
         jsxDev: false,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
         externalDependencies: [],
         forceExternalDependencies: [],
         manifest: defaultManifest,
@@ -384,8 +411,11 @@ describe('parseConfig', () => {
         outDir: 'tsconfig-lib',
         tsconfigPath: 'tsconfig.json',
         importMapsPath: 'package.json',
-        jsx: null,
+        jsx: undefined,
         jsxDev: false,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
         externalDependencies: [],
         forceExternalDependencies: [],
         manifest: defaultManifest,
@@ -425,6 +455,54 @@ describe('parseConfig', () => {
         importMapsPath: 'package.json',
         jsx: 'automatic',
         jsxDev: true,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
+        externalDependencies: [],
+        forceExternalDependencies: [],
+        manifest: defaultManifest,
+        targets: defaultTargets,
+        reporter,
+        resolve,
+      });
+    });
+
+    test('respect jsxSource in compilerOptions', () => {
+      const result = parseConfig({
+        flags: defaultFlags,
+        manifest: defaultManifest,
+        targets: defaultTargets,
+        reporter,
+        resolve,
+        tsconfigPath: 'tsconfig.json',
+        tsconfig: {
+          ...defaultTsConfig,
+          compilerOptions: {
+            ...defaultTsConfig.compilerOptions,
+            jsx: 'react',
+            jsxFactory: 'h',
+            jsxFragmentFactory: 'Fragment',
+            jsxImportSource: 'preact',
+          },
+        },
+      });
+
+      expect(result).toEqual<Context>({
+        cwd: '/project',
+        module: 'commonjs',
+        platform: 'neutral',
+        sourcemap: true,
+        declaration: true,
+        standalone: false,
+        rootDir: 'src',
+        outDir: 'lib',
+        tsconfigPath: 'tsconfig.json',
+        importMapsPath: 'package.json',
+        jsx: 'transform',
+        jsxDev: false,
+        jsxFactory: 'h',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'preact',
         externalDependencies: [],
         forceExternalDependencies: [],
         manifest: defaultManifest,
@@ -471,6 +549,9 @@ describe('parseConfig', () => {
         importMapsPath: 'package.json',
         jsx: 'preserve',
         jsxDev: false,
+        jsxFactory: 'React.createElement',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'react',
         externalDependencies: [],
         forceExternalDependencies: [],
         manifest: defaultManifest,