Skip to content

Commit b3f0291

Browse files
pubkeypubkey
authoredJun 7, 2022
Merge pull request #3832 from hujiulong/master
Fix examples electron and electron-remote
·
16.8.112.5.0
2 parents 9d46897 + 3cc168e commit b3f0291

23 files changed

+447
-4755
lines changed
 

‎.github/workflows/main.yml

+10-12
Original file line numberDiff line numberDiff line change
@@ -392,24 +392,22 @@ jobs:
392392
npm run preinstall
393393
npm install --legacy-peer-deps
394394
395-
# TODO I had to disable that again because the tests randomly fail. We need to upgrade electron and spectron
396-
#- name: electron test
397-
# uses: GabrielBB/xvfb-action@v1.5
398-
# with:
399-
# working-directory: ./examples/electron
400-
# run: npm run test
395+
- name: electron test
396+
uses: GabrielBB/xvfb-action@v1.5
397+
with:
398+
working-directory: ./examples/electron
399+
run: npm run test
401400

402401
- name: electron-remote install
403402
working-directory: ./examples/electron-remote
404403
run: |
405404
npm install --legacy-peer-deps
406405
407-
# TODO commented out because of random fails. Likely fixed when upgrade the electron version
408-
# - name: electron-remote test
409-
# uses: GabrielBB/xvfb-action@v1.5
410-
# with:
411-
# working-directory: ./examples/electron-remote
412-
# run: npm run test
406+
- name: electron-remote test
407+
uses: GabrielBB/xvfb-action@v1.5
408+
with:
409+
working-directory: ./examples/electron-remote
410+
run: npm run test
413411

414412
react:
415413
runs-on: ubuntu-20.04

‎examples/electron-remote/.gitignore

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
node_modules/
2-
.DS_Store
3-
log.txt
4-
config.json
1+
node_modules/
2+
.DS_Store
3+
log.txt
4+
config.json
5+
/rxdb-local.tgz

‎examples/electron-remote/.npmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
package-lock=false
1+
package-lock=false

