@zohodesk/react-cli 1.0.2 → 1.0.3-exp.2

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 (155) hide show
  1. package/.eslintignore +7 -7
  2. package/.eslintrc.js +180 -180
  3. package/.prettierrc +6 -6
  4. package/Changelog.md +1019 -1019
  5. package/README.md +1209 -1165
  6. package/bin/cli.js +489 -483
  7. package/docs/ComposeMinification.md +14 -0
  8. package/docs/CustomChunks.md +26 -26
  9. package/docs/DevServerPort.md +39 -39
  10. package/docs/DevStart.md +18 -18
  11. package/docs/HoverActive.md +12 -12
  12. package/docs/InstallNode.md +28 -28
  13. package/docs/SelectorWeight.md +8 -8
  14. package/docs/TODOS.md +10 -10
  15. package/docs/ValueReplacer.md +60 -60
  16. package/docs/VariableConversion.md +729 -729
  17. package/docs/warnings_while_install.txt +35 -35
  18. package/files/eslintrc.js +62 -62
  19. package/files/prettierrc.js +3 -3
  20. package/lib/common/buildEs.js +12 -0
  21. package/lib/common/testPattern.js +0 -2
  22. package/lib/common/valueReplacer.js +1 -3
  23. package/lib/configs/resolvers.js +14 -3
  24. package/lib/configs/webpack.css.umd.config.js +4 -4
  25. package/lib/configs/webpack.dev.config.js +6 -0
  26. package/lib/configs/webpack.docs.config.js +4 -0
  27. package/lib/configs/webpack.impact.config.js +4 -0
  28. package/lib/configs/webpack.prod.config.js +6 -0
  29. package/lib/loaderUtils/configsAssetsLoaders.js +33 -33
  30. package/lib/loaderUtils/getCSSLoaders.js +78 -49
  31. package/lib/loaderUtils/tests/windowsModification.test.js +10 -0
  32. package/lib/loaderUtils/windowsModification.js +6 -1
  33. package/lib/loaders/composeLoader.js +172 -0
  34. package/lib/loaders/selectorMappingLoader.js +9 -9
  35. package/lib/loaders/workerLoader.js +9 -9
  36. package/lib/logger.js +20 -0
  37. package/lib/pluginUtils/getDevPlugins.js +23 -8
  38. package/lib/pluginUtils/getProdPlugins.js +20 -8
  39. package/lib/pluginUtils/getUMDCSSPlugins.js +1 -1
  40. package/lib/pluginUtils/getUMDComponentPlugins.js +1 -1
  41. package/lib/plugins/CustomAttributePlugin.js +82 -0
  42. package/lib/plugins/CustomAttributePlugin.md +35 -0
  43. package/lib/plugins/EFCPlugin.js +9 -9
  44. package/lib/plugins/EFCPlugin.md +6 -6
  45. package/lib/plugins/EFCTemplatePlugin.js +10 -12
  46. package/lib/plugins/I18NInjectIntoIndexPlugin.js +12 -13
  47. package/lib/plugins/I18nSplitPlugin/I18nDebugPlugin.js +2 -3
  48. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +38 -38
  49. package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +30 -30
  50. package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +10 -15
  51. package/lib/plugins/I18nSplitPlugin/I18nSplit.md +95 -95
  52. package/lib/plugins/I18nSplitPlugin/README.md +25 -25
  53. package/lib/plugins/I18nSplitPlugin/index.js +57 -57
  54. package/lib/plugins/I18nSplitPlugin/utils/propertiesUtils.js +8 -8
  55. package/lib/plugins/{UglifyCSSPlugin.js → MinifyPlugin.js} +3 -3
  56. package/lib/plugins/ResourceHintsPlugin.js +17 -17
  57. package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +6 -6
  58. package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -30
  59. package/lib/plugins/SelectorPlugin.js +66 -48
  60. package/lib/plugins/ServiceWorkerPlugin.js +9 -9
  61. package/lib/plugins/TPHashMappingPlugin.js +4 -4
  62. package/lib/plugins/VariableConversionCollector.js +94 -88
  63. package/lib/plugins/index.js +7 -7
  64. package/lib/plugins/utils/classHandling.js +20 -0
  65. package/lib/plugins/utils/fileHandling.js +107 -0
  66. package/lib/plugins/utils/tests/fileHandling.test.js +30 -0
  67. package/lib/postcss-plugins/EmptyPlugin.js +8 -0
  68. package/lib/postcss-plugins/ExcludePlugin.js +1 -1
  69. package/lib/postcss-plugins/IncludePlugin.js +0 -1
  70. package/lib/postcss-plugins/RTLSplitPlugin.js +14 -20
  71. package/lib/postcss-plugins/ValueReplacer.js +2 -13
  72. package/lib/postcss-plugins/__test__/test1Input.css +38 -38
  73. package/lib/postcss-plugins/__test__/test1Output.css +38 -38
  74. package/lib/postcss-plugins/hoverActivePlugin.js +3 -9
  75. package/lib/postcss-plugins/variableModificationPlugin/index.js +2 -21
  76. package/lib/schemas/index.js +39 -4
  77. package/lib/servers/devBuild.js +13 -11
  78. package/lib/servers/httpsOptions.js +12 -13
  79. package/lib/servers/nowatchserver.js +5 -3
  80. package/lib/servers/requireLocalOrGlobal.js +61 -0
  81. package/lib/servers/server.js +3 -5
  82. package/lib/sh/pre-commit.sh +34 -34
  83. package/lib/sh/reportPublish.sh +45 -45
  84. package/lib/utils/buildstats.html +148 -148
  85. package/lib/utils/cssClassNameGenerate.js +38 -12
  86. package/lib/utils/getOptions.js +9 -0
  87. package/lib/utils/resultSchema.json +73 -73
  88. package/lib/utils/variableConvertor.js +159 -0
  89. package/npm8.md +9 -9
  90. package/package-lock.json +14412 -0
  91. package/package.json +121 -120
  92. package/postpublish.js +8 -8
  93. package/templates/app/.eslintrc.js +140 -140
  94. package/templates/app/README.md +12 -12
  95. package/templates/app/app/index.html +24 -24
  96. package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
  97. package/templates/app/app/properties/i18nkeys.json +3 -3
  98. package/templates/app/docs/all.html +69 -69
  99. package/templates/app/mockapi/index.js +18 -18
  100. package/templates/app/package.json +37 -37
  101. package/templates/app/src/actions/SampleActions/index.js +37 -37
  102. package/templates/app/src/actions/index.js +65 -65
  103. package/templates/app/src/appUrls.js +19 -19
  104. package/templates/app/src/components/Alert/Alert.js +134 -134
  105. package/templates/app/src/components/Alert/Alert.module.css +79 -79
  106. package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -37
  107. package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -84
  108. package/templates/app/src/components/Sample/Sample.module.css +11 -11
  109. package/templates/app/src/components/Sample/SampleList.js +61 -61
  110. package/templates/app/src/components/Slider/Slider.css +41 -41
  111. package/templates/app/src/components/Slider/Slider.js +55 -55
  112. package/templates/app/src/containers/AlertContainer/index.js +15 -15
  113. package/templates/app/src/containers/AppContainer/index.js +96 -96
  114. package/templates/app/src/containers/AppContainer/index.module.css +27 -27
  115. package/templates/app/src/containers/CustomMatch/index.js +65 -65
  116. package/templates/app/src/containers/DevTools/index.js +10 -10
  117. package/templates/app/src/containers/Header/index.js +67 -67
  118. package/templates/app/src/containers/Header/index.module.css +43 -43
  119. package/templates/app/src/containers/Redirect/index.js +63 -63
  120. package/templates/app/src/containers/Redirector/index.js +47 -47
  121. package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -42
  122. package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -3
  123. package/templates/app/src/historyChange.js +5 -5
  124. package/templates/app/src/index.html +10 -10
  125. package/templates/app/src/index.js +24 -24
  126. package/templates/app/src/middleware/PromiseMiddleware.js +59 -59
  127. package/templates/app/src/reducers/alertData.js +11 -11
  128. package/templates/app/src/reducers/index.js +6 -6
  129. package/templates/app/src/reducers/samples.js +19 -19
  130. package/templates/app/src/store/configureStore.dev.js +51 -51
  131. package/templates/app/src/store/configureStore.js +5 -5
  132. package/templates/app/src/store/configureStore.prod.js +26 -26
  133. package/templates/app/src/util/Common.js +5 -5
  134. package/templates/app/src/util/RequestAPI.js +132 -132
  135. package/templates/docs/all.html +249 -249
  136. package/templates/docs/component.html +178 -178
  137. package/templates/docs/components.html +221 -221
  138. package/templates/docs/css/b.min.css +6 -6
  139. package/templates/docs/css/component.css +42 -42
  140. package/templates/docs/css/componentTest.css +6 -6
  141. package/templates/docs/css/hopscotch.css +585 -585
  142. package/templates/docs/css/style.css +1022 -1022
  143. package/templates/docs/impactReportTemplate.html +154 -154
  144. package/templates/docs/index.html +1501 -1501
  145. package/templates/docs/js/active-line.js +72 -72
  146. package/templates/docs/js/b.min.js +7 -7
  147. package/templates/docs/js/codemirror.js +9680 -9680
  148. package/templates/docs/js/designTokens.js +334 -334
  149. package/templates/docs/js/j.min.js +4 -4
  150. package/templates/docs/js/javascript.js +874 -874
  151. package/templates/docs/js/matchbrackets.js +145 -145
  152. package/lib/plugins/composeCommonPlugin.js +0 -30
  153. package/lib/postcss-plugins/variableModifier.js +0 -244
  154. package/result.json +0 -1
  155. package/unittest/index.html +0 -37
