RubyGems - inertia_rails - Versions diffs - 3.12.1 → 3.14.0 - Mend

inertia_rails 3.12.1 → 3.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

data/lib/generators/inertia/install/templates/vue/InertiaExample.vue CHANGED Viewed

@@ -1,117 +1,154 @@
 <template>
-  <Head title="Inertia + Vite Ruby + Vue Example" />
+  <Head title="Ruby on Rails + Inertia + Vue" />
   <div class="root">
-    <h1 class="h1">Hello {{ name }}!</h1>
-    <div>
-      <a href="https://inertia-rails.dev" target="_blank">
-        <img class="logo" :src="inertiaSvg" alt="Inertia logo" />
+    <nav class="subNav">
+      <a href="https://rubyonrails.org" target="_blank">
+        <img class="logo rails" :src="railsSvg" alt="Ruby on Rails Logo" />
       </a>
-      <a href="https://vite-ruby.netlify.app" target="_blank">
-        <img class="logo vite" :src="viteRubySvg" alt="Vite Ruby logo" />
+      <a href="https://inertia-rails.dev" target="_blank">
+        <img class="logo inertia" :src="inertiaSvg" alt="Inertia logo" />
       </a>
       <a href="https://vuejs.org" target="_blank">
-        <img class="logo vue" :src="vueSvg" alt="Vue logo" />
+        <img class="logo vue" :src="vueSvg" alt="Vue logo"/>
       </a>
-    </div>
+    </nav>
-    <h2 class="h2">Inertia + Vite Ruby + Vue</h2>
+    <div class="footer">
+      <div class="card">
+        <p>
+          Edit <code><%= js_destination_path %>/pages/inertia_example/index.vue</code> and save to test <abbr title="Hot Module Replacement">HMR</abbr>.
+        </p>
+      </div>
-    <div class="card">
-      <button class="button" type="button" @click="count++">
-        count is {{ count }}
-      </button>
-      <p>
-        Edit <code>app/frontend/pages/InertiaExample.vue</code> and save to test
-        HMR
-      </p>
+      <ul>
+        <li>
+          <ul>
+            <li><strong>Rails version:</strong> {{ rails_version }}</li>
+            <li><strong>Rack version:</strong> {{ rack_version }}</li>
+          </ul>
+        </li>
+        <li><strong>Ruby version:</strong> {{ ruby_version }}</li>
+        <li>
+          <ul>
+            <li><strong>Inertia Rails version:</strong> {{ inertia_rails_version }}</li>
+            <li><strong>Vue version:</strong> {{ vue_version }}</li>
+          </ul>
+        </li>
+        </ul>
     </div>
-    <p class="readTheDocs">
-      Click on the Inertia, Vite Ruby, and Vue logos to learn more
-    </p>
   </div>
 </template>
 <script setup>
 import { Head } from '@inertiajs/vue3'
-import { ref } from 'vue'
+import { version as vue_version } from 'vue';
+import railsSvg from '/assets/rails.svg'
 import inertiaSvg from '/assets/inertia.svg'
-import viteRubySvg from '/assets/vite_ruby.svg'
 import vueSvg from '/assets/vue.svg'
 defineProps({
-  name: String,
+  rails_version: String,
+  rack_version: String,
+  ruby_version: String,
+  inertia_rails_version: String,
 })
-const count = ref(0)
 </script>
+<style global>
+  body {
+    margin: 0;
+    padding: 0;
+  }
+</style>
 <style scoped>
