feat(lint): update and enable+fix solid rules

eslint.config.js

@@ -4,6 +4,7 @@ import lichthagel from "@lichthagel/eslint-config";
 /** @type {import("@lichthagel/eslint-config").FlatConfigItem[]} */
 export default [
   ...(await lichthagel({
+    solid: true,
     typescript: true,
   })),
   {

package.json

@@ -24,7 +24,7 @@
     "@iconify/json": "^2.2.259",
     "@lichthagel/eslint-config": "github:Lichthagel/eslint-config",
     "eslint": "^9.12.0",
-    "eslint-plugin-n": "^17.11.1",
+    "eslint-plugin-solid": "^0.14.3",
     "solid-element": "^1.9.0",
     "solid-js": "^1.9.2",
     "typescript": "^5.6.3",

src/modules/anisongs/components/Anisongs.tsx

@@ -12,8 +12,8 @@ type Props = {
   mediaId: string | null;
 };
 
-const Anisongs: Component<Props> = ({ mediaId }) => {
-  const [data] = createResource(mediaId, async (mediaId) => {
+const Anisongs: Component<Props> = (props) => {
+  const [data] = createResource(() => props.mediaId, async (mediaId) => {
     const cache = sessionStorage.getItem(`lichtSong${mediaId}`);
 
     // check if request needed

src/modules/anisongs/components/Theme.tsx

@@ -8,23 +8,23 @@ type Props = {
   theme: AnimeTheme;
 };
 
-const Theme: Component<Props> = ({ theme }) => (
+const Theme: Component<Props> = (props) => (
   <div class={styles.theme}>
     <div class={styles.heading}>
-      <span class={styles.slug}>{theme.slug}</span>
-      <span>{theme.song.title}</span>
+      <span class={styles.slug}>{props.theme.slug}</span>
+      <span>{props.theme.song.title}</span>
     </div>
-    <Show when={theme.group}>
-      <div><b>{theme.group}</b></div>
+    <Show when={props.theme.group}>
+      <div><b>{props.theme.group}</b></div>
     </Show>
-    <Show when={theme.song.artists && theme.song.artists.length > 0}>
+    <Show when={props.theme.song.artists && props.theme.song.artists.length > 0}>
       <div>
         <b>Artist(s):</b>
         {" "}
-        {theme.song.artists!.map((artist) => artist_to_string(artist)).join(", ")}
+        {props.theme.song.artists!.map((artist) => artist_to_string(artist)).join(", ")}
       </div>
     </Show>
-    <For each={theme.animethemeentries}>
+    <For each={props.theme.animethemeentries}>
       {(entry) => (
         <ThemeEntry entry={entry} />
       )}

src/modules/anisongs/components/ThemeEntry.tsx

@@ -9,21 +9,21 @@ type Props = {
   entry: AnimeThemeEntry;
 };
 
-const ThemeEntry: Component<Props> = ({ entry }) => (
+const ThemeEntry: Component<Props> = (props) => (
   <div class={styles.themeEntry}>
-    <Show when={entry.version}>
-      <div class={styles.tag}>{`v${entry.version}`}</div>
+    <Show when={props.entry.version}>
+      <div class={styles.tag}>{`v${props.entry.version}`}</div>
     </Show>
-    <Show when={entry.episodes}>
-      <div class={styles.tag}>{`Episode(s): ${entry.episodes}`}</div>
+    <Show when={props.entry.episodes}>
+      <div class={styles.tag}>{`Episode(s): ${props.entry.episodes}`}</div>
     </Show>
-    <Show when={entry.nsfw}>
+    <Show when={props.entry.nsfw}>
       <div class={styles.tag}>NSFW</div>
     </Show>
-    <Show when={entry.spoiler}>
+    <Show when={props.entry.spoiler}>
       <div class={styles.tag}>Spoiler</div>
     </Show>
-    <Videos videos={entry.videos} />
+    <Videos videos={props.entry.videos} />
   </div>
 );
 

src/modules/anisongs/components/Themes.tsx

@@ -9,13 +9,13 @@ type Props = {
   heading: string;
 };
 
-const Themes: Component<Props> = ({ themes, heading }) => (
+const Themes: Component<Props> = (props) => (
   <div>
-    <h2>{heading}</h2>
-    <Show when={!themes || themes.length === 0}>
+    <h2>{props.heading}</h2>
+    <Show when={!props.themes || props.themes.length === 0}>
       <div>Nothing found</div>
     </Show>
-    <For each={themes}>
+    <For each={props.themes}>
       {(theme) => (
         <Theme theme={theme} />
       )}