Initial commit: GamePortrait 竖屏版 - 深色豪华主题

This commit is contained in:
li
2026-01-16 17:47:53 +08:00
commit 40976e4b45
26611 changed files with 2843638 additions and 0 deletions
+264
View File
@@ -0,0 +1,264 @@
# babel-plugin-import
Modular import plugin for babel, compatible with [antd](https://github.com/ant-design/ant-design), [antd-mobile](https://github.com/ant-design/ant-design-mobile), lodash, [material-ui](http://material-ui.com/), and so on.
[![NPM version](https://img.shields.io/npm/v/babel-plugin-import.svg?style=flat)](https://npmjs.org/package/babel-plugin-import)
[![Build Status](https://img.shields.io/travis/ant-design/babel-plugin-import.svg?style=flat)](https://travis-ci.org/ant-design/babel-plugin-import)
----
## Why babel-plugin-import
- [English Instruction](https://ant.design/docs/react/getting-started#Import-on-Demand)
- [中文说明](https://ant.design/docs/react/getting-started-cn#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)
## Where to add babel-plugin-import
- [babelrc](https://babeljs.io/docs/usage/babelrc/)
- [babel-loader](https://github.com/babel/babel-loader)
## Example
#### `{ "libraryName": "antd" }`
```javascript
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);
var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);
```
#### `{ "libraryName": "antd", style: "css" }`
```javascript
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);
var _button = require('antd/lib/button');
require('antd/lib/button/style/css');
ReactDOM.render(<_button>xxxx</_button>);
```
#### `{ "libraryName": "antd", style: true }`
```javascript
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);
var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx</_button>);
```
Note : with `style: true` css source files are imported and optimizations can be done during compilation time. With `style: "css"`, pre bundled css files are imported as they are.
`style: true` can reduce the bundle size significantly, depending on your usage of the library.
## Usage
```bash
npm install babel-plugin-import --save-dev
```
Via `.babelrc` or babel-loader.
```js
{
"plugins": [["import", options]]
}
```
### options
`options` can be object.
```javascript
{
"libraryName": "antd",
"style": true, // or 'css'
}
```
```javascript
{
"libraryName": "lodash",
"libraryDirectory": "",
"camel2DashComponentName": false, // default: true
}
```
```javascript
{
"libraryName": "@material-ui/core",
"libraryDirectory": "components", // default: lib
"camel2DashComponentName": false, // default: true
}
```
~`options` can be an array.~ It's not available in babel@7+
For Example:
```javascript
[
{
"libraryName": "antd",
"libraryDirectory": "lib", // default: lib
"style": true
},
{
"libraryName": "antd-mobile"
},
]
```
`Options` can't be an array in babel@7+, but you can add plugins with name to support multiple dependencies.
For Example:
```javascrit
// .babelrc
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],
["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"]
]
```
#### style
- `["import", { "libraryName": "antd" }]`: import js modularly
- `["import", { "libraryName": "antd", "style": true }]`: import js and css modularly (LESS/Sass source files)
- `["import", { "libraryName": "antd", "style": "css" }]`: import js and css modularly (css built files)
If option style is a `Function`, `babel-plugin-import` will auto import the file which filepath equal to the function return value. This is useful for the components library developers.
e.g.
- ``["import", { "libraryName": "antd", "style": (name) => `${name}/style/2x` }]``: import js and css modularly & css file path is `ComponentName/style/2x`
If a component has no style, you can use the `style` function to return a `false` and the style will be ignored.
e.g.
```js
[
"import",
{
"libraryName": "antd",
"style": (name: string, file: Object) => {
if(name === 'antd/lib/utils'){
return false;
}
return `${name}/style/2x`;
}
}
]
```
#### styleLibraryDirectory
- `["import", { "libraryName": "element-ui", "styleLibraryDirectory": "lib/theme-chalk" }]`: import js and css modularly
If `styleLibraryDirectory` is provided (default `null`), it will be used to form style file path,
`style` will be ignored then. e.g.
```javascript
{
"libraryName": "element-ui",
"styleLibraryDirectory": "lib/theme-chalk",
}
import { Button } from 'element-ui';
var _button = require('element-ui/lib/button');
require('element-ui/lib/theme-chalk/button');
```
#### customName
We can use `customName` to customize import file path.
For example, the default behavior:
```typescript
import { TimePicker } from "antd"
var _button = require('antd/lib/time-picker');
```
You can set `camel2DashComponentName` to `false` to disable transfer from camel to dash:
```typescript
import { TimePicker } from "antd"
var _button = require('antd/lib/TimePicker');
```
And finally, you can use `customName` to customize each name parsing:
```js
[
"import",
{
"libraryName": "antd",
"customName": (name: string, file: object) => {
const filename = file.opts.filename;
if (name === 'TimePicker'){
return 'antd/lib/custom-time-picker';
}
if (filename.indexOf('/path/to/my/different.js') >= 0) {
return 'antd/lib/custom-name';
}
return `antd/lib/${name}`;
}
}
]
```
So this result is:
```typescript
import { TimePicker } from "antd"
var _button = require('antd/lib/custom-time-picker');
```
In some cases, the transformer may serialize the configuration object. If we set the `customName` to a function, it will lost after the serialization.
So we also support specifying the customName with a JavaScript source file path:
```js
[
"import",
{
"libraryName": "antd",
"customName": require('path').resolve(__dirname, './customName.js')
}
]
```
The `customName.js` looks like this:
```js
module.exports = function customName(name) {
return `antd/lib/${name}`;
};
```
#### customStyleName
`customStyleName` works exactly the same as customName, except that it deals with style file path.
#### transformToDefaultImport
Set this option to `false` if your module does not have a `default` export.
### Note
babel-plugin-import will not work properly if you add the library to the webpack config [vendor](https://webpack.js.org/concepts/entry-points/#separate-app-and-vendor-entries).
+254
View File
@@ -0,0 +1,254 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _path = require("path");
var _helperModuleImports = require("@babel/helper-module-imports");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function transCamel(_str, symbol) {
const str = _str[0].toLowerCase() + _str.substr(1);
return str.replace(/([A-Z])/g, $1 => `${symbol}${$1.toLowerCase()}`);
}
function winPath(path) {
return path.replace(/\\/g, '/');
}
function normalizeCustomName(originCustomName) {
// If set to a string, treat it as a JavaScript source file path.
if (typeof originCustomName === 'string') {
// eslint-disable-next-line import/no-dynamic-require
const customNameExports = require(originCustomName);
return typeof customNameExports === 'function' ? customNameExports : customNameExports.default;
}
return originCustomName;
}
class Plugin {
constructor(libraryName, libraryDirectory, style, styleLibraryDirectory, customStyleName, camel2DashComponentName, camel2UnderlineComponentName, fileName, customName, transformToDefaultImport, types, index = 0) {
this.libraryName = libraryName;
this.libraryDirectory = typeof libraryDirectory === 'undefined' ? 'lib' : libraryDirectory;
this.camel2DashComponentName = typeof camel2DashComponentName === 'undefined' ? true : camel2DashComponentName;
this.camel2UnderlineComponentName = camel2UnderlineComponentName;
this.style = style || false;
this.styleLibraryDirectory = styleLibraryDirectory;
this.customStyleName = normalizeCustomName(customStyleName);
this.fileName = fileName || '';
this.customName = normalizeCustomName(customName);
this.transformToDefaultImport = typeof transformToDefaultImport === 'undefined' ? true : transformToDefaultImport;
this.types = types;
this.pluginStateKey = `importPluginState${index}`;
}
getPluginState(state) {
if (!state[this.pluginStateKey]) {
state[this.pluginStateKey] = {}; // eslint-disable-line
}
return state[this.pluginStateKey];
}
importMethod(methodName, file, pluginState) {
if (!pluginState.selectedMethods[methodName]) {
const style = this.style,
libraryDirectory = this.libraryDirectory;
const transformedMethodName = this.camel2UnderlineComponentName // eslint-disable-line
? transCamel(methodName, '_') : this.camel2DashComponentName ? transCamel(methodName, '-') : methodName;
const path = winPath(this.customName ? this.customName(transformedMethodName, file) : (0, _path.join)(this.libraryName, libraryDirectory, transformedMethodName, this.fileName) // eslint-disable-line
);
pluginState.selectedMethods[methodName] = this.transformToDefaultImport // eslint-disable-line
? (0, _helperModuleImports.addDefault)(file.path, path, {
nameHint: methodName
}) : (0, _helperModuleImports.addNamed)(file.path, methodName, path);
if (this.customStyleName) {
const stylePath = winPath(this.customStyleName(transformedMethodName, file));
(0, _helperModuleImports.addSideEffect)(file.path, `${stylePath}`);
} else if (this.styleLibraryDirectory) {
const stylePath = winPath((0, _path.join)(this.libraryName, this.styleLibraryDirectory, transformedMethodName, this.fileName));
(0, _helperModuleImports.addSideEffect)(file.path, `${stylePath}`);
} else if (style === true) {
(0, _helperModuleImports.addSideEffect)(file.path, `${path}/style`);
} else if (style === 'css') {
(0, _helperModuleImports.addSideEffect)(file.path, `${path}/style/css`);
} else if (typeof style === 'function') {
const stylePath = style(path, file);
if (stylePath) {
(0, _helperModuleImports.addSideEffect)(file.path, stylePath);
}
}
}
return _objectSpread({}, pluginState.selectedMethods[methodName]);
}
buildExpressionHandler(node, props, path, state) {
const file = path && path.hub && path.hub.file || state && state.file;
const types = this.types;
const pluginState = this.getPluginState(state);
props.forEach(prop => {
if (!types.isIdentifier(node[prop])) return;
if (pluginState.specified[node[prop].name] && types.isImportSpecifier(path.scope.getBinding(node[prop].name).path)) {
node[prop] = this.importMethod(pluginState.specified[node[prop].name], file, pluginState); // eslint-disable-line
}
});
}
buildDeclaratorHandler(node, prop, path, state) {
const file = path && path.hub && path.hub.file || state && state.file;
const types = this.types;
const pluginState = this.getPluginState(state);
const checkScope = targetNode => pluginState.specified[targetNode.name] &&
// eslint-disable-line
path.scope.hasBinding(targetNode.name) &&
// eslint-disable-line
path.scope.getBinding(targetNode.name).path.type === 'ImportSpecifier'; // eslint-disable-line
if (types.isIdentifier(node[prop]) && checkScope(node[prop])) {
node[prop] = this.importMethod(pluginState.specified[node[prop].name], file, pluginState); // eslint-disable-line
} else if (types.isSequenceExpression(node[prop])) {
node[prop].expressions.forEach((expressionNode, index) => {
if (types.isIdentifier(expressionNode) && checkScope(expressionNode)) {
node[prop].expressions[index] = this.importMethod(pluginState.specified[expressionNode.name], file, pluginState); // eslint-disable-line
}
});
}
}
ProgramEnter(path, state) {
const pluginState = this.getPluginState(state);
pluginState.specified = Object.create(null);
pluginState.libraryObjs = Object.create(null);
pluginState.selectedMethods = Object.create(null);
pluginState.pathsToRemove = [];
}
ProgramExit(path, state) {
this.getPluginState(state).pathsToRemove.forEach(p => !p.removed && p.remove());
}
ImportDeclaration(path, state) {
const node = path.node;
// path maybe removed by prev instances.
if (!node) return;
const value = node.source.value;
const libraryName = this.libraryName;
const types = this.types;
const pluginState = this.getPluginState(state);
if (value === libraryName) {
node.specifiers.forEach(spec => {
if (types.isImportSpecifier(spec)) {
pluginState.specified[spec.local.name] = spec.imported.name;
} else {
pluginState.libraryObjs[spec.local.name] = true;
}
});
pluginState.pathsToRemove.push(path);
}
}
CallExpression(path, state) {
const node = path.node;
const file = path && path.hub && path.hub.file || state && state.file;
const name = node.callee.name;
const types = this.types;
const pluginState = this.getPluginState(state);
if (types.isIdentifier(node.callee)) {
if (pluginState.specified[name]) {
node.callee = this.importMethod(pluginState.specified[name], file, pluginState);
}
}
node.arguments = node.arguments.map(arg => {
const argName = arg.name;
if (pluginState.specified[argName] && path.scope.hasBinding(argName) && path.scope.getBinding(argName).path.type === 'ImportSpecifier') {
return this.importMethod(pluginState.specified[argName], file, pluginState);
}
return arg;
});
}
MemberExpression(path, state) {
const node = path.node;
const file = path && path.hub && path.hub.file || state && state.file;
const pluginState = this.getPluginState(state);
// multiple instance check.
if (!node.object || !node.object.name) return;
if (pluginState.libraryObjs[node.object.name]) {
// antd.Button -> _Button
path.replaceWith(this.importMethod(node.property.name, file, pluginState));
} else if (pluginState.specified[node.object.name] && path.scope.hasBinding(node.object.name)) {
const _path$scope$getBindin = path.scope.getBinding(node.object.name),
scope = _path$scope$getBindin.scope;
// global variable in file scope
if (scope.path.parent.type === 'File') {
node.object = this.importMethod(pluginState.specified[node.object.name], file, pluginState);
}
}
}
Property(path, state) {
const node = path.node;
this.buildDeclaratorHandler(node, 'value', path, state);
}
VariableDeclarator(path, state) {
const node = path.node;
this.buildDeclaratorHandler(node, 'init', path, state);
}
ArrayExpression(path, state) {
const node = path.node;
const props = node.elements.map((_, index) => index);
this.buildExpressionHandler(node.elements, props, path, state);
}
LogicalExpression(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['left', 'right'], path, state);
}
ConditionalExpression(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['test', 'consequent', 'alternate'], path, state);
}
IfStatement(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['test'], path, state);
this.buildExpressionHandler(node.test, ['left', 'right'], path, state);
}
ExpressionStatement(path, state) {
const node = path.node;
const types = this.types;
if (types.isAssignmentExpression(node.expression)) {
this.buildExpressionHandler(node.expression, ['right'], path, state);
}
}
ReturnStatement(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['argument'], path, state);
}
ExportDefaultDeclaration(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['declaration'], path, state);
}
BinaryExpression(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['left', 'right'], path, state);
}
NewExpression(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['callee'], path, state);
const argumentsProps = node.arguments.map((_, index) => index);
this.buildExpressionHandler(node.arguments, argumentsProps, path, state);
}
SwitchStatement(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['discriminant'], path, state);
}
SwitchCase(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['test'], path, state);
}
ClassDeclaration(path, state) {
const node = path.node;
this.buildExpressionHandler(node, ['superClass'], path, state);
}
SequenceExpression(path, state) {
const node = path.node;
const expressionsProps = node.expressions.map((_, index) => index);
this.buildExpressionHandler(node.expressions, expressionsProps, path, state);
}
}
exports.default = Plugin;
+92
View File
@@ -0,0 +1,92 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = _default;
var _assert = _interopRequireDefault(require("assert"));
var _Plugin = _interopRequireDefault(require("./Plugin"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _default({
types
}) {
let plugins = null;
// Only for test
// eslint-disable-next-line no-underscore-dangle
global.__clearBabelAntdPlugin = () => {
plugins = null;
};
function applyInstance(method, args, context) {
// eslint-disable-next-line no-restricted-syntax
var _iterator = _createForOfIteratorHelper(plugins),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
const plugin = _step.value;
if (plugin[method]) {
plugin[method].apply(plugin, [...args, context]);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
const Program = {
enter(path, {
opts = {}
}) {
// Init plugin instances once.
if (!plugins) {
if (Array.isArray(opts)) {
plugins = opts.map(({
libraryName,
libraryDirectory,
style,
styleLibraryDirectory,
customStyleName,
camel2DashComponentName,
camel2UnderlineComponentName,
fileName,
customName,
transformToDefaultImport
}, index) => {
(0, _assert.default)(libraryName, 'libraryName should be provided');
return new _Plugin.default(libraryName, libraryDirectory, style, styleLibraryDirectory, customStyleName, camel2DashComponentName, camel2UnderlineComponentName, fileName, customName, transformToDefaultImport, types, index);
});
} else {
(0, _assert.default)(opts.libraryName, 'libraryName should be provided');
plugins = [new _Plugin.default(opts.libraryName, opts.libraryDirectory, opts.style, opts.styleLibraryDirectory, opts.customStyleName, opts.camel2DashComponentName, opts.camel2UnderlineComponentName, opts.fileName, opts.customName, opts.transformToDefaultImport, types)];
}
}
applyInstance('ProgramEnter', arguments, this); // eslint-disable-line
},
exit() {
applyInstance('ProgramExit', arguments, this); // eslint-disable-line
}
};
const methods = ['ImportDeclaration', 'CallExpression', 'MemberExpression', 'Property', 'VariableDeclarator', 'ArrayExpression', 'LogicalExpression', 'ConditionalExpression', 'IfStatement', 'ExpressionStatement', 'ReturnStatement', 'ExportDefaultDeclaration', 'BinaryExpression', 'NewExpression', 'ClassDeclaration', 'SwitchStatement', 'SwitchCase', 'SequenceExpression'];
const ret = {
visitor: {
Program
}
};
// eslint-disable-next-line no-restricted-syntax
for (var _i = 0, _methods = methods; _i < _methods.length; _i++) {
const method = _methods[_i];
ret.visitor[method] = function () {
// eslint-disable-line
applyInstance(method, arguments, ret.visitor); // eslint-disable-line
};
}
return ret;
}
+65
View File
@@ -0,0 +1,65 @@
{
"name": "babel-plugin-import",
"version": "1.13.6",
"description": "Component modular import plugin for babel.",
"repository": {
"type": "git",
"url": "https://github.com/ant-design/babel-plugin-import"
},
"main": "lib/index.js",
"scripts": {
"build": "father-build",
"test": "umi-test --coverage",
"debug": "umi-test",
"lint": "eslint --ext .js src",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"prepack": "npm run build",
"prepublishOnly": "npm run build && np --no-cleanup --yolo --no-publish --any-branch"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint",
"prettier --write"
]
},
"keywords": [
"babel-plugin",
"antd"
],
"author": "chencheng <sorrycc@gmail.com>",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@umijs/test": "^3.2.28",
"babel-core": "^7.0.0-0",
"babel-preset-umi": "^1.0.0",
"coveralls": "^3.0.6",
"eslint": "^7.1.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"father-build": "^1.22.1",
"husky": "^4.2.5",
"lint-staged": "^10.2.8",
"material-ui": "^0.20.2",
"np": "^6.2.0",
"prettier": "^2.0.5",
"react-toolbox": "^1.2.5"
},
"files": [
"src",
"lib",
"package.json",
"README.md"
],
"dependencies": {
"@babel/helper-module-imports": "^7.0.0"
}
}
+304
View File
@@ -0,0 +1,304 @@
import { join } from 'path';
import { addSideEffect, addDefault, addNamed } from '@babel/helper-module-imports';
function transCamel(_str, symbol) {
const str = _str[0].toLowerCase() + _str.substr(1);
return str.replace(/([A-Z])/g, $1 => `${symbol}${$1.toLowerCase()}`);
}
function winPath(path) {
return path.replace(/\\/g, '/');
}
function normalizeCustomName(originCustomName) {
// If set to a string, treat it as a JavaScript source file path.
if (typeof originCustomName === 'string') {
// eslint-disable-next-line import/no-dynamic-require
const customNameExports = require(originCustomName);
return typeof customNameExports === 'function' ? customNameExports : customNameExports.default;
}
return originCustomName;
}
export default class Plugin {
constructor(
libraryName,
libraryDirectory,
style,
styleLibraryDirectory,
customStyleName,
camel2DashComponentName,
camel2UnderlineComponentName,
fileName,
customName,
transformToDefaultImport,
types,
index = 0,
) {
this.libraryName = libraryName;
this.libraryDirectory = typeof libraryDirectory === 'undefined' ? 'lib' : libraryDirectory;
this.camel2DashComponentName =
typeof camel2DashComponentName === 'undefined' ? true : camel2DashComponentName;
this.camel2UnderlineComponentName = camel2UnderlineComponentName;
this.style = style || false;
this.styleLibraryDirectory = styleLibraryDirectory;
this.customStyleName = normalizeCustomName(customStyleName);
this.fileName = fileName || '';
this.customName = normalizeCustomName(customName);
this.transformToDefaultImport =
typeof transformToDefaultImport === 'undefined' ? true : transformToDefaultImport;
this.types = types;
this.pluginStateKey = `importPluginState${index}`;
}
getPluginState(state) {
if (!state[this.pluginStateKey]) {
state[this.pluginStateKey] = {}; // eslint-disable-line
}
return state[this.pluginStateKey];
}
importMethod(methodName, file, pluginState) {
if (!pluginState.selectedMethods[methodName]) {
const { style, libraryDirectory } = this;
const transformedMethodName = this.camel2UnderlineComponentName // eslint-disable-line
? transCamel(methodName, '_')
: this.camel2DashComponentName
? transCamel(methodName, '-')
: methodName;
const path = winPath(
this.customName
? this.customName(transformedMethodName, file)
: join(this.libraryName, libraryDirectory, transformedMethodName, this.fileName), // eslint-disable-line
);
pluginState.selectedMethods[methodName] = this.transformToDefaultImport // eslint-disable-line
? addDefault(file.path, path, { nameHint: methodName })
: addNamed(file.path, methodName, path);
if (this.customStyleName) {
const stylePath = winPath(this.customStyleName(transformedMethodName, file));
addSideEffect(file.path, `${stylePath}`);
} else if (this.styleLibraryDirectory) {
const stylePath = winPath(
join(this.libraryName, this.styleLibraryDirectory, transformedMethodName, this.fileName),
);
addSideEffect(file.path, `${stylePath}`);
} else if (style === true) {
addSideEffect(file.path, `${path}/style`);
} else if (style === 'css') {
addSideEffect(file.path, `${path}/style/css`);
} else if (typeof style === 'function') {
const stylePath = style(path, file);
if (stylePath) {
addSideEffect(file.path, stylePath);
}
}
}
return { ...pluginState.selectedMethods[methodName] };
}
buildExpressionHandler(node, props, path, state) {
const file = (path && path.hub && path.hub.file) || (state && state.file);
const { types } = this;
const pluginState = this.getPluginState(state);
props.forEach(prop => {
if (!types.isIdentifier(node[prop])) return;
if (
pluginState.specified[node[prop].name] &&
types.isImportSpecifier(path.scope.getBinding(node[prop].name).path)
) {
node[prop] = this.importMethod(pluginState.specified[node[prop].name], file, pluginState); // eslint-disable-line
}
});
}
buildDeclaratorHandler(node, prop, path, state) {
const file = (path && path.hub && path.hub.file) || (state && state.file);
const { types } = this;
const pluginState = this.getPluginState(state);
const checkScope = targetNode =>
pluginState.specified[targetNode.name] && // eslint-disable-line
path.scope.hasBinding(targetNode.name) && // eslint-disable-line
path.scope.getBinding(targetNode.name).path.type === 'ImportSpecifier'; // eslint-disable-line
if (types.isIdentifier(node[prop]) && checkScope(node[prop])) {
node[prop] = this.importMethod(pluginState.specified[node[prop].name], file, pluginState); // eslint-disable-line
} else if (types.isSequenceExpression(node[prop])) {
node[prop].expressions.forEach((expressionNode, index) => {
if (types.isIdentifier(expressionNode) && checkScope(expressionNode)) {
node[prop].expressions[index] = this.importMethod(
pluginState.specified[expressionNode.name],
file,
pluginState,
); // eslint-disable-line
}
});
}
}
ProgramEnter(path, state) {
const pluginState = this.getPluginState(state);
pluginState.specified = Object.create(null);
pluginState.libraryObjs = Object.create(null);
pluginState.selectedMethods = Object.create(null);
pluginState.pathsToRemove = [];
}
ProgramExit(path, state) {
this.getPluginState(state).pathsToRemove.forEach(p => !p.removed && p.remove());
}
ImportDeclaration(path, state) {
const { node } = path;
// path maybe removed by prev instances.
if (!node) return;
const { value } = node.source;
const { libraryName } = this;
const { types } = this;
const pluginState = this.getPluginState(state);
if (value === libraryName) {
node.specifiers.forEach(spec => {
if (types.isImportSpecifier(spec)) {
pluginState.specified[spec.local.name] = spec.imported.name;
} else {
pluginState.libraryObjs[spec.local.name] = true;
}
});
pluginState.pathsToRemove.push(path);
}
}
CallExpression(path, state) {
const { node } = path;
const file = (path && path.hub && path.hub.file) || (state && state.file);
const { name } = node.callee;
const { types } = this;
const pluginState = this.getPluginState(state);
if (types.isIdentifier(node.callee)) {
if (pluginState.specified[name]) {
node.callee = this.importMethod(pluginState.specified[name], file, pluginState);
}
}
node.arguments = node.arguments.map(arg => {
const { name: argName } = arg;
if (
pluginState.specified[argName] &&
path.scope.hasBinding(argName) &&
path.scope.getBinding(argName).path.type === 'ImportSpecifier'
) {
return this.importMethod(pluginState.specified[argName], file, pluginState);
}
return arg;
});
}
MemberExpression(path, state) {
const { node } = path;
const file = (path && path.hub && path.hub.file) || (state && state.file);
const pluginState = this.getPluginState(state);
// multiple instance check.
if (!node.object || !node.object.name) return;
if (pluginState.libraryObjs[node.object.name]) {
// antd.Button -> _Button
path.replaceWith(this.importMethod(node.property.name, file, pluginState));
} else if (pluginState.specified[node.object.name] && path.scope.hasBinding(node.object.name)) {
const { scope } = path.scope.getBinding(node.object.name);
// global variable in file scope
if (scope.path.parent.type === 'File') {
node.object = this.importMethod(pluginState.specified[node.object.name], file, pluginState);
}
}
}
Property(path, state) {
const { node } = path;
this.buildDeclaratorHandler(node, 'value', path, state);
}
VariableDeclarator(path, state) {
const { node } = path;
this.buildDeclaratorHandler(node, 'init', path, state);
}
ArrayExpression(path, state) {
const { node } = path;
const props = node.elements.map((_, index) => index);
this.buildExpressionHandler(node.elements, props, path, state);
}
LogicalExpression(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['left', 'right'], path, state);
}
ConditionalExpression(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['test', 'consequent', 'alternate'], path, state);
}
IfStatement(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['test'], path, state);
this.buildExpressionHandler(node.test, ['left', 'right'], path, state);
}
ExpressionStatement(path, state) {
const { node } = path;
const { types } = this;
if (types.isAssignmentExpression(node.expression)) {
this.buildExpressionHandler(node.expression, ['right'], path, state);
}
}
ReturnStatement(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['argument'], path, state);
}
ExportDefaultDeclaration(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['declaration'], path, state);
}
BinaryExpression(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['left', 'right'], path, state);
}
NewExpression(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['callee'], path, state);
const argumentsProps = node.arguments.map((_, index) => index);
this.buildExpressionHandler(node.arguments, argumentsProps, path, state);
}
SwitchStatement(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['discriminant'], path, state);
}
SwitchCase(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['test'], path, state);
}
ClassDeclaration(path, state) {
const { node } = path;
this.buildExpressionHandler(node, ['superClass'], path, state);
}
SequenceExpression(path, state) {
const { node } = path;
const expressionsProps = node.expressions.map((_, index) => index);
this.buildExpressionHandler(node.expressions, expressionsProps, path, state);
}
}
+120
View File
@@ -0,0 +1,120 @@
import assert from 'assert';
import Plugin from './Plugin';
export default function ({ types }) {
let plugins = null;
// Only for test
// eslint-disable-next-line no-underscore-dangle
global.__clearBabelAntdPlugin = () => {
plugins = null;
};
function applyInstance(method, args, context) {
// eslint-disable-next-line no-restricted-syntax
for (const plugin of plugins) {
if (plugin[method]) {
plugin[method].apply(plugin, [...args, context]);
}
}
}
const Program = {
enter(path, { opts = {} }) {
// Init plugin instances once.
if (!plugins) {
if (Array.isArray(opts)) {
plugins = opts.map(
(
{
libraryName,
libraryDirectory,
style,
styleLibraryDirectory,
customStyleName,
camel2DashComponentName,
camel2UnderlineComponentName,
fileName,
customName,
transformToDefaultImport,
},
index,
) => {
assert(libraryName, 'libraryName should be provided');
return new Plugin(
libraryName,
libraryDirectory,
style,
styleLibraryDirectory,
customStyleName,
camel2DashComponentName,
camel2UnderlineComponentName,
fileName,
customName,
transformToDefaultImport,
types,
index,
);
},
);
} else {
assert(opts.libraryName, 'libraryName should be provided');
plugins = [
new Plugin(
opts.libraryName,
opts.libraryDirectory,
opts.style,
opts.styleLibraryDirectory,
opts.customStyleName,
opts.camel2DashComponentName,
opts.camel2UnderlineComponentName,
opts.fileName,
opts.customName,
opts.transformToDefaultImport,
types,
),
];
}
}
applyInstance('ProgramEnter', arguments, this); // eslint-disable-line
},
exit() {
applyInstance('ProgramExit', arguments, this); // eslint-disable-line
},
};
const methods = [
'ImportDeclaration',
'CallExpression',
'MemberExpression',
'Property',
'VariableDeclarator',
'ArrayExpression',
'LogicalExpression',
'ConditionalExpression',
'IfStatement',
'ExpressionStatement',
'ReturnStatement',
'ExportDefaultDeclaration',
'BinaryExpression',
'NewExpression',
'ClassDeclaration',
'SwitchStatement',
'SwitchCase',
'SequenceExpression',
];
const ret = {
visitor: { Program },
};
// eslint-disable-next-line no-restricted-syntax
for (const method of methods) {
ret.visitor[method] = function () {
// eslint-disable-line
applyInstance(method, arguments, ret.visitor); // eslint-disable-line
};
}
return ret;
}