inertia_rails-contrib 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 918249a8473355fbcec2ce48a47c56a468601587623ff25a684b9d168f3405e1
-  data.tar.gz: 06a83350918c230d4006b8be40a763a444d26d8aee7133967342d4f5bcb77e27
+  metadata.gz: 27c11a71a3acff524328e14dd27d4265a5365a113a58ae636b6877dbfb294d12
+  data.tar.gz: 8150b80e446aebe35e9e5a58026d2d633ce06c693254c2849229ceeee0f30a1a
 SHA512:
-  metadata.gz: 53145888f043896709756bc40a08c86c7d57e947952d3ec0f84040ec766695c6b0815f1d13ed74301fd7c5a6e93b62bc9cf455b444e2607e517d90c4e38d6ed4
-  data.tar.gz: d7986308cd3c945a3ac65ff44b363dd56c11bb1c8f2dda893fbfdcc7e2e71a6e6d0b0478c239f30722afed4f2528ee5dc49b619c717f30945392f39581bef6d7
+  metadata.gz: c2c94b176f794229063106b9ca1bd28a73c0b766cb657479bc75656cbc2ef4de74e94a85c61aaa64e1ae20e6659bc5cf9923c1c75fd069f224e0403eb63fab74
+  data.tar.gz: c3030cd27b25dbc309d6e3ea7a2b410563b794724fad3f7043a53d86430ea8b1fae7eb122c62bfdaa69bf9301e0da9fdec7525f114c7e98df825eee0877ff1c5

data/CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+## [0.3.0] - 2024-10-25
+
+Added:
+
+- [BREAKING] Svelte 5 support ([@skryukov])
+  - The `--framework=svelte` option now installs Svelte 5
+  - New `--framework=svelte4` option installs Svelte 4
+  - Support for Svelte 5 in the installation generator
+  - Support for Svelte 5 in the scaffold templates
+
 ## [0.2.2] - 2024-10-09
 
 Added:
@@ -62,7 +72,8 @@ Added:
 [@Shaglock]: https://github.com/Shaglock
 [@skryukov]: https://github.com/skryukov
 
-[Unreleased]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.2...HEAD
+[Unreleased]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.3.0...HEAD
+[0.3.0]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.2...v0.3.0
 [0.2.2]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.1.1...v0.2.0

data/README.md

@@ -31,7 +31,8 @@ bin/rails generate inertia:install
 
 This command will:
 - Check for Vite Rails and install it if not present
-- Ask you to choose your preferred frontend framework (React, Vue, or Svelte)
+- Ask if you want to use TypeScript
+- Ask you to choose your preferred frontend framework (React, Vue, Svelte 4, or Svelte 5)
 - Ask if you want to install Tailwind CSS
 - Install necessary dependencies
 - Set up the application to work with Inertia
@@ -50,7 +51,7 @@ Vite Rails gem successfully installed
 Vite Rails successfully installed
 Would you like to use TypeScript? (y/n) y
 Adding TypeScript support
-What framework do you want to use with Inertia? [react, vue, svelte] (react)
+What framework do you want to use with Inertia? [react, vue, svelte4, svelte] (react)
          run  npm add @types/react @types/react-dom typescript --silent from "."
 Would you like to install Tailwind CSS? (y/n) y
 Installing Tailwind CSS

data/lib/generators/inertia/install/frameworks.yml

@@ -47,13 +47,38 @@ vue:
   copy_files_js:
     "InertiaExample.vue": "%{js_destination_path}/pages/InertiaExample.vue"
 
+svelte4:
+  inertia_package: "@inertiajs/svelte"
+  packages:
+    - "svelte@4"
+    - "@sveltejs/vite-plugin-svelte@3"
+  packages_ts:
+    - "@tsconfig/svelte@4"
+    - "svelte-check"
+    - "typescript"
+    - "tslib"
+  vite_plugin_import: "import { svelte } from '@sveltejs/vite-plugin-svelte'"
+  vite_plugin_call: "svelte()"
+  copy_files_ts:
+    "InertiaExample.ts.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
+    "tsconfig.json": "tsconfig.json"
+    "tsconfig.node.json": "tsconfig.node.json"
+    "vite-env.d.ts": "%{js_destination_path}/vite-env.d.ts"
+  copy_files_js:
+    "InertiaExample.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
+  copy_files:
+    "svelte.config.js": "svelte.config.js"
+    "../assets/svelte.svg": "%{js_destination_path}/assets/svelte.svg"
+    "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
+    "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
+
 svelte:
   inertia_package: "@inertiajs/svelte"
   packages:
-    - "svelte"
-    - "@sveltejs/vite-plugin-svelte"
+    - "svelte@5"
+    - "@sveltejs/vite-plugin-svelte@4"
   packages_ts:
