Skip to content

Commit

Permalink
v5.1.1 fix: 修复 react 17 中报错问题 (#216) (#217) e98476c
Browse files Browse the repository at this point in the history
  • Loading branch information
@github-actions
github-actions[bot] committed Apr 23, 2022
1 parent afc1f8c commit 4a331fb
Show file tree
Hide file tree
Showing 24 changed files with 156 additions and 107 deletions.
18 changes: 9 additions & 9 deletions asset-manifest.json
View file
@@ -1,24 +1,24 @@
{
"files": {
"main.css": "/react-code-preview/static/css/main.e71f653f.css",
"main.js": "/react-code-preview/static/js/main.97005458.js",
"main.css": "/react-code-preview/static/css/main.928e304a.css",
"main.js": "/react-code-preview/static/js/main.b3da9c24.js",
"babel_vendors.js": "/react-code-preview/static/js/babel_vendors.138c72aa.js",
"prismjs-vendor.js": "/react-code-preview/static/js/prismjs-vendor.ab8bdba3.js",
"refractor-vendors.js": "/react-code-preview/static/js/refractor-vendors.b0bc1568.js",
"codemirror-vendors.js": "/react-code-preview/static/js/codemirror-vendors.6680f1b9.js",
"uiwjs-vendors.css": "/react-code-preview/static/css/uiwjs-vendors.cdc3cde3.css",
"uiwjs-vendors.js": "/react-code-preview/static/js/uiwjs-vendors.1cc75997.js",
"uiwjs-vendors.js": "/react-code-preview/static/js/uiwjs-vendors.0b859d9f.js",
"react-vendors.js": "/react-code-preview/static/js/react-vendors.bdb0a0db.js",
"static/js/585.d5e11025.js": "/react-code-preview/static/js/585.d5e11025.js",
"index.html": "/react-code-preview/index.html",
"main.e71f653f.css.map": "/react-code-preview/static/css/main.e71f653f.css.map",
"main.97005458.js.map": "/react-code-preview/static/js/main.97005458.js.map",
"main.928e304a.css.map": "/react-code-preview/static/css/main.928e304a.css.map",
"main.b3da9c24.js.map": "/react-code-preview/static/js/main.b3da9c24.js.map",
"babel_vendors.138c72aa.js.map": "/react-code-preview/static/js/babel_vendors.138c72aa.js.map",
"prismjs-vendor.ab8bdba3.js.map": "/react-code-preview/static/js/prismjs-vendor.ab8bdba3.js.map",
"refractor-vendors.b0bc1568.js.map": "/react-code-preview/static/js/refractor-vendors.b0bc1568.js.map",
"codemirror-vendors.6680f1b9.js.map": "/react-code-preview/static/js/codemirror-vendors.6680f1b9.js.map",
"uiwjs-vendors.cdc3cde3.css.map": "/react-code-preview/static/css/uiwjs-vendors.cdc3cde3.css.map",
"uiwjs-vendors.1cc75997.js.map": "/react-code-preview/static/js/uiwjs-vendors.1cc75997.js.map",
"uiwjs-vendors.0b859d9f.js.map": "/react-code-preview/static/js/uiwjs-vendors.0b859d9f.js.map",
"react-vendors.bdb0a0db.js.map": "/react-code-preview/static/js/react-vendors.bdb0a0db.js.map",
"585.d5e11025.js.map": "/react-code-preview/static/js/585.d5e11025.js.map"
},
Expand All @@ -28,10 +28,10 @@
"static/js/refractor-vendors.b0bc1568.js",
"static/js/codemirror-vendors.6680f1b9.js",
"static/css/uiwjs-vendors.cdc3cde3.css",
"static/js/uiwjs-vendors.1cc75997.js",
"static/js/uiwjs-vendors.0b859d9f.js",
"static/js/react-vendors.bdb0a0db.js",
"static/js/585.d5e11025.js",
"static/css/main.e71f653f.css",
"static/js/main.97005458.js"
"static/css/main.928e304a.css",
"static/js/main.b3da9c24.js"
]
}
4 changes: 2 additions & 2 deletions coverage/coverage-summary.json
View file
@@ -1,8 +1,8 @@
{"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"}}
{"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"}}
,"/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}}
,"/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}}
,"/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}}
,"/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}}
,"/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}}
,"/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}}
,"/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}}
}
2 changes: 1 addition & 1 deletion coverage/lcov-report/ErrorMessage.tsx.html
View file
Expand Up @@ -121,7 +121,7 @@ <h1><a href="index.html">All files</a> ErrorMessage.tsx</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
</div>
<script src="prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion coverage/lcov-report/ThirdPartyButton.tsx.html
View file
Expand Up @@ -205,7 +205,7 @@ <h1><a href="index.html">All files</a> ThirdPartyButton.tsx</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
</div>
<script src="prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion coverage/lcov-report/icon.tsx.html
View file
Expand Up @@ -169,7 +169,7 @@ <h1><a href="index.html">All files</a> icon.tsx</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
</div>
<script src="prettify.js"></script>
<script>
Expand Down
14 changes: 7 additions & 7 deletions coverage/lcov-report/index.html
View file
Expand Up @@ -25,7 +25,7 @@ <h1>All files</h1>
<div class='fl pad1y space-right2'>
<span class="strong">0% </span>
<span class="quiet">Statements</span>
<span class='fraction'>0/115</span>
<span class='fraction'>0/121</span>
</div>


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


