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

Commitd00a485

Browse files
committed
progress refactoring webview, editor, machine
1 parent481807c commitd00a485

File tree

12 files changed

+288
-223
lines changed

12 files changed

+288
-223
lines changed

‎src/editor/ReactWebView.ts

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import*asvscodefrom'vscode'
2+
import*asCRfrom'typings'
3+
import*aspathfrom'path'
4+
5+
functiongetNonce():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+
// TODO: move column into createOrShow
15+
16+
17+
/**
18+
* Manages React webview panels
19+
*/
20+
classReactWebView{
21+
/**
22+
* Track the currently panel. Only allow a single panel to exist at a time.
23+
*/
24+
publicstaticcurrentPanel:ReactWebView|undefined=undefined
25+
26+
//@ts-ignore
27+
privatepanel:vscode.WebviewPanel
28+
privateextensionPath:string
29+
privatedisposables:vscode.Disposable[]=[]
30+
privateonReceive:any// TODO: properly type
31+
32+
publicconstructor(extensionPath:string,onReceive:any){
33+
this.extensionPath=extensionPath
34+
this.onReceive=onReceive
35+
}
36+
37+
publicasynccreateOrShow(extensionPath:string,column:number=vscode.ViewColumn.One):Promise<void>{
38+
consthasActiveEditor=vscode.window.activeTextEditor
39+
40+
if(!hasActiveEditor){
41+
thrownewError('Should have an open file on launch')
42+
}
43+
44+
// If we already have a panel, show it.
45+
// Otherwise, create a new panel.
46+
if(ReactWebView.currentPanel&&ReactWebView.currentPanel.panel){
47+
ReactWebView.currentPanel.panel.reveal(column)
48+
}else{
49+
constviewType='CodeRoad'
50+
consttitle='CodeRoad'
51+
constconfig={
52+
// Enable javascript in the webview
53+
enableScripts:true,
54+
55+
// And restric the webview to only loading content from our extension's `media` directory.
56+
localResourceRoots:[vscode.Uri.file(path.join(this.extensionPath,'build'))],
57+
58+
// prevents destroying the window when it is in the background
59+
retainContextWhenHidden:true,
60+
}
61+
// Create and show a new webview panel
62+
this.panel=vscode.window.createWebviewPanel(viewType,title,column,config)
63+
64+
// Set the webview's initial html content
65+
this.panel.webview.html=this.getHtmlForWebview()
66+
67+
// Listen for when the panel is disposed
68+
// This happens when the user closes the panel or when the panel is closed programatically
69+
this.panel.onDidDispose(()=>this.dispose(),null,this.disposables)
70+
71+
// Handle messages from the webview
72+
this.panel.webview.onDidReceiveMessage(this.onReceive,null,this.disposables)
73+
}
74+
}
75+
76+
publicasyncpostMessage(action:CR.Action):Promise<void>{
77+
// Send a message to the webview webview.
78+
// You can send any JSON serializable data.
79+
constsuccess=awaitthis.panel.webview.postMessage(action)
80+
if(!success){
81+
thrownewError(`Message post failure:${JSON.stringify(action)}`)
82+
}
83+
}
84+
85+
publicdispose():void{
86+
ReactWebView.currentPanel=undefined
87+
88+
// Clean up our resources
89+
this.panel.dispose()
90+
91+
while(this.disposables.length){
92+
constx=this.disposables.pop()
93+
if(x){
94+
x.dispose()
95+
}
96+
}
97+
}
98+
99+
privategetHtmlForWebview():string{
100+
101+
// eslint-disable-next-line
102+
constmanifest=require(path.join(this.extensionPath,'build','asset-manifest.json'))
103+
constmainScript=manifest.files['main.js']
104+
// grab first chunk
105+
constchunk=Object.keys(manifest.files).filter(f=>f.match(/^static\/js\/.+\.js$/))[0]
106+
constchunkScript=manifest.files[chunk]
107+
constmainStyle=manifest.files['main.css']
108+
109+
constscriptPathOnDisk=vscode.Uri.file(path.join(this.extensionPath,'build',mainScript))
110+
constscriptUri=scriptPathOnDisk.with({scheme:'vscode-resource'})
111+
constchunkPathOnDisk=vscode.Uri.file(path.join(this.extensionPath,'build',chunkScript))
112+
constchunkUri=chunkPathOnDisk.with({scheme:'vscode-resource'})
113+
conststylePathOnDisk=vscode.Uri.file(path.join(this.extensionPath,'build',mainStyle))
114+
conststyleUri=stylePathOnDisk.with({scheme:'vscode-resource'})
115+
116+
// Use a nonce to whitelist which scripts can be run
117+
constnonce=getNonce()
118+
constnonce2=getNonce()
119+
constnonce3=getNonce()
120+
121+
return`<!DOCTYPE html>
122+
<html lang="en">
123+
<head>
124+
<meta charset="utf-8">
125+
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
126+
<meta name="theme-color" content="#000000">
127+
<title>React App</title>
128+
<link rel="manifest" href="./manifest.json" />
129+
<link rel="stylesheet" type="text/css" href="${styleUri}">
130+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}' 'nonce-${nonce2}' 'nonce-${nonce3}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
131+
<base href="${vscode.Uri.file(path.join(this.extensionPath,'build')).with({scheme:'vscode-resource'})}/">
132+
<style></style>
133+
</head>
134+
135+
<body>
136+
<noscript>You need to enable JavaScript to run this app.</noscript>
137+
<div id="root">Loading...</div>
138+
<script nonce=${nonce} src="./webpackBuild.js"></script>
139+
<script nonce=${nonce2} src="${chunkUri}"></script>
140+
<script nonce="${nonce3}" src="${scriptUri}"></script>
141+
</body>
142+
</html>`
143+
}
144+
}
145+
146+
exportdefaultReactWebView

