@zohodesk/react-cli 1.0.3-beta.1 → 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 (138) 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 -1189
  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/configs/webpack.css.umd.config.js +4 -4
  22. package/lib/configs/webpack.dev.config.js +6 -0
  23. package/lib/configs/webpack.docs.config.js +4 -0
  24. package/lib/configs/webpack.impact.config.js +4 -0
  25. package/lib/configs/webpack.prod.config.js +6 -0
  26. package/lib/loaderUtils/configsAssetsLoaders.js +33 -33
  27. package/lib/loaderUtils/getCSSLoaders.js +80 -46
  28. package/lib/loaderUtils/tests/windowsModification.test.js +10 -0
  29. package/lib/loaderUtils/windowsModification.js +6 -1
  30. package/lib/loaders/composeLoader.js +172 -0
  31. package/lib/loaders/workerLoader.js +9 -9
  32. package/lib/pluginUtils/getDevPlugins.js +18 -8
  33. package/lib/pluginUtils/getProdPlugins.js +16 -8
  34. package/lib/pluginUtils/getUMDCSSPlugins.js +1 -1
  35. package/lib/pluginUtils/getUMDComponentPlugins.js +1 -1
  36. package/lib/plugins/CustomAttributePlugin.md +35 -35
  37. package/lib/plugins/EFCPlugin.md +6 -6
  38. package/lib/plugins/I18NInjectIntoIndexPlugin.js +4 -4
  39. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +38 -38
  40. package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +30 -30
  41. package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +8 -8
  42. package/lib/plugins/I18nSplitPlugin/I18nSplit.md +95 -95
  43. package/lib/plugins/I18nSplitPlugin/README.md +25 -25
  44. package/lib/plugins/I18nSplitPlugin/index.js +57 -57
  45. package/lib/plugins/{UglifyCSSPlugin.js → MinifyPlugin.js} +3 -3
  46. package/lib/plugins/ResourceHintsPlugin.js +17 -17
  47. package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +6 -6
  48. package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -30
  49. package/lib/plugins/SelectorPlugin.js +64 -40
  50. package/lib/plugins/ServiceWorkerPlugin.js +9 -9
  51. package/lib/plugins/TPHashMappingPlugin.js +4 -4
  52. package/lib/plugins/VariableConversionCollector.js +94 -84
  53. package/lib/plugins/index.js +7 -7
  54. package/lib/plugins/utils/classHandling.js +20 -0
  55. package/lib/plugins/utils/fileHandling.js +107 -0
  56. package/lib/plugins/utils/tests/fileHandling.test.js +30 -0
  57. package/lib/postcss-plugins/EmptyPlugin.js +8 -0
  58. package/lib/postcss-plugins/ExcludePlugin.js +1 -1
  59. package/lib/postcss-plugins/RTLSplitPlugin.js +10 -10
  60. package/lib/postcss-plugins/ValueReplacer.js +5 -14
  61. package/lib/postcss-plugins/__test__/test1Input.css +38 -38
  62. package/lib/postcss-plugins/__test__/test1Output.css +38 -38
  63. package/lib/postcss-plugins/hoverActivePlugin.js +3 -3
  64. package/lib/postcss-plugins/variableModificationPlugin/index.js +1 -19
  65. package/lib/schemas/index.js +31 -3
  66. package/lib/servers/server.js +2 -2
  67. package/lib/sh/pre-commit.sh +34 -34
  68. package/lib/sh/reportPublish.sh +45 -45
  69. package/lib/utils/buildstats.html +148 -148
  70. package/lib/utils/cssClassNameGenerate.js +40 -13
  71. package/lib/utils/getOptions.js +9 -0
  72. package/lib/utils/resultSchema.json +73 -73
  73. package/lib/utils/variableConvertor.js +159 -0
  74. package/npm8.md +9 -9
  75. package/{npm-shrinkwrap.json → package-lock.json} +14412 -14407
  76. package/package.json +121 -121
  77. package/postpublish.js +8 -8
  78. package/templates/app/.eslintrc.js +140 -140
  79. package/templates/app/README.md +12 -12
  80. package/templates/app/app/index.html +24 -24
  81. package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
  82. package/templates/app/app/properties/i18nkeys.json +3 -3
  83. package/templates/app/docs/all.html +69 -69
  84. package/templates/app/mockapi/index.js +18 -18
  85. package/templates/app/package.json +37 -37
  86. package/templates/app/src/actions/SampleActions/index.js +37 -37
  87. package/templates/app/src/actions/index.js +65 -65
  88. package/templates/app/src/appUrls.js +19 -19
  89. package/templates/app/src/components/Alert/Alert.js +134 -134
  90. package/templates/app/src/components/Alert/Alert.module.css +79 -79
  91. package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -37
  92. package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -84
  93. package/templates/app/src/components/Sample/Sample.module.css +11 -11
  94. package/templates/app/src/components/Sample/SampleList.js +61 -61
  95. package/templates/app/src/components/Slider/Slider.css +41 -41
  96. package/templates/app/src/components/Slider/Slider.js +55 -55
  97. package/templates/app/src/containers/AlertContainer/index.js +15 -15
  98. package/templates/app/src/containers/AppContainer/index.js +96 -96
  99. package/templates/app/src/containers/AppContainer/index.module.css +27 -27
  100. package/templates/app/src/containers/CustomMatch/index.js +65 -65
  101. package/templates/app/src/containers/DevTools/index.js +10 -10
  102. package/templates/app/src/containers/Header/index.js +67 -67
  103. package/templates/app/src/containers/Header/index.module.css +43 -43
  104. package/templates/app/src/containers/Redirect/index.js +63 -63
  105. package/templates/app/src/containers/Redirector/index.js +47 -47
  106. package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -42
  107. package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -3
  108. package/templates/app/src/historyChange.js +5 -5
  109. package/templates/app/src/index.html +10 -10
  110. package/templates/app/src/index.js +24 -24
  111. package/templates/app/src/middleware/PromiseMiddleware.js +59 -59
  112. package/templates/app/src/reducers/alertData.js +11 -11
  113. package/templates/app/src/reducers/index.js +6 -6
  114. package/templates/app/src/reducers/samples.js +19 -19
  115. package/templates/app/src/store/configureStore.dev.js +51 -51
  116. package/templates/app/src/store/configureStore.js +5 -5
  117. package/templates/app/src/store/configureStore.prod.js +26 -26
  118. package/templates/app/src/util/Common.js +5 -5
  119. package/templates/app/src/util/RequestAPI.js +132 -132
  120. package/templates/docs/all.html +249 -249
  121. package/templates/docs/component.html +178 -178
  122. package/templates/docs/components.html +221 -221
  123. package/templates/docs/css/b.min.css +6 -6
  124. package/templates/docs/css/component.css +42 -42
  125. package/templates/docs/css/componentTest.css +6 -6
  126. package/templates/docs/css/hopscotch.css +585 -585
  127. package/templates/docs/css/style.css +1022 -1022
  128. package/templates/docs/impactReportTemplate.html +154 -154
  129. package/templates/docs/index.html +1501 -1501
  130. package/templates/docs/js/active-line.js +72 -72
  131. package/templates/docs/js/b.min.js +7 -7
  132. package/templates/docs/js/codemirror.js +9680 -9680
  133. package/templates/docs/js/designTokens.js +334 -334
  134. package/templates/docs/js/j.min.js +4 -4
  135. package/templates/docs/js/javascript.js +874 -874
  136. package/templates/docs/js/matchbrackets.js +145 -145
  137. package/lib/plugins/composeCommonPlugin.js +0 -30
  138. package/lib/postcss-plugins/variableModifier.js +0 -210