<div class='fl pad1y space-right2'>
<span class="strong">0% </span>
<span class="quiet">Lines</span>
<span class='fraction'>0/108</span>
<span class='fraction'>0/114</span>
</div>


Expand Down Expand Up @@ -159,13 +159,13 @@ <h1>All files</h1>
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="50" class="abs low">0/50</td>
<td data-value="56" class="abs low">0/56</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="24" class="abs low">0/24</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="6" class="abs low">0/6</td>
<td data-value="8" class="abs low">0/8</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="49" class="abs low">0/49</td>
<td data-value="55" class="abs low">0/55</td>
</tr>

</tbody>
Expand All @@ -176,7 +176,7 @@ <h1>All files</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
</div>
<script src="prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion coverage/lcov-report/index.tsx.html
View file
Expand Up @@ -865,7 +865,7 @@ <h1><a href="index.html">All files</a> index.tsx</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
</div>
<script src="prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion coverage/lcov-report/transform.tsx.html
View file
Expand Up @@ -97,7 +97,7 @@ <h1><a href="index.html">All files</a> transform.tsx</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
</div>
<script src="prettify.js"></script>
<script>
Expand Down
61 changes: 50 additions & 11 deletions coverage/lcov-report/useCodePreview.ts.html
View file
Expand Up @@ -25,7 +25,7 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
<div class='fl pad1y space-right2'>
<span class="strong">0% </span>
<span class="quiet">Statements</span>
<span class='fraction'>0/50</span>
<span class='fraction'>0/56</span>
</div>


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


<div class='fl pad1y space-right2'>
<span class="strong">0% </span>
<span class="quiet">Lines</span>
<span class='fraction'>0/49</span>
<span class='fraction'>0/55</span>
</div>


