Skip to content

Commit

Permalink
Add electron example app
Browse files Browse the repository at this point in the history
- Add an electron example app in addition to the browser app.
This allows use to also test the electron use case and makes it easier to discover electron specific issues.
- Adapt the build scripts to the same convention as used in the Theia repository.
   - yarn (install) only compiles the ts sources but does not build any example app
   - Example apps have to be built explicitly with `yarn browser build` or `yarn electron build`
- Rename glsp debug arugment to avoid clashes with nodes debug argument
- Update readmes and launch configs
- Update Jenkins file
- Update grid and tool palette styling
-  Update example1.wf
- Allow reuse of `createDiagramWidgetFactory` for custom diagram widget
- Add temporary workaround to remove @vscode/ripgrep postinstall script which often fails the build to rate limits. Can be removed once we have access to the github token in the ci. i.e. switch to GH actions
  • Loading branch information
tortmayr committed Jun 20, 2024
1 parent 37da898 commit 1848cb8
Show file tree
Hide file tree
Showing 18 changed files with 1,608 additions and 945 deletions.
7 changes: 4 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@ yarn-error.log

*.log

examples/browser-app/src-gen/
examples/browser-app/gen-webpack.config.js
examples/browser-app/gen-webpack.node.config.js
examples/*-app/src-gen/
examples/*-app/gen-webpack.config.js
examples/*-app/gen-webpack.node.config.js

examples/**/server/**
!examples/**/server/download.ts
tsconfig.tsbuildinfo
eslint.xml
.browser_modules
52 changes: 49 additions & 3 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
"--no-cluster",
"--root-dir=${workspaceRoot}/examples/workspace",
"--app-project-path=${workspaceRoot}/examples/browser-app",
"--debug",
"--glspDebug",
"--loglevel=debug",
"--integratedNode"
],
Expand Down Expand Up @@ -119,7 +119,7 @@
"--no-cluster",
"--root-dir=${workspaceRoot}/examples/workspace",
"--app-project-path=${workspaceRoot}/examples/browser-app",
"--debug",
"--glspDebug",
"--logLevel=debug"
],
"env": {
Expand Down Expand Up @@ -154,7 +154,7 @@
"--no-cluster",
"--root-dir=${workspaceRoot}/examples/workspace",
"--app-project-path=${workspaceRoot}/examples/browser-app",
"--debug",
"--glspDebug",
"--logLevel=debug"
],
"env": {
Expand Down Expand Up @@ -222,6 +222,47 @@
"order": 2
},
"runtimeArgs": ["--incognito"]
},
{
"type": "node",
"request": "launch",
"name": "Launch Workflow Electron Backend",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"cwd": "${workspaceFolder}/examples/electron-app",
"protocol": "inspector",
"args": [
".",
"--root-dir=${workspaceRoot}/examples/workspace",
"--log-level=debug",
"--hostname=localhost",
"--no-cluster",
"--app-project-path=${workspaceFolder}/examples/electron-app",
"--remote-debugging-port=9222",
"--no-app-auto-install"
],
"env": {
"NODE_ENV": "development"
},
"sourceMaps": true,
"outFiles": [
"${workspaceFolder}/examples/electron-app/lib/backend/electron-main.js",
"${workspaceFolder}/examples/electron-app/lib/backend/main.js",
"${workspaceFolder}/examples/electron-app/lib/**/*.js",
"${workspaceFolder}/packages/*/lib/**/*.js"
],
"smartStep": true,
"internalConsoleOptions": "openOnSessionStart",
"outputCapture": "std"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Electron Frontend",
"port": 9222,
"webRoot": "${workspaceFolder}/examples/electron-app"
}
],
"compounds": [
Expand All @@ -245,6 +286,11 @@
"Launch Workflow Browser Frontend"
],
"stopAll": true
},
{
"name": "Launch Workflow Electron Backend & Frontend",
"configurations": ["Launch Workflow Electron Backend", "Attach to Electron Frontend"],
"stopAll": true
}
]
}
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@

