修复 使用 jsx 时按需加载的问题 #15

.projectile

@@ -0,0 +1,16 @@
+;; projectile configure file
+;; - means ignore this pattern, must has a leading "/", using the regexp rule.
+;; + means add this subdir, it will block the root dir.
+-/GTAGS$
+-/GPATH$
+-/GRTAGS$
+-/.*.svn
+-/.*.git
+-/icons
+-/.*images/
+-/.*imgs/
+-/.*image/
+-/libs/encoding
+-/.*.dll$
+-/node_modules
+-/coverage

README.org

@@ -0,0 +1,5 @@
+* TEST
+istanbul -> macha -> "./test/index-test.js" -> babel + plugin("./src/index.js") -> debugcase
+* DEBUG
+test/index-test.js" -> babel + plugin("./src/index.js") -> debugcase
+

debug/case/testUseInJsx_index.jsx

@@ -0,0 +1,24 @@
+import { Button } from 'element-ui';
+
+console.log(Button);
+
+const Bt2 = Button
+
+const LeftBar = {
+    data() {
+        return {
+            firstName: 'Wfghjfghjghjalter11',
+            lastName: 'ghjkhbnhWhitesdfghjkdfghjkl;',
+            alias: 'jkhkhhlkhHeisenberg'
+        };
+    },
+    render() {
+        console.log(Button);
+        let Bt = Button;
+        return (<div>
+            <div> {this.firstName} </div>
+            <Button>ClickMe</Button>
+        </div>);
+    }
+};
+export default LeftBar;

debug/debug.js

@@ -0,0 +1,28 @@
+import { transformFileSync } from 'babel-core'
+import { join } from 'path'
+import { writeFileSync } from 'fs'
+import plugin from '../src/index'
+
+let originFile = join(__dirname, 'input.jsx')
+let outputFile = join(__dirname, 'output.js')
+
+let outputText = transformFileSync(originFile, {
+    "presets": [
+        ["env", {
+            "targets": {
+                "browsers": ["last 2 versions", "safari >= 7", "ie >= 10"]
+            }
+        }]
+    ],
+    "plugins": [
+        ["transform-vue-jsx"],
+        [plugin, [
+            {
+                "libraryName": "element-ui",
+                "styleLibraryName": "theme-default"
+            }
+        ]]
+    ]
+}).code
+
+writeFileSync(outputFile, outputText)

debug/input.jsx

@@ -0,0 +1,24 @@
+import { Button as MyBu } from 'element-ui';
+
+console.log(MyBu);
+
+const Bt2 = MyBu
+
+const LeftBar = {
+    data() {
+        return {
+            firstName: 'Wfghjfghjghjalter11',
+            lastName: 'ghjkhbnhWhitesdfghjkdfghjkl;',
+            alias: 'jkhkhhlkhHeisenberg'
+        };
+    },
+    render() {
+        console.log(MyBu);
+        let Bt = MyBu;
+        return (<div>
+            <div> {this.firstName} </div>
+            <MyBu>ClickMe</MyBu>
+        </div>);
+    }
+};
+export default LeftBar;

debug/output.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _myBu = require('antd/lib/my-bu');
+
+var _myBu2 = _interopRequireDefault(_myBu);
+
+var _button = require('element-ui/lib/theme-default/button.css');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _base = require('element-ui/lib/theme-default/base.css');
+
+var _base2 = _interopRequireDefault(_base);
+
+var _button3 = require('element-ui/lib/button');
+
+var _button4 = _interopRequireDefault(_button3);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+console.log(_button4.default);
+
+var Bt2 = _myBu2.default;
+
+var LeftBar = {
+    data: function data() {
+        return {
+            firstName: 'Wfghjfghjghjalter11',
+            lastName: 'ghjkhbnhWhitesdfghjkdfghjkl;',
+            alias: 'jkhkhhlkhHeisenberg'
+        };
+    },
+    render: function render() {
+        var h = arguments[0];
+
+        console.log(_button4.default);
+        var Bt = _myBu2.default;
+        return h(
+            'div',
+            null,
+            [h(
+                'div',
+                null,
+                [' ', this.firstName, ' ']
+            ), h(
+                _myBu2.default,
+                null,
+                ['ClickMe']
+            )]
+        );
+    }
+};
+exports.default = LeftBar;

package.json

