From 6ecdc1a517f49e5fb504f0422fdcd64d295478c2 Mon Sep 17 00:00:00 2001
From: hushicai <hushicai@gf.com.cn>
Date: Fri, 19 Jan 2018 15:43:57 +0800
Subject: [PATCH] [fix] babel-plugin VariableDeclaration case

Convert VariableDeclarations, e.g.,

var ReactNative = require('react-native');

Close #781
---
 .../__snapshots__/index-test.js.snap          | 20 ++++++++-
 .../src/__tests__/index-test.js               |  7 +++
 .../src/index.js                              | 44 ++++++++++++-------
 3 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap b/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap
index c498d9d5..d21f45af 100644
--- a/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap
@@ -66,6 +66,24 @@ import * as ReactNativeModules from 'react-native-web/dist/index';
 "
 `;
 
+exports[`require "react-native" 1`] = `
+"
+const ReactNative = require('react-native');
+const { View } = require('react-native');
+const {  StyleSheet, TouchableOpacity } = require('react-native');
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const ReactNative = require('react-native-web/dist/index');
+
+const View = require('react-native-web/dist/exports/View');
+
+const StyleSheet = require('react-native-web/dist/exports/StyleSheet');
+
+const TouchableOpacity = require('react-native-web/dist/exports/TouchableOpacity');
+"
+`;
+
 exports[`require "react-native-web" 1`] = `
 "
 const ReactNative = require('react-native-web');
@@ -74,7 +92,7 @@ const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = requ
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-const ReactNative = require('react-native-web');
+const ReactNative = require('react-native-web/dist/index');
 
 const createElement = require('react-native-web/dist/exports/createElement');
 
diff --git a/packages/babel-plugin-react-native-web/src/__tests__/index-test.js b/packages/babel-plugin-react-native-web/src/__tests__/index-test.js
index 1b762343..cf560502 100644
--- a/packages/babel-plugin-react-native-web/src/__tests__/index-test.js
+++ b/packages/babel-plugin-react-native-web/src/__tests__/index-test.js
@@ -30,6 +30,13 @@ export { ColorPropType, StyleSheet, Text, createElement } from 'react-native';`,
 export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web';`,
     snapshot: true
   },
+  {
+    title: 'require "react-native"',
+    code: `const ReactNative = require('react-native');
+const { View } = require('react-native');
+const {  StyleSheet, TouchableOpacity } = require('react-native');`,
+    snapshot: true
+  },
   {
     title: 'require "react-native-web"',
     code: `const ReactNative = require('react-native-web');
diff --git a/packages/babel-plugin-react-native-web/src/index.js b/packages/babel-plugin-react-native-web/src/index.js
index dca14359..2d3fac4a 100644
--- a/packages/babel-plugin-react-native-web/src/index.js
+++ b/packages/babel-plugin-react-native-web/src/index.js
@@ -8,7 +8,7 @@ const isReactNativeRequire = (t, node) => {
   }
   const { id, init } = declarations[0];
   return (
-    t.isObjectPattern(id) &&
+    (t.isObjectPattern(id) || t.isIdentifier(id)) &&
     t.isCallExpression(init) &&
     t.isIdentifier(init.callee) &&
     init.callee.name === 'require' &&
@@ -84,21 +84,35 @@ module.exports = function({ types: t }) {
       VariableDeclaration(path, state) {
         if (isReactNativeRequire(t, path.node)) {
           const { id } = path.node.declarations[0];
-          const imports = id.properties
-            .map(identifier => {
-              const distLocation = getDistLocation(identifier.key.name);
-              if (distLocation) {
-                return t.variableDeclaration(path.node.kind, [
-                  t.variableDeclarator(
-                    t.identifier(identifier.value.name),
-                    t.callExpression(t.identifier('require'), [t.stringLiteral(distLocation)])
-                  )
-                ]);
-              }
-            })
-            .filter(Boolean);
+          if (t.isObjectPattern(id)) {
+            const imports = id.properties
+              .map(identifier => {
+                const distLocation = getDistLocation(identifier.key.name);
+                if (distLocation) {
+                  return t.variableDeclaration(path.node.kind, [
+                    t.variableDeclarator(
+                      t.identifier(identifier.value.name),
+                      t.callExpression(t.identifier('require'), [t.stringLiteral(distLocation)])
+                    )
+                  ]);
+                }
+              })
+              .filter(Boolean);
 
-          path.replaceWithMultiple(imports);
+            path.replaceWithMultiple(imports);
+          } else if (t.isIdentifier(id)) {
+            const name = id.name;
+            const importIndex = t.variableDeclaration(path.node.kind, [
+              t.variableDeclarator(
+                t.identifier(name),
+                t.callExpression(t.identifier('require'), [
+                  t.stringLiteral('react-native-web/dist/index')
+                ])
+              )
+            ]);
+
+            path.replaceWith(importIndex);
+          }
         }
       }
     }