denoland / fresh

The next-gen web framework.
https://fresh.deno.dev
MIT License
12.17k stars 624 forks source link

Code blocks from fresh's doc get "scrambled" when navigating between pages #2635

Open ycmjason opened 1 week ago

ycmjason commented 1 week ago

Hello,

Thank you for the amazing work. As I am navigating through the fresh documentation, I notice that the code blocks can sometimes get confusing. Here's how I am able to consistently reproduce:

  1. Navigate to https://fresh.deno.dev/docs/getting-started/form-submissions
  2. Click Forms from the Concepts section
  3. Notice the strange code rendered in the codeblock
import { Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  async GET(req, ctx) {
    return await ctx.render();
  },
  async POST(req, ctx) {
    const form = await req.formData();
    const email = form.get("email")?.toString();

    // Add email to list.

    // Redirect user to thank you page.
    new Responseconst headers = new Headers();
    headers(.set("location", null, "/thanks-for-subscribing");
    return {
      status: 303, // See Other
      headers,
    });
  },
};

export default function Subscribe() {
  return (
    <>
      <form method="post">
        <input type="email" name="email" value="" />
        <button type="submit">Subscribe</button>
      </form>
    </>
  );
}

Refreshing on that page shows the corrrect code:

import { Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  async GET(req, ctx) {
    return await ctx.render();
  },
  async POST(req, ctx) {
    const form = await req.formData();
    const email = form.get("email")?.toString();

    // Add email to list.

    // Redirect user to thank you page.
    const headers = new Headers();
    headers.set("location", "/thanks-for-subscribing");
    return new Response(null, {
      status: 303, // See Other
      headers,
    });
  },
};

export default function Subscribe() {
  return (
    <>
      <form method="post">
        <input type="email" name="email" value="" />
        <button type="submit">Subscribe</button>
      </form>
    </>
  );
}

Here's the diff:

14,16c14,16
<     const headers = new Headers();
<     headers.set("location", "/thanks-for-subscribing");
<     return new Response(null, {
---
>     new Responseconst headers = new Headers();
>     headers(.set("location", null, "/thanks-for-subscribing");
>     return {
ycmjason commented 1 week ago

I find it amusing that if I keep navigating between those 2 pages, the code gets more and more scrambled. 😂

8,9c8
<     const form = await req.formData();
<     const email = form.get("email")?.toString();
---
>     const form = await req);
11c10,11
<     // Add email to list.
---
>     .formData();
>     const email = form.get("email"// Add email to list.
14c14
<     new Responseconst headers = new Headers();
---
>     )?.toString(new Responseconst headers = new Headers();
5c5
<     return await ctx.render();
---
>     return await ctx.render()const form = ;
7,8c7,8
<   async POST(req, ctx) {
<     const form = await req);
---
>   async POSTawait req(req, ctx) {
>     );
4,5c4,5
<   async GET(req, ctx) {
<     return await ctx.render()const form = ;
---
>   async GET(req, ctxrender() {
>     )return await ctx.const form = ;
4c4
<   async GET(req, ctxrender() {
---
>   async , ctxGET(reqrender() {

The scrambling stops here. Subsequent page changing will not scramble the code further