🐣 adds jsx support

src/extract/transpile/meta.js

@@ -7,8 +7,17 @@ const coffeeWrap           = require("./coffeeWrap")();
 const litCoffeeWrap        = require("./coffeeWrap")(true);
 const supportedTranspilers = require("../../../package.json").supportedTranspilers;
 
+/*
+  jsx - acorn_loose will handle this correctly when imports
+        etc are on top, which is the most likely use case.
+        Alternatives (making a jsxWrap with babel-core & a bunch
+        of plugins or using acorn-jsx) might be more correct in
+        edge cases but are either much harder to implement or
+        likely to fail in basic use cases.
+ */
 const extension2wrapper = {
     ".js"        : javaScriptWrap,
+    ".jsx"       : javaScriptWrap,
     ".ts"        : typeScriptWrap,
     ".tsx"       : typeScriptWrap,
     ".d.ts"      : typeScriptWrap,

test/extract/transpile/fixtures/jsx.js

@@ -0,0 +1,63 @@
+// 1:1 copied from https://github.com/mozilla/payments-ui
+import React, { Component, PropTypes } from 'react';
+
+import PayMethodChoice from 'components/pay-method-choice';
+import ProductDetail from 'components/product-detail';
+
+import * as products from 'products';
+import { gettext } from 'utils';
+import tracking from 'tracking';
+
+
+export default class ProductPayChooser extends Component {
+
+  static propTypes = {
+    payMethods: PropTypes.array.isRequired,
+    payWithNewCard: PropTypes.func.isRequired,
+    processPayment: PropTypes.func.isRequired,
+    productId: PropTypes.string.isRequired,
+    userDefinedAmount: PropTypes.string,
+  }
+
+  componentDidMount() {
+    tracking.setPage('/product-pay-chooser');
+  }
+
+  handleSubmit = (payMethodUri, processingId) => {
+    this.props.processPayment({productId: this.props.productId,
+                               userDefinedAmount: this.props.userDefinedAmount,
+                               payMethodUri: payMethodUri,
+                               processingId: processingId});
+  }
+
+  render() {
+    var product = products.get(this.props.productId);
+    var submitPrompt;
+    if (product.seller.kind === 'donations') {
+      submitPrompt = gettext('Donate now');
+    } else {
+      // TODO: also handle non-recurring, non-donations here.
+      submitPrompt = gettext('Subscribe');
+    }
+
+    return (
+      <div>
+        <ProductDetail
+          productId={this.props.productId}
+          userDefinedAmount={this.props.userDefinedAmount}
+        />
+        <PayMethodChoice
+          payMethods={this.props.payMethods}
+          productId={this.props.productId}
+          submitButtonText={submitPrompt}
+          submitHandler={this.handleSubmit}
+          useDropDown
+        />
+        <a className="add-card" href="#"
+          onClick={this.props.payWithNewCard}>
+          {gettext('Add new credit card')}
+        </a>
+      </div>
+    );
+  }
+}

test/extract/transpile/fixtures/jsx.jsx

@@ -0,0 +1,63 @@
+// 1:1 copied from https://github.com/mozilla/payments-ui
+import React, { Component, PropTypes } from 'react';
+
+import PayMethodChoice from 'components/pay-method-choice';
+import ProductDetail from 'components/product-detail';
+
+import * as products from 'products';
+import { gettext } from 'utils';
+import tracking from 'tracking';
+
+
+export default class ProductPayChooser extends Component {
+
+  static propTypes = {
+    payMethods: PropTypes.array.isRequired,
+    payWithNewCard: PropTypes.func.isRequired,
+    processPayment: PropTypes.func.isRequired,
+    productId: PropTypes.string.isRequired,
+    userDefinedAmount: PropTypes.string,
+  }
+
+  componentDidMount() {
+    tracking.setPage('/product-pay-chooser');
+  }
+
+  handleSubmit = (payMethodUri, processingId) => {
+    this.props.processPayment({productId: this.props.productId,
+                               userDefinedAmount: this.props.userDefinedAmount,
+                               payMethodUri: payMethodUri,
+                               processingId: processingId});
+  }
+
+  render() {
+    var product = products.get(this.props.productId);
+    var submitPrompt;
+    if (product.seller.kind === 'donations') {
+      submitPrompt = gettext('Donate now');
+    } else {
+      // TODO: also handle non-recurring, non-donations here.
+      submitPrompt = gettext('Subscribe');
+    }
+
+    return (
+      <div>
+        <ProductDetail
+          productId={this.props.productId}
+          userDefinedAmount={this.props.userDefinedAmount}
+        />
+        <PayMethodChoice
+          payMethods={this.props.payMethods}
+          productId={this.props.productId}
+          submitButtonText={submitPrompt}
+          submitHandler={this.handleSubmit}
+          useDropDown
+        />
+        <a className="add-card" href="#"
+          onClick={this.props.payWithNewCard}>
+          {gettext('Add new credit card')}
+        </a>
+      </div>
+    );
+  }
+}

test/extract/transpile/jsxWrap.spec.js

@@ -0,0 +1,23 @@
+"use strict";
+
+const expect = require("chai").expect;
+const fs     = require('fs');
+const wrap   = require("../../../src/extract/transpile/javaScriptWrap");
+
+describe("jsx transpiler (the plain old javascript one)", () => {
+    it("tells the jsx transpiler is available", () => {
+        expect(
+            wrap.isAvailable()
+        ).to.equal(true);
+    });
+
+    it("transpiles jsx", () => {
+        expect(
+            wrap.transpile(
+                fs.readFileSync("./test/extract/transpile/fixtures/jsx.jsx", 'utf8')
+            )
+        ).to.equal(
+            fs.readFileSync("./test/extract/transpile/fixtures/jsx.js", 'utf8')
+        );
+    });
+});

test/extract/transpile/meta.spec.js

@@ -9,7 +9,7 @@ describe("transpiler meta", () => {
     it("tells which extensions can be scanned", () => {
         expect(
             meta.scannableExtensions
-        ).to.deep.equal([".js", ".ts", ".tsx", ".d.ts", ".coffee", ".litcoffee", ".coffee.md"]);
+        ).to.deep.equal([".js", ".jsx", ".ts", ".tsx", ".d.ts", ".coffee", ".litcoffee", ".coffee.md"]);
     });
 
     it("returns the 'js' wrapper for unknown extensions", () => {

test/main/fixtures/jsx.json

@@ -0,0 +1,166 @@
+{
+    "dependencies": [
+        {
+            "source": "test/main/fixtures/jsx/index.js",
+            "dependencies": [
+                {
+                    "resolved": "test/main/fixtures/jsx/jsx.jsx",
+                    "coreModule": false,
+                    "followable": true,
+                    "couldNotResolve": false,
+                    "dependencyTypes": [
+                        "local"
+                    ],
+                    "module": "./jsx",
+                    "moduleSystem": "cjs",
+                    "valid": true
+                }
+            ]
+        },
+        {
+            "source": "test/main/fixtures/jsx/jsx.jsx",
+            "dependencies": [
+                {
+                    "resolved": "components/pay-method-choice",
+                    "coreModule": false,
+                    "followable": false,
+                    "couldNotResolve": true,
+                    "dependencyTypes": [
+                        "unknown"
+                    ],
+                    "module": "components/pay-method-choice",
+                    "moduleSystem": "es6",
+                    "valid": true
+                },
+                {
+                    "resolved": "components/product-detail",
+                    "coreModule": false,
+                    "followable": false,
+                    "couldNotResolve": true,
+                    "dependencyTypes": [
+                        "unknown"
+                    ],
+                    "module": "components/product-detail",
+                    "moduleSystem": "es6",
+                    "valid": true
+                },
+                {
+                    "resolved": "products",
+                    "coreModule": false,
+                    "followable": false,
+                    "couldNotResolve": true,
+                    "dependencyTypes": [
+                        "unknown"
+                    ],
+                    "module": "products",
+                    "moduleSystem": "es6",
+                    "valid": true
+                },
+                {
+                    "resolved": "react",
+                    "coreModule": false,
+                    "followable": false,
+                    "couldNotResolve": true,
+                    "dependencyTypes": [
+                        "unknown"
+                    ],
+                    "module": "react",
+                    "moduleSystem": "es6",
+                    "valid": true
+                },
+                {
+                    "resolved": "tracking",
+                    "coreModule": false,
+                    "followable": false,
+                    "couldNotResolve": true,
+                    "dependencyTypes": [
+                        "unknown"
+                    ],
+                    "module": "tracking",
+                    "moduleSystem": "es6",
+                    "valid": true
+                },
+                {
+                    "resolved": "utils",
+                    "coreModule": false,
+                    "followable": false,
+                    "couldNotResolve": true,
+                    "dependencyTypes": [
+                        "unknown"
+                    ],
+                    "module": "utils",
+                    "moduleSystem": "es6",
+                    "valid": true
+                }
+            ]
+        },
+        {
+            "source": "components/pay-method-choice",
+            "followable": false,
+            "coreModule": false,
+            "couldNotResolve": true,
+            "dependencyTypes": [
+                "unknown"
+            ],
+            "dependencies": []
+        },
+        {
+            "source": "components/product-detail",
+            "followable": false,
+            "coreModule": false,
+            "couldNotResolve": true,
+            "dependencyTypes": [
+                "unknown"
+            ],
+            "dependencies": []
+        },
+        {
+            "source": "products",
+            "followable": false,
+            "coreModule": false,
+            "couldNotResolve": true,
+            "dependencyTypes": [
+                "unknown"
+            ],
+            "dependencies": []
+        },
+        {
+            "source": "react",
+            "followable": false,
+            "coreModule": false,
+            "couldNotResolve": true,
+            "dependencyTypes": [
+                "unknown"
+            ],
+            "dependencies": []
+        },
+        {
+            "source": "tracking",
+            "followable": false,
+            "coreModule": false,
+            "couldNotResolve": true,
+            "dependencyTypes": [
+                "unknown"
+            ],
+            "dependencies": []
+        },
+        {
+            "source": "utils",
+            "followable": false,
+            "coreModule": false,
+            "couldNotResolve": true,
+            "dependencyTypes": [
+                "unknown"
+            ],
+            "dependencies": []
+        }
+    ],
+    "summary": {
+        "violations": [],
+        "error": 0,
+        "warn": 0,
+        "info": 0,
+        "totalCruised": 8,
+        "optionsUsed": {}
+    }
+}

test/main/fixtures/jsx/index.js

@@ -0,0 +1,3 @@
+const jsx = require('./jsx');
+
+console.log(jsx);