Skip to content

ElMassimo/js_from_routes

Repository files navigation

JS From Routes generates path helpers and API methods from your Rails routes, allowing you to be more productive and prevent routing-related errors.

Since code generation is fully customizable it can be used in very diverse scenarios.

Why? ๐Ÿค”

Path helpers in Rails make it easy to build URLs, while avoiding typos and mistakes.

With JS From Routes, it's possible the enjoy the same benefits in JS, and even more if using TypeScript.

Read more about it in the blog announcement.

Features โšก๏ธ

  • ๐Ÿš€ Path and Request Helpers
  • ๐Ÿ” Serialization / Deserialization
  • โœ… Prevent Routing Errors
  • ๐Ÿค– Automatic Generation
  • ๐Ÿ›  Customizable Generation
  • And more!

Documentation ๐Ÿ“–

Visit the documentation website to check out the guides and searchable configuration reference.

Installation ๐Ÿ’ฟ

For a one liner, you can use this template:

rails app:template LOCATION='https://railsbytes.com/script/X6ksgn'

Else, add this line to your application's Gemfile in the development group and execute bundle:

group :development, :test do
  gem 'js_from_routes'
end

Then, add the client library to your package.json:

npm install @js-from-routes/client # yarn add @js-from-routes/client

There are more client libraries available.

Getting Started ๐Ÿš€

The following is a short excerpt from the guide.

Specify the routes you want

Use the export attribute to determine which routes should be taken into account when generating JS.

Rails.application.routes.draw do
  resources :video_clips, export: true do
    get :download, on: :member
  end

  # Or:
  defaults export: true do
    # All routes defined inside this block will be exported.
  end
end

Use the path helpers in your JS application

Path helpers will be automatically generated when refreshing the page.

import { videoClips } from '~/api'

const video = await videoClips.show({ id: 'oHg5SJYRHA0' })

const downloadPath = videoClips.download.path(video)

Check the documentation website for more information.

For a working example, check this repo.