packages bumped

package.json

@@ -23,13 +23,13 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.17.5",
-    "@builder.io/qwik-city": "0.1.1",
-    "@types/eslint": "8.21.0",
-    "@types/node": "^18.13.0",
+    "@builder.io/qwik": "0.18.1",
+    "@builder.io/qwik-city": "0.2.1",
+    "@types/eslint": "8.21.1",
+    "@types/node": "^18.14.0",
     "@types/node-fetch": "latest",
-    "@typescript-eslint/eslint-plugin": "5.51.0",
-    "@typescript-eslint/parser": "5.51.0",
+    "@typescript-eslint/eslint-plugin": "5.52.0",
+    "@typescript-eslint/parser": "5.52.0",
     "autoprefixer": "10.4.13",
     "eslint": "8.34.0",
     "eslint-config-prettier": "^8.6.0",
@@ -39,23 +39,23 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-qwik": "0.17.5",
+    "eslint-plugin-qwik": "0.18.1",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-tailwindcss": "^3.8.3",
     "node-fetch": "3.3.0",
     "postcss": "^8.4.21",
     "prettier": "2.8.4",
-    "prettier-plugin-tailwindcss": "^0.2.2",
-    "tailwindcss": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.2.3",
+    "tailwindcss": "^3.2.7",
     "ts-prune": "^0.10.3",
     "typescript": "4.9.5",
-    "undici": "5.18.0",
-    "vite": "4.1.1",
+    "undici": "5.20.0",
+    "vite": "4.1.2",
     "vite-tsconfig-paths": "4.0.5"
   },
   "dependencies": {
     "clsx": "^1.2.1",
-    "daisyui": "^2.50.0",
+    "daisyui": "^2.50.1",
     "zod": "^3.20.6"
   }
 }

src/routes/genre/[genreId]/movie/index.tsx

@@ -5,9 +5,8 @@ import { MediaGrid } from "~/modules/MediaGrid/MediaGrid";
 import { getMediaByGenre } from "~/services/tmdb";
 import type { ProductionMedia } from "~/services/types";
 import { paths } from "~/utils/paths";
-import type { LoaderContent } from "~/utils/types";
 
