From ba0ea8d3c324c5a8589a1a3c674a369c8f926aa8 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@users.noreply.github.com>
Date: Mon, 24 Aug 2020 08:27:58 -0500
Subject: [PATCH] fix(Fragment): fix tsconfig Fragment

---
 src/compiler/transpile/transpile-module.ts |  2 +-
 src/internal/stencil-core/index.d.ts       |  1 +
 src/runtime/test/jsx.spec.tsx              | 32 +++++++++++++++++++++-
 src/runtime/test/tsconfig.json             |  1 +
 src/testing/jest/jest-preprocessor.ts      |  2 +-
 tsconfig.json                              |  1 +
 6 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/compiler/transpile/transpile-module.ts b/src/compiler/transpile/transpile-module.ts
index dd40b5e3ede..5398b335280 100644
--- a/src/compiler/transpile/transpile-module.ts
+++ b/src/compiler/transpile/transpile-module.ts
@@ -59,7 +59,7 @@ export const transpileModule = (config: d.Config, input: string, transformOpts:
     tsCompilerOptions.jsxFactory = 'h';
   }
 
-  if (tsCompilerOptions.jsxFragmentFactory != null && !isString(tsCompilerOptions.jsxFragmentFactory)) {
+  if (tsCompilerOptions.jsx != null && !isString(tsCompilerOptions.jsxFragmentFactory)) {
     tsCompilerOptions.jsxFragmentFactory = 'Fragment';
   }
 
diff --git a/src/internal/stencil-core/index.d.ts b/src/internal/stencil-core/index.d.ts
index a2a4b3a9d91..d11bffd41f6 100644
--- a/src/internal/stencil-core/index.d.ts
+++ b/src/internal/stencil-core/index.d.ts
@@ -31,6 +31,7 @@ export {
   getElement,
   getMode,
   getRenderingRef,
+  Fragment,
   forceUpdate,
   h,
   Host,
diff --git a/src/runtime/test/jsx.spec.tsx b/src/runtime/test/jsx.spec.tsx
index 4e0e6bcc1ec..1dd3ceab9ad 100644
--- a/src/runtime/test/jsx.spec.tsx
+++ b/src/runtime/test/jsx.spec.tsx
@@ -1,8 +1,38 @@
-import { Component, Host, Prop, State, h } from '@stencil/core';
+import { Component, Host, Prop, State, h, Fragment } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 import { FunctionalComponent } from '../../declarations';
 
 describe('jsx', () => {
+  it('Fragment', async () => {
+    @Component({ tag: 'cmp-a' })
+    class CmpA {
+      render() {
+        return (
+          <>
+            <div>A</div>
+            <div>B</div>
+          </>
+        );
+      }
+    }
+
+    const { root } = await newSpecPage({
+      components: [CmpA],
+      html: `<cmp-a></cmp-a>`,
+    });
+
+    expect(root).toEqualHtml(`
+      <cmp-a>
+        <div>
+          A
+        </div>
+        <div>
+          B
+        </div>
+      </cmp-a>
+    `);
+  });
+
   it('render template', async () => {
     @Component({ tag: 'cmp-a' })
     class CmpA {
diff --git a/src/runtime/test/tsconfig.json b/src/runtime/test/tsconfig.json
index f104bcfc1ca..e93d816cfbe 100644
--- a/src/runtime/test/tsconfig.json
+++ b/src/runtime/test/tsconfig.json
@@ -8,6 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
     "lib": ["dom", "es2017", "esnext.array"],
     "module": "esnext",
     "moduleResolution": "node",
diff --git a/src/testing/jest/jest-preprocessor.ts b/src/testing/jest/jest-preprocessor.ts
index 2f8c0b7ee3f..03114d794a2 100644
--- a/src/testing/jest/jest-preprocessor.ts
+++ b/src/testing/jest/jest-preprocessor.ts
@@ -58,7 +58,7 @@ export const jestPreprocessor = {
       filePath,
       jestConfigStr,
       !!transformOptions.instrument,
-      5, // cache buster
+      6, // cache buster
     ];
 
     return key.join(':');
diff --git a/tsconfig.json b/tsconfig.json
index c2f0fa18fbf..931b5f96ce3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,6 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
     "lib": ["dom", "es2018", "esnext.array"],
     "module": "esnext",
     "moduleResolution": "node",