-.root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color: #213547;
-  background-color: #ffffff;
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-.h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-.h2 {
-  font-size: 2.6em;
-  line-height: 1.1;
-}
-.button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #f9f9f9;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-.button:hover {
-  border-color: #646cff;
-}
-.button:focus,
-.button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-.logo {
-  display: inline-block;
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #e4023baa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #41b883aa);
-}
-.card {
-  padding: 2em;
-}
-.readTheDocs {
-  color: #888;
-}
+  .root {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    background-color: #F0E7E9;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: #261B23;
+    display: flex;
+    flex-direction: column;
+    font-family: Sans-Serif;
+    font-size: calc(0.9em + 0.5vw);
+    font-style: normal;
+    font-weight: 400;
+    justify-content: center;
+    line-height: 1.25;
+    min-height: 100vh;
+    text-align: center;
+  }
+  @media (prefers-color-scheme: dark) {
+    .root {
+      background-color: #1a1a1a;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjMzMzIi8+PC9zdmc+);
+      color: #e0e0e0;
+    }
+  }
+  .logo {
+    display: inline-block;
+    height: 9.8vw;
+    min-height: 130px;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+    filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
+  }
+  .logo.inertia:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.vue:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+  }
+  .logo.rails:hover {
+    filter: drop-shadow(0 0 2em rgb(211 0 1 / 0.6));
+  }
+  @media (prefers-color-scheme: dark) {
+    .logo {
+      filter: drop-shadow(0 20px 13px rgb(255 255 255 / 0.03)) drop-shadow(0 8px 5px rgb(255 255 255 / 0.08));
+    }
+  }
+  .card {
+    padding: 2em;
+    font-size: 0.7em;
+    color: #948e90;
+  }
+  .footer {
+    bottom: 0;
+    left: 0;
+    margin: 0 2rem 2rem 2rem;
+    position: absolute;
+    right: 0;
+  }
+  .footer ul {
+    list-style: none;
+  }
+  .footer ul li {
+    display: inline;
+  }
+  .footer ul ul li:after {
+    content: " | ";
+    font-weight: 300;
+    color: #948e90;
+  }
+  .footer ul ul li:last-child:after {
+    content: "";
+  }
 </style>

data/lib/generators/inertia/install/templates/vue/inertia.js CHANGED Viewed

