Skip to content

Commit 2b3b647

Browse files
christianalfonichristianalfoni
committed
feat(overmind-devtools-vscode): now handling port exists and refactored extension
1 parent 9fa8bf0 commit 2b3b647

File tree

5 files changed

+351
-134
lines changed

5 files changed

+351
-134
lines changed

‎packages/node_modules/overmind-devtools-client/DevtoolBackend.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,90 @@ class DevtoolBackend {
9292
)
9393
}
9494
}
95+
getChangePortMarkup(port, onPortSubmit, onRestart) {
96+
return `<!DOCTYPE html>
97+
<html lang="en">
98+
<head>
99+
<meta charset="UTF-8" />
100+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
101+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
102+
<title>Document</title>
103+
<link
104+
href="https://fonts.googleapis.com/css?family=Source+Code+Pro"
105+
rel="stylesheet"
106+
/>
107+
<link
108+
href="https://fonts.googleapis.com/css?family=Nunito:400,700"
109+
rel="stylesheet"
110+
/>
111+
<script type="text/javascript">
112+
${onPortSubmit.toString()}
113+
114+
${onRestart.toString()}
115+
116+
function handleFormSubmit(event) {
117+
event.preventDefault()
118+
var input = document.querySelector('#port-input')
119+
input.setAttribute('disabled', true)
120+
${onPortSubmit.name}(input.value)
121+
}
122+
</script>
123+
<style>
124+
html, body {
125+
margin: 0;
126+
padding: 0;
127+
height: 100vh;
128+
background-color: hsl(206, 57%, 13%);
129+
}
130+
.wrapper {
131+
display: flex;
132+
align-items: center;
133+
justify-content: center;
134+
height: 100%;
135+
}
136+
.inner-wrapper {
137+
display: flex;
138+
flex-direction: column;
139+
align-items: center;
140+
}
141+
h1 {
142+
color: white;
143+
}
144+
input {
145+
border: 0;
146+
border-radius: 3px;
147+
width: 200px;
148+
padding: 1rem;
149+
font-size: 18px;
150+
outline: none;
151+
}
152+
button {
153+
padding: 1rem;
154+
border: 0;
155+
outline: 0;
156+
color: white;
157+
background-color: #fac863;
158+
margin: 1rem;
159+
font-size: 18px;
160+
border-radius: 3px;
161+
cursor: pointer;
162+
}
163+
</style>
164+
</head>
165+
<body>
166+
<div class="wrapper">
167+
<div class="inner-wrapper">
168+
<h1>The port ${port} is in use</h1>
169+
<form onsubmit="handleFormSubmit(event)">
170+
<input id="port-input" type="text" placeholder="New port..." />
171+
</form>
172+
<button onclick="${onRestart.name}()">restart</button>
173+
</div>
174+
</div>
175+
</body>
176+
</html>
177+
`
178+
}
95179
getMarkup(scriptSource, port) {
96180
return `<!DOCTYPE html>
97181
<html lang="en">

‎packages/node_modules/overmind-devtools-vscode/src/DevtoolsPanel.ts‎

Lines changed: 45 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,91 +2,70 @@ import * as vscode from 'vscode'
22
import { log } from './utils/Logger'
33
import * as path from 'path'
44

5-
export class DevtoolsPanel {
6-
public static currentPanel: DevtoolsPanel | undefined
5+
type Options = {
6+
context: vscode.ExtensionContext
7+
onMessage: (command: string, text: string) => void
8+
onDispose: () => void
9+
}
710

11+
export class DevtoolsPanel {
812
public static viewType = 'overmindDevtools'
913

10-
private readonly _panel: vscode.WebviewPanel
11-
12-
private _disposables: vscode.Disposable[] = []
13-
14-
public static markup: string = ''
14+
private readonly _options: Options
1515

16-
private constructor(panel: vscode.WebviewPanel, extensionPath: string) {
17-
this._panel = panel
18-
this.update()
19-
20-
this._panel.onDidDispose(() => this.dispose(), null, this._disposables)
21-
22-
this._panel.onDidChangeViewState(
23-
(e) => {
24-
if (this._panel.visible) {
25-
this.update()
26-
}
27-
},
28-
null,
29-
this._disposables
30-
)
16+
private _panel!: vscode.WebviewPanel
3117

32-
this._panel.webview.onDidReceiveMessage(
33-
(message) => {
34-
switch (message.command) {
35-
case 'alert':
36-
vscode.window.showErrorMessage(message.text)
37-
}
38-
},
39-
null,
40-
this._disposables
41-
)
18+
constructor(options: Options) {
19+
this._options = options
4220
}
43-
44-
dispose(): any {
45-
DevtoolsPanel.currentPanel = undefined
46-
this._panel.dispose()
47-
while (this._disposables.length) {
48-
const x = this._disposables.pop()
49-
if (x) {
50-
x.dispose()
51-
}
21+
show(content: string) {
22+
if (this._panel) {
23+
this._panel.dispose()
5224
}
53-
}
5425

55-
private update() {
56-
log('Extension.update')
57-
this._panel.webview.html = this.getHtmlForWevbiew()
58-
}
59-
60-
private getHtmlForWevbiew(): string {
61-
return DevtoolsPanel.markup
62-
}
63-
64-
static createOrShow(extensionPath: string) {
65-
const column = vscode.window.activeTextEditor
66-
? vscode.window.activeTextEditor.viewColumn
67-
: undefined
68-
69-
if (DevtoolsPanel.currentPanel) {
70-
DevtoolsPanel.currentPanel._panel.reveal(column)
71-
return
72-
}
73-
const panel = vscode.window.createWebviewPanel(
26+
this._panel = vscode.window.createWebviewPanel(
7427
DevtoolsPanel.viewType,
7528
'Overmind',
76-
column || vscode.ViewColumn.One,
29+
this.getColumn(),
7730
{
7831
enableScripts: true,
7932
retainContextWhenHidden: true,
8033
localResourceRoots: [
81-
vscode.Uri.file(path.join(extensionPath, 'devtoolsDist')),
34+
vscode.Uri.file(
35+
path.join(this._options.context.extensionPath, 'devtoolsDist')
36+
),
8237
],
8338
}
8439
)
8540

86-
DevtoolsPanel.currentPanel = new DevtoolsPanel(panel, extensionPath)
41+
this._panel.webview.onDidReceiveMessage(
42+
(message) => {
43+
this._options.onMessage(message.command, message.text)
44+
},
45+
null,
46+
this._options.context.subscriptions
47+
)
48+
49+
this._panel.onDidDispose(
50+
() => {
51+
delete this._panel
52+
this._options.onDispose()
53+
},
54+
null,
55+
this._options.context.subscriptions
56+
)
57+
this._panel.webview.html = content
58+
this._panel.reveal(this.getColumn())
8759
}
8860

89-
static revive(webViewPanel: vscode.WebviewPanel, extensionPath: string) {
90-
DevtoolsPanel.currentPanel = new DevtoolsPanel(webViewPanel, extensionPath)
61+
private getColumn() {
62+
if (
63+
vscode.window.activeTextEditor &&
64+
vscode.window.activeTextEditor.viewColumn
65+
) {
66+
return vscode.window.activeTextEditor.viewColumn
67+
}
68+
69+
return vscode.ViewColumn.One
9170
}
9271
}

‎packages/node_modules/overmind-devtools-vscode/src/DevtoolsPanel_old.ts‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import * as vscode from 'vscode'
2+
import { log } from './utils/Logger'
3+
import * as path from 'path'
4+
5+
export class DevtoolsPanel {
6+
public static currentPanel: DevtoolsPanel | undefined
7+
8+
public static viewType = 'overmindDevtools'
9+
10+
private readonly _panel: vscode.WebviewPanel
11+
12+
private _disposables: vscode.Disposable[] = []
13+
14+
public static markup: string = ''
15+
16+
private constructor(panel: vscode.WebviewPanel, extensionPath: string) {
17+
this._panel = panel
18+
this.update()
19+
20+
this._panel.onDidDispose(() => this.dispose(), null, this._disposables)
21+
22+
this._panel.onDidChangeViewState(
23+
(e) => {
24+
if (this._panel.visible) {
25+
this.update()
26+
}
27+
},
28+
null,
29+
this._disposables
30+
)
31+
32+
this._panel.webview.onDidReceiveMessage(
33+
(message) => {
34+
switch (message.command) {
35+
case 'alert':
36+
vscode.window.showErrorMessage(message.text)
37+
}
38+
},
39+
null,
40+
this._disposables
41+
)
42+
}
43+
44+
dispose(): any {
45+
DevtoolsPanel.currentPanel = undefined
46+
this._panel.dispose()
47+
while (this._disposables.length) {
48+
const x = this._disposables.pop()
49+
if (x) {
50+
x.dispose()
51+
}
52+
}
53+
}
54+
55+
private update() {
56+
log('Extension.update')
57+
this._panel.webview.html = this.getHtmlForWevbiew()
58+
}
59+
60+
private getHtmlForWevbiew(): string {
61+
return DevtoolsPanel.markup
62+
}
63+
64+
static createOrShow(extensionPath: string, onDispose: (e: void) => any) {
65+
const column = vscode.window.activeTextEditor
66+
? vscode.window.activeTextEditor.viewColumn
67+
: undefined
68+
69+
if (DevtoolsPanel.currentPanel) {
70+
DevtoolsPanel.currentPanel._panel.reveal(column)
71+
return
72+
}
73+
const panel = vscode.window.createWebviewPanel(
74+
DevtoolsPanel.viewType,
75+
'Overmind',
76+
column || vscode.ViewColumn.One,
77+
{
78+
enableScripts: true,
79+
retainContextWhenHidden: true,
80+
localResourceRoots: [
81+
vscode.Uri.file(path.join(extensionPath, 'devtoolsDist')),
82+
],
83+
}
84+
)
85+
panel.onDidDispose(onDispose)
86+
DevtoolsPanel.currentPanel = new DevtoolsPanel(panel, extensionPath)
87+
}
88+
89+
static revive(webViewPanel: vscode.WebviewPanel, extensionPath: string) {
90+
DevtoolsPanel.currentPanel = new DevtoolsPanel(webViewPanel, extensionPath)
91+
}
92+
}

0 commit comments

Comments
 (0)