package/templates/docs/component.html CHANGED
@@ -1,178 +1,178 @@
1
- <!DOCTYPE html>
2
- <html class="isRem" dir="ltr">
3
- <head>
4
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <link rel="stylesheet" href="./css/component.css" />
7
- <link rel="stylesheet" href="/docs/css/main.css" />
8
- </head>
9
- <body>
10
- <div id="react" class="appContainer"></div>
11
- <div id="reactUserEdit"></div>
12
- <script src="/docs/js/vendor.js" defer="true"></script>
13
- <script src="/docs/js/main.js" defer="true"></script>
14
- <script src="/docs/js/babel.min.js"></script>
15
- <script type="text/babel">
16
- var test = 'test';
17
- var ReactDOM = Component.ReactDOM;
18
- var React = Component.React;
19
- var ReactDOMServer = Component.ReactDOMServer;
20
-
21
- class RenderComponent extends React.Component {
22
- constructor(props) {
23
- super(props);
24
- this.state = {
25
- Components: Component,
26
- isError:false,
27
- selectedComponent:location.hash != '' ? location.hash.substring(1) : null,
28
- componentList:window.componentList?window.componentList:Component
29
- };
30
- this.hashChange = this.hashChange.bind(this);
31
- }
32
- hashChange() {
33
- let parentFrameNode = parent.document.getElementById('loadingText');
34
- this.setState({
35
- selectedComponent:
36
- location.hash != '' ? location.hash.substring(1) : null
37
- },()=>{
38
- if(this.error) {
39
- location.reload();
40
- parentFrameNode? parentFrameNode.style.display = 'block':parentFrameNode.style.display='none';
41
- this.error = false;
42
- }
43
- });
44
- }
45
-
46
- componentDidMount() {
47
- window.addEventListener('hashchange', this.hashChange);
48
- let parentFrameNode = parent.document.getElementById('loadingText');
49
- if (parentFrameNode) parentFrameNode.style.display = 'none';
50
- }
51
-
52
- componentWillUnmount() {
53
- window.removeEventListener('hashchange', this.hashChange);
54
- }
55
-
56
- componentDidCatch(){
57
- this.error = true;
58
- this.setState({isError:this.error})
59
- }
60
- render() {
61
- const { Components, selectedComponent,componentList} = this.state;
62
- // var CLG=[]
63
- // var complistGroup=Object.keys(componentList).map((item,i)=>{
64
- // if(Array.isArray(componentList[item].docs.testProps)){
65
- // CLG.push(item)
66
- // }
67
- // })
68
-
69
- let msg=componentList[selectedComponent]?'Sorry! for the inconvenience.':'Sorry! Request URL not found.'
70
- var ComponentClass =
71
- selectedComponent && componentList[selectedComponent];
72
- var keysSingleAr =
73
- (ComponentClass &&
74
- ComponentClass.docs &&
75
- ComponentClass.docs.testProps &&
76
- Object.keys(ComponentClass.docs.testProps)) || [];
77
- var ErrorMessage=(
78
- <div className={'emptyState'}>
79
- <svg
80
- x='0px'
81
- y='0px'
82
- viewBox='0 0 512 512'
83
- style={{ enableBackground: 'new 0 0 512 512' }}
84
- xmlSpace='preserve'
85
- className={'smileIcon'}
86
- >
87
- <path
88
- style={{ fill: '#f00' }}
89
- d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
90
- c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
91
- L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
92
- C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
93
- C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
94
- S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
95
- S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
96
- S326.327,212.122,344,212.122z'
97
- />
98
- </svg>
99
- <div>{msg}</div>
100
- </div>
101
- )
102
- let renderElement = (
103
- <React.Fragment>
104
- {
105
- this.state.isError || componentList[selectedComponent] ? (
106
- <ComponentClass {...ComponentClass.docs.testProps} />
107
- ) : ( ErrorMessage )
108
- }
109
- </React.Fragment>
110
- );
111
-
112
- return <div className='root'>{componentList._provider ? (
113
- <componentList._provider>
114
- {this.state.isError?ErrorMessage:renderElement}
115
- </componentList._provider>
116
- ) : (
117
- this.state.isError?ErrorMessage:renderElement
118
- )}</div>;
119
- }
120
- }
121
- var compList;
122
- var componentList= {};
123
- var compGroupObj=function(comp,key,compGroup){
124
- if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
125
- return;
126
- }
127
- if(comp=='default'){
128
- componentList[key]=compGroup[comp]
129
- return componentList
130
- }
131
- else{
132
- componentList[comp]=compGroup[comp]
133
- return componentList
134
- }
135
- }
136
- Promise.all(Object.keys(Component).map((key) => {
137
-
138
- let componentKey=Component[key];
139
- if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
140
- return;
141
- }
142
- if(key == '_provider'){
143
- return compGroupObj(key,null,Component)
144
- }
145
- try{
146
- return(
147
- componentKey && componentKey.then((res)=>{
148
- Object.keys(res).forEach((comp)=>{
149
- let compGroup=res[comp];
150
- Object.keys(compGroup).forEach((comps)=>{
151
- compList=compGroupObj(comps,key,compGroup)
152
- return compList
153
- })
154
- })
155
- })
156
- )
157
- }
158
- catch(error){
159
- return Component
160
- }
161
- })).then(()=>{
162
- Object.keys(componentList).length>1?window.componentList=componentList:window.componentList=Component
163
- ReactDOM.render(<RenderComponent />, react);
164
- })
165
- </script>
166
- <script type="text/javascript">
167
- var err = null;
168
- var comName = '';
169
- var findErr = (window.onerror = function(e, line) {
170
- err = e;
171
- comName = window.location.hash.substr(1);
172
- });
173
- var funct = function() {
174
- return { error: err, name: comName };
175
- };
176
- </script>
177
- </body>
178
- </html>
1
+ <!DOCTYPE html>
2
+ <html class="isRem" dir="ltr">
3
+ <head>
4
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link rel="stylesheet" href="./css/component.css" />
7
+ <link rel="stylesheet" href="/docs/css/main.css" />
8
+ </head>
9
+ <body>
10
+ <div id="react" class="appContainer"></div>
11
+ <div id="reactUserEdit"></div>
12
+ <script src="/docs/js/vendor.js" defer="true"></script>
13
+ <script src="/docs/js/main.js" defer="true"></script>
14
+ <script src="/docs/js/babel.min.js"></script>
15
+ <script type="text/babel">
16
+ var test = 'test';
17
+ var ReactDOM = Component.ReactDOM;
18
+ var React = Component.React;
19
+ var ReactDOMServer = Component.ReactDOMServer;
20
+
21
+ class RenderComponent extends React.Component {
22
+ constructor(props) {
23
+ super(props);
24
+ this.state = {
25
+ Components: Component,
26
+ isError:false,
27
+ selectedComponent:location.hash != '' ? location.hash.substring(1) : null,
28
+ componentList:window.componentList?window.componentList:Component
29
+ };
30
+ this.hashChange = this.hashChange.bind(this);
31
+ }
32
+ hashChange() {
33
+ let parentFrameNode = parent.document.getElementById('loadingText');
34
+ this.setState({
35
+ selectedComponent:
36
+ location.hash != '' ? location.hash.substring(1) : null
37
+ },()=>{
38
+ if(this.error) {
39
+ location.reload();
40
+ parentFrameNode? parentFrameNode.style.display = 'block':parentFrameNode.style.display='none';
41
+ this.error = false;
42
+ }
43
+ });
44
+ }
45
+
46
+ componentDidMount() {
47
+ window.addEventListener('hashchange', this.hashChange);
48
+ let parentFrameNode = parent.document.getElementById('loadingText');
49
+ if (parentFrameNode) parentFrameNode.style.display = 'none';
50
+ }
51
+
52
+ componentWillUnmount() {
53
+ window.removeEventListener('hashchange', this.hashChange);
54
+ }
55
+
56
+ componentDidCatch(){
57
+ this.error = true;
58
+ this.setState({isError:this.error})
59
+ }
60
+ render() {
61
+ const { Components, selectedComponent,componentList} = this.state;
62
+ // var CLG=[]
63
+ // var complistGroup=Object.keys(componentList).map((item,i)=>{
64
+ // if(Array.isArray(componentList[item].docs.testProps)){
65
+ // CLG.push(item)
66
+ // }
67
+ // })
68
+
69
+ let msg=componentList[selectedComponent]?'Sorry! for the inconvenience.':'Sorry! Request URL not found.'
70
+ var ComponentClass =
71
+ selectedComponent && componentList[selectedComponent];
72
+ var keysSingleAr =
73
+ (ComponentClass &&
74
+ ComponentClass.docs &&
75
+ ComponentClass.docs.testProps &&
76
+ Object.keys(ComponentClass.docs.testProps)) || [];
77
+ var ErrorMessage=(
78
+ <div className={'emptyState'}>
79
+ <svg
80
+ x='0px'
81
+ y='0px'
82
+ viewBox='0 0 512 512'
83
+ style={{ enableBackground: 'new 0 0 512 512' }}
84
+ xmlSpace='preserve'
85
+ className={'smileIcon'}
86
+ >
87
+ <path
88
+ style={{ fill: '#f00' }}
89
+ d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
90
+ c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
91
+ L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
92
+ C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
93
+ C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
94
+ S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
95
+ S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
96
+ S326.327,212.122,344,212.122z'
97
+ />
98
+ </svg>
99
+ <div>{msg}</div>
100
+ </div>
101
+ )
102
+ let renderElement = (
103
+ <React.Fragment>
104
+ {
105
+ this.state.isError || componentList[selectedComponent] ? (
106
+ <ComponentClass {...ComponentClass.docs.testProps} />
107
+ ) : ( ErrorMessage )
108
+ }
109
+ </React.Fragment>
110
+ );
111
+
112
+ return <div className='root'>{componentList._provider ? (
113
+ <componentList._provider>
114
+ {this.state.isError?ErrorMessage:renderElement}
115
+ </componentList._provider>
116
+ ) : (
117
+ this.state.isError?ErrorMessage:renderElement
118
+ )}</div>;
119
+ }
120
+ }
121
+ var compList;
122
+ var componentList= {};
123
+ var compGroupObj=function(comp,key,compGroup){
124
+ if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
125
+ return;
126
+ }
127
+ if(comp=='default'){
128
+ componentList[key]=compGroup[comp]
129
+ return componentList
130
+ }
131
+ else{
132
+ componentList[comp]=compGroup[comp]
133
+ return componentList
134
+ }
135
+ }
136
+ Promise.all(Object.keys(Component).map((key) => {
137
+
138
+ let componentKey=Component[key];
139
+ if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
140
+ return;
141
+ }
142
+ if(key == '_provider'){
143
+ return compGroupObj(key,null,Component)
144
+ }
145
+ try{
146
+ return(
147
+ componentKey && componentKey.then((res)=>{
148
+ Object.keys(res).forEach((comp)=>{
149
+ let compGroup=res[comp];
150
+ Object.keys(compGroup).forEach((comps)=>{
151
+ compList=compGroupObj(comps,key,compGroup)
152
+ return compList
153
+ })
154
+ })
155
+ })
156
+ )
157
+ }
158
+ catch(error){
159
+ return Component
160
+ }
161
+ })).then(()=>{
162
+ Object.keys(componentList).length>1?window.componentList=componentList:window.componentList=Component
163
+ ReactDOM.render(<RenderComponent />, react);
164
+ })
165
+ </script>
166
+ <script type="text/javascript">
167
+ var err = null;
168
+ var comName = '';
169
+ var findErr = (window.onerror = function(e, line) {
170
+ err = e;
171
+ comName = window.location.hash.substr(1);
172
+ });
173
+ var funct = function() {
174
+ return { error: err, name: comName };
175
+ };
176
+ </script>
177
+ </body>
178
+ </html>