-export const genreMoviesLoader = loader$((event) => {
+export const useGenreMovies = loader$((event) => {
   const parseResult = z
     .object({ genreId: z.coerce.number().min(0).step(1) })
     .safeParse(event.params);
@@ -28,7 +27,7 @@ export default component$(() => {
 
   const containerRef = useSignal<Element | null>(null);
 
-  const movies = genreMoviesLoader.use();
+  const movies = useGenreMovies();
 
   const store = useStore(
     {
@@ -66,10 +65,7 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = (event) => {
-  const data = event.getData<Awaited<LoaderContent<typeof genreMoviesLoader>>>(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    genreMoviesLoader as any
-  );
+  const data = event.resolveValue(useGenreMovies);
   return data.genre
     ? { title: `${data.genre.name} Tv Shows - Qwik City Movies` }
     : {};

src/routes/genre/[genreId]/tv/index.tsx

@@ -5,9 +5,8 @@ import { MediaGrid } from "~/modules/MediaGrid/MediaGrid";
 import { getMediaByGenre } from "~/services/tmdb";
 import type { ProductionMedia } from "~/services/types";
 import { paths } from "~/utils/paths";
-import { LoaderContent } from "~/utils/types";
 
-export const genreTvShowsLoader = loader$((event) => {
+export const useGenreTvShowsLoader = loader$((event) => {
   const parseResult = z
     .object({ genreId: z.coerce.number().min(0).step(1) })
     .safeParse(event.params);
@@ -28,7 +27,7 @@ export default component$(() => {
 
   const containerRef = useSignal<Element | null>(null);
 
-  const tvShows = genreTvShowsLoader.use();
+  const tvShows = useGenreTvShowsLoader();
 
   const store = useStore(
     {
@@ -66,10 +65,7 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = (event) => {
-  const data = event.getData<Awaited<LoaderContent<typeof genreTvShowsLoader>>>(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    genreTvShowsLoader as any
-  );
+  const data = event.resolveValue(useGenreTvShowsLoader);
   return data.genre
     ? { title: `${data.genre.name} Tv Shows - Qwik City Movies` }
     : {};

src/routes/index.tsx

@@ -15,7 +15,7 @@ import type { ProductionMedia } from "~/services/types";
 import { getListItem } from "~/utils/format";
 import { paths } from "~/utils/paths";
 
-export const contentLoader = loader$(async (event) => {
+export const useContentLoader = loader$(async (event) => {
   try {
     const [movies, tv] = await Promise.all([
       getTrendingMovie({ page: 1 }),
@@ -39,7 +39,7 @@ export const contentLoader = loader$(async (event) => {
 });
 
 export default component$(() => {
-  const resource = contentLoader.use();
+  const resource = useContentLoader();
 
   return (
     <div class="flex max-h-screen flex-col gap-4 overflow-y-scroll">

src/routes/movie/(all)/index.tsx

@@ -7,7 +7,7 @@ import { getMovie, getMovies, getRandomMedia } from "~/services/tmdb";
 import { getListItem } from "~/utils/format";
 import { paths } from "~/utils/paths";
 
-export const allMoviesLoader = loader$(async () => {
+export const useAllMoviesLoader = loader$(async () => {
   const [popular, topRated, nowPlaying] = await Promise.all([
     getMovies({ page: 1, query: "popular" }),
     getMovies({ page: 1, query: "top_rated" }),
@@ -24,7 +24,7 @@ export const allMoviesLoader = loader$(async () => {
 });
 
 export default component$(() => {
-  const resource = allMoviesLoader.use();
+  const resource = useAllMoviesLoader();
 
   return (
     <div class="flex max-h-screen flex-col gap-4 overflow-y-scroll">

src/routes/movie/[movieId]/(overview)/index.tsx

@@ -2,10 +2,10 @@ import { component$ } from "@builder.io/qwik";
 import { DocumentHead } from "@builder.io/qwik-city";
 import { MovieInfoCard } from "~/modules/MovieInfoCard/MovieInfoCard";
 import { PersonCarousel } from "~/modules/PersonCarousel/PersonCarousel";
-import { movieLoader } from "../layout";
+import { useMovieLoader } from "../layout";
 
 export default component$(() => {
-  const resource = movieLoader.use();
+  const resource = useMovieLoader();
 
   return (
     <flex class="flex flex-col">

src/routes/movie/[movieId]/layout.tsx

@@ -7,7 +7,7 @@ import { MovieHero } from "~/modules/MovieHero/MovieHero";
 import { getMovie } from "~/services/tmdb";
 import { paths } from "~/utils/paths";
 
-export const movieLoader = loader$(async (event) => {
+export const useMovieLoader = loader$(async (event) => {
   const parseResult = z
     .object({ movieId: z.coerce.number().min(0).step(1) })
     .safeParse(event.params);
@@ -28,7 +28,7 @@ export const movieLoader = loader$(async (event) => {
 export default component$(() => {
   const location = useLocation();
 
-  const movie = movieLoader.use();
+  const movie = useMovieLoader();
 
   const overviewHref = paths.media("movie", +location.params.movieId);
   const videoHref = paths.movieVideo(+location.params.movieId);

src/routes/movie/[movieId]/photos/index.tsx

@@ -1,10 +1,10 @@
 import { component$ } from "@builder.io/qwik";
 import { DocumentHead } from "@builder.io/qwik-city";
 import { getImage, getImageSet } from "~/services/images";
-import { movieLoader } from "../layout";
+import { useMovieLoader } from "../layout";
 
 export default component$(() => {
-  const resource = movieLoader.use();
+  const resource = useMovieLoader();
 
   return (
     <section class="flex flex-col gap-8 px-16 py-4">

src/routes/movie/[movieId]/videos/index.tsx

@@ -1,9 +1,9 @@
 import { component$ } from "@builder.io/qwik";
 import { DocumentHead } from "@builder.io/qwik-city";
-import { movieLoader } from "../layout";
+import { useMovieLoader } from "../layout";
 
 export default component$(() => {
-  const resource = movieLoader.use();
+  const resource = useMovieLoader();
 
   return (
     <section class="grid grid-cols-[repeat(auto-fill,minmax(20rem,1fr))] gap-6 px-16 py-4">

src/routes/movie/categories/[name]/index.tsx

@@ -7,7 +7,7 @@ import type { ProductionMedia } from "~/services/types";
 import { getListItem } from "~/utils/format";
 import { paths } from "~/utils/paths";
 
-export const categoryLoader = loader$(async (event) => {
+export const useCategoryLoader = loader$(async (event) => {
   const parseResult = z
     .object({ name: z.string().min(1) })
     .safeParse(event.params);
@@ -33,7 +33,7 @@ export default component$(() => {
 
   const containerRef = useSignal<Element | null>(null);
 
-  const resource = categoryLoader.use();
+  const resource = useCategoryLoader();
 
   const store = useStore(
     {

src/routes/person/[personId]/index.tsx

@@ -7,7 +7,7 @@ import { PersonHero } from "~/modules/PersonHero/PersonHero";
 import { getPerson } from "~/services/tmdb";
 import { paths } from "~/utils/paths";
 
-export const personLoader = loader$(async (event) => {
+export const usePersonLoader = loader$(async (event) => {
   const parseResult = z
     .object({ personId: z.coerce.number().min(0).step(1) })
     .safeParse(event.params);
@@ -25,7 +25,7 @@ export const personLoader = loader$(async (event) => {
 });
 
 export default component$(() => {
-  const resource = personLoader.use();
+  const resource = usePersonLoader();
 
   return (
     <div style="max-h-screen overflow-y-scroll flex flex-col">

src/routes/search/index.tsx

@@ -4,7 +4,7 @@ import { MediaGrid } from "~/modules/MediaGrid/MediaGrid";
 import { search } from "~/services/tmdb";
 import type { ProductionMedia } from "~/services/types";
 
-export const searchLoader = loader$(async (event) => {
+export const useSearchLoader = loader$(async (event) => {
   const query = event.url.searchParams.get("query");
 
   if (!query) {
@@ -21,7 +21,7 @@ export default component$(() => {
 
   const containerRef = useSignal<Element | null>(null);
 
-  const resource = searchLoader.use();
+  const resource = useSearchLoader();
 
   const store = useStore(
     {

src/routes/tv/(all)/index.tsx

@@ -7,7 +7,7 @@ import { getRandomMedia, getTvShow, getTvShows } from "~/services/tmdb";
 import { getListItem } from "~/utils/format";
 import { paths } from "~/utils/paths";
 
-export const tvShowsLoader = loader$(async () => {
+export const useTvShowsLoader = loader$(async () => {
   const [popular, topRated, onTheAir, airingToday] = await Promise.all([
     getTvShows({ page: 1, query: "popular" }),
     getTvShows({ page: 1, query: "top_rated" }),
@@ -25,7 +25,7 @@ export const tvShowsLoader = loader$(async () => {
 });
 
 export default component$(() => {
-  const resource = tvShowsLoader.use();
+  const resource = useTvShowsLoader();
 
   return (
     <div class="flex max-h-screen flex-col gap-4 overflow-y-scroll">

src/routes/tv/[tvId]/index.tsx

@@ -8,7 +8,7 @@ import { TvHero } from "~/modules/TvHero/TvHero";
 import { getTvShow } from "~/services/tmdb";
 import { paths } from "~/utils/paths";
 
-export const tvShowLoader = loader$(async (event) => {
+export const useTvShowLoader = loader$(async (event) => {
   const parseResult = z
     .object({ tvId: z.coerce.number().min(0).step(1) })
     .safeParse(event.params);
@@ -26,7 +26,7 @@ export const tvShowLoader = loader$(async (event) => {
 });
 
 export default component$(() => {
-  const resource = tvShowLoader.use();
+  const resource = useTvShowLoader();
 
   return (
     <flex class="flex max-h-screen flex-col overflow-y-scroll">

src/routes/tv/categories/[name]/index.tsx

@@ -7,7 +7,7 @@ import type { ProductionMedia } from "~/services/types";
 import { getListItem } from "~/utils/format";
 import { paths } from "~/utils/paths";
 
-export const tvShowCategoryLoader = loader$(async (event) => {
+export const useTvShowCategoryLoader = loader$(async (event) => {
   const parseResult = z
     .object({ name: z.string().min(1) })
     .safeParse(event.params);
@@ -33,7 +33,7 @@ export default component$(() => {
 
   const containerRef = useSignal<Element | null>(null);
 
-  const resource = tvShowCategoryLoader.use();
+  const resource = useTvShowCategoryLoader();
 
   const store = useStore(
     {