@zohodesk/react-cli 1.1.0 → 1.1.2-9.exp.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/.vscode/settings.json +25 -0
  2. package/README.md +453 -34
  3. package/bin/cli.js +25 -52
  4. package/docs/CustomChunks.md +12 -9
  5. package/docs/MarkdownParser.md +18 -0
  6. package/docs/ReactLive.md +8 -0
  7. package/docs/ValueReplacer.md +27 -0
  8. package/lib/babel/babel-option-utils/babel-preset-react-option.js +22 -0
  9. package/lib/babel/cmjs-plugins-presets.js +36 -7
  10. package/lib/babel/es-plugins-presets.js +45 -16
  11. package/lib/common/runPreProcess.js +71 -0
  12. package/lib/common/splitChunks.js +65 -45
  13. package/lib/common/testPattern.js +9 -9
  14. package/lib/configs/jest.config.js +4 -4
  15. package/lib/configs/libAlias.js +36 -2
  16. package/lib/configs/resolvers.js +7 -4
  17. package/lib/configs/webpack.css.umd.config.js +3 -2
  18. package/lib/configs/webpack.dev.config.js +28 -8
  19. package/lib/configs/webpack.docs.config.js +11 -5
  20. package/lib/configs/webpack.impact.config.js +9 -4
  21. package/lib/configs/webpack.prod.config.js +32 -10
  22. package/lib/constants.js +3 -3
  23. package/lib/deprecationLogger.js +40 -0
  24. package/lib/jest/preProcessors/jsPreprocessor.js +27 -2
  25. package/lib/loaderUtils/configsAssetsLoaders.js +1 -1
  26. package/lib/loaderUtils/getCSSLoaders.js +32 -8
  27. package/lib/loaderUtils/getDevJsLoaders.js +8 -2
  28. package/lib/loaders/__test__/markdownLoader.spec.js +145 -0
  29. package/lib/loaders/composeLoader.js +140 -14
  30. package/lib/loaders/docsLoader.js +5 -2
  31. package/lib/loaders/enhancedReactLiveConverter.js +151 -0
  32. package/lib/loaders/markdownLoader.js +71 -0
  33. package/lib/loaders/reactLiveConvertor.js +64 -66
  34. package/lib/loaders/workerLoader.js +37 -22
  35. package/lib/logger.js +7 -0
  36. package/lib/pluginUtils/configHtmlWebpackPlugins.js +62 -2
  37. package/lib/pluginUtils/getDevPlugins.js +24 -8
  38. package/lib/pluginUtils/getProdPlugins.js +34 -6
  39. package/lib/plugins/CssOrderControlPlugin.js +36 -0
  40. package/lib/plugins/CustomScriptLoadingStrategyPlugin.js +109 -0
  41. package/lib/plugins/EfcResourceCleanupPlugin.js +43 -0
  42. package/lib/plugins/EventsHandlingPlugin.js +34 -0
  43. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +5 -1
  44. package/lib/plugins/I18nSplitPlugin/utils/propertiesUtils.js +4 -1
  45. package/lib/plugins/I18nSplitPlugin/utils/unicodeConversion.js +14 -0
  46. package/lib/plugins/ReportGeneratePlugin.js +8 -6
  47. package/lib/plugins/ResourceHintsPlugin.js +13 -3
  48. package/lib/plugins/StatsPlugin.js +82 -0
  49. package/lib/plugins/UnusedFilesFindPlugin.js +7 -5
  50. package/lib/plugins/utils/fileHandling.js +36 -51
  51. package/lib/plugins/variableConvertorUtils.js +4 -2
  52. package/lib/postcss-plugins/ValueReplacer.js +7 -17
  53. package/lib/postcss-plugins/__test__/valueReplacer.spec.js +43 -0
  54. package/lib/postcss-plugins/variableModificationPlugin/index.js +70 -18
  55. package/lib/schemas/index.js +96 -27
  56. package/lib/servers/getCliPath.js +3 -5
  57. package/lib/servers/requireLocalOrGlobal.js +1 -1
  58. package/lib/utils/cssClassNameGenerate.js +43 -5
  59. package/lib/utils/deprecationSupport.js +134 -0
  60. package/lib/utils/getFileType.js +1 -1
  61. package/lib/utils/getOptions.js +34 -43
  62. package/lib/utils/getServerURL.js +7 -2
  63. package/lib/utils/index.js +27 -11
  64. package/lib/utils/initPreCommitHook.js +5 -5
  65. package/lib/utils/log.js +11 -0
  66. package/lib/utils/object-manipulation.js +88 -0
  67. package/lib/utils/pullOrigin.js +3 -3
  68. package/lib/utils/reinstallDependencies.js +3 -3
  69. package/lib/utils/selectorReplacer.js +47 -0
  70. package/lib/utils/switchBranch.js +4 -2
  71. package/lib/utils/typeCheck.js +10 -0
  72. package/lib/utils/variableConverter.js +26 -11
  73. package/npm-shrinkwrap.json +1001 -106
  74. package/package.json +12 -4
  75. package/templates/docs/all.html +1 -0
  76. package/templates/docs/component.html +1 -0
  77. package/templates/docs/components.html +1 -0
  78. package/templates/docs/css/markdown.css +202 -0
  79. package/templates/docs/css/style.css +136 -169
  80. package/templates/docs/index.html +796 -632
