Fresh 1.3 – Simplified Route Components and More

Fresh, a popular framework for building web applications, has released its latest version, Fresh 1.3. This release brings several improvements and new features to make development even easier and more efficient.

One of the key enhancements in Fresh 1.3 is the introduction of async route components. Previously, passing data from a route handler to a page's component required multiple steps and boilerplate code. With the new update, the handler and component can be merged together, eliminating the need for an intermediate interface. This simplifies the code and makes it easier to pass data directly between the two.

It's important to note that async routes are optional and existing routes can still be used without any changes. This update provides an additional option for developers to make simple routes easier to write.

In addition to the improved route components, Fresh 1.3 also introduces the ability for plugins to inject virtual routes and middlewares. This feature allows developers to extend Fresh's capabilities and add development-specific routes or admin dashboards.

Error handling has also been enhanced in Fresh 1.3. The framework now automatically renders the _500.tsx template as a fallback when an error occurs in a route handler. Additionally, basic support for error boundaries has been added, allowing components to catch and handle errors during rendering.

With these updates, Fresh continues to provide developers with a powerful and efficient framework for building web applications. Stay tuned for more exciting news and updates from the Fresh community.

// Example of an async route component in Fresh 1.3
const myRouteHandler: Fresh.Handler = async (ctx) => {
  const data = await fetchData();
  return <MyComponent data={data} />;
};

// Example of injecting a virtual route using a plugin in Fresh 1.3
const myPlugin: Fresh.Plugin = {
  routes: [
    { path: '/admin', component: AdminDashboard },
  ],
};

// Example of error boundary in Fresh 1.3
class ErrorBoundary extends Fresh.Component {
  componentDidCatch(error, errorInfo) {
    // Handle the error
  }

  render() {
    return this.props.children;
  }
}