‎src/editor/commands/start.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ export default async function start(context: vscode.ExtensionContext): Promise<v
1818
console.log('TUTORIAL_START')
1919

2020
// setup connection to workspace
21-
awaitsetWorkspaceRoot()
21+
//await setWorkspaceRoot()
2222
// set workspace context path
23-
awaitsetStorage(context.workspaceState)
23+
//await setStorage(context.workspaceState)
2424

2525
// initialize state machine
2626
activateMachine()

‎src/editor/index.ts

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import*asvscodefrom'vscode'
2+
import*asCRfrom'../typings'
3+
import{setStorage}from'./storage'
4+
importReactWebViewfrom'./ReactWebView'
5+
6+
classEditor{
7+
// extension context set on activation
8+
//@ts-ignore
9+
privatecontext:vscode.ExtensionContext
10+
privateworkspaceRoot:string|undefined
11+
privatemachine:CR.StateMachine
12+
privatewebview:any
13+
14+
privateCOMMANDS={
15+
START:'coderoad.start',
16+
OPEN_WEBVIEW:'coderoad.open_webview',
17+
RUN_TEST:'coderoad.test_run',
18+
}
19+
20+
constructor(machine:CR.StateMachine){
21+
this.machine=machine
22+
}
23+
24+
privatecommandStart(){
25+
// set workspace root
26+
const{ rootPath}=vscode.workspace
27+
if(!rootPath){
28+
thrownewError('Requires a workspace. Please open a folder')
29+
}
30+
this.workspaceRoot=rootPath
31+
32+
// set local storage workspace
33+
setStorage(this.context.workspaceState)
34+
35+
// activate machine
36+
this.machine.activate()
37+
this.webview=newReactWebView(this.context.extensionPath,this.machine.onReceive)
38+
}
39+
40+
privateactivateCommands(){
41+
const{COMMANDS}=this
42+
constcommands={
43+
[COMMANDS.START]:()=>{
44+
this.commandStart()
45+
},
46+
[COMMANDS.OPEN_WEBVIEW]:()=>{
47+
this.webview.createOrShow(this.context.extensionPath);
48+
},
49+
}
50+
for(constcmdincommands){
51+
constcommand:vscode.Disposable=vscode.commands.registerCommand(cmd,commands[cmd])
52+
this.context.subscriptions.push(command)
53+
}
54+
}
55+
publicactivate(context:vscode.ExtensionContext):void{
56+
console.log('ACTIVATE!')
57+
this.context=context
58+
// commands
59+
this.activateCommands()
60+
61+
// setup tasks or views here
62+
63+
}
64+
publicdeactivate():void{
65+
console.log('DEACTIVATE!')
66+
// cleanup subscriptions/tasks
67+
for(constdisposableofthis.context.subscriptions){
68+
disposable.dispose()
69+
}
70+
// shut down state machine
71+
this.machine.deactivate()
72+
}
73+
}
74+
75+
exportdefaultEditor

‎src/editor/init.ts

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

0 commit comments

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