-    - "@tsconfig/svelte"
+    - "@tsconfig/svelte@5"
     - "svelte-check"
     - "typescript"
     - "tslib"

data/lib/generators/inertia/install/install_generator.rb

@@ -99,7 +99,7 @@ module Inertia
             insert_into_file application_layout.to_s, "<%= vite_react_refresh_tag %>\n    ", before: "<%= vite_client_tag %>"
           end
 
-          gsub_file application_layout.to_s, /<title>/, "<title inertia>" if framework != "svelte"
+          gsub_file application_layout.to_s, /<title>/, "<title inertia>" unless svelte?
         else
           say_error "Could not find the application layout file. Please add the following tags manually:", :red
           say_error "-  <title>...</title>"
@@ -112,7 +112,7 @@ module Inertia
 
       def install_typescript
         say "Adding TypeScript support"
-        if framework == "svelte" && inertia_resolved_version.release < Gem::Version.new("1.3.0")
+        if svelte? && inertia_resolved_version.release < Gem::Version.new("1.3.0")
           say "WARNING: @inertiajs/svelte < 1.3.0 does not support TypeScript (resolved version: #{inertia_resolved_version}).", :yellow
           say "Skipping TypeScript support for @inertiajs/svelte", :yellow
           @typescript = false
@@ -270,6 +270,10 @@ module Inertia
         options[:verbose]
       end
 
+      def svelte?
+        framework.start_with? "svelte"
+      end
+
       def inertia_package
         "#{FRAMEWORKS[framework]["inertia_package"]}@#{options[:inertia_version]}"
       end

data/lib/generators/inertia/install/templates/react/inertia.ts

@@ -2,7 +2,7 @@ import { createInertiaApp } from '@inertiajs/react'
 import { createElement, ReactNode } from 'react'
 import { createRoot } from 'react-dom/client'
 