- [rpc] Ensure that the GLSP client properly reconnects to the backend after a temporary connection loss [#197](https://github.com/eclipse-glsp/glsp-theia-integration/pull/197) [#203](https://github.com/eclipse-glsp/glsp-theia-integration/pull/203)
- [diagram] Fix a bug that prevented proper disposal of the hidden diagram div after closing a diagram editor [#204](https://github.com/eclipse-glsp/glsp-theia-integration/pull/204)
- [diagram] Improve `createDiagramWidgetFactory` utility function to also support factories for GLSPDiagramWidget subclasses [#211](https://github.com/eclipse-glsp/glsp-theia-integration/pull/211)

### Potentially Breaking Changes

- [launch] Changed the `GLSPServerContributionOptions.debugArgument` from `debug` to `glspDebug` to avoid clashes with nodes `debug` argument. Launch configurations and scripts need to be updated accordingly. [#211](https://github.com/eclipse-glsp/glsp-theia-integration/pull/211)

## [2.1.0- 24/01/2024](https://github.com/eclipse-glsp/glsp-theia-integration/releases/tag/v2.1.0)

Expand Down
6 changes: 4 additions & 2 deletions Jenkinsfile
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ spec:
tty: true
resources:
limits:
memory: "2Gi"
memory: "4Gi"
cpu: "1"
requests:
memory: "2Gi"
memory: "4Gi"
cpu: "1"
command:
- cat
Expand Down Expand Up @@ -45,6 +45,7 @@ pipeline {
SPAWN_WRAP_SHIM_ROOT = "${env.WORKSPACE}"
EMAIL_TO= "[email protected]"
PUPPETEER_SKIP_DOWNLOAD="true"
ELECTRON_SKIP_BINARY_DOWNLOAD=1
}

stages {
Expand All @@ -53,6 +54,7 @@ pipeline {
timeout(30) {
container('node') {
sh "yarn install --unsafe-perm"
sh "yarn browser build"
script {
// Fail the step if there are uncommited changes to the yarn.lock file
if (sh(returnStatus: true, script: 'git diff --name-only | grep -q "^yarn.lock"') == 0) {
Expand Down
32 changes: 27 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,28 @@ Clone this repository and build Theia-Integration packages:
yarn install
```

To build the browser application execute:

```bash
yarn browser build
```

Next, start the Theia application, and point your browser to [localhost:3000](http://localhost:3000):

```bash
yarn start
yarn browser start
```

To build the Electron application execute:

```bash
yarn electron build
```

Then start the Electron application with:

```bash
yarn electron start
```

### How to start the Workflow Diagram example server from the sources
Expand All @@ -69,7 +87,11 @@ Checkout the README of the [glsp-server](https://github.com/eclipse-glsp/glsp-se
Once the Workflow Diagram Server is running, start the Theia application with the `debug` flag so that it'll connect to an existing server process -- the one you started from the command line or from your IDE before:

```bash
cd start:debug
yarn browser start:debug

// or

yarn electron start:debug
```

### Start Workflow Diagram example in WebSocket mode
Expand All @@ -88,11 +110,11 @@ The example provides scripts and launch configs that pass this argument to test
- Embedded: Start a Node GLSP server in WebSocket mode along with the backend:

- VS Code Launch config: `Launch Workflow Browser Backend (WebSocket GLSP Server)`
- Script: `yarn start:ws`
- Script: `yarn browser start:ws` or `yarn electron start:ws`

- Debug mode: Expects a running GLSP server (Java or Node) in WebSocket mode:
- VS Code Launch config: `Launch Workflow Browser Backend (External Websocket GLSP Server)`
- Script: `yarn start:ws:debug`
- Script: `yarn browser start:ws:debug` or `yarn electron start:ws:debug`

#### **2. Connect directly to GLSP server from frontend via WebSockets**

Expand All @@ -114,7 +136,7 @@ If this argument is passed, the node-based GLSP server will be integrated direct
The example provides scripts and launch configs that pass this argument to test this connectivity option:

- VS Code Launch config: `Launch Workflow Browser Backend (Integrated Node GLSP Server)`
- Script: `yarn start:integrated`
- Script: `yarn browser start:integrated` or `yarn electron start:integrated`

> _**Remark:**_ In production, one would decide for one way of connectivity, and would not implement all the different options as we do in the workflow diagram example. This was setup to easily show and switch between the different possibilities.
Expand Down
16 changes: 16 additions & 0 deletions configs/disable-ripgrep-postinstall.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const fs = require('fs');
const path = require('path');

// Path to the dependency's package.json
const dependencyPath = path.join(__dirname, '..', 'node_modules', '@vscode', 'ripgrep', 'package.json');

// Read the dependency's package.json
const packageJson = JSON.parse(fs.readFileSync(dependencyPath, 'utf8'));

// Remove the postinstall script
if (packageJson.scripts && packageJson.scripts.postinstall) {
delete packageJson.scripts.postinstall;
}

// Write the modified package.json back to the file system
fs.writeFileSync(dependencyPath, JSON.stringify(packageJson, null, 2), 'utf8');
31 changes: 16 additions & 15 deletions examples/browser-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,32 @@
"version": "2.2.0-next",
"private": true,
"scripts": {
"bundle": "theia build --mode development",
"build": "yarn rebuild && theia build --mode development",
"clean": "rimraf lib",
"rebuild": "theia rebuild:browser --cacheRoot ../..",
"start": "theia start --WF_GLSP=0 --root-dir=../workspace",
"start:debug": "theia start --WF_GLSP=5007 --root-dir=../workspace --loglevel=debug --debug",
"start:debug": "theia start --WF_GLSP=5007 --root-dir=../workspace --loglevel=debug --glspDebug",
"start:integrated": "theia start --WF_GLSP=5007 --root-dir=../workspace --loglevel=debug --integratedNode",
"start:ws": "theia start --WF_GLSP=0 --WF_PATH=workflow --root-dir=../workspace",
"start:ws:debug": "theia start --WF_GLSP=8081 --WF_PATH=workflow --root-dir=../workspace --logLevel=debug --debug",
"start:ws:debug": "theia start --WF_GLSP=8081 --WF_PATH=workflow --root-dir=../workspace --logLevel=debug --glspDebug",
"watch": "theia build --watch --mode development"
},
"dependencies": {
"@eclipse-glsp-examples/workflow-theia": "2.2.0-next",
"@theia/core": "1.45.1",
"@theia/editor": "1.45.1",
"@theia/filesystem": "1.45.1",
"@theia/markers": "1.45.1",
"@theia/messages": "1.45.1",
"@theia/monaco": "1.45.1",
"@theia/navigator": "1.45.1",
"@theia/preferences": "1.45.1",
"@theia/process": "1.45.1",
"@theia/terminal": "1.45.1",
"@theia/workspace": "1.45.1"
"@theia/core": "~1.49.1",
"@theia/editor": "~1.49.1",
"@theia/filesystem": "~1.49.1",
"@theia/markers": "~1.49.1",
"@theia/messages": "~1.49.1",
"@theia/monaco": "~1.49.1",
"@theia/navigator": "~1.49.1",
"@theia/preferences": "~1.49.1",
"@theia/process": "~1.49.1",
"@theia/terminal": "~1.49.1",
"@theia/workspace": "~1.49.1"
},
"devDependencies": {
"@theia/cli": "1.45.1"
"@theia/cli": "~1.49.1"
},
"theia": {
"target": "browser",
Expand Down
51 changes: 51 additions & 0 deletions examples/electron-app/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{
"name": "electron-app",
"version": "2.2.0-next",
"private": true,
"main": "lib/backend/electron-main.js",
"scripts": {
"build": "yarn rebuild && theia build --mode development",
"clean": "rimraf lib",
"rebuild": "theia rebuild:electron --cacheRoot ../..",
"postinstall": "node ../../configs/disable-ripgrep-postinstall.js",
"start": "theia start --WF_GLSP=0 --root-dir=../workspace",
"start:debug": "theia start --WF_GLSP=5007 --root-dir=../workspace --loglevel=debug --glspDebug",
"start:integrated": "theia start --WF_GLSP=5007 --root-dir=../workspace --loglevel=debug --integratedNode",
"start:ws": "theia start --WF_GLSP=0 --WF_PATH=workflow --root-dir=../workspace",
"start:ws:debug": "theia start --WF_GLSP=8081 --WF_PATH=workflow --root-dir=../workspace --logLevel=debug --glspDebug",
"watch": "theia build --watch --mode development"
},
"dependencies": {
"@eclipse-glsp-examples/workflow-theia": "2.2.0-next",
"@theia/core": "~1.49.1",
"@theia/editor": "~1.49.1",
"@theia/electron": "~1.49.1",
"@theia/filesystem": "~1.49.1",
"@theia/markers": "~1.49.1",
"@theia/messages": "~1.49.1",
"@theia/monaco": "~1.49.1",
"@theia/navigator": "~1.49.1",
"@theia/preferences": "~1.49.1",
"@theia/process": "~1.49.1",
"@theia/terminal": "~1.49.1",
"@theia/workspace": "~1.49.1"
},
"devDependencies": {
"@theia/cli": "~1.49.1",
"electron": "^23.2.4"
},
"theia": {
"target": "electron",
"frontend": {
"config": {
"applicationName": "Workflow Electron Example",
"reloadOnReconnect": true
}
},
"backend": {
"config": {
"frontendConnectionTimeout": -1
}
}
}
}
21 changes: 21 additions & 0 deletions examples/electron-app/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* This file can be edited to customize webpack configuration.
* To reset delete this file and rerun theia build again.
*/
// @ts-check
const configs = require('./gen-webpack.config.js');
const nodeConfig = require('./gen-webpack.node.config.js');

/**
* Expose bundled modules on window.theia.moduleName namespace, e.g.
* window['theia']['@theia/core/lib/common/uri'].
* Such syntax can be used by external code, for instance, for testing.
configs[0].module.rules.push({
test: /\.js$/,
loader: require.resolve('@theia/application-manager/lib/expose-loader')
}); */

module.exports = [
...configs,
nodeConfig.config
];
Loading

0 comments on commit 1848cb8

Please sign in to comment.