feat: new JSX transform - optimizes the creation of JSX elements

README.md

@@ -96,10 +96,11 @@ Then use `npm run` or `yarn` to invoke npm scripts as you normally would.
 | `klap.port`      | -p --port         | port for development server                    | `1234`                            |
 | `klap.example`   | -e --example      | location of index js/ts file for start command | `public/index.js` or `pkg.source` |
 | `klap.fallback`  | -f --fallback     | location of index html file for start command  | `public/index.html`               |
-| `klap.target`    | -t --target       | target for development server (`umd|es`)       | `es`                              |
+| `klap.target`    | -t --target       | target for development server (`umd, es`)      | `es`                              |
 | `klap.sourcemap` | --no-sourcemap         | sourcemaps for builds                          | `true`                            |
 | `klap.minify`    | --no-minify            | minification for builds                        | `true`                            |
 | `klap.globals`   |                        | global names for umd bundles                   | `{}`                              |
+| `klap.runtime`   |                        | the runtime for new JSX transform              | `react`                           |
 
 > Note: See default [browserslist coverage](https://browserl.ist/?q=%3E1%25%2C+not+ie+11%2C+not+op_mini+all)
 

examples/jsx-runtime/package.json

@@ -0,0 +1,10 @@
+{
+	"name": "jsx-runtime",
+	"version": "0.0.0",
+	"private": true,
+	"module": "dist/index.esm.js",
+	"source": "src/index.js",
+	"klap": {
+		"runtime": "preact"
+	}
+}

examples/jsx-runtime/src/index.js

@@ -0,0 +1,3 @@
+export const sum = (a, b) => a + b
+
+export const MyComponent = (props) => <div>Hello World</div>

src/babel.js

@@ -25,14 +25,21 @@ let hasPackage = (pkg, name) =>
 
 export const babelConfig = (command, pkg, options) => {
 	const extensions = [...DEFAULT_EXTENSIONS, '.ts', '.tsx', '.json']
-	const { browserslist, format } = options
+	const { browserslist, format, runtime } = options
 
 	// Note: when using `React`, presetTs needs `React` as jsxPragma,
 	// vs presetReact needs `React.createElement`,
 	// but when using `h` as pragma, both presets needs it to be just `h`
 	let [jsxPragma, pragma, pragmaFrag] = hasPackage(pkg, 'react')
 		? ['React', 'React.createElement', 'React.Fragment']
 		: ['h', 'h', 'h']
+
+	// new JSX Transform - https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md
+	let reactPresetOptions = { runtime: 'classic', pragma, pragmaFrag }
+	if (runtime !== 'classic') {
+		reactPresetOptions = { runtime: 'automatic', importSource: runtime }
+	}
+
 	// Note: The styled component plugin effects the css prop, even if
 	// styled components are not being used in project. So, we enable
 	// this only when styled-components is a project dependency...
@@ -53,7 +60,7 @@ export const babelConfig = (command, pkg, options) => {
 			},
 		],
 		[presetTs, { jsxPragma, isTSX: true, allExtensions: true }],
-		[presetReact, { pragma, pragmaFrag }],
+		[presetReact, reactPresetOptions],
 	]
 
 	const plugins = [

src/options.js

@@ -19,6 +19,7 @@ const getOptions = (pkg, command) => {
 		globals = {},
 		fallback = 'public/index.html',
 		example = 'public/index.js',
+		runtime = 'classic',
 	} = klap
 	const opts = getopts(process.argv.slice(3), {
 		boolean: ['sourcemap', 'minify'],
@@ -52,7 +53,7 @@ const getOptions = (pkg, command) => {
 		opts.browser = browser
 	}
 
-	return { ...opts, globals }
+	return { ...opts, globals, runtime }
 }
 
 export { getOptions }