@@ -17,7 +17,7 @@ const commonConfig = {
17
17
  collectCoverage: true,
18
18
  moduleDirectories: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
19
19
  transform: {
20
- '^.+\\.(js|jsx)$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'jsPreprocessor.js'),
20
+ '^.+\\.(js|jsx|ts|tsx)$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'jsPreprocessor.js'),
21
21
  '^.+\\.css$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'cssPreprocessor.js'),
22
22
  '^(?!.*\\.(js|jsx|css|json)$)': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'otherFilesPreprocessor.js')
23
23
  },
@@ -26,9 +26,9 @@ const commonConfig = {
26
26
  // ...moduleNameMapper,
27
27
  // '\\.(css|less)$': 'identity-obj-proxy'
28
28
  // },
29
- transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
29
+ transformIgnorePatterns: ['/node_modules/(?!(@zohodesk|@zohodesk-private)/)'],
30
30
  // transformIgnorePatterns: ['/node_modules.*?.js$'],
31
- moduleFileExtensions: ['js'],
31
+ moduleFileExtensions: ['js', 'ts', 'tsx'],
32
32
  setupFiles: [(0, _fs.existsSync)(appGlobals) && appGlobals, _path.default.resolve(__dirname, '..', 'jest', 'setup.js')].filter(Boolean),
33
33
  globals: {
34
34
  __DEVELOPMENT__: true,
@@ -52,7 +52,7 @@ module.exports = (...args) => {
52
52
  testPathIgnorePatterns: ['/node_modules/', 'docs'],
53
53
  unmockedModulePathPatterns: ['__tests__', 'node_modules', '.*'],
54
54
  roots: [`<rootDir>/${appFolder}/`],
55
- testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node)$',
55
+ testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node|ts|tsx)$',
56
56
  testResultsProcessor: _path.default.resolve(__dirname, '..', 'jest', 'result.js')
57
57
  });
58
58
  };
@@ -3,12 +3,45 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.aliasPathCreation = aliasPathCreation;
6
7
  exports.libAlias = exports.jestModuleNameMapper = void 0;
8
+
9
+ var _utils = require("../utils");
10
+
11
+ var _path = _interopRequireDefault(require("path"));
12
+
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+
7
15
  // the reason for alias at the time was code tree shaking
8
16
  // tree shaking was most compactable with ES module system
9
17
  // FIXME: But there is a posiblity when these package does not have lib,
10
18
  // app will work because of alias, But may be jest won't work because of not alais
11
19
  // So need to think about use alais in jest