@@ -4,8 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.windowsModification = windowsModification;
7
+ exports.windowsModificationFile = windowsModificationFile;
7
8
  const isWin = process.platform === 'win32';
8
9
 
9
10
  function windowsModification(array) {
10
11
  return isWin ? array && Array.isArray(array) && array.map(r => r.replace(/\//g, '\\')) : array;
11
- }
12
+ }
13
+
14
+ function windowsModificationFile(filename) {
15
+ return isWin ? filename.replace(/\//g, '\\') : filename;
16
+ } // module.exports = { windowsModification, windowsModificationFile };
@@ -0,0 +1,172 @@
1
+ "use strict";
2
+
3
+ var _path = _interopRequireDefault(require("path"));
4
+
5
+ var _postcss = _interopRequireDefault(require("postcss"));
6
+
7
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
8
+
9
+ const supportedProps = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right', // 'margin',
10
+ 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', // 'padding',
11
+ 'top', 'bottom', 'left', 'right', 'height', 'width', 'min-height', 'min-width', 'max-height', 'max-width'];
12
+ const renameProps = {
13
+ 'margin-top': {
14
+ pos: 'mt',
15
+ neg: 'mt_'
16
+ },
17
+ 'margin-bottom': {
18
+ pos: 'mb',
19
+ neg: 'mb_'
20
+ },
21
+ 'margin-left': {
22
+ pos: 'ml',
23
+ neg: 'ml_'
24
+ },
25
+ 'margin-right': {
26
+ pos: 'mr',
27
+ neg: 'mr_'
28
+ },
29
+ margin: {
30
+ pos: 'm',
31
+ neg: 'm_'
32
+ },
33
+ 'padding-top': {
34
+ pos: 'pt',
35
+ neg: 'pt_'
36
+ },
37
+ 'padding-bottom': {
38
+ pos: 'pb',
39
+ neg: 'pb_'
40
+ },
41
+ 'padding-left': {
42
+ pos: 'pl',
43
+ neg: 'pl_'
44
+ },
45
+ 'padding-right': {
46
+ pos: 'pr',
47
+ neg: 'pr_'
48
+ },
49
+ padding: {
50
+ pos: 'p',
51
+ neg: 'p_'
52
+ },
53
+ top: {
54
+ pos: 'post',
55
+ neg: 'post_'
56
+ },
57
+ bottom: {
58
+ pos: 'posb',
59
+ neg: 'posb_'
60
+ },
61
+ left: {
62
+ pos: 'posl',
63
+ neg: 'posl_'
64
+ },
65
+ right: {
66
+ pos: 'posr',
67
+ neg: 'posr_'
68
+ },
69
+ height: {
70
+ pos: 'h',
71
+ neg: 'h_'
72
+ },
73
+ width: {
74
+ pos: 'w',
75
+ neg: 'w_'
76
+ },
77
+ 'min-height': {
78
+ pos: 'minh',
79
+ neg: 'minh_'
80
+ },
81
+ 'min-width': {
82
+ pos: 'minw',
83
+ neg: 'minw_'
84
+ },
85
+ 'max-height': {
86
+ pos: 'maxh',
87
+ neg: 'maxh_'
88
+ },
89
+ 'max-width': {
90
+ pos: 'maxw',
91
+ neg: 'maxw_'
92
+ }
93
+ };
94
+
95
+ function objToClassName(prop, data) {
96
+ return renameProps[prop] ? data < 0 ? renameProps[prop].neg ? `${renameProps[prop].neg}${data * -1}` : `undef${data * -1}` : renameProps[prop].pos ? `${renameProps[prop].pos}${data}` : `undef${data}` : `undef${data}`;
97
+ }
98
+
99
+ const commonFilePath = {
100
+ 'margin-left': 'src/common/css/margin.css',
101
+ 'margin-right': 'src/common/css/margin.css',
102
+ 'margin-top': 'src/common/css/margin.css',
103
+ 'margin-bottom': 'src/common/css/margin.css',
104
+ 'padding-left': 'src/common/css/padding.css',
105
+ 'padding-right': 'src/common/css/padding.css',
106
+ 'padding-top': 'src/common/css/padding.css',
107
+ 'padding-bottom': 'src/common/css/padding.css',
108
+ top: 'src/common/css/position.css',
109
+ bottom: 'src/common/css/position.css',
110
+ left: 'src/common/css/position.css',
111
+ right: 'src/common/css/position.css',
112
+ height: 'src/common/css/height.css',
113
+ width: 'src/common/css/width.css',
114
+ 'min-height': 'src/common/css/height.css',
115
+ 'min-width': 'src/common/css/width.css',
116
+ 'max-height': 'src/common/css/height.css',
117
+ 'max-width': 'src/common/css/width.css'
118
+ }; // const preNames = {
119
+ // height: 'zd-height-',
120
+ // 'max-height': 'zd-height-',
121
+ // 'min-height': 'zd-height-',
122
+ // width: 'zd-width-',
123
+ // 'max-width': 'zd-width-',
124
+ // 'min-width': 'zd-width-',
125
+ // top: 'zd-position-',
126
+ // bottom: 'zd-position-',
127
+ // left: 'zd-position-',
128
+ // right: 'zd-position-',
129
+ // 'padding-top': 'zd-padding-',
130
+ // 'padding-bottom': 'zd-padding-',
131
+ // 'padding-left': 'zd-padding-',
132
+ // 'padding-right': 'zd-padding-',
133
+ // 'margin-top': 'zd-margin-',
134
+ // 'margin-bottom': 'zd-margin-',
135
+ // 'margin-left': 'zd-margin-',
136
+ // 'margin-right': 'zd-margin-'
137
+ // };
138
+
139
+ function allowParent(rule) {
140
+ return rule.parent.type === 'root' || rule.parent.type === 'atrule' && rule.parent.name === 'media';
141
+ }
142
+
143
+ module.exports = function (source) {
144
+ const {
145
+ resourcePath
146
+ } = this;
147
+
148
+ let root = _postcss.default.parse(source);
149
+
150
+ root.walkRules(rule => {
151
+ rule.walkDecls(decl => {
152
+ if (!allowParent(rule)) {
153
+ return;
154
+ }
155
+
156
+ if (supportedProps.includes(decl.prop) && /px$/gi.test(decl.value) && !/^--/gi.test(decl.prop) && commonFilePath[decl.prop] && !decl.value.includes('calc') && !/[,\s+]+|(\w+)\.|:|(\d+)%/gi.test(rule.selector)) {
157
+ let composeString = `from "${_path.default.relative(_path.default.parse(resourcePath).dir, // resourcePath
158
+ commonFilePath[decl.prop]).replace(/\\/gi, '/')}"`; // n++ < 10 && console.log(composeString);
159
+
160
+ if (!composeString.includes('src')) {
161
+ const cls = objToClassName(decl.prop, parseInt(decl.value));
162
+ composeString = `${cls} ${composeString}`;
163
+ decl.value = composeString;
164
+ decl.prop = 'composes'; // n < 10 && console.log(rule.selector, decl.prop, decl.value);
165
+ }
166
+ }
167
+ });
168
+ });
169
+ const output = root.toString(); // console.log(output);
170
+
171
+ return output;
172
+ };
@@ -6,25 +6,25 @@ var _fs = _interopRequireDefault(require("fs"));
6
6
 
7
7
  var _utils = require("../utils");
8
8
 
9
+ var _logger = require("../logger");
10
+
9
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
12
 
11
- let options = (0, _utils.getOptions)();
13
+ const options = (0, _utils.getOptions)();
12
14
  const {
13
15
  cssSelectorZipPath
14
16
  } = options.impactService;
15
17
 
16
- const zipname = _path.default.parse(cssSelectorZipPath).name; // console.log({ cssSelectorZipPath, zipname });
17
- // TODO:NOTE: need to check about .. path related files creation
18
+ const zipname = _path.default.parse(cssSelectorZipPath).name; // TODO:NOTE: need to check about .. path related files creation
18
19
  // for now no css files have given form react-cli need to make sure about it.
19
20
 
20
21
 
21
- let zippath = _path.default.join(process.cwd(), cssSelectorZipPath);
22
+ const zippath = _path.default.join(process.cwd(), cssSelectorZipPath);
22
23
 
23
24
  if (_fs.default.existsSync(_path.default.join(process.cwd(), cssSelectorZipPath))) {
24
25
  _fs.default.rmSync(zippath);
25
26
 
26
- console.log('zip file deleted', zippath); // fs.rmSync(zippath, {force:true})
27
- // console.log('created folder ==> ', dpath);
27
+ (0, _logger.messageLogger)('zip file deleted', zippath); // fs.rmSync(zippath, {force:true})
28
28
  } // const minicssComment =
29
29
  // '// extracted by mini-css-extract-plugin\n';
30
30
 
@@ -39,15 +39,15 @@ module.exports = function (source) {
39
39
 
40
40
  const relativePath = _path.default.relative(rootContext, resourcePath);
41
41
 
42
- let fpath = _path.default.join(rootContext, zipname, relativePath);
42
+ const fpath = _path.default.join(rootContext, zipname, relativePath);
43
43
 
44
- let originalpath = _path.default.join(rootContext, relativePath);
44
+ const originalpath = _path.default.join(rootContext, relativePath);
45
45
 
46
46
  if (relativePath.startsWith('..')) {
47
47
  throw `unexpected path ${relativePath}`;
48
48
  }
49
49
 
50
- let dpath = fpath.slice(0, fpath.lastIndexOf(_path.default.sep));
50
+ const dpath = fpath.slice(0, fpath.lastIndexOf(_path.default.sep));
51
51
 
52
52
  if (!_fs.default.existsSync(originalpath)) {
53
53
  throw `originalpath not exixt ${originalpath}`;
@@ -16,7 +16,7 @@ var _SingleEntryPlugin = _interopRequireDefault(require("webpack/lib/SingleEntry
16
16
 
17
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
18
 
19
- /* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
19
+ /* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
20
20
  import ExternalsPlugin from 'webpack/lib/ExternalsPlugin'; */
21
21
  const schema = {
22
22
  'type': 'object',
@@ -80,14 +80,14 @@ function pitch(request) {
80
80
  globalObject: 'self'
81
81
  };
82
82
  workerContext.compiler = this._compilation.createChildCompiler(`worker-loader ${request}`, workerContext.options);
83
- /*
84
- new WebWorkerTemplatePlugin().apply(workerContext.compiler);
85
-
86
- if (compilerOptions.externals) {
87
- new ExternalsPlugin(
88
- getExternalsType(compilerOptions),
89
- compilerOptions.externals
90
- ).apply(workerContext.compiler);
83
+ /*
84
+ new WebWorkerTemplatePlugin().apply(workerContext.compiler);
85
+
86
+ if (compilerOptions.externals) {
87
+ new ExternalsPlugin(
88
+ getExternalsType(compilerOptions),
89
+ compilerOptions.externals
90
+ ).apply(workerContext.compiler);
91
91
  } */
92
92
 
93
93
  new _SingleEntryPlugin.default(this.context, `!!${request}`, _path.default.parse(this.resourcePath).name).apply(workerContext.compiler);
package/lib/logger.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.errorLogger = errorLogger;
7
+ exports.messageLogger = messageLogger;
8
+ exports.warnLogger = warnLogger;
9
+
10
+ function messageLogger(...args) {
11
+ console.log(...args);
12
+ }
13
+
14
+ function errorLogger(...args) {
15
+ console.error(...args);
16
+ }
17
+
18
+ function warnLogger(...args) {
19
+ console.warn(...args);
20
+ }
@@ -25,6 +25,8 @@ var _webpack = _interopRequireDefault(require("webpack"));
25
25
 
26
26
  var _plugins = require("../plugins");
27
27
 
28
+ var _CustomAttributePlugin = require("../plugins/CustomAttributePlugin");
29
+
28
30
  var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
29
31
 
30
32
  var _VariableConversionCollector = _interopRequireDefault(require("../plugins/VariableConversionCollector"));
@@ -42,12 +44,15 @@ const getDevPlugins = (options, publicPath) => {
42
44
  tpFolder,
43
45
  folder,
44
46
  instrumentScript,
47
+ customAttributes,
45
48
  devCssFileBountry,
46
49
  context,
47
50
  hasEFC: prevOptionForEnableEFC,
48
51
  hasShadowDOM,
49
52
  cssVariableReplacementConfig,
50
53
  plugins: pluginObject,
54
+ patterns,
55
+ patternsRootDir,
51
56
  exclude,
52
57
  selectorWeightConfig,
53
58
  server: {
@@ -86,6 +91,7 @@ const getDevPlugins = (options, publicPath) => {
86
91
  NODE_ENV: JSON.stringify(mode === 'dev-no-warn' ? 'production' : 'development')
87
92
  }
88
93
  }), new _miniCssExtractPlugin.default({
94
+ attributes: customAttributes.cssAttributes,
89
95
  filename: cssLTRFileNameTempalte,
90
96
  // ignoreOrder: true,
91
97
  chunkFilename: cssLTRFileNameTempalte
@@ -109,11 +115,11 @@ const getDevPlugins = (options, publicPath) => {
109
115
  }
110
116
 
111
117
  const i18nManifestFileName = 'i18n-manifest.json';
112
- /**
113
- * NOTE:
114
- * this file name ext .i18n.js added
115
- * Because, in service worker they maintain cache as file name based
116
- * So, to make differce we added .i18n.js ext.
118
+ /**
119
+ * NOTE:
120
+ * this file name ext .i18n.js added
121
+ * Because, in service worker they maintain cache as file name based
122
+ * So, to make differce we added .i18n.js ext.
117
123
  */
118
124
 
119
125
  const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].i18n.js';
@@ -184,6 +190,7 @@ const getDevPlugins = (options, publicPath) => {
184
190
  mainChunkName: 'main'
185
191
  }));
186
192
  instrumentScript && pluginsArr.push(new _plugins.ScriptInstrumentPlugin());
193
+ customAttributes.enable && pluginsArr.push(new _CustomAttributePlugin.CustomAttributePlugin(customAttributes));
187
194
  hasShadowDOM && pluginsArr.push(new _plugins.ShadowDOMSupportPlugin());
188
195
 
189
196
  if (devCssFileBountry) {
@@ -194,16 +201,24 @@ const getDevPlugins = (options, publicPath) => {
194
201
 
195
202
  if (pluginObject.cssVariableReplacement) {
196
203
  pluginsArr.push(new _VariableConversionCollector.default({
197
- cssVariableReplacementConfig
204
+ cssVariableReplacementConfig,
205
+ patterns,
206
+ patternsRootDir
198
207
  }));
199
208
  }
200
209
 
201
210
  if (pluginObject.selectorWeight) {
202
211
  pluginsArr.push(new _SelectorPlugin.default({
203
212
  selectorWeightConfig,
204
- exclude: exclude.selectorWeight
213
+ exclude: exclude.selectorWeight,
214
+ patterns,
215
+ patternsRootDir
205
216
  }));
206
- }
217
+ } // if (pluginObject.minifier) {
218
+ // // console.log('minifier active');
219
+ // pluginsArr.push(new MinifierPlugin());
220
+ // }
221
+
207
222
 
208
223
  return pluginsArr.filter(Boolean);
209
224
  };
@@ -29,6 +29,8 @@ var _SelectorPlugin = _interopRequireDefault(require("../plugins/SelectorPlugin"
29
29
 
30
30
  var _plugins = require("../plugins");
31
31
 
32
+ var _CustomAttributePlugin = require("../plugins/CustomAttributePlugin");
33
+
32
34
  var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
33
35
 
34
36
  var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
@@ -45,12 +47,15 @@ const getProdPlugins = (options, publicPath = '') => {
45
47
  bundleAnalyze,
46
48
  optimize,
47
49
  publicPaths,
50
+ patterns,
51
+ patternsRootDir,
48
52
  hasEFC: prevOptionForEnableEFC,
49
53
  enableSMapHook,
50
54
  tpFolder,
51
55
  folder,
52
56
  outputFolder,
53
57
  context,
58
+ exclude,
54
59
  enableSMap,
55
60
  server: {
56
61
  mode
@@ -63,6 +68,7 @@ const getProdPlugins = (options, publicPath = '') => {
63
68
  resourceHints,
64
69
  serviceWorker,
65
70
  htmlTemplate,
71
+ customAttributes,
66
72
  tpHashMapping,
67
73
  cdnMapping,
68
74
  crossorigin
@@ -102,7 +108,7 @@ const getProdPlugins = (options, publicPath = '') => {
102
108
  // ignoreOrder: true,
103
109
  filename: cssLTRFileNameTempalte,
104
110
  chunkFilename: cssLTRFileNameTempalte
105
- }), new _plugins.ResourceHintsPlugin(), new _plugins.UglifyCSSPlugin()];
111
+ }), new _plugins.ResourceHintsPlugin(), new _plugins.MinifyPlugin()];
106
112
 
107
113
  if (enableRTLSplit) {
108
114
  pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({
@@ -116,11 +122,11 @@ const getProdPlugins = (options, publicPath = '') => {
116
122
  }
117
123
 
118
124
  const i18nManifestFileName = 'i18n-manifest.json';
119
- /**
120
- * NOTE:
121
- * this file name ext .i18n.js added
122
- * Because, in service worker they maintain cache as file name based
123
- * So, to make differce we added .i18n.js ext.
125
+ /**
126
+ * NOTE:
127
+ * this file name ext .i18n.js added
128
+ * Because, in service worker they maintain cache as file name based
129
+ * So, to make differce we added .i18n.js ext.
124
130
  */
125
131
 
126
132
  const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].[chunkhash].i18n.js';
@@ -268,17 +274,23 @@ const getProdPlugins = (options, publicPath = '') => {
268
274
 
269
275
  if (pluginObject.cssVariableReplacement) {
270
276
  pluginsArr.push(new _VariableConversionCollector.default({
271
- cssVariableReplacementConfig
277
+ cssVariableReplacementConfig,
278
+ patterns,
279
+ patternsRootDir
272
280
  }));
273
281
  }
274
282
 
275
283
  if (pluginObject.selectorWeight) {
276
284
  pluginsArr.push(new _SelectorPlugin.default({
277
- selectorWeightConfig
285
+ selectorWeightConfig,
286
+ exclude: exclude.selectorWeight,
287
+ patterns,
288
+ patternsRootDir
278
289
  }));
279
290
  } // plugins.push(new VariableConversionCollector({}));
280
291
 
281
292
 
293
+ customAttributes.enable && pluginsArr.push(new _CustomAttributePlugin.CustomAttributePlugin(customAttributes));
282
294
  return pluginsArr;
283
295
  };
284
296
 
@@ -27,7 +27,7 @@ let getUMDCSSPlugins = () => {
27
27
  }), new _miniCssExtractPlugin.default({
28
28
  filename: 'css/[name].css',
29
29
  chunkFilename: 'css/[id].css'
30
- }), new _plugins.UglifyCSSPlugin()];
30
+ }), new _plugins.MinifyPlugin()];
31
31
  return plugins;
32
32
  };
33
33
 
@@ -27,7 +27,7 @@ let getUMDComponentPlugins = isDocs => {
27
27
  }), new _miniCssExtractPlugin.default({
28
28
  filename: 'css/[name].css',
29
29
  chunkFilename: 'css/[name].css'
30
- }), new _plugins.UglifyCSSPlugin()];
30
+ }), new _plugins.MinifyPlugin()];
31
31
  return plugins;
