feat(runtime): add jsx Fragment (#2647)

Author: manucorporat

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)],
     },

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);

src/compiler/transformers/update-stencil-core-import.ts

@@ -62,6 +62,7 @@ const KEEP_IMPORTS = new Set([
   'getMode',
   'Build',
   'Host',
+  'Fragment',
   'getAssetPath',
   'writeTask',
   'readTask',

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 = '.';
   }

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.

src/runtime/fragment.ts

@@ -0,0 +1,3 @@
+import { FunctionalComponent } from '../declarations/stencil-public-runtime';
+
+export const Fragment: FunctionalComponent = (_, children: any) => children;

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';