WIP: Add new example Advanced Applicaton Playground

- 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
TypeFox · Oct 10, 2024 · 497cc60 · 497cc60
1 parent de5e0b2
commit 497cc60
Show file tree

Hide file tree

Showing 26 changed files with 398 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -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>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/examples/advanced.html b/packages/examples/advanced.html
@@ -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>
diff --git a/packages/examples/build/downloadResources.mts b/packages/examples/build/downloadResources.mts
@@ -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');
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "@codingame/monaco-vscode-configuration-service-override": "~10.0.1",
+    "@codingame/monaco-vscode-explorer-service-override": "~10.0.1",
     "@codingame/monaco-vscode-files-service-override": "~10.0.1",
     "@codingame/monaco-vscode-groovy-default-extension": "~10.0.1",
     "@codingame/monaco-vscode-keybindings-service-override": "~10.0.1",
@@ -72,6 +73,11 @@
     "@codingame/monaco-vscode-theme-service-override": "~10.0.1",
     "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.0.1",
     "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.0.1",
+    "@codingame/monaco-vscode-views-service-override": "~10.0.1",
+    "@codingame/monaco-vscode-view-banner-service-override": "~10.0.1",
+    "@codingame/monaco-vscode-view-status-bar-service-override": "~10.0.1",
+    "@codingame/monaco-vscode-view-title-bar-service-override": "~10.0.1",
+    "@codingame/monaco-vscode-workbench-service-override": "~10.0.1",
     "@typefox/monaco-editor-react": "~6.0.0-next.2",
     "express": "~4.21.1",
     "langium": "~3.2.0",

diff --git a/packages/examples/resources/advanced/hello.ts b/packages/examples/resources/advanced/hello.ts
@@ -0,0 +1,8 @@
+import { sayFoo } from './tester.js';
+
+function sayHello(): string {
+    console.log(sayFoo());
+    return 'Hello';
+};
+
+sayHello();
diff --git a/packages/examples/resources/advanced/style.css b/packages/examples/resources/advanced/style.css
@@ -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
+  }
diff --git a/packages/examples/resources/advanced/tester.ts b/packages/examples/resources/advanced/tester.ts
@@ -0,0 +1,3 @@
+export const sayFoo = () => {
+    return 'Foo';
+};
diff --git a/packages/examples/resources/advanced/views.html b/packages/examples/resources/advanced/views.html
@@ -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>
diff --git a/...ngium/langium-dsl/content/example.langium → ...urces/langium/langium-dsl/example.langium b/...ngium/langium-dsl/content/example.langium → ...urces/langium/langium-dsl/example.langium
diff --git a/...emachine/content/example-mod.statemachine → ...ium/statemachine/example-mod.statemachine b/...emachine/content/example-mod.statemachine → ...ium/statemachine/example-mod.statemachine
diff --git a/...statemachine/content/example.statemachine → ...langium/statemachine/example.statemachine b/...statemachine/content/example.statemachine → ...langium/statemachine/example.statemachine
diff --git a/packages/examples/src/python/client/bad.py → packages/examples/resources/python/bad.py b/packages/examples/src/python/client/bad.py → packages/examples/resources/python/bad.py
diff --git a/packages/examples/src/python/client/hello.py → packages/examples/resources/python/hello.py b/packages/examples/src/python/client/hello.py → packages/examples/resources/python/hello.py
diff --git a/...ages/examples/src/python/client/hello2.py → packages/examples/resources/python/hello2.py b/...ages/examples/src/python/client/hello2.py → packages/examples/resources/python/hello2.py
diff --git a/packages/examples/src/advanced/launcher.ts b/packages/examples/src/advanced/launcher.ts
@@ -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();