fixes

Author: brenelz

apps/fixtures/hackernews/src/components/story.tsx

@@ -10,7 +10,7 @@ const Story: Component<{ story: StoryDefinition }> = props => {
       <span class="title">
         <Show
           when={props.story.url}
-          fallback={<A href={`/item/${props.story.id}`}>{props.story.title}</A>}
+          fallback={<A href={`/stories/${props.story.id}`}>{props.story.title}</A>}
         >
           <a href={props.story.url} target="_blank" rel="noreferrer">
             {props.story.title}

apps/fixtures/hackernews/src/lib/api.ts

@@ -37,6 +37,10 @@ const mapStories = {
 export const getStories = query(
   async (type: StoryTypes, page: number): Promise<StoryDefinition[]> => {
     "use server";
+    const storyType = mapStories[type];
+    if (!storyType) {
+      return [];
+    }
     return fetchAPI(`${mapStories[type]}?page=${page}`);
   },
   "stories",

apps/fixtures/hackernews/src/routes/[...stories].tsx

@@ -1,5 +1,5 @@
-import { createAsync, type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
-import { For, Show } from "solid-js";
+import { A, type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
+import { For, Show, createMemo } from "solid-js";
 import Story from "~/components/story";
 import { getStories } from "~/lib/api";
 import { StoryTypes } from "~/types";
@@ -13,7 +13,7 @@ export const route = {
 export default function Stories(props: RouteSectionProps) {
   const page = () => +props.location.query.page || 1;
   const type = () => (props.params.stories || "top") as StoryTypes;
-  const stories = createAsync(() => getStories(type(), page()));
+  const stories = createMemo(() => getStories(type(), page()));
 
   return (
     <div class="news-view">
@@ -26,9 +26,9 @@ export default function Stories(props: RouteSectionProps) {
             </span>
           }
         >
-          <a class="page-link" href={`/${type()}?page=${page() - 1}`} aria-label="Previous Page">
+          <A class="page-link" href={`/${type()}?page=${page() - 1}`} aria-label="Previous Page">
             {"<"} prev
-          </a>
+          </A>
         </Show>
         <span>page {page()}</span>
         <Show
@@ -39,17 +39,13 @@ export default function Stories(props: RouteSectionProps) {
             </span>
           }
         >
-          <a class="page-link" href={`/${type()}?page=${page() + 1}`} aria-label="Next Page">
+          <A class="page-link" href={`/${type()}?page=${page() + 1}`} aria-label="Next Page">
             more {">"}
-          </a>
+          </A>
         </Show>
       </div>
       <main class="news-list">
-        <Show when={stories()}>
-          <ul>
-            <For each={stories()}>{story => <Story story={story()} />}</For>
-          </ul>
-        </Show>
+        <For each={stories()}>{story => <Story story={story()} />}</For>
       </main>
     </div>
   );

apps/fixtures/hackernews/src/routes/stories/[id].tsx

@@ -1,4 +1,4 @@
-import { type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
+import { A, type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
 import { For, Show, createMemo } from "solid-js";
 import Comment from "~/components/comment";
 import { getStory } from "~/lib/api";
@@ -21,7 +21,7 @@ export default function Story(props: RouteSectionProps) {
           <span class="host">({story().domain})</span>
         </Show>
         <p class="meta">
-          {story().points} points | by <a href={`/users/${story().user}`}>{story().user}</a>{" "}
+          {story().points} points | by <A href={`/users/${story().user}`}>{story().user}</A>{" "}
           {story().time_ago} ago
         </p>
       </div>

apps/fixtures/notes/src/app.tsx

@@ -11,7 +11,7 @@ export default function App() {
   return (
     <Router
       root={props => (
-        <div class="main" $ServerOnly>
+        <div class="main">
           <section class="col sidebar">
             <section class="sidebar-header">
               <a href="/">

apps/fixtures/notes/src/components/NoteList.tsx

@@ -1,14 +1,13 @@
-import { createAsyncStore } from "@solidjs/router";
-import { For, Show } from "solid-js";
+import { For, createMemo, Show } from "solid-js";
 import { getNotes } from "~/lib/api";
 import SidebarNote from "./SidebarNote";
 
 export default function NoteList(props: { searchText: string }) {
-  const notes = createAsyncStore(() => getNotes(props.searchText));
+  const notes = createMemo(() => getNotes(props.searchText));
 
   return (
     <Show
-      when={notes()?.length}
+      when={notes().length > 0}
       fallback={
         <div class="notes-empty">
           {props.searchText
@@ -21,7 +20,7 @@ export default function NoteList(props: { searchText: string }) {
         <For each={notes()}>
           {note => (
             <li>
-              <SidebarNote note={note} />
+              <SidebarNote note={note()} />
             </li>
           )}
         </For>

apps/fixtures/notes/src/components/SidebarNote.tsx

@@ -49,8 +49,8 @@ export default function SidebarNote(props: { note: Note }) {
         class="sidebar-note-open"
         style={{
           "background-color": isActive()
-              ? "var(--tertiary-blue)"
-              : "",
+            ? "var(--tertiary-blue)"
+            : "",
           border: isActive() ? "1px solid var(--primary-border)" : "1px solid transparent",
         }}
       >

apps/fixtures/notes/src/routes/notes/[id]/(preview).tsx

@@ -1,5 +1,5 @@
-import { RouteDefinition, RouteSectionProps, createAsync } from "@solidjs/router";
-import { Show } from "solid-js";
+import { RouteDefinition, RouteSectionProps } from "@solidjs/router";
+import { Show, createMemo } from "solid-js";
 import EditButton from "~/components/EditButton";
 import { getNotePreview } from "~/lib/api";
 
@@ -10,22 +10,22 @@ export const route = {
 } satisfies RouteDefinition;
 
 export default function NotePage({ params }: RouteSectionProps) {
-  const note = createAsync(() => getNotePreview(+params.id));
+  const note = createMemo(() => getNotePreview(+params.id));
   return (
     <Show when={note()} keyed>
       {note => (
         <div class="note">
           <div class="note-header">
-            <h1 class="note-title">{note.title}</h1>
+            <h1 class="note-title">{note()!.title}</h1>
             <div class="note-menu" role="menubar">
               <small class="note-updated-at" role="status">
-                Last updated on {note.updatedAt}
+                Last updated on {note()!.updatedAt}
               </small>
-              <EditButton noteId={note.id}>Edit</EditButton>
+              <EditButton noteId={note()!.id}>Edit</EditButton>
             </div>
           </div>
           <div class="note-preview">
-            <div class="text-with-markdown" innerHTML={note.body} />
+            <div class="text-with-markdown" innerHTML={note()!.body} />
           </div>
         </div>
       )}

apps/fixtures/notes/src/routes/notes/[id]/edit.tsx

@@ -1,5 +1,5 @@
-import { RouteDefinition, RouteSectionProps, createAsync } from "@solidjs/router";
-import { Show } from "solid-js";
+import { RouteDefinition, RouteSectionProps } from "@solidjs/router";
+import { Show, createMemo } from "solid-js";
 import NoteEditor from "~/components/NoteEditor";
 import { getNote } from "~/lib/api";
 
@@ -10,7 +10,7 @@ export const route = {
 } satisfies RouteDefinition;
 
 export default function EditNote({ params }: RouteSectionProps) {
-  const note = createAsync(() => getNote(+params.id));
+  const note = createMemo(() => getNote(+params.id));
   return (
     <Show when={note()}>
       <NoteEditor noteId={+params.id} initialTitle={note()!.title} initialBody={note()!.body} />

packages/start/src/server/server-functions-handler.ts

@@ -51,7 +51,14 @@ export async function handleServerFunction(h3Event: H3Event) {
   if (!instance || request.method === "GET") {
     const args = url.searchParams.get("args");
     if (args) {
-      const result = (await deserializeFromJSONString(args)) as any[];
+      // args may be in seroval chunk format (from createServerReference)
+      // or plain JSON (from router's .with() / hashKey for no-JS form submissions)
+      let result: any[];
+      if (args.startsWith(";0x")) {
+        result = (await deserializeFromJSONString(args)) as any[];
+      } else {
+        result = JSON.parse(args);
+      }
       for (const arg of result) {
         parsed.push(arg);
       }