Handle importing JSON files (#22)

* Handle importing JSON files and fix context not being passed through for default props converter

JSON files are now detected and intentionally not parsed when imported
as parsing them throws errors.

Author: Blasz

__fixtures__/test.json

@@ -0,0 +1,4 @@
+{
+  "name": "some cool package",
+  "version": "0.0.1"
+}

__snapshots__/test.js.snap

@@ -171,6 +171,42 @@ Object {
 }
 `;
 
+exports[`Should handle importing JSON files 1`] = `
+Object {
+  "classes": Array [
+    Object {
+      "kind": "object",
+      "members": Array [
+        Object {
+          "default": Object {
+            "importKind": "value",
+            "kind": "import",
+            "moduleSpecifier": "./__fixtures__/test",
+            "name": "name",
+            "referenceIdName": "name",
+          },
+          "key": Object {
+            "kind": "id",
+            "name": "a",
+          },
+          "kind": "property",
+          "optional": false,
+          "value": Object {
+            "kind": "string",
+          },
+        },
+      ],
+      "name": Object {
+        "kind": "id",
+        "name": "Component",
+        "type": null,
+      },
+    },
+  ],
+  "kind": "program",
+}
+`;
+
 exports[`Should handle rest element 1`] = `
 Object {
   "classes": Array [
@@ -1084,6 +1120,7 @@ Object {
             "value": Object {
               "kind": "generic",
               "value": Object {
+                "external": true,
                 "importKind": "type",
                 "kind": "import",
                 "moduleSpecifier": "react",
@@ -2046,6 +2083,7 @@ Object {
               Object {
                 "kind": "spread",
                 "value": Object {
+                  "external": true,
                   "importKind": "value",
                   "kind": "import",
                   "moduleSpecifier": "somewhere",
@@ -2304,6 +2342,7 @@ Object {
           "value": Object {
             "kind": "generic",
             "value": Object {
+              "external": true,
               "importKind": "type",
               "kind": "import",
               "moduleSpecifier": "react",
@@ -2365,6 +2404,7 @@ Object {
           "value": Object {
             "kind": "generic",
             "value": Object {
+              "external": true,
               "importKind": "type",
               "kind": "import",
               "moduleSpecifier": "react",
@@ -2433,6 +2473,7 @@ Object {
           "value": Object {
             "kind": "generic",
             "value": Object {
+              "external": true,
               "importKind": "type",
               "kind": "import",
               "moduleSpecifier": "react",
@@ -2502,6 +2543,7 @@ Object {
           "value": Object {
             "kind": "generic",
             "value": Object {
+              "external": true,
               "importKind": "type",
               "kind": "import",
               "moduleSpecifier": "react",

index.js

@@ -4,8 +4,9 @@ export type * from './kinds'
 import * as K from './kinds'
 */
 
+const nodePath = require('path');
 const createBabelFile = require("babel-file");
-const { loadImportSync } = require("babel-file-loader");
+const { loadFileSync, resolveImportFilePathSync } = require("babel-file-loader");
 const { isFlowIdentifier } = require("babel-flow-identifiers");
 const { findFlowBinding } = require("babel-flow-scope");
 const { getIdentifierKind } = require("babel-identifiers");
@@ -138,7 +139,7 @@ converters.Program = (path, context) /*: K.Program*/ => {
 function convertReactComponentClass(path, context) {
   let params = path.get("superTypeParameters").get("params");
   let props = params[0];
-  let defaultProps = getDefaultProps(path);
+  let defaultProps = getDefaultProps(path, context);
 
   let classProperties = convert(props, { ...context, mode: "type" });
   classProperties.name = convert(path.get("id"), {
@@ -859,7 +860,19 @@ function importConverterGeneral(path, context) /*: K.Import */ {
       };
     }
 
-    let file = loadImportSync(path.parentPath, context.resolveOptions);
+    const filePath = resolveImportFilePathSync(path.parentPath, context.resolveOptions);
+
+    // Don't attempt to parse JSON
+    if (nodePath.extname(filePath) === '.json') {
+      return {
+        kind: "import",
+        importKind,
+        name,
+        moduleSpecifier,
+      };
+    }
+
+    let file = loadFileSync(filePath);
 
     let id;
     if (path.node.imported) {
@@ -933,6 +946,12 @@ function extractReactTypes(
 ) {
   let plugins = ["jsx"];
 
+  if (resolveOptions && !resolveOptions.extensions) {
+    // The resolve package that babel-file-loader uses only resolves .js files by default instead of the
+    // default extension list of node (.js, .json and .node) so add .json back here.
+    resolveOptions.extensions = ['.js', '.json'];
+  }
+
   if (typeSystem === "flow") plugins.push("flow");
   else if (typeSystem === "typescript") plugins.push("typescript");
   else throw new Error('typeSystem must be either "flow" or "typescript"');

test.js

@@ -809,6 +809,19 @@ const TESTS = [
     code: `
       class Component extends React.Component<{ a: number[] }> {}
     `
+  },
+  {
+    name: "Should handle importing JSON files",
+    typeSystem: "flow",
+    code: `
+      import { name, version } from "./__fixtures__/test";
+
+      class Component extends React.Component<{ a: string }> {
+        defaultProps = {
+          a: name,
+        }
+      }
+    `
   }
 ];
 
@@ -825,7 +838,8 @@ for (let testCase of TESTS) {
 
   testFn(testCase.name, () => {
     let code = stripIndent(testCase.code);
-    let result = extractReactTypes(code, testCase.typeSystem);
+    // Pass in file name so we can resolve imports to files in __fixtures__
+    let result = extractReactTypes(code, testCase.typeSystem, __filename);
     expect(result).toMatchSnapshot();
   });
 }