RubyGems - inertia_rails - Versions diffs - 3.4.0 → 3.6.0 - Mend

inertia_rails 3.4.0 → 3.6.0

Files changed (205) hide show

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

@@ -0,0 +1,117 @@
+<template>
+  <Head title="Inertia + Vite Ruby + Vue Example" />
+  <div class="root">
+    <h1 class="h1">Hello {{ name }}!</h1>
+    <div>
+      <a href="https://inertia-rails.netlify.app" target="_blank">
+        <img class="logo" :src="inertiaSvg" alt="Inertia logo" />
+      </a>
+      <a href="https://vite-ruby.netlify.app" target="_blank">
+        <img class="logo vite" :src="viteRubySvg" alt="Vite Ruby logo" />
+      </a>
+      <a href="https://vuejs.org" target="_blank">
+        <img class="logo vue" :src="vueSvg" alt="Vue logo" />
+      </a>
+    </div>
+    <h2 class="h2">Inertia + Vite Ruby + Vue</h2>
+    <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>
+    </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 inertiaSvg from '/assets/inertia.svg'
+import viteRubySvg from '/assets/vite_ruby.svg'
+import vueSvg from '/assets/vue.svg'
+defineProps({
+  name: String,
+})
+const count = ref(0)
+</script>
+<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;
+}
+</style>

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

@@ -0,0 +1,35 @@
+import { createInertiaApp } from '@inertiajs/vue3'
+import { createApp, h } from 'vue'
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+  resolve: (name) => {
+    const pages = import.meta.glob('../pages/**/*.vue', {
+      eager: true,
+    })
+    return pages[`../pages/${name}.vue`]
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`../pages/${name}.vue`]
+    // page.default.layout = page.default.layout || Layout
+    // return page
+  },
+  setup({ el, App, props, plugin }) {
+    createApp({ render: () => h(App, props) })
+      .use(plugin)
+      .mount(el)
+  },
+})

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

@@ -0,0 +1,35 @@
+import { createInertiaApp } from '@inertiajs/vue3'
+import { createApp, DefineComponent, h } from 'vue'
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+  resolve: (name) => {
+    const pages = import.meta.glob<DefineComponent>('../pages/**/*.vue', {
+      eager: true,
+    })
+    return pages[`../pages/${name}.vue`]
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`../pages/${name}.vue`]
+    // page.default.layout = page.default.layout || Layout
+    // return page
+  },
+  setup({ el, App, props, plugin }) {
+    createApp({ render: () => h(App, props) })
+      .use(plugin)
+      .mount(el)
+  },
+})

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

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["<%= js_destination_path %>/**/*.ts", "<%= js_destination_path %>/**/*.tsx", "<%= js_destination_path %>/**/*.vue"]
+}

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

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

data/lib/generators/inertia/install/templates/vue/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

data/lib/generators/inertia/install/templates/vue/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

