@zohodesk/react-cli 0.0.1-exp.176.2 → 0.0.1-exp.176.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/.eslintignore +7 -7
  2. package/.eslintrc.js +180 -180
  3. package/.prettierrc +6 -6
  4. package/README.md +1041 -1025
  5. package/bin/cli.js +482 -482
  6. package/cert/Tsicsezwild-22-23.crt +37 -37
  7. package/cert/Tsicsezwild-22-23.key +27 -27
  8. package/docs/CustomChunks.md +26 -26
  9. package/docs/DevStart.md +18 -18
  10. package/docs/HoverActive.md +12 -12
  11. package/docs/InstallNode.md +28 -28
  12. package/docs/SelectorWeight.md +6 -6
  13. package/docs/TODOS.md +10 -10
  14. package/docs/ValueReplacer.md +60 -60
  15. package/docs/VariableConversion.md +710 -719
  16. package/docs/warnings_while_install.txt +35 -35
  17. package/files/eslintrc.js +62 -62
  18. package/files/prettierrc.js +3 -3
  19. package/lib/common/splitChunks.js +34 -1
  20. package/lib/configs/webpack.css.umd.config.js +4 -4
  21. package/lib/loaderUtils/configsAssetsLoaders.js +33 -33
  22. package/lib/loaders/workerLoader.js +9 -9
  23. package/lib/pluginUtils/getDevPlugins.js +5 -5
  24. package/lib/pluginUtils/getProdPlugins.js +5 -5
  25. package/lib/plugins/EFCPlugin.md +6 -6
  26. package/lib/plugins/I18NInjectIntoIndexPlugin.js +4 -4
  27. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +38 -38
  28. package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +30 -30
  29. package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +8 -8
  30. package/lib/plugins/I18nSplitPlugin/I18nSplit.md +95 -95
  31. package/lib/plugins/I18nSplitPlugin/README.md +25 -25
  32. package/lib/plugins/I18nSplitPlugin/index.js +57 -57
  33. package/lib/plugins/ResourceHintsPlugin.js +17 -17
  34. package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +6 -6
  35. package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -30
  36. package/lib/plugins/ServiceWorkerPlugin.js +9 -9
  37. package/lib/plugins/TPHashMappingPlugin.js +4 -4
  38. package/lib/plugins/VariableConversionCollector.js +92 -162
  39. package/lib/postcss-plugins/RTLSplitPlugin.js +10 -10
  40. package/lib/postcss-plugins/__test__/test1Input.css +38 -38
  41. package/lib/postcss-plugins/__test__/test1Output.css +38 -38
  42. package/lib/postcss-plugins/hoverActivePlugin.js +3 -3
  43. package/lib/postcss-plugins/variableModificationPlugin/ErrorHandler.js +2 -4
  44. package/lib/postcss-plugins/variableModificationPlugin/index.js +1 -2
  45. package/lib/sh/pre-commit.sh +34 -34
  46. package/lib/sh/reportPublish.sh +45 -45
  47. package/lib/utils/buildstats.html +148 -148
  48. package/lib/utils/resultSchema.json +73 -73
  49. package/npm8.md +9 -9
  50. package/package.json +146 -146
  51. package/postpublish.js +6 -6
  52. package/templates/app/.eslintrc.js +140 -140
  53. package/templates/app/README.md +12 -12
  54. package/templates/app/app/index.html +24 -24
  55. package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
  56. package/templates/app/app/properties/i18nkeys.json +3 -3
  57. package/templates/app/docs/all.html +69 -69
  58. package/templates/app/mockapi/index.js +18 -18
  59. package/templates/app/package.json +37 -37
  60. package/templates/app/src/actions/SampleActions/index.js +37 -37
  61. package/templates/app/src/actions/index.js +65 -65
  62. package/templates/app/src/appUrls.js +19 -19
  63. package/templates/app/src/components/Alert/Alert.js +134 -134
  64. package/templates/app/src/components/Alert/Alert.module.css +79 -79
  65. package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -37
  66. package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -84
  67. package/templates/app/src/components/Sample/Sample.module.css +11 -11
  68. package/templates/app/src/components/Sample/SampleList.js +61 -61
  69. package/templates/app/src/components/Slider/Slider.css +41 -41
  70. package/templates/app/src/components/Slider/Slider.js +55 -55
  71. package/templates/app/src/containers/AlertContainer/index.js +15 -15
  72. package/templates/app/src/containers/AppContainer/index.js +96 -96
  73. package/templates/app/src/containers/AppContainer/index.module.css +27 -27
  74. package/templates/app/src/containers/CustomMatch/index.js +65 -65
  75. package/templates/app/src/containers/DevTools/index.js +10 -10
  76. package/templates/app/src/containers/Header/index.js +67 -67
  77. package/templates/app/src/containers/Header/index.module.css +43 -43
  78. package/templates/app/src/containers/Redirect/index.js +63 -63
  79. package/templates/app/src/containers/Redirector/index.js +47 -47
  80. package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -42
  81. package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -3
  82. package/templates/app/src/historyChange.js +5 -5
  83. package/templates/app/src/index.html +10 -10
  84. package/templates/app/src/index.js +24 -24
  85. package/templates/app/src/middleware/PromiseMiddleware.js +59 -59
  86. package/templates/app/src/reducers/alertData.js +11 -11
  87. package/templates/app/src/reducers/index.js +6 -6
  88. package/templates/app/src/reducers/samples.js +19 -19
  89. package/templates/app/src/store/configureStore.dev.js +51 -51
  90. package/templates/app/src/store/configureStore.js +5 -5
  91. package/templates/app/src/store/configureStore.prod.js +26 -26
  92. package/templates/app/src/util/Common.js +5 -5
  93. package/templates/app/src/util/RequestAPI.js +132 -132
  94. package/templates/docs/all.html +249 -249
  95. package/templates/docs/component.html +178 -178
  96. package/templates/docs/components.html +221 -221
  97. package/templates/docs/css/b.min.css +6 -6
  98. package/templates/docs/css/component.css +42 -42
  99. package/templates/docs/css/componentTest.css +6 -6
  100. package/templates/docs/css/hopscotch.css +585 -585
  101. package/templates/docs/css/style.css +1022 -1022
  102. package/templates/docs/impactReportTemplate.html +154 -154
  103. package/templates/docs/index.html +1501 -1501
  104. package/templates/docs/js/active-line.js +72 -72
  105. package/templates/docs/js/b.min.js +7 -7
  106. package/templates/docs/js/codemirror.js +9680 -9680
  107. package/templates/docs/js/designTokens.js +334 -334
  108. package/templates/docs/js/j.min.js +4 -4
  109. package/templates/docs/js/javascript.js +874 -874
  110. package/templates/docs/js/matchbrackets.js +145 -145
