Rasengan v1.1.0 - Introducing file-based routing

Rasengan v1.1.0 is now available on npm.

In this post, we will talk about the new features of Rasengan v1.1.0 and how you can adopt them into your projects.

For a list of breaking changes, see the Change log.

Rasengan v1.1.0 introduces you the file-based routing feature. This feature allows you to create routes based on the file structure of your project.

To use this feature, you have to create files in the src/app/_routes directory and always export a component from it by default in order to be considered.

tsximport { PageComponent } from "rasengan";
 
const Page: PageComponent = () => {
  return <h1>Home</h1>;
}
 
Page.metadata = {
  title: "Home",
  description: "Home page",
}
 
export default Page;

This will create a route for the index page with the path /.

You can also create nested routes by creating a directory in the src/app/_routes directory and exporting a component from it.

tsximport { PageComponent } from "rasengan";
 
const Page: PageComponent = () => {
  return <h1>Blog</h1>;
}
 
Page.metadata = {
  title: "Blog",
  description: "Blog page",
}
 
export default Page;

This will create a route for the blog page with the path /blog.

In order to work perfectly, you need to cover a last step, by importing the Router component that represent your file-based routes into the app.router.ts file.

tsximport { RouterComponent, defineRouter } from "rasengan";
import Router from "virtual:rasengan/router";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  imports: [Router],
})(AppRouter);

Now you are ready to use the file-based routing feature 😊.

Rasengan v1.1.0 introduces you the NavLink component. This component is a wrapper around the <Link> component with additional props for styling active and pending states.

We are proud to announce you the release of the @rasenganjs/i18n package.

The purpose is to provide internationalization support to your application based on static files (JSON format) holding the translations.

The package is currently in beta and we are working on it to make it more stable and to add more features. If you want to try it out, you can install it via npm.

bashnpm install @rasenganjs/i18n@1.0.0-beta.3

For futher information, see the @rasenganjs/i18n package documentation.

Building website is good, but doing it even faster is better.

Shadcn is a set of beautifully designed components that you can customize, extend, and build on.

In the previous version of create-rasengan CLI package, we were supporting only Tailwind CSS (both v3 and v4) and we were not supporting any UI framework.

Now, we are supporting Shadcn UI, that means you have the possibility to initialize your project with Shadcn UI well configured with just one command.

bashnpx create-rasengan@latest --with-shadcn

This command will generate a new project with Shadcn UI configured and ready to use.

Learn more about Rasengan.js documentation and have fun Ninja!