20
+ const appPath = process.cwd();
21
+ const {
22
+ alias,
23
+ app
24
+ } = (0, _utils.getOptions)();
25
+ const {
26
+ disableES5Import
27
+ } = app;
28
+
29
+ function aliasPathCreation(customAlias) {
30
+ if (customAlias == null) {
31
+ return {};
32
+ }
33
+
34
+ const newAlias = {};
35
+ Object.keys(customAlias).forEach(key => {
36
+ if (customAlias[key].startsWith('.')) {
37
+ newAlias[key] = _path.default.resolve(appPath, customAlias[key]);
38
+ } else {
39
+ newAlias[key] = customAlias[key];
40
+ }
41
+ });
42
+ return newAlias;
43
+ }
44
+
12
45
  const libAlias = {
13
46
  '@zohodesk/components/lib': '@zohodesk/components/es',
14
47
  // '@zohodesk/zc-custom/lib': '@zohodesk/zc-custom/es',
@@ -31,8 +64,9 @@ const libAlias = {
31
64
  // '^@components(.*)$': '<rootDir>/src/components$1',
32
65
 
33
66
  exports.libAlias = libAlias;
34
- const jestModuleNameMapper = Object.keys(libAlias).reduce((previousValue, key) => {
35
- previousValue[`^${key}(.*)$`] = `${libAlias[key]}$1`;
67
+ const totalAlias = disableES5Import ? Object.assign({}, libAlias, aliasPathCreation(alias)) : aliasPathCreation(alias);
68
+ const jestModuleNameMapper = Object.keys(totalAlias).reduce((previousValue, key) => {
69
+ previousValue[`^${key}(.*)$`] = `${totalAlias[key]}$1`;
36
70
  return previousValue;
37
71
  }, {});
38
72
  exports.jestModuleNameMapper = jestModuleNameMapper;
@@ -19,8 +19,9 @@ var _client_packages_group = require("@zohodesk/client_packages_group");
19
19
  function moduleResolver(options) {
20
20
  const {
21
21
  moduleResolvePath,
22
- disableES5Transpile
22
+ disableES5Import
23
23
  } = options.app;
24
+ const customAlias = options.alias;
24
25
  let required = moduleResolvePath && (0, _requireLocalOrGlobal.requireLocal)(moduleResolvePath);
25
26
 
26
27
  if (!required) {
@@ -32,9 +33,11 @@ function moduleResolver(options) {
32
33
  }
33
34
 
34
35
  const nodeModulesPath = required ? required.nodeModulesPath : _client_packages_group.nodeModulesPath;
36
+ const totalAlias = disableES5Import ? Object.assign({}, _libAlias.libAlias, (0, _libAlias.aliasPathCreation)(customAlias)) : (0, _libAlias.aliasPathCreation)(customAlias);
35
37
  return {
36
- modules: [nodeModulesPath, _constants.cliNodemodulesPath, 'node_modules'].filter(Boolean),
37
- alias: disableES5Transpile ? _libAlias.libAlias : {} // alias: { ...libAlias, ...clientDependenies }
38
+ extensions: ['.js', '.jsx', '.ts', '.tsx'],
39
+ modules: [nodeModulesPath, _constants.cliNodeModulesPath, 'node_modules'].filter(Boolean),
40
+ alias: totalAlias // alias: { ...libAlias, ...clientDependenies }
38
41
 
39
42
  };
40
43
  }
@@ -45,7 +48,7 @@ function loaderResolver(options) {
45
48
  unstableDepsInverse
46
49
  } = options;
47
50
  return {
48
- modules: unstableDepsInverse ? ['node_modules', _constants.cliNodemodulesPath] : [_constants.cliNodemodulesPath, 'node_modules'] // alias: libAlias
51
+ modules: unstableDepsInverse ? ['node_modules', _constants.cliNodeModulesPath] : [_constants.cliNodeModulesPath, 'node_modules'] // alias: libAlias
49
52
 
50
53
  };
51
54
  }
@@ -23,7 +23,8 @@ let {
23
23
  folder,
24
24
  publicPath,
25
25
  cssHashSelectors,
26
- classNamePrefix
26
+ classNamePrefix,
27
+ customClassNamePrefix
27
28
  }
28
29
  },
29
30
  packageVersion
@@ -83,7 +84,7 @@ module.exports = {
83
84
  loader: 'css-loader',
84
85
  options: {
85
86
  modules: {
86
- getLocalIdent: (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix)
87
+ getLocalIdent: (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix)
87
88
  }
88
89
  }
89
90
  }]
@@ -30,6 +30,7 @@ const {
30
30
  cssVariableReplacementConfig,
31
31
  selectorWeightConfig,
32
32
  cssUniqueness,
33
+ customClassNamePrefix,
33
34
  seperateCssModules,
34
35
  changeRuntimeChunkChar,
35
36
  // we are going to use this for fonts file name collide in issue in devmode
@@ -39,8 +40,13 @@ const {
39
40
  selectorReplace,
40
41
  devConsoleExculde,
41
42
  sourcemap,
42
- crossorigin
43
- }
43
+ crossorigin,
44
+ postCssPluginOrder,
45
+ externals,
46
+ enableMjsLoader,
47
+ displayClassName
48
+ },
49
+ enableTypeScript
44
50
  } = options;
45
51
  const {
46
52
  disableContextURL
@@ -97,7 +103,11 @@ module.exports = {
97
103
 
98
104
  return false;
99
105
  }
100
- }, seperateCssModules ? {
106
+ }, enableMjsLoader ? {
107
+ test: /\.mjs$/,
108
+ include: /node_modules/,
109
+ type: 'javascript/auto'
110
+ } : null, seperateCssModules ? {
101
111
  test: /\.css$/,
102
112
  exclude: /\.module\.css$/,
103
113
  use: (0, _loaderUtils.getCSSLoaders)({
@@ -107,9 +117,12 @@ module.exports = {
107
117
  mediaQueryHoverActiveString,
108
118
  cssVariableReplacementConfig,
109
119
  selectorWeightConfig,
120
+ customClassNamePrefix,
110
121
  classNameBlob: '[local]',
111
122
  cssUniqueness: false,
112
- selectorReplace: null
123
+ selectorReplace: null,
124
+ postCssPluginOrder,
125
+ displayClassName
113
126
  })
114
127
  } : null, {
115
128
  test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
@@ -122,9 +135,12 @@ module.exports = {
122
135
  selectorWeightConfig,
123
136
  classNameBlob: null,
124
137
  cssUniqueness,
138
+ customClassNamePrefix,
125
139
  selectorReplace,
126
140
  cssHashSelectors,
127
- classNamePrefix
141
+ classNamePrefix,
142
+ postCssPluginOrder,
143
+ displayClassName
128
144
  })
129
145
  }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
130
146
  test: /\.tmpl$/,
@@ -134,7 +150,11 @@ module.exports = {
134
150
  minimize: true
135
151
  }
136
152
  }]
137
- }, {
153
+ }, enableTypeScript ? {
154
+ test: /\.ts$|\.tsx$/,
155
+ use: 'ts-loader',
156
+ include: _path.default.join(appPath, folder)
157
+ } : null, {
138
158
  test: /\.worker.js$/,
139
159
  use: {
140
160
  loader: require.resolve('../loaders/workerLoader.js'),
@@ -145,9 +165,9 @@ module.exports = {
145
165
  }
146
166
  }].filter(Boolean)
147
167
  },
148
- externals: {
168
+ externals: Object.assign({
149
169
  ZC: '$ZC'
150
- },
170
+ }, externals),
151
171
  resolve: (0, _resolvers.moduleResolver)(options),
152
172
  resolveLoader: (0, _resolvers.loaderResolver)(options)
153
173
  };
@@ -20,6 +20,7 @@ const {
20
20
  componentFolder,
21
21
  enableChunkHash,
22
22
  cssUniqueness,
23
+ customClassNamePrefix,
23
24
  plugins,
24
25
  exclude,
25
26
  patterns,
@@ -27,7 +28,10 @@ const {
27
28
  cssVariableReplacementConfig,
28
29
  selectorWeightConfig,
29
30
  cssHashSelectors,
30
- classNamePrefix
31
+ classNamePrefix,
32
+ selectorReplace,
33
+ postCssPluginOrder,
34
+ externals
31
35
  },
32
36
  app: {
33
37
  folder
@@ -84,9 +88,11 @@ module.exports = isSSTest => ({
84
88
  selectorWeightConfig,
85
89
  classNameBlob: false,
86
90
  cssUniqueness,
87
- selectorReplace: null,
91
+ customClassNamePrefix,
92
+ selectorReplace,
88
93
  cssHashSelectors,
89
- classNamePrefix
94
+ classNamePrefix,
95
+ postCssPluginOrder
90
96
  })
91
97
  }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
92
98
  test: /\.html$/,
@@ -117,9 +123,9 @@ module.exports = isSSTest => ({
117
123
  }]
118
124
  }]
