migrate web-client development from grunt to vite #4284

return42 · 2025-02-05T16:41:14Z

What does this PR do?

Migrate web client development (simple theme) from grunt to Vite.

Vite consists of a builder and a server, this PR only implements the build, what grunt has done so far. We will integrate the vite server into our development processes in a followup PR.

Why is this change important?

grunt and its plugins are no longer maintained
we need a modern developer environment for front-end (FE) development

How to test this PR locally?

Start a server (make run) and see if there are no changes in the frontend. Apart from a few small bugs that have been fixed around the icons, this PR should not bring any changes from the user's point of view.

To test FE development jump to folder client/simple and have a look at the README there.

Notes

The switch to vite in this PR will enable us to develop our FE faster and more securely in future (e.g. we do no longer rely on unmaintained components and can benefit from state of the art technologies).

This PR deliberately avoids changes to the JS code and adopts it 1:1 for the time being. In further PRs we should then restructure the JS code base to JS modules (and imports/exports).

The migration to vite currently still has one catch: I have not been able to generate the source maps for the CSS that are generated from the LESS ... perhaps we can find a solution for this in the course of the review ..

Stabilizing `css.devSourcemap` vitejs/vite#13845 (comment)

Related issues

Closes: #141

return42 · 2025-02-07T13:26:35Z

@vojkovic I remember you have custom LESS for the theme .. this PR will move the sources from searx/static/themes/simple/src to client/simple/src .. after merging this PR, you may have to adjust the workflow with which you apply your themes .. I have also already informed @mrpaulblack ... I don't know who else has customizations to the LESS files ...

vojkovic · 2025-02-07T14:59:24Z

@return42 I appreciate you letting me know - I'll follow this PR and make the changes once the merge happens. :-)

Bnyro

It looks like the JavaScript on the results page is currently not being loaded properly - I can't tell why exactly yet.

To reproduce: Try to Shift-select additional categories with the left mouse button - works on the latest master but not with this PR.

client/simple/package.json

vojkovic · 2025-02-23T15:29:55Z

Running this now in production on my instance. privau/searxng@e64d2b9

Haven't noticed any issues just yet. But did notice a considerable speedup in the frontend build time. :)

As mentioned, the main issue currently looks to be that the css sourcemaps not being built.

vojkovic · 2025-02-25T05:11:24Z

@return42 Noticed something! - the new svg optimiser seems to be breaking a few svgs like the information-circle and news category icon. There are internal shapes not being coloured.

…n names This patch implements the template generation of the template: searx/templates/simple/icons.html by the way the icon set (the icon names) has been normalized: film-outline --> film magnet-outline --> magnet .. warning --> alert Some missing (categorie) icons had been added. Some of the ionicons are not suitable for a dark theme, we fixed the svg manually in src/svg/ionicons: - searxng#4284 (comment) Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

return42 · 2025-02-25T08:01:09Z

@return42 Noticed something! - the new svg optimizer seems to be breaking a few svgs

It's not the optimizer ... it's the icons themselves:

There are internal shapes not being colored.

News icon haven't changed (was also broken before) .. but in the old client we had a manually fixed info icon.

I now fixed both icons --> see diff

 // some of the ionicons are not suitable for a dark theme, we fixed the svg
 // manually in src/svg/ionicons

Vite is a build tool, it consists of two major parts [1]: - A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR). - A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production. [1] https://vite.dev/guide/ Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

…n names This patch implements the template generation of the template: searx/templates/simple/icons.html by the way the icon set (the icon names) has been normalized: film-outline --> film magnet-outline --> magnet .. warning --> alert Some missing (categorie) icons had been added. Some of the ionicons are not suitable for a dark theme, we fixed the svg manually in src/svg/ionicons: - searxng#4284 (comment) Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

…to static by plg_svg2svg Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

…vers Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

- upgrade to ubuntu-24.04 to get NodeJS v20 - remove DEBUG (V=1) environment / in a ViteJS env the DEBUG environment is reserved for interactive debugging tasks (not for verbose build messages). Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

BTW: Rename the manufacturer-specific name ``ion-icon`` of the icon set in SerXNG to ``sxng-icon-set`` --> The icon set can be assembled together as desired in the FE and should therefore not have a manufacturer-specific name in the style and template definitions. Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

Related: - searxng#4322 Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

return42 · 2025-02-25T08:14:14Z

client/simple/theme_icons.js

