denoland
Proposal to change loading of routes, island, and static files in 2.0
I have found the new implementation for loading fresh islands, routes, and static files in Fresh 2.0 to have significant limitations.
- It is not possible to create middleware for static assets #2759
- It is not possible to add pages that inherit the app wrappers. As a result, it is difficult to create a plugin that adds pages, such as a user authentication plugin that includes a login page and inherits the page header. This makes it hard to separate features from a core app.
- Adding a route with JSX or an island is very difficult unless created with
fsRoutes.
app.use(staticFiles());
await fsRoutes(app, {
dir: './',
loadIsland: (path) => import(`./islands/${path}`),
loadRoute: (path) => import(`./routes/${path}`),
});
I propose something like the following:
const router = new FSRouter(app);
accountPlugin(router);
router.loadIslandsDir('./islands/', import.meta.main)
.loadRoutesDir('./routes/', import.meta.main)
.loadStaticFiles('./static/', import.meta.main);
app.use(router.getMiddleware());
The developer can also prioritize the routes based on the order in which they add them.
It is not possible to create middleware for static assets
I'm not able to reproduce this.
Agree about the other points about making layouts and the route model in the fs router more of a core pattern instead of moving it behind a plugin.
It is not possible to add pages that inherit the app wrappers. As a result, it is difficult to create a plugin that adds pages, such as a user authentication plugin that includes a login page and inherits the page header. This makes it hard to separate features from a core app.
Agree with this. Wish to see this situation improved shortly.
I propose something like the following:
const router = new FSRouter(app); accountPlugin(router); router.loadIslandsDir('./islands/', import.meta.main) .loadRoutesDir('./routes/', import.meta.main) .loadStaticFiles('./static/', import.meta.main); app.use(router.getMiddleware());
But why not to think of pages in terms of API? There is already a support for app.get("/resource/:name", (ctx) => new Response(ctx.params.name)). Would be great to extend this API to support app wrapper inheritance and tsx components & islands injections.
Or even better, something like this but anywhere, including outside the routes directory:
define.page("/profile", (ctx) => <div>Hello, {ctx.state.username}! </div>);
What do you think, guys?