119
125
  },
120
- externals: {
126
+ externals: Object.assign({
121
127
  ZC: '$ZC'
122
- },
128
+ }, externals),
123
129
  resolve: (0, _resolvers.moduleResolver)(options),
124
130
  resolveLoader: (0, _resolvers.loaderResolver)(options)
125
131
  });
@@ -19,6 +19,7 @@ const {
19
19
  docs: {
20
20
  componentFolder,
21
21
  cssUniqueness,
22
+ customClassNamePrefix,
22
23
  plugins,
23
24
  exclude,
24
25
  patterns,
@@ -27,7 +28,9 @@ const {
27
28
  selectorWeightConfig,
28
29
  cssHashSelectors,
29
30
  enableChunkHash,
30
- classNamePrefix
31
+ classNamePrefix,
32
+ postCssPluginOrder,
33
+ externals
31
34
  },
32
35
  app: {
33
36
  folder
@@ -84,9 +87,11 @@ module.exports = {
84
87
  selectorWeightConfig,
85
88
  classNameBlob: false,
86
89
  cssUniqueness,
90
+ customClassNamePrefix,
87
91
  selectorReplace: null,
88
92
  cssHashSelectors,
89
- classNamePrefix
93
+ classNamePrefix,
94
+ postCssPluginOrder
90
95
  })
91
96
  }, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
92
97
  test: /\.html$/,
@@ -114,9 +119,9 @@ module.exports = {
114
119
  }]
115
120
  }]
116
121
  },
117
- externals: {
122
+ externals: Object.assign({
118
123
  ZC: '$ZC'
119
- },
124
+ }, externals),
120
125
  resolve: (0, _resolvers.moduleResolver)(options),
121
126
  resolveLoader: (0, _resolvers.loaderResolver)(options)
122
127
  };
@@ -14,6 +14,8 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
14
14
 
15
15
  var _resolvers = require("./resolvers");
16
16
 
17
+ var _babelPresetReactOption = _interopRequireDefault(require("../babel/babel-option-utils/babel-preset-react-option"));
18
+
17
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
20
 
19
21
  // import TerserPlugin from 'terser-webpack-plugin';
@@ -34,6 +36,8 @@ const {
34
36
  cssVariableReplacementConfig,
35
37
  selectorWeightConfig,
36
38
  cssUniqueness,
39
+ displayClassName,
40
+ customClassNamePrefix,
37
41
  server: {
38
42
  mode
39
43
  },
@@ -44,8 +48,11 @@ const {
44
48
  selectorReplace,
45
49
  removePropTypes,
46
50
  devConsoleExculde,
47
- crossorigin
48
- }
51
+ crossorigin,
52
+ postCssPluginOrder,
53
+ externals
54
+ },
55
+ enableTypeScript
49
56
  } = options;
50
57
  let {
51
58
  enableChunkHash
@@ -124,8 +131,13 @@ module.exports = {
124
131
  }
125
132
  } : {
126
133
  modules: false
127
- }], require.resolve('@babel/preset-react')],
128
- plugins: disableES5Transpile ? [removeAttribute ? require.resolve('../utils/removeAttributes') : false, require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), require.resolve('@babel/plugin-proposal-object-rest-spread'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
134
+ }], (0, _babelPresetReactOption.default)({
135
+ disableES5Transpile
136
+ }), enableTypeScript ? require.resolve('@babel/preset-typescript') : null].filter(Boolean),
137
+ plugins: disableES5Transpile ? [removeAttribute ? require.resolve('../utils/removeAttributes') : false, require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve(
138
+ // '@babel/plugin-proposal-object-rest-spread'
139
+ // ), REMOVING IT, BECAUSE WE ALREADY SUPPORT SPREAD SYNTAX FROM LIBRARIES.
140
+ shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
129
141
  exclude: ['error', 'log']
130
142
  }] : null].filter(Boolean) : [removeAttribute ? require.resolve('../utils/removeAttributes') : false, shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, [require.resolve('@babel/plugin-transform-runtime'), {
131
143
  helpers: true,
@@ -160,7 +172,10 @@ module.exports = {
160
172
  mediaQueryHoverActiveString,
161
173
  classNameBlob: '[local]',
162
174
  cssUniqueness: false,
163
- selectorReplace: null
175
+ customClassNamePrefix,
176
+ selectorReplace: null,
177
+ postCssPluginOrder,
178
+ displayClassName
164
179
  })
165
180
  } : null, {
166
181
  test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
@@ -173,9 +188,12 @@ module.exports = {
173
188
  selectorWeightConfig,
174
189
  classNameBlob: false,
175
190
  cssUniqueness,
191
+ customClassNamePrefix,
176
192
  selectorReplace,
177
193
  cssHashSelectors,
178
- classNamePrefix
194
+ classNamePrefix,
195
+ postCssPluginOrder,
196
+ displayClassName
179
197
  })
180
198
  }, {
181
199
  test: /\.jpe?g$|\.gif$|\.png$/,
@@ -208,7 +226,7 @@ module.exports = {
208
226
  }
209
227
  }]
