update to latest version

Ruijin Ma · Ruijin Ma · commit 3d3de142c4b9 · 2016-08-30T10:55:14.000+08:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,14 @@
+{
+    "presets": [
+        "es2015",
+        "stage-0",
+        "react"
+    ],
+    "plugins": [
+        "add-module-exports",
+        "lodash",
+	"transform-class-properties",
+	["transform-es2015-classes", { "loose": true }],
+	"transform-proto-to-assign"
+    ]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+    "extends": "canonical"
+}
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ coverage
 !.npmignore
 !.babelrc
 !.travis.yml
+!.eslintrc
diff --git a/.travis.yml b/.travis.yml
@@ -1,7 +1,10 @@
 language: node_js
 node_js:
+    - 6
     - 5
-    - 4
 notifications:
     email: false
 sudo: false
+script:
+    - npm run test
+    - npm run lint
diff --git a/README.md b/README.md
@@ -61,7 +61,7 @@ Rendering the component will produce a markup similar to:
 ```js
 <div class="table__table___32osj">
     <div class="table__row___2w27N">
-        <div class="table__cell___2w27N">A0</div>
+        <div class="table__cell___1oVw5">A0</div>
         <div class="table__cell___1oVw5">B0</div>
     </div>
 </div>
@@ -182,22 +182,48 @@ Setup:
 * Install [`style-loader`](https://www.npmjs.com/package/style-loader).
 * Install [`css-loader`](https://www.npmjs.com/package/css-loader).
 * Use [`extract-text-webpack-plugin`](https://www.npmjs.com/package/extract-text-webpack-plugin) to extract chunks of CSS into a single stylesheet.
+
 * Setup `/\.css$/` loader:
 
-```js
-{
-    test: /\.css$/,
-    loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
-}
-```
+  * ExtractTextPlugin v1x:
+
+    ```js
+    {
+      test: /\.css$/,
+      loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
+    }
+    ```
+
+  * ExtractTextPlugin v2x:
+
+    ```js
+    {
+      test: /\.css$/,
+      loader: ExtractTextPlugin.extract({
+          notExtractLoader: 'style-loader',
+          loader: 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!resolve-url!postcss',
+      }),
+    }
+    ```
 
 * Setup `extract-text-webpack-plugin` plugin:
 
-```js
-new ExtractTextPlugin('app.css', {
-    allChunks: true
-})
-```
+  * ExtractTextPlugin v1x:
+
+    ```js
+    new ExtractTextPlugin('app.css', {
+        allChunks: true
+    })
+    ```
+
+  * ExtractTextPlugin v2x:
+
+    ```js
+    new ExtractTextPlugin({
+      filename: 'app.css',
+      allChunks: true
+    })
+    ```
 
 Refer to [webpack-demo](https://github.com/css-modules/webpack-demo) or [react-css-modules-examples](https://github.com/gajus/react-css-modules-examples) for an example of a complete setup.
 
diff --git a/package.json b/package.json
@@ -12,36 +12,40 @@
     "css",
     "modules"
   ],
-  "version": "3.7.6",
+  "version": "3.7.10",
   "author": {
     "name": "Gajus Kuizinas",
     "email": "gajus@gajus.com",
     "url": "http://gajus.com"
   },
   "license": "BSD-3-Clause",
   "dependencies": {
-    "es6-map": "^0.1.3",
     "hoist-non-react-statics": "^1.0.5",
     "lodash": "^4.6.1",
     "object-unfreeze": "^1.0.2"
   },
   "devDependencies": {
+    "babel-cli": "^6.10.1",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-lodash": "^3.2.5",
+    "babel-plugin-transform-proto-to-assign": "^6.9.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-register": "^6.9.0",
     "chai": "^3.5.0",
+    "eslint": "^3.0.0",
+    "eslint-config-canonical": "^1.7.12",
     "jsdom": "^8.1.0",
-    "pragmatist": "^3.0.21",
+    "mocha": "^2.5.3",
     "react": "^15.0.0-rc.1",
     "react-addons-shallow-compare": "^15.0.0-rc.1",
     "react-addons-test-utils": "^15.0.0-rc.1",
     "react-dom": "^15.0.0-rc.1"
   },
   "scripts": {
-    "pragmatist": "node ./node_modules/.bin/pragmatist --es5",
-    "lint": "npm run pragmatist lint",
-    "test": "npm run pragmatist test --type-annotations",
-    "build": "npm run pragmatist build",
-    "watch": "npm run pragmatist watch",
-    "watch-lint": "npm run pragmatist watch-lint",
-    "watch-test": "npm run pragmatist watch-test --type-annotations",
-    "watch-build": "npm run pragmatist watch-build"
+    "lint": "eslint ./src ./tests",
+    "test": "mocha --compilers js:babel-register ./tests/**/*.js",
+    "build": "babel ./src --out-dir ./dist"
   }
 }
diff --git a/src/extendReactClass.js b/src/extendReactClass.js
@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
 
-import linkClass from './linkClass';
 import React from 'react';
 import _ from 'lodash';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import linkClass from './linkClass';
 import mergeStyles from './mergeStyles';
 
 /**
diff --git a/src/generateAppendClassName.js b/src/generateAppendClassName.js
@@ -1,4 +1,4 @@
-import Map from 'es6-map';
+import Map from './simple-map';
 
 const stylesIndex = new Map();
 
@@ -15,7 +15,8 @@ export default (styles, styleNames: Array<string>, errorWhenNotFound: boolean):
             return styleNameIndex;
         }
     } else {
-        stylesIndexMap = stylesIndex.set(styles, new Map());
+        stylesIndexMap = new Map();
+        stylesIndex.set(styles, new Map());
     }
 
     appendClassName = '';
diff --git a/src/index.js b/src/index.js
@@ -1,11 +1,12 @@
 import _ from 'lodash';
 import extendReactClass from './extendReactClass';
 import wrapStatelessFunction from './wrapStatelessFunction';
+import makeConfiguration from './makeConfiguration';
 
 /**
  * @see https://github.com/gajus/react-css-modules#options
  */
-type OptionsType = {};
+type TypeOptions = {};
 
 /**
  * Determines if the given object has the signature of a class that inherits React.Component.
@@ -17,13 +18,15 @@ const isReactComponent = (maybeReactComponent: any): boolean => {
 /**
  * When used as a function.
  */
-const functionConstructor = (Component: Function, defaultStyles: Object, options: OptionsType): Function => {
+const functionConstructor = (Component: Function, defaultStyles: Object, options: TypeOptions): Function => {
     let decoratedClass;
 
+    const configuration = makeConfiguration(options);
+
     if (isReactComponent(Component)) {
-        decoratedClass = extendReactClass(Component, defaultStyles, options);
+        decoratedClass = extendReactClass(Component, defaultStyles, configuration);
     } else {
-        decoratedClass = wrapStatelessFunction(Component, defaultStyles, options);
+        decoratedClass = wrapStatelessFunction(Component, defaultStyles, configuration);
     }
 
     if (Component.displayName) {
@@ -38,7 +41,7 @@ const functionConstructor = (Component: Function, defaultStyles: Object, options
 /**
  * When used as a ES7 decorator.
  */
-const decoratorConstructor = (defaultStyles: Object, options: OptionsType): Function => {
+const decoratorConstructor = (defaultStyles: Object, options: TypeOptions): Function => {
     return (Component: Function) => {
         return functionConstructor(Component, defaultStyles, options);
     };
diff --git a/src/isIterable.js b/src/isIterable.js
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-const ITERATOR_SYMBOL = _.isFunction(Symbol) && Symbol.iterator;
+const ITERATOR_SYMBOL = typeof Symbol !== 'undefined' && _.isFunction(Symbol) && Symbol.iterator;
 const OLD_ITERATOR_SYMBOL = '@@iterator';
 
 /**
diff --git a/src/linkClass.js b/src/linkClass.js
@@ -2,11 +2,10 @@ import _ from 'lodash';
 import React, {
     ReactElement
 } from 'react';
-import makeConfiguration from './makeConfiguration';
+import objectUnfreeze from 'object-unfreeze';
 import isIterable from './isIterable';
 import parseStyleName from './parseStyleName';
 import generateAppendClassName from './generateAppendClassName';
-import objectUnfreeze from 'object-unfreeze';
 
 const linkElement = (element: ReactElement, styles: Object, configuration: Object): ReactElement => {
     let appendClassName,
@@ -46,10 +45,11 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec
             }
 
             elementShallowCopy.props.className = appendClassName;
-            elementShallowCopy.props.styleName = null;
         }
     }
 
+    delete elementShallowCopy.props.styleName;
+
     if (elementIsFrozen) {
         Object.freeze(elementShallowCopy.props);
         Object.freeze(elementShallowCopy);
@@ -61,15 +61,13 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec
 /**
  * @param {ReactElement} element
  * @param {Object} styles CSS modules class map.
- * @param {CSSModules~Options} userConfiguration
+ * @param {CSSModules~Options} configuration
  */
-export default (element: ReactElement, styles = {}, userConfiguration): ReactElement => {
+export default (element: ReactElement, styles = {}, configuration = {}): ReactElement => {
     // @see https://github.com/gajus/react-css-modules/pull/30
     if (!_.isObject(element)) {
         return element;
     }
 
-    const configuration = makeConfiguration(userConfiguration);
-
     return linkElement(element, styles, configuration);
 };
diff --git a/src/makeConfiguration.js b/src/makeConfiguration.js
@@ -1,8 +1,4 @@
 import _ from 'lodash';
-import Map from 'es6-map';
-
-const userConfigurationIndex = new Map();
-const defaultUserConfiguration = {};
 
 /**
  * @typedef CSSModules~Options
@@ -15,16 +11,8 @@ const defaultUserConfiguration = {};
  * @param {CSSModules~Options} userConfiguration
  * @returns {CSSModules~Options}
  */
-export default (userConfiguration = defaultUserConfiguration) => {
-    let configuration;
-
-    configuration = userConfigurationIndex.get(userConfiguration);
-
-    if (configuration) {
-        return configuration;
-    }
-
-    configuration = {
+export default (userConfiguration = {}) => {
+    const configuration = {
         allowMultiple: false,
         mergeStyles: false,
         errorWhenNotFound: true
@@ -42,7 +30,5 @@ export default (userConfiguration = defaultUserConfiguration) => {
         configuration[name] = value;
     });
 
-    userConfigurationIndex.set(userConfiguration, configuration);
-
     return configuration;
 };
diff --git a/src/simple-map.js b/src/simple-map.js
@@ -0,0 +1,27 @@
+export class SimpleMap {
+    constructor () {
+        this.keys = [];
+        this.values = [];
+    }
+
+    get size () {
+        return this.keys.length;
+    }
+
+    get (key) {
+        const index = this.keys.indexOf(key);
+
+        return this.values[index];
+    }
+
+    set (key, value) {
+        this.keys.push(key);
+        this.values.push(value);
+
+        return value;
+    }
+}
+
+const exportedMap = typeof Map === 'undefined' ? SimpleMap : Map;
+
+export default exportedMap;
diff --git a/tests/extendReactClass.js b/tests/extendReactClass.js
@@ -3,7 +3,6 @@
 import {
     expect
 } from 'chai';
-
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import shallowCompare from 'react-addons-shallow-compare';
diff --git a/tests/linkClass.js b/tests/linkClass.js
diff --git a/tests/makeConfiguration.js b/tests/makeConfiguration.js
diff --git a/tests/reactCssModules.js b/tests/reactCssModules.js
diff --git a/tests/simple-map.js b/tests/simple-map.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "extends": "canonical"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import Map from 'es6-map';`
	`1`	`+import Map from './simple-map';`
`2`	`2`
`3`	`3`	`const stylesIndex = new Map();`
`4`	`4`
`@@ -15,7 +15,8 @@ export default (styles, styleNames: Array<string>, errorWhenNotFound: boolean):`
`15`	`15`	`return styleNameIndex;`
`16`	`16`	`}`
`17`	`17`	`} else {`
`18`		`- stylesIndexMap = stylesIndex.set(styles, new Map());`
	`18`	`+ stylesIndexMap = new Map();`
	`19`	`+ stylesIndex.set(styles, new Map());`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`appendClassName = '';`