From 974864dd1865ed2e693f2c313dcf3143bf8b83e1 Mon Sep 17 00:00:00 2001
From: osdevisnot <osdevisnot@gmail.com>
Date: Tue, 25 Aug 2020 09:38:16 -0700
Subject: [PATCH] feat: new JSX transform - optimizes the creation of JSX
 elements

---
 README.md                         |  3 ++-
 examples/jsx-runtime/package.json | 10 ++++++++++
 examples/jsx-runtime/src/index.js |  3 +++
 src/babel.js                      | 11 +++++++++--
 src/options.js                    |  3 ++-
 5 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 examples/jsx-runtime/package.json
 create mode 100644 examples/jsx-runtime/src/index.js

diff --git a/README.md b/README.md
index 6841364..c06fc32 100644
--- a/README.md
+++ b/README.md
@@ -96,10 +96,11 @@ Then use `npm run` or `yarn` to invoke npm scripts as you normally would.
 | `klap.port`      | -p&nbsp;--port         | port for development server                    | `1234`                            |
 | `klap.example`   | -e&nbsp;--example      | location of index js/ts file for start command | `public/index.js` or `pkg.source` |
 | `klap.fallback`  | -f&nbsp;--fallback     | location of index html file for start command  | `public/index.html`               |
-| `klap.target`    | -t&nbsp;--target       | target for development server (`umd|es`)       | `es`                              |
+| `klap.target`    | -t&nbsp;--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)
 
diff --git a/examples/jsx-runtime/package.json b/examples/jsx-runtime/package.json
new file mode 100644
index 0000000..d914954
--- /dev/null
+++ b/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"
+	}
+}
diff --git a/examples/jsx-runtime/src/index.js b/examples/jsx-runtime/src/index.js
new file mode 100644
index 0000000..869f892
--- /dev/null
+++ b/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>
diff --git a/src/babel.js b/src/babel.js
index 4e41415..3600a87 100644
--- a/src/babel.js
+++ b/src/babel.js
@@ -25,7 +25,7 @@ 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`,
@@ -33,6 +33,13 @@ export const babelConfig = (command, pkg, options) => {
 	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 = [
diff --git a/src/options.js b/src/options.js
index d5f94b4..8cd8f7d 100644
--- a/src/options.js
+++ b/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 }