finish migration to less deps

src/components/list/list.tsx

@@ -1,5 +1,5 @@
 import { Accessor, Index, JSX } from "solid-js";
-import { css } from "./list.module.css";
+import css from "./list.module.css";
 
 interface ListProps<T> {
   label: string;

src/features/content/data.ts

@@ -21,10 +21,10 @@ export const entries = new Map<number, Entry>([
     summary: 'Wednesday Addams is sent to Nevermore Academy, a bizarre boarding school where she attempts to master her psychic powers, stop a monstrous killing spree of the town citizens, and solve the supernatural mystery that affected her family',
     releaseDate: '2022',
     sources: [
-      { label: 'TMDB', url: new URL('https://themoviedb.org/tv/119051'), rating: { score: 8.5, max: 10 } }
+      { label: 'TMDB', url: 'https://themoviedb.org/tv/119051', rating: { score: 8.5, max: 10 } }
     ]
   },
-].map((entry) => [ entry.id, entry ]));
+].map((entry) => [entry.id, entry]));
 
 
 export const emptyEntry = Object.freeze<Entry>({ id: 0, title: '' });

src/features/content/service.ts

@@ -8,24 +8,24 @@ export const listCategories = cache(async (): Promise<Category[]> => {
   return [
     {
       label: 'Popular',
-      entries: [ entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+      entries: [entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!],
     },
     {
       label: 'Drama',
-      entries: [ entries.get(5)!, entries.get(6)!, entries.get(7)!, entries.get(8)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+      entries: [entries.get(5)!, entries.get(6)!, entries.get(7)!, entries.get(8)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!],
     },
     {
       label: 'Now streaming',
-      entries: [ entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+      entries: [entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!],
     },
     {
       label: 'Sci-Fi & Fantasy',
-      entries: [ entries.get(9)!, entries.get(11)!, entries.get(12)!, entries.get(13)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+      entries: [entries.get(9)!, entries.get(11)!, entries.get(12)!, entries.get(13)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!],
     },
   ];
-}, "series.categories.list");
+}, 'series.categories.list');
 
-export const getEntry = cache(async (id: Entry['id']): Promise<Entry|undefined> => {
+export const getEntry = cache(async (id: Entry['id']): Promise<Entry | undefined> => {
   "use server";
 
   return entries.get(id);

src/features/content/types.ts

@@ -17,7 +17,7 @@ export interface Entry {
 export namespace Entry {
   export interface Source {
     label: string;
-    url: URL;
+    url: string;
     rating: Source.Rating;
   }
 

src/features/overview/list-item.module.css

@@ -8,7 +8,7 @@
   inline-size: clamp(15em 20vw 30em);
   aspect-ratio: 3 / 5;
   transform: translateY(calc(-2 * var(--padding)));
-  zindex: 1;
+  z-index: 1;
   contain: layout size style;
 
   & > img {
@@ -22,22 +22,18 @@
 
     box-shadow: 0 0 1em #000;
     background:
-        /* Dot */ radial-gradient(
-        circle at 25% 30% #7772 #7774 1em transparent 1em
-      )
+      /* Dot */
+      radial-gradient(circle at 25% 30% #7772 #7774 1em transparent 1em)
       /* Dot */
       radial-gradient(circle at 85% 15% #7772 #7774 1em transparent 1em)
-      /* Bottom fade */ linear-gradient(165deg transparent 60% #555 60% #333)
+      /* Bottom fade */
+      linear-gradient(165deg transparent 60% #555 60% #333)
       /* wave dark part */
-      radial-gradient(
-        ellipse 5em 2.25em at 0.5em calc(50% - 1em) #333 100% transparent 100%
-      )
+      radial-gradient(ellipse 5em 2.25em at 0.5em calc(50% - 1em) #333 100% transparent 100%)
       /* wave light part */
-      radial-gradient(
-        ellipse 5em 2.25em at calc(100% - 0.5em) calc(50% + 1em) #555 100%
-          transparent 100%
-      )
-      /* Base */ linear-gradient(to bottom #333 50% #555 50%);
+      radial-gradient(ellipse 5em 2.25em at calc(100% - 0.5em) calc(50% + 1em) #555 100% transparent 100%)
+      /* Base */
+      linear-gradient(to bottom #333 50% #555 50%);
 
     transform-origin: 50% 0;
     transform: scale(0.8) translateY(calc(-4 * var(--padding)));
@@ -74,12 +70,12 @@
     z-index: 0;
     will-change: transform;
 
-    & > img: {
+    & > img {
       transform: scale(1) translateY(0);
       will-change: transform;
     }
 
-    & > main: {
+    & > main {
       clip-path: inset(40%);
     }
   }
@@ -97,11 +93,11 @@
 
     &:is(:hover :focus-within) {
       transition-delay: 0s 0.3s;
-      zindex: 1;
+      z-index: 1;
 
       & > img {
         transition: transform 0.2s ease-in-out;
       }
     }
   }
-}
+}

src/features/overview/overview.tsx

@@ -10,7 +10,7 @@ type OverviewProps = {
   categories: Category[];
 };
 
-export function Overview(props: OverviewProps) {
+export const Overview: Component<OverviewProps> = (props) => {
   return (
     <div class={css.container}>
       <Hero entry={props.highlight}></Hero>

src/features/shell/shell.module.css

@@ -1,37 +1,37 @@
 .container {
   display: grid;
   grid: 100% / 100%;
-  zindex: 0;
-  overflowinline: clip;
-  overflowblock: auto;
-  containertype: inline-size;
+  z-index: 0;
+  overflow-inline: clip;
+  overflow-block: auto;
+  container-type: inline-size;
 }
 
 
 .body {
-  gridArea: 1 / 1;
-  inlineSize: 100%;
-  blockSize: fit-content;
-  paddingInline: 2em;
-  paddingBlockEnd: 5em;
+  grid-area: 1 / 1;
+  inline-size: 100%;
+  block-size: fit-content;
+  padding-inline: 2em;
+  padding-block-end: 5em;
   background: linear-gradient(180deg, transparent, transparent 90vh, #333 90vh, #333);
 
-  @container (inline-size >= 600px) {
-    paddingInlineStart: 7.5em;
-  },
+  @container (inline-size >=600px) {
+    padding-inline-start: 7.5em;
+  }
 }
 
 .nav {
-  gridArea: 1 / 1;
+  grid-area: 1 / 1;
   display: none;
-  gridAutoFlow: row;
-  alignContent: start;
-  inlineSize: 7.5em;
+  grid-auto-flow: row;
+  align-content: start;
+  inline-size: 7.5em;
   padding: 1em;
   position: sticky;
-  insetBlockStart: 0;
+  inset-block-start: 0;
 
-  @container (inline-size >= 600px) {
+  @container (inline-size >=600px) {
     display: grid;
-  },
-}
+  }
+}

src/features/shell/shell.tsx

@@ -1,13 +1,13 @@
-import { RouteSectionProps, A } from "@solidjs/router";
+import { A } from "@solidjs/router";
 import {
   FaSolidHouseChimney,
   FaSolidMagnifyingGlass,
   FaSolidStar,
 } from "solid-icons/fa";
-import { Component } from "solid-js";
+import { ParentComponent, Component } from "solid-js";
 import css from "./shell.module.css";
 
-export const Shell: Component<RouteSectionProps> = (props) => {
+export const Shell: ParentComponent = (props) => {
   return (
     <main class={css.container}>
       <Nav />

src/routes/(shell).tsx

@@ -1,6 +1,7 @@
 
+import { ParentProps } from "solid-js";
 import { Shell } from "~/features/shell";
 
-export default function ShellPage(props) {
+export default function ShellPage(props: ParentProps) {
   return <Shell>{props.children}</Shell>;
 }

src/routes/(shell)/[...404].tsx

@@ -4,9 +4,10 @@ import { HttpStatusCode } from "@solidjs/start";
 export default function NotFound() {
   return (
     <main>
-    <Title>Not Found</Title>
-    <HttpStatusCode code={404} />
-    <h1>Page Not Found</h1>
+      <Title>Not Found</Title>
+      <HttpStatusCode code={404} />
+
+      <h1>Page Not Found</h1>
     </main>
   );
 }

src/routes/(shell)/index.tsx

@@ -15,14 +15,12 @@ export default function Home() {
   const highlight = createAsync(() => getEntry(14));
   const categories = createAsync(() => listCategories());
 
-  console.log('page', highlight()?.id, categories?.length);
-
   return (
     <>
       <Title>Home</Title>
 
       <Show when={highlight() && categories()}>
-        <Overview highlight={highlight()} categories={categories()} />
+        <Overview highlight={highlight()!} categories={categories()!} />
       </Show>
     </>
   );

src/routes/(shell)/library/index.tsx

@@ -3,7 +3,7 @@ import { Title } from "@solidjs/meta";
 export default function Index() {
   const title = 'Library';
   return <>
-    <Title>{ title }</Title>
+    <Title>{title}</Title>
     <h1>{title}</h1>
-    </>;
+  </>;
 }

src/routes/(shell)/manage/index.tsx

@@ -3,7 +3,7 @@ import { Title } from "@solidjs/meta";
 export default function Index() {
   const title = 'Manage';
   return <>
-    <Title>{ title }</Title>
+    <Title>{title}</Title>
     <h1>{title}</h1>
-    </>;
+  </>;
 }

src/routes/(shell)/search/index.tsx

@@ -3,7 +3,7 @@ import { Title } from "@solidjs/meta";
 export default function Index() {
   const title = 'Search';
   return <>
-    <Title>{ title }</Title>
+    <Title>{title}</Title>
     <h1>{title}</h1>
-    </>;
+  </>;
 }