Use the on:event syntax where passive:false needs to be specified.

eslint.config.mjs

@@ -82,6 +82,7 @@ export default [
       "prefer-const": "warn",
       "sort-imports": "off",
       "sort-keys": "off",
+      "solid/jsx-no-undef": "off",
     },
     linterOptions: {
       reportUnusedDisableDirectives: "error",

package.json

@@ -68,7 +68,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "remark-custom-heading-id": "^2.0.0",
     "solid-icons": "^1.1.0",
-    "solid-js": "^1.9.1",
+    "solid-js": "^1.9.2",
     "solid-markdown": "^2.0.13",
     "solid-toast": "^0.5.0",
     "tippy.js": "^6.3.7",

resources/js/components/ui/Table/Header.tsx

@@ -55,7 +55,7 @@ export const Header: VoidComponent<Props> = (props) => {
       </Show>
       <Show when={props.ctx.column.getCanResize()}>
         <div
-          ref={(div) => div.addEventListener("touchstart", (e) => resizeHandler()(e), {passive: true})}
+          on:touchstart={{handleEvent: (e) => resizeHandler()(e), passive: true}}
           class={cx(
             "absolute top-0 right-0 h-full cursor-col-resize w-[5px] select-none touch-none",
             props.ctx.column.getIsResizing() ? "bg-memo-active" : "hover:bg-gray-400",

resources/js/components/ui/Table/Table.tsx

@@ -276,26 +276,23 @@ export const Table = <T,>(allProps: VoidProps<Props<T>>): JSX.Element => {
                 <div class={s.tableBg}>
                   <div class={s.table} style={{"grid-template-columns": gridTemplateColumns()}}>
                     <div
-                      ref={(div) =>
-                        div.addEventListener(
-                          "wheel",
-                          (e) => {
-                            if (e.deltaX) {
-                              // With 2d wheels (like a touchpad) avoid too much interference between the axes.
-                              setDesiredScrollX(undefined);
-                              return;
-                            }
-                            const scrWrapper = scrollingWrapper();
-                            if (scrWrapper && !e.shiftKey && e.deltaY) {
-                              setDesiredScrollX((l = scrWrapper.scrollLeft) =>
-                                Math.min(Math.max(l + e.deltaY, 0), scrWrapper.scrollWidth - scrWrapper.clientWidth),
-                              );
-                              e.preventDefault();
-                            }
-                          },
-                          {passive: false},
-                        )
-                      }
+                      on:wheel={{
+                        handleEvent: (e) => {
+                          if (e.deltaX) {
+                            // With 2d wheels (like a touchpad) avoid too much interference between the axes.
+                            setDesiredScrollX(undefined);
+                            return;
+                          }
+                          const scrWrapper = scrollingWrapper();
+                          if (scrWrapper && !e.shiftKey && e.deltaY) {
+                            setDesiredScrollX((l = scrWrapper.scrollLeft) =>
+                              Math.min(Math.max(l + e.deltaY, 0), scrWrapper.scrollWidth - scrWrapper.clientWidth),
+                            );
+                            e.preventDefault();
+                          }
+                        },
+                        passive: false,
+                      }}
                       class={s.headerRow}
                     >
                       <For each={columns()}>

resources/js/components/ui/calendar/ColumnsCalendar.tsx

@@ -158,35 +158,29 @@ export const ColumnsCalendar: VoidComponent<Props> = (allProps) => {
           <For each={props.columns}>{(col) => <div class={s.cell}>{col.header()}</div>}</For>
         </div>
         <div
-          ref={(div) => {
-            div.addEventListener(
-              "wheel",
-              (e) => {
-                if (e.altKey) {
-                  props.onWheelWithAlt?.(e, "allDay");
-                  e.preventDefault();
-                }
-              },
-              {passive: false},
-            );
+          on:wheel={{
+            handleEvent: (e) => {
+              if (e.altKey) {
+                props.onWheelWithAlt?.(e, "allDay");
+                e.preventDefault();
+              }
+            },
+            passive: false,
           }}
           class={s.columnsAllDayArea}
         >
           <For each={props.columns}>{(col) => <div class={s.cell}>{col.allDayArea()}</div>}</For>
         </div>
         <GetRef ref={setHoursArea} waitForMount>
           <div
-            ref={(div) => {
-              div.addEventListener(
-                "wheel",
-                (e) => {
-                  if (e.altKey) {
-                    props.onWheelWithAlt?.(e, "hours");
-                    e.preventDefault();
-                  }
-                },
-                {passive: false},
-              );
+            on:wheel={{
+              handleEvent: (e) => {
+                if (e.altKey) {
+                  props.onWheelWithAlt?.(e, "hours");
+                  e.preventDefault();
+                }
+              },
+              passive: false,
             }}
             class={s.hoursArea}
             onScroll={() => setHoursAreaScrollOffset(hoursArea()!.scrollTop)}

resources/js/components/ui/calendar/MonthCalendar.tsx

@@ -56,18 +56,15 @@ export const MonthCalendar: VoidComponent<Props> = (allProps) => {
           </For>
         </div>
         <div
-          ref={(div) =>
-            div.addEventListener(
-              "wheel",
-              (e) => {
-                if (e.altKey) {
-                  props.onWheelWithAlt?.(e);
-                  e.preventDefault();
-                }
-              },
-              {passive: false},
-            )
-          }
+          on:wheel={{
+            handleEvent: (e) => {
+              if (e.altKey) {
+                props.onWheelWithAlt?.(e);
+                e.preventDefault();
+              }
+            },
+            passive: false,
+          }}
           class="col-span-full row-start-2 grid grid-cols-subgrid gap-px overflow-x-clip overflow-y-auto"
           style={{"grid-auto-rows": "1fr"}}
         >

resources/js/components/ui/title.tsx

@@ -5,17 +5,15 @@ import "tippy.js/dist/border.css";
 import "tippy.js/dist/tippy.css";
 import "./title.scss";
 
-export type TitleDirectiveType = JSX.Element | readonly [JSX.Element, Partial<ExtraTippyProps>];
-
 interface ExtraTippyProps extends Omit<TippyProps, "delay"> {
   /** The appear/disappear delay. Undefined means the default. */
   readonly delay?: number | readonly [number | null | undefined, number | null | undefined];
 }
 
 declare module "solid-js" {
   namespace JSX {
-    interface Directives {
-      title: TitleDirectiveType;
+    interface DirectiveFunctions {
+      title: typeof title;
     }
   }
 }
@@ -104,6 +102,8 @@ class TippySingletonManager {
 
 const tippySingletonManager = new TippySingletonManager();
 
+export type TitleDirectiveType = JSX.Element | readonly [JSX.Element, Partial<ExtraTippyProps>];
+
 /**
  * A replacement for the title attribute, using tippy.js.
  *
@@ -124,7 +124,7 @@ const tippySingletonManager = new TippySingletonManager();
  *   The easiest workaround is to wrap the (potentially) disabled element in a div or span and put
  *   the title on that element.
  */
-export function title(element: Element, accessor: Accessor<TitleDirectiveType>) {
+export function title(element: HTMLElement, accessor: Accessor<TitleDirectiveType>) {
   let thisTippy: Instance | undefined;
   createEffect(
     on(accessor, (value) => {

resources/js/index.tsx

@@ -3,18 +3,19 @@ import {TransProvider} from "@mbarzda/solid-i18next";
 import {MetaProvider} from "@solidjs/meta";
 import {InitializeTanstackQuery} from "components/utils";
 import {DEV, ErrorBoundary, Show} from "solid-js";
-import {DelegatedEvents, render} from "solid-js/web";
+import {render} from "solid-js/web";
 import {Toaster} from "solid-toast";
 import {TimeZoneController} from "time_zone_controller";
 import App from "./App";
 import {FatalError} from "./FatalError";
 import {LoaderInPortal, MemoLoader} from "./components/ui/MemoLoader";
 import {GlobalPageElements} from "./components/utils/GlobalPageElements";
 import {DictionariesAndAttributesProvider} from "./data-access/memo-api/dictionaries_and_attributes_context";
-import "./global_init";
 import {translationsLoaded} from "./i18n_loader";
 import "./index.scss";
-import {luxonInit} from "./luxon_init";
+import "./init_luxon";
+import "./init_solid";
+import "./init_types";
 
 const root = document.getElementById("root");
 if (!(root instanceof HTMLElement)) {
@@ -23,11 +24,6 @@ if (!(root instanceof HTMLElement)) {
 
 const TOAST_DURATION_SECS = 10;
 
-luxonInit();
-
-// Allow stopping propagation of events (see https://github.com/solidjs/solid/issues/1786#issuecomment-1694589801).
-DelegatedEvents.clear();
-
 render(() => {
   return (
     <TransProvider

resources/js/init_luxon.ts

@@ -0,0 +1,19 @@
+import {DateTime, Duration, Settings} from "luxon";
+import {getWeekInfo} from "./components/utils";
+
+declare module "luxon" {
+  interface TSSettings {
+    throwOnInvalid: true;
+  }
+}
+
+Settings.throwOnInvalid = true;
+
+Settings.defaultWeekSettings = getWeekInfo(new Intl.Locale(navigator.language));
+
+// Prevent the luxon classes from serialising as strings, to make it possible to write a custom
+// serialiser that retains the class information.
+for (const cl of [DateTime, Duration]) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  delete (cl as any).prototype.toJSON;
+}

resources/js/init_solid.ts

@@ -0,0 +1,15 @@
+import {DelegatedEvents} from "solid-js/web";
+
+declare module "solid-js" {
+  namespace JSX {
+    interface CustomEvents extends HTMLElementEventMap {}
+    interface ExplicitBoolAttributes {
+      // TODO: Switch inert to bool:inert attributes in the code when Solid types are fixed
+      // (https://github.com/ryansolid/dom-expressions/pull/368)
+      inert: boolean | undefined;
+    }
+  }
+}
+
+// Allow stopping propagation of events (see https://github.com/solidjs/solid/issues/1786#issuecomment-1694589801).
+DelegatedEvents.clear();