@zohodesk/react-cli 1.1.19-exp.15 → 1.1.19-exp.16
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.
package/docs/ReactLive.md
CHANGED
@@ -11,4 +11,8 @@
|
|
11
11
|
|
12
12
|
# v1.1.2 update:
|
13
13
|
|
14
|
-
* ReactLiveConverter filepath changed to 'reactLiveConverter.js' in docLoader file
|
14
|
+
* ReactLiveConverter filepath changed to 'reactLiveConverter.js' in docLoader file
|
15
|
+
|
16
|
+
# v1.1.20 update:
|
17
|
+
|
18
|
+
* enhancedReactLiveConverter.js added and imported in docLoader file
|
@@ -6,7 +6,7 @@ var _getOptions = _interopRequireDefault(require("../utils/getOptions.js"));
|
|
6
6
|
|
7
7
|
var _path = _interopRequireDefault(require("path"));
|
8
8
|
|
9
|
-
var
|
9
|
+
var _enhancedReactLiveConverter = require("./enhancedReactLiveConverter.js");
|
10
10
|
|
11
11
|
var _markdownLoader = require("./markdownLoader.js");
|
12
12
|
|
@@ -27,7 +27,7 @@ module.exports = function (source) {
|
|
27
27
|
const src = _fs.default.readFileSync(originalFilePath).toString();
|
28
28
|
|
29
29
|
options.docs.enableMDParser && (source = (0, _markdownLoader.markdownParser)(source));
|
30
|
-
options.docs.enableReactLive && (source = (0,
|
30
|
+
options.docs.enableReactLive && (source = (0, _enhancedReactLiveConverter.enhancedReactLiveConverter)(source, originalFilePath)); //to Enable the ReactLive Converter
|
31
31
|
|
32
32
|
return `${source};${name}.source=${JSON.stringify(src)};${name}.filePath=${JSON.stringify(filePath)}`;
|
33
33
|
};
|
@@ -0,0 +1,151 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.enhancedReactLiveConverter = enhancedReactLiveConverter;
|
7
|
+
|
8
|
+
const parser = require('@babel/parser');
|
9
|
+
|
10
|
+
const traverse = require('@babel/traverse').default;
|
11
|
+
|
12
|
+
const t = require("@babel/types");
|
13
|
+
|
14
|
+
const path = require('path');
|
15
|
+
|
16
|
+
function getFilename(originalFilePath) {
|
17
|
+
const [fileName] = path.basename(originalFilePath).split('.');
|
18
|
+
return fileName;
|
19
|
+
}
|
20
|
+
|
21
|
+
function convertKeyToValue(object = {}) {
|
22
|
+
let keys = Object.keys(object);
|
23
|
+
let values = Object.values(object);
|
24
|
+
return keys.reduce((value, item, i) => {
|
25
|
+
if (item.includes(',')) {
|
26
|
+
item = item.replace(/{|}/g, "");
|
27
|
+
item = '{ ' + item + ' }';
|
28
|
+
}
|
29
|
+
|
30
|
+
value = value + "'" + values[i] + "'" + ": " + item + ",";
|
31
|
+
return value;
|
32
|
+
}, '');
|
33
|
+
}
|
34
|
+
|
35
|
+
function mergeDuplicateValues(obj) {
|
36
|
+
let mergedObj = {};
|
37
|
+
|
38
|
+
for (let key in obj) {
|
39
|
+
if (obj.hasOwnProperty(key)) {
|
40
|
+
let value = obj[key];
|
41
|
+
let existingKey = Object.keys(mergedObj).find(k => mergedObj[k] === value);
|
42
|
+
|
43
|
+
if (existingKey) {
|
44
|
+
mergedObj[existingKey + ' , ' + key] = value;
|
45
|
+
delete mergedObj[existingKey];
|
46
|
+
} else {
|
47
|
+
mergedObj[key] = value;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
return mergedObj;
|
53
|
+
}
|
54
|
+
|
55
|
+
function enhancedReactLiveConverter(source, originalFilePath) {
|
56
|
+
const fileName = getFilename(originalFilePath);
|
57
|
+
|
58
|
+
if (!source) {
|
59
|
+
return '';
|
60
|
+
}
|
61
|
+
|
62
|
+
let docCode = '';
|
63
|
+
const fileContent = source.replace(/[\s\r\n]*$/, '');
|
64
|
+
const ast = parser.parse(fileContent, {
|
65
|
+
sourceType: 'module',
|
66
|
+
plugins: ['jsx', 'classProperties']
|
67
|
+
});
|
68
|
+
|
69
|
+
function createImportStatements(input) {
|
70
|
+
let output = '';
|
71
|
+
|
72
|
+
for (const key in input) {
|
73
|
+
if (input.hasOwnProperty(key) && key !== 'React') {
|
74
|
+
output += `import ${key} from '${input[key]}';\n`;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
return output;
|
79
|
+
}
|
80
|
+
|
81
|
+
const importBlock = {};
|
82
|
+
const printableCode = {};
|
83
|
+
let remainingBlock = ''; // Traverse the AST and find the import and export blocks
|
84
|
+
|
85
|
+
let remainingCode = ast.program.body.filter(node => node.type !== 'ImportDeclaration').filter(node => node.type !== 'ExpressionStatement').map(node => fileContent.substring(node.start, node.end)).join('').trim();
|
86
|
+
traverse(ast, {
|
87
|
+
ImportDeclaration(path) {
|
88
|
+
path.node.specifiers.map(specifier => {
|
89
|
+
if (t.isImportSpecifier(specifier)) {
|
90
|
+
importBlock[`{ ${specifier.local.name} }`] = path.node.source.value;
|
91
|
+
printableCode[`{ ${specifier.local.name} }`] = path.node.source.value;
|
92
|
+
return `{'${specifier.imported.name}': ${specifier.local.name}}`;
|
93
|
+
} else if (t.isImportDefaultSpecifier(specifier)) {
|
94
|
+
importBlock[`${specifier.local.name}`] = `${path.node.source.value}`;
|
95
|
+
printableCode[`${specifier.local.name}`] = `${path.node.source.value} `;
|
96
|
+
return specifier.local.name;
|
97
|
+
}
|
98
|
+
}).join(", ");
|
99
|
+
},
|
100
|
+
|
101
|
+
ExpressionStatement(path) {
|
102
|
+
const expression = path.get('expression');
|
103
|
+
const expressionLeft = expression.get('left');
|
104
|
+
|
105
|
+
if (path.isExpressionStatement() && expression.isAssignmentExpression() && expressionLeft.isMemberExpression()) {
|
106
|
+
const docCheck = expressionLeft.toString();
|
107
|
+
|
108
|
+
if (docCheck === `${fileName}.docs`) {
|
109
|
+
docCode = expression.toString();
|
110
|
+
} else if (docCheck.includes(fileName)) {
|
111
|
+
const startIndex = path.node.start;
|
112
|
+
const endIndex = path.node.end;
|
113
|
+
remainingBlock += fileContent.slice(startIndex, endIndex);
|
114
|
+
}
|
115
|
+
}
|
116
|
+
}
|
117
|
+
|
118
|
+
});
|
119
|
+
remainingCode = remainingCode.replace(/__DOCS__/, true);
|
120
|
+
remainingCode = remainingCode.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
|
121
|
+
remainingBlock = remainingBlock.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
|
122
|
+
const addBractick = `\`
|
123
|
+
${createImportStatements(printableCode)}
|
124
|
+
${remainingCode}
|
125
|
+
|
126
|
+
${remainingBlock}\`
|
127
|
+
`;
|
128
|
+
const template = `
|
129
|
+
|
130
|
+
${createImportStatements(importBlock)}
|
131
|
+
|
132
|
+
import { LiveProviderv3, LiveEditorv3, LiveErrorv3, LivePreviewv3, Wrapper, EditorWrapper , ErrorWrapper, PreviewWrapper } from '@zohodesk-private/react-live/es/index'
|
133
|
+
|
134
|
+
export default class ${fileName} extends React.Component{
|
135
|
+
render(){
|
136
|
+
return(
|
137
|
+
<LiveProviderv3 needToolBox scope={{import: {${convertKeyToValue(mergeDuplicateValues(printableCode))}}}} code={${addBractick}}>
|
138
|
+
<Wrapper>
|
139
|
+
<EditorWrapper><LiveEditorv3 /></EditorWrapper>
|
140
|
+
<PreviewWrapper><LivePreviewv3 /></PreviewWrapper>
|
141
|
+
<LiveErrorv3 needStyle />
|
142
|
+
</Wrapper>
|
143
|
+
</LiveProviderv3>
|
144
|
+
)
|
145
|
+
}
|
146
|
+
}
|
147
|
+
|
148
|
+
${docCode}
|
149
|
+
`;
|
150
|
+
return template;
|
151
|
+
}
|
@@ -237,7 +237,7 @@ const getProdPlugins = (options, publicPath = '') => {
|
|
237
237
|
if (bundleAnalyze) {
|
238
238
|
pluginsArr.push(new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
|
239
239
|
analyzerMode: 'static',
|
240
|
-
generateStatsFile:
|
240
|
+
generateStatsFile: false,
|
241
241
|
openAnalyzer: false,
|
242
242
|
statsOptions: enableStats ? null : {
|
243
243
|
source: false,
|
@@ -228,10 +228,7 @@ class I18nDownlodLogic {
|
|
228
228
|
if(dataSrc === srcPath || dataSrc === fullsrcPath){ return resolve();}
|
229
229
|
}
|
230
230
|
var scriptTag = document.createElement("script");
|
231
|
-
scriptTag.onload =
|
232
|
-
resolve();
|
233
|
-
scriptTag.onerror = scriptTag.onload = null;
|
234
|
-
};
|
231
|
+
scriptTag.onload = resolve;
|
235
232
|
scriptTag.onerror = function(event) {
|
236
233
|
var request = event && event.target && event.target.src || fullsrcPath;
|
237
234
|
var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + request + ")");
|
@@ -240,7 +237,6 @@ class I18nDownlodLogic {
|
|
240
237
|
delete installedI18nChunks[chunkId];
|
241
238
|
scriptTag.parentNode.removeChild(scriptTag);
|
242
239
|
reject(err);
|
243
|
-
scriptTag.onerror = scriptTag.onload = null;
|
244
240
|
};
|
245
241
|
${mainTemplate.requireFn}.nc && scriptTag.setAttribute("nonce", ${mainTemplate.requireFn}.nc);
|
246
242
|
scriptTag.src = fullsrcPath;
|