210
228
  }, {
211
- test: /\.ogg$/,
229
+ test: /\.ogg|\.mp3$/,
212
230
  use: [{
213
231
  loader: 'file-loader',
214
232
  options: {
@@ -223,7 +241,11 @@ module.exports = {
223
241
  minimize: false
224
242
  }
225
243
  }]
226
- }, {
244
+ }, enableTypeScript ? {
245
+ test: /\.ts$|\.tsx$/,
246
+ use: 'ts-loader',
247
+ include: _path.default.join(appPath, folder)
248
+ } : null, {
227
249
  test: /\.worker.js$/,
228
250
  use: {
229
251
  loader: require.resolve('../loaders/workerLoader.js'),
@@ -234,9 +256,9 @@ module.exports = {
234
256
  }
235
257
  }].filter(Boolean)
236
258
  },
237
- externals: {
259
+ externals: Object.assign({
238
260
  ZC: '$ZC'
239
- },
261
+ }, externals),
240
262
  resolve: (0, _resolvers.moduleResolver)(options),
241
263
  resolveLoader: (0, _resolvers.loaderResolver)(options)
242
264
  };
package/lib/constants.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.cliRootPath = exports.cliNodemodulesPath = exports.appPath = exports.CONFIG_ROOT = exports.BASE_CONFIG_KEY = void 0;
6
+ exports.cliRootPath = exports.cliNodeModulesPath = exports.appPath = exports.CONFIG_ROOT = exports.BASE_CONFIG_KEY = void 0;
7
7
 
8
8
  var _path = _interopRequireDefault(require("path"));
9
9
 
@@ -18,10 +18,10 @@ exports.cliRootPath = cliRootPath;
18
18
  const CONFIG_ROOT = 'react-cli';
19
19
  exports.CONFIG_ROOT = CONFIG_ROOT;
20
20
 
21
- const cliNodemodulesPath = _path.default.resolve(cliRootPath, 'node_modules'); // export const babelrcPath = join(cliRootPath, '.babelrc');
21
+ const cliNodeModulesPath = _path.default.resolve(cliRootPath, 'node_modules'); // export const babelrcPath = join(cliRootPath, '.babelrc');
22
22
 
23
23
 
24
- exports.cliNodemodulesPath = cliNodemodulesPath;
24
+ exports.cliNodeModulesPath = cliNodeModulesPath;
25
25
  const appPath = process.cwd(); // export const appInitialHTMLTemplatePath = path.join(
26
26
  // process.cwd(),