data/lib/generators/inertia/scaffold/scaffold_generator.rb ADDED Viewed

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+require 'rails/generators/rails/resource/resource_generator'
+module Inertia
+  module Generators
+    class ScaffoldGenerator < Rails::Generators::ResourceGenerator # :nodoc:
+      remove_hook_for :resource_controller
+      remove_class_option :actions
+      class_option :resource_route, type: :boolean
+      hook_for :scaffold_controller, required: true
+    end
+  end
+end

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

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+require 'rails/generators/resource_helpers'
+require 'inertia_rails/generators/helper'
+module Inertia
+  module Generators
+    # This class is a modified copy of Rails::Generators::ScaffoldControllerGenerator.
+    # We don't use inheritance because some gems (i.e. jsbuilder) monkey-patch it.
+    class ScaffoldControllerGenerator < Rails::Generators::NamedBase
+      include InertiaRails::Generators::Helper
+      include Rails::Generators::ResourceHelpers
+      source_root File.expand_path('./templates', __dir__)
+      check_class_collision suffix: 'Controller'
+      class_option :helper, type: :boolean
+      class_option :orm, banner: 'NAME', type: :string, required: true,
+                         desc: 'ORM to generate the controller for'
+      class_option :skip_routes, type: :boolean, desc: "Don't add routes to config/routes.rb."
+      argument :attributes, type: :array, default: [], banner: 'field:type field:type'
+      def create_controller_files
+        template 'controller.rb',
+                 File.join('app/controllers', controller_class_path, "#{controller_file_name}_controller.rb")
+      end
+      hook_for :inertia_templates, as: :scaffold, required: true,
+                                   default: InertiaRails::Generators::Helper.guess_inertia_template
+      hook_for :resource_route, in: :rails, required: true do |route|
+        invoke route unless options.skip_routes?
+      end
+      hook_for :test_framework, in: :rails, as: :scaffold
+      # Invoke the helper using the controller name (pluralized)
+      hook_for :helper, in: :rails, as: :scaffold do |invoked|
+        invoke invoked, [controller_name]
+      end
+      private
+      def permitted_params
+        attachments, others = attributes_names.partition { |name| attachments?(name) }
+        params = others.map { |name| ":#{name}" }
+        params += attachments.map { |name| "#{name}: []" }
+        params.join(', ')
+      end
+      def attachments?(name)
+        attribute = attributes.find { |attr| attr.name == name }
+        attribute&.attachments?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,100 @@
+<% module_namespacing do -%>
+class <%= controller_class_name %>Controller < ApplicationController
+  before_action :set_<%= singular_table_name %>, only: %i[ show edit update destroy ]
+<% if regular_class_path.any? -%>
+  wrap_parameters :<%= singular_table_name %>
+<% end -%>
+  inertia_share flash: -> { flash.to_hash }
+  # GET <%= route_url %>
+  def index
+    @<%= plural_table_name %> = <%= orm_class.all(class_name) %>
+    render inertia: '<%= "#{inertia_base_path}/Index" %>', props: {
+      <%= plural_table_name %>: @<%= plural_table_name %>.map do |<%= singular_table_name %>|
+        <%= "serialize_#{singular_table_name}" %>(<%= singular_table_name %>)
+      end
+    }
+  end
+  # GET <%= route_url %>/1
+  def show
+    render inertia: '<%= "#{inertia_base_path}/Show" %>', props: {
+      <%= singular_table_name %>: <%= "serialize_#{singular_table_name}" %>(@<%= singular_table_name %>)
+    }
+  end
+  # GET <%= route_url %>/new
+  def new
+    @<%= singular_table_name %> = <%= orm_class.build(class_name) %>
+    render inertia: '<%= "#{inertia_base_path}/New" %>', props: {
+      <%= 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: {
+      <%= singular_table_name %>: <%= "serialize_#{singular_table_name}" %>(@<%= singular_table_name %>)
+    }
+  end
+  # POST <%= route_url %>
+  def create
+    @<%= singular_table_name %> = <%= orm_class.build(class_name, "#{singular_table_name}_params") %>
+    if @<%= orm_instance.save %>
+      redirect_to <%= redirect_resource_name %>, notice: <%= %("#{human_name} was successfully created.") %>
+    else
+      redirect_to <%= new_helper %>, inertia: { errors: @<%= singular_table_name %>.errors }
+    end
+  end
+  # PATCH/PUT <%= route_url %>/1
+  def update
+    if @<%= orm_instance.update("#{singular_table_name}_params") %>
+      redirect_to <%= redirect_resource_name %>, notice: <%= %("#{human_name} was successfully updated.") %>
+    else
+      redirect_to <%= edit_helper %>, inertia: { errors: @<%= singular_table_name %>.errors }
+    end
+  end
+  # DELETE <%= route_url %>/1
+  def destroy
+    @<%= orm_instance.destroy %>
+    redirect_to <%= index_helper %>_url, notice: <%= %("#{human_name} was successfully destroyed.") %>
+  end
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_<%= singular_table_name %>
+      @<%= singular_table_name %> = <%= orm_class.find(class_name, "params[:id]") %>
+    end
+    # Only allow a list of trusted parameters through.
+    def <%= "#{singular_table_name}_params" %>
+      <%- if attributes_names.empty? -%>
+      params.fetch(:<%= singular_table_name %>, {})
+      <%- else -%>
+      params.require(:<%= singular_table_name %>).permit(<%= permitted_params %>)
+      <%- end -%>
+    end
+    def <%= "serialize_#{singular_table_name}" %>(<%= singular_table_name %>)
+      <%= singular_table_name %>.as_json(only: [
+        <%= attributes_to_serialize.map { |attribute| ":#{attribute}" }.join(", ") %>
+      ])<%- if attributes.any?(&:attachment?) || attributes.any?(&:attachments?) -%>.tap do |hash|
+          <%- attributes.filter(&:attachment?).map do |attribute| -%>
+        hash["<%= attribute.column_name %>"] = {filename: <%= singular_table_name %>.<%= attribute.column_name %>.filename, url: url_for(<%= singular_table_name %>.<%= attribute.column_name %>)} if <%= singular_table_name %>.<%= attribute.column_name %>.attached?
+          <%- end -%>
+          <%- attributes.filter(&:attachments?).map do |attribute| -%>
+        hash["<%= attribute.column_name %>"] =
+          <%= singular_table_name %>.<%= attribute.column_name %>.flat_map do |file|
+            {filename: file.filename.to_s, url: url_for(file)}
+          end
+          <%- end -%>
+      end<% end %>
+    end
+end
+<% end -%>

data/lib/generators/inertia_templates/controller/controller_generator.rb ADDED Viewed

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+require 'inertia_rails/generators/controller_template_base'
+module InertiaTemplates
+  module Generators
+    class ControllerGenerator < InertiaRails::Generators::ControllerTemplateBase
+      hide!
+      source_root File.expand_path('./templates', __dir__)
+    end
+  end
+end

data/lib/generators/inertia_templates/controller/templates/react/view.jsx.tt ADDED Viewed

@@ -0,0 +1,8 @@
+export default function <%= @action.camelize %>() {
+  return (
+    <>
+      <h1><%= class_name %>#<%= @action %></h1>
+      <p>Find me in <%= @path %></p>
+    </>
+  );
+}

data/lib/generators/inertia_templates/controller/templates/react/view.tsx.tt ADDED Viewed

@@ -0,0 +1,8 @@
+export default function <%= @action.camelize %>() {
+  return (
+    <>
+      <h1><%= class_name %>#<%= @action %></h1>
+      <p>Find me in <%= @path %></p>
+    </>
+  );
+}

data/lib/generators/inertia_templates/controller/templates/svelte/view.svelte.tt ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <h1><%= class_name %>#<%= @action %></h1>
2	+ <p>Find me in <%= @path %></p>

data/lib/generators/inertia_templates/controller/templates/svelte4/view.svelte.tt ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <h1><%= class_name %>#<%= @action %></h1>
2	+ <p>Find me in <%= @path %></p>

data/lib/generators/inertia_templates/controller/templates/vue/view.vue.tt ADDED Viewed

@@ -0,0 +1,4 @@
+<template>
+  <h1><%= class_name %>#<%= @action %></h1>
+  <p>Find me in <%= @path %></p>
+</template>

data/lib/generators/inertia_templates/scaffold/scaffold_generator.rb ADDED Viewed

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+require 'inertia_rails/generators/scaffold_template_base'
+module InertiaTemplates
+  module Generators
+    class ScaffoldGenerator < InertiaRails::Generators::ScaffoldTemplateBase
+      hide!
+      source_root File.expand_path('./templates', __dir__)
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+import { Head, Link } from '@inertiajs/react'
+import Form from './Form'
+export default function Edit({ <%= singular_table_name %> }) {
+  return (
+    <>
+      <Head title="Editing <%= human_name.downcase %>" />
+      <h1>Editing <%= human_name.downcase %></h1>
+      <Form
+        <%= singular_table_name %>={<%= singular_table_name %>}
+        onSubmit={(form) => {
+          form.transform((data) => ({ <%= singular_table_name %>: data }))
+<% if attributes.any?(&:attachments?) -%>
+          form.post(`<%= js_resource_path %>`, {
+            headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
+          })
+<% else -%>
+          form.patch(`<%= js_resource_path %>`)
+<% end -%>
+        }}
+        submitText="Update <%= human_name %>"
+      />
+      <br />
+      <div>
+        <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link>
+        {' | '}
+        <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/Edit.tsx.tt ADDED Viewed

@@ -0,0 +1,40 @@
+import { Head, Link } from '@inertiajs/react'
+import Form from './Form'
+import { <%= inertia_model_type %> } from './types'
+interface EditProps {
+  <%= singular_table_name %>: <%= inertia_model_type %>
+}
+export default function Edit({ <%= singular_table_name %> }: EditProps) {
+  return (
+    <>
+      <Head title="Editing <%= human_name.downcase %>" />
+      <h1>Editing <%= human_name.downcase %></h1>
+      <Form
+        <%= singular_table_name %>={<%= singular_table_name %>}
+        onSubmit={(form) => {
+          form.transform((data) => ({ <%= singular_table_name %>: data }))
+<% if attributes.any?(&:attachments?) -%>
+          form.post(`<%= js_resource_path %>`, {
+            headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
+          })
+<% else -%>
+          form.patch(`<%= js_resource_path %>`)
+<% end -%>
+        }}
+        submitText="Update <%= human_name %>"
+      />
+      <br />
+      <div>
+        <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link>
+        {' | '}
+        <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,111 @@
+import { useForm } from '@inertiajs/react'
+export default function Form({ <%= singular_table_name %>, onSubmit, submitText }) {
+  const form = useForm({
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    password: '',
+    password_confirmation: '',
+<% else -%>
+    <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %> || <%= default_value(attribute) %>,
+<% end -%>
+<% end -%>
+  })
+  const { data, setData, errors, processing } = form
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onSubmit(form)
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+      <div>
+        <label style={{ display: 'block' }} htmlFor="password">
+          Password
+        </label>
+        <input
+          type="password"
+          name="password"
+          id="password"
+          onChange={(e) => setData('password', e.target.value)}
+        />
+        {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"
+          onChange={(e) => setData('password_confirmation', e.target.value)}
+        />
+        {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 %>"
+          value={data.<%= attribute.column_name %>}
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
+        />
+<% elsif attribute.attachment? -%>
+        <input
+          type="file"
+          name="<%= attribute.singular_name %>"
+          id="<%= attribute.singular_name %>"
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.files[0])}
+        />
+<% elsif attribute.attachments? -%>
+        <input
+          type="file"
+          multiple
+          name="<%= attribute.singular_name %>[]"
+          id="<%= attribute.singular_name %>"
+          onChange={(e) => setData('<%= attribute.column_name %>', Array.from(e.target.files))}
+        />
+<% elsif input_type(attribute) == "checkbox" -%>
+        <input
+          type="<%= input_type(attribute) %>"
+          name="<%= attribute.singular_name %>"
+          id="<%= attribute.singular_name %>"
+          checked={data.<%= attribute.column_name %>}
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.checked)}
+        />
+<% else -%>
+        <input
+          type="<%= input_type(attribute) %>"
+          name="<%= attribute.singular_name %>"
+          id="<%= attribute.singular_name %>"
+          value={data.<%= attribute.column_name %>}
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
+        />
+<% 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>
+    </form>
+  )
+}