[web-client] simple theme: build & development env based on vite.

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>

.editorconfig

@@ -16,11 +16,17 @@ max_line_length = 119
 [*.html]
 indent_size = 4
 
+[*.css]
+indent_size = 2
+
+[*.less]
+indent_size = 2
+
 [*.js]
 indent_size = 2
 
 [*.json]
-indent_size = 4
+indent_size = 2
 insert_final_newline = ignore
 
 # Minified JavaScript files shouldn't be changed

.github/dependabot.yml

@@ -12,11 +12,11 @@ updates:
       prefix: "[upd] pypi:"
 
   - package-ecosystem: "npm"
-    directory: "/searx/static/themes/simple"
+    directory: "/client/simple"
     schedule:
       interval: "weekly"
       day: "friday"
     open-pull-requests-limit: 5
     target-branch: "master"
     commit-message:
-      prefix: "[upd] npm:"
+      prefix: "[upd] web-client (simple):"

client/simple/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

client/simple/README.rst

@@ -0,0 +1,24 @@
+=====================
+MEMO vite development
+=====================
+
+Local install::
+
+  # in folder ./client/simple/
+  $ npm install
+
+Start development server::
+
+  $ ./manage vite.simple.dev
+
+  # in folder ./client/simple/
+  $ npm exec -- vite
+
+Fix source code::
+
+  # in folder ./client/simple/
+  $ npm run fix
+
+Fix & Build::
+
+  $ ./manage vite.simple.build

client/simple/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "simple",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
+    "filemanager-webpack-plugin": "^8.0.0",
+    "leaflet": "^1.9.4",
+    "less": "^4.2.2",
+    "less-loader": "^12.2.0",
+    "normalize.css": "^8.0.1",
+    "style-loader": "^4.0.0",
+    "vite": "^6.0.7",
+    "vite-plugin-static-copy": "^2.2.0",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
+  },
+  "dependencies": {
+    "autocomplete-js": "^2.7.1"
+  }
+}

client/simple/src/js/searxng.head.js

@@ -0,0 +1 @@
+import "./head/00_init.js";

client/simple/src/js/searxng.js

@@ -0,0 +1,7 @@
+import "./main/00_toolkit.js";
+import "./main/infinite_scroll.js";
+import "./main/keyboard.js";
+import "./main/mapresult.js";
+import "./main/preferences.js";
+import "./main/results.js";
+import "./main/search.js";

client/simple/static/.gitattributes

@@ -0,0 +1,2 @@
+leaflet.css -diff
+leaflet.js -diff

client/simple/vite.config.js

