Skip to content

Commit 4a331fb

Browse files
v5.1.1 fix: 修复 react 17 中报错问题 (#216) (#217) e98476c
1 parent afc1f8c commit 4a331fb

24 files changed

+156
-107
lines changed

asset-manifest.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
{
22
"files": {
3-
"main.css": "/react-code-preview/static/css/main.e71f653f.css",
4-
"main.js": "/react-code-preview/static/js/main.97005458.js",
3+
"main.css": "/react-code-preview/static/css/main.928e304a.css",
4+
"main.js": "/react-code-preview/static/js/main.b3da9c24.js",
55
"babel_vendors.js": "/react-code-preview/static/js/babel_vendors.138c72aa.js",
66
"prismjs-vendor.js": "/react-code-preview/static/js/prismjs-vendor.ab8bdba3.js",
77
"refractor-vendors.js": "/react-code-preview/static/js/refractor-vendors.b0bc1568.js",
88
"codemirror-vendors.js": "/react-code-preview/static/js/codemirror-vendors.6680f1b9.js",
99
"uiwjs-vendors.css": "/react-code-preview/static/css/uiwjs-vendors.cdc3cde3.css",
10-
"uiwjs-vendors.js": "/react-code-preview/static/js/uiwjs-vendors.1cc75997.js",
10+
"uiwjs-vendors.js": "/react-code-preview/static/js/uiwjs-vendors.0b859d9f.js",
1111
"react-vendors.js": "/react-code-preview/static/js/react-vendors.bdb0a0db.js",
1212
"static/js/585.d5e11025.js": "/react-code-preview/static/js/585.d5e11025.js",
1313
"index.html": "/react-code-preview/index.html",
14-
"main.e71f653f.css.map": "/react-code-preview/static/css/main.e71f653f.css.map",
15-
"main.97005458.js.map": "/react-code-preview/static/js/main.97005458.js.map",
14+
"main.928e304a.css.map": "/react-code-preview/static/css/main.928e304a.css.map",
15+
"main.b3da9c24.js.map": "/react-code-preview/static/js/main.b3da9c24.js.map",
1616
"babel_vendors.138c72aa.js.map": "/react-code-preview/static/js/babel_vendors.138c72aa.js.map",
1717
"prismjs-vendor.ab8bdba3.js.map": "/react-code-preview/static/js/prismjs-vendor.ab8bdba3.js.map",
1818
"refractor-vendors.b0bc1568.js.map": "/react-code-preview/static/js/refractor-vendors.b0bc1568.js.map",
1919
"codemirror-vendors.6680f1b9.js.map": "/react-code-preview/static/js/codemirror-vendors.6680f1b9.js.map",
2020
"uiwjs-vendors.cdc3cde3.css.map": "/react-code-preview/static/css/uiwjs-vendors.cdc3cde3.css.map",
21-
"uiwjs-vendors.1cc75997.js.map": "/react-code-preview/static/js/uiwjs-vendors.1cc75997.js.map",
21+
"uiwjs-vendors.0b859d9f.js.map": "/react-code-preview/static/js/uiwjs-vendors.0b859d9f.js.map",
2222
"react-vendors.bdb0a0db.js.map": "/react-code-preview/static/js/react-vendors.bdb0a0db.js.map",
2323
"585.d5e11025.js.map": "/react-code-preview/static/js/585.d5e11025.js.map"
2424
},
@@ -28,10 +28,10 @@
2828
"static/js/refractor-vendors.b0bc1568.js",
2929
"static/js/codemirror-vendors.6680f1b9.js",
3030
"static/css/uiwjs-vendors.cdc3cde3.css",
31-
"static/js/uiwjs-vendors.1cc75997.js",
31+
"static/js/uiwjs-vendors.0b859d9f.js",
3232
"static/js/react-vendors.bdb0a0db.js",
3333
"static/js/585.d5e11025.js",
34-
"static/css/main.e71f653f.css",
35-
"static/js/main.97005458.js"
34+
"static/css/main.928e304a.css",
35+
"static/js/main.b3da9c24.js"
3636
]
3737
}

