Skip to content

Commit f65dfc9

Browse files
author
Alvin
committed
react code
1 parent 1310ac5 commit f65dfc9

24 files changed

+23887
-432
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5507
3+
}

‎index.html‎

Lines changed: 302 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,308 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="UTF-8" />
5-
<title>Hello React!</title>
6-
<!--<script src="./js/react.development.js"></script>-->
7-
<!--<script src="./js/react-dom.development.js"></script>-->
8-
<!--<script src="./js/babel.min.js"></script>-->
9-
10-
<!--官方提供的 CDN 地址：-->
11-
<script src="./js/react.development.16.8.6.js"></script>
12-
<script src="./js/react-dom.development.16.8.6.js"></script>
13-
<!--
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>Hello React!</title>
7+
<!--<script src="./js/react.development.js"></script>-->
8+
<!--<script src="./js/react-dom.development.js"></script>-->
9+
<!--<script src="./js/babel.min.js"></script>-->
10+
11+
<!--官方提供的 CDN 地址：-->
12+
<script src="./js/react.development.16.8.6.js"></script>
13+
<script src="./js/react-dom.development.16.8.6.js"></script>
14+
15+
<!--
1416
babel 地址 https://cdnjs.com/libraries/babel-core babel.js与browser.js的关系
1517
babel的浏览器版本为browser.js（未精简）和browser.min.js（已精简）
1618
-->
17-
<script src="./js/browser.5.8.38.js"></script>
18-
</head>
19-
<body>
20-
<div id="example"></div>
21-
<script type="text/babel" src="./js/01/01_01.js"></script>
22-
23-
24-
25-
<script type="text/babel">
26-
// function HelloMessage(props) {
27-
// return <h1>Hello World123!</h1>;
28-
// }
29-
//
30-
// const element = <HelloMessage />;
31-
//
32-
// ReactDOM.render(
33-
// element,
34-
// document.getElementById('example')
35-
// );
36-
37-
// ReactDOM.render(
38-
// <h1>Hello, world!</h1>,
39-
// document.getElementById("example")
40-
// );
41-
</script>
42-
<script>
43-
44-
var format='a b c d % %s';
45-
var args = [1, 2, 3, 4, 5, 6];
46-
var argIndex = 0;
47-
error = new Error(format.replace(/%s/g, function () {
48-
console.log('args',args)
49-
return args[argIndex++];
50-
}));
51-
console.log('error',error)
52-
error.name = 'Invariant Violation';
53-
</script>
54-
</body>
19+
<script src="./js/browser-polyfill.5.8.38.js"></script>
20+
<script src="./js/browser.5.8.38.js"></script>
21+
<script type="text/babel" src="./js/03_state/03_02.js"></script>
22+
</head>
23+
<style>
24+
*{
25+
margin: 0;
26+
padding: 0;
27+
}
28+
#text {
29+
/* width: 500px; */
30+
/* height: 300px; */
31+
}
32+
.left-box{
33+
float: left;
34+
width: 45%;
35+
}
36+
.right-box{
37+
float: right;
38+
width: 45%;
39+
height: 700px;
40+
/* background: red; */
41+
}
42+
textarea{
43+
width: 100%;
44+
height: 400px;
45+
}
46+
p{
47+
margin: 20px;
48+
}
49+
button{
50+
width:80px;
51+
padding: 10px;
52+
}
53+
</style>
54+
55+
<body>
56+
<div class="box">
57+
<div class='left-box'>
58+
<p>代码编辑窗口</p>
59+
<textarea id='text'></textarea>
60+
<button id='but'>
61+
执行Code
62+
</button>
63+
<div id='parser'>
64+
65+
</div>
66+
</div>
67+
<div class='right-box'>
68+
<div>
69+
<p>标准组件demo代码</p>
70+
<textarea>
71+
const H=()=>{
72+
return (<h1> 这 个 是 标 题 1</h1>)
73+
}
74+
75+
class Clock extends React.Component {
76+
constructor (props) {
77+
super(props);
78+
this.state = { date:"2019-1-1", count: 10 };
79+
}
80+
addCount() {
81+
const { count } = this.state;
82+
this.setState({
83+
count: count + 1,
84+
})
85+
}
86+
render() {
87+
const { date, count } = this.state;
88+
return (
89+
<div>
90+
<h1>Hello, world!</h1>
91+
<H/>
92+
<h2>现在是 {date}</h2>
93+
<button onClick={() => this.addCount()}>add1 count</button>
94+
<button onClick={this.addCount.bind(this)}>add2 count</button>
95+
<h2>count {count}</h2>
96+
</div>
97+
);
98+
}
99+
}
100+
export default Clock;
101+
</textarea>
102+
<p>模板组件 demo 代码</p>
103+
<textarea>
104+
render(date,count) {
105+
return (
106+
<div>
107+
<h1>Hello, world!</h1>
108+
<h2>现在是 {date}</h2>
109+
<h2>count {count}</h2>
110+
</div>
111+
);
112+
}
113+
</textarea>
114+
</div>
115+
</div>
116+
</div>
117+
<script type="text/babel">
118+
119+
var text = document.getElementById('text')
120+
var but = document.getElementById('but')
121+
122+
123+
var Tool = {
124+
noop: () => { },
125+
//把字符串 转成真正的js 并且以一个函数形式导出去
126+
createFunction: (code, errors = []) => {
127+
try {
128+
return new Function(code).bind(this)
129+
} catch (err) {
130+
console.log('err', err)
131+
errors.push({ err: err, code: code });
132+
return noop
133+
}
134+
},
135+
136+
getExportDefaulComponentName: (code = '') => {
137+
const exportDefaultComponentNameReg = /export\s+default\s+[a-zA-Z]+/g;
138+
const exportDefault = /export\s+default\s+/g;
139+
let exportDefaultComponentName = code.match(exportDefaultComponentNameReg);
140+
if (exportDefaultComponentName && exportDefaultComponentName.length === 1) {
141+
exportDefaultComponentName = exportDefaultComponentName[0].replace(exportDefault, '')
142+
console.log('exportDefaultComponentName', exportDefaultComponentName)
143+
return {
144+
exportDefaultComponentName,
145+
code: code.replace(exportDefaultComponentNameReg, '')
146+
}
147+
} else if (exportDefaultComponentName && exportDefaultComponentName.length >= 1) {
148+
console.log('\x1B[31m%s\x1B[0m', 'This is export default Only one export is allowed')
149+
// throw ('This is export default Only one export is allowed');
150+
return {}
151+
} else {
152+
console.log('\x1B[31m%s\x1B[0m', 'It is an error not to export default Components')
153+
// throw ('It is an error not to export default Components');
154+
return {}
155+
}
156+
},
157+
158+
checkTemplate: ({
159+
code, tagId, data = {}
160+
}) => {
161+
const classComponentReg = /class\s+[a-zA-Z]+\s+extends\s+React.Component/g;
162+
const templateReg = /render\s*\(.*\)\s*{/g;
163+
const renderHeadCode = code.match(templateReg)
164+
if (classComponentReg.test(code)) {
165+
Tool.componentReactDOMJoin({ code, tagId, data });
166+
} else if (renderHeadCode && renderHeadCode.length >= 1) {
167+
Tool.templateReactDOMJoin({ code, tagId, data, renderHeadCode: renderHeadCode[0] });
168+
}
169+
},
170+
171+
172+
runScript: (newCode) => {
173+
transform.run(newCode)
174+
},
175+
176+
componentReactDOMJoin: ({
177+
code, tagId, data = {}
178+
}) => {
179+
// try {
180+
let { code: newCode = '', exportDefaultComponentName = '' } = Tool.getExportDefaulComponentName(code);
181+
if (!newCode || !exportDefaultComponentName) {
182+
return null;
183+
}
184+
newCode = newCode + '; ReactDOM.render(<' + exportDefaultComponentName + '/>,document.getElementById("' + tagId + '"))'
185+
Tool.runScript(newCode)
186+
return newCode;
187+
// }catch (err) {
188+
// console.log('\x1B[31m%s\x1B[0m', err)
189+
// }
190+
},
191+
192+
getRenderParameterName({
193+
code, tagId, data, renderHeadCode
194+
}) {
195+
const parameter = renderHeadCode.substring(renderHeadCode.indexOf("(") + 1, renderHeadCode.indexOf(")"))
196+
if (parameter.trim() === '') {
197+
console.log('\x1B[31m%s\x1B[0m', 'Please add Template render function parameter')
198+
return {};
199+
}
200+
return {
201+
parameter: parameter.split(','),
202+
code: code.replace(parameter, ''),
203+
renderHeadCode: renderHeadCode.replace(parameter, '')
204+
}
205+
},
206+
207+
checkStateKey: ({ parameter, data }) => {
208+
const errorInfo = [];
209+
const state = {};
210+
let stateStrKey = `{`
211+
parameter.map(key => {
212+
let flag = null;
213+
for (let _key in data) {
214+
if (_key.trim() === key.trim()) {
215+
flag = key;
216+
}
217+
}
218+
if (!flag) {
219+
console.log('\x1B[31m%s\x1B[0m', `error, The data is no ${key} parameter`)
220+
errorInfo.push(`error, The data is no ${key} parameter`)
221+
return false;
222+
}
223+
state[key.trim()] = data[key.trim()];
224+
stateStrKey += `${key},`
225+
})
226+
return errorInfo.length >= 1 ? {} : {
227+
stateStrKey: `${stateStrKey}}`,
228+
state
229+
};
230+
},
231+
232+
templateReact: ({
233+
code, tagId, data, renderHeadCode
234+
}) => {
235+
const { code: newCode, parameter, renderHeadCode: newRenderHeadCode } = Tool.getRenderParameterName({ code, tagId, data, renderHeadCode })
236+
if (!parameter) {
237+
return false;
238+
}
239+
let { state, stateStrKey } = Tool.checkStateKey({ parameter, data });
240+
if (!state) {
241+
return false;
242+
}
243+
state = JSON.stringify(state)
244+
const returnLastStr = newCode.trim().substring(newRenderHeadCode.trim().length);
245+
let renderStr = `
246+
render() {
247+
const ${stateStrKey} = this.state;
248+
${returnLastStr}
249+
`
250+
const template = `
251+
class App extends React.Component {
252+
constructor (props) {
253+
super(props);
254+
this.state = ${
255+
state
256+
}
257+
}
258+
259+
${renderStr}
260+
}
261+
export default App;
262+
`
263+
264+
Tool.componentReactDOMJoin({ code: template, tagId, data });
265+
},
266+
templateReactDOMJoin: ({
267+
code, tagId, data = {}, renderHeadCode
268+
}) => {
269+
Tool.templateReact({ code, tagId, data, renderHeadCode })
270+
},
271+
parseStyle:(code)=>{
272+
// const styleStartReg=//g;
273+
// const styleEndReg='<style';
274+
},
275+
reactComponentParser({
276+
code, tagId, data = {}
277+
}) {
278+
if (!code.trim()) {
279+
console.log('\x1B[31m%s\x1B[0m', 'Please enter the react code')
280+
return false;
281+
}
282+
if (!tagId.trim()) {
283+
console.log('\x1B[31m%s\x1B[0m', 'Please write tagId')
284+
return false;
285+
}
286+
// Tool.parseStyle(code);
287+
288+
Tool.checkTemplate({
289+
code, tagId, data
290+
});
291+
}
292+
293+
294+
}
295+
but.addEventListener('click', () => {
296+
Tool.reactComponentParser({
297+
code:text.value,
298+
// code: code2,
299+
tagId: 'parser',
300+
data: {
301+
date: new Date(),
302+
count: 100
303+
}
304+
});
305+
})
306+
</script>
307+
</body>
55308
</html>

0 commit comments

Comments
 (0)