Merge branch 'js-fixes'

* Branch commit log:
  ui/kbd.js: when changing focus, scrollIntoView()
  ui/wrapper.js: fix formatting of missing property error
  ui/b/cliplist.js: use LitElement.weak_this
  ui/little.js: provide lazily initialized LitElement.weak_this
  ui/Makefile.mk: first check syntax via eslint, then types
  package.json: add printf-ts for printf-style formatting in JS

Signed-off-by: Tim Janik <[email protected]>

package.json

@@ -57,6 +57,7 @@
     "postcss-scss": "^4.0.9",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
+    "printf-ts": "^2.0.1",
     "puppeteer-core": "^22.3.0",
     "puppeteer-in-electron": "^3.0.5",
     "rollup": "^4.12.0",

ui/Makefile.mk

@@ -308,7 +308,7 @@ CLEANDIRS += $>/tscheck/
 ui/lint: 									| node_modules/.npm.done
 	$(QGEN)
 	$(MAKE) --no-print-directory NPMBLOCK=y -j1 \
-		tscheck eslint $>/ui/global.css
+		eslint tscheck $>/ui/global.css
 	-$Q node_modules/.bin/stylelint $${INSIDE_EMACS:+-f unix} -c ui/stylelintrc.cjs $(wildcard ui/*.*css ui/b/*.*css)
 	-$Q { TCOLOR=--color=always ; tty -s <&1 || TCOLOR=; } \
 	&& grep $$TCOLOR -nE '(/[*/]+[*/ ]*)?(FI[X]ME).*' -r ui/ --exclude '*.js'

ui/b/cliplist.js

@@ -84,7 +84,8 @@ export class BClipList extends LitComponent {
   {
     if (changed_props.has ('track'))
       {
-	const weakthis = new WeakRef (this); // avoid strong wtrack->this refs for automatic cleanup
+	const weakthis = this.weak_this; // avoid strong wtrack->this refs for automatic cleanup
+	console.assert (weakthis);
 	this.wtrack = Wrapper.wrap_ase_object (this.track, { launcher_clips: [] }, () => weakthis.deref()?.requestUpdate());
 	Util.telemetry_unsubscribe (this.teleobj);
 	this.teleobj = null;

ui/kbd.js

@@ -336,6 +336,7 @@ export function move_focus (dir = 0, subfocus = null) {
       if (idx >= 0)
 	{
 	  focuslist[idx].focus();
+	  document.activeElement.scrollIntoView();
 	  return true;
 	}
     }
@@ -381,6 +382,7 @@ export function move_focus (dir = 0, subfocus = null) {
   if (next >= 0 && next < focuslist.length)
     {
       focuslist[next].focus();
+      document.activeElement.scrollIntoView();
       return true;
     }
   return false;

ui/little.js

@@ -39,7 +39,13 @@ export class LitComponent extends LitElement {
     adopt_component_styles (render_root);
     return render_root;
   }
+  get weak_this()
+  {
+    let wt = this[sym_weak_this];
+    return wt || (this[sym_weak_this] = new WeakRef (this));
+  }
 }
+const sym_weak_this = Symbol ('weak_this');
 
 // == lit_update_all ==
 /** Call requestUpdate() on all `LitElement`s */

ui/wrapper.js

@@ -29,7 +29,7 @@ class AseCachingWrapper {
 			/**@type{Array<function>}*/ callbacks: [] };
       // debug helper
       if (typeof aseobj[prop] !== 'function')
-	throw new TypeError (`property getter not callable: [${aseobj.constructor.name} ${aseobj.$id}].${prop}: ` + aseobj[prop]);
+	throw new TypeError (`property getter not callable: ${aseobj.constructor.name}($id=${aseobj.$id})['${prop}']==` + aseobj[prop]);
       // add reactive value getter
       wrapper.get_value = () =>
 	{