coverage/coverage-summary.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
{"total": {"lines":{"total":108,"covered":0,"skipped":0,"pct":0},"statements":{"total":115,"covered":0,"skipped":0,"pct":0},"functions":{"total":25,"covered":0,"skipped":0,"pct":0},"branches":{"total":130,"covered":0,"skipped":0,"pct":0},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":"Unknown"}}
1+
{"total": {"lines":{"total":114,"covered":0,"skipped":0,"pct":0},"statements":{"total":121,"covered":0,"skipped":0,"pct":0},"functions":{"total":27,"covered":0,"skipped":0,"pct":0},"branches":{"total":130,"covered":0,"skipped":0,"pct":0},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":"Unknown"}}
22
,"/home/runner/work/react-code-preview/react-code-preview/src/ErrorMessage.tsx": {"lines":{"total":4,"covered":0,"skipped":0,"pct":0},"functions":{"total":2,"covered":0,"skipped":0,"pct":0},"statements":{"total":5,"covered":0,"skipped":0,"pct":0},"branches":{"total":2,"covered":0,"skipped":0,"pct":0}}
33
,"/home/runner/work/react-code-preview/react-code-preview/src/ThirdPartyButton.tsx": {"lines":{"total":10,"covered":0,"skipped":0,"pct":0},"functions":{"total":2,"covered":0,"skipped":0,"pct":0},"statements":{"total":10,"covered":0,"skipped":0,"pct":0},"branches":{"total":18,"covered":0,"skipped":0,"pct":0}}
44
,"/home/runner/work/react-code-preview/react-code-preview/src/icon.tsx": {"lines":{"total":4,"covered":0,"skipped":0,"pct":0},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":4,"covered":0,"skipped":0,"pct":0},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
55
,"/home/runner/work/react-code-preview/react-code-preview/src/index.tsx": {"lines":{"total":40,"covered":0,"skipped":0,"pct":0},"functions":{"total":14,"covered":0,"skipped":0,"pct":0},"statements":{"total":45,"covered":0,"skipped":0,"pct":0},"branches":{"total":86,"covered":0,"skipped":0,"pct":0}}
66
,"/home/runner/work/react-code-preview/react-code-preview/src/transform.tsx": {"lines":{"total":1,"covered":0,"skipped":0,"pct":0},"functions":{"total":1,"covered":0,"skipped":0,"pct":0},"statements":{"total":1,"covered":0,"skipped":0,"pct":0},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
7-
,"/home/runner/work/react-code-preview/react-code-preview/src/useCodePreview.ts": {"lines":{"total":49,"covered":0,"skipped":0,"pct":0},"functions":{"total":6,"covered":0,"skipped":0,"pct":0},"statements":{"total":50,"covered":0,"skipped":0,"pct":0},"branches":{"total":24,"covered":0,"skipped":0,"pct":0}}
7+
,"/home/runner/work/react-code-preview/react-code-preview/src/useCodePreview.ts": {"lines":{"total":55,"covered":0,"skipped":0,"pct":0},"functions":{"total":8,"covered":0,"skipped":0,"pct":0},"statements":{"total":56,"covered":0,"skipped":0,"pct":0},"branches":{"total":24,"covered":0,"skipped":0,"pct":0}}
88
}

coverage/lcov-report/ErrorMessage.tsx.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ <h1><a href="index.html">All files</a> ErrorMessage.tsx</h1>
121121
<div class='footer quiet pad2 space-top1 center small'>
122122
Code coverage generated by
123123
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
124-
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
124+
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
125125
</div>
126126
<script src="prettify.js"></script>
127127
<script>

coverage/lcov-report/ThirdPartyButton.tsx.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ <h1><a href="index.html">All files</a> ThirdPartyButton.tsx</h1>
205205
<div class='footer quiet pad2 space-top1 center small'>
206206
Code coverage generated by
207207
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
208-
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
208+
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
209209
</div>
210210
<script src="prettify.js"></script>
211211
<script>

coverage/lcov-report/icon.tsx.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ <h1><a href="index.html">All files</a> icon.tsx</h1>
169169
<div class='footer quiet pad2 space-top1 center small'>
170170
Code coverage generated by
171171
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
172-
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
172+
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
173173
</div>
174174
<script src="prettify.js"></script>
175175
<script>

coverage/lcov-report/index.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h1>All files</h1>
2525
<div class='fl pad1y space-right2'>
2626
<span class="strong">0% </span>
2727
<span class="quiet">Statements</span>
28-
<span class='fraction'>0/115</span>
28+
<span class='fraction'>0/121</span>
2929
</div>
3030

3131

@@ -39,14 +39,14 @@ <h1>All files</h1>
3939
<div class='fl pad1y space-right2'>
4040
<span class="strong">0% </span>
4141
<span class="quiet">Functions</span>
42-
<span class='fraction'>0/25</span>
42+
<span class='fraction'>0/27</span>
4343
</div>
4444

4545

4646
<div class='fl pad1y space-right2'>
4747
<span class="strong">0% </span>
4848
<span class="quiet">Lines</span>
49-
<span class='fraction'>0/108</span>
49+
<span class='fraction'>0/114</span>
5050
</div>
5151

5252

@@ -159,13 +159,13 @@ <h1>All files</h1>
159159
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
160160
</td>
161161
<td data-value="0" class="pct low">0%</td>
162-
<td data-value="50" class="abs low">0/50</td>
162+
<td data-value="56" class="abs low">0/56</td>
163163
<td data-value="0" class="pct low">0%</td>
164164
<td data-value="24" class="abs low">0/24</td>
165165
<td data-value="0" class="pct low">0%</td>
166-
<td data-value="6" class="abs low">0/6</td>
166+
<td data-value="8" class="abs low">0/8</td>
167167
<td data-value="0" class="pct low">0%</td>
168-
<td data-value="49" class="abs low">0/49</td>
168+
<td data-value="55" class="abs low">0/55</td>
169169
</tr>
170170

171171
</tbody>
@@ -176,7 +176,7 @@ <h1>All files</h1>
176176
<div class='footer quiet pad2 space-top1 center small'>
177177
Code coverage generated by
178178
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
179-
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
179+
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
180180
</div>
181181
<script src="prettify.js"></script>
182182
<script>

coverage/lcov-report/index.tsx.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -865,7 +865,7 @@ <h1><a href="index.html">All files</a> index.tsx</h1>
865865
<div class='footer quiet pad2 space-top1 center small'>
866866
Code coverage generated by
867867
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
868-
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
868+
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
869869
</div>
870870
<script src="prettify.js"></script>
871871
<script>

coverage/lcov-report/transform.tsx.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ <h1><a href="index.html">All files</a> transform.tsx</h1>
9797
<div class='footer quiet pad2 space-top1 center small'>
9898
Code coverage generated by
9999
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
100-
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
100+
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
101101
</div>
102102
<script src="prettify.js"></script>
103103
<script>

coverage/lcov-report/useCodePreview.ts.html

Lines changed: 50 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
2525
<div class='fl pad1y space-right2'>
2626
<span class="strong">0% </span>
2727
<span class="quiet">Statements</span>
28-
<span class='fraction'>0/50</span>
28+
<span class='fraction'>0/56</span>
2929
</div>
3030

3131

@@ -39,14 +39,14 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
3939
<div class='fl pad1y space-right2'>
4040
<span class="strong">0% </span>
4141
<span class="quiet">Functions</span>
42-
<span class='fraction'>0/6</span>
42+
<span class='fraction'>0/8</span>
4343
</div>
4444

4545

4646
<div class='fl pad1y space-right2'>
4747
<span class="strong">0% </span>
4848
<span class="quiet">Lines</span>
49-
<span class='fraction'>0/49</span>
49+
<span class='fraction'>0/55</span>
5050
</div>
5151

5252

@@ -184,12 +184,34 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
184184
<a name='L119'></a><a href='#L119'>119</a>
185185
<a name='L120'></a><a href='#L120'>120</a>
186186
<a name='L121'></a><a href='#L121'>121</a>
187-
<a name='L122'></a><a href='#L122'>122</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
187+
<a name='L122'></a><a href='#L122'>122</a>
188+
<a name='L123'></a><a href='#L123'>123</a>
189+
<a name='L124'></a><a href='#L124'>124</a>
190+
<a name='L125'></a><a href='#L125'>125</a>
191+
<a name='L126'></a><a href='#L126'>126</a>
192+
<a name='L127'></a><a href='#L127'>127</a>
193+
<a name='L128'></a><a href='#L128'>128</a>
194+
<a name='L129'></a><a href='#L129'>129</a>
195+
<a name='L130'></a><a href='#L130'>130</a>
196+
<a name='L131'></a><a href='#L131'>131</a>
197+
<a name='L132'></a><a href='#L132'>132</a>
198+
<a name='L133'></a><a href='#L133'>133</a>
199+
<a name='L134'></a><a href='#L134'>134</a>
200+
<a name='L135'></a><a href='#L135'>135</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
188201
<span class="cline-any cline-neutral">&nbsp;</span>
189202
<span class="cline-any cline-neutral">&nbsp;</span>
190203
<span class="cline-any cline-neutral">&nbsp;</span>
191204
<span class="cline-any cline-neutral">&nbsp;</span>
192205
<span class="cline-any cline-neutral">&nbsp;</span>
206+
<span class="cline-any cline-no">&nbsp;</span>
207+
<span class="cline-any cline-neutral">&nbsp;</span>
208+
<span class="cline-any cline-no">&nbsp;</span>
209+
<span class="cline-any cline-neutral">&nbsp;</span>
210+
<span class="cline-any cline-no">&nbsp;</span>
211+
<span class="cline-any cline-neutral">&nbsp;</span>
212+
<span class="cline-any cline-neutral">&nbsp;</span>
213+
<span class="cline-any cline-neutral">&nbsp;</span>
214+
<span class="cline-any cline-no">&nbsp;</span>
193215
<span class="cline-any cline-neutral">&nbsp;</span>
194216
<span class="cline-any cline-neutral">&nbsp;</span>
195217
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -202,6 +224,10 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
202224
<span class="cline-any cline-no">&nbsp;</span>
203225
<span class="cline-any cline-no">&nbsp;</span>
204226
<span class="cline-any cline-neutral">&nbsp;</span>
227+
<span class="cline-any cline-no">&nbsp;</span>
228+
<span class="cline-any cline-no">&nbsp;</span>
229+
<span class="cline-any cline-neutral">&nbsp;</span>
230+
<span class="cline-any cline-neutral">&nbsp;</span>
205231
<span class="cline-any cline-neutral">&nbsp;</span>
206232
<span class="cline-any cline-neutral">&nbsp;</span>
207233
<span class="cline-any cline-no">&nbsp;</span>
@@ -306,12 +332,21 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
306332
<span class="cline-any cline-neutral">&nbsp;</span>
307333
<span class="cline-any cline-neutral">&nbsp;</span>
308334
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useEffect, useRef } from 'react';
309-
// @ts-ignore
310-
import ReactDOMClient from 'react-dom/client';
311-
import ReactDOM from 'react-dom';
312335
import { useState } from 'react';
313336
import { babelTransform } from './transform';
314337
import { CodePreviewProps } from './';
338+
import ReactDOM from 'react-dom';
339+
&nbsp;
340+
export const getReactDOMClient = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
341+
let _ReactDOM;
342+
<span class="cstat-no" title="statement not covered" > try {</span>
343+
// 使用 require 解决 react v17 ts 报错问题
344+
<span class="cstat-no" title="statement not covered" > _ReactDOM = require('react-dom/client');</span>
345+
} catch (err) {
346+
// console.warn(`如果使用的是react-dom小于v18的版本,可以忽略此警告:${err}`)
347+
}
348+
<span class="cstat-no" title="statement not covered" > return _ReactDOM;</span>
349+
};
315350
&nbsp;
316351
export function <span class="fstat-no" title="function not covered" >useCodePreview(</span>props: CodePreviewProps) {
317352
const [demoDom, setDemoDom] = <span class="cstat-no" title="statement not covered" >useState&lt;HTMLDivElement&gt;();</span>
@@ -322,6 +357,10 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
322357
const [width, setWidth] = <span class="cstat-no" title="statement not covered" >useState&lt;number | string&gt;(1);</span>
323358
const [copied, setCopied] = <span class="cstat-no" title="statement not covered" >useState(false);</span>
324359
const [code, setCode] = <span class="cstat-no" title="statement not covered" >useState(props.code || '');</span>
360+
&nbsp;
361+
const ReactDOMClient = <span class="cstat-no" title="statement not covered" >React.useMemo(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
362+
<span class="cstat-no" title="statement not covered" > return window.ReactDOM ? window.ReactDOM : getReactDOMClient();</span>
363+
}, []);
325364
&nbsp;
326365
/** 通过缓存的方式 解决 react v18 中 的报错 ***/
327366
// @ts-ignore
@@ -358,9 +397,9 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
358397
ReactDOMClient: _ReactDOMClient,
359398
...otherDeps
360399
} = <span class="cstat-no" title="statement not covered" >props.dependencies || {};</span>
361-
const V18ReactDOM = <span class="cstat-no" title="statement not covered" >_ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM;</span>
400+
let V18ReactDOM = <span class="cstat-no" title="statement not covered" >_ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM;</span>
362401
// 判断是否是 react v18版本
363-
const isV18 = <span class="cstat-no" title="statement not covered" >Reflect.has(V18ReactDOM || {}, 'createRoot');</span>
402+
const isV18 = <span class="cstat-no" title="statement not covered" >Reflect.has(V18ReactDOM, 'createRoot');</span>
364403
const NewReactDOM = <span class="cstat-no" title="statement not covered" >isV18 ? ReactDOMRender(V18ReactDOM) : V18ReactDOM;</span>
365404
&nbsp;
366405
<span class="cstat-no" title="statement not covered" > try {</span>
@@ -382,7 +421,7 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
382421
// react &lt; v18 中写法替换
383422
<span class="cstat-no" title="statement not covered" > str = str.replace('ReactDOM.render', `ReactDOM.createRoot("${playerId.current}").render`);</span>
384423
// react v18 中写法替换
385-
<span class="cstat-no" title="statement not covered" > str = str.replace(`ReactDOMClient.createRoot(_mount_)`, `ReactDOM.createRoot("${playerId.current}")`);</span>
424+
<span class="cstat-no" title="statement not covered" > str = str.replace(`ReactDOM.createRoot(_mount_)`, `ReactDOM.createRoot("${playerId.current}")`);</span>
386425
<span class="cstat-no" title="statement not covered" > str = str.replace('_mount_', ``);</span>
387426
} else {
388427
<span class="cstat-no" title="statement not covered" > str = str.replace('_mount_', `document.getElementById('${playerId.current}')`);</span>
@@ -433,7 +472,7 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
433472
<div class='footer quiet pad2 space-top1 center small'>
434473
Code coverage generated by
435474
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
436-
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
475+
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
437476
</div>
438477
<script src="prettify.js"></script>
439478
<script>

0 commit comments

Comments
 (0)