Add production option and use it for JSX (#270)

When production is true (default is false) we do not include debug info (such as `__self` and `__source`) in the output of the jsx transformer.
alangpierce · Jun 25, 2018 · de5cb1e · de5cb1e
1 parent 40af8e5
commit de5cb1e
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 5 deletions.
diff --git 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
@@ -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
@@ -11,10 +11,16 @@ function assertResult(
     extraTransforms,
     jsxPragma,
     jsxFragmentPragma,
-  }: {extraTransforms?: Array<Transform>; jsxPragma?: string; jsxFragmentPragma?: string} = {},
+    production,
+  }: {
+    extraTransforms?: Array<Transform>;
+    jsxPragma?: string;
+    jsxFragmentPragma?: string;
+    production?: boolean;
+  } = {},
 ): void {
   const transforms: Array<Transform> = ["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(
+        `
+      <A />
+    `,
+        `
+      React.createElement(A, null )
+    `,
+        {production: true},
+      );
+    });
+
+    it("handles props", () => {
+      assertResult(
+        `
+      <A a="b" />
+    `,
+        `
+      React.createElement(A, { a: "b",} )
+    `,
+        {production: true},
+      );
+    });
+
+    it("handles bool props", () => {
+      assertResult(
+        `
+      <A a />
+    `,
+        `
+      React.createElement(A, { a: true,} )
+    `,
+        {production: true},
+      );
+    });
+
+    it("handles spread props", () => {
+      assertResult(
+        `
+        <A {...obj} />
+    `,
+        `
+        React.createElement(A, { ...obj,} )
+    `,
+        {production: true},
+      );
+    });
+
+    it("handles fragment", () => {
+      assertResult(
+        `
+      <>Hi</>
+    `,
+        `
+      React.createElement(React.Fragment, null, "Hi")
+    `,
+        {production: true},
+      );
+    });
+  });
 });