Migrate from railsware/js-routes to ElMassimo/js_from_routes

Gemfile

@@ -54,8 +54,8 @@ group :development do
   # Makes spring watch files using the listen gem. (https://github.com/jonleighton/spring-watcher-listen)
   gem 'spring-watcher-listen', '~> 2.0.0'
 
-  # Brings Rails named routes to javascript (http://github.com/railsware/js-routes)
-  gem 'js-routes', require: false
+  # Brings Rails named routes to modern javascript (https://github.com/elmassimo/js_from_routes)
+  gem 'js_from_routes'
 end
 
 group :test do

Gemfile.lock

@@ -108,8 +108,8 @@ GEM
       rails (>= 5)
     jbuilder (2.11.1)
       activesupport (>= 5.0.0)
-    js-routes (1.4.14)
-      railties (>= 4)
+    js_from_routes (1.0.1)
+      railties
     listen (3.4.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -267,7 +267,7 @@ DEPENDENCIES
   image_processing (~> 1.10)
   inertia_rails (>= 1.2.2)
   jbuilder (~> 2.7)
-  js-routes
+  js_from_routes
   listen (~> 3.3)
   oj
   pagy

app/javascript/Layouts/Main.vue

@@ -8,7 +8,7 @@
           <div class="bg-indigo-900 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
             <inertia-link
               class="mt-1"
-              :href="$routes.root()"
+              :href="routes.dashboard"
               aria-label="Home"
               role="navigation"
             >
@@ -62,20 +62,20 @@
                 <inertia-link
                   class="block px-6 py-2 hover:bg-indigo-600 hover:text-white"
                   role="navigation"
-                  :href="$routes.edit_user($page.props.auth.user.id)"
+                  :href="routes.profile"
                 >
                   My Profile
                 </inertia-link>
                 <inertia-link
                   class="block px-6 py-2 hover:bg-indigo-600 hover:text-white"
                   role="navigation"
-                  :href="$routes.users()"
+                  :href="routes.users"
                 >
                   Manage Users
                 </inertia-link>
                 <inertia-link
                   class="block w-full text-left px-6 py-2 hover:bg-indigo-600 hover:text-white"
-                  :href="$routes.destroy_user_session()"
+                  :href="routes.signOut"
                   method="delete"
                   as="button"
                 >
@@ -108,6 +108,10 @@ import Icon from '@/Shared/Icon.vue'
 import Logo from '@/Shared/Logo.vue'
 import MainMenu from '@/Shared/MainMenu.vue'
 
+import DashboardRequests from '@/requests/DashboardRequests'
+import UsersRequests from '@/requests/UsersRequests'
+import SessionsRequests from '@/requests/Users/SessionsRequests'
+
 export default {
   components: {
     MinimalLayout,
@@ -117,5 +121,15 @@ export default {
     Logo,
     MainMenu,
   },
+  computed: {
+    routes () {
+      return {
+        dashboard: DashboardRequests.pathFor('list'),
+        profile: UsersRequests.pathFor('edit', this.$page.props.auth.user),
+        users: UsersRequests.pathFor('list'),
+        signOut: SessionsRequests.pathFor('destroy'),
+      }
+    },
+  },
 }
 </script>

app/javascript/Pages/Auth/Login.vue

@@ -7,7 +7,7 @@
       />
       <form
         class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden"
-        @submit.prevent="form.post($routes.user_session())"
+        @submit.prevent="login(form)"
       >
         <div class="px-10 py-12">
           <flash-messages />
@@ -68,6 +68,7 @@ import FlashMessages from '@/Shared/FlashMessages.vue'
 import LoadingButton from '@/Shared/LoadingButton.vue'
 import Logo from '@/Shared/Logo.vue'
 import TextInput from '@/Shared/TextInput.vue'
+import SessionsRequests from '@/requests/Users/SessionsRequests'
 
 export default {
   metaInfo: { title: 'Login' },
@@ -89,5 +90,10 @@ export default {
       }),
     }
   },
+  methods: {
+    login (form) {
+      SessionsRequests.create({ form })
+    },
+  },
 }
 </script>

app/javascript/Pages/Contacts/Edit.vue

@@ -3,7 +3,7 @@
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link
         class="text-indigo-500 hover:text-indigo-800"
-        :href="$routes.contacts()"
+        :href="ContactsRequests.pathFor('list')"
       >
         Contacts
       </inertia-link>
@@ -21,7 +21,7 @@
       <contact-form
         v-model="form"
         :organizations="organizations"
-        @submit="form.put($routes.contact(contact.id))"
+        @submit="ContactsRequests.update({ params: contact, form })"
       >
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
           <button
@@ -53,12 +53,17 @@ import ContactForm from './Form.vue'
 import TrashedMessage from '@/Shared/TrashedMessage.vue'
 import _ from 'lodash'
 
