Update solid in web-next

NB: solidjs/solid-start#1679

apps/web-next/package.json

@@ -27,8 +27,8 @@
     "@solid-primitives/media": "^2.2.9",
     "@solid-primitives/scheduled": "^1.4.3",
     "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.13.3",
-    "@solidjs/start": "^1.0.0",
+    "@solidjs/router": "^0.15.2",
+    "@solidjs/start": "^1.0.10",
     "@tabler/icons": "^3.3.0",
     "autoprefixer": "^10.4.19",
     "binary-search": "^1.3.6",
@@ -54,14 +54,14 @@
     "pretty-ms": "^9.0.0",
     "slugify": "^1.6.6",
     "solid-floating-ui": "^0.3.1",
-    "solid-js": "^1.8.17",
+    "solid-js": "^1.9.3",
     "solid-mdx": "^0.0.7",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "tiny-invariant": "^1.3.3",
     "valibot": "^0.30.0",
     "video.js": "^8.12.0",
-    "vinxi": "^0.3.11",
+    "vinxi": "^0.5.1",
     "xss": "^1.0.15",
     "zod": "^3.23.8"
   },
@@ -81,7 +81,7 @@
     "@types/wait-on": "^5.3.4",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
-    "@vinxi/plugin-mdx": "^3.7.1",
+    "@vinxi/plugin-mdx": "^3.7.2",
     "eslint": "^8.57.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
@@ -93,5 +93,8 @@
     "typescript": "^5.4.5",
     "vite-plugin-solid-svg": "^0.8.1",
     "wait-on": "^7.2.0"
+  },
+  "overrides": {
+    "vite": "5.4.10"
   }
 }

apps/web-next/src/components/churches/data.ts

@@ -5,6 +5,7 @@ import {
   ChurchesDataQueryVariables,
 } from './__generated__/data';
 import { getAuthenticatedClient } from '~/util/gql/server';
+import { unwrapFirst } from '~/util';
 
 export async function getChurchesData(f: Filters) {
   'use server';
@@ -66,8 +67,8 @@ export async function getChurchesData(f: Filters) {
       {
         lon: f.center[0],
         lat: f.center[1],
-        range: f.range,
-        organization: f.organization ?? null,
+        range: unwrapFirst(f.range) ?? '',
+        organization: unwrapFirst(f.organization),
         tags: f.tags,
       },
     );

apps/web-next/src/components/churches/searchbox/location.tsx

@@ -10,7 +10,7 @@ import {
   type Input,
 } from 'valibot';
 import { useSearchParams } from '@solidjs/router';
-import { type Optional, cn } from '../../../util';
+import { type Optional, cn, unwrapFirst } from '../../../util';
 import ListHeading from './list-heading';
 import { getMenuColorClass, optionId } from './util';
 import ResultRow from './result-row';
@@ -101,10 +101,10 @@ export const useParsedLocation = () => {
       searchParams['range'] ??
       (searchParams['center'] ? defaultRange : '25000 mi'),
     center:
-      (searchParams['center']?.split(',').map(parseFloat).slice(0, 2) as [
-        number,
-        number,
-      ]) ?? murica,
+      (unwrapFirst(searchParams['center'])
+        ?.split(',')
+        .map(parseFloat)
+        .slice(0, 2) as [number, number]) ?? murica,
   }));
 
   return parsed;