27
27
  // 'src',
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.deprecateMessage = deprecateMessage;
7
+ exports.deprecateOption = deprecateOption;
8
+ exports.deprecationLoggerEnd = deprecationLoggerEnd;
9
+
10
+ var _logger = require("./logger");
11
+
12
+ function deprecateMessage(message) {
13
+ // eslint-disable-next-line no-use-before-define
14
+ deprecationLoggerStart();
15
+ (0, _logger.messageLogger)('\x1b[36m%s\x1b[0m', message);
16
+ }
17
+
18
+ function printLine() {
19
+ deprecateMessage('\n!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! \n ');
20
+ }
21
+
22
+ let isFirstDeprecation = false;
23
+
24
+ function deprecateOption(previousObjPath = '', newObjPath = '', message = '') {
25
+ deprecateMessage(`Please move "${previousObjPath.split('.').join(' > ')}" to "${newObjPath.split('.').join(' > ')}" following option ${message}`);
26
+ }
27
+
28
+ function deprecationLoggerStart() {
29
+ if (!isFirstDeprecation) {
30
+ isFirstDeprecation = true;
31
+ printLine();
32
+ }
33
+ }
34
+
35
+ function deprecationLoggerEnd() {
36
+ if (isFirstDeprecation) {
37
+ isFirstDeprecation = false;
38
+ printLine();
39
+ }
40
+ }
@@ -4,7 +4,32 @@ var _babelJest = _interopRequireDefault(require("babel-jest"));
4
4
 
5
5
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
6
6
 
