feat: support async route components

[marvinhagemeister]

This is a quick implementation for #1386 . It allows you to use an async component function where you can load data and return a vnode. If the function is async it will receive the request object and middleware context as arguments instead. We fall back to the current way if it's not async.

export default async function Home(req, ctx) {
  const data =  await getDataFromDB()
  return <App data={data} />;
}

[marvinhagemeister]

Ah wait, marking as draft again because I want to add a couple of tests with ctx.render()

[lucacasonato]

I think this breaks the twind plugin.

[flemmingmiguel]

Can confirm that it breaks the twind plugin, also islands that are imported in async route components don't execute the revive, also can't import signals into the async route to pass to different island

otherwise is really promising I've tested it with Deno.KV executing calls inside the route and it works great

[marvinhagemeister]

Thanks for the feedback and giving this a go! I'll look into these issues.

[marvinhagemeister]

I think it's ready to be reviewed. I've tested it locally with porting our docs to that setup and islands + twind works there.

[iuioiua]

LGTM! Just some nits. Am I right in understanding that this would almost eliminate the need for GET middleware for rendered pages? If so, wow.

[iuioiua]

Suggested change

	if (
	typeof component === "function" &&
	component.constructor.name === "AsyncFunction"
	) {
	if (component.constructor.name === "AsyncFunction") {

This should suffice, no?

[marvinhagemeister]

@iuioiua Thanks for the review! Yes, this PR would eliminate the need for GET route handlers for rendered pages. It's optional though one can still keep the current model as well.

[bjesuiter]

Hi @marvinhagemeister, I did also try the PR and it seems like it still has errors with Tailwind (at 2023-07-05, 1 pm in Germany).

You can view the result here: https://bjesuiter-fresh-playground.deno.dev/pokelist-async

I tried the following:

Step 1

First I added your branch directly from github to a "Fresh" Playground Repo of mine like this: https://github.com/bjesuiter/deno_fresh_playground#switch-to-arbitrary-fresh-version-on-github-wip
Note: It's awesome that deno works like this <3

Step 2

Second I added a page with the new async page components feature, which uses the Pokemon API to list some Pokemons:
Source: https://github.com/bjesuiter/deno_fresh_playground/blob/main/routes/pokelist-async.tsx

import {HandlerContext} from '$fresh/server.ts';
import {PokeList, Pokemon} from '../components/PokeList.tsx';

/**
 *
 * @param req Request
 * @param ctx HandlerContext
 * @returns
 */
export default async function AsyncPagePoc(req: Request, ctx: HandlerContext) {
	console.log(`In AsyncPageTest`);
	console.log(`\n ---- \n\n Req Object: `, req);
	console.log(`\n ---- \n\n Context Object: `, ctx);

	// const res = await fetch(`https://pokeapi.co/api/v2/pokemon/ditto`);
	const res = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=10&offset=0`);

	// const jsObj = await res.json();
	const pokeList = (await res.json()).results as Pokemon[];

	const pokeListWithImagesAsync = pokeList.map(async poke => {
		const res = await fetch(poke.url);
		const body = await res.json();

		// https://pokeapi.co/api/v2/pokemon/1/
		poke.imgUrl = body.sprites.other.home.front_default;
		return poke;
	});

	const pokeListWithImages = await Promise.all(pokeListWithImagesAsync);

	return (
		<div class="max-w-80 mx-auto">
			{/* Tailwind seems not to work here, for some reason */}
			{/* Also tried class={tw`text-5xl`} */}
			<h1 class="text-5xl text-red-500">Async Page Test</h1>
			<PokeList entries={pokeListWithImages}></PokeList>
			{/* <pre>{JSON.stringify(jsObj, null, '\t')}</pre> */}
		</div>
	);
}

Step 3

I added a normal server-side component, called PokeList to render the list:
Source: https://github.com/bjesuiter/deno_fresh_playground/blob/main/components/PokeList.tsx

export type Pokemon = {
	name: string;
	url: string;
	imgUrl?: string;
};

export function PokeList({entries}: {entries: Pokemon[]}) {
	return (
		<>
			{/* Tailwind works here though! */}
			<h2 class="text-4xl">PokéList</h2>
			<ul class="my-8 w-56">
				{entries.map(poke => (
					<li class="relative m-4 p-6 shadow-xl text-center border-2 border-gray-400 rounded">
						{poke.imgUrl && <img src={poke.imgUrl}></img>}
						<a class="absolute top-2 left-0 right-0 capitalize" href={poke.url}>
							{poke.name}
						</a>
					</li>
				))}
			</ul>
		</>
	);
}

The tailwind problem

If you take a look now to my deployed version of this at https://bjesuiter-fresh-playground.deno.dev/pokelist-async (or run it locally yourself), you'll see that the tailwind classes from the async page component are not applied, but the tailwind classes in the server component will be applied correctly.

=> The first heading "Async Page Test" should've been "text-5xl text-red-500" (as you see in the page src code above)
=> If I use "text-4xl" though, it works, since the server component "PokeList" does also use this class, so it's available in the output.

[marvinhagemeister]

@bjesuiter this was super helpful! Thanks for sharing your test case. Missed that plugins can contribute to rendering too earlier. Got that resolved now and the styles show up 🎉

[bjesuiter]

Can confirm, Tailwind in general works now in Async Page Components. (See screenshot)

However, not all colors work. 'text-red-500' and 'text-green-500' work, but 'text-lime-500' and 'text-teal-500' do not.
(But, this might be a different issue and might not have anything to do with the async page ^^)

Update

This indeed seems to be a different problems, since these colors also do not work inside the PokéList Component.

[lucacasonato]

This doesn't work. Twind relies on thread local state (like context or hooks). Try rendering two pages in parallel

[marvinhagemeister]

That's a good point, I'll take a look.

[marvinhagemeister]

@bjesuiter yeah that's a difference between tailwind and twind. They are very similar but not the same. I think newer twind versions aligned more closely with tailwind, but I haven't looked into that yet. I'm hoping we can support both twind and tailwind at some point in the future.

[bjesuiter]

Wohoo, my next question would've been when this is going to be merged!

Does fresh now have some kind of release cycle or is it more like rolling release?

[marvinhagemeister]

Planning to do release on a monthly basis. The next one is scheduled for tomorrow if all goes according to plan. Currently writing the blog post, but it's taking me a bit longer than I'd like to admit 😅

[bjesuiter]

Very nice! I'm so excited that fresh is picking up some steam!