+import ContactsRequests from '@/requests/ContactsRequests'
+
 export default {
   metaInfo() {
     return {
       title: `${this.form.contact.first_name} ${this.form.contact.last_name}`,
     }
   },
+  constants: {
+    ContactsRequests,
+  },
   components: {
     LoadingButton,
     ContactForm,
@@ -86,12 +91,12 @@ export default {
   methods: {
     destroy() {
       if (confirm('Are you sure you want to delete this contact?')) {
-        this.$inertia.delete(this.$routes.contact(this.contact.id))
+        ContactsRequests.destroy(this.contact)
       }
     },
     restore() {
       if (confirm('Are you sure you want to restore this contact?')) {
-        this.$inertia.put(this.$routes.restore_contact(this.contact.id))
+        ContactsRequests.restore(this.contact)
       }
     },
   },

app/javascript/Pages/Contacts/Index.vue

@@ -29,7 +29,7 @@
       </search-filter>
       <inertia-link
         class="btn-indigo"
-        :href="$routes.new_contact()"
+        :href="ContactsRequests.pathFor('new')"
       >
         <span>Create</span>
         <span class="hidden md:inline">Contact</span>
@@ -65,7 +65,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center focus:text-indigo-500"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 aria-label="Edit"
               >
                 {{ contact.name }}
@@ -79,7 +79,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -91,7 +91,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -101,7 +101,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -111,7 +111,7 @@
             <td class="border-t w-px">
               <inertia-link
                 class="px-4 flex items-center"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -146,8 +146,11 @@ import pickBy from 'lodash/pickBy'
 import SearchFilter from '@/Shared/SearchFilter.vue'
 import throttle from 'lodash/throttle'
 
+import ContactsRequests from '@/requests/ContactsRequests'
+
 export default {
   metaInfo: { title: 'Contacts' },
+  constants: { ContactsRequests },
   components: {
     Icon,
     Pagination,
@@ -175,24 +178,22 @@ export default {
   watch: {
     form: {
       handler: throttle(function() {
-        let query = pickBy(this.form)
-        this.$inertia.get(
-          this.$routes.contacts(
-            Object.keys(query).length ? query : { remember: 'forget' },
-          ),
-          {},
-          {
-            preserveState: true,
-            preserveScroll: true,
-            replace: true,
-            only: ['contacts'],
-          },
-        )
+        const query = pickBy(this.form)
+        ContactsRequests.list({
+          query: Object.keys(query).length ? query : { remember: 'forget' },
+          preserveState: true,
+          preserveScroll: true,
+          replace: true,
+          only: ['contacts'],
+        })
       }, 150),
       deep: true,
     },
   },
   methods: {
+    pathToEdit (contact) {
+      return ContactsRequests.pathFor('edit', contact)
+    },
     reset() {
       this.form = mapValues(this.form, () => null)
     },

app/javascript/Pages/Contacts/New.vue

@@ -3,7 +3,7 @@
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link
         class="text-indigo-400 hover:text-indigo-600"
-        :href="$routes.contacts()"
+        :href="ContactsRequests.pathFor('list')"
       >
         Contacts
       </inertia-link>
@@ -13,7 +13,7 @@
       <contact-form
         v-model="form"
         :organizations="organizations"
-        @submit="form.post($routes.contacts())"
+        @submit="ContactsRequests.create({ form })"
       >
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
           <loading-button
@@ -34,8 +34,13 @@ import Layout from '@/Layouts/Main.vue'
 import LoadingButton from '@/Shared/LoadingButton.vue'
 import ContactForm from './Form.vue'
 
+import ContactsRequests from '@/requests/ContactsRequests'
+
 export default {
   metaInfo: { title: 'Create Contact' },
+  constants: {
+    ContactsRequests,
+  },
   components: {
     LoadingButton,
     ContactForm,

app/javascript/Pages/Dashboard/Index.vue

@@ -5,18 +5,17 @@
     </h1>
     <p class="mb-8 leading-normal">
       Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how
-      <a
-        class="text-indigo-800 underline hover:text-orange-600 font-bold"
-        href="https://inertiajs.com"
-      >
-        Inertia.js
-      </a> works with
-      <a
-        href="https://rubyonrails.org/"
-        class="text-indigo-800 underline hover:text-orange-600 font-bold"
-      >
-        Ruby on Rails
-      </a>.
+      <ExternalLink href="https://inertiajs.com">Inertia.js</ExternalLink>
+      works with
+      <ExternalLink href="https://rubyonrails.org/">Ruby on Rails</ExternalLink>.
+    </p>
+    <p class="mb-8 leading-normal">
+      This demo is running on
+      <ExternalLink href="https://vite-rails.netlify.app/">Vite ⚡️ Rails</ExternalLink>
+      instead of Webpacker, which provides a
+      <ExternalLink href="https://vite-rails.netlify.app/features">faster development experience</ExternalLink>
+      thanks to
+      <ExternalLink href="https://vite-rails.netlify.app/features">Vite</ExternalLink>.
     </p>
 
     <p
@@ -37,7 +36,7 @@
     <div class="mb-8 flex">
       <inertia-link
         class="btn-indigo"
-        :href="$routes.error_500()"
+        :href="error500Path"
       >
         500 error
       </inertia-link>
@@ -57,18 +56,26 @@
 
 <script>
 import Layout from '@/Layouts/Main.vue'
+import ExternalLink from '@/Shared/ExternalLink.vue'
 import * as timeago from 'timeago.js'
+import DashboardRequests from '@/requests/DashboardRequests'
 
 export default {
   metaInfo: { title: 'Dashboard' },
   layout: Layout,
+  components: {
+    ExternalLink,
+  },
   props: {
     git: {
       type: Object,
       required: true,
     },
   },
   computed: {
+    error500Path () {
+      return DashboardRequests.pathFor('exampleException')
+    },
     relativeCommitTime() {
       return timeago.format(this.git.commit_time)
     },