7
+ const getOptions = require('../../../lib/utils/getOptions').default;
8
+
9
+ const {
10
+ enableTypeScript,
11
+ babelCustomizationForLibrary
12
+ } = getOptions();
13
+ const {
14
+ babelPlugins
15
+ } = babelCustomizationForLibrary;
16
+ const resolvedPlugins = [];
17
+ babelPlugins.forEach(plugin => {
18
+ if (Array.isArray(plugin)) {
19
+ resolvedPlugins.push([require.resolve(plugin[0]), plugin[1]]);
20
+ } else {
21
+ resolvedPlugins.push(require.resolve(plugin));
22
+ }
23
+ });
24
+ const presets = [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')];
25
+
26
+ if (enableTypeScript) {
27
+ presets.push(require.resolve('@babel/preset-typescript'));
28
+ }
29
+
30
+ const defaultPlugins = [require.resolve('babel-plugin-transform-dynamic-import')];
31
+ const plugins = [...defaultPlugins, ...resolvedPlugins];
7
32
  module.exports = _babelJest.default.createTransformer({
8
- presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')],
9
- plugins: [require.resolve('babel-plugin-transform-dynamic-import')]
33
+ presets: presets,
34
+ plugins: plugins
10
35
  });
@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
19
19
  const ImageExtRegex = /\.jpe?g$|\.gif$|\.png|\.webp$/;
20
20
  const FontExtRegex = /\.woff2|\.woff$|\.ttf$|\.eot$/;
21
21
  const SVGExtRegex = /\.svg$/;
22
- const AudioExtRegex = /\.ogg$/;
22
+ const AudioExtRegex = /\.ogg|\.mp3$/;
23
23
  const VidioExtRegex = /\.mp4|\.webm$/;
24
24
 
25
25
  function createLoaderOptionQueryString(loaderName, nameTemplate, limit = 1000) {
@@ -18,6 +18,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
18
18
  const fs = require('fs');
19
19
 
20
20
  const options = (0, _utils.getOptions)();
21
+ const defaultPostCssPluginOrder = ['valueReplacer', 'selectorReplace', 'hasRTL', 'hoverActive', 'combinerMediaQuery', 'cssVariableReplacement', 'selectorWeight', 'minifier', 'composeMinification'];
22
+
23
+ function calculatePostCssPluginOrder(postCssPluginOrder, pluginOrder) {
24
+ // if(typeof postCssPluginOrder === Boolean)
25
+ if (Array.isArray(postCssPluginOrder)) {
26
+ return postCssPluginOrder;
27
+ }
28
+
29
+ if (postCssPluginOrder) {
30
+ return pluginOrder;
31
+ }
32
+
33
+ return defaultPostCssPluginOrder.filter(value => pluginOrder.includes(value));
34
+ }
21
35
 
22
36
  const getCSSLoaders = optionsObj => {
23
37
  const {
@@ -29,7 +43,10 @@ const getCSSLoaders = optionsObj => {
29
43
  cssUniqueness,
30
44
  selectorReplace,
31
45
  cssHashSelectors,
32
- classNamePrefix
46
+ classNamePrefix,
47
+ postCssPluginOrder,
48
+ customClassNamePrefix,
49
+ displayClassName
33
50
  } = optionsObj;
34
51
  const {
35
52
  devCssFileBountry
@@ -50,11 +67,12 @@ const getCSSLoaders = optionsObj => {
50
67
  if (classNameBlob) {
51
68
  cssLoaderOptions.modules.localIdentName = classNameBlob;
52
69
  } else {
53
- cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, patterns);
54
- } // console.log('selector weight config : ', selectorWeightConfig);
70
+ cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix, customClassNamePrefix, patterns, displayClassName);
71
+ }
55
72
 
73
+ const pluginOrder = calculatePostCssPluginOrder(postCssPluginOrder, Object.keys(plugins).filter(x => plugins[x] === true)); // console.log('selector weight config : ', selectorWeightConfig);
56
74
 
57
- let postcssPlugins = [plugins.valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.hasRTL && require('@zohodesk/postcss-rtl')({
75
+ const postcssPlugins = [plugins.valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), plugins.hasRTL && require('@zohodesk/postcss-rtl')({
58
76
  addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
59
77
  if (prefix === '[dir]') {
60
78
  return selector;
@@ -62,7 +80,10 @@ const getCSSLoaders = optionsObj => {
62
80
 
63
81
  return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
64
82
  }
65
- }), plugins.combinerMediaQuery && require('postcss-combine-media-query')(), plugins.hoverActive && require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString), plugins.cssVariableReplacement && fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig)].filter(Boolean);
83
+ }), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.combinerMediaQuery && require('postcss-combine-media-query')(), plugins.hoverActive && require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString), plugins.cssVariableReplacement && fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig) // ,
84
+ // plugins.composeMinification &&
85
+ // require('../postcss-plugins/composePlugin')()
86
+ ].filter(Boolean);
66
87
  return [cssSelectorZipPath && {
67
88
  loader: require.resolve('../loaders/selectorMappingLoader')
68
89
  }, {
@@ -136,13 +157,16 @@ const getCSSLoaders = optionsObj => {
136
157
 
137
158
  [ postcssPlugins that are implemented ]
138
159
  */
139
- postcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({
160
+ // console.log(params.resourcePath);
161
+ // console.log(postcssPlugins);
162
+ const finalPostcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({
140
163
  filename: params.resourcePath,
141
164
  filterObject: patterns,
142
- plugins: postcssPlugins
165
+ plugins: postcssPlugins,
166
+ order: pluginOrder
143
167
  }); // postcssPlugins that are allowed
144
168
 
145
- return postcssPlugins.length > 0 ? postcssPlugins : [require('../postcss-plugins/EmptyPlugin')()];
169
+ return finalPostcssPlugins.length > 0 ? finalPostcssPlugins : [require('../postcss-plugins/EmptyPlugin')()];
146
170
  }
147
171
  }
148
172
  } : null, plugins.composeMinification ? {
@@ -7,6 +7,8 @@ exports.default = void 0;
7
7
 
8
8
  var _path = _interopRequireDefault(require("path"));
9
9
 
10
+ var _babelPresetReactOption = _interopRequireDefault(require("../babel/babel-option-utils/babel-preset-react-option"));
11
+
10
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
13
 
12
14
  let getDevJsLoaders = options => {
@@ -16,6 +18,7 @@ let getDevJsLoaders = options => {
16
18
  instrumentScript,
17
19
  devConsoleExculde
18
20
  },
21
+ enableTypeScript,
19
22
  esLint: {
20
23
  enable: enableEslint
21
24
  }
@@ -40,8 +43,11 @@ let getDevJsLoaders = options => {
40
43
  }
41
44
  } : {
42
45
  modules: false
43
- }], require.resolve('@babel/preset-react')],
44
- plugins: disableES5Transpile ? [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), require.resolve('@babel/plugin-proposal-object-rest-spread'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
46
+ }], (0, _babelPresetReactOption.default)({
47
+ disableES5Transpile
48
+ }), enableTypeScript ? require.resolve('@babel/preset-typescript') : null].filter(Boolean),
49
+ plugins: disableES5Transpile ? [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve('@babel/plugin-proposal-object-rest-spread'),
50
+ devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
45
51
  exclude: ['error', 'log']
46
52
  }] : null].filter(Boolean) : [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), require.resolve('@babel/plugin-proposal-object-rest-spread'), devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
47
53
  exclude: ['error', 'log']