+const simple_icons = [
+  {
+    base: resolve(HERE, "node_modules/ionicons/dist/svg"),
+    set: {
+      "alert": "alert-outline.svg",
+      "appstore": "apps-outline.svg",
+      "book": "book-outline.svg",
+      "close": "close-outline.svg",
+      "download": "download-outline.svg",
+      "ellipsis-vertical": "ellipsis-vertical-outline.svg",
+      "file-tray-full": "file-tray-full-outline.svg",
+      "film": "film-outline.svg",
+      "globe": "globe-outline.svg",
+      "heart": "heart-outline.svg",
+      "image": "image-outline.svg",
+      "layers": "layers-outline.svg",
+      "leecher": "arrow-down.svg",
+      "location": "location-outline.svg",
+      "magnet": "magnet-outline.svg",
+      "musical-notes": "musical-notes-outline.svg",
+      "navigate-down": "chevron-down-outline.svg",
+      "navigate-left": "chevron-back-outline.svg",
+      "navigate-right": "chevron-forward-outline.svg",
+      "navigate-up": "chevron-up-outline.svg",
+      "people": "people-outline.svg",
+      "play": "play-outline.svg",
+      "radio": "radio-outline.svg",
+      "save": "save-outline.svg",
+      "school": "school-outline.svg",
+      "search": "search-outline.svg",
+      "seeder": "swap-vertical.svg",
+      "settings": "settings-outline.svg",
+      "tv": "tv-outline.svg",
+    },


@vojkovic: while we are just talking about icons .. this PR also fix some very old issues with some missing SVGs: e.g. SVGs for seeder, lecher and file size (save) had been missed in the past ..

Very nice - great work with this mate.

vojkovic · 2025-02-27T14:05:33Z

Looks good - I had a look at the issue with vite not generating the css source maps. I read over the github discussion and even after checking the source of vite, I can't get them to build either.

return42 · 2025-02-27T14:42:26Z

utils/lib_sxng_themes.sh

-themes.live() {
-    local LIVE_THEME="${LIVE_THEME:-${1}}"
-    case "${LIVE_THEME}" in
-        simple)
-            theme="searx/static/themes/${LIVE_THEME}"
-            ;;


I read over the github discussion and even after checking the source of vite, I can't get them to build either.

@vojkovic many thanks for your research on this .. I guess the issue is related to the minification of the CSS .. but for the build phase I prefer to to minify ..

Vite consists of a builder and a server, this PR only implements the build,

in a follow up PR I will integrate vite's development server in a (new) themes.live command .. then, in the development phase we don't need to minify and have CSS source maps back .. at least I hope so ;-)

BTW: we already have a similar issue with LESS & CSS

[fix] LESS sourcemaps broken in less-plugin-clean-css v1.6.0 #4215

Sourcemaps broken in latest v1.6.0 less/less-plugin-clean-css#42 (comment)

The problem may lie in a sub-sub-sub dependency and therefore affects both (vite and less-plugin-clean-css)... but I can only speculate about that ..

Bnyro

Tested again, looks good to me now! 👍

…n names This patch implements the template generation of the template: searx/templates/simple/icons.html by the way the icon set (the icon names) has been normalized: film-outline --> film magnet-outline --> magnet .. warning --> alert Some missing (categorie) icons had been added. Some of the ionicons are not suitable for a dark theme, we fixed the svg manually in src/svg/ionicons: - #4284 (comment) Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

…ort) In commit 1a3543d in PR-4284 [1] the swiped-events [2] were forgotten to be migrated. In this patch, the event library is added to the ``devDependencies`` and imported by:: import "../../../node_modules/swiped-events/src/swiped-events.js [1] searxng#4284 [2] https://www.npmjs.com/package/swiped-events Signed-off-by: Markus Heiser <markus.heiser@darmarit.de> Reported-by: searxng#4198 (comment)

…ort) In commit 1a3543d in PR-4284 [1] the swiped-events [2] were forgotten to be migrated. In this patch, the event library is added to the ``devDependencies`` and imported by:: import "../../../node_modules/swiped-events/src/swiped-events.js [1] #4284 [2] https://www.npmjs.com/package/swiped-events Signed-off-by: Markus Heiser <markus.heiser@darmarit.de> Reported-by: #4198 (comment)

The previously used library is unmaintained for 6 years now [1] and the solution had know issues [2][3] [1] searxng#4284 (comment) [2] searxng#4318 (comment) [3] privau/searxng#56

The previously used library is unmaintained for 6 years now [1] and the solution had know issues [2][3] [1] #4284 (comment) [2] #4318 (comment) [3] privau/searxng#56

