update app-rewire, update repository url to jsdevkr

Author: thomasJang

config-overrides.js

@@ -1,28 +1,38 @@
-const rewireReactHotLoader = require('react-app-rewire-hot-loader');
-const overrideTsLoader = require('./react-app-rewire-typescript-hmr');
-const rewireCssModules = require('react-app-rewire-css-modules');
-const rewireLess = require('react-app-rewire-less');
-const path = require('path');
+const overrideJsTsLoader = require('./react-app-rewire-js-ts');
+const rewireCssModules = require('./react-app-rewire-css');
 
 /* config-overrides.js */
 module.exports = function override(config, env) {
-  if (env === 'development') {
-    // (config, env)
-    config = rewireReactHotLoader(config, env);
+  // (config, env, babelPlugins = [])
+  config = overrideJsTsLoader(config, env);
 
-    // (config, env, babelPlugins = [])
-    config = overrideTsLoader(config, env);
-  }
+  // polyfills
+  config.entry = ['babel-polyfill', ...config.entry];
 
-  // sass-loader
+  // css, sass, less
   config = rewireCssModules(config, env);
 
-  // less-loader
-  config = rewireLess.withLoaderOptions({
-    javascriptEnabled: true,
-    // less 구문중에 inline javascript로 처리 되는 구문이 있어 옵션 추가
-    // 그렇지 않으면 https://github.com/ant-design/ant-motion/issues/44 이와 같은 오류가 발생됨.
-  })(config, env);
+  // ForkTsCheckerWebpackPlugin overide
+  config.plugins.forEach((plugin, idx) => {
+    try {
+      const objectName = plugin.constructor.name;
+      if (objectName === 'ForkTsCheckerWebpackPlugin') {
+        const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+        config.plugins[idx] = new ForkTsCheckerWebpackPlugin({
+          ...plugin.options,
+          workers: ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE,
+          memoryLimit: 2048,
+        });
+      }
+    } catch (error) {}
+  });
+
+  // webpack-bundle-analyzer
+  if (process.env.WEBPACK_ANALYZER) {
+    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+      .BundleAnalyzerPlugin;
+    config.plugins.push(new BundleAnalyzerPlugin());
+  }
 
   return config;
 };

dist/package.json

@@ -4,13 +4,11 @@
   "description": "DataGrid, DataSheet for React",
   "jsnext:main": "es6/index.js",
   "main": "commonjs/index.js",
-  "repository": "https://github.com/axui/datagrid",
+  "repository": "https://github.com/jsdevkr/datagrid",
   "website": "http://axui-datagrid.axisj.com/",
   "author": "tom@axisj.com",
   "license": "MIT",