-type Component = { default: ReactNode & { layout?: (page: ReactNode) => ReactNode } }
+type ResolvedComponent = { default: ReactNode, layout?: (page: ReactNode) => ReactNode }
 
 createInertiaApp({
   // Set default page title
@@ -16,14 +16,14 @@ createInertiaApp({
   // progress: false,
 
   resolve: (name) => {
-    const pages = import.meta.glob('../pages/**/*.tsx', { eager: true })
-    return pages[`../pages/${name}.tsx`] as Component
+    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.tsx', { eager: true })
+    return pages[`../pages/${name}.tsx`]
 
     // 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}.tsx`] as Component
+    // const page = pages[`../pages/${name}.tsx`]
     // page.default.layout ||= (page) => createElement(Layout, null, page)
     // return page
   },

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

@@ -3,13 +3,9 @@
   import inertiaSvg from '/assets/inertia.svg'
   import viteRubySvg from '/assets/vite_ruby.svg'
 
-  export let name
+  let { name } = $props()
 
-  let count = 0
-
-  function handleClick() {
-    count += 1
-  }
+  let count = $state(0)
 </script>
 
 <svelte:head>
@@ -34,7 +30,7 @@
   <h2>Inertia + Vite Ruby + Svelte</h2>
 
   <div class="card">
-    <button on:click={handleClick}>
+    <button onclick={() => count++}>
       count is {count}
     </button>
     <p>

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

@@ -3,13 +3,9 @@
   import inertiaSvg from '/assets/inertia.svg'
   import viteRubySvg from '/assets/vite_ruby.svg'
 
-  export let name: string
+  let { name }: { name: string } = $props()
 
-  let count = 0
-
-  function handleClick() {
-    count += 1
-  }
+  let count = $state(0)
 </script>
 
 <svelte:head>
@@ -34,7 +30,7 @@
   <h2>Inertia + Vite Ruby + Svelte</h2>
 
   <div class="card">
-    <button on:click={handleClick}>
+    <button onclick={() => count++}>
       count is {count}
     </button>
     <p>

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

@@ -1,4 +1,5 @@
 import { createInertiaApp } from '@inertiajs/svelte'
+import  { mount } from 'svelte';
 
 createInertiaApp({
   // Set default page title
@@ -23,7 +24,7 @@ createInertiaApp({
     // return { default: page.default, layout: page.layout || Layout }
   },
 
-  setup({ el, App }) {
-    new App({ target: el })
+  setup({ el, App, props }) {
+    mount(App, { target: el, props })
   },
 })

data/lib/generators/inertia/install/templates/svelte/inertia.ts

@@ -1,7 +1,5 @@
-import { createInertiaApp } from '@inertiajs/svelte'
-import type { ComponentType } from 'svelte';
-
-type ResolvedComponent = { default: ComponentType, layout?: ComponentType }
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
+import { mount } from 'svelte'
 
 createInertiaApp({
   // Set default page title
@@ -15,18 +13,18 @@ createInertiaApp({
   // progress: false,
 
   resolve: (name) => {
-    const pages = import.meta.glob('../pages/**/*.svelte', { eager: true })
-    return pages[`../pages/${name}.svelte`] as ResolvedComponent
+    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.svelte', { eager: true })
+    return pages[`../pages/${name}.svelte`]
 
     // 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}.svelte`] as ResolvedComponent
+    // const page = pages[`../pages/${name}.svelte`]
     // return { default: page.default, layout: page.layout || Layout }
   },
 
-  setup({ el, App }) {
-    new App({ target: el })
+  setup({ el, App, props }) {
+    mount(App, { target: el, props })
   },
 })

data/lib/generators/inertia/install/templates/svelte4/InertiaExample.svelte

@@ -0,0 +1,116 @@
+<script>
+  import svelteSvg from '/assets/svelte.svg'
+  import inertiaSvg from '/assets/inertia.svg'
+  import viteRubySvg from '/assets/vite_ruby.svg'
+
+  export let name
+
+  let count = 0
+
+  function handleClick() {
+    count += 1
+  }
+</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 on:click={handleClick}>
+      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/svelte4/InertiaExample.ts.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import svelteSvg from '/assets/svelte.svg'
+  import inertiaSvg from '/assets/inertia.svg'
+  import viteRubySvg from '/assets/vite_ruby.svg'
+
+  export let name: string
+
+  let count = 0
+
+  function handleClick() {
+    count += 1
+  }
+</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 on:click={handleClick}>
+      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/svelte4/inertia.js

@@ -0,0 +1,29 @@
+import { createInertiaApp } from '@inertiajs/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 })
+    return pages[`../pages/${name}.svelte`]
+
+    // 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}.svelte`]
+    // return { default: page.default, layout: page.layout || Layout }
+  },
+
+  setup({ el, App, props }) {
+    new App({ target: el, props })
+  },
+})

data/lib/generators/inertia/install/templates/svelte4/inertia.ts

@@ -0,0 +1,29 @@
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/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<ResolvedComponent>('../pages/**/*.svelte', { eager: true })
+    return pages[`../pages/${name}.svelte`]
+
+    // 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}.svelte`]
+    // return { default: page.default, layout: page.layout || Layout }
+  },
+
+  setup({ el, App, props }) {
+    new App({ target: el, props })
+  },
+})

data/lib/generators/inertia/install/templates/svelte4/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

data/lib/generators/inertia/install/templates/svelte4/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+  },
+  "include": ["<%= js_destination_path %>/**/*.ts", "<%= js_destination_path %>/**/*.js", "<%= js_destination_path %>/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

data/lib/generators/inertia/install/templates/svelte4/tsconfig.node.json

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

data/lib/generators/inertia/install/templates/svelte4/vite-env.d.ts

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

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

@@ -13,14 +13,14 @@ createInertiaApp({
   // progress: false,
 
   resolve: (name) => {
-    const pages = import.meta.glob('../pages/**/*.vue', { eager: true })
-    return pages[`../pages/${name}.vue`] as DefineComponent
+    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`] as DefineComponent
+    // const page = pages[`../pages/${name}.vue`]
     // page.default.layout = page.default.layout || Layout
     // return page
   },

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

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

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

@@ -73,12 +73,12 @@ export default function Form({ <%= singular_table_name %>, onSubmit, submitText
 <% elsif attribute.attachments? -%>
         <input
           type="file"
-          multiple="multiple"
+          multiple
           name="<%= attribute.singular_name %>[]"
           id="<%= attribute.singular_name %>"
           onChange={(e) => setData('<%= attribute.column_name %>', Array.from(e.target.files))}
         />
-<% elsif attribute.field_type == :check_box -%>
+<% elsif input_type(attribute) == "checkbox" -%>
         <input
           type="<%= input_type(attribute) %>"
           name="<%= attribute.singular_name %>"

data/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.svelte.tt

@@ -2,10 +2,9 @@
   import { Link } from '@inertiajs/svelte'
   import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
+  const handleSubmit = ({ form }) => {
     form.transform((data) => ({ <%= singular_table_name %>: data }))
 <% if attributes.any?(&:attachments?) -%>
     form.post(`<%= js_resource_path %>`, {
@@ -26,7 +25,7 @@
 <Form
   {<%= singular_table_name %>}
   submitText="Update <%= human_name.downcase %>"
-  on:submit={handleSubmit}
+  onSubmit={handleSubmit}
 />
 
 <br />