Skip to content

Commit

Permalink
WIP: Add new example Advanced Applicaton Playground
Browse files Browse the repository at this point in the history
- Allow to pass an url to import to the locale loader
- Integrate views service into new advanced example
- Move all code example files out of src into resources
  • Loading branch information
kaisalmen committed Oct 7, 2024
1 parent c81e4e1 commit 67f475d
Show file tree
Hide file tree
Showing 26 changed files with 398 additions and 20 deletions.
4 changes: 4 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ <h3>Multiple Languageclients</h3>
<a href="./packages/examples/two_langauge_clients.html">Json & Python Languageclients & Language Server (Web Socket)</a>
<br>

<h3>Advanced Application Playground</h3>
<a href="./packages/examples/advanced.html">Advanced Application Playground</a>
<br>

<h2>Monaco Editor React</h2>
<a href="./packages/examples/react_statemachine.html">React: Langium Statemachine Language Client & Language Server (Worker)</a>
<br>
Expand Down
15 changes: 15 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 22 additions & 0 deletions packages/examples/advanced.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Advanced Application Playground</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta http-equiv="Content-Security-Policy" content="connect-src 'self' http://localhost:* https://localhost:* http://127.0.0.1:* https://127.0.0.1:*;" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' http://localhost:* https://localhost:* http://127.0.0.1:* https://127.0.0.1:*;" /> -->
<link rel="stylesheet" href="./resources/advanced/style.css">
</head>

<body>
<h2>Advanced Application Playground</h2>
<script type="module">
import { initLocaleLoader } from 'monaco-editor-wrapper/vscode/locale';
const url = new URL('./src/advanced/launcher.ts', import.meta.url);
await initLocaleLoader(url.href);
</script>
</body>

</html>
2 changes: 1 addition & 1 deletion packages/examples/build/downloadResources.mts
Original file line number Diff line number Diff line change
Expand Up @@ -35,5 +35,5 @@ await downloadVsix('https://marketplace.visualstudio.com/_apis/public/gallery/pu
resolve(getLocalDirectory(), '../resources/vsix/'), 'github-vscode-theme.vsix');

// not yet used
await downloadVsix('https://marketplace.visualstudio.com/_apis/public/gallery/publishers/TypeFox/vsextensions/open-collaboration-tools/0.2.3/vspackage',
await downloadVsix('https://marketplace.visualstudio.com/_apis/public/gallery/publishers/TypeFox/vsextensions/open-collaboration-tools/0.2.4/vspackage',
resolve(getLocalDirectory(), '../resources/vsix/'), 'open-collaboration-tools.vsix');
6 changes: 6 additions & 0 deletions packages/examples/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
},
"dependencies": {
"@codingame/monaco-vscode-configuration-service-override": "~9.0.3",
"@codingame/monaco-vscode-explorer-service-override": "~9.0.3",
"@codingame/monaco-vscode-files-service-override": "~9.0.3",
"@codingame/monaco-vscode-groovy-default-extension": "~9.0.3",
"@codingame/monaco-vscode-keybindings-service-override": "~9.0.3",
Expand All @@ -72,6 +73,11 @@
"@codingame/monaco-vscode-theme-service-override": "~9.0.3",
"@codingame/monaco-vscode-typescript-basics-default-extension": "~9.0.3",
"@codingame/monaco-vscode-typescript-language-features-default-extension": "~9.0.3",
"@codingame/monaco-vscode-views-service-override": "~9.0.3",
"@codingame/monaco-vscode-view-banner-service-override": "~9.0.3",
"@codingame/monaco-vscode-view-status-bar-service-override": "~9.0.3",
"@codingame/monaco-vscode-view-title-bar-service-override": "~9.0.3",
"@codingame/monaco-vscode-workbench-service-override": "~9.0.3",
"@typefox/monaco-editor-react": "~6.0.0-next.2",
"express": "~4.21.0",
"langium": "~3.2.0",
Expand Down
8 changes: 8 additions & 0 deletions packages/examples/resources/advanced/hello.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { sayFoo } from './tester.js';

function sayHello(): string {
console.log(sayFoo());
return 'Hello';
};

sayHello();
59 changes: 59 additions & 0 deletions packages/examples/resources/advanced/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

body {
background-color: var(--vscode-editorWidget-background);
color: var(--vscode-editorWidget-foreground);
margin: 0;
}

#editors {
position: relative;
min-width: 0;
height: 45vh;
border: 1px solid var(--vscode-editorWidget-border);
}

#panel {
display: flex;
flex: 1;
border: 1px solid var(--vscode-editorWidget-border);
min-height: 0;
}

.standalone-editor {
width: 100%;
height: 55vh;
}

#titleBar {
position: relative;
flex: none;
}

#banner {
flex: none;
}

#workbench-container {
height: 90vh;
display: flex;
flex-direction: column
}

#workbench-top {
display: flex;
gap: 20px;
flex: 2;
min-height: 0
}
3 changes: 3 additions & 0 deletions packages/examples/resources/advanced/tester.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const sayFoo = () => {
return 'Foo';
};
21 changes: 21 additions & 0 deletions packages/examples/resources/advanced/views.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<div id="workbench-container">
<div id="titleBar"></div>
<div id="banner"></div>
<div id="workbench-top">
<div style="display: flex; flex: none; border: 1px solid var(--vscode-editorWidget-border)">
<div id="activityBar"></div>
<div id="sidebar" style="width: 400px"></div>
<div id="auxiliaryBar-left" style="max-width: 300px"></div>
</div>
<div style="flex: 1; min-width: 0">
<div id="editors"></div>
</div>
<div style="display: flex; flex: none; border: 1px solid var(--vscode-editorWidget-border);">
<div id="sidebar-right" style="max-width: 500px"></div>
<div id="activityBar-right"></div>
<div id="auxiliaryBar" style="max-width: 300px"></div>
</div>
</div>
<!-- <div id="panel"></div> -->
<div id="statusBar"></div>
</div>
File renamed without changes.
File renamed without changes.
8 changes: 8 additions & 0 deletions packages/examples/src/advanced/launcher.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/* --------------------------------------------------------------------------------------------
* Copyright (c) 2024 TypeFox and others.
* Licensed under the MIT License. See LICENSE in the package root for license information.
* ------------------------------------------------------------------------------------------ */

import { runAdvancedApplicationPlayground } from './main.js';

runAdvancedApplicationPlayground();
Loading

0 comments on commit 67f475d

Please sign in to comment.