Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit23d787f

Browse files
committed
refactor webview
1 parente018584 commit23d787f

File tree

5 files changed

+174
-192
lines changed

5 files changed

+174
-192
lines changed

‎src/editor/ReactWebView.ts

Lines changed: 0 additions & 189 deletions
This file was deleted.

‎src/editor/commands.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import*asGfrom'typings/graphql'
22
import*asvscodefrom'vscode'
3-
importReactWebViewfrom'./ReactWebView'
3+
importcreateWebViewfrom'../webview'
44
importcreateTestRunner,{Payload}from'../services/testRunner'
55

66
exportconstCOMMANDS={
@@ -41,7 +41,7 @@ export const createCommands = ({ extensionPath, workspaceState, workspaceRoot }:
4141
}
4242

4343
// activate machine
44-
webview=newReactWebView({
44+
webview=createWebView({
4545
extensionPath,
4646
workspaceState,
4747
workspaceRoot,

‎src/webview/index.ts

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import{Action}from'typings'
2+
import*aspathfrom'path'
3+
import*asvscodefrom'vscode'
4+
importChannelfrom'../channel'
5+
importrenderfrom'./render'
6+
7+
interfaceReactWebViewProps{
8+
extensionPath:string
9+
workspaceState:vscode.Memento
10+
workspaceRoot:vscode.WorkspaceFolder
11+
}
12+
13+
constcreateReactWebView=({ extensionPath, workspaceState, workspaceRoot}:ReactWebViewProps)=>{
14+
letloaded=false
15+
// TODO: add disposables
16+
constdisposables:vscode.Disposable[]=[]
17+
18+
functioncreateWebViewPanel():vscode.WebviewPanel{
19+
constviewType='CodeRoad'
20+
consttitle='CodeRoad'
21+
constconfig={
22+
// Enable javascript in the webview
23+
enableScripts:true,
24+
// And restrict the webview to only loading content from our extension's `media` directory.
25+
localResourceRoots:[vscode.Uri.file(path.join(extensionPath,'build'))],
26+
// prevents destroying the window when it is in the background
27+
retainContextWhenHidden:true,
28+
}
29+
loaded=true
30+
returnvscode.window.createWebviewPanel(viewType,title,vscode.ViewColumn.Two,config)
31+
}
32+
33+
letpanel:vscode.WebviewPanel=createWebViewPanel()
34+
35+
// Listen for when the panel is disposed
36+
// This happens when the user closes the panel or when the panel is closed programmatically
37+
panel.onDidDispose(panel.dispose,null,disposables)
38+
39+
constchannel=newChannel({
40+
workspaceState,
41+
workspaceRoot,
42+
postMessage:(action:Action):Thenable<boolean>=>{
43+
// console.log(`postMessage ${JSON.stringify(action)}`)
44+
returnpanel.webview.postMessage(action)
45+
},
46+
})
47+
// Handle messages from the webview
48+
constreceive=channel.receive
49+
constsend=channel.send
50+
51+
panel.webview.onDidReceiveMessage(receive,null,disposables)
52+
53+
constrootPath=path.join(extensionPath,'build')
54+
render(panel,rootPath)
55+
56+
return{
57+
dispose(){
58+
// Clean up our resources
59+
loaded=false
60+
panel.dispose()
61+
Promise.all(disposables.map(x=>x.dispose()))
62+
},
63+
createOrShow(){
64+
vscode.commands.executeCommand('vscode.setEditorLayout',{
65+
orientation:0,
66+
groups:[
67+
{groups:[{}],size:0.6},
68+
{groups:[{}],size:0.4},
69+
],
70+
})
71+
// If we already have a panel, show it.
72+
// Otherwise, create a new panel.
73+
74+
if(panel&&panel.webview){
75+
if(!loaded){
76+
panel.reveal(vscode.ViewColumn.Two)
77+
loaded=true
78+
}
79+
}else{
80+
panel=createWebViewPanel()
81+
}
82+
},
83+
send,
84+
receive,
85+
}
86+
}
87+
88+
exportdefaultcreateReactWebView

‎src/webview/render.ts

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import{JSDOM}from'jsdom'
2+
import*asvscodefrom'vscode'
3+
import*aspathfrom'path'
4+
5+
constgetNonce=():string=>{
6+
lettext=''
7+
constpossible='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
8+
for(leti=0;i<32;i++){
9+
text+=possible.charAt(Math.floor(Math.random()*possible.length))
10+
}
11+
returntext
12+
}
13+
14+
asyncfunctionrender(panel:vscode.WebviewPanel,rootPath:string){
15+
// load copied index.html from web app build
16+
constdom=awaitJSDOM.fromFile(path.join(rootPath,'index.html'))
17+
const{ document}=dom.window
18+
19+
// set base href
20+
constbase:HTMLBaseElement=document.createElement('base')
21+
base.href=
22+
vscode.Uri.file(rootPath)
23+
.with({scheme:'vscode-resource'})
24+
.toString()+'/'
25+
document.head.appendChild(base)
26+
27+
// used for CSP
28+
constnonces:string[]=[]
29+
30+
// generate vscode-resource build path uri
31+
constcreateUri=(filePath:string):string=>
32+
vscode.Uri.file(filePath)
33+
.with({scheme:'vscode-resource'})
34+
.toString()
35+
.replace(/^\/+/g,'')// remove leading '/'
36+
.replace('/vscode-resource%3A',rootPath)// replace mangled resource path with root
37+
38+
// fix paths for scripts
39+
constscripts:HTMLScriptElement[]=Array.from(document.getElementsByTagName('script'))
40+
for(constscriptofscripts){
41+
if(script.src){
42+
constnonce:string=getNonce()
43+
nonces.push(nonce)
44+
script.nonce=nonce
45+
script.src=createUri(script.src)
46+
}
47+
}
48+
49+
// add run-time script from webpack
50+
construnTimeScript=document.createElement('script')
51+
runTimeScript.nonce=getNonce()
52+
nonces.push(runTimeScript.nonce)
53+
constmanifest=awaitimport(path.join(rootPath,'asset-manifest.json'))
54+
runTimeScript.src=createUri(path.join(rootPath,manifest.files['runtime-main.js']))
55+
document.body.appendChild(runTimeScript)
56+
57+
// fix paths for links
58+
conststyles:HTMLLinkElement[]=Array.from(document.getElementsByTagName('link'))
59+
for(conststyleofstyles){
60+
if(style.href){
61+
style.href=createUri(style.href)
62+
}
63+
}
64+
65+
// set CSP (content security policy) to grant permission to local files
66+
constcspMeta:HTMLMetaElement=document.createElement('meta')
67+
cspMeta.httpEquiv='Content-Security-Policy'
68+
cspMeta.content=[
69+
'font-src vscode-resource://*;',
70+
'img-src vscode-resource: https:;',
71+
`script-src${nonces.map(nonce=>`'nonce-${nonce}'`).join(' ')};`,
72+
`style-src vscode-resource: http: https: data:;`,
73+
].join(' ')
74+
document.head.appendChild(cspMeta)
75+
76+
// stringify dom
77+
consthtml=dom.serialize()
78+
79+
// set view
80+
panel.webview.html=html
81+
}
82+
83+
exportdefaultrender

‎web-app/src/containers/Tutorial/LevelPage/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const LevelSummaryPageContainer = (props: PageProps) => {
5050
}
5151

5252
return(
53-
<Levellevel={level}onContinue={onContinue}onLoadSolution={onLoadSolution}processes={processes}error={error}/>
53+
<Levellevel={level}onContinue={onContinue}onLoadSolution={onLoadSolution}processes={processes}/>
5454
)
5555
}
5656

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp