inertia_rails-contrib 0.2.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b9bf363cb43e7bd6c98bcd4ca6b3538e09927f61f5687553c44a3df5a347c3e1
-  data.tar.gz: 31345ef902abb988dc50540f5bfc110fa392b94cb0a7d82c10dfa6a36cd4ca96
+  metadata.gz: 918249a8473355fbcec2ce48a47c56a468601587623ff25a684b9d168f3405e1
+  data.tar.gz: 06a83350918c230d4006b8be40a763a444d26d8aee7133967342d4f5bcb77e27
 SHA512:
-  metadata.gz: bc56d3c96c345caafbdafbf8b46c9b2d6b58d3f710f032a3127a2954df38f2453824c61d585959e751d97724b0d9612c884b3fedabacb1fded37c8b45c14e0bd
-  data.tar.gz: 5af321921aad351f9be524c9d533c44c5db0d359b0646e8b48abba9581e8803e7ab15eb7e8a82d7c3bf39e8065e0f987ad13735ae64731976b8f70c4a8c68310
+  metadata.gz: 53145888f043896709756bc40a08c86c7d57e947952d3ec0f84040ec766695c6b0815f1d13ed74301fd7c5a6e93b62bc9cf455b444e2607e517d90c4e38d6ed4
+  data.tar.gz: d7986308cd3c945a3ac65ff44b363dd56c11bb1c8f2dda893fbfdcc7e2e71a6e6d0b0478c239f30722afed4f2528ee5dc49b619c717f30945392f39581bef6d7

data/CHANGELOG.md

@@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+## [0.2.2] - 2024-10-09
+
+Added:
+
+- TypeScript support for the installation generator ([@skryukov])
+  Note that it doesn't include scaffold templates yet.
+
+- New `--inertia-version` option for the installation generator ([@skryukov])
+  This allows you to specify the Inertia.js version to install.
+
+- Support `tailwind.config.ts` for Tailwind CSS template guessing ([@Shaglock])
+
+Fixed:
+
+- Correct examples for default layouts in inertia entrypoints ([@skryukov])
+- Inertia attribute added to the head tag in the layout for vue ([@skryukov])
+- Remove duplicate `vite_stylesheet_tag` when Tailwind CSS is installed ([@skryukov])
+
+## [0.2.1] - 2024-08-11
+
+Added:
+
+- Support `pnpm` package manager ([@skryukov])
+- New `--verbose` option for the installation generator ([@skryukov])
+
+Fixed:
+
+- Support installation alongside Webpacker ([@skryukov])
+
 ## [0.2.0] - 2024-08-10
 
 Added:
@@ -30,9 +59,12 @@ Added:
 - Initial release ([@iurev], [@skryukov])
 
 [@iurev]: https://github.com/iurev
+[@Shaglock]: https://github.com/Shaglock
 [@skryukov]: https://github.com/skryukov
 
-[Unreleased]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.0...HEAD
+[Unreleased]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.2...HEAD
+[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
 [0.1.1]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.1.0...v0.1.1
 [0.1.0]: https://github.com/skryukov/inertia_rails-contrib/commits/v0.1.0

data/README.md

@@ -48,6 +48,10 @@ Would you like to install Vite Ruby? (y/n) y
 Vite Rails gem successfully installed
          run  bundle exec vite install from "."
 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)
+         run  npm add @types/react @types/react-dom typescript --silent from "."
 Would you like to install Tailwind CSS? (y/n) y
 Installing Tailwind CSS
          run  npm add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/container-queries --silent from "."
@@ -59,14 +63,14 @@ Adding Tailwind CSS to the application layout
 Adding Inertia's Rails adapter initializer
       create  config/initializers/inertia_rails.rb
 Installing Inertia npm packages
-What framework do you want to use with Inertia? [react, vue, svelte] (react)
-         run  npm add @inertiajs/react react react-dom @vitejs/plugin-react --silent from "."
+         run  npm add @vitejs/plugin-react react react-dom --silent from "."
+         run  npm add @inertiajs/react@latest --silent from "."
 Adding Vite plugin for react
       insert  vite.config.ts
      prepend  vite.config.ts
-Copying inertia.js entrypoint
-      create  app/frontend/entrypoints/inertia.js
-Adding inertia.js script tag to the application layout
+Copying inertia.ts entrypoint
+      create  app/frontend/entrypoints/inertia.ts
+Adding inertia.ts script tag to the application layout
       insert  app/views/layouts/application.html.erb
 Adding Vite React Refresh tag to the application layout
       insert  app/views/layouts/application.html.erb
@@ -76,11 +80,15 @@ Copying example Inertia controller
 Adding a route for the example Inertia controller
        route  get 'inertia-example', to: 'inertia_example#index'
 Copying page assets
-      create  app/frontend/pages/InertiaExample.jsx
       create  app/frontend/pages/InertiaExample.module.css
       create  app/frontend/assets/react.svg
       create  app/frontend/assets/inertia.svg
       create  app/frontend/assets/vite_ruby.svg
+      create  app/frontend/pages/InertiaExample.tsx
+      create  tsconfig.json
+      create  tsconfig.app.json
+      create  tsconfig.node.json
+      create  app/frontend/vite-env.d.ts
 Copying bin/dev
       create  bin/dev
 Inertia's Rails adapter successfully installed

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

@@ -1,41 +1,73 @@
 react:
+  inertia_package: "@inertiajs/react"
   packages:
-    - "@inertiajs/react"
+    - "@vitejs/plugin-react"
     - "react"
     - "react-dom"
-    - "@vitejs/plugin-react"
+  packages_ts:
+    - "@types/react"
+    - "@types/react-dom"
+    - "typescript"
   vite_plugin_import: "import react from '@vitejs/plugin-react'"
   vite_plugin_call: "react()"
-  copy_files:
+  copy_files_ts:
+    "InertiaExample.tsx": "%{js_destination_path}/pages/InertiaExample.tsx"
+    "tsconfig.json": "tsconfig.json"
+    "tsconfig.app.json": "tsconfig.app.json"
+    "tsconfig.node.json": "tsconfig.node.json"
+    "vite-env.d.ts": "%{js_destination_path}/vite-env.d.ts"
+  copy_files_js:
     "InertiaExample.jsx": "%{js_destination_path}/pages/InertiaExample.jsx"
+  copy_files:
     "InertiaExample.module.css": "%{js_destination_path}/pages/InertiaExample.module.css"
     "../assets/react.svg": "%{js_destination_path}/assets/react.svg"
     "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
     "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
 
 vue:
+  inertia_package: "@inertiajs/vue3"
   packages:
-    - "@inertiajs/vue3"
     - "vue"
     - "@vitejs/plugin-vue"
+  packages_ts:
+    - "typescript"
+    - "vue-tsc"
   vite_plugin_import: "import vue from '@vitejs/plugin-vue'"
   vite_plugin_call: "vue()"
   copy_files:
-    "InertiaExample.vue": "%{js_destination_path}/pages/InertiaExample.vue"
     "../assets/vue.svg": "%{js_destination_path}/assets/vue.svg"
     "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
     "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
+  copy_files_ts:
+    "InertiaExample.ts.vue": "%{js_destination_path}/pages/InertiaExample.vue"
+    "tsconfig.json": "tsconfig.json"
+    "tsconfig.app.json": "tsconfig.app.json"
+    "tsconfig.node.json": "tsconfig.node.json"
+    "vite-env.d.ts": "%{js_destination_path}/vite-env.d.ts"
+  copy_files_js:
+    "InertiaExample.vue": "%{js_destination_path}/pages/InertiaExample.vue"
 
 svelte:
+  inertia_package: "@inertiajs/svelte"
   packages:
-    - "@inertiajs/svelte"
     - "svelte"
     - "@sveltejs/vite-plugin-svelte"
+  packages_ts:
+    - "@tsconfig/svelte"
+    - "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"
-    "InertiaExample.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
     "../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"

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

@@ -3,7 +3,13 @@ module Inertia
     module Helpers
       ### FS Helpers
       def js_destination_path
-        defined?(ViteRuby) ? ViteRuby.config.source_code_dir : "app/frontend"
+        return ViteRuby.config.source_code_dir if defined?(ViteRuby)
+        if file?("config/vite.json")
+          source_code_dir = JSON.parse(File.read(file_path("config/vite.json"))).dig("all", "sourceCodeDir")
+          return source_code_dir if source_code_dir
+        end
+
+        "app/frontend"
       end
 
       def js_destination_root

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

@@ -18,7 +18,13 @@ module Inertia
         enum: FRAMEWORKS.keys,
         default: nil
 
-      class_option :package_manager, type: :string, default: nil, enum: %w[npm yarn bun],
+      class_option :inertia_version, type: :string, default: "latest",
+        desc: "The version of Inertia.js to install"
+
+      class_option :typescript, type: :boolean, default: false,
+        desc: "Whether to use TypeScript"
+
+      class_option :package_manager, type: :string, default: nil, enum: %w[npm yarn bun pnpm],
         desc: "The package manager you want to use to install Inertia's npm packages"
 
       class_option :interactive, type: :boolean, default: true,
@@ -31,13 +37,23 @@ module Inertia
       class_option :example_page, type: :boolean, default: true,
         desc: "Whether to add an example Inertia page"
 
+      class_option :verbose, type: :boolean, default: false,
+        desc: "Run the generator in verbose mode"
+
       remove_class_option :skip_namespace, :skip_collision_check
 
       def install
         say "Installing Inertia's Rails adapter"
 
+        if inertia_resolved_version.version == "0"
+          say_error "Could not find the Inertia.js package version #{options[:inertia_version]}.", :red
+          exit(false)
+        end
+
         install_vite unless ruby_vite_installed?
 
+        install_typescript if typescript?
+
         install_tailwind if install_tailwind?
 
         install_inertia
@@ -46,7 +62,7 @@ module Inertia
 
         say "Copying bin/dev"
         copy_file "#{__dir__}/templates/dev", "bin/dev"
-        chmod "bin/dev", 0o755, verbose: false
+        chmod "bin/dev", 0o755, verbose: verbose?
 
         say "Inertia's Rails adapter successfully installed", :green
       end
@@ -59,6 +75,7 @@ module Inertia
 
         say "Installing Inertia npm packages"
         add_packages(*FRAMEWORKS[framework]["packages"])
+        add_packages(inertia_package)
 
         unless File.read(vite_config_path).include?(FRAMEWORKS[framework]["vite_plugin_import"])
           say "Adding Vite plugin for #{framework}"
@@ -66,34 +83,45 @@ module Inertia
           prepend_file vite_config_path, "#{FRAMEWORKS[framework]["vite_plugin_import"]}\n"
         end
 
-        say "Copying inertia.js entrypoint"
-        template "#{framework}/inertia.js", js_file_path("entrypoints/inertia.js")
+        say "Copying #{inertia_entrypoint} entrypoint"
+        template "#{framework}/#{inertia_entrypoint}", js_file_path("entrypoints/#{inertia_entrypoint}")
 
         if application_layout.exist?
-          say "Adding inertia.js script tag to the application layout"
+          say "Adding #{inertia_entrypoint} script tag to the application layout"
           headers = <<-ERB
-    <%= vite_javascript_tag "inertia" %>
+    <%= #{vite_tag} "inertia" %>
     <%= inertia_headers %>
           ERB
-          headers += "\n      <%= vite_stylesheet_tag \"application\" %>" if install_tailwind?
-
           insert_into_file application_layout.to_s, headers, after: "<%= vite_client_tag %>\n"
 
           if framework == "react" && !application_layout.read.include?("vite_react_refresh_tag")
             say "Adding Vite React Refresh tag to the application layout"
             insert_into_file application_layout.to_s, "<%= vite_react_refresh_tag %>\n    ", before: "<%= vite_client_tag %>"
-            gsub_file application_layout.to_s, /<title>/, "<title inertia>"
           end
+
+          gsub_file application_layout.to_s, /<title>/, "<title inertia>" if framework != "svelte"
         else
           say_error "Could not find the application layout file. Please add the following tags manually:", :red
           say_error "-  <title>...</title>"
           say_error "+  <title inertia>...</title>"
           say_error "+  <%= inertia_headers %>"
           say_error "+  <%= vite_react_refresh_tag %>" if framework == "react"
-          say_error "+  <%= vite_javascript_tag \"inertia\" %>"
+          say_error "+  <%= #{vite_tag} \"inertia\" %>"
         end
       end
 
+      def install_typescript
+        say "Adding TypeScript support"
+        if framework == "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
+          return
+        end
+
+        add_packages(*FRAMEWORKS[framework]["packages_ts"])
+      end
+
       def install_example_page
         say "Copying example Inertia controller"
         template "controller.rb", file_path("app/controllers/inertia_example_controller.rb")
@@ -102,7 +130,8 @@ module Inertia
         route "get 'inertia-example', to: 'inertia_example#index'"
 
         say "Copying page assets"
-        FRAMEWORKS[framework]["copy_files"].each do |source, destination|
+        copy_files = FRAMEWORKS[framework]["copy_files"].merge(FRAMEWORKS[framework]["copy_files_#{typescript? ? "ts" : "js"}"])
+        copy_files.each do |source, destination|
           template "#{framework}/#{source}", file_path(destination % {js_destination_path: js_destination_path})
         end
       end
@@ -132,14 +161,14 @@ module Inertia
 
         in_root do
           Bundler.with_original_env do
-            if (capture = run("bundle add vite_rails", capture: true))
+            if (capture = run("bundle add vite_rails", capture: !verbose?))
               say "Vite Rails gem successfully installed", :green
             else
               say capture
               say_error "Failed to install Vite Rails gem", :red
               exit(false)
             end
-            if (capture = run("bundle exec vite install", capture: true))
+            if (capture = run("bundle exec vite install", capture: !verbose?))
               say "Vite Rails successfully installed", :green
             else
               say capture
@@ -155,12 +184,22 @@ module Inertia
 
         if package_manager.nil?
           say_status "Could not find a package.json file to install Inertia to.", nil
+        elsif gem_installed?("webpacker") || gem_installed?("shakapacker")
+          say "Webpacker or Shakapacker is installed.", :yellow
+          say "Vite Ruby can work alongside Webpacker or Shakapacker, but it might cause issues.", :yellow
+          say "Please see the Vite Ruby documentation for the migration guide:", :yellow
+          say "https://vite-ruby.netlify.app/guide/migration.html#webpacker-%F0%9F%93%A6", :yellow
         else
-          say_status "Could not find a Vite configuration files (`config/vite.json` & `vite.config.{ts,js,mjs,cjs}`).", nil
+          say_status "Could not find a Vite configuration files (`config/vite.json` & `vite.config.{ts,js,mjs,cjs,mts,cts}`).", nil
         end
         false
       end
 
+      def gem_installed?(name)
+        regex = /^[^#]*gem\s+['"]#{name}['"]/
+        File.read(file_path("Gemfile")).match?(regex)
+      end
+
       def application_layout
         @application_layout ||= Pathname.new(file_path("app/views/layouts/application.html.erb"))
       end
@@ -175,7 +214,7 @@ module Inertia
 
       def add_packages(*packages)
         in_root do
-          run "#{package_manager} add #{packages.join(" ")} --silent"
+          run "#{package_manager} add #{packages.join(" ")} #{verbose? ? "" : "--silent"}"
         end
       end
 
@@ -184,15 +223,17 @@ module Inertia
 
         if file?("package-lock.json")
           "npm"
-        elsif file?("bun.config.js") || file?("bun.lockb")
+        elsif file?("bun.lockb")
           "bun"
+        elsif file?("pnpm-lock.yaml")
+          "pnpm"
         else
           "yarn"
         end
       end
 
       def vite_config_path
-        @vite_config_path ||= Dir.glob(file_path("vite.config.{ts,js,mjs,cjs}")).first
+        @vite_config_path ||= Dir.glob(file_path("vite.config.{ts,js,mjs,cjs,mts,cts}")).first
       end
 
       def install_vite?
@@ -207,6 +248,32 @@ module Inertia
         @install_tailwind = options[:install_tailwind] || yes?("Would you like to install Tailwind CSS? (y/n)", :green)
       end
 
+      def typescript?
+        return @typescript if defined?(@typescript)
+
+        @typescript = options[:typescript] || yes?("Would you like to use TypeScript? (y/n)", :green)
+      end
+
+      def inertia_entrypoint
+        "inertia.#{typescript? ? "ts" : "js"}"
+      end
+
+      def vite_tag
+        typescript? ? "vite_typescript_tag" : "vite_javascript_tag"
+      end
+
+      def inertia_resolved_version
+        @inertia_resolved_version ||= Gem::Version.new(`npm show @inertiajs/core@#{options[:inertia_version]} version`.strip)
+      end
+
+      def verbose?
+        options[:verbose]
+      end
+
+      def inertia_package
+        "#{FRAMEWORKS[framework]["inertia_package"]}@#{options[:inertia_version]}"
+      end
+
       def framework
         @framework ||= options[:framework] || ask("What framework do you want to use with Inertia?", :green, limited_to: FRAMEWORKS.keys, default: "react")
       end

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

@@ -0,0 +1,60 @@
+import { Head } from '@inertiajs/react'
+import { useState } from 'react'
+
+import reactSvg from '/assets/react.svg'
+import inertiaSvg from '/assets/inertia.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.ts

@@ -0,0 +1,36 @@
+import { createInertiaApp } from '@inertiajs/react'
+import { createElement, ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+type Component = { 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('../pages/**/*.tsx', { eager: true })
+    return pages[`../pages/${name}.tsx`] as Component
+
+    // 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
+    // page.default.layout ||= (page) => createElement(Layout, null, page)
+    // return page
+  },
+
+  setup({ el, App, props }) {
+    const root = createRoot(el)
+
+    root.render(createElement(App, props))
+  },
+})

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

@@ -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

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

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

@@ -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

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

data/lib/generators/inertia/install/templates/svelte/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/svelte/inertia.js

@@ -19,12 +19,11 @@ createInertiaApp({
     // 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) => createElement(Layout, null, page)
-    // return page
+    // const page = pages[`../pages/${name}.svelte`]
+    // return { default: page.default, layout: page.layout || Layout }
   },
 
-  setup({ el, App, props }) {
-    new App({ target: el, props })
+  setup({ el, App }) {
+    new App({ target: el })
   },
 })

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

@@ -0,0 +1,32 @@
+import { createInertiaApp } from '@inertiajs/svelte'
+import type { ComponentType } from 'svelte';
+
+type ResolvedComponent = { default: ComponentType, layout?: ComponentType }
+
+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`] as ResolvedComponent
+
+    // 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
+    // return { default: page.default, layout: page.layout || Layout }
+  },
+
+  setup({ el, App }) {
+    new App({ target: el })
+  },
+})

data/lib/generators/inertia/install/templates/svelte/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/svelte/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/svelte/vite-env.d.ts

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

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

@@ -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 lang="ts">
+import { Head } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+import vueSvg from '/assets/vue.svg'
+import inertiaSvg from '/assets/inertia.svg'
+import viteRubySvg from '/assets/vite_ruby.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

@@ -21,7 +21,7 @@ createInertiaApp({
     // see https://inertia-rails.netlify.app/guide/pages#default-layouts
     //
     // const page = pages[`../pages/${name}.vue`]
-    // page.default.layout ||= (page) => createElement(Layout, null, page)
+    // page.default.layout = page.default.layout || Layout
     // return page
   },
 

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

@@ -0,0 +1,33 @@
+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('../pages/**/*.vue', { eager: true })
+    return pages[`../pages/${name}.vue`] as DefineComponent
+
+    // 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
+    // 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

@@ -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

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

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

@@ -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

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

data/lib/inertia_rails_contrib/generators_helper.rb

@@ -14,7 +14,7 @@ module InertiaRailsContrib
     end
 
     def self.guess_inertia_template
-      if Rails.root.join("tailwind.config.js").exist?
+      if Rails.root.join("tailwind.config.js").exist? || Rails.root.join("tailwind.config.ts").exist?
         "inertia_tw_templates"
       else
         "inertia_templates"

data/lib/inertia_rails_contrib/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module InertiaRailsContrib
-  VERSION = "0.2.0"
+  VERSION = "0.2.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: inertia_rails-contrib
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.2
 platform: ruby
 authors:
 - Svyatoslav Kryukov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-10 00:00:00.000000000 Z
+date: 2024-10-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -63,15 +63,32 @@ files:
 - lib/generators/inertia/install/templates/initializer.rb
 - lib/generators/inertia/install/templates/react/InertiaExample.jsx
 - lib/generators/inertia/install/templates/react/InertiaExample.module.css
+- lib/generators/inertia/install/templates/react/InertiaExample.tsx
 - lib/generators/inertia/install/templates/react/inertia.js
+- lib/generators/inertia/install/templates/react/inertia.ts
+- lib/generators/inertia/install/templates/react/tsconfig.app.json
+- lib/generators/inertia/install/templates/react/tsconfig.json
+- lib/generators/inertia/install/templates/react/tsconfig.node.json
+- lib/generators/inertia/install/templates/react/vite-env.d.ts
 - lib/generators/inertia/install/templates/svelte/InertiaExample.svelte
+- lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte
 - lib/generators/inertia/install/templates/svelte/inertia.js
+- lib/generators/inertia/install/templates/svelte/inertia.ts
 - lib/generators/inertia/install/templates/svelte/svelte.config.js
+- lib/generators/inertia/install/templates/svelte/tsconfig.json
+- lib/generators/inertia/install/templates/svelte/tsconfig.node.json
+- lib/generators/inertia/install/templates/svelte/vite-env.d.ts
 - lib/generators/inertia/install/templates/tailwind/application.css
 - lib/generators/inertia/install/templates/tailwind/postcss.config.js
 - lib/generators/inertia/install/templates/tailwind/tailwind.config.js.tt
+- lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue
 - lib/generators/inertia/install/templates/vue/InertiaExample.vue
 - lib/generators/inertia/install/templates/vue/inertia.js
+- lib/generators/inertia/install/templates/vue/inertia.ts
+- lib/generators/inertia/install/templates/vue/tsconfig.app.json
+- lib/generators/inertia/install/templates/vue/tsconfig.json
+- lib/generators/inertia/install/templates/vue/tsconfig.node.json
+- lib/generators/inertia/install/templates/vue/vite-env.d.ts
 - lib/generators/inertia/scaffold/scaffold_generator.rb
 - lib/generators/inertia/scaffold_controller/scaffold_controller_generator.rb
 - lib/generators/inertia/scaffold_controller/templates/controller.rb.tt
@@ -152,7 +169,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.7
+rubygems_version: 3.5.17
 signing_key:
 specification_version: 4
 summary: A collection of extensions and developer tools for Rails Inertia adapter