WIP: Deploy all examples that do not require a backend to GitHub Pages

.github/workflows/ghp.yml

@@ -0,0 +1,64 @@
+name: Build Production for GitHub Pages
+
+on:
+  push:
+   branches:
+     - "ghp"
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  ghp-build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Volta
+      uses: volta-cli/action@v4
+
+    - name: Use pnpm
+      uses: pnpm/action-setup@v3
+      with:
+        version: 9
+
+    - name: Install
+      shell: bash
+      run: |
+        npm ci
+
+    - name: Build
+      run: |
+        npm run report:versions
+        npm run build
+
+    - name: Build Production
+      run: |
+        npm run production:build
+
+    - name: Setup Pages
+      id: pages
+      uses: actions/configure-pages@v5
+
+    - name: Upload artifact
+      uses: actions/upload-pages-artifact@v3
+      with:
+        path: ./packages/examples/production/
+
+  ghp-deploy:
+    needs: ghp-build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/actions.yml → .github/workflows/main.yml

@@ -1,9 +1,9 @@
-name: Build
+name: Build, Lint and Test
 
 on:
   push:
     branches:
-      - '**'
+      - 'main'
     tags-ignore:
       - '**'
   pull_request:
@@ -13,10 +13,8 @@ on:
 
 jobs:
   build:
-    name: monaco-languageclient
     runs-on: ubuntu-latest
     timeout-minutes: 10
-    if: github.ref_name != 'verify'
 
     steps:
     - name: Checkout
@@ -52,31 +50,3 @@ jobs:
       run: |
         npm run report:versions
         npm run test:run
-
-    - name: Build production
-      if: github.ref_name == 'main'
-      shell: bash
-      run: |
-        npm run vite:build
-
-  verify:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    if: github.ref_name == 'verify'
-
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-
-    - name: Volta
-      uses: volta-cli/action@v4
-
-    - name: Use pnpm
-      uses: pnpm/action-setup@v3
-      with:
-        version: 9
-
-    - name: Execute verification
-      shell: bash
-      run: |
-        bash ./verify/buildAll.sh

.github/workflows/verify.yml

@@ -0,0 +1,29 @@
+name: Verification Builds
+
+on:
+  push:
+    branches:
+      - 'verify'
+  workflow_dispatch:
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Volta
+      uses: volta-cli/action@v4
+
+    - name: Use pnpm
+      uses: pnpm/action-setup@v3
+      with:
+        version: 9
+
+    - name: Execute verification
+      shell: bash
+      run: |
+        bash ./verify/buildAll.sh

.vscode/launch.json

@@ -30,6 +30,14 @@
           "webRoot": "${workspaceFolder}",
           "userDataDir": "${workspaceFolder}/.vscode/profile"
         },