@@ -1,249 +1,249 @@
1
- <!DOCTYPE html>
2
- <html dir="ltr">
3
- <head>
4
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
- <link rel="stylesheet" href="./css/b.min.css">
6
- <style>
7
- body {
8
- position: relative;
9
- }
10
- ul.nav-pills {
11
- top: 20px;
12
- position: fixed;
13
- }
14
- p{
15
- font-size: 18px;
16
- }
17
- .container{
18
- width:100%;
19
- background-color: #473425;
20
- }
21
- .source,.html{
22
- cursor:pointer;
23
- margin:10px;
24
- color:blue;
25
- font-size:15px;
26
- }
27
- #componentInfo{
28
- background:white;
29
- }
30
- .component{
31
- padding:30px 15px;
32
- border-bottom: 2px solid #dddbda;
33
- }
34
- </style>
35
- <script src="./js/j.min.js"></script>
36
- <script src="./js/b.min.js"></script>
37
- </head>
38
- <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
39
-
40
- <div class="container">
41
- <div class="row">
42
- <nav class="col-sm-2" id="myScrollspy">
43
-
44
-
45
-
46
- <ul class="nav nav-pills nav-stacked" id="componentMenu">
47
-
48
- </ul>
49
-
50
- </nav>
51
- <div class="col-sm-10" id="componentInfo">
52
-
53
- </div>
54
- </div>
55
- </div>
56
-
57
-
58
-
59
-
60
- <script src="/docs/js/vendor.js" ></script>
61
- <script src="/docs/js/main.js" ></script>
62
-
63
- <script>
64
- function toggle(id, type) {
65
- if (type == 'source') {
66
- document.getElementById(id + '_html').style.display = 'none';
67
- } else {
68
- document.getElementById(id + '_source').style.display = 'none';
69
- }
70
- var x = document.getElementById(id + '_' + type);
71
- if (x.style.display === 'none') {
72
- x.style.display = 'block';
73
- } else {
74
- x.style.display = 'none';
75
- }
76
- }
77
- function process(str) {
78
- var div = document.createElement('div');
79
- div.innerHTML = str.trim();
80
-
81
- return format(div, 0).innerHTML;
82
- }
83
-
84
- function format(node, level) {
85
- var indentBefore = new Array(level++ + 1).join(' '),
86
- indentAfter = new Array(level - 1).join(' '),
87
- textNode;
88
-
89
- for (var i = 0; i < node.children.length; i++) {
90
- textNode = document.createTextNode('\n' + indentBefore);
91
- node.insertBefore(textNode, node.children[i]);
92
-
93
- format(node.children[i], level);
94
-
95
- if (node.lastElementChild == node.children[i]) {
96
- textNode = document.createTextNode('\n' + indentAfter);
97
- node.appendChild(textNode);
98
- }
99
- }
100
-
101
- return node;
102
- }
103
- var test = 'test';
104
- var ReactDOM = Component.ReactDOM;
105
- var React = Component.React;
106
- var renderToStaticMarkup = Component.renderToStaticMarkup;
107
-
108
- // class RenderComponent extends React.Component {
109
- // constructor(props) {
110
- // super(props);
111
- // }
112
- // render() {
113
- // var { Components } = this.props;
114
- //
115
- // return (
116
- // <div>
117
- // {Object.keys(Components).map(ComponentName => {
118
- // if (
119
- // ComponentName == 'React' ||
120
- // ComponentName == 'ReactDOM' ||
121
- // ComponentName.indexOf('__') == -1
122
- // ) {
123
- // return 'test';
124
- // }
125
- //
126
- // var Component = Components[ComponentName];
127
- // console.dir(Component);
128
- //
129
- // return (
130
- // <div>
131
- // <div><Component /></div>
132
- // <div>{ComponentName}</div>
133
- // </div>
134
- // );
135
- // })}
136
- // </div>
137
- // );
138
- // }
139
- // }
140
-
141
- var baseComponent = {};
142
- var baseComponentState = {};
143
- Object.keys(Component).forEach(c => {
144
- var componentObj = Component[c];
145
- if (c.indexOf('__') != -1) {
146
- if (baseComponentState[c.split('__')[0]]) {
147
- baseComponentState[c.split('__')[0]].push(c);
148
- } else {
149
- baseComponentState[c.split('__')[0]] = [c];
150
- }
151
- } else if (
152
- componentObj.docs &&
153
- componentObj.docs.external &&
154
- (componentObj.docs.componentGroup == 'Atom' ||
155
- componentObj.docs.componentGroup == 'Molecule' ||
156
- componentObj.docs.componentGroup == 'Organism')
157
- ) {
158
- baseComponent[c] = componentObj;
159
- }
160
- });
161
- console.log(baseComponent);
162
- console.log(baseComponentState);
163
- var str = Object.keys(baseComponent)
164
- .sort()
165
- .reduce((result, componentKey) => {
166
- return `${result}<li><a href="#${componentKey}" class="menuItem">${componentKey}</a></li>`;
167
- }, '');
168
-
169
- var getComponentState = componentKey => {
170
- var result = '';
171
- baseComponentState[componentKey].forEach(ckey => {
172
- result += `<div><span onClick="toggle('${ckey}','source')" class="source">Source</span><span onClick="toggle('${ckey}',
173
- 'html')" class="html">html</span><pre id="${ckey +
174
- '_source'}" style="display:none"></pre><pre id="${ckey +
175
- '_html'}" style="display:none"></pre><div id="${ckey}"></div></div>`;
176
- setTimeout(() => {
177
- ReactDOM.render(
178
- React.createElement(Component[ckey]),
179
- document.getElementById(ckey)
180
- );
181
- document.getElementById(ckey + '_source').innerText =
182
- Component[ckey].docs.source;
183
- document.getElementById(ckey + '_html').innerText = process(
184
- renderToStaticMarkup(React.createElement(Component[ckey]))
185
- );
186
- }, 100);
187
- });
188
- return result;
189
- };
190
- var componentInfo = Object.keys(baseComponent)
191
- .sort()
192
- .reduce((result, componentKey) => {
193
- return `${result}<div id="${componentKey}" class="component">
194
- <h1>${componentKey}</h1>
195
- <p>
196
- ${baseComponent[componentKey].docs.description || 'No description'}
197
- </p>
198
- <h4>PropTypes</h4>
199
- <table class="table table-striped">
200
- <tr><th>PropsName</th><th>type</th><th>isRequired</th></th>
201
- ${Object.keys(baseComponent[componentKey].propTypes).sort()
202
- .map(pKey => {
203
- var pObj = baseComponent[componentKey].propTypes[pKey];
204
- return `<tr>
205
- <td>
206
- ${pKey}
207
- </td>
208
-
209
- <td>
210
-
211
- ${pObj.hookType}
212
-
213
- </td><td>
214
-
215
- ${pObj.isRequired ? '' : 'true'}
216
-
217
- </td></tr>`;
218
- })
219
- .join('')}
220
- </table>
221
- <h4>State</h4>
222
- ${getComponentState(componentKey)}
223
- ${baseComponent[componentKey].docs.additionDescription ? `<h4>More Information about component</h4><p>${baseComponent[componentKey].docs.additionDescription}</p>`:""}
224
-
225
- </div>`;
226
- }, '');
227
-
228
- document.getElementById('componentMenu').innerHTML = str;
229
- document.getElementById('componentInfo').innerHTML = componentInfo;
230
- // var html = Object.keys(Component).reduce((res, cName) => {
231
- // return `${res} <div><div id="${cName}"></div><div>${cName}</div></div>`;
232
- // });
233
- // document.getElementById('react').innerHTML = html;
234
- // Object.keys(Component).forEach(cName => {
235
- // if (cName == 'React' || cName == 'ReactDOM') {
236
- // return;
237
- // }
238
- // var C = Component[cName];
239
- // try {
240
- // ReactDOM.render(<C />, document.getElementById(cName));
241
- // } catch (e) {
242
- // console.log('Error render', cName);
243
- // }
244
- // });
245
- </script>
246
-
247
-
248
- </body>
249
- </html>
1
+ <!DOCTYPE html>
2
+ <html dir="ltr">
3
+ <head>
4
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
+ <link rel="stylesheet" href="./css/b.min.css">
6
+ <style>
7
+ body {
8
+ position: relative;
9
+ }
10
+ ul.nav-pills {
11
+ top: 20px;
12
+ position: fixed;
13
+ }
14
+ p{
15
+ font-size: 18px;
16
+ }
17
+ .container{
18
+ width:100%;
19
+ background-color: #473425;
20
+ }
21
+ .source,.html{
22
+ cursor:pointer;
23
+ margin:10px;
24
+ color:blue;
25
+ font-size:15px;
26
+ }
27
+ #componentInfo{
28
+ background:white;
29
+ }
30
+ .component{
31
+ padding:30px 15px;
32
+ border-bottom: 2px solid #dddbda;
33
+ }
34
+ </style>
35
+ <script src="./js/j.min.js"></script>
36
+ <script src="./js/b.min.js"></script>
37
+ </head>
38
+ <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
39
+
40
+ <div class="container">
41
+ <div class="row">
42
+ <nav class="col-sm-2" id="myScrollspy">
43
+
44
+
45
+
46
+ <ul class="nav nav-pills nav-stacked" id="componentMenu">
47
+
48
+ </ul>
49
+
50
+ </nav>
51
+ <div class="col-sm-10" id="componentInfo">
52
+
53
+ </div>
54
+ </div>
55
+ </div>
56
+
57
+
58
+
59
+
60
+ <script src="/docs/js/vendor.js" ></script>
61
+ <script src="/docs/js/main.js" ></script>
62
+
63
+ <script>
64
+ function toggle(id, type) {
65
+ if (type == 'source') {
66
+ document.getElementById(id + '_html').style.display = 'none';
67
+ } else {
68
+ document.getElementById(id + '_source').style.display = 'none';
69
+ }
70
+ var x = document.getElementById(id + '_' + type);
71
+ if (x.style.display === 'none') {
72
+ x.style.display = 'block';
73
+ } else {
74
+ x.style.display = 'none';
75
+ }
76
+ }
77
+ function process(str) {
78
+ var div = document.createElement('div');
79
+ div.innerHTML = str.trim();
80
+
81
+ return format(div, 0).innerHTML;
82
+ }
83
+
84
+ function format(node, level) {
85
+ var indentBefore = new Array(level++ + 1).join(' '),
86
+ indentAfter = new Array(level - 1).join(' '),
87
+ textNode;
88
+
89
+ for (var i = 0; i < node.children.length; i++) {
90
+ textNode = document.createTextNode('\n' + indentBefore);
91
+ node.insertBefore(textNode, node.children[i]);
92
+
93
+ format(node.children[i], level);
94
+
95
+ if (node.lastElementChild == node.children[i]) {
96
+ textNode = document.createTextNode('\n' + indentAfter);
97
+ node.appendChild(textNode);
98
+ }
99
+ }
100
+
101
+ return node;
102
+ }
103
+ var test = 'test';
104
+ var ReactDOM = Component.ReactDOM;
105
+ var React = Component.React;
106
+ var renderToStaticMarkup = Component.renderToStaticMarkup;
107
+
108
+ // class RenderComponent extends React.Component {
109
+ // constructor(props) {
110
+ // super(props);
111
+ // }
112
+ // render() {
113
+ // var { Components } = this.props;
114
+ //
115
+ // return (
116
+ // <div>
117
+ // {Object.keys(Components).map(ComponentName => {
118
+ // if (
119
+ // ComponentName == 'React' ||
120
+ // ComponentName == 'ReactDOM' ||
121
+ // ComponentName.indexOf('__') == -1
122
+ // ) {
123
+ // return 'test';
124
+ // }
125
+ //
126
+ // var Component = Components[ComponentName];
127
+ // console.dir(Component);
128
+ //
129
+ // return (
130
+ // <div>
131
+ // <div><Component /></div>
132
+ // <div>{ComponentName}</div>
133
+ // </div>
134
+ // );
135
+ // })}
136
+ // </div>
137
+ // );
138
+ // }
139
+ // }
140
+
141
+ var baseComponent = {};
142
+ var baseComponentState = {};
143
+ Object.keys(Component).forEach(c => {
144
+ var componentObj = Component[c];
145
+ if (c.indexOf('__') != -1) {
146
+ if (baseComponentState[c.split('__')[0]]) {
147
+ baseComponentState[c.split('__')[0]].push(c);
148
+ } else {
149
+ baseComponentState[c.split('__')[0]] = [c];
150
+ }
151
+ } else if (
152
+ componentObj.docs &&
153
+ componentObj.docs.external &&
154
+ (componentObj.docs.componentGroup == 'Atom' ||
155
+ componentObj.docs.componentGroup == 'Molecule' ||
156
+ componentObj.docs.componentGroup == 'Organism')
157
+ ) {
158
+ baseComponent[c] = componentObj;
159
+ }
160
+ });
161
+ console.log(baseComponent);
162
+ console.log(baseComponentState);
163
+ var str = Object.keys(baseComponent)
164
+ .sort()
165
+ .reduce((result, componentKey) => {
166
+ return `${result}<li><a href="#${componentKey}" class="menuItem">${componentKey}</a></li>`;
167
+ }, '');
168
+
169
+ var getComponentState = componentKey => {
170
+ var result = '';
171
+ baseComponentState[componentKey].forEach(ckey => {
172
+ result += `<div><span onClick="toggle('${ckey}','source')" class="source">Source</span><span onClick="toggle('${ckey}',
173
+ 'html')" class="html">html</span><pre id="${ckey +
174
+ '_source'}" style="display:none"></pre><pre id="${ckey +
175
+ '_html'}" style="display:none"></pre><div id="${ckey}"></div></div>`;
176
+ setTimeout(() => {
177
+ ReactDOM.render(
178
+ React.createElement(Component[ckey]),
179
+ document.getElementById(ckey)
180
+ );
181
+ document.getElementById(ckey + '_source').innerText =
182
+ Component[ckey].docs.source;
183
+ document.getElementById(ckey + '_html').innerText = process(
184
+ renderToStaticMarkup(React.createElement(Component[ckey]))
185
+ );
186
+ }, 100);
187
+ });
188
+ return result;
189
+ };
190
+ var componentInfo = Object.keys(baseComponent)
191
+ .sort()
192
+ .reduce((result, componentKey) => {
193
+ return `${result}<div id="${componentKey}" class="component">
194
+ <h1>${componentKey}</h1>
195
+ <p>
196
+ ${baseComponent[componentKey].docs.description || 'No description'}
197
+ </p>
198
+ <h4>PropTypes</h4>
199
+ <table class="table table-striped">
200
+ <tr><th>PropsName</th><th>type</th><th>isRequired</th></th>
201
+ ${Object.keys(baseComponent[componentKey].propTypes).sort()
202
+ .map(pKey => {
203
+ var pObj = baseComponent[componentKey].propTypes[pKey];
204
+ return `<tr>
205
+ <td>
206
+ ${pKey}
207
+ </td>
208
+
209
+ <td>
210
+
211
+ ${pObj.hookType}
212
+
213
+ </td><td>
214
+
215
+ ${pObj.isRequired ? '' : 'true'}
216
+
217
+ </td></tr>`;
218
+ })
219
+ .join('')}
220
+ </table>
221
+ <h4>State</h4>
222
+ ${getComponentState(componentKey)}
223
+ ${baseComponent[componentKey].docs.additionDescription ? `<h4>More Information about component</h4><p>${baseComponent[componentKey].docs.additionDescription}</p>`:""}
224
+
225
+ </div>`;
226
+ }, '');
227
+
228
+ document.getElementById('componentMenu').innerHTML = str;
229
+ document.getElementById('componentInfo').innerHTML = componentInfo;
230
+ // var html = Object.keys(Component).reduce((res, cName) => {
231
+ // return `${res} <div><div id="${cName}"></div><div>${cName}</div></div>`;
232
+ // });
233
+ // document.getElementById('react').innerHTML = html;
234
+ // Object.keys(Component).forEach(cName => {
235
+ // if (cName == 'React' || cName == 'ReactDOM') {
236
+ // return;
237
+ // }
238
+ // var C = Component[cName];
239
+ // try {
240
+ // ReactDOM.render(<C />, document.getElementById(cName));
241
+ // } catch (e) {
242
+ // console.log('Error render', cName);
243
+ // }
244
+ // });
245
+ </script>
246
+
247
+
248
+ </body>
249
+ </html>