The previously used library is unmaintained for 6 years now [1] and the solution had know issues [2][3] [1] searxng#4284 (comment) [2] searxng#4318 (comment) [3] privau/searxng#56

return42 force-pushed the web-client-env branch 4 times, most recently from fcf76e4 to 1aa8135 Compare February 6, 2025 07:21

return42 requested review from Bnyro and mrpaulblack February 6, 2025 07:36

This was referenced Feb 7, 2025

[upd] npm: Bump eslint from 9.18.0 to 9.19.0 in /searx/static/themes/simple #4271

Closed

[upd] npm: Bump stylelint from 16.13.2 to 16.14.1 in /searx/static/themes/simple #4270

Closed

return42 force-pushed the web-client-env branch from 1aa8135 to 16c99d2 Compare February 7, 2025 16:21

Bnyro reviewed Feb 13, 2025

View reviewed changes

client/simple/package.json Show resolved Hide resolved

Bnyro reviewed Feb 13, 2025

View reviewed changes

client/simple/package.json Show resolved Hide resolved

Bnyro mentioned this pull request Feb 13, 2025

[refactor] search.js: use custom auto completion implementation #4318

Merged

return42 mentioned this pull request Feb 15, 2025

[upd] npm: Bump eslint from 9.18.0 to 9.20.1 in /searx/static/themes/simple #4322

Closed

return42 force-pushed the web-client-env branch 3 times, most recently from a55e11d to 032aac7 Compare February 15, 2025 09:11

return42 force-pushed the web-client-env branch from 032aac7 to 1664262 Compare February 25, 2025 07:56

return42 added 6 commits February 25, 2025 09:03

[web-client] simple theme: move sources to client/simple/src

d918c7d

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[web-client] simple theme: vite build -- CSS sourcemaps still missing!!!

c0cb84f

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[web-client] simple theme: eslint JS source files

c3ad4f3

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[web-client] simple theme: stylelint LESS source files

5cb437f

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[web-client] simple theme: stylelint-prettier LESS source files

21c5f76

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

return42 added 10 commits February 25, 2025 09:03

[web-client] simple theme: move src/brand to client/simple/src

52bd583

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[web-client] simple theme: vite plugins plg_svg2png & plg_svg2svg

5a83280

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[web-client] simple theme: move SVGs to client/simple/src and deploy …

7985719

…to static by plg_svg2svg Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[web-client] simple theme: final build by vite & clean up grunt lefto…

6b03dd1

…vers Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[web-client] integrate the migrated theme in the development workflows

5327b38

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[upd] npm: Bump eslint from 9.19.0 to 9.20.1 in /client/simple

e4208fa

Related: - searxng#4322 Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

[build] /static

7d08c69

return42 commented Feb 25, 2025

View reviewed changes

return42 force-pushed the web-client-env branch from 1664262 to 7d08c69 Compare February 25, 2025 08:15

vojkovic approved these changes Feb 27, 2025

View reviewed changes

return42 commented Feb 27, 2025

View reviewed changes

Bnyro approved these changes Feb 27, 2025

View reviewed changes

return42 merged commit d5ba3bf into searxng:master Feb 28, 2025
9 checks passed

return42 deleted the web-client-env branch February 28, 2025 11:27

return42 mentioned this pull request Mar 10, 2025

[enh] Static file with hashes #4466

Closed

3 tasks

This was referenced Apr 2, 2025

[fix] client/simple: add missing "swiped-events" devDependencies (import) #4586

Merged

[mod] add swipe events to the image gallery (gesture control) #4198

Merged

migrate web-client development from grunt to vite #4284

migrate web-client development from grunt to vite #4284

Uh oh!

Conversation

return42 commented Feb 5, 2025

What does this PR do?

Why is this change important?

How to test this PR locally?

Notes

Related issues

Uh oh!

return42 commented Feb 7, 2025

Uh oh!

vojkovic commented Feb 7, 2025

Uh oh!

Bnyro left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

vojkovic commented Feb 23, 2025

Uh oh!

vojkovic commented Feb 25, 2025

Uh oh!

return42 commented Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

return42 Feb 25, 2025

Choose a reason for hiding this comment

Uh oh!

vojkovic Feb 25, 2025

Choose a reason for hiding this comment

Uh oh!

vojkovic commented Feb 27, 2025

Uh oh!

return42 Feb 27, 2025

Choose a reason for hiding this comment

Uh oh!

Bnyro left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

return42 commented Feb 25, 2025 •

edited

Loading