@@ -16,15 +16,18 @@ createInertiaApp({
     const pages = import.meta.glob('../pages/**/*.vue', {
       eager: true,
     })
-    return pages[`../pages/${name}.vue`]
+    const page = pages[`../pages/${name}.vue`]
+    if (!page) {
+      console.error(`Missing Inertia page component: '${name}.vue'`)
+    }
     // To use a default layout, import the Layout component
     // and use the following lines.
     // see https://inertia-rails.dev/guide/pages#default-layouts
     //
-    // const page = pages[`../pages/${name}.vue`]
     // page.default.layout = page.default.layout || Layout
-    // return page
+    return page
   },
   setup({ el, App, props, plugin }) {
@@ -32,4 +35,28 @@ createInertiaApp({
       .use(plugin)
       .mount(el)
   },
+  defaults: {
+    form: {
+      forceIndicesArrayFormatInFormData: false,
+    },
+    future: {
+      useDataInertiaHeadAttribute: true,
+      useDialogForErrorModal: true,
+      preserveEqualProps: true,
+    },
+  },
+}).catch((error) => {
+  // This ensures this entrypoint is only loaded on Inertia pages
+  // by checking for the presence of the root element (#app by default).
+  // Feel free to remove this `catch` if you don't need it.
+  if (document.getElementById("app")) {
+    throw error
+  } else {
+    console.error(
+      "Missing root element.\n\n" +
+      "If you see this error, it probably means you loaded Inertia.js on non-Inertia pages.\n" +
+      'Consider moving <%= vite_javascript_tag "inertia" %> to the Inertia-specific layout instead.',
+    )
+  }
 })

data/lib/generators/inertia/install/templates/vue/inertia.ts CHANGED Viewed

@@ -16,15 +16,18 @@ createInertiaApp({
     const pages = import.meta.glob<DefineComponent>('../pages/**/*.vue', {
       eager: true,
     })
-    return pages[`../pages/${name}.vue`]
+    const page = pages[`../pages/${name}.vue`]
+    if (!page) {
+      console.error(`Missing Inertia page component: '${name}.vue'`)
+    }
     // To use a default layout, import the Layout component
     // and use the following lines.
     // see https://inertia-rails.dev/guide/pages#default-layouts
     //
-    // const page = pages[`../pages/${name}.vue`]
     // page.default.layout = page.default.layout || Layout
-    // return page
+    return page
   },
   setup({ el, App, props, plugin }) {
@@ -32,4 +35,29 @@ createInertiaApp({
       .use(plugin)
       .mount(el)
   },
+  defaults: {
+    form: {
+      forceIndicesArrayFormatInFormData: false,
+    },
+    future: {
+      useDataInertiaHeadAttribute: true,
+      useDialogForErrorModal: true,
+      preserveEqualProps: true,
+    },
+  },
+}).catch((error) => {
+  // This ensures this entrypoint is only loaded on Inertia pages
+  // by checking for the presence of the root element (#app by default).
+  // Feel free to remove this `catch` if you don't need it.
+  if (document.getElementById("app")) {
+    throw error
+  } else {
+    console.error(
+      "Missing root element.\n\n" +
+      "If you see this error, it probably means you loaded Inertia.js on non-Inertia pages.\n" +
+      'Consider moving <%= vite_javascript_tag "inertia" %> to the Inertia-specific layout instead.',
+    )
+  }
 })

data/lib/generators/inertia/install/templates/vue/tsconfig.app.json CHANGED Viewed

@@ -18,7 +18,15 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    /* Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["<%= js_destination_path %>/*"],
+      "~/*": ["<%= js_destination_path %>/*"]
+    }
   },
   "include": ["<%= js_destination_path %>/**/*.ts", "<%= js_destination_path %>/**/*.tsx", "<%= js_destination_path %>/**/*.vue"]
 }

data/lib/generators/inertia/install/templates/vue/types/globals.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { SharedProps } from '@/types'
+declare module '@inertiajs/core' {
+  export interface InertiaConfig {
+    sharedPageProps: SharedProps
+    errorValueType: string[]
+  }
+}

data/lib/generators/inertia/install/templates/vue/types/index.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export type Flash = {
+  notice?: string
+  alert?: string
+}
+export type SharedProps = {
+  flash: Flash
+}

data/lib/generators/inertia/scaffold_controller/scaffold_controller_generator.rb CHANGED Viewed

@@ -55,6 +55,10 @@ module Inertia
         attribute = attributes.find { |attr| attr.name == name }
         attribute&.attachments?
       end
+      def parent_controller
+        defined?(InertiaController) ? 'InertiaController' : 'ApplicationController'
+      end
     end
   end
 end

data/lib/generators/inertia/scaffold_controller/templates/controller.rb.tt CHANGED Viewed

@@ -1,17 +1,19 @@
 <% module_namespacing do -%>
-class <%= controller_class_name %>Controller < ApplicationController
+class <%= controller_class_name %>Controller < <%= parent_controller %>
   before_action :set_<%= singular_table_name %>, only: %i[ show edit update destroy ]
 <% if regular_class_path.any? -%>
   wrap_parameters :<%= singular_table_name %>
 <% end -%>
+<% if parent_controller != 'InertiaController' -%>
   inertia_share flash: -> { flash.to_hash }
+<% end -%>
   # GET <%= route_url %>
   def index
     @<%= plural_table_name %> = <%= orm_class.all(class_name) %>
-    render inertia: '<%= "#{inertia_base_path}/Index" %>', props: {
+    render inertia: {
       <%= plural_table_name %>: @<%= plural_table_name %>.map do |<%= singular_table_name %>|
         <%= "serialize_#{singular_table_name}" %>(<%= singular_table_name %>)
       end
@@ -20,7 +22,7 @@ class <%= controller_class_name %>Controller < ApplicationController
   # GET <%= route_url %>/1
   def show
-    render inertia: '<%= "#{inertia_base_path}/Show" %>', props: {
+    render inertia: {
       <%= singular_table_name %>: <%= "serialize_#{singular_table_name}" %>(@<%= singular_table_name %>)
     }
   end
@@ -28,14 +30,14 @@ class <%= controller_class_name %>Controller < ApplicationController
   # GET <%= route_url %>/new
   def new
     @<%= singular_table_name %> = <%= orm_class.build(class_name) %>
-    render inertia: '<%= "#{inertia_base_path}/New" %>', props: {
+    render inertia: {
       <%= singular_table_name %>: <%= "serialize_#{singular_table_name}" %>(@<%= singular_table_name %>)
     }
   end
   # GET <%= route_url %>/1/edit
   def edit
-    render inertia: '<%= "#{inertia_base_path}/Edit" %>', props: {
+    render inertia: {
       <%= singular_table_name %>: <%= "serialize_#{singular_table_name}" %>(@<%= singular_table_name %>)
     }
   end

data/lib/generators/inertia_templates/scaffold/templates/react/{Edit.jsx.tt → edit.jsx.tt} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
+import Form from './form'
 export default function Edit({ <%= singular_table_name %> }) {
   return (
@@ -10,16 +10,13 @@ export default function Edit({ <%= singular_table_name %> }) {
       <Form
         <%= singular_table_name %>={<%= singular_table_name %>}
-        onSubmit={(form) => {
-          form.transform((data) => ({ <%= singular_table_name %>: data }))
+        action={`<%= js_resource_path %>`}
 <% if attributes.any?(&:attachments?) -%>
-          form.post(`<%= js_resource_path %>`, {
-            headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
-          })
+        method="post"
+        headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
 <% else -%>
-          form.patch(`<%= js_resource_path %>`)
+        method="patch"
 <% end -%>
-        }}
         submitText="Update <%= human_name %>"
       />

data/lib/generators/inertia_templates/scaffold/templates/react/{Edit.tsx.tt → edit.tsx.tt} RENAMED Viewed

@@ -1,6 +1,7 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
-import { <%= inertia_model_type %> } from './types'
+import Form from './form'
+import type { <%= inertia_model_type %> } from './types'
 interface EditProps {
   <%= singular_table_name %>: <%= inertia_model_type %>
@@ -15,16 +16,13 @@ export default function Edit({ <%= singular_table_name %> }: EditProps) {
       <Form
         <%= singular_table_name %>={<%= singular_table_name %>}
-        onSubmit={(form) => {
-          form.transform((data) => ({ <%= singular_table_name %>: data }))
+        action={`<%= js_resource_path %>`}
 <% if attributes.any?(&:attachments?) -%>
-          form.post(`<%= js_resource_path %>`, {
-            headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
-          })
+        method="post"
+        headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
 <% else -%>
-          form.patch(`<%= js_resource_path %>`)
+        method="patch"
 <% end -%>
-        }}
         submitText="Update <%= human_name %>"
       />

data/lib/generators/inertia_templates/scaffold/templates/react/form.jsx.tt ADDED Viewed

@@ -0,0 +1,94 @@
+import { Form as InertiaForm } from '@inertiajs/react'
+export default function Form({ <%= singular_table_name %>, submitText, ...formProps }) {
+  return (
+    <InertiaForm
+      transform={data => ({ <%= singular_table_name %>: data })}
+      {...formProps}
+    >
+      {({ errors, processing }) => (
+        <>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+          <div>
+            <label style={{ display: 'block' }} htmlFor="password">
+              Password
+            </label>
+            <input
+              type="password"
+              name="password"
+              id="password"
+            />
+            {errors.password && (
+              <div style={{ color: 'red' }}>{errors.password.join(', ')}</div>
+            )}
+          </div>
+          <div>
+            <label style={{ display: 'block' }} htmlFor="password_confirmation">
+              Password confirmation
+            </label>
+            <input
+              type="password"
+              name="password_confirmation"
+              id="password_confirmation"
+            />
+            {errors.password_confirmation && (
+              <div style={{ color: 'red' }}>{errors.password_confirmation.join(', ')}</div>
+            )}
+          </div>
+<% else -%>
+          <div>
+            <label style={{ display: 'block' }} htmlFor="<%= attribute.singular_name %>">
+              <%= attribute.human_name %>
+            </label>
+<% if input_type(attribute) == "text_area" -%>
+            <textarea
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% elsif attribute.attachment? -%>
+            <input
+              type="file"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+            />
+<% elsif attribute.attachments? -%>
+            <input
+              type="file"
+              multiple
+              name="<%= attribute.singular_name %>[]"
+              id="<%= attribute.singular_name %>"
+            />
+<% elsif input_type(attribute) == "checkbox" -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultChecked={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% else -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% end -%>
+            {errors.<%= attribute.column_name %> && (
+              <div style={{ color: 'red' }}>{errors.<%= attribute.column_name %>.join(', ')}</div>
+            )}
+          </div>
+<% end -%>
+<% end -%>
+          <div>
+            <button type="submit" disabled={processing}>
+              {submitText}
+            </button>
+          </div>
+        </>
+      )}
+    </InertiaForm>
+  )
+}