From f3abee768df833308c69e4693a5d2a84af9b6d2e Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Mon, 24 Aug 2020 15:05:23 +0200
Subject: [PATCH] feat(runtime): add jsx Fragment (#2647)

---
 src/compiler/sys/typescript/typescript-config.ts        | 1 +
 src/compiler/transformers/test/transpile.ts             | 1 +
 src/compiler/transformers/update-stencil-core-import.ts | 1 +
 src/compiler/transpile/transpile-module.ts              | 4 ++++
 src/declarations/stencil-public-runtime.ts              | 5 +++++
 src/runtime/fragment.ts                                 | 3 +++
 src/runtime/index.ts                                    | 1 +
 7 files changed, 16 insertions(+)
 create mode 100644 src/runtime/fragment.ts

diff --git a/src/compiler/sys/typescript/typescript-config.ts b/src/compiler/sys/typescript/typescript-config.ts
index 6e73737699a..73fad891c5f 100644
--- a/src/compiler/sys/typescript/typescript-config.ts
+++ b/src/compiler/sys/typescript/typescript-config.ts
@@ -146,6 +146,7 @@ const createDefaultTsConfig = (config: d.Config) =>
         target: 'es2017',
         jsx: 'react',
         jsxFactory: 'h',
+        jsxFragmentFactory: 'Fragment'
       },
       include: [relative(config.rootDir, config.srcDir)],
     },
diff --git a/src/compiler/transformers/test/transpile.ts b/src/compiler/transformers/test/transpile.ts
index c2b551a8856..db3de28194f 100644
--- a/src/compiler/transformers/test/transpile.ts
+++ b/src/compiler/transformers/test/transpile.ts
@@ -40,6 +40,7 @@ export function transpileModule(
 
   options.jsx = ts.JsxEmit.React;
   options.jsxFactory = 'h';
+  options.jsxFragmentFactory = 'Fragment';
 
   const inputFileName = 'module.tsx';
   const sourceFile = ts.createSourceFile(inputFileName, input, options.target);
diff --git a/src/compiler/transformers/update-stencil-core-import.ts b/src/compiler/transformers/update-stencil-core-import.ts
index d70c99c0354..47a2a80f065 100644
--- a/src/compiler/transformers/update-stencil-core-import.ts
+++ b/src/compiler/transformers/update-stencil-core-import.ts
@@ -62,6 +62,7 @@ const KEEP_IMPORTS = new Set([
   'getMode',
   'Build',
   'Host',
+  'Fragment',
   'getAssetPath',
   'writeTask',
   'readTask',
diff --git a/src/compiler/transpile/transpile-module.ts b/src/compiler/transpile/transpile-module.ts
index 0deb4f81e70..dd40b5e3ede 100644
--- a/src/compiler/transpile/transpile-module.ts
+++ b/src/compiler/transpile/transpile-module.ts
@@ -59,6 +59,10 @@ export const transpileModule = (config: d.Config, input: string, transformOpts:
     tsCompilerOptions.jsxFactory = 'h';
   }
 
+  if (tsCompilerOptions.jsxFragmentFactory != null && !isString(tsCompilerOptions.jsxFragmentFactory)) {
+    tsCompilerOptions.jsxFragmentFactory = 'Fragment';
+  }
+
   if (tsCompilerOptions.paths && !isString(tsCompilerOptions.baseUrl)) {
     tsCompilerOptions.baseUrl = '.';
   }
diff --git a/src/declarations/stencil-public-runtime.ts b/src/declarations/stencil-public-runtime.ts
index 664a1b8b0ba..eda1636ccb4 100644
--- a/src/declarations/stencil-public-runtime.ts
+++ b/src/declarations/stencil-public-runtime.ts
@@ -481,6 +481,11 @@ export interface ChildNode {
  */
 export declare const Host: FunctionalComponent<HostAttributes>;
 
+/**
+ * Fragment
+ */
+export declare const Fragment: FunctionalComponent<{}>;
+
 /**
  * The "h" namespace is used to import JSX types for elements and attributes.
  * It is imported in order to avoid conflicting global JSX issues.
diff --git a/src/runtime/fragment.ts b/src/runtime/fragment.ts
new file mode 100644
index 00000000000..792c6617309
--- /dev/null
+++ b/src/runtime/fragment.ts
@@ -0,0 +1,3 @@
+import { FunctionalComponent } from '../declarations/stencil-public-runtime';
+
+export const Fragment: FunctionalComponent = (_, children: any) => children;
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
index b39da1476db..ded4ce3f560 100644
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -16,3 +16,4 @@ export { forceUpdate, postUpdateComponent, getRenderingRef } from './update-comp
 export { proxyComponent } from './proxy-component';
 export { renderVdom } from './vdom/vdom-render';
 export { setMode, getMode } from './mode';
+export { Fragment } from './fragment';