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

Commit9011721

Browse files
authored
Merge pull requestcoderoad#4 from ShMcK/feature/tutorial-setup
Feature/tutorial setup
2 parentsca9901b +99372b4 commit9011721

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+427
-327
lines changed

‎src/editor/views/createWebview.tsrenamed to‎src/editor/ReactWebView.ts

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,116 +2,118 @@ import * as vscode from 'vscode'
22
import*asCRfrom'typings'
33
import*aspathfrom'path'
44

5-
importgetNoncefrom'./utils/nonce'
6-
importonReceivefrom'./onReceive'
7-
85
/**
96
* Manages React webview panels
107
*/
11-
classReactPanel{
12-
/**
13-
* Track the currently panel. Only allow a single panel to exist at a time.
14-
*/
15-
publicstaticcurrentPanel:ReactPanel|undefined=undefined
8+
classReactWebView{
9+
//@ts-ignore
10+
privatepanel:vscode.WebviewPanel
11+
privateextensionPath:string
12+
privatedisposables:vscode.Disposable[]=[]
13+
privateonReceive:any// TODO: properly type
14+
15+
publicconstructor(extensionPath:string){
16+
this.extensionPath=extensionPath
17+
18+
// Create and show a new webview panel
19+
this.panel=this.createWebviewPanel(vscode.ViewColumn.One)
1620

17-
privatereadonly_panel:vscode.WebviewPanel
18-
privatereadonly_extensionPath:string
19-
private_disposables:vscode.Disposable[]=[]
21+
// Set the webview's initial html content
22+
this.panel.webview.html=this.getHtmlForWebview()
2023

21-
publicstaticasynccreateOrShow(extensionPath:string):Promise<void>{
22-
// const hasActiveEditor = vscode.window.activeTextEditor
24+
// Listen for when the panel is disposed
25+
// This happens when the user closes the panel or when the panel is closed programatically
26+
this.panel.onDidDispose(()=>this.dispose(),null,this.disposables)
2327

24-
// if (!hasActiveEditor) {
25-
// throw new Error('Should have an open file on launch')
26-
// }
27-
constcolumn=vscode.ViewColumn.One
28+
// Handle messages from the webview
29+
constonReceive=(action:string|CR.Action)=>vscode.commands.executeCommand('coderoad.receive_action',action)
30+
this.panel.webview.onDidReceiveMessage(onReceive,null,this.disposables)
31+
console.log('webview loaded')
32+
}
2833

34+
publicasynccreateOrShow(column:number):Promise<void>{
2935
// If we already have a panel, show it.
3036
// Otherwise, create a new panel.
31-
if(ReactPanel.currentPanel){
32-
console.log('--- HAS CURRENT PANEL ---')
33-
ReactPanel.currentPanel._panel.reveal(column)
37+
if(this.panel&&this.panel.webview){
38+
console.log('reveal')
39+
this.panel.reveal(column)
3440
}else{
35-
ReactPanel.currentPanel=newReactPanel(extensionPath,column)
41+
console.log('make new panel')
42+
this.panel=this.createWebviewPanel(column)
43+
3644
}
3745
}
3846

39-
privateconstructor(extensionPath:string,column:vscode.ViewColumn){
40-
this._extensionPath=extensionPath
41-
47+
privatecreateWebviewPanel(column:number):vscode.WebviewPanel{
4248
constviewType='CodeRoad'
4349
consttitle='CodeRoad'
4450
constconfig={
4551
// Enable javascript in the webview
4652
enableScripts:true,
47-
4853
// And restric the webview to only loading content from our extension's `media` directory.
49-
localResourceRoots:[vscode.Uri.file(path.join(this._extensionPath,'build'))],
50-
54+
localResourceRoots:[vscode.Uri.file(path.join(this.extensionPath,'build'))],
5155
// prevents destroying the window when it is in the background
5256
retainContextWhenHidden:true,
5357
}
58+
returnvscode.window.createWebviewPanel(viewType,title,column,config)
59+
}
5460

55-
// Create and show a new webview panel
56-
this._panel=vscode.window.createWebviewPanel(viewType,title,column,config)
57-
58-
// Set the webview's initial html content
59-
this._panel.webview.html=this._getHtmlForWebview()
60-
61-
// Listen for when the panel is disposed
62-
// This happens when the user closes the panel or when the panel is closed programatically
63-
this._panel.onDidDispose(()=>this.dispose(),null,this._disposables)
64-
65-
// Handle messages from the webview
66-
this._panel.webview.onDidReceiveMessage(onReceive,null,this._disposables)
61+
privategetNonce():string{
62+
lettext=''
63+
constpossible='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
64+
for(leti=0;i<32;i++){
65+
text+=possible.charAt(Math.floor(Math.random()*possible.length))
66+
}
67+
returntext
6768
}
6869

6970
publicasyncpostMessage(action:CR.Action):Promise<void>{
71+
console.log('webview postMessage')
72+
console.log(action)
7073
// Send a message to the webview webview.
7174
// You can send any JSON serializable data.
72-
constsuccess=awaitthis._panel.webview.postMessage(action)
75+
constsuccess=awaitthis.panel.webview.postMessage(action)
7376
if(!success){
7477
thrownewError(`Message post failure:${JSON.stringify(action)}`)
7578
}
79+
console.log('postMessage sent')
7680
}
7781

7882
publicdispose():void{
79-
ReactPanel.currentPanel=undefined
80-
8183
// Clean up our resources
82-
this._panel.dispose()
84+
this.panel.dispose()
8385

84-
while(this._disposables.length){
85-
constx=this._disposables.pop()
86+
while(this.disposables.length){
87+
constx=this.disposables.pop()
8688
if(x){
8789
x.dispose()
8890
}
8991
}
9092
}
9193

92-
private_getHtmlForWebview():string{
94+
privategetHtmlForWebview():string{
9395

9496
// eslint-disable-next-line
95-
constmanifest=require(path.join(this._extensionPath,'build','asset-manifest.json'))
97+
constmanifest=require(path.join(this.extensionPath,'build','asset-manifest.json'))
9698
constmainScript=manifest.files['main.js']
9799
// grab first chunk
98100
constchunk=Object.keys(manifest.files).filter(f=>f.match(/^static\/js\/.+\.js$/))[0]
99101
constchunkScript=manifest.files[chunk]
100102
constmainStyle=manifest.files['main.css']
101103

102-
constscriptPathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainScript))
104+
constscriptPathOnDisk=vscode.Uri.file(path.join(this.extensionPath,'build',mainScript))
103105
constscriptUri=scriptPathOnDisk.with({scheme:'vscode-resource'})
104-
constchunkPathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',chunkScript))
106+
constchunkPathOnDisk=vscode.Uri.file(path.join(this.extensionPath,'build',chunkScript))
105107
constchunkUri=chunkPathOnDisk.with({scheme:'vscode-resource'})
106-
conststylePathOnDisk=vscode.Uri.file(path.join(this._extensionPath,'build',mainStyle))
108+
conststylePathOnDisk=vscode.Uri.file(path.join(this.extensionPath,'build',mainStyle))
107109
conststyleUri=stylePathOnDisk.with({scheme:'vscode-resource'})
108110

109111
// Use a nonce to whitelist which scripts can be run
110-
constnonce=getNonce()
111-
constnonce2=getNonce()
112-
constnonce3=getNonce()
112+
constnonce=this.getNonce()
113+
constnonce2=this.getNonce()
114+
constnonce3=this.getNonce()
113115

114-
constoutput=`<!DOCTYPE html>
116+
return`<!DOCTYPE html>
115117
<html lang="en">
116118
<head>
117119
<meta charset="utf-8">
@@ -121,7 +123,7 @@ class ReactPanel {
121123
<link rel="manifest" href="./manifest.json" />
122124
<link rel="stylesheet" type="text/css" href="${styleUri}">
123125
<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:;">
124-
<base href="${vscode.Uri.file(path.join(this._extensionPath,'build')).with({scheme:'vscode-resource'})}/">
126+
<base href="${vscode.Uri.file(path.join(this.extensionPath,'build')).with({scheme:'vscode-resource'})}/">
125127
<style></style>
126128
</head>
127129
@@ -133,9 +135,7 @@ class ReactPanel {
133135
<script nonce="${nonce3}" src="${scriptUri}"></script>
134136
</body>
135137
</html>`
136-
console.log(output)
137-
returnoutput
138138
}
139139
}
140140

141-
exportdefaultReactPanel
141+
exportdefaultReactWebView

‎src/editor/commands/index.ts

Lines changed: 76 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,84 @@
11
import*asvscodefrom'vscode'
2-
importstartfrom'./start'
3-
importReactPanelfrom'../views/createWebview'
4-
5-
// import runTest from './runTest'
6-
// import loadSolution from './loadSolution'
7-
// import quit from './quit'
2+
import{join}from'path'
3+
import{setStorage}from'../storage'
4+
importReactWebViewfrom'../ReactWebView'
5+
import*asCRfrom'typings'
86

97
constCOMMANDS={
10-
// TUTORIAL_SETUP: 'coderoad.tutorial_setup',
11-
START:'coderoad.start',
12-
OPEN_WEBVIEW:'coderoad.open_webview'
13-
// RUN_TEST: 'coderoad.test_run',
14-
// LOAD_SOLUTION: 'coderoad.solution_load',
15-
// QUIT: 'coderoad.quit',
8+
START:'coderoad.start',
9+
NEW_OR_CONTINUE:'coderoad.new_or_continue',
10+
OPEN_WEBVIEW:'coderoad.open_webview',
11+
SEND_STATE:'coderoad.send_state',
12+
SEND_DATA:'coderoad.send_data',
13+
RECEIVE_ACTION:'coderoad.receive_action',
14+
OPEN_FILE:'coderoad.open_file',
15+
RUN_TEST:'coderoad.test_run',
16+
}
17+
18+
interfaceCreateCommandProps{
19+
context:vscode.ExtensionContext,
20+
machine:CR.StateMachine,
21+
storage:any,
22+
git:any
1623
}
1724

25+
// React panel webview
26+
letwebview:any;
1827

19-
exportdefault(context:vscode.ExtensionContext):void=>{
20-
constcommands={
21-
[COMMANDS.START]:asyncfunctionstartCommand():Promise<void>{
22-
returnstart(context)
28+
exportconstcreateCommands=({ context, machine, storage, git}:CreateCommandProps)=>({
29+
// initialize
30+
[COMMANDS.START]:()=>{
31+
// set local storage workspace
32+
setStorage(context.workspaceState)
33+
34+
// activate machine
35+
webview=newReactWebView(context.extensionPath)
36+
console.log('webview',webview.panel.webview.postMessage)
37+
machine.activate()
2338
},
24-
[COMMANDS.OPEN_WEBVIEW]:()=>{
25-
ReactPanel.createOrShow(context.extensionPath);
39+
[COMMANDS.NEW_OR_CONTINUE]:async()=>{
40+
// verify that the user has a tutorial & progress
41+
// verify git is setup with a coderoad remote
42+
const[tutorial,progress,hasGit,hasGitRemote]=awaitPromise.all([
43+
storage.getTutorial(),
44+
storage.getProgress(),
45+
git.gitVersion(),
46+
git.gitCheckRemoteExists(),
47+
])
48+
constcanContinue=!!(tutorial&&progress&&hasGit&&hasGitRemote)
49+
console.log('canContinue',canContinue)
50+
// if a tutorial exists, 'CONTINUE'
51+
// otherwise start from 'NEW'
52+
machine.send(canContinue ?'CONTINUE' :'NEW')
2653
},
27-
// [COMMANDS.RUN_TEST]: runTest,
28-
// [COMMANDS.LOAD_SOLUTION]: loadSolution,
29-
// [COMMANDS.QUIT]: () => quit(context.subscriptions),
30-
}
31-
32-
for(constcmdincommands){
33-
constcommand:vscode.Disposable=vscode.commands.registerCommand(cmd,commands[cmd])
34-
context.subscriptions.push(command)
35-
}
36-
}
54+
// open React webview
55+
[COMMANDS.OPEN_WEBVIEW]:(column:number=vscode.ViewColumn.One)=>{
56+
webview.createOrShow(column);
57+
},
58+
// open a file
59+
[COMMANDS.OPEN_FILE]:async(relativeFilePath:string)=>{
60+
console.log(`OPEN_FILE${JSON.stringify(relativeFilePath)}`)
61+
try{
62+
constworkspaceRoot=vscode.workspace.rootPath
63+
if(!workspaceRoot){
64+
thrownewError('No workspace root path')
65+
}
66+
constabsoluteFilePath=join(workspaceRoot,relativeFilePath)
67+
constdoc=awaitvscode.workspace.openTextDocument(absoluteFilePath)
68+
awaitvscode.window.showTextDocument(doc,vscode.ViewColumn.One)
69+
}catch(error){
70+
console.log(`Failed to open file${relativeFilePath}`,error)
71+
}
72+
},
73+
// send messages to webview
74+
[COMMANDS.SEND_STATE]:(payload:{data:any,state:any})=>{
75+
webview.postMessage({type:'SET_STATE', payload})
76+
},
77+
[COMMANDS.SEND_DATA]:(payload:{data:any})=>{
78+
webview.postMessage({type:'SET_DATA', payload})
79+
},
80+
[COMMANDS.RECEIVE_ACTION]:(action:string|CR.Action)=>{
81+
console.log('onReceiveAction',action)
82+
machine.onReceive(action)
83+
}
84+
})

‎src/editor/commands/quit.ts

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

‎src/editor/commands/start.ts

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

0 commit comments

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