Skip to content

Commit d92eea8

Browse files
kaisalmenkaisalmen
committed
fix: react comp works with views service
- init sets the currentRef.current and sub-sequently allows to init the views properly - Added a react version of the app playground - Add storage service to appPlayground - commented WA: show explorer view when search is included - dependency update
1 parent 5470343 commit d92eea8

27 files changed

+500
-163
lines changed

‎index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,10 @@ <h3>TypeScript</h3>
8686
<br>
8787

8888
<h2>Monaco Editor React</h2>
89-
<a href="./packages/examples/react_statemachine.html">React: Langium Statemachine Language Client & Language Server (Worker)</a>
90-
<br>
89+
<a href="./packages/examples/react_appPlayground.html">React: Application Playground</a>
9190
<br>
91+
<a href="./packages/examples/react_statemachine.html">React: Langium Statemachine Language Client & Language Server (Worker)</a>
92+
<br><br>
9293
Please execute <b><code>npm run start:example:server:python</code></b> beforehand:<br>
9394
<a href="./packages/examples/react_python.html">React: Python Language Client & Language Server (Web Socket)</a>
9495
<br>

‎package-lock.json

Lines changed: 161 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/client/src/vscode/services.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export interface UserConfiguration {
3030
export interface ViewsConfig {
3131
viewServiceType: 'EditorService' | 'ViewsService' | 'WorkspaceService';
3232
openEditorFunc?: OpenEditor;
33+
htmlAugmentationInstructions?: (htmlContainer: HTMLElement | null | undefined) => void;
3334
viewsInitFunc?: () => void;
3435
}
3536

@@ -110,6 +111,7 @@ export const initServices = async (vscodeApiConfig: VscodeApiConfig, instruction
110111
}
111112
await importAllServices(vscodeApiConfig, instructions);
112113

114+
vscodeApiConfig.viewsConfig?.htmlAugmentationInstructions?.(instructions?.htmlContainer);
113115
vscodeApiConfig.viewsConfig?.viewsInitFunc?.();
114116
instructions?.logger?.debug('Initialization of vscode services completed successfully.');
115117

‎packages/examples/appPlayground.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@
1111

1212
<body>
1313
<div class="exampleHeadelineDiv">
14-
<b class="exampleHeadeline">Application Playground</b> - [<a href="../../index.html">Back to Index</a>]
15-
<br>
16-
<b>Heads up:</b> This is a prototype and still evolving.
14+
<b class="exampleHeadeline">Application Playground</b> - [<a href="../../index.html">Back to Index</a>] <b>Heads up:</b> This is a prototype and still evolving.
1715
</div>
1816
<script type="module" rel="modulepreload" src="./src/appPlayground/launcher"></script>
1917
</body>

‎packages/examples/ghp_appPlayground.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,14 @@
55
<title>Application Playground</title>
66
<meta charset="UTF-8" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<script src="./mini-coi.js" scope="./"></script>
89
<link rel="stylesheet" href="style.css">
910
<link rel="stylesheet" href="./resources/styles/views.css">
1011
</head>
1112

1213
<body>
1314
<div class="exampleHeadelineDiv">
14-
<b class="exampleHeadeline">Application Playground</b> - [<a href="./index.html">Back to Index</a>]
15-
<br>
16-
<b>Heads up:</b> This is a prototype and still evolving.
15+
<b class="exampleHeadeline">Application Playground</b> - [<a href="./index.html">Back to Index</a>] <b>Heads up:</b> This is a prototype and still evolving.
1716
</div>
1817
<script type="module" rel="modulepreload" src="./src/appPlayground/launcher"></script>
1918
</body>

‎packages/examples/ghp_react_appPlayground.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Application Playground</title>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<script src="./mini-coi.js" scope="./"></script>
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="stylesheet" href="./resources/styles/views.css">
11+
</head>
12+
13+
<!-- body style of vscode theme are not applied when embedded in react -->
14+
<body style="background-color: #1f1f1f; color: #cccccc;">
15+
<div class="exampleHeadelineDiv">
16+
<b class="exampleHeadeline">Application Playground</b> - [<a href="./index.html">Back to Index</a>] <b>Heads up:</b> This is a prototype and still evolving.
17+
<br>
18+
<button type="button" id="button-start">Start</button>
19+
<label>Enable Strict mode:</label><input type="checkbox" id="checkbox-strictmode" />
20+
</div>
21+
<div id="react-root"></div>
22+
<script type="module" rel="modulepreload" src="./src/appPlayground/reactLauncher"></script>
23+
</body>
24+
25+
</html>

‎packages/examples/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@
8585
"@codingame/monaco-vscode-localization-service-override": "~11.1.2",
8686
"@codingame/monaco-vscode-python-default-extension": "~11.1.2",
8787
"@codingame/monaco-vscode-remote-agent-service-override": "~11.1.2",
88+
"@codingame/monaco-vscode-search-result-default-extension": "~11.1.2",
89+
"@codingame/monaco-vscode-search-service-override": "~11.1.2",
8890
"@codingame/monaco-vscode-secret-storage-service-override": "~11.1.2",
8991
"@codingame/monaco-vscode-standalone-json-language-features": "~11.1.2",
9092
"@codingame/monaco-vscode-standalone-languages": "~11.1.2",

‎packages/examples/react_appPlayground.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Application Playground</title>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="./resources/styles/views.css">
10+
</head>
11+
12+
<!-- body style of vscode theme are not applied when embedded in react -->
13+
<body style="background-color: #1f1f1f; color: #cccccc;">
14+
<div class="exampleHeadelineDiv">
15+
<b class="exampleHeadeline">Application Playground</b> - [<a href="../../index.html">Back to Index</a>] <b>Heads up:</b> This is a prototype and still evolving.
16+
<br>
17+
<button type="button" id="button-start">Start</button>
18+
<label>Enable Strict mode:</label><input type="checkbox" id="checkbox-strictmode" />
19+
</div>
20+
<div id="react-root"></div>
21+
<script type="module" rel="modulepreload" src="./src/appPlayground/reactLauncher"></script>
22+
</body>
23+
24+
</html>

‎packages/examples/resources/appPlayground/hello.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { sayFoo } from './tester.js';
2-
31
function sayHello(): string {
2+
// intentionally erroneous to test import resolution
43
console.log(sayFoo());
54
return 'Hello';
65
};

‎packages/examples/src/appPlayground/common.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* --------------------------------------------------------------------------------------------
2+
* Copyright (c) 2024 TypeFox and others.
3+
* Licensed under the MIT License. See LICENSE in the package root for license information.
4+
* ------------------------------------------------------------------------------------------ */
5+
6+
import * as vscode from 'vscode';
7+
import { getService, IWorkbenchLayoutService } from 'vscode/services';
8+
import { RegisterLocalProcessExtensionResult } from 'vscode/extensions';
9+
import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
10+
import { ConfigResult } from './config.js';
11+
12+
export const configurePostStart = async (wrapper: MonacoEditorLanguageClientWrapper, configResult: ConfigResult) => {
13+
const result = wrapper.getExtensionRegisterResult('mlc-app-playground') as RegisterLocalProcessExtensionResult;
14+
result.setAsDefaultApi();
15+
16+
// currently unused
17+
await getService(IWorkbenchLayoutService);
18+
19+
// WA: Force show explorer and not search
20+
// await vscode.commands.executeCommand('workbench.view.explorer');
21+
22+
await Promise.all([
23+
await vscode.workspace.openTextDocument(configResult.helloTsUri),
24+
await vscode.workspace.openTextDocument(configResult.testerTsUri)
25+
]);
26+
27+
await Promise.all([
28+
await vscode.window.showTextDocument(configResult.helloTsUri)
29+
]);
30+
31+
console.log('Application Playground started');
32+
};

0 commit comments

Comments
 (0)