‎examples/electron-remote/README.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
# RxDB Electron Remote example
2-
3-
This is an example usage of RxDB with Electron trough the [`remote`](https://electronjs.org/docs/api/remote) API. It implements a simple heroes-list which can be filled by the user.
4-
5-
For an example with the `RxDB server plugin` check [examples/electron](../electron)
6-
7-
# Try it out
8-
1. clone the whole [RxDB-repo](https://github.com/pubkey/rxdb)
9-
2. go into project `cd rxdb`
10-
3. run `npm install`
11-
4. go to this folder `cd examples/electron-remote`
12-
5. run `npm install --verbose` (downloading electron can take a while, so use verbose to ensure its running)
1+
# RxDB Electron Remote example
2+
3+
This is an example usage of RxDB with Electron trough the [`remote`](https://github.com/electron/remote) module. It implements a simple heroes-list which can be filled by the user.
4+
5+
For an example with the `RxDB server plugin` check [examples/electron](../electron)
6+
7+
# Try it out
8+
1. clone the whole [RxDB-repo](https://github.com/pubkey/rxdb)
9+
2. go into project `cd rxdb`
10+
3. run `npm install`
11+
4. go to this folder `cd examples/electron-remote`
12+
5. run `npm install --verbose` (downloading electron can take a while, so use verbose to ensure its running)
1313
6. run `npm start`

‎examples/electron-remote/database.js

+13-16
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
const {
2-
createRxDatabase,
3-
addPouchPlugin,
4-
getRxStoragePouch
5-
} = require('rxdb');
1+
const { createRxDatabase, addRxPlugin } = require('rxdb');
2+
const { RxDBEncryptionPlugin } = require('rxdb/plugins/encryption');
3+
const { RxDBQueryBuilderPlugin } = require('rxdb/plugins/query-builder');
4+
const { RxDBDevModePlugin } = require('rxdb/plugins/dev-mode');
5+
const { addPouchPlugin, getRxStoragePouch } = require('rxdb/plugins/pouchdb');
6+
7+
addRxPlugin(RxDBEncryptionPlugin);
8+
addRxPlugin(RxDBQueryBuilderPlugin);
9+
addRxPlugin(RxDBDevModePlugin);
610
addPouchPlugin(require('pouchdb-adapter-memory'));
711

812
const heroSchema = {
@@ -13,7 +17,8 @@ const heroSchema = {
1317
type: 'object',
1418
properties: {
1519
name: {
16-
type: 'string'
20+
type: 'string',
21+
maxLength: 100
1722
},
1823
color: {
1924
type: 'string'
@@ -22,19 +27,11 @@ const heroSchema = {
2227
required: ['name', 'color']
2328
};
2429

25-
let _getDatabase; // cached
26-
function getDatabase(name, adapter) {
27-
if (!_getDatabase) {
28-
_getDatabase = createDatabase(name, adapter);
29-
}
30-
return _getDatabase;
31-
}
32-
3330
async function createDatabase(name, adapter) {
3431
const db = await createRxDatabase({
3532
name,
3633
storage: getRxStoragePouch(adapter),
37-
password: 'myLongAndStupidPassword'
34+
password: 'myLongAndStupidPassword',
3835
});
3936

4037
console.log('creating hero-collection..');
@@ -47,5 +44,5 @@ async function createDatabase(name, adapter) {
4744
return db;
4845
}
4946
module.exports = {
50-
getDatabase
47+
createDatabase
5148
};

‎examples/electron-remote/index.html

+22-26
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>RxDB Heroes Electron Remote</title>
6-
<link href="style.css" rel="stylesheet"/>
7-
</head>
8-
<body>
9-
<h1> RxDB Heroes Electron Remote</h1>
10-
<div id="list-box" class="box">
11-
<h3>Heroes</h3>
12-
<ul id="heroes-list"></ul>
13-
</div>
14-
<div id="insert-box" class="box">
15-
<h3>Add Hero</h3>
16-
<input type="text" placeholder="Name" name="name" id="input-name" />
17-
<input type="text" placeholder="Color" name="color" id="input-color" />
18-
<button onclick="addHero();" id="input-submit">Insert</button>
19-
</div>
20-
</body>
21-
22-
<script>
23-
// You can also require other files to run in this process
24-
require('./page.js')
25-
</script>
26-
</html>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>RxDB Heroes Electron</title>
6+
<link href="style.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<h1> RxDB Heroes Electron</h1>
10+
<div id="list-box" class="box">
11+
<h3>Heroes</h3>
12+
<ul id="heroes-list"></ul>
13+
</div>
14+
<div id="insert-box" class="box">
15+
<h3>Add Hero</h3>
16+
<input type="text" placeholder="Name" name="name" id="input-name" />
17+
<input type="text" placeholder="Color" name="color" id="input-color" />
18+
<button onclick="addHero();" id="input-submit">Insert</button>
19+
</div>
20+
</body>
21+
<script src="renderer.js"></script>
22+
</html>

‎examples/electron-remote/main.js

+21-19
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,66 @@
1+
const remote = require('@electron/remote/main');
12
const electron = require('electron');
2-
require('electron-window-manager');
3-
const path = require('path');
4-
const url = require('url');
53
const database = require('./database');
64

5+
remote.initialize();
6+
77
const app = electron.app;
88
const BrowserWindow = electron.BrowserWindow;
99

1010
const windows = [];
1111

1212
global.db; // define the global db object
1313

14-
function createWindow(dbSuffix) {
14+
function createWindow() {
1515
const width = 300;
1616
const height = 600;
1717
const w = new BrowserWindow({
1818
width,
1919
height,
2020
webPreferences: {
21-
nodeIntegration: true
21+
contextIsolation: false,
22+
nodeIntegration: true,
2223
}
2324
});
2425

25-
w.loadURL(url.format({
26-
pathname: path.join(__dirname, 'index.html'),
27-
protocol: 'file:',
28-
slashes: true
29-
}));
26+
remote.enable(w.webContents);
27+
28+
w.loadFile('index.html');
3029

3130
const x = windows.length * width;
3231
const y = 0;
3332
w.setPosition(x, y);
34-
w.custom = {
35-
dbSuffix
36-
};
3733
windows.push(w);
3834
}
3935

4036

41-
app.on('ready', async function() {
37+
app.on('ready', async function () {
4238
const dbSuffix = new Date().getTime(); // we add a random timestamp in dev-mode to reset the database on each start
4339

44-
global.db = await database.getDatabase(
40+
electron.ipcMain.handle('getDBSuffix', () => dbSuffix);
41+
42+
const db = await database.createDatabase(
4543
'heroesdb' + dbSuffix,
4644
'memory'
4745
);
4846

47+
global.db = db;
48+
4949
// show heroes table in console
50-
global.db.heroes.find().sort('name').$.subscribe(heroDocs => {
50+
db.heroes.find().sort('name').$.subscribe(heroDocs => {
5151
console.log('### got heroes(' + heroDocs.length + '):');
5252
heroDocs.forEach(doc => console.log(
5353
doc.name + ' | ' + doc.color
5454
));
5555
});
5656

57-
createWindow(dbSuffix);
58-
createWindow(dbSuffix);
57+
createWindow();
58+
// FIXME: if remove the next line, replication between windows will not work
59+
// await new Promise(resolve => setTimeout(resolve, 2000));
60+
createWindow();
5961
});
6062

61-
app.on('window-all-closed', function() {
63+
app.on('window-all-closed', function () {
6264
if (process.platform !== 'darwin')
6365
app.quit();
6466
});

‎examples/electron-remote/package.json

+4-9
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,16 @@
77
"test": "mocha"
88
},
99
"dependencies": {
10-
"babel-polyfill": "6.26.0",
11-
"babel-runtime": "6.26.0",
12-
"concurrently": "5.3.0",
13-
"electron": "8.5.1",
14-
"electron-tabs": "0.15.0",
15-
"electron-window-manager": "1.0.6",
16-
"melanke-watchjs": "1.5.2",
10+
"@electron/remote": "^2.0.8",
11+
"electron": "^19.0.2",
1712
"pouchdb-adapter-http": "7.2.2",
1813
"pouchdb-adapter-websql": "7.0.0",
1914
"pouchdb-replication": "7.2.2",
2015
"rxdb": "../../",
21-
"rxjs": "7.0.1"
16+
"rxjs": "^7.5.5"
2217
},
2318
"devDependencies": {
2419
"mocha": "8.2.1",
25-
"spectron": "10.0.1"
20+
"playwright-core": "1.22.2"
2621
}
2722
}

‎examples/electron-remote/page.js ‎examples/electron-remote/renderer.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
const electron = require('electron');
1+
const remote = require('@electron/remote');
22
const renderTest = require('./test/render.test.js');
3+
const { addRxPlugin } = require('rxdb');
4+
const { RxDBLeaderElectionPlugin } = require('rxdb/plugins/leader-election');
35

4-
require('babel-polyfill');
6+
addRxPlugin(RxDBLeaderElectionPlugin);
57

68
const heroesList = document.querySelector('#heroes-list');
79

@@ -12,7 +14,7 @@ async function run() {
1214
*/
1315
await renderTest();
1416

15-
const db = electron.remote.getGlobal('db'); // we get the db object from the main render
17+
const db = remote.getGlobal('db');
1618

1719
/**
1820
* map the result of the find-query to the heroes-list in the dom

0 commit comments

Comments
 (0)
Please sign in to comment.