chore: Adding flag & docs for jsxFragment

README.md

@@ -38,20 +38,20 @@
 
 ```jsonc
 {
-  "name": "foo",                      // your package name
-  "type": "module",
-  "source": "src/foo.js",             // your source code
-  "exports": {
-    "require": "./dist/foo.cjs",      // used for require() in Node 12+
-    "default": "./dist/foo.modern.js" // where to generate the modern bundle (see below)
-  },
-  "main": "./dist/foo.cjs",           // where to generate the CommonJS bundle
-  "module": "./dist/foo.module.js",   // where to generate the ESM bundle
-  "unpkg": "./dist/foo.umd.js",       // where to generate the UMD bundle (also aliased as "umd:main")
-  "scripts": {
-    "build": "microbundle",           // compiles "source" to "main"/"module"/"unpkg"
-    "dev": "microbundle watch"        // re-build when source files change
-  }
+	"name": "foo", // your package name
+	"type": "module",
+	"source": "src/foo.js", // your source code
+	"exports": {
+		"require": "./dist/foo.cjs", // used for require() in Node 12+
+		"default": "./dist/foo.modern.js" // where to generate the modern bundle (see below)
+	},
+	"main": "./dist/foo.cjs", // where to generate the CommonJS bundle
+	"module": "./dist/foo.module.js", // where to generate the ESM bundle
+	"unpkg": "./dist/foo.umd.js", // where to generate the UMD bundle (also aliased as "umd:main")
+	"scripts": {
+		"build": "microbundle", // compiles "source" to "main"/"module"/"unpkg"
+		"dev": "microbundle watch" // re-build when source files change
+	}
 }
 ```
 
@@ -163,15 +163,15 @@ The filenames and paths for generated bundles in each format are defined by the
 
 ```jsonc
 {
-  "source": "src/index.js",            // input
-  "main": "dist/foo.js",               // CommonJS output bundle
-  "umd:main": "dist/foo.umd.js",       // UMD output bundle
-  "module": "dist/foo.m.js",           // ES Modules output bundle 
-  "exports": {
-    "require": "./dist/foo.js",        // CommonJS output bundle
-    "default": "./dist/foo.modern.js", // Modern ES Modules output bundle
-  },
-  "types": "dist/foo.d.ts"             // TypeScript typings directory
+	"source": "src/index.js", // input
+	"main": "dist/foo.js", // CommonJS output bundle
+	"umd:main": "dist/foo.umd.js", // UMD output bundle
+	"module": "dist/foo.m.js", // ES Modules output bundle
+	"exports": {
+		"require": "./dist/foo.js", // CommonJS output bundle
+		"default": "./dist/foo.modern.js" // Modern ES Modules output bundle
+	},
+	"types": "dist/foo.d.ts" // TypeScript typings directory
 }
 ```
 
@@ -189,9 +189,9 @@ When using `{"type":"module"}`, the file extension for CommonJS bundles generate
 
 ```jsonc
 {
-  "type": "module",
-  "module": "dist/foo.js",  // ES Module bundle
-  "main": "dist/foo.cjs",   // CommonJS bundle
+	"type": "module",
+	"module": "dist/foo.js", // ES Module bundle
+	"main": "dist/foo.cjs" // CommonJS bundle
 }
 ```
 
@@ -201,14 +201,14 @@ Config also can be overridded by the [`publishConfig`](https://docs.npmjs.com/cl
 
 ```jsonc
 {
-  "main": "src/index.ts",          // this would be used in the dev environment (e.g. Jest)
-  "publishConfig": {
-    "source": "src/index.js",      // input
-    "main": "dist/my-library.js",  // output
-  },
-  "scripts": {
-    "build": "microbundle"
-  }
+	"main": "src/index.ts", // this would be used in the dev environment (e.g. Jest)
+	"publishConfig": {
+		"source": "src/index.js", // input
+		"main": "dist/my-library.js" // output
+	},
+	"scripts": {
+		"build": "microbundle"
+	}
 }
 ```
 
@@ -264,7 +264,9 @@ Microbundle is able to detect and bundle Module Workers when generating bundles
 `es`, `umd` and `modern` formats. To use this feature, instantiate your Web Worker as follows:
 
 ```js
-worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
+worker = new Worker(new URL('./worker.js', import.meta.url), {
+	type: 'module',
+});
 // or simply:
 worker = new Worker('./worker.js', { type: 'module' });
 ```
@@ -335,6 +337,7 @@ Options
 	--sourcemap        Generate source map  (default true)
 	--raw              Show raw byte size  (default false)
 	--jsx              A custom JSX pragma like React.createElement (default: h)
+	--jsxFragment      A custom JSX fragment pragma like React.Fragment (default: Fragment)
 	--jsxImportSource  Declares the module specifier to be used for importing jsx factory functions
 	--tsconfig         Specify the path to a custom tsconfig.json
 	--generateTypes    Whether or not to generate types, if `types` or `typings` is set in `package.json` then it will default to be `true`
@@ -376,7 +379,6 @@ Here's what's coming up for Microbundle:
 - [react-model](https://github.com/byte-fe/react-model) The next generation state management library for React
 - [Teaful](https://github.com/teafuljs/teaful) Tiny, easy and powerful (P)React state management
 
-
 ## 🥂 License
 
 [MIT](https://oss.ninja/mit/developit/)

src/index.js

@@ -537,12 +537,8 @@ function createConfig(options, entry, format, writeMeta) {
 										declarationDir: getDeclarationDir({ options, pkg }),
 									}),
 									jsx: 'preserve',
-									jsxFactory:
-										// TypeScript fails to resolve Fragments when jsxFactory
-										// is set, even when it's the same as the default value.
-										options.jsx === 'React.createElement'
-											? undefined
-											: options.jsx || 'h',
+									jsxFactory: options.jsx,
+									jsxFragmentFactory: options.jsxFragment,
 								},
 								files: options.entries,
 							},
@@ -579,8 +575,8 @@ function createConfig(options, entry, format, writeMeta) {
 							modern,
 							compress: options.compress !== false,
 							targets: options.target === 'node' ? { node: '8' } : undefined,
-							pragma: options.jsx || 'h',
-							pragmaFrag: options.jsxFragment || 'Fragment',
+							pragma: options.jsx,
+							pragmaFrag: options.jsxFragment,
 							typescript: !!useTypescript,
 							jsxImportSource: options.jsxImportSource || false,
 						},

src/prog.js

@@ -59,6 +59,11 @@ export default handler => {
 		.example("watch --no-sourcemap # don't generate sourcemaps")
 		.option('--raw', 'Show raw byte size', false)
 		.option('--jsx', 'A custom JSX pragma like React.createElement', 'h')
+		.option(
+			'--jsxFragment',
+			'A custom JSX fragment pragma like React.Fragment',
+			'Fragment',
+		)
 		.option(
 			'--jsxImportSource',
 			'Declares the module specifier to be used for importing jsx factory functions',