@@ -1,62 +1,62 @@
 {
-  "name": "babel-plugin-component",
-  "version": "0.10.1",
-  "description": "Modular build plugin for babel.",
-  "main": "lib/index.js",
-  "scripts": {
-    "build": "rm -rf lib && babel src --out-dir lib --ignore __tests__",
-    "test": "babel-node node_modules/.bin/babel-istanbul cover node_modules/.bin/_mocha --no-timeouts",
-    "debug": "mocha --require babel-core/register --require babel-polyfill --no-timeouts",
-    "lint": "eslint --ext .js src",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
-    "prepublish": "npm run build"
-  },
-  "pre-commit": [
-    "lint"
-  ],
-  "keywords": [
-    "babel-plugin"
-  ],
-  "author": [
-    "chencheng <sorrycc@gmail.com>",
-    "qingwei-li <cinwell.li@gmail.com>"
-  ],
-  "license": "MIT",
-  "devDependencies": {
-    "babel-cli": "^6.3.13",
-    "babel-core": "^6.7.4",
-    "babel-istanbul": "^0.7.0",
-    "babel-plugin-add-module-exports": "^0.1.2",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.3.13",
-    "coveralls": "^2.11.6",
-    "eslint": "^2.7.0",
-    "eslint-config-airbnb": "^6.2.0",
-    "expect": "^1.13.4",
-    "mocha": "^2.3.4",
-    "pre-commit": "~1.1.2"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/qingwei-li/babel-plugin-component.git"
-  },
-  "homepage": "https://github.com/qingwei-li/babel-plugin-component#readme",
-  "bugs": {
-    "url": "https://github.com/qingwei-li/babel-plugin-component/issues"
-  },
-  "babel": {
-    "presets": [
-      "es2015",
-      "stage-0"
+    "name": "babel-plugin-import-vue",
+    "version": "0.0.1",
+    "description": "Modular build plugin for babel. compatible with element and so on",
+    "main": "lib/index.js",
+    "scripts": {
+        "build": "rimraf lib && babel src --out-dir lib --ignore __tests__",
+        "debug": "node --inspect-brk --require ./node_modules/babel-core/register.js ./debug/debug.js",
+        "testalls": "babel-node node_modules/babel-istanbul/lib/cli.js cover node_modules/mocha/bin/_mocha --no-timeouts",
+        "debugalls": "mocha --require babel-core/register --require babel-polyfill --no-timeouts",
+        "coveralls": "cat ./coverage/lcov.info | coveralls"
+    },
+    "keywords": [
+        "babel-plugin",
+        "vue",
+        "element",
+        "babel-plugin-import"
     ],
-    "plugins": [
-      "add-module-exports"
+    "author": [
+        "chencheng <sorrycc@gmail.com>",
+        "qingwei-li <cinwell.li@gmail.com>",
+        "zhongshu <stanwenb@gmail.com>",
+        "zhongshu <stangwenb@gmail.com>"
+    ],
+    "license": "MIT",
+    "devDependencies": {
+        "babel-cli": "^6.26.0",
+        "babel-core": "^6.26.0",
+        "babel-helper-vue-jsx-merge-props": "^2.0.2",
+        "babel-istanbul": "^0.7.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "babel-plugin-transform-vue-jsx": "^3.5.0",
+        "babel-polyfill": "^6.26.0",
+        "babel-preset-env": "^1.6.0",
+        "coveralls": "^2.13.3",
+        "expect": "^1.20.2",
+        "mocha": "^2.5.3",
+        "rimraf": "^2.6.2"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/qingwei-li/babel-plugin-component.git"
+    },
+    "homepage": "https://github.com/qingwei-li/babel-plugin-component#readme",
+    "bugs": {
+        "url": "https://github.com/qingwei-li/babel-plugin-component/issues"
+    },
+    "babel": {
+        "presets": [
+            ["env", {
+                "targets": {
+                    "node": "current"
+                }
+            }]
+        ]
+    },
+    "files": [
+        "lib",
+        "package.json",
+        "README.md"
     ]
-  },
-  "files": [
-    "lib",
-    "package.json",
-    "README.md"
-  ]
 }

src/core.js

@@ -27,7 +27,7 @@ export default function (defaultLibraryName) {
         if (Array.isArray(opts)) {
           options = opts.find(option =>
             moduleArr[methodName] === option.libraryName ||
-            libraryObjs[methodName] === option.libraryName
+                                      libraryObjs[methodName] === option.libraryName
           ); // eslint-disable-line
         }
         options = options || opts;
@@ -71,16 +71,16 @@ export default function (defaultLibraryName) {
           if (!cachePath[libraryName]) {
             const themeName = styleLibraryName.replace(/^~/, '');
             cachePath[libraryName] = styleLibraryName.indexOf('~') === 0
-              ? resolve(process.cwd(), themeName)
-              : `${libraryName}/${libDir}/${themeName}`;
+                                   ? resolve(process.cwd(), themeName)
+                                   : `${libraryName}/${libDir}/${themeName}`;
           }
 
           if (libraryObjs[methodName]) {
             /* istanbul ingore next */
             if (cache[libraryName] === 2) {
               throw Error('[babel-plugin-component] If you are using both' +
-                'on-demand and importing all, make sure to invoke the' +
-                ' importing all first.');
+                          'on-demand and importing all, make sure to invoke the' +
+                          ' importing all first.');
             }
             path = `${cachePath[libraryName]}${_root || '/index'}.css`;
             cache[libraryName] = 1;
@@ -128,7 +128,9 @@ export default function (defaultLibraryName) {
 
     function buildDeclaratorHandler(node, prop, path, opts) {
       const { file } = path.hub;
-      if (!types.isIdentifier(node[prop])) return;
+
+      if (!types.isIdentifier(node[prop]) && !types.isJSXIdentifier(node[prop])) return
+
       if (specified[node[prop].name]) {
         node[prop] = importMethod(node[prop].name, file, opts); // eslint-disable-line
       }
@@ -230,6 +232,16 @@ export default function (defaultLibraryName) {
           buildDeclaratorHandler(node, 'init', path, opts);
         },
 
+        JSXOpeningElement(path, { opts }) {
+          const { node } = path
+          buildDeclaratorHandler(node, 'name', path, opts)
+        },
+
+        JSXClosingElement(path, { opts }) {
+          const { node } = path
+          buildDeclaratorHandler(node, 'name', path, opts)
+        },
+
         LogicalExpression(path, { opts }) {
           const { node } = path;
           buildExpressionHandler(node, ['left', 'right'], path, opts);

src/index.js

@@ -1 +1 @@
-export default require('./core')('antd');
+export default require('./core').default('antd')