npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dabrowskif/typed-routes

v0.4.1

Published

This Node.js package provides a route generation tool designed for Front-end meta frameworks that use file-based routing projects. It simplifies the process of creating typed route structures by automatically converting file system-based routing into a Ja

Downloads

7

Readme

Typed Route Generator for Frontend Frameworks

This Node.js package provides a route generation tool designed for Front-end meta frameworks that use file-based routing projects. It simplifies the process of creating typed route structures by automatically converting file system-based routing into a JavaScript object, enhancing type safety and improving developer experience.

Features

  • Automated Route Generation: Converts the routes (ex. /routes in SvelteKit) directory into a JavaScript object, mirroring the file system structure
  • Dynamic Route Support: Handles dynamic, optional, and rest route parameters
  • Multiple Module System Support: Compatible with both CommonJS and ES6 module systems
  • Command-Line Interface: Easy-to-use CLI for quick and seamless route generation

Supported Frameworks

  • [x] SvelteKit
  • [ ] Next.js
  • [ ] Nuxt.js
  • [ ] Astro
  • [ ] Other frameworks (coming soon)

TODO

In the development roadmap for the Typed Route Generator, the following features are planned (and many, many more :) ):

  1. More Frameworks Support

    • Extend support to additional front-end frameworks, enhancing the tool's versatility across different development environments.
  2. Custom Strategy Provider

    • Implement functionality to allow users to define custom strategies for route generation. This feature aims to provide greater flexibility and adaptability to specific project requirements.
  3. Type-Only Route Definitions

    • Evolve the current route functions to support type-only definitions that significantly reduce or eliminate runtime overhead. The focus will be on enhancing the developer experience by leveraging TypeScript's advanced type system to provide:
      • Simple functions with typed parameters for general use.
      • Framework-specific enhancements, such as type-safe wrappers for SvelteKit's goto function or Next.js's config hook, ensuring a seamless integration with the respective frameworks' native routing capabilities.
  4. SvelteKit Segments Enhancement

    • Incorporate support for SvelteKit's advanced routing features, including segment sorting and parameter encoding. This will align the Typed Route Generator with SvelteKit's latest routing capabilities, allowing for more sophisticated route structures.

Current Implementation vs. Future Plans

Current Implementation

Currently, the Typed Route Generator creates routes using a runtime object. This means that the tool generates an actual JavaScript object during runtime to represent the structure of your routes based on your file system. This approach is practical and intuitive, allowing for easy integration and usage in your projects.

// Auto-generated by library
export const routes = {
  home: {
    _get: () => `/home`,
    "[profileId]": { _get: (profileId: string) => `/home/${profileId}` },
  },
};

// Actuall usage inside your app
routes.home["[profileId]"]._get("id-123");

Future Plans - Type-Only Implementation

Looking ahead, there are plans to also develop a type-only version of the Typed Route Generator. This implementation will focus on creating TypeScript types instead of runtime objects. The key advantage of this approach is the elimination of runtime overhead, as the route definitions will purely be type annotations without any impact on the runtime bundle size.

This type-only implementation will be particularly beneficial for projects where bundle size is a critical concern and where the primary goal is to leverage TypeScript's type-checking capabilities without adding extra runtime code.

Installation

Install the package using npm:

npm install @dabrowskif/typed-routes

Or using yarn:

yarn add @dabrowskif/typed-routes

Usage

Options

Here are the available options you can use with the Typed Route Generator:

  • --directory <path>: Specify the path of your routes directory.

  • --framework <type>: Choose the framework. Available options:

    • SvelteKit
    • Nextjs
  • --output-dir <path>: Define the output directory for the generated file.

  • --file-name <name>: Set the name for the generated file.

  • --function-name <name>: Customize the function name used in the route object.

  • --module-system <type>: Select the module system. Available options:

    • es6

    • commonjs

Example

npx @dabrowskif/typed-routes -fr SvelteKit -d src/routes -od src -of generated-typed-routes.ts -fn _getRoute

CLI Usage

To use this tool via the command line, you can run it directly with npx:

npx @dabrowskif/typed-routes -fr SvelteKit -d src/routes

Alternatively, if you have installed it as a dependency in your project, you can add a script to your package.json:

scripts": {
  "generate-routes": "typed-routes -fr SvelteKit -d src/routes"
}

Then, you can generate routes with: npm run generate-routes

For a more integrated development experience, consider running this script concurrently with your framework's development server. Tools like concurrently or npm-run-all can be used to run multiple npm scripts simultaneously. For instance:

"scripts": {
  "dev": "concurrently "npm run generate-routes -- --watch" "npm run start-framework-dev""
}

This setup will regenerate routes on-the-fly as your file structure changes, alongside your normal development server.

Contributing

Contributions are welcome! If you have a suggestion or enhancement, feel free to fork the repo and create a pull request, or open an issue with the tag "enhancement".

License

This project is licensed under the MIT License.