-  "keywords": [
-    "datagrid, react-datagrid, react-component, typescript"
-  ],
+  "keywords": ["datagrid, react-datagrid, react-component, typescript"],
   "peerDependencies": {
     "react": "^16.4.0",
     "react-dom": "^16.4.0"

package.json

@@ -4,13 +4,11 @@
   "description": "",
   "jsnext:main": "dist/es6/index.js",
   "main": "dist/commonjs/index.js",
-  "repository": "https://github.com/axui/datagrid",
+  "repository": "https://github.com/jsdevkr/datagrid",
   "website": "http://axui-datagrid.axisj.com/",
   "author": "tom@axisj.com",
   "license": "MIT",
-  "keywords": [
-    "datagrid, react-datagrid, react-component, typescript"
-  ],
+  "keywords": ["datagrid, react-datagrid, react-component, typescript"],
   "dependencies": {},
   "devDependencies": {
     "@types/jest": "^22.2.2",
@@ -27,12 +25,16 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "file-loader": "^1.1.11",
+    "history": "^4.7.2",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
     "less": "^3.5.3",
     "less-loader": "^4.1.0",
     "node-sass": "^4.8.3",
     "raw-loader": "^0.5.1",
     "react": "^16.4.0",
-    "react-app-rewire-css-modules": "github:codebandits/react-app-rewire-css-modules",
+    "react-app-rewire-css-modules":
+      "github:codebandits/react-app-rewire-css-modules",
     "react-app-rewire-hot-loader": "^1.0.1",
     "react-app-rewire-less": "^2.1.2",
     "react-app-rewired": "^1.5.0",
@@ -54,17 +56,22 @@
   },
   "scripts": {
     "start": "react-app-rewired start --scripts-version react-scripts-ts",
-    "build": "better-npm-run build:common && better-npm-run build:es5 && better-npm-run build:es6",
-    "docs": "react-app-rewired build --scripts-version react-scripts-ts && rm -rf ./docs && mv build ./docs && cp ./src/CNAME ./docs/CNAME && cp ./src/404.html ./docs/404.html  && git add -A",
+    "build":
+      "better-npm-run build:common && better-npm-run build:es5 && better-npm-run build:es6",
+    "docs":
+      "react-app-rewired build --scripts-version react-scripts-ts && rm -rf ./docs && mv build ./docs && cp ./src/CNAME ./docs/CNAME && cp ./src/404.html ./docs/404.html  && git add -A",
     "test": "NODE_ENV=test jest",
     "test-watch": "NODE_ENV=test jest --watch",
     "tslint-check": "tslint-config-prettier-check ./tslint.json",
     "prepublish": "npm run test",
-    "publish-by-patch": "cd dist && npm version patch && cp ./package.json ../src/package.json && cd .. && npm run docs",
-    "publish-by-minor": "cd dist && npm version minor && cp ./package.json ../src/package.json && cd .. && npm run docs"
+    "publish-by-patch":
+      "cd dist && npm version patch && cp ./package.json ../src/package.json && cd .. && npm run docs",
+    "publish-by-minor":
+      "cd dist && npm version minor && cp ./package.json ../src/package.json && cd .. && npm run docs"
   },
   "betterScripts": {
-    "build:common": "node-sass ./src/axui-datagrid/style.scss dist/style.css  --output-style compressed && cp ./src/axui-datagrid/style.scss ./dist/style.scss && cp -R ./src/axui-datagrid/scss ./dist/scss && cp ./README.md ./dist/README.md",
+    "build:common":
+      "node-sass ./src/axui-datagrid/style.scss dist/style.css  --output-style compressed && cp ./src/axui-datagrid/style.scss ./dist/style.scss && cp -R ./src/axui-datagrid/scss ./dist/scss && cp ./README.md ./dist/README.md",
     "build:es5": "rm -rf ./dist/commonjs && tsc --p tsconfig.es5.json",
     "build:es6": "rm -rf ./dist/es6 && tsc --p tsconfig.es6.json"
   },
@@ -79,32 +86,15 @@
       "<rootDir>/test/**/*.{js,jsx,ts,tsx}",
       "!<rootDir>/.tsOutput/"
     ],
-    "setupFiles": [
-      "./tests/test-shim.js",
-      "./tests/test-setup.js"
-    ],
+    "setupFiles": ["./tests/test-shim.js", "./tests/test-setup.js"],
     "transform": {
       "^.+\\.tsx?$": "ts-jest",
       "^.+\\.jsx?$": "babel-jest"
     },
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-    "testPathIgnorePatterns": [
-      "/.tsOutput/"
-    ],
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-    "modulePaths": [
-      "src"
-    ],
-    "moduleDirectories": [
-      "node_modules",
-      "src"
-    ]
+    "testPathIgnorePatterns": ["/.tsOutput/"],
+    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
+    "modulePaths": ["src"],
+    "moduleDirectories": ["node_modules", "src"]
   }
 }

react-app-rewire-css.js

@@ -0,0 +1,67 @@
+const path = require('path');
+const cloneDeep = require('lodash.clonedeep');
+
+const ruleChildren = loader =>
+  loader.use ||
+  loader.oneOf ||
+  (Array.isArray(loader.loader) && loader.loader) ||
+  [];
+
+const findIndexAndRules = (rulesSource, ruleMatcher) => {
+  let result = undefined;
+  const rules = Array.isArray(rulesSource)
+    ? rulesSource
+    : ruleChildren(rulesSource);
+  rules.some(
+    (rule, index) =>
+      (result = ruleMatcher(rule)
+        ? { index, rules }
+        : findIndexAndRules(ruleChildren(rule), ruleMatcher)),
+  );
+  return result;
+};
+
+const findRule = (rulesSource, ruleMatcher) => {
+  const { index, rules } = findIndexAndRules(rulesSource, ruleMatcher);
+  return rules[index];
+};
+
+const cssRuleMatcher = rule =>
+  rule.test && String(rule.test) === String(/\.css$/);
+
+const createLoaderMatcher = loader => rule =>
+  rule.loader && rule.loader.indexOf(`${path.sep}${loader}${path.sep}`) !== -1;
+const cssLoaderMatcher = createLoaderMatcher('css-loader');
+const postcssLoaderMatcher = createLoaderMatcher('postcss-loader');
+const fileLoaderMatcher = createLoaderMatcher('file-loader');
+
+const addAfterRule = (rulesSource, ruleMatcher, value) => {
+  const { index, rules } = findIndexAndRules(rulesSource, ruleMatcher);
+  rules.splice(index + 1, 0, value);
+};
+
+const addBeforeRule = (rulesSource, ruleMatcher, value) => {
+  const { index, rules } = findIndexAndRules(rulesSource, ruleMatcher);
+  rules.splice(index, 0, value);
+};
+
+module.exports = function(config, env) {
+  const cssRule = findRule(config.module.rules, cssRuleMatcher);
+
+  // sass
+  const sassRule = cloneDeep(cssRule);
+  sassRule.test = /\.s[ac]ss$/;
+  addAfterRule(sassRule, postcssLoaderMatcher, require.resolve('sass-loader'));
+  addBeforeRule(config.module.rules, fileLoaderMatcher, sassRule);
+
+  // less
+  const lessRule = cloneDeep(cssRule);
+  lessRule.test = /\.less$/;
+  addAfterRule(lessRule, postcssLoaderMatcher, {
+    loader: require.resolve('less-loader'),
+    options: { javascriptEnabled: true },
+  });
+  addBeforeRule(config.module.rules, fileLoaderMatcher, lessRule);
+
+  return config;
+};

