refactor: add createComponentRef function to avoid ! and oxlint when defining solidjs ref

Author: Lukinoh

src/domains/_core/components/alone-dialog/alone-dialog.tsx

@@ -1,10 +1,10 @@
 import { type Component, createEffect } from "solid-js";
 import { Dialog, type DialogRef } from "../../../ui/components/dialog/dialog";
+import { createComponentRef } from "../../utils/solid-js";
 import { useAlone } from "./use-alone";
 
 export const AloneDialog: Component = () => {
-  // oxlint-disable-next-line init-declarations no-unassigned-vars
-  let dialog!: DialogRef;
+  const dialog = createComponentRef<DialogRef>();
   const { alone } = useAlone();
 
   createEffect(() => {

src/domains/_core/utils/solid-js.ts

@@ -24,3 +24,23 @@ export async function createSingletonRootAsync<T>(
   await instance.isMounted;
   return () => instance;
 }
+
+/**
+ * This function returns undefined typed as T.
+ * The usage of this function is strictly related to SolidJS component and ref setter.
+ * If you write the ref natively, you have to use ! in conjonction of a comment to avoid lint issues
+ * ```
+ * // oxlint-disable-next-line init-declarations no-unassigned-vars
+ * let dialog!: DialogRef;
+ * ```
+ *
+ * Using this function we can "bypass" the behaviour like this.
+ * ```
+ * let dialog = createComponentRef<DialogRef>();
+ * ```
+ * It is important to use a let.
+ */
+export function createComponentRef<T>(): T {
+  // oxlint-disable-next-line no-unsafe-type-assertion
+  return undefined as T;
+}

src/domains/database/components/valibot-import-button/valibot-import-button.tsx

@@ -6,6 +6,7 @@ import { isFunction, isString } from "remeda";
 import { AdaptativeButton } from "../../../ui/components/buttons/adaptative-button";
 import { DialogFooterClose } from "../../../ui/components/dialog/footers/dialog-footer-close";
 import { ValibotErrorContent } from "./valibot-error-content";
+import { createComponentRef } from "../../../_core/utils/solid-js";
 import { css } from "@emotion/css";
 
 const sSuccess = css({
@@ -18,10 +19,9 @@ interface ValibotButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement>
 }
 
 export const ValibotImportButton: Component<ValibotButtonProps> = (props) => {
-  // oxlint-disable-next-line init-declarations no-unassigned-vars
-  let dialogSuccess!: DialogRef;
-  // oxlint-disable-next-line init-declarations no-unassigned-vars
-  let dialogError!: DialogRef;
+  const dialogSuccess = createComponentRef<DialogRef>();
+  const dialogError = createComponentRef<DialogRef>();
+
   const [data, setData] = createSignal<Array<AttemptsEntityIssue> | undefined>(undefined);
 
   const args = createMemo<JSX.ButtonHTMLAttributes<HTMLButtonElement>>(() => {

src/domains/obs/popup-obs.tsx

@@ -1,5 +1,6 @@
 import { type Component, Match, Switch, createEffect, createMemo, createSignal, on, onMount } from "solid-js";
 import { VerticalAttemptsComparisonTable } from "../attempt/components/attempts-comparison-table/vertical-attempts-comparison-table";
+import { createComponentRef } from "../_core/utils/solid-js";
 import { css } from "@emotion/css";
 import { useObsListener } from "./compositions/use-obs-listener";
 
@@ -17,10 +18,8 @@ const sTable = css({
 });
 
 export const PopupObs: Component = () => {
-  // oxlint-disable-next-line init-declarations no-unassigned-vars
-  let tableDiv!: HTMLDivElement;
-  // oxlint-disable-next-line init-declarations no-unassigned-vars
-  let outerTableDiv!: HTMLDivElement;
+  const tableDiv = createComponentRef<HTMLDivElement>();
+  const outerTableDiv = createComponentRef<HTMLDivElement>();
 
   const { data } = useObsListener();
   const [scale, setScale] = createSignal(1);

src/domains/time-trial/components/time-trial-player.tsx

@@ -10,6 +10,7 @@ import { GridColumn } from "../../ui/components/grid/grid-column";
 import { ObsButton } from "../../obs/components/obs-button";
 import { PlaybackRateSelect } from "./playback-rate-select";
 import { PlayerInput } from "./player-input";
+import { createComponentRef } from "../../_core/utils/solid-js";
 import { css } from "@emotion/css";
 import { useSettingsRepository } from "../../database/compositions/use-settings-repository";
 import { useTimeTrial } from "../compositions/use-time-trial";
@@ -53,8 +54,7 @@ const sVideoCanvasItem = css({
 });
 
 export const TimeTrialPlayer: Component = () => {
-  // oxlint-disable-next-line init-declarations no-unassigned-vars
-  let dialog!: DialogRef;
+  const dialog = createComponentRef<DialogRef>();
 
   const timeTrial = useTimeTrial();
   const settings = useSettingsRepository();

src/domains/ui/components/dialog/dialog.tsx

@@ -2,6 +2,7 @@ import { type Component, type JSX, type Ref, Show, onMount } from "solid-js";
 import { DialogContent } from "./dialog-content";
 import { DialogContext } from "./dialog-context";
 import { Portal } from "solid-js/web";
+import { createComponentRef } from "../../../_core/utils/solid-js";
 import { css } from "@emotion/css";
 import { isFunction } from "remeda";
 
@@ -26,8 +27,7 @@ interface DialogProps {
 }
 
 export const Dialog: Component<DialogProps> = (props) => {
-  // oxlint-disable-next-line init-declarations no-unassigned-vars
-  let dialog!: HTMLDialogElement;
+  const dialog = createComponentRef<HTMLDialogElement>();
 
   onMount(() => {
     if (isFunction(props.ref)) {