On mobile devices, when the search input is focused, move the cursor
to the end of the existing text. This improves the user experience by
making it easier to edit or append to the current query without
manually moving the cursor first.
Closes: https://github.com/searxng/searxng/issues/5112
To avoid an `unsafe-inline` in the CSP header, the JS code must be moved to the
client side [1].
The `<script>` tag at the end of the HTML originates from the old implementation
of the JS client. Since PR-5073 [2] was merged, the `type` is now `module`, and
the tag must be moved to the beginning of the HTML.
> We need to inline this "JS is enabled?" thing to prevent layout shifts and
> temporary "no JS enabled" visuals as ESM scripts loads and evals everything
> deferred from initial DOM render [3]
That's true in theory, but in practice, this effect is unnoticeable because it's
masked by another effect (which we can't avoid): If we load the page with a
severely throttled connection, the HTML (result list) takes a long time to
load. Then the CSS is loaded, which also takes longer. Until the CSS has loaded,
there's no layout. A layout shift is therefore largely determined by the loading
of the HTML and CSS itself.
The running times of the ESM script can be neglected compared to the loading
times of HTML & CSS.
[1] https://github.com/searxng/searxng-docker/pull/424#issuecomment-3199494256
[2] https://github.com/searxng/searxng/pull/5073
[3] https://github.com/searxng/searxng-docker/pull/424#issuecomment-3199622504
TypeScript is a superset of JavaScript, converting the entire theme to
TypeScript allows us to receive much more feedback on possible issues made in
package updates or our own typos, furthermore, it allows to transpile properly
to lower specs. This PR couldn't be done in smaller commits, a lot of work
needed to make everything *work properly*:
- A browser baseline has been set that requires minimum **Chromium 93, Firefox
92 and Safari 15** (proper visuals/operation on older browser versions is not
guaranteed)
- LightningCSS now handles minification and prefix creation for CSS.
- All hardcoded polyfills and support for previous browser baseline versions
have been removed.
- Convert codebase to TypeScript.
- Convert IIFE to ESM, handling globals with IIFE is cumbersome, ESM is the
standard for virtually any use of JS nowadays.
- Vite now builds the theme without the need for `vite-plugin-static-copy`.
- `searxng.ready` now accepts an array of conditions for the callback to be
executed.
- Replace `leaflet` with `ol` as there were some issues with proper Vite
bundling.
- Merged `head` with `main` script, as head was too small now.
- Add `assertElement` to properly check the existence of critical DOM elements.
- `searxng.on` renamed to `searxng.listen` with some handling improvements.
This has been a regression introduced with the removal of
the unmaintained autocomplete.js library.
We should only focus the search bar on the main search page at `/`
and not at the results page located at `/search`.
I'm not sure if there's a better way to figure out if
we're on the results page than checking if the id of the
main element is `#main_results`, checking the path
obviously isn't a better solution because it can differ
depending on the instance / reverse proxy / ....
- related to 32823ecb69
- closes https://github.com/searxng/searxng/issues/4846
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>
