Merge branch 'master' into master

Author: Zaggen

README.md

@@ -8,7 +8,7 @@ For example, the following code...
 import React from 'react';
 import CloseSVG from './close.svg';
 
-const MyComponent = () => <CloseSvg />;
+const MyComponent = () => <CloseSVG />;
 ```
 
 will be transformed into...
@@ -17,7 +17,7 @@ will be transformed into...
 import React from 'react';
 const CloseSVG = () => <svg>{/* ... */}</svg>;
 
-const MyComponent = () => <CloseSvg />;
+const MyComponent = () => <CloseSVG />;
 ```
 
 ## Installation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-inline-react-svg",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "A babel plugin that optimizes and inlines SVGs for your react components.",
   "main": "lib/index.js",
   "scripts": {
@@ -31,6 +31,7 @@
     "babel-cli": "^6.14.0",
     "babel-core": "^6.14.0",
     "babel-preset-airbnb": "^2.0.0",
+    "babel-preset-react": "^6.24.1",
     "eslint": "^3.5.0",
     "eslint-config-airbnb": "^11.1.0",
     "eslint-plugin-import": "^1.15.0",

src/index.js

@@ -4,6 +4,7 @@ import template from 'babel-template';
 import traverse from 'babel-traverse';
 import { parse } from 'babylon';
 import resolveFrom from 'resolve-from';
+
 import optimize from './optimize';
 import escapeBraces from './escapeBraces';
 import transformSvg from './transformSvg';
@@ -22,31 +23,46 @@ let ignoreRegex;
 
 export default ({ types: t }) => ({
   visitor: {
+    Program: {
+      enter({ scope, node }, { file }) {
+        if (!scope.hasBinding('React')) {
+          const reactImportDeclaration = t.importDeclaration([
+            t.importDefaultSpecifier(t.identifier('React')),
+          ], t.stringLiteral('react'));
+
+          file.set('ensureReact', () => { node.body.unshift(reactImportDeclaration); });
+        } else {
+          file.set('ensureReact', () => {});
+        }
+      },
+    },
     ImportDeclaration(path, state) {
+      const importPath = path.node.source.value;
       const { ignorePattern, caseSensitive, root, alias } = state.opts;
-
+      const { file } = state;
+      
       if (ignorePattern) {
         // Only set the ignoreRegex once:
         ignoreRegex = ignoreRegex || new RegExp(ignorePattern);
         // Test if we should ignore this:
-        if (ignoreRegex.test(path.node.source.value)) {
+        if (ignoreRegex.test(importPath)) {
           return;
         }
       }
       // This plugin only applies for SVGs:
-      if (extname(path.node.source.value) === '.svg') {
+      if (extname(importPath) === '.svg') {
         // We only support the import default specifier, so let's use that identifier:
         const importIdentifier = path.node.specifiers[0].local;
-        const iconPath = state.file.opts.filename;
+        const iconPath = file.opts.filename;
 
-        const aliasMatch = alias[path.node.source.value.split('/')[0]];
+        const aliasMatch = alias[importPath.split('/')[0]];
         let svgPath;
         if (aliasMatch) {
           const resolveRoot = resolve(process.cwd(), root || './');
           const aliasedPath = resolve(resolveRoot, aliasMatch);
-          svgPath = aliasedPath + path.node.source.value.replace(aliasMatch, '');
+          svgPath = aliasedPath + importPath.replace(aliasMatch, '');
         } else {
-          svgPath = resolveFrom(dirname(iconPath), path.node.source.value);
+          svgPath = resolveFrom(dirname(iconPath), importPath);
           if (caseSensitive && !fileExistsWithCaseSync(svgPath)) {
             throw new Error(`File path didn't match case of file on disk: ${svgPath}`);
           }
@@ -101,6 +117,7 @@ export default ({ types: t }) => ({
           const svgReplacement = buildSvg(opts);
           path.replaceWith(svgReplacement);
         }
+        file.get('ensureReact')();
       }
     },
   },

test/fixtures/test-no-react.jsx

@@ -0,0 +1,5 @@
+import MySvg from './close.svg';
+
+export function MyFunctionIcon() {
+  return MySvg;
+}

test/fixtures/test-no-svg-or-react.js

@@ -0,0 +1,5 @@
+import './path/to.jpg';
+import './code.js';
+
+export default class Foo {
+}

test/sanity.js

@@ -1,27 +1,65 @@
 import { transformFile } from 'babel-core';
 
+function assertReactImport(result) {
+  const match = result.code.match(/import React from 'react'/);
+  if (!match) {
+    throw new Error('no React import found');
+  }
+  if (match.length !== 1) {
+    throw new Error('more or less than one match found');
+  }
+}
+
 transformFile('test/fixtures/test.jsx', {
-  presets: ['airbnb'],
+  babelrc: false,
+  presets: ['react'],
   plugins: [
     '../../src/index',
   ],
 }, (err, result) => {
   if (err) throw err;
-  console.log(result.code);
+  assertReactImport(result);
+  console.log('test/fixtures/test.jsx', result.code);
 });
 
-transformFile('test/fixtures/test-case-sensitive.jsx', {
-  presets: ['airbnb'],
+transformFile('test/fixtures/test-no-react.jsx', {
+  babelrc: false,
+  presets: ['react'],
   plugins: [
-    ['../../src/index',
-    {
-        "caseSensitive": true
-    }]
+    '../../src/index',
   ],
 }, (err, result) => {
+  if (err) throw err;
+  console.log('test/fixtures/test-no-react.jsx', result.code);
+  assertReactImport(result);
+});
+
+transformFile('test/fixtures/test-case-sensitive.jsx', {
+  babelrc: false,
+  presets: ['react'],
+  plugins: [
+    ['../../src/index', {
+      caseSensitive: true,
+    }],
+  ],
+}, (err) => {
   if (err && err.message.indexOf('match case') !== -1) {
-    console.log("Test passed: Expected case sensitive error was thrown");
+    console.log('test/fixtures/test-case-sensitive.jsx', 'Test passed: Expected case sensitive error was thrown');
   } else {
     throw new Error("Test failed: Expected case sensitive error wasn't thrown");
   }
-});
+});
+
+transformFile('test/fixtures/test-no-svg-or-react.js', {
+  babelrc: false,
+  presets: [],
+  plugins: [
+    '../../src/index',
+  ],
+}, (err, result) => {
+  if (err) throw err;
+  console.log('test/fixtures/test-no-svg-or-react.js', result.code);
+  if (/React/.test(result.code)) {
+    throw new Error('Test failed: React import was present');
+  }
+});