@@ -0,0 +1,121 @@
+/**
+ * CONFIG: https://vite.dev/config/
+ */
+
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+
+
+const ROOT = "../..";  // root of the git reposetory
+
+const PATH = {
+
+  dist: resolve(ROOT, "searx/static/themes/simple"),
+  // dist: resolve(ROOT, "client/simple/dist"),
+
+  src: "src",
+  modules: "node_modules",
+  brand: "src/brand",
+  static: resolve(ROOT, "client/simple/static"),
+  leaflet: resolve(ROOT, "client/simple/node_modules/leaflet/dist"),
+  templates: resolve(ROOT, "searx/templates/simple"),
+};
+
+
+};
+
+
+export default defineConfig({
+
+  root: PATH.src,
+  mode: "production",
+  // mode: "development",
+
+  // FIXME: missing CCS sourcemaps!!
+  // see: https://github.com/vitejs/vite/discussions/13845#discussioncomment-11992084
+  //
+  // what I have tried so far (see config below):
+  //
+  // - build.sourcemap
+  // - esbuild.sourcemap
+  // - css.preprocessorOptions.less.sourceMap
+
+  css: {
+    devSourcemap: true,
+    preprocessorOptions: {
+      less: {
+        // FIXME: missing CCS sourcemaps!!
+        sourceMap: {
+          outputSourceFiles: true,
+          sourceMapURL: (name) => { const s = name.split('/'); return s[s.length - 1] + '.map'; },
+        },
+        // env: 'development',
+        // relativeUrls: true,
+        // javascriptEnabled: true,
+      },
+    },
+  },  // end: css
+
+  esbuild : {
+    // FIXME: missing CCS sourcemaps!!
+    sourcemap: true
+  },
+
+  build: {
+    manifest: "manifest.json",
+    emptyOutDir: true,
+    assetsDir: "",
+    outDir: PATH.dist,
+
+    // FIXME: missing CCS sourcemaps!!
+    sourcemap: true,
+
+    // https://vite.dev/config/build-options.html#build-cssminify
+    cssMinify: true,
+    // cssMinify: "esbuild",
+    minify: "esbuild",
+
+    rollupOptions: {
+      input: {
+
+        // build CSS files
+        "css/searxng.min.css": PATH.src + "/less/style-ltr.less",
+        "css/searxng-rtl.min.css": PATH.src + "/less/style-rtl.less",
+        "css/rss.min.css": PATH.src + "/less/rss.less",
+
+        // build JS files
+        "js/searxng.head.min": PATH.src + "/js/searxng.head.js",
+        "js/searxng.min": PATH.src + "/js/searxng.js",
+
+      },
+
+      // file naming conventions / pathnames are relative to outDir (PATH.dist)
+      output: {
+        entryFileNames: "[name].js",
+        chunkFileNames: "[name].js",
+        assetFileNames: "[name].[ext]",
+        // Vite does not support "rollupOptions.output.sourcemap".
+        // Please use "build.sourcemap" instead.
+        // sourcemap: true,
+      },
+
+    },
+  },  // end: build
+
+  plugins: [
+
+    // Leaflet
+
+    viteStaticCopy({
+      targets: [
+        { src: PATH.leaflet + "/leaflet.{js,js.map}", dest: PATH.dist + "/js" },
+        { src: PATH.leaflet + "/images/*.png", dest: PATH.dist + "/css/images/" },
+        { src: PATH.leaflet + "/*.{css,css.map}", dest: PATH.dist + "/css" },
+        { src: PATH.static + "/**/*", dest: PATH.dist },
+      ]
+    })
+  ],
+  ] // end: plugins
+
+});

manage

@@ -35,6 +35,9 @@ source "$(dirname "${BASH_SOURCE[0]}")/utils/lib_go.sh"
 # shellcheck source=utils/lib_redis.sh
 source "$(dirname "${BASH_SOURCE[0]}")/utils/lib_redis.sh"
 
+# shellcheck source=utils/lib_sxng_vite.sh
+source "$(dirname "${BASH_SOURCE[0]}")/utils/lib_sxng_vite.sh"
+
 PATH="${REPO_ROOT}/node_modules/.bin:${PATH}"
 
 # config
@@ -102,6 +105,7 @@ EOF
     test.help
     themes.help
     static.help
+    vite.help
     cat <<EOF
 environment ...
   SEARXNG_REDIS_URL : ${SEARXNG_REDIS_URL}

searxng_extra/update/update_pygments.py

@@ -13,7 +13,7 @@ from pygments.formatters.html import HtmlFormatter
 
 from searx import searx_dir
 
-LESS_FILE = Path(searx_dir) / 'static/themes/simple/src/generated/pygments.less'
+LESS_FILE = Path(searx_dir).parent / 'client/simple/generated/pygments.less'
 
 HEADER = f"""\
 /*

utils/lib_sxng_vite.sh

@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+
+vite.help(){
+    cat <<EOF
+vite.:  .. to be done ..
+  simple.:
+    build: build static files of the simple theme
+    dev:   start development server
+EOF
+}
+
+VITE_SIMPLE_THEME="${REPO_ROOT}/client/simple"
+VITE_SIMPLE_DIST="${REPO_ROOT}/searx/static/themes/simple"
+
+vite.simple.dev() {
+
+    (   set -e
+        build_msg SIMPLE "start server for FE development of: ${VITE_SIMPLE_THEME}"
+        pushd "${VITE_SIMPLE_THEME}"
+        npm install
+        npm exec -- vite
+        popd &> /dev/null
+    )
+
+}
+
+vite.simple.build() {
+
+    # build static files of the simple theme
+
+    (   set -e
+        build_msg SIMPLE "run build of theme from: ${VITE_SIMPLE_THEME}"
+
+        pushd "${VITE_SIMPLE_THEME}"
+        npm install
+        npm run fix
+        npm run build
+
+    )
+}