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 ( + <> +