@@ -25,7 +25,7 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
25
25
< div class ='fl pad1y space-right2 '>
26
26
< span class ="strong "> 0% </ span >
27
27
< span class ="quiet "> Statements</ span >
28
- < span class ='fraction '> 0/50 </ span >
28
+ < span class ='fraction '> 0/56 </ span >
29
29
</ div >
30
30
31
31
@@ -39,14 +39,14 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
39
39
< div class ='fl pad1y space-right2 '>
40
40
< span class ="strong "> 0% </ span >
41
41
< span class ="quiet "> Functions</ span >
42
- < span class ='fraction '> 0/6 </ span >
42
+ < span class ='fraction '> 0/8 </ span >
43
43
</ div >
44
44
45
45
46
46
< div class ='fl pad1y space-right2 '>
47
47
< span class ="strong "> 0% </ span >
48
48
< span class ="quiet "> Lines</ span >
49
- < span class ='fraction '> 0/49 </ span >
49
+ < span class ='fraction '> 0/55 </ span >
50
50
</ div >
51
51
52
52
@@ -184,12 +184,34 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
184
184
< a name ='L119 '> </ a > < a href ='#L119 '> 119</ a >
185
185
< a name ='L120 '> </ a > < a href ='#L120 '> 120</ a >
186
186
< 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 "> </ 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 "> </ span >
188
201
< span class ="cline-any cline-neutral "> </ span >
189
202
< span class ="cline-any cline-neutral "> </ span >
190
203
< span class ="cline-any cline-neutral "> </ span >
191
204
< span class ="cline-any cline-neutral "> </ span >
192
205
< span class ="cline-any cline-neutral "> </ span >
206
+ < span class ="cline-any cline-no "> </ span >
207
+ < span class ="cline-any cline-neutral "> </ span >
208
+ < span class ="cline-any cline-no "> </ span >
209
+ < span class ="cline-any cline-neutral "> </ span >
210
+ < span class ="cline-any cline-no "> </ span >
211
+ < span class ="cline-any cline-neutral "> </ span >
212
+ < span class ="cline-any cline-neutral "> </ span >
213
+ < span class ="cline-any cline-neutral "> </ span >
214
+ < span class ="cline-any cline-no "> </ span >
193
215
< span class ="cline-any cline-neutral "> </ span >
194
216
< span class ="cline-any cline-neutral "> </ span >
195
217
< span class ="cline-any cline-neutral "> </ span >
@@ -202,6 +224,10 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
202
224
< span class ="cline-any cline-no "> </ span >
203
225
< span class ="cline-any cline-no "> </ span >
204
226
< span class ="cline-any cline-neutral "> </ span >
227
+ < span class ="cline-any cline-no "> </ span >
228
+ < span class ="cline-any cline-no "> </ span >
229
+ < span class ="cline-any cline-neutral "> </ span >
230
+ < span class ="cline-any cline-neutral "> </ span >
205
231
< span class ="cline-any cline-neutral "> </ span >
206
232
< span class ="cline-any cline-neutral "> </ span >
207
233
< span class ="cline-any cline-no "> </ span >
@@ -306,12 +332,21 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
306
332
< span class ="cline-any cline-neutral "> </ span >
307
333
< span class ="cline-any cline-neutral "> </ span >
308
334
< span class ="cline-any cline-neutral "> </ 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';
312
335
import { useState } from 'react';
313
336
import { babelTransform } from './transform';
314
337
import { CodePreviewProps } from './';
338
+ import ReactDOM from 'react-dom';
339
+
340
+ export const getReactDOMClient = < span class ="cstat-no " title ="statement not covered " > < span class ="fstat-no " title ="function not covered " > ()</ span > => {</ 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
+ };
315
350
316
351
export function < span class ="fstat-no " title ="function not covered " > useCodePreview(</ span > props: CodePreviewProps) {
317
352
const [demoDom, setDemoDom] = < span class ="cstat-no " title ="statement not covered " > useState<HTMLDivElement>();</ span >
@@ -322,6 +357,10 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
322
357
const [width, setWidth] = < span class ="cstat-no " title ="statement not covered " > useState<number | string>(1);</ span >
323
358
const [copied, setCopied] = < span class ="cstat-no " title ="statement not covered " > useState(false);</ span >
324
359
const [code, setCode] = < span class ="cstat-no " title ="statement not covered " > useState(props.code || '');</ span >
360
+
361
+ const ReactDOMClient = < span class ="cstat-no " title ="statement not covered " > React.useMemo(< span class ="fstat-no " title ="function not covered " > ()</ span > => {</ span >
362
+ < span class ="cstat-no " title ="statement not covered " > return window.ReactDOM ? window.ReactDOM : getReactDOMClient();</ span >
363
+ }, []);
325
364
326
365
/** 通过缓存的方式 解决 react v18 中 的报错 ***/
327
366
// @ts-ignore
@@ -358,9 +397,9 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
358
397
ReactDOMClient: _ReactDOMClient,
359
398
...otherDeps
360
399
} = < 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 >
362
401
// 判断是否是 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 >
364
403
const NewReactDOM = < span class ="cstat-no " title ="statement not covered " > isV18 ? ReactDOMRender(V18ReactDOM) : V18ReactDOM;</ span >
365
404
366
405
< 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>
382
421
// react < v18 中写法替换
383
422
< span class ="cstat-no " title ="statement not covered " > str = str.replace('ReactDOM.render', `ReactDOM.createRoot("${playerId.current}").render`);</ span >
384
423
// 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 >
386
425
< span class ="cstat-no " title ="statement not covered " > str = str.replace('_mount_', ``);</ span >
387
426
} else {
388
427
< 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>
433
472
< div class ='footer quiet pad2 space-top1 center small '>
434
473
Code coverage generated by
435
474
< 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)
437
476
</ div >
438
477
< script src ="prettify.js "> </ script >
439
478
< script >
0 commit comments