+        {
+          "name": "Chrome Preview",
+          "type": "chrome",
+          "request": "launch",
+          "url": "http://localhost:20002",
+          "webRoot": "${workspaceFolder}/packages/examples/production",
+          "userDataDir": "${workspaceFolder}/.vscode/profile"
+        },
         {
           "type": "node",
           "request": "launch",

index.html

@@ -63,6 +63,10 @@ <h3>Multiple Languageclients</h3>
         <a href="./packages/examples/two_langauge_clients.html">Json & Python Languageclients & Language Server (Web Socket)</a>
         <br>
 
+        <h3>TypeScript</h3>
+        <a href="./packages/examples/ts.html">TypeScript Extension Host Worker</a>
+        <br>
+
         <h2>Monaco Editor React</h2>
         <a href="./packages/examples/react_statemachine.html">React: Langium Statemachine Language Client & Language Server (Worker)</a>
         <br>
@@ -71,9 +75,7 @@ <h2>Monaco Editor React</h2>
         <a href="./packages/examples/react_python.html">React: Python Language Client & Language Server (Web Socket)</a>
         <br>
 
-        <h3>monaco-editor related examples</h3>
-        <a href="./packages/examples/ts.html">Monaco Editor Wrapper TypeScript Example</a>
-        <br>
+        <h3>Staging</h3>
         <a href="./packages/examples/files.html">Files Testbed</a>
 
         <h2>Verification</h2>

package.json

@@ -42,8 +42,9 @@
     "watch:clean": "tsc --build tsconfig.build.json --clean",
     "watch": "tsc --build tsconfig.build.json --watch --verbose",
     "lint": "eslint",
-    "vite:build": "vite-node ./scripts/clean.ts --relativePath . --recursive --paths ./dist && vite build",
-    "vite:preview": "vite preview",
+    "production:build": "npm run production:build --workspace packages/examples",
+    "production:preview:build": "npm run production:preview:build --workspace packages/examples",
+    "production:preview": "npm run production:preview --workspace packages/examples",
     "dev": "vite",
     "dev:debug": "vite --debug --force",
     "report:versions": "echo Reporting versions: && echo tsc: && tsc --version && echo npm: && npm --version && echo node: && node --version && echo eslint: && eslint --version && echo vite: && vite --version  && echo vitest: && vitest --version",

packages/examples/.gitignore

@@ -3,3 +3,4 @@ resources/groovy/external
 resources/eclipse.jdt.ls/ls
 resources/eclipse.jdt.ls/*.tar.gz
 resources/vsix
+production

packages/examples/build/downloadResources.mts

@@ -12,7 +12,7 @@ export const getLocalDirectory = () => {
     return dirname(__filename);
 };
 
-const downloadVsix = async (url: string, targetDir: string, filename: string) => {
+const downloadResource = async (url: string, targetDir: string, filename: string) => {
     const target = resolve(targetDir, filename);
     if (existsSync(target)) {
         console.log(`Skipping download because ${target} already exists.`);
@@ -31,9 +31,9 @@ const downloadVsix = async (url: string, targetDir: string, filename: string) =>
 // Source: https://gist.github.com/wanglf/7acc591890dc0d8ceff1e7ec9af32a55?permalink_comment_id=4151555#gistcomment-4151555
 // https://marketplace.visualstudio.com/_apis/public/gallery/publishers/${publisher}/vsextensions/${extension}/${version}/vspackage
 
-await downloadVsix('https://marketplace.visualstudio.com/_apis/public/gallery/publishers/GitHub/vsextensions/github-vscode-theme/6.3.4/vspackage',
+await downloadResource('https://marketplace.visualstudio.com/_apis/public/gallery/publishers/GitHub/vsextensions/github-vscode-theme/6.3.4/vspackage',
     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 downloadResource('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');

packages/examples/clangd.html

@@ -5,6 +5,7 @@
     <title>Cpp Language Client & Clangd Language Server (Worker/Wasm)</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="./mini-coi.js" scope="./"></script>
     <link rel="stylesheet" href="style.css">
 </head>
 

packages/examples/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>monaco-languageclient Examples</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <div style="padding: 5px">
+        <h2>Examples</h2>
+
+        <h2>Monaco Editor Wrapper</h2>
+
+        <h3>Langium</h3>
+
+        <a href="./langium.html">Langium Grammar DSL Language Client & Language Server (Worker)</a>
+        <br>
+        <a href="./statemachine.html">Langium Statemachine Client & Language Server (Worker)</a>
+        <br>
+        Localizations: <a href="./statemachine.html?locale=de">German</a> <a href="./statemachine.html?locale=fr">French</a> and <a href="./statemachine.html?locale=es">Spanish</a><br>
+
+        <h3>Cpp / Clangd</h3>
+        <a href="./clangd.html">Cpp Language Client & Clangd Language Server (Worker/Wasm)</a>
+        <br>
+
+        <h3>JSON</h3>
+        <a href="./browser.html">Language Client Pure Browser Example</a>
+        <br>
+
+        <h3>TypeScript</h3>
+        <a href="./tsExtHost.html">TypeScript Extension Host Worker</a>
+        <br>
+
+        <h2>Monaco Editor React</h2>
+        <a href="./react_statemachine.html">React: Langium Statemachine Language Client & Language Server (Worker)</a>
+        <br>
+    </div>
+</body>
+
+</html>

packages/examples/package.json

@@ -98,6 +98,7 @@
     "@types/express": "~5.0.0",
     "@types/ws": "~8.5.12",
     "@types/emscripten": "~1.39.13",
+    "mini-coi": "~0.4.2",
     "langium-cli": "~3.2.0",
     "ts-node": "~10.9.1",
     "vscode-languageserver-types": "~3.17.5"
@@ -121,13 +122,17 @@
     "resources:download": "vite-node ./build/downloadResources.mts",
     "build:msg": "echo Building main examples:",
     "build": "npm run build:msg && npm run clean && npm run resources:download && npm run extract:docker && npm run compile",
-    "build:bundle": "vite --config vite.bundle.config.ts build",
     "start:server:files": "vite-node src/files/server/direct.ts",
     "start:server:json": "vite-node src/json/server/direct.ts",
     "start:server:python": "vite-node src/python/server/direct.ts",
     "start:server:groovy": "vite-node src/groovy/server/direct.ts",
     "start:server:jdtls": "vite-node src/eclipse.jdt.ls/server/direct.ts",
     "langium:generate": "langium generate --file ./src/langium/statemachine/config/langium-config.json",
-    "extract:docker": "vite-node ./resources/clangd/scripts/extractDockerFiles.ts"
+    "extract:docker": "vite-node ./resources/clangd/scripts/extractDockerFiles.ts",
+    "production:clean": "vite-node ../../scripts/clean.ts --relativePath packages/examples --recursive --paths production",
+    "production:copy:mini-coi": "mini-coi --service-worker production/mini-coi.js",
+    "production:build": "npm run production:clean && vite --config vite.config.deploy.ts build && npm run production:copy:mini-coi",
+    "production:preview:build": "npm run production:clean && vite --config vite.config.preview.ts build && npm run production:copy:mini-coi",
+    "production:preview": "vite --config vite.config.preview.ts preview"
   }
 }

packages/examples/vite.config.deploy.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import { buildBaseProductionConfig } from './vite.production.base.js';
+
+export default defineConfig(({ command }) => {
+    console.log(`Running: ${command}`);
+    const productionConfig = buildBaseProductionConfig();
+    productionConfig.base = 'https://typefox.github.io/monaco-languageclient/';
+    return productionConfig;
+});
+