32
32
  };
33
33
 
@@ -0,0 +1,82 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.CustomAttributePlugin = void 0;
7
+
8
+ var _Template = _interopRequireDefault(require("webpack/lib/Template"));
9
+
10
+ var _htmlWebpackInjectAttributesPlugin = _interopRequireDefault(require("html-webpack-inject-attributes-plugin"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ /* eslint-disable no-use-before-define */
15
+ class CustomAttributePlugin {
16
+ constructor(options) {
17
+ this.options = {
18
+ attributes: options.attributes,
19
+ useHTMLAttribute: options.attributes && !options.jsAttributes && !options.cssAttributes && !options.i18nAttributes,
20
+ jsAttributes: options.jsAttributes || options.attributes || {},
21
+ cssAttributes: options.cssAttributes || options.attributes || {},
22
+ i18nAttributes: options.i18nAttributes || options.attributes || {}
23
+ };
24
+ }
25
+
26
+ addCustomAttributeToDynamicScriptTags(mainTemplate) {
27
+ const {
28
+ jsAttributes,
29
+ cssAttributes,
30
+ i18nAttributes
31
+ } = this.options; // NOTE: To add custom Attributes to js Script tags
32
+
33
+ mainTemplate.hooks.jsonpScript.tap('CustomAttributePlugin', source => {
34
+ const str = attributeSetTemplate(jsAttributes, 'script');
35
+ return _Template.default.asString([source, ...str]);
36
+ }); // NOTE: To add custom Attributes to css link tags
37
+
38
+ mainTemplate.hooks.requireEnsure.tap('CustomAttributePlugin', source => {
39
+ const str = attributeSetTemplate(cssAttributes, 'linkTag');
40
+ const replacedStr = source.replace('head.appendChild(linkTag);', `${str.join('')}head.appendChild(linkTag);`); // console.log({ s: source, r: replacedStr });
41
+
42
+ return replacedStr;
43
+ }); // NOTE: To add custom Attributes to i18n split js Script tags
44
+
45
+ mainTemplate.hooks.requireEnsure.tap('CustomAttributePlugin', source => {
46
+ const str = attributeSetTemplate(i18nAttributes, 'scriptTag');
47
+ const replacedStr = source.replace('document.body.appendChild(scriptTag);', `${str.join('')}document.body.appendChild(scriptTag);`); // console.log({ s: source, r: replacedStr });
48
+
49
+ return replacedStr;
50
+ });
51
+ }
52
+
53
+ apply(compiler) {
54
+ // NOTE: we not using this, Reason currently this option is only need for EFC,
55
+ // So it do not needed.
56
+ const {
57
+ attributes,
58
+ useHTMLAttribute
59
+ } = this.options;
60
+ useHTMLAttribute && new _htmlWebpackInjectAttributesPlugin.default(attributes).apply(compiler);
61
+ compiler.hooks.thisCompilation.tap({
62
+ name: 'CustomAttributePlugin',
63
+ stage: 1,
64
+ fn: compilation => {
65
+ this.addCustomAttributeToDynamicScriptTags(compilation.mainTemplate);
66
+ }
67
+ });
68
+ }
69
+
70
+ }
71
+
72
+ exports.CustomAttributePlugin = CustomAttributePlugin;
73
+
74
+ function attributeSetTemplate(jsAttributes, variableName) {
75
+ let str = [];
76
+ Object.keys(jsAttributes).forEach(key => {
77
+ const val = jsAttributes[key];
78
+ str.push(`${variableName}.setAttribute(${JSON.stringify(key)}, ${JSON.stringify(val)});`);
79
+ }); // console.log({ str });
80
+
81
+ return str;
82
+ }
@@ -0,0 +1,35 @@
1
+ # CustomAttributePlugin
2
+ In this plugin we added all dynamic chunks tags (like js script tags , css script tags, i18n split script tags) to extra custom attribute
3
+
4
+ ## Options
5
+
6
+ ```json
7
+ {
8
+ "name": "some",
9
+ "react-cli": {
10
+ "app": {
11
+ "customAttributes": {// this is the all options
12
+ "enable": false,
13
+ "attributes": null,
14
+ "jsAttributes": null,
15
+ "cssAttributes": null,
16
+ "i18nAttributes": null
17
+ }
18
+ }
19
+ }
20
+ ```
21
+
22
+ ### enable [Boolean]
23
+ this decides is this plugin or feature needs to be enabled of not.
24
+
25
+
26
+ ### attributes [Object]
27
+ It was object of key value pairs Example Given Option {"data-app-name":"myapp"}
28
+ Then all dynamically (js script tags , css script tags, i18n split script tags) added tags via webpack
29
+
30
+ ### jsAttributes [Object]
31
+ same as [attributes] but only for js script tags
32
+ ### cssAttributes [Object]
33
+ same as [attributes] but only for css script tags
34
+ ### i18nAttributes [Object]
35
+ same as [attributes] but only for i18n split script tags
@@ -19,6 +19,8 @@ var _replaceCssDirTemplate = require("./RtlSplitPlugin/replaceCssDirTemplate");
19
19
 
20
20
  var _EFCTemplatePlugin = _interopRequireDefault(require("./EFCTemplatePlugin"));
21
21
 
22
+ var _logger = require("../logger");
23
+
22
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
25
 
24
26
  // import { getShortI18nAssets } from './I18nSplitPlugin/utils/hashUtils';
@@ -85,18 +87,18 @@ class EFCPlugin {
85
87
  getI18nAssetsStr(entryPoint, compilation) {
86
88
  if (!chunkSplitEnable) {
87
89
  let i18nAsstes = {};
88
- let i18nFiles = Object.keys(compilation.assets).filter(assert => assert.indexOf(`i18n${_path.default.sep}`) !== -1); //hook for i18n url contains i18n/ may cause problem
90
+ const i18nFiles = Object.keys(compilation.assets).filter(assert => assert.indexOf(`i18n${_path.default.sep}`) !== -1); //hook for i18n url contains i18n/ may cause problem
89
91
 
90
92
  i18nAsstes = i18nFiles.reduce((res, i18nFilePath) => {
91
- let fileName = i18nFilePath.replace(`i18n${_path.default.sep}`, '');
92
- let splittedFileName = fileName.split('.');
93
+ const fileName = i18nFilePath.replace(`i18n${_path.default.sep}`, '');
94
+ const splittedFileName = fileName.split('.');
93
95
  res[splittedFileName[0]] = i18nFilePath;
94
96
  return res;
95
97
  }, {});
96
98
  return `[${JSON.stringify(i18nAsstes)}[lang]]`;
97
99
  }
98
100
 
99
- let initalI18nAssets = entryPoint.chunks.filter(chunk => _I18nKeysIdentifer.default.isChunkHasI18n(chunk)).map(chunk => (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@'));
101
+ const initalI18nAssets = entryPoint.chunks.filter(chunk => _I18nKeysIdentifer.default.isChunkHasI18n(chunk)).map(chunk => (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@'));
100
102
  return `${JSON.stringify(initalI18nAssets)}.map(urlpath => urlpath.replace(/@locale@/g, lang))`;
101
103
  }
102
104
 
@@ -205,8 +207,7 @@ class EFCPlugin {
205
207
  apply(compiler) {
206
208
  if (!createSDkFile) {
207
209
  return;
208
- } //console.log('this.templateFilePath', this.templateFilePath, this.options);
209
-
210
+ }
210
211
 
211
212
  if (this.templateFilePath) {
212
213
  new _EFCTemplatePlugin.default({
@@ -230,9 +231,8 @@ class EFCPlugin {
230
231
  }
231
232
 
232
233
  const source = new _webpackSources.RawSource(this.createFileContent(compilation));
233
- compilation.assets[outputFile] = source; // eslint-disable-next-line no-console
234
-
235
- console.log('The EFC embedded code was created successfully..!!!');
234
+ compilation.assets[outputFile] = source;
235
+ (0, _logger.messageLogger)('The EFC embedded code was created successfully..!!!');
236
236
  });
237
237
  }
238
238
 
@@ -1,6 +1,6 @@
1
- # EFC Plugin
2
-
3
- In EFC plugin we are create sdk file for efc related purpose
4
-
5
-
6
- # document will be soon
1
+ # EFC Plugin
2
+
3
+ In EFC plugin we are create sdk file for efc related purpose
4
+
5
+
6
+ # document will be soon