diff --git a/src/index.ts b/src/index.ts index d1353cdc..f874ae6e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -47,6 +47,10 @@ export interface Options { * File path to use in error messages, React display names, and source maps. */ filePath?: string; + /** + * If specified, omit any development-specific code in the output. + */ + production?: boolean; } export interface TransformResult { diff --git a/src/transformers/JSXTransformer.ts b/src/transformers/JSXTransformer.ts index ead74d9e..1a3cfa41 100644 --- a/src/transformers/JSXTransformer.ts +++ b/src/transformers/JSXTransformer.ts @@ -83,9 +83,15 @@ export default class JSXTransformer extends Transformer { processProps(firstTokenStart: number): void { const lineNumber = this.getLineNumberForIndex(firstTokenStart); - const devProps = `__self: this, __source: {fileName: ${this.getFilenameVarName()}, lineNumber: ${lineNumber}}`; + const devProps = this.options.production + ? "" + : `__self: this, __source: {fileName: ${this.getFilenameVarName()}, lineNumber: ${lineNumber}}`; if (!this.tokens.matches1(tt.jsxName) && !this.tokens.matches1(tt.braceL)) { - this.tokens.appendCode(`, {${devProps}}`); + if (devProps) { + this.tokens.appendCode(`, {${devProps}}`); + } else { + this.tokens.appendCode(`, null`); + } return; } this.tokens.appendCode(`, {`); @@ -119,7 +125,11 @@ export default class JSXTransformer extends Transformer { } this.tokens.appendCode(","); } - this.tokens.appendCode(` ${devProps}}`); + if (devProps) { + this.tokens.appendCode(` ${devProps}}`); + } else { + this.tokens.appendCode("}"); + } } processStringPropValue(): void { diff --git a/test/jsx-test.ts b/test/jsx-test.ts index e4db9e47..e3e3a1e2 100644 --- a/test/jsx-test.ts +++ b/test/jsx-test.ts @@ -11,10 +11,16 @@ function assertResult( extraTransforms, jsxPragma, jsxFragmentPragma, - }: {extraTransforms?: Array; jsxPragma?: string; jsxFragmentPragma?: string} = {}, + production, + }: { + extraTransforms?: Array; + jsxPragma?: string; + jsxFragmentPragma?: string; + production?: boolean; + } = {}, ): void { const transforms: Array = ["jsx", ...(extraTransforms || [])]; - util.assertResult(code, expectedResult, {transforms, jsxPragma, jsxFragmentPragma}); + util.assertResult(code, expectedResult, {transforms, jsxPragma, jsxFragmentPragma, production}); } describe("transform JSX", () => { @@ -413,4 +419,66 @@ describe("transform JSX", () => { {extraTransforms: ["imports"], jsxPragma: "h", jsxFragmentPragma: "Fragment"}, ); }); + + describe("with production true", () => { + it("handles no props", () => { + assertResult( + ` + + `, + ` + React.createElement(A, null ) + `, + {production: true}, + ); + }); + + it("handles props", () => { + assertResult( + ` + + `, + ` + React.createElement(A, { a: "b",} ) + `, + {production: true}, + ); + }); + + it("handles bool props", () => { + assertResult( + ` + + `, + ` + React.createElement(A, { a: true,} ) + `, + {production: true}, + ); + }); + + it("handles spread props", () => { + assertResult( + ` + + `, + ` + React.createElement(A, { ...obj,} ) + `, + {production: true}, + ); + }); + + it("handles fragment", () => { + assertResult( + ` + <>Hi + `, + ` + React.createElement(React.Fragment, null, "Hi") + `, + {production: true}, + ); + }); + }); });