Skip to content

Commit 40604a6

Browse files
author
Akos Kitta
committed
Can render JSON with lottie.
Signed-off-by: Akos Kitta <[email protected]>
1 parent d956c02 commit 40604a6

File tree

9 files changed

+68
-111
lines changed

9 files changed

+68
-111
lines changed

‎electron-app/package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,16 @@
2525
},
2626
"devDependencies": {
2727
"@theia/cli": "1.25.0",
28-
"electron": "^15.3.5"
28+
"electron": "^15.3.5",
29+
"html-webpack-plugin": "^5.5.0",
30+
"lottie-web": "^5.9.6",
31+
"remove-files-webpack-plugin": "^1.5.0"
2932
},
3033
"scripts": {
31-
"prepare": "theia build --mode development",
34+
"prepare": "yarn preload:generate && theia build --mode development",
3235
"start": "theia start --plugins=local-dir:../plugins",
33-
"watch": "theia build --watch --mode development"
36+
"watch": "theia build --watch --mode development",
37+
"preload:generate": "webpack --config ./preload/webpack.config.js"
3438
},
3539
"theia": {
3640
"target": "electron",

preload/assets/preload.json renamed to electron-app/preload/assets/preload.json

File renamed without changes.

‎electron-app/preload/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
require('lottie-web').loadAnimation({
2+
container: document.getElementById('custom-spinner'),
3+
renderer: 'svg',
4+
loop: true,
5+
autoplay: true,
6+
animationData: require('./assets/preload.json')
7+
});

preload/preload.html renamed to electron-app/preload/preload.html

File renamed without changes.

preload/webpack.config.js renamed to electron-app/preload/webpack.config.js

Lines changed: 45 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
const path = require('path');
22
const RemoveWebpackPlugin = require('remove-files-webpack-plugin');
33
const HtmlWebpackPlugin = require('html-webpack-plugin');
4+
45
module.exports = {
56
mode: 'production',
7+
target: 'electron-renderer',
68
devtool: 'inline-source-map',
79
entry: path.join(__dirname, 'index.js'),
810
output: {
@@ -12,9 +14,6 @@ module.exports = {
1214
resolve: {
1315
extensions: ['.js'],
1416
},
15-
module: {
16-
rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
17-
},
1817
plugins: [
1918
new HtmlWebpackPlugin({
2019
inject: false,
@@ -39,45 +38,57 @@ module.exports = {
3938
}
4039
}
4140
42-
.theia-preload {
43-
position: absolute;
44-
top: 0;
45-
left: 0;
46-
right: 0;
47-
bottom: 0;
41+
.theia-preload {
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
right: 0;
46+
bottom: 0;
47+
display: flex;
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
4851
49-
/* Above styles copied from https://github.com/eclipse-theia/theia/blob/5aeef6c0c683b4e91713ab736957e6655b486adc/packages/core/src/browser/style/index.css#L147-L161 */
50-
/* Otherwise, there is a flickering when Theia's CSS loads. */
52+
/* Above styles copied from https://github.com/eclipse-theia/theia/blob/5aeef6c0c683b4e91713ab736957e6655b486adc/packages/core/src/browser/style/index.css#L147-L161 */
53+
/* Otherwise, there is a flickering when Theia's CSS loads. */
5154
52-
background-image: none;
53-
}
55+
background-image: none;
56+
}
5457
55-
.theia-preload::after {
56-
/* remove default loading animation */
57-
content: none;
58-
}
58+
.theia-preload::after {
59+
/* remove default loading animation */
60+
content: none;
61+
}
5962
60-
.spinner-container {
61-
display: flex;
62-
flex-direction: center;
63-
align-self: center;
64-
justify-content: center;
65-
height: 100vh;
66-
width: 100vw;
67-
}
63+
.spinner-container {
64+
display: flex;
65+
flex-direction: center;
66+
align-self: center;
67+
justify-content: center;
68+
}
69+
70+
#custom-spinner {
71+
align-self: center;
72+
height: 320px;
73+
width: 320px;
74+
}
75+
76+
#custom-spinner svg {
77+
width: 16vw;
78+
height: 16vh;
79+
animation-delay: 0;
80+
animation-duration: 2s;
81+
animation-iteration-count: infinite;
82+
animation-name: preload-spinner;
83+
animation-timing-function: ease;
84+
}
6885
69-
.custom-spinner {
70-
align-self: center;
71-
}
7286
</style>
7387
</head>
7488
7589
<body>
76-
<div class='spinner-container'>
77-
<div class='custom-spinner'>
78-
<lottie-player autoplay loop mode="normal" style="width:320px;height:320px">
79-
</lottie-player>
80-
</div>
90+
<div class="spinner-container">
91+
<div id="custom-spinner"/>
8192
</div>
8293
${htmlWebpackPlugin.files.js.map(
8394
(jsFile) => `<script>
@@ -90,7 +101,7 @@ module.exports = {
90101
91102
</html>
92103
`,
93-
filename: path.join(__dirname, '../electron-app/resources/preload.html'),
104+
filename: path.join(__dirname, '../resources/preload.html'),
94105
}),
95106
new RemoveWebpackPlugin({
96107
after: {

‎electron/packager/index.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -87,13 +87,6 @@
8787
cp('-rf', path(rootPath, filename), path('..', workingCopy));
8888
}
8989

90-
//---------------------------------------------------------------------------------------------+
91-
// Copy the patched `index.js` for the frontend, the Theia preload, etc. from `./electron-app` |
92-
//---------------------------------------------------------------------------------------------+
93-
for (const filename of foldersToSyncFromDev) {
94-
cp('-rf', path(rootPath, 'electron-app', filename), path('..', 'build'));
95-
}
96-
9790
//----------------------------------------------+
9891
// Sanity check: all versions must be the same. |
9992
//----------------------------------------------+
@@ -146,6 +139,12 @@
146139
`Building the ${productName} application`
147140
);
148141

142+
//---------------------------------------------------------------------------------------------+
143+
// Copy the patched `index.js` for the frontend, the Theia preload, etc. from `./electron-app` |
144+
//---------------------------------------------------------------------------------------------+
145+
for (const filename of foldersToSyncFromDev) {
146+
cp('-rf', path('..', workingCopy, 'electron-app', filename), path('..', 'build'));
147+
}
149148
//-------------------------------------------------------------------------------------------------------------------------+
150149
// Test the application. With this approach, we cannot publish test results to GH Actions but save 6-10 minutes per builds |
151150
//-------------------------------------------------------------------------------------------------------------------------+

‎package.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"node": ">=14.0.0 <15"
1111
},
1212
"devDependencies": {
13-
"@lottiefiles/lottie-player": "^1.5.7",
1413
"@theia/cli": "1.25.0",
1514
"@types/sinon": "^2.3.5",
1615
"@types/jsdom": "^11.0.4",
@@ -23,15 +22,13 @@
2322
"eslint-plugin-react": "^7.24.0",
2423
"eslint-plugin-react-hooks": "^4.2.0",
2524
"eslint-plugin-unused-imports": "^1.1.1",
26-
"html-webpack-plugin": "^5.5.0",
2725
"husky": "^6.0.0",
2826
"ignore-styles": "^5.0.1",
2927
"lerna": "^3.20.2",
3028
"lint-staged": "^11.0.0",
3129
"node-gyp": "^9.0.0",
3230
"prettier": "^2.3.1",
3331
"reflect-metadata": "^0.1.10",
34-
"remove-files-webpack-plugin": "^1.5.0",
3532
"rimraf": "^2.6.1",
3633
"semver": "^7.3.2",
3734
"typescript": "~4.5.5",
@@ -43,8 +40,7 @@
4340
"@types/react": "16.14.25"
4441
},
4542
"scripts": {
46-
"prepare": "yarn preload:generate && lerna run prepare && yarn download:plugins",
47-
"preload:generate": "webpack --config ./preload/webpack.config.js",
43+
"prepare": "lerna run prepare && yarn download:plugins",
4844
"cleanup": "npx rimraf ./**/node_modules && rm -rf ./node_modules ./.browser_modules ./arduino-ide-extension/build ./arduino-ide-extension/downloads ./arduino-ide-extension/Examples ./arduino-ide-extension/lib ./browser-app/lib ./browser-app/src-gen ./browser-app/gen-webpack.config.js ./electron-app/lib ./electron-app/src-gen ./electron-app/gen-webpack.config.js",
4945
"rebuild:browser": "theia rebuild:browser",
5046
"rebuild:electron": "theia rebuild:electron",

‎preload/index.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎yarn.lock‎

Lines changed: 2 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1871,22 +1871,6 @@
18711871
npmlog "^4.1.2"
18721872
write-file-atomic "^2.3.0"
18731873

1874-
"@lit/reactive-element@^1.3.0":
1875-
version "1.3.4"
1876-
resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.3.4.tgz#c4492a54387f7b1020d498a348403229583d1c06"
1877-
integrity sha512-I1wz4uxOA52zSBhKmv4KQWLJpCyvfpnDg+eQR6mjpRgV+Ldi14HLPpSUpJklZRldz0fFmGCC/kVmuc/3cPFqCg==
1878-
1879-
"@lottiefiles/lottie-player@^1.5.7":
1880-
version "1.5.7"
1881-
resolved "https://registry.yarnpkg.com/@lottiefiles/lottie-player/-/lottie-player-1.5.7.tgz#15f2a5d95d46103fb269c65cf0523cbe8fdf35a7"
1882-
integrity sha512-G9rBnH3GJv7ADPLGhwvauWf5IhHja5615N9ROjVE7O384nkHccJ2C/v0AZ9ybx63QTGojN7NaKYdTKq6NMcNrg==
1883-
dependencies:
1884-
"@types/pako" "^1.0.1"
1885-
lit "^2.1.2"
1886-
lottie-web "^5.8.1"
1887-
pako "^2.0.4"
1888-
resize-observer-polyfill "^1.5.1"
1889-
18901874
"@malept/cross-spawn-promise@^2.0.0":
18911875
version "2.0.0"
18921876
resolved "https://registry.yarnpkg.com/@malept/cross-spawn-promise/-/cross-spawn-promise-2.0.0.tgz#d0772de1aa680a0bfb9ba2f32b4c828c7857cb9d"
@@ -3347,11 +3331,6 @@
33473331
resolved "https://registry.yarnpkg.com/@types/p-queue/-/p-queue-2.3.2.tgz#16bc5fece69ef85efaf2bce8b13f3ebe39c5a1c8"
33483332
integrity sha512-eKAv5Ql6k78dh3ULCsSBxX6bFNuGjTmof5Q/T6PiECDq0Yf8IIn46jCyp3RJvCi8owaEmm3DZH1PEImjBMd/vQ==
33493333

3350-
"@types/pako@^1.0.1":
3351-
version "1.0.4"
3352-
resolved "https://registry.yarnpkg.com/@types/pako/-/pako-1.0.4.tgz#b4262aef92680a9331fcdb8420c69cf3dd98d3f3"
3353-
integrity sha512-Z+5bJSm28EXBSUJEgx29ioWeEEHUh6TiMkZHDhLwjc9wVFH+ressbkmX6waUZc5R3Gobn4Qu5llGxaoflZ+yhA==
3354-
33553334
"@types/parse-json@^4.0.0":
33563335
version "4.0.0"
33573336
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -3557,7 +3536,7 @@
35573536
resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
35583537
integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
35593538

3560-
"@types/trusted-types@*", "@types/trusted-types@^2.0.2":
3539+
"@types/trusted-types@*":
35613540
version "2.0.2"
35623541
resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
35633542
integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
@@ -9884,30 +9863,6 @@ listr2@^3.12.2:
98849863
through "^2.3.8"
98859864
wrap-ansi "^7.0.0"
98869865

9887-
lit-element@^3.2.0:
9888-
version "3.2.2"
9889-
resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.2.tgz#d148ab6bf4c53a33f707a5168e087725499e5f2b"
9890-
integrity sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==
9891-
dependencies:
9892-
"@lit/reactive-element" "^1.3.0"
9893-
lit-html "^2.2.0"
9894-
9895-
lit-html@^2.2.0:
9896-
version "2.2.7"
9897-
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.7.tgz#390a45589f55b95106da1f860b6aa2894ab34373"
9898-
integrity sha512-JhqiAwO1l03kRe68uBZ0i2x4ef2S5szY9vvP411nlrFZIpKK4/hwnhA/15bqbvxe1lV3ipBdhaOzHmyOk7QIRg==
9899-
dependencies:
9900-
"@types/trusted-types" "^2.0.2"
9901-
9902-
lit@^2.1.2:
9903-
version "2.2.8"
9904-
resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.8.tgz#26bdf560042aa3ec9b788f5d48119f7138b2dcc1"
9905-
integrity sha512-QjeNbi/H9LVIHR+u0OqsL+hs62a16m02JlJHYN48HcBuXyiPYR8JvzsTp5dYYS81l+b9Emp3UaGo82EheV0pog==
9906-
dependencies:
9907-
"@lit/reactive-element" "^1.3.0"
9908-
lit-element "^3.2.0"
9909-
lit-html "^2.2.0"
9910-
99119866
load-json-file@^1.0.0:
99129867
version "1.1.0"
99139868
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -10142,7 +10097,7 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
1014210097
dependencies:
1014310098
js-tokens "^3.0.0 || ^4.0.0"
1014410099

10145-
lottie-web@^5.8.1:
10100+
lottie-web@^5.9.6:
1014610101
version "5.9.6"
1014710102
resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.9.6.tgz#62ae68563355d3e04aa75d53dec3dd4bea0e57c9"
1014810103
integrity sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA==
@@ -11988,11 +11943,6 @@ p-waterfall@^1.0.0:
1198811943
dependencies:
1198911944
p-reduce "^1.0.0"
1199011945

11991-
pako@^2.0.4:
11992-
version "2.0.4"
11993-
resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.4.tgz#6cebc4bbb0b6c73b0d5b8d7e8476e2b2fbea576d"
11994-
integrity sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==
11995-
1199611946
parallel-transform@^1.1.0:
1199711947
version "1.2.0"
1199811948
resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
@@ -13324,11 +13274,6 @@ require-main-filename@^2.0.0:
1332413274
resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
1332513275
integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
1332613276

13327-
resize-observer-polyfill@^1.5.1:
13328-
version "1.5.1"
13329-
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
13330-
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
13331-
1333213277
resolve-alpn@^1.0.0:
1333313278
version "1.2.1"
1333413279
resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"

0 commit comments

Comments
 (0)