@@ -125,7 +125,7 @@ export function locationState(clearInput: () => unknown) {
   const [searchParams, setSearchParams] = useSearchParams();
 
   onMount(async () => {
-    const center = searchParams['center'];
+    const center = unwrapFirst(searchParams['center']);
 
     if (center) {
       const res = await reverseGeocode(

apps/web-next/src/components/churches/searchbox/organization.tsx

@@ -1,7 +1,7 @@
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import { useSearchParams } from '@solidjs/router';
 import { gql } from 'graphql-request';
-import { type Optional, cn } from '../../../util';
+import { type Optional, cn, unwrapFirst } from '../../../util';
 import ListHeading from './list-heading';
 import ResultRow from './result-row';
 import { getMenuColorClass, optionId } from './util';
@@ -104,7 +104,7 @@ export function organizationState(clearInput: () => unknown) {
     const orgId = searchParams[organizationSlug];
 
     if (orgId) {
-      const res = await fetchOrganization(orgId);
+      const res = await fetchOrganization(unwrapFirst(orgId) ?? '');
       setOrganizationLabel(res.name);
     }
   });

apps/web-next/src/components/churches/searchbox/searchbox.tsx

@@ -27,7 +27,7 @@ import {
 import { TagsMenu, useParsedTags, tagSlug, tagsState } from './tags';
 import { optionId } from './util';
 import { OrganizationTag } from '~/__generated__/graphql-types';
-import type { Optional } from '~/util';
+import { unwrapFirst, type Optional } from '~/util';
 
 const hiddenOrganization = 'organization';
 
@@ -152,7 +152,7 @@ export default function Searchbox(props: { hidden?: Optional<Array<string>> }) {
     } else if (chiclet.slug === organizationSlug) {
       onClearOrganization();
     } else {
-      const newTags = searchParams[tagSlug]
+      const newTags = unwrapFirst(searchParams[tagSlug])
         ?.split(',')
         .filter((t) => t !== chiclet.slug);
       setSearchParams({
@@ -231,7 +231,7 @@ export default function Searchbox(props: { hidden?: Optional<Array<string>> }) {
       } else if (slug === 'organization') {
         onClearOrganization();
       } else if (slug) {
-        const newTags = searchParams[tagSlug]
+        const newTags = unwrapFirst(searchParams[tagSlug])
           ?.split(',')
           .filter((t) => t !== slug);
         setSearchParams({

apps/web-next/src/components/churches/searchbox/tags.tsx

@@ -1,7 +1,7 @@
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import { useSearchParams } from '@solidjs/router';
 import { gql } from 'graphql-request';
-import { type Optional, cn } from '../../../util';
+import { type Optional, cn, unwrapFirst } from '../../../util';
 import ListHeading from './list-heading';
 import { getMenuColorClass, getOrgTagCategoryLabel, optionId } from './util';
 import ResultRow from './result-row';
@@ -18,7 +18,7 @@ export const useParsedTags = () => {
   const [searchParams] = useSearchParams();
 
   const parsed = createMemo(() => ({
-    tags: searchParams['tag']?.split(',') ?? [],
+    tags: unwrapFirst(searchParams['tag'])?.split(',') ?? [],
   }));
 
   return parsed;
@@ -131,7 +131,7 @@ export function TagsMenu(props: {
   const [searchParams, setSearchParams] = useSearchParams();
 
   function addTag(tag: OrganizationTagQueryNode) {
-    const tags = searchParams[tagSlug]?.split(',') ?? [];
+    const tags = unwrapFirst(searchParams[tagSlug])?.split(',') ?? [];
     tags.push(tag.slug);
     setSearchParams({ [tagSlug]: tags.join(',') });
     props.clearInput();

apps/web-next/src/components/content/about-stats.tsx

@@ -1,13 +1,13 @@
 import { gql } from 'graphql-request';
 import humanFormat from 'human-format';
-import { cache, createAsync } from '@solidjs/router';
+import { query, createAsync } from '@solidjs/router';
 import type {
   AboutPageDataQuery,
   AboutPageDataQueryVariables,
 } from './__generated__/about-stats';
 import { getAuthenticatedClient } from '~/util/gql/server';
 
-const getData = cache(async () => {
+const getData = query(async () => {
   'use server';
   const client = await getAuthenticatedClient();
 

apps/web-next/src/components/navigating-checklist.tsx

@@ -1,5 +1,6 @@
 import { useLocation, useNavigate } from '@solidjs/router';
 import { For, type JSX, splitProps } from 'solid-js';
+import { unwrapFirst } from '~/util';
 import { setQueryParams } from '~/util/url';
 
 type Link = { label: string; value: string; checked: boolean };
@@ -16,7 +17,7 @@ export default function NavigatingChecklist(props: Props) {
   const loc = useLocation();
 
   const currentValues = () =>
-    loc.query[local.queryKey]?.split(',').filter(Boolean) ?? [];
+    unwrapFirst(loc.query[local.queryKey])?.split(',').filter(Boolean) ?? [];
 
   function onChange({ value, checked }: { value: string; checked: boolean }) {
     navigate(

apps/web-next/src/components/navigating-date-range.tsx

@@ -2,6 +2,7 @@ import { type JSX, splitProps } from 'solid-js';
 import { useLocation, useNavigate } from '@solidjs/router';
 import { Button, Input } from './form';
 import { setQueryParams } from '~/util/url';
+import { unwrapFirst } from '~/util';
 
 export type Props = JSX.IntrinsicElements['div'] & {
   min?: Date | null;
@@ -32,7 +33,7 @@ export default function NavigatingDateRange(props: Props) {
 
   const currentValues = () => {
     const [min = dateToIso(local.min), max = dateToIso(local.max)] =
-      loc.query[local.queryKey]?.split('/').filter(Boolean) ?? [];
+      unwrapFirst(loc.query[local.queryKey])?.split('/').filter(Boolean) ?? [];
     return { min, max };
   };
 

apps/web-next/src/routes/(root).tsx

@@ -1,6 +1,6 @@
 import { gql } from 'graphql-request';
 import { ParentProps } from 'solid-js';
-import { type RouteDefinition, cache, createAsync } from '@solidjs/router';
+import { type RouteDefinition, createAsync, query } from '@solidjs/router';
 import { Title } from '@solidjs/meta';
 import type { MeQuery } from './__generated__/(root)';
 import Footer from '~/components/footer';
@@ -11,7 +11,7 @@ import MediaHeader from '~/components/media/header';
 import { isChurchesPage } from '~/util/routing';
 import { cn } from '~/util';
 
-const getMe = cache(async function () {
+const getMe = query(async function () {
   'use server';
   const client = await getAuthenticatedClient();
 

apps/web-next/src/routes/(root)/(watch).tsx

@@ -1,6 +1,6 @@
 import { Show } from 'solid-js';
 import { gql } from 'graphql-request';
-import { A, cache, createAsync } from '@solidjs/router';
+import { A, createAsync, query } from '@solidjs/router';
 import { Link } from '@solidjs/meta';
 import SubscribeIcon from '@tabler/icons/outline/rss.svg?component-solid';
 import type {
@@ -15,7 +15,7 @@ import Newsletter from '~/components/newsletter';
 import { useUser } from '~/util/user-context';
 import Og from '~/components/og';
 
-const getHomepageData = cache(async function () {
+const getHomepageData = query(async function () {
   'use server';
   const client = await getAuthenticatedClient();
   const res = await client.request<

apps/web-next/src/routes/(root)/admin/channels/edit.tsx

@@ -4,11 +4,11 @@ import { Show } from 'solid-js';
 import {
   type RouteDefinition,
   action,
-  cache,
   createAsync,
   redirect,
   useSubmission,
   useLocation,
+  query,
 } from '@solidjs/router';
 import {
   AdminChannelEditRouteDataQuery,
@@ -19,6 +19,7 @@ import {
 import { UpsertForm } from '~/components/admin/upsert-form';
 import { PageHeading } from '~/components/page-heading';
 import { getAdminClientOrRedirect } from '~/util/gql/server';
+import { unwrapFirst } from '~/util';
 
 const UpsertChannelSchema = z.object({
   channelId: z.string().nullable(),
@@ -27,7 +28,7 @@ const UpsertChannelSchema = z.object({
   description: z.string().nullable(),
 });
 
-const loadChannel = cache(async (id: string | null) => {
+const loadChannel = query(async (id: string | null) => {
   'use server';
   const client = await getAdminClientOrRedirect();
 
@@ -56,7 +57,7 @@ const loadChannel = cache(async (id: string | null) => {
 
 export const route = {
   load: ({ location }) => {
-    void loadChannel(location.query['id'] ?? null);
+    void loadChannel(unwrapFirst(location.query['id']));
   },
 } satisfies RouteDefinition;
 
@@ -99,7 +100,9 @@ const upsertChannel = action(async (form: FormData) => {
 
 export default function AdminChannelsEditRoute() {
   const location = useLocation();
-  const data = createAsync(() => loadChannel(location.query['id'] ?? null));
+  const data = createAsync(() =>
+    loadChannel(unwrapFirst(location.query['id'])),
+  );
   const submission = useSubmission(upsertChannel);
 
   return (