Skip to content

TS: Fix Fragments broken when jsxFactory is set #623

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 20, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -567,7 +567,12 @@ function createConfig(options, entry, format, writeMeta) {
sourceMap: options.sourcemap,
declaration: true,
jsx: 'react',
jsxFactory: options.jsx || 'h',
jsxFactory:
// TypeScript fails to resolve Fragments when jsxFactory
// is set, even when it's the same as the default value.
options.jsx === 'React.createElement'
? undefined
: options.jsx || 'h',
},
},
tsconfig: options.tsconfig,
Expand Down
55 changes: 55 additions & 0 deletions test/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2332,6 +2332,61 @@ exports[`fixtures build shebang with microbundle 5`] = `
"
`;

exports[`fixtures build ts-jsx with microbundle 1`] = `
"Used script: microbundle build --jsx 'React.createElement'

Directory tree:

ts-jsx
dist
index.d.ts
ts-jsx.esm.js
ts-jsx.esm.js.map
ts-jsx.js
ts-jsx.js.map
ts-jsx.umd.js
ts-jsx.umd.js.map
node_modules
package.json
src
index.tsx
tsconfig.json


Build \\"tsJsx\\" to dist:
130 B: ts-jsx.js.gz
94 B: ts-jsx.js.br
131 B: ts-jsx.esm.js.gz
111 B: ts-jsx.esm.js.br
220 B: ts-jsx.umd.js.gz
177 B: ts-jsx.umd.js.br"
`;

exports[`fixtures build ts-jsx with microbundle 2`] = `7`;

exports[`fixtures build ts-jsx with microbundle 3`] = `
"export declare const foo: any;
"
`;

exports[`fixtures build ts-jsx with microbundle 4`] = `
"var n=function(n,r){return{tag:n,props:r,children:[].slice.call(arguments,2)}}(function(n){return n.children},null,\\"foo\\");export{n as foo};
//# sourceMappingURL=ts-jsx.esm.js.map
"
`;

exports[`fixtures build ts-jsx with microbundle 5`] = `
"var n=function(n,r){return{tag:n,props:r,children:[].slice.call(arguments,2)}}(function(n){return n.children},null,\\"foo\\");exports.foo=n;
//# sourceMappingURL=ts-jsx.js.map
"
`;

exports[`fixtures build ts-jsx with microbundle 6`] = `
"!function(e,n){\\"object\\"==typeof exports&&\\"undefined\\"!=typeof module?n(exports):\\"function\\"==typeof define&&define.amd?define([\\"exports\\"],n):n((e=e||self).tsJsx={})}(this,function(e){var n=function(e,n){return{tag:e,props:n,children:[].slice.call(arguments,2)}}(function(e){return e.children},null,\\"foo\\");e.foo=n});
//# sourceMappingURL=ts-jsx.umd.js.map
"
`;

exports[`fixtures build ts-mixed-exports with microbundle 1`] = `
"Used script: microbundle

Expand Down
7 changes: 7 additions & 0 deletions test/fixtures/ts-jsx/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"name": "ts-jsx",
"source": "src/index.tsx",
"scripts": {
"build": "microbundle build --jsx 'React.createElement'"
}
}
10 changes: 10 additions & 0 deletions test/fixtures/ts-jsx/src/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const createElement = (tag, props, ...children) => ({ tag, props, children });
// eslint-disable-next-line no-unused-vars
const Fragment = ({ children }) => children;

const React = {
createElement,
Fragment,
};

export const foo = <>foo</>;
5 changes: 5 additions & 0 deletions test/fixtures/ts-jsx/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"compilerOptions": {
"jsx": "react"
}
}