lat5211/devstar_plugin
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: abstract and simplify the communication between home page and vscode

Browse Source 
* refactor the infertace in index.html
* adapt the change of interface in home page and vscode
This commit is contained in:
Levi Yan
2024-10-23 01:58:10 +08:00
parent 5672003901
commit 08168dfd3f
3 changed files with 49 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/home.ts
View File

@@ -29,20 +29,22 @@ export default class DSHome {
panel.webview.onDidReceiveMessage( panel.webview.onDidReceiveMessage(
async (message) => { async (message) => {
const data = message.data
switch (message.command) { switch (message.command) {
case 'firstOpenRemoteFolder': case 'firstOpenRemoteFolder':
await this.remoteContainer.firstConnect(message.host, message.username, message.port) const path = data.path
await this.remoteContainer.firstConnect(data.host, data.username, data.port)
.then((_res) => { .then((_res) => {
if (_res == 'success') { if (_res == 'success') {
// only success then open folder // only success then open folder
this.remoteContainer.openRemoteFolder(message.host, message.path); this.remoteContainer.openRemoteFolder(data.host, path);
} }
}).catch(error => { }).catch(error => {
console.error(`Failed to connect ${message.host}: `, error) console.error(`Failed to connect ${data.host}: `, error)
}) })
break; break;
case 'openRemoteFolder': case 'openRemoteFolder':
this.remoteContainer.openRemoteFolder(message.host, message.path); this.remoteContainer.openRemoteFolder(data.host, data.path);
break; break;
case 'getUserToken': case 'getUserToken':
const userToken = this.context.globalState.get('devstarUserToken') const userToken = this.context.globalState.get('devstarUserToken')
@@ -54,7 +56,7 @@ export default class DSHome {
break; break;
} }
case 'setUserToken': case 'setUserToken':
this.context.globalState.update('devstarUserToken', message.data.userToken) this.context.globalState.update('devstarUserToken', data.userToken)
console.log(this.context.globalState.get('devstarUserToken')) console.log(this.context.globalState.get('devstarUserToken'))
console.log(message.data.userToken) console.log(message.data.userToken)
if (message.data.userToken === this.context.globalState.get('devstarUserToken')) { if (message.data.userToken === this.context.globalState.get('devstarUserToken')) {

56
test/home.html
View File

@@ -214,21 +214,26 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
} }
async function getUserTokenFromVscode() { async function getUserTokenFromVscode() {
// const userToken = 'ecd9ceda7904f1f980b90f22be87329910cc6fb1' await communicateVSCodeByWebview('getUserToken', null)
const data = await biCommunication2Webview('getUserToken', null) .then(async data => {
const userToken = data.userToken const userToken = data.userToken
if (userToken === 'none') { if (userToken === 'none') {
// do nothing // do nothing
} else { } else {
// verify user token // verify user token
await verifyToken(userToken) await verifyToken(userToken)
.then(result => { .then(result => {
USERTOKEN = userToken USERTOKEN = userToken
}) })
.catch(error => { .catch(error => {
console.error('Error in verifying token:', error) console.error('Error in verifying token:', error)
}) })
} }
})
.catch(error => [
console.log('Failed to get user token: ', error)
])
} }
function verifyToken(token) { function verifyToken(token) {
@@ -306,7 +311,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
.then(data => { .then(data => {
// store token in global variable and vscode global state // store token in global variable and vscode global state
USERTOKEN = data.sha1; USERTOKEN = data.sha1;
biCommunication2Webview('setUserToken', { userToken: USERTOKEN }) communicateVSCodeByWebview('setUserToken', { userToken: USERTOKEN })
.then(result => { .then(result => {
if (result.ok) { if (result.ok) {
console.log('User token has been set to vscode global state') console.log('User token has been set to vscode global state')
@@ -340,7 +345,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
function logout() { function logout() {
// remove token from global variable and vscode global state // remove token from global variable and vscode global state
USERTOKEN = null USERTOKEN = null
biCommunication2Webview('setUserToken', { userToken: 'none'}) communicateVSCodeByWebview('setUserToken', { userToken: 'none'})
.then(result => { .then(result => {
if (result.ok) { if (result.ok) {
console.log('User token has been removed from vscode global state') console.log('User token has been removed from vscode global state')
@@ -361,7 +366,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
tableBody.innerHTML = ''; tableBody.innerHTML = '';
// load new data // load new data
var url = DEVSTAR_HOME + "/api/v1/user/repos?page=1&limit=10" var url = DEVSTAR_HOME + "/api/v1/user/repos?page=1&limit=20"
var token = USERTOKEN var token = USERTOKEN
fetch(url, { fetch(url, {
method: 'GET', method: 'GET',
@@ -536,6 +541,8 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
console.log("There has a problem when check if the repo has devContainer:", error) console.log("There has a problem when check if the repo has devContainer:", error)
}) })
console.log("opening project")
// open devcontainer through repoId // open devcontainer through repoId
var url = DEVSTAR_HOME + "/api/devcontainer" var url = DEVSTAR_HOME + "/api/devcontainer"
var token = USERTOKEN var token = USERTOKEN
@@ -572,8 +579,8 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
const devContainerPort = data.data.devContainerPort const devContainerPort = data.data.devContainerPort
const devContainerWorkDir = '/data/workspace' const devContainerWorkDir = '/data/workspace'
// default: open with password // default: open with key
firstOpenRemoteFolder(devContainerHost, devContainerUsername, devContainerPassword, devContainerPort, devContainerWorkDir) communicateVSCodeByWebview('firstOpenRemoteFolder', {host: `${devContainerHost}`, username: `${devContainerUsername}`, port: `${devContainerPort}`, path: `${devContainerWorkDir}`})
} else { } else {
// TODO: show Error to User // TODO: show Error to User
showAlert("打开容器失败！", 1500) showAlert("打开容器失败！", 1500)
@@ -670,7 +677,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
async function getDefaultPublicKeyFromVSCode() { async function getDefaultPublicKeyFromVSCode() {
try { try {
const data = await biCommunication2Webview('getDefaultPublicKey', null); const data = await communicateVSCodeByWebview('getDefaultPublicKey', null);
const defaultPublicKey = data.defaultPublicKey; const defaultPublicKey = data.defaultPublicKey;
return defaultPublicKey; return defaultPublicKey;
@@ -720,17 +727,18 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
}, duration); // 消息显示 duration/1000 秒后消失 }, duration); // 消息显示 duration/1000 秒后消失
} }
async function biCommunication2Webview(action, data) { async function communicateVSCodeByWebview(action, data) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// request to webview // request to webview
window.parent.postMessage({ action: action, data: data }, '*'); window.parent.postMessage({ target: "vscode", action: action, data: data }, '*');
// response from webview // response from webview
function handleResponse(event) { function handleResponse(event) {
const jsonData = event.data const jsonData = event.data
if (jsonData.action === action) { if (jsonData.action === action) {
console.log("biCommunication2Webview", jsonData)
// return webview response // return webview response
console.log("dataFromVSCodeByWebview", jsonData.data)
window.removeEventListener('message', handleResponse) // 清理监听器 window.removeEventListener('message', handleResponse) // 清理监听器
resolve(jsonData.data) resolve(jsonData.data)
} }

44
test/index.html
View File

@@ -52,7 +52,7 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
} }
async function biCommunication2Vscode(command, data) { async function communicateVSCode(command, data) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// request to vscode // request to vscode
vscode.postMessage({ command: command, data: data }) vscode.postMessage({ command: command, data: data })
@@ -60,8 +60,9 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
function handleResponse(event) { function handleResponse(event) {
const jsonData = event.data; const jsonData = event.data;
if (jsonData.command === command) { if (jsonData.command === command) {
// console.log("communicateVSCode", jsonData.data)
// return vscode response // return vscode response
console.log("biCommunication2Vscode", jsonData.data)
window.removeEventListener('message', handleResponse) // 清理监听器 window.removeEventListener('message', handleResponse) // 清理监听器
resolve(jsonData.data) resolve(jsonData.data)
} }
@@ -84,40 +85,15 @@ header("Allow: GET, POST, OPTIONS, PUT, DELETE");
// } // }
try { try {
const jsonData = event.data; const jsonData = event.data;
if (jsonData.action === 'firstOpenRemoteFolder') {
console.log('Received message:', jsonData);
firstOpenRemoteFolderWithData(jsonData.host, jsonData.username, jsonData.password, jsonData.port, jsonData.path);
} else if (jsonData.action === 'openRemoteFolder') { if (jsonData.target === 'vscode') {
console.log('Received message:', jsonData); const actionFromHome = jsonData.action
openRemoteFolderWithData(jsonData.host, jsonData.path); const dataFromHome = jsonData.data
const dataFromVSCodeResponse = await communicateVSCode(actionFromHome, dataFromHome)
} else if (jsonData.action === 'getUserToken') {
// request user token from vscode global state
const data = await biCommunication2Vscode('getUserToken', {})
var iframe = document.getElementById('embedded-devstar'); var iframe = document.getElementById('embedded-devstar');
if (iframe && iframe.contentWindow) { if(iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage({ action: 'getUserToken', data: data}, '*'); iframe.contentWindow.postMessage({action: actionFromHome, data: dataFromVSCodeResponse}, '*')
}
} else if (jsonData.action === 'setUserToken') {
// set user token to vscode global state
await biCommunication2Vscode('setUserToken', jsonData.data)
.then((data) => {
var iframe = document.getElementById('embedded-devstar');
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage({ action: 'setUserToken', data: data}, '*');
}
})
.catch((err) => {
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage({ action: 'setUserToken', data: {ok: false}}, '*');
}
});
} else if (jsonData.action === 'getDefaultPublicKey') {
const data = await biCommunication2Vscode('getDefaultPublicKey', {})
var iframe = document.getElementById('embedded-devstar')
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage({ action: 'getDefaultPublicKey', data: data}, "*")
} }
} }
} catch (error) { } catch (error) {