react-app-rewire-js-ts.js

@@ -0,0 +1,123 @@
+const path = require('path');
+
+const tsLoaderMatcher = function(rule) {
+  return rule.test && rule.test.toString() === /\.(ts|tsx)$/.toString();
+};
+
+const jsLoaderMatcher = function(rule) {
+  return (
+    rule.loader &&
+    rule.loader.indexOf(`${path.sep}babel-loader${path.sep}`) !== -1
+  );
+};
+
+const getLoader = function(rules, matcher) {
+  let loader;
+
+  rules.some(rule => {
+    return (loader = matcher(rule)
+      ? rule
+      : getLoader(rule.use || rule.oneOf || [], matcher));
+  });
+
+  return loader;
+};
+
+const getTsLoader = function(rules) {
+  return getLoader(rules, tsLoaderMatcher);
+};
+
+const getJsLoader = function(rules) {
+  return getLoader(rules, jsLoaderMatcher);
+};
+
+function tsConfig(config, env, babelPlugins) {
+  const tsLoader = getTsLoader(config.module.rules);
+  if (!tsLoader) {
+    console.log('ts-loader not found');
+    return config;
+  }
+
+  delete tsLoader.loader;
+  delete tsLoader.options;
+
+  // Replace loader with array of loaders with  use: []
+  tsLoader.use = [
+    {
+      loader: require.resolve('babel-loader'),
+      options: {
+        cacheDirectory: true,
+        babelrc: false,
+        compact: true,
+        presets:
+          env === 'production'
+            ? [require.resolve('babel-preset-react-app')]
+            : [],
+        plugins:
+          env === 'production'
+            ? [...babelPlugins]
+            : [require.resolve('react-hot-loader/babel'), ...babelPlugins],
+      },
+    },
+    {
+      loader: require.resolve('ts-loader'),
+      options: {
+        transpileOnly: true,
+        configFile:
+          env === 'production' ? 'tsconfig.json' : 'tsconfig.dev.json',
+      },
+    },
+  ];
+}
+
+function jsConfig(config, env, babelPlugins) {
+  const jsLoader = getJsLoader(config.module.rules);
+  if (!jsLoader) {
+    console.log('js-loader not found');
+    return config;
+  }
+
+  delete jsLoader.loader;
+  delete jsLoader.options;
+
+  if (env === 'production') {
+    jsLoader.include = [/node_modules/];
+  }
+
+  // Replace loader with array of loaders with  use: []
+  jsLoader.use = [
+    {
+      loader: require.resolve('babel-loader'),
+      options: {
+        cacheDirectory: true,
+        babelrc: false,
+        compact: true,
+        presets: [
+          [
+            require.resolve('babel-preset-env'),
+            {
+              targets: {
+                browsers: ['>= 1%', 'chrome >= 45', 'Explorer 11'],
+              },
+            },
+          ],
+          require.resolve('babel-preset-react-app'),
+        ],
+        plugins:
+          env === 'production'
+            ? [...babelPlugins]
+            : [require.resolve('react-hot-loader/babel'), ...babelPlugins],
+      },
+    },
+  ];
+}
+
+module.exports = (config, env, babelPlugins = []) => {
+  // Typescript
+  tsConfig(config, env, babelPlugins);
+
+  // JavaScript
+  jsConfig(config, env, babelPlugins);
+
+  return config;
+};