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

inertia_rails 3.4.0 → 3.6.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 (205) hide show

data/lib/generators/inertia/install/templates/dev ADDED Viewed

@@ -0,0 +1,23 @@
+#!/usr/bin/env sh
+export PORT="${PORT:-3000}"
+if command -v overmind 1> /dev/null 2>&1
+then
+  overmind start -f Procfile.dev "$@"
+  exit $?
+fi
+if command -v hivemind 1> /dev/null 2>&1
+then
+  echo "Hivemind is installed. Running the application with Hivemind..."
+  exec hivemind Procfile.dev "$@"
+  exit $?
+fi
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+foreman start -f Procfile.dev "$@"

data/lib/generators/inertia/install/templates/initializer.rb ADDED Viewed

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+InertiaRails.configure do |config|
+  config.ssr_enabled = ViteRuby.config.ssr_build_enabled
+  config.version = ViteRuby.digest
+end

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

@@ -0,0 +1,60 @@
+import { Head } from '@inertiajs/react'
+import { useState } from 'react'
+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 }) {
+  const [count, setCount] = useState(0)
+  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.netlify.app" 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>
+          <p>
+            Edit <code>app/frontend/pages/InertiaExample.jsx</code> and save to
+            test HMR
+          </p>
+        </div>
+        <p className={cs.readTheDocs}>
+          Click on the Inertia, Vite Ruby, and React logos to learn more
+        </p>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia/install/templates/react/InertiaExample.module.css ADDED Viewed

@@ -0,0 +1,80 @@
+.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.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .logo.react {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

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

@@ -0,0 +1,60 @@
+import { Head } from '@inertiajs/react'
+import { useState } from 'react'
+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)
+  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.netlify.app" 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>
+          <p>
+            Edit <code>app/frontend/pages/InertiaExample.jsx</code> and save to
+            test HMR
+          </p>
+        </div>
+        <p className={cs.readTheDocs}>
+          Click on the Inertia, Vite Ruby, and React logos to learn more
+        </p>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,45 @@
+import { createInertiaApp } from '@inertiajs/react'
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+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/**/*.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.netlify.app/guide/pages#default-layouts
+    //
+    // page.default.layout ||= (page) => createElement(Layout, null, page)
+    return page
+  },
+  setup({ el, App, props }) {
+    if (el) {
+      createRoot(el).render(createElement(App, props))
+    } else {
+      console.error(
+        'Missing root element.\n\n' +
+          'If you see this error, it probably means you load 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/react/inertia.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import { createInertiaApp } from '@inertiajs/react'
+import { createElement, ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+// Temporary type definition, until @inertiajs/react provides one
+type ResolvedComponent = {
+  default: ReactNode
+  layout?: (page: ReactNode) => ReactNode
+}
+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<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.netlify.app/guide/pages#default-layouts
+    //
+    // page.default.layout ||= (page) => createElement(Layout, null, page)
+    return page
+  },
+  setup({ el, App, props }) {
+    if (el) {
+      createRoot(el).render(createElement(App, props))
+    } else {
+      console.error(
+        'Missing root element.\n\n' +
+          'If you see this error, it probably means you load Inertia.js on non-Inertia pages.\n' +
+          'Consider moving <%%= vite_typescript_tag "inertia" %> to the Inertia-specific layout instead.',
+      )
+    }
+  },
+})

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

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+  },
+  "include": ["<%= js_destination_path %>"]
+}

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

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

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

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

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

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

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

@@ -0,0 +1,112 @@
+<script>
+  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)
+</script>
+<svelte:head>
+  <title>Inertia + Vite Ruby + Svelte Example</title>
+</svelte:head>
+<div class="inertia_example">
+  <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://svelte.dev" target="_blank">
+      <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
+    </a>
+  </div>
+  <h2>Inertia + Vite Ruby + Svelte</h2>
+  <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>
+  </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;
+  }
+  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.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+  .card {
+    padding: 2em;
+  }
+  .read-the-docs {
+    color: #888;
+  }
+</style>

data/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte ADDED Viewed

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import svelteSvg from '/assets/svelte.svg'
+  import inertiaSvg from '/assets/inertia.svg'
+  import viteRubySvg from '/assets/vite_ruby.svg'
+  let { name }: { name: string } = $props()
+  let count = $state(0)
+</script>
+<svelte:head>
+  <title>Inertia + Vite Ruby + Svelte Example</title>
+</svelte:head>
+<div class="inertia_example">
+  <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://svelte.dev" target="_blank">
+      <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
+    </a>
+  </div>
+  <h2>Inertia + Vite Ruby + Svelte</h2>
+  <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>
+  </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;
+  }
+  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.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+  .card {
+    padding: 2em;
+  }
+  .read-the-docs {
+    color: #888;
+  }
+</style>

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

@@ -0,0 +1,44 @@
+import { createInertiaApp } from '@inertiajs/svelte'
+import  { mount } from 'svelte';
+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/**/*.svelte', {
+      eager: true,
+    })
+    const page = pages[`../pages/${name}.svelte`]
+    if (!page) {
+      console.error(`Missing Inertia page component: '${name}.svelte'`)
+    }
+    // To use a default layout, import the Layout component
+    // and use the following line.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // return { default: page.default, layout: page.layout || Layout }
+    return page
+  },
+  setup({ el, App, props }) {
+    if (el) {
+      mount(App, { target: el, props })
+    } else {
+      console.error(
+        'Missing root element.\n\n' +
+          'If you see this error, it probably means you load Inertia.js on non-Inertia pages.\n' +
+          'Consider moving <%%= vite_javascript_tag "inertia" %> to the Inertia-specific layout instead.',
+      )
+    }
+  },
+})