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/react/InertiaExample.tsx CHANGED Viewed

@@ -1,60 +1,59 @@
 import { Head } from '@inertiajs/react'
-import { useState } from 'react'
+import { version as react_version } from 'react'
+import railsSvg from '/assets/rails.svg'
 import inertiaSvg from '/assets/inertia.svg'
 import reactSvg from '/assets/react.svg'
-import viteRubySvg from '/assets/vite_ruby.svg'
-import cs from './InertiaExample.module.css'
-export default function InertiaExample({ name }: { name: string }) {
-  const [count, setCount] = useState(0)
+import cs from './index.module.css'
+export default function InertiaExample(
+  { rails_version, ruby_version, rack_version, inertia_rails_version }:
+  { rails_version: string, ruby_version: string, rack_version: string, inertia_rails_version: string }
+) {
   return (
-    <>
-      <Head title="Inertia + Vite Ruby + React Example" />
-      <div className={cs.root}>
-        <h1 className={cs.h1}>Hello {name}!</h1>
-        <div>
-          <a href="https://inertia-rails.dev" target="_blank">
-            <img className={cs.logo} src={inertiaSvg} alt="Inertia logo" />
-          </a>
-          <a href="https://vite-ruby.netlify.app" target="_blank">
-            <img
-              className={`${cs.logo} ${cs.vite}`}
-              src={viteRubySvg}
-              alt="Vite Ruby logo"
-            />
-          </a>
-          <a href="https://react.dev" target="_blank">
-            <img
-              className={`${cs.logo} ${cs.react}`}
-              src={reactSvg}
-              alt="React logo"
-            />
-          </a>
-        </div>
-        <h2 className={cs.h2}>Inertia + Vite Ruby + React</h2>
-        <div className="card">
-          <button
-            className={cs.button}
-            onClick={() => setCount((count) => count + 1)}
-          >
-            count is {count}
-          </button>
+    <div className={cs.root}>
+      <Head title="Ruby on Rails + Inertia + React" />
+      <nav className={cs.subNav}>
+        <a href="https://rubyonrails.org" target="_blank">
+          <img  className={`${cs.logo} ${cs.rails}`} alt="Ruby on Rails Logo" src={railsSvg} />
+        </a>
+        <a href="https://inertia-rails.dev" target="_blank">
+          <img className={`${cs.logo} ${cs.inertia}`} src={inertiaSvg} alt="Inertia logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img
+            className={`${cs.logo} ${cs.react}`}
+            src={reactSvg}
+            alt="React logo"
+          />
+        </a>
+      </nav>
+      <div className={cs.footer}>
+        <div className={cs.card}>
           <p>
-            Edit <code>app/frontend/pages/InertiaExample.jsx</code> and save to
-            test HMR
+            Edit <code><%= js_destination_path %>/pages/inertia_example/index.jsx</code> and save to test <abbr title="Hot Module Replacement">HMR</abbr>.
           </p>
         </div>
-        <p className={cs.readTheDocs}>
-          Click on the Inertia, Vite Ruby, and React logos to learn more
-        </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>React version:</strong> {react_version}</li>
+            </ul>
+          </li>
+          </ul>
       </div>
-    </>
+    </div>
   )
 }

data/lib/generators/inertia/install/templates/react/inertia.jsx ADDED Viewed

@@ -0,0 +1,65 @@
+import { createInertiaApp } from '@inertiajs/react'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.dev/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+  // Disable progress bar
+  //
+  // see https://inertia-rails.dev/guide/progress-indicators
+  // progress: false,
+  resolve: (name) => {
+    const pages = import.meta.glob('../pages/**/*.jsx', {
+      eager: true,
+    })
+    const page = pages[`../pages/${name}.jsx`]
+    if (!page) {
+      console.error(`Missing Inertia page component: '${name}.jsx'`)
+    }
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.dev/guide/pages#default-layouts
+    //
+    // page.default.layout ||= (page) => (<Layout>{page}</Layout>)
+    return page
+  },
+  setup({ el, App, props }) {
+    createRoot(el).render(
+      <StrictMode>
+        <App {...props} />
+      </StrictMode>
+    )
+  },
+  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.jsx" %> to the Inertia-specific layout instead.',
+    )
+  }
+})

data/lib/generators/inertia/install/templates/react/inertia.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+void createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.dev/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+  // Disable progress bar
+  //
+  // see https://inertia-rails.dev/guide/progress-indicators
+  // progress: false,
+  resolve: (name) => {
+    const pages = import.meta.glob<{default: ResolvedComponent}>('../pages/**/*.tsx', {
+      eager: true,
+    })
+    const page = pages[`../pages/${name}.tsx`]
+    if (!page) {
+      console.error(`Missing Inertia page component: '${name}.tsx'`)
+    }
+    // To use a default layout, import the Layout component
+    // and use the following line.
+    // see https://inertia-rails.dev/guide/pages#default-layouts
+    //
+    // page.default.layout ||= (page: ReactNode) => (<Layout>{page}</Layout>)
+    return page
+  },
+  setup({ el, App, props }) {
+    createRoot(el).render(
+      <StrictMode>
+        <App {...props} />
+      </StrictMode>
+    )
+  },
+  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_typescript_tag "inertia.tsx" %> to the Inertia-specific layout instead.',
+    )
+  }
+})

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

@@ -22,6 +22,13 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    /* Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["<%= js_destination_path %>/*"],
+      "~/*": ["<%= js_destination_path %>/*"]
+    }
   },
   "include": ["<%= js_destination_path %>"]
 }

data/lib/generators/inertia/install/templates/react/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/react/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/install/templates/svelte/InertiaExample.svelte CHANGED Viewed

@@ -1,112 +1,146 @@
 <script>
+  import { VERSION } from 'svelte/compiler'
+  import railsSvg from '/assets/rails.svg'
   import svelteSvg from '/assets/svelte.svg'
   import inertiaSvg from '/assets/inertia.svg'
-  import viteRubySvg from '/assets/vite_ruby.svg'
-  let { name } = $props()
-  let count = $state(0)
+  let { rails_version, rack_version, ruby_version, inertia_rails_version } = $props()
 </script>
 <svelte:head>
-  <title>Inertia + Vite Ruby + Svelte Example</title>
+  <title>Rails + Inertia + Svelte</title>
 </svelte:head>
-<div class="inertia_example">
-  <h1>Hello {name}!</h1>
-  <div>
-    <a href="https://inertia-rails.dev" target="_blank">
-      <img class="logo" src={inertiaSvg} alt="Inertia logo" />
+<div class="root">
+  <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://svelte.dev" target="_blank">
-      <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
+      <img class="logo svelte" src={svelteSvg} alt="Svelte logo"/>
     </a>
-  </div>
+  </nav>
-  <h2>Inertia + Vite Ruby + Svelte</h2>
+  <div class="footer">
+    <div class="card">
+      <p>
+        Edit <code><%= js_destination_path %>/pages/inertia_example/index.svelte</code> and save to test <abbr title="Hot Module Replacement">HMR</abbr>.
+      </p>
+    </div>
-  <div class="card">
-    <button onclick={() => count++}>
-      count is {count}
-    </button>
-    <p>
-      Edit <code>app/frontend/pages/InertiaExample.svelte</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>Svelte version:</strong> {VERSION}</li>
+        </ul>
+      </li>
+      </ul>
   </div>
-  <p class="read-the-docs">
-    Click on the Inertia, Vite Ruby, and Svelte logos to learn more
-  </p>
 </div>
 <style>
-  .inertia_example {
-    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;
+  :global(body) {
+    margin: 0;
+    padding: 0;
   }
-  h2 {
-    font-size: 2.6em;
-    line-height: 1.1;
+  .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;
   }
-  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;
+  @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: 6em;
+    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:hover {
+  .logo.inertia:hover {
     filter: drop-shadow(0 0 2em #646cffaa);
   }
-  .logo.vite:hover {
-    filter: drop-shadow(0 0 2em #e4023baa);
-  }
   .logo.svelte:hover {
     filter: drop-shadow(0 0 2em #ff3e00aa);
   }
+  .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;
   }
-  .read-the-docs {
-    color: #888;
+  .footer ul ul li:last-child:after {
+    content: "";
   }
 </style>