Bump versions (#1173)

* Bump versions

* Bump NPM versions, update to Svelte 5

* try improve flaky test

* bump single-file-cli, remove ublock origin workaround

* bump base images

* replace libssl3

bookmarks/frontend/behaviors/search-autocomplete.js

@@ -1,3 +1,4 @@
+import { mount } from "svelte";
 import { Behavior, registerBehavior } from "./index";
 import SearchAutoCompleteComponent from "../components/SearchAutoComplete.svelte";
 
@@ -12,7 +13,7 @@ class SearchAutocomplete extends Behavior {
 
     const container = document.createElement("div");
 
-    new SearchAutoCompleteComponent({
+    mount(SearchAutoCompleteComponent, {
       target: container,
       props: {
         name: "q",

bookmarks/frontend/behaviors/tag-autocomplete.js

@@ -1,5 +1,6 @@
 import { Behavior, registerBehavior } from "./index";
 import TagAutoCompleteComponent from "../components/TagAutocomplete.svelte";
+import { mount } from "svelte";
 
 class TagAutocomplete extends Behavior {
   constructor(element) {
@@ -12,7 +13,7 @@ class TagAutocomplete extends Behavior {
 
     const container = document.createElement("div");
 
-    new TagAutoCompleteComponent({
+    mount(TagAutoCompleteComponent, {
       target: container,
       props: {
         id: input.id,

bookmarks/frontend/components/SearchAutoComplete.svelte

@@ -2,22 +2,24 @@
   import {SearchHistory} from "./SearchHistory";
   import {api} from "../api";
   import {cache} from "../cache";
-  import {clampText, debounce, getCurrentWord, getCurrentWordBounds} from "../util";
+  import {clampText, debounce, getCurrentWord, getCurrentWordBounds, preventDefault} from "../util";
 
   const searchHistory = new SearchHistory()
 
-  export let name;
-  export let placeholder;
-  export let value;
-  export let mode = '';
-  export let search;
-  export let linkTarget = '_blank';
+  let {
+    name,
+    placeholder,
+    value = $bindable(),
+    mode = '',
+    search,
+    linkTarget = '_blank'
+  } = $props();
 
-  let isFocus = false;
-  let isOpen = false;
-  let suggestions = []
-  let selectedIndex = undefined;
-  let input = null;
+  let isFocus = $state(false);
+  let isOpen = $state(false);
+  let suggestions = $state([])
+  let selectedIndex = $state(undefined);
+  let input = $state(null);
 
   // Track current search query after loading the page
   searchHistory.pushCurrent()
@@ -201,7 +203,7 @@
   <div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
     <input type="search" class="form-input" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
            bind:this={input}
-           on:input={handleInput} on:keydown={handleKeyDown} on:focus={handleFocus} on:blur={handleBlur}>
+           oninput={handleInput} onkeydown={handleKeyDown} onfocus={handleFocus} onblur={handleBlur}>
   </div>
 
   <ul class="menu" class:open={isOpen}>
@@ -210,7 +212,7 @@
     {/if}
     {#each suggestions.tags as suggestion}
       <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
-        <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
+        <a href="#" onmousedown={preventDefault(() => completeSuggestion(suggestion))}>
           {suggestion.label}
         </a>
       </li>
@@ -221,7 +223,7 @@
     {/if}
     {#each suggestions.recentSearches as suggestion}
       <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
-        <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
+        <a href="#" onmousedown={preventDefault(() => completeSuggestion(suggestion))}>
           {suggestion.label}
         </a>
       </li>
@@ -232,7 +234,7 @@
     {/if}
     {#each suggestions.bookmarks as suggestion}
       <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
-        <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
+        <a href="#" onmousedown={preventDefault(() => completeSuggestion(suggestion))}>
           {suggestion.label}
         </a>
       </li>

bookmarks/frontend/components/TagAutocomplete.svelte

@@ -1,21 +1,23 @@
 <script>
   import {cache} from "../cache";
-  import {getCurrentWord, getCurrentWordBounds} from "../util";
+  import {getCurrentWord, getCurrentWordBounds, preventDefault} from "../util";
 
-  export let id;
-  export let name;
-  export let value;
-  export let placeholder;
-  export let ariaDescribedBy;
-  export let variant = 'default';
+  let {
+    id,
+    name,
+    value,
+    placeholder,
+    ariaDescribedBy,
+    variant = 'default'
+  } = $props();
 
-  let isFocus = false;
-  let isOpen = false;
+  let isFocus = $state(false);
+  let isOpen = $state(false);
   let input = null;
-  let suggestionList = null;
+  let suggestionList = $state(null);
 
-  let suggestions = [];
-  let selectedIndex = 0;
+  let suggestions = $state([]);
+  let selectedIndex = $state(0);
 
   function handleFocus() {
     isFocus = true;
@@ -112,8 +114,8 @@
     <input id="{id}" name="{name}" value="{value ||''}" placeholder="{placeholder || ' '}"
            class="form-input" type="text" autocomplete="off" autocapitalize="off"
            aria-describedby="{ariaDescribedBy}"
-           on:input={handleInput} on:keydown={handleKeyDown}
-           on:focus={handleFocus} on:blur={handleBlur}>
+           oninput={handleInput} onkeydown={handleKeyDown}
+           onfocus={handleFocus} onblur={handleBlur}>
   </div>
 
   <!-- autocomplete suggestion list -->
@@ -122,7 +124,7 @@
     <!-- menu list items -->
     {#each suggestions as tag,i}
       <li class="menu-item" class:selected={selectedIndex === i}>
-        <a href="#" on:mousedown|preventDefault={() => complete(tag)}>
+        <a href="#" onmousedown={preventDefault(() => complete(tag))}>
           {tag.name}
         </a>
       </li>
@@ -141,14 +143,14 @@
     display: block;
   }
 
-  .form-autocomplete-input {
+  .form-autocomplete .form-autocomplete-input {
     box-sizing: border-box;
     height: var(--control-size);
     min-height: var(--control-size);
     padding: 0;
   }
 
-  .form-autocomplete-input input {
+  .form-autocomplete .form-autocomplete-input input {
     width: 100%;
     height: 100%;
     border: none;

bookmarks/frontend/util.js

@@ -9,6 +9,13 @@ export function debounce(callback, delay = 250) {
   };
 }
 
+export function preventDefault(fn) {
+  return function (event) {
+    event.preventDefault();
+    fn.call(this, event);
+  };
+}
+
 export function clampText(text, maxChars = 30) {
   if (!text || text.length <= 30) return text;