Expand Down Expand Up @@ -184,12 +184,34 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
<a name='L119'></a><a href='#L119'>119</a>
<a name='L120'></a><a href='#L120'>120</a>
<a name='L121'></a><a href='#L121'>121</a>
<a name='L122'></a><a href='#L122'>122</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<a name='L122'></a><a href='#L122'>122</a>
<a name='L123'></a><a href='#L123'>123</a>
<a name='L124'></a><a href='#L124'>124</a>
<a name='L125'></a><a href='#L125'>125</a>
<a name='L126'></a><a href='#L126'>126</a>
<a name='L127'></a><a href='#L127'>127</a>
<a name='L128'></a><a href='#L128'>128</a>
<a name='L129'></a><a href='#L129'>129</a>
<a name='L130'></a><a href='#L130'>130</a>
<a name='L131'></a><a href='#L131'>131</a>
<a name='L132'></a><a href='#L132'>132</a>
<a name='L133'></a><a href='#L133'>133</a>
<a name='L134'></a><a href='#L134'>134</a>
<a name='L135'></a><a href='#L135'>135</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand All @@ -202,6 +224,10 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
Expand Down Expand Up @@ -306,12 +332,21 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useEffect, useRef } from 'react';
// @ts-ignore
import ReactDOMClient from 'react-dom/client';
import ReactDOM from 'react-dom';
import { useState } from 'react';
import { babelTransform } from './transform';
import { CodePreviewProps } from './';
import ReactDOM from 'react-dom';
&nbsp;
export const getReactDOMClient = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
let _ReactDOM;
<span class="cstat-no" title="statement not covered" > try {</span>
// 使用 require 解决 react v17 ts 报错问题
<span class="cstat-no" title="statement not covered" > _ReactDOM = require('react-dom/client');</span>
} catch (err) {
// console.warn(`如果使用的是react-dom小于v18的版本，可以忽略此警告：${err}`)
}
<span class="cstat-no" title="statement not covered" > return _ReactDOM;</span>
};
&nbsp;
export function <span class="fstat-no" title="function not covered" >useCodePreview(</span>props: CodePreviewProps) {
const [demoDom, setDemoDom] = <span class="cstat-no" title="statement not covered" >useState&lt;HTMLDivElement&gt;();</span>
Expand All @@ -322,6 +357,10 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
const [width, setWidth] = <span class="cstat-no" title="statement not covered" >useState&lt;number | string&gt;(1);</span>
const [copied, setCopied] = <span class="cstat-no" title="statement not covered" >useState(false);</span>
const [code, setCode] = <span class="cstat-no" title="statement not covered" >useState(props.code || '');</span>
&nbsp;
const ReactDOMClient = <span class="cstat-no" title="statement not covered" >React.useMemo(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
<span class="cstat-no" title="statement not covered" > return window.ReactDOM ? window.ReactDOM : getReactDOMClient();</span>
}, []);
&nbsp;
/** 通过缓存的方式 解决 react v18 中 的报错 ***/
// @ts-ignore
Expand Down Expand Up @@ -358,9 +397,9 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
ReactDOMClient: _ReactDOMClient,
...otherDeps
} = <span class="cstat-no" title="statement not covered" >props.dependencies || {};</span>
const V18ReactDOM = <span class="cstat-no" title="statement not covered" >_ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM;</span>
let V18ReactDOM = <span class="cstat-no" title="statement not covered" >_ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM;</span>
// 判断是否是 react v18版本
const isV18 = <span class="cstat-no" title="statement not covered" >Reflect.has(V18ReactDOM || {}, 'createRoot');</span>
const isV18 = <span class="cstat-no" title="statement not covered" >Reflect.has(V18ReactDOM, 'createRoot');</span>
const NewReactDOM = <span class="cstat-no" title="statement not covered" >isV18 ? ReactDOMRender(V18ReactDOM) : V18ReactDOM;</span>
&nbsp;
<span class="cstat-no" title="statement not covered" > try {</span>
Expand All @@ -382,7 +421,7 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
// react &lt; v18 中写法替换
<span class="cstat-no" title="statement not covered" > str = str.replace('ReactDOM.render', `ReactDOM.createRoot("${playerId.current}").render`);</span>
// react v18 中写法替换
<span class="cstat-no" title="statement not covered" > str = str.replace(`ReactDOMClient.createRoot(_mount_)`, `ReactDOM.createRoot("${playerId.current}")`);</span>
<span class="cstat-no" title="statement not covered" > str = str.replace(`ReactDOM.createRoot(_mount_)`, `ReactDOM.createRoot("${playerId.current}")`);</span>
<span class="cstat-no" title="statement not covered" > str = str.replace('_mount_', ``);</span>
} else {
<span class="cstat-no" title="statement not covered" > str = str.replace('_mount_', `document.getElementById('${playerId.current}')`);</span>
Expand Down Expand Up @@ -433,7 +472,7 @@ <h1><a href="index.html">All files</a> useCodePreview.ts</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at Fri Apr 22 2022 15:38:58 GMT+0000 (Coordinated Universal Time)
at Sat Apr 23 2022 09:08:31 GMT+0000 (Coordinated Universal Time)
</div>
<script src="prettify.js"></script>
<script>
Expand Down

0 comments on commit 4a331fb

Please sign in to comment.