vite_react 0.1.5

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 81a7fb698949d219e73983161b10ec4afa5b68090ba34d331acdaf378812f019
+  data.tar.gz: '07931987bbe9296f2598b17818856a620509957da2016befe65614152a162027'
+SHA512:
+  metadata.gz: 11819f83bc760d1438c867ddddc6039c9f85432f6d8e289facc1880094cbf108da5da7cb9a0b9c6c3338c6c8819521c8dc763c9a961345c803c3c156ad497f32
+  data.tar.gz: 83492e77f4b9a546d74b90317380939b74549e5ac25d25868d6d271e649b6b9a23cabe4510715bb420e9a1801ae92e40355fb45268a3e0a69731426c5ec6eb74

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright lsproule
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# ViteReact
+
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "vite_react"
+```
+
+And then execute:
+```bash
+bundle install
+```
+
+```bash
+./bin/rails vite_react:install
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,3 @@
+require "bundler/setup"
+
+require "bundler/gem_tasks"

data/lib/generators/ui/component/component_generator.rb

@@ -0,0 +1,31 @@
+# lib/generators/ui/component/component_generator.rb
+
+module Ui
+  class ComponentGenerator < Rails::Generators::NamedBase
+    source_root File.expand_path("templates", __dir__)
+    desc "Generates a new React component (TSX) and registers it in turbo-mount.js"
+
+    def create_component_file
+      # Create a new TSX file in app/javascript/components
+      template "component.tsx.erb", "app/javascript/components/#{class_name}.tsx"
+    end
+
+    def add_import_to_turbo_mount
+      # Inject an import statement into turbo-mount.js after the registerComponent import
+      inject_into_file(
+        "app/javascript/entrypoints/turbo-mount.js",
+        after: 'import { registerComponent } from "turbo-mount/react";'
+      ) do
+        "\nimport { #{class_name} } from \"@/components/#{class_name}\";"
+      end
+    end
+
+    def register_component_in_turbo_mount
+      # Append a registerComponent call at the bottom of turbo-mount.js
+      append_to_file "app/javascript/entrypoints/turbo-mount.js", <<~JS
+
+        registerComponent(turboMount, "#{class_name}", #{class_name});
+      JS
+    end
+  end
+end

data/lib/generators/ui/component/templates/component.tsx.erb

@@ -0,0 +1,9 @@
+type Props = {};
+
+export function <%= class_name %>({}: Props) {
+  return (
+    <div>
+      <h2>New <%= class_name %> component</h2>
+    </div>
+  );
+}

data/lib/generators/ui/register/register_generator.rb

@@ -0,0 +1,33 @@
+# lib/generators/ui/register/register_generator.rb
+
+module Ui
+  class RegisterGenerator < Rails::Generators::NamedBase
+    source_root File.expand_path("templates", __dir__)
+    desc "Takes an existing TSX component and auto-registers it in turbo-mount.js"
+
+    def ensure_component_exists
+      unless File.exist?("app/javascript/components/#{class_name}.tsx")
+        say "ERROR: app/javascript/components/#{class_name}.tsx not found!", :red
+        exit(1) # or raise an exception
+      end
+    end
+
+    def add_import_to_turbo_mount
+      # Step 1: Inject an import line under the registerComponent import line
+      inject_into_file(
+        "app/javascript/entrypoints/turbo-mount.js",
+        after: 'import { registerComponent } from "turbo-mount/react";'
+      ) do
+        "\nimport { #{class_name} } from \"@/components/#{class_name}\";"
+      end
+    end
+
+    def register_component_in_turbo_mount
+      # Step 2: Append the registerComponent call at the bottom of turbo-mount.js
+      append_to_file "app/javascript/entrypoints/turbo-mount.js", <<~JS
+
+        registerComponent(turboMount, "#{class_name}", #{class_name});
+      JS
+    end
+  end
+end

data/lib/generators/vite_react/migration/migration.rb

@@ -0,0 +1,63 @@
+# lib/generators/rails/migration_ts/migration_ts_generator.rb
+require "rails/generators/migration/migration_generator"
+require "rails/generators/resource_helpers"
+
+
+
+module ViteReact
+  module Generators
+    class MigrationGenerator < MigrationGenerator
+      source_root File.expand_path("templates", __dir__)
+
+      argument :migration_name, type: :string
+      argument :attributes, type: :array, default: [], banner: "field:type field:type"
+
+      def update_types
+        puts "Updating TypeScript definitions based on #{migration_name}..."
+
+        types_file_path = Rails.root.join("app/javascript/types.d.ts")
+        # read the file, parse it, inject new columns if they don’t exist, etc.
+        # For references, do the same logic we did in the scaffold generator
+
+        interface_code = build_migration_interface_snippet
+
+        append_to_file types_file_path, interface_code
+      end
+
+      private
+
+      def build_migration_interface_snippet
+        # This is obviously simplistic. You would incorporate something
+        # like the logic from your main TS generator, or even call
+        # a shared module that does the same parsing of attributes.
+        attributes_lines = attributes.flat_map do |attr|
+          if attr.type == "references"
+            [
+              "#{attr.name}_id: number;",
+              "#{attr.name}?: #{attr.name.camelize};"
+            ]
+          else
+            [ "#{attr.name}?: #{rails_to_ts_type(attr.type)};" ]
+          end
+        end
+
+        <<~TS
+      // AUTO-GENERATED by rails g migration #{migration_name}
+      // You may need to update validations or remove ? accordingly
+      // if presence validations exist.
+      // Changes introduced by: #{migration_name}
+      #{attributes_lines.join("
+        ")}
+        TS
+      end
+
+      def rails_to_ts_type(rails_type)
+        case rails_type
+        when "integer", "float", "decimal" then "number"
+        when "boolean" then "boolean"
+        else "string"
+        end
+      end
+    end
+  end
+end

data/lib/generators/vite_react/model_validation/model_validation_generator.rb

@@ -0,0 +1,78 @@
+# lib/generators/rails/tmodel_validation/model_validation_generator.rb
+
+module ViteReact
+  module Generators
+    class ModelValidationGenerator < Rails::Generators::NamedBase
+      source_root File.expand_path("templates", __dir__)
+
+      def update_types_for_validations
+        require File.join(Rails.root, "app/models/\#{file_path}.rb")
+
+        model_class = file_name.camelize.constantize
+
+        presence_attributes = model_class.validators
+          .select { |v| v.is_a?(ActiveModel::Validations::PresenceValidator) }
+          .flat_map(&:attributes)
+          .map(&:to_s)
+
+        required_belongs_tos = model_class.reflect_on_all_associations(:belongs_to)
+          .select { |assoc| assoc.options[:optional] == false || assoc.options[:required] == true }
+          .map(&:name)
+          .map(&:to_s)
+
+        presence_required = presence_attributes.to_set
+        required_belongs_tos.each do |assoc_name|
+          presence_required << assoc_name        # e.g. user
+          presence_required << "\#{assoc_name}_id" # e.g. user_id
+        end
+
+        types_file_path = Rails.root.join("app/javascript/types.d.ts")
+        return unless File.exist?(types_file_path)
+
+        lines = File.read(types_file_path).split("\n")
+
+
+        in_target_interface = false
+        brace_depth = 0
+
+
+        start_of_interface_regex = /^\s*(?:export\s+)?interface\s+\#{Regexp.escape(model_class.name)}\s*(\{|extends|$)/
+
+        lines.map!.with_index do |line, idx|
+          if !in_target_interface && line =~ start_of_interface_regex
+            in_target_interface = true
+            brace_depth = line.count("{")
+            # {'      '}
+          elsif in_target_interface
+            brace_depth += line.count("{")
+            brace_depth -= line.count("}")
+            # {'        '}
+            if brace_depth <= 0
+              in_target_interface = false
+            end
+          end
+
+          if in_target_interface && brace_depth > 0
+            if line =~ /^(\s*)([a-zA-Z_0-9]+)(\??):/
+              leading_spaces = $1
+              attribute_name = $2
+              question_mark  = $3 # could be "" or "?"
+
+              if presence_required.include?(attribute_name)
+                line = line.sub("\#{attribute_name}?:", "\#{attribute_name}:")
+              else
+                unless question_mark == "?"
+                  line = line.sub("\#{attribute_name}:", "\#{attribute_name}?:")
+                end
+              end
+            end
+          end
+
+          line
+        end
+
+        File.write(types_file_path, lines.join("\n"))
+      end
+    end
+  end
+end

data/lib/generators/vite_react/scaffold/scaffold_generator.rb

@@ -0,0 +1,75 @@
+require "rails/generators/scaffold/scaffold_generator"
+require "rails/generators/resource_helpers"
+
+# lib/generators/rails/typescript/typescript_generator.rb
+
+module ViteReact
+  module Generators
+    class ScaffoldGenerator < ScaffoldGenerator
+      include Rails::Generators::ResourceHelpers
+
+      source_root File.expand_path("templates", __dir__)
+
+      argument :attributes, type: :array, default: [], banner: "field:type field:type"
+
+
+      def create_or_update_types
+        types_file_path = Rails.root.join("app/javascript/types.d.ts")
+
+        interface_code = generate_interface_code
+
+        if File.exist?(types_file_path)
+          append_to_file types_file_path, interface_code
+        else
+          create_file types_file_path, interface_code
+        end
+      end
+
+
+
+      private
+
+      def generate_interface_code
+        attributes_lines = attributes.flat_map do |attr|
+          puts attr.inspect
+          if attr.type == :references
+            build_reference_lines(attr)
+          else
+            [ build_attribute_line(attr) ]
+          end
+        end
+
+        <<~TS
+      // AUTO-GENERATED by rails g scaffold #{file_name}
+      interface #{class_name} {
+        #{attributes_lines.join("
+        ")}
+      }
+
+        TS
+      end
+
+
+      def build_attribute_line(attr)
+        "#{attr.name}?: #{rails_to_ts_type(attr.type)};"
+      end
+
+      def build_reference_lines(attr)
+        referenced_interface_name = attr.name.camelize
+        [
+          "#{attr.name}_id: number;",
+          "#{attr.name}?: #{referenced_interface_name};"
+        ]
+      end
+
+      def rails_to_ts_type(rails_type)
+        case rails_type
+        when "integer", "float", "decimal" then "number"
+        when "boolean" then "boolean"
+        else
+          "string"
+        end
+      end
+    end
+  end
+end

data/lib/install/App.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+
+export function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex bg-[#242424] gap-12 text-white h-screen flex-col justify-center items-center mx-auto w-screen">
+      <div className="flex text-3xl">
+        <a href="https://guides.rubyonrails.org/index.html" target="_blank">
+          <img
+            src="/images/rails.svg"
+            className="logo rails"
+            alt="Rails logo"
+          />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img
+            src="/images/react.svg"
+            className="logo react"
+            alt="React logo"
+          />
+        </a>
+        <a href="https://vite.dev" target="_blank">
+          <img src="/images/vite.svg" className="logo" alt="Vite logo" />
+        </a>
+      </div>
+      <h1 className="text-4xl font-bold">
+        <span className="text-[#CC0000]">Rails </span>#{' '}
+        + <span className="text-[#61dafb]">React </span>
+        + <span className="text-[#646cff]">Vite</span>#{' '}
+      </h1>
+      <div className="card flex flex-col items-center">
+        <button className="mb-4 font-semibold border border-transparent hover:border-[#646cff] cursor-pointer  bg-[#1a1a1a] p-1 rounded-lg p-x-8" onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>app/javascript/components/App.tsx</code> and save to test
+          HMR
+        </p>
+      </div>
+      <p className="text-[#888]">
+        Click on the Rails, Vite and React logos to learn more
+      </p>
+    </div>
+  );
+}

data/lib/install/application.css

@@ -0,0 +1,69 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Example theming with CSS variables */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

data/lib/install/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/javascript/entrypoints/application.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

data/lib/install/index.html.erb

@@ -0,0 +1,31 @@
+<style>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+.logo.rails:hover {
+  filter: drop-shadow(0 0 2em #CC0000);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+a .logo.react {
+  animation: logo-spin infinite 20s linear;
+}
+</style>
+<%= turbo_mount('App') %>
+

data/lib/install/tailwind.config.js

@@ -0,0 +1,74 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  darkMode: ['class'],
+  content: [
+    './public/*.html',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.{js,jsx,ts,tsx}',
+    './app/views/**/*.{erb,haml,html,slim}'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          'Inter var',
+          ...defaultTheme.fontFamily.sans
+        ]
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
+      },
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          '1': 'hsl(var(--chart-1))',
+          '2': 'hsl(var(--chart-2))',
+          '3': 'hsl(var(--chart-3))',
+          '4': 'hsl(var(--chart-4))',
+          '5': 'hsl(var(--chart-5))'
+        }
+      }
+    }
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/container-queries'),
+    require('tailwindcss-animate')
+  ]
+}

data/lib/install/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./app/javascript/*"]
+    }
+  },
+  "include": ["app/javascript/**/*"]
+}

data/lib/install/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./app/javascript/*"]
+    }
+  }
+}

data/lib/install/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

data/lib/install/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+

data/lib/install/vite.config.js

@@ -0,0 +1,17 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import RubyPlugin from 'vite-plugin-ruby'
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  plugins: [
+    react(),
+    RubyPlugin(),
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./app/javascript"),
+    },
+  },
+})
+

data/lib/install/vite_react.rb

@@ -0,0 +1,153 @@
+say "=== Vite-react setup starting... ===", :green
+
+gem "vite_rails", "~> 3.0"
+gem "turbo-mount", "~> 0.4.1"
+gem "tailwindcss-rails", "~> 3.0"
+
+
+rails_command "tailwindcss:install"
+
+gsub_file "app/views/layouts/application.html.erb",
+  /<main class="container mx-auto mt-28 px-5 flex">/,
+  "<main class=\"\">"
+
+# --------------------------------------------------------------------------
+# 2.3: Vite + React + Tailwind + shadcn
+# --------------------------------------------------------------------------
+say "=== Installing Vite, React, Tailwind, shadcn, etc. ===", :green
+
+# --- Vite ---
+run "bundle exec vite install"
+
+# --- Install NPM dependencies ---
+run <<~CMD
+    npm install \
+      react react-dom \
+      turbo-mount stimulus-vite-helpers clsx tailwind-merge \
+      @hotwired/turbo-rails \
+      @rails/actioncable @rails/activestorage \
+      class-variance-authority clsx tailwind-merge lucide-react
+CMD
+
+run <<~CMD
+    npm install -D \
+      @vitejs/plugin-react eslint globals eslint-plugin-react-refresh typescript-eslint @eslint/js \
+      @types/react @types/react-dom vite-plugin-stimulus-hmr vite-plugin-full-reload \
+      tailwind autoprefixer tailwindcss-animate \
+      @tailwindcss/typography @tailwindcss/container-queries @tailwindcss/forms
+CMD
+
+# Initialize Tailwind configs
+run "npx tailwindcss init -p"
+
+# --------------------------------------------------------------------------
+# 2.3.2: Overwrite vite.config.js with your React + Ruby config
+# --------------------------------------------------------------------------
+remove_file "vite.config.js"
+copy_file "#{__dir__}/vite.config.js", "vite.config.js"
+
+# --------------------------------------------------------------------------
+# 2.3.3: Add TypeScript config files
+# --------------------------------------------------------------------------
+copy_file "#{__dir__}/tsconfig.json", "tsconfig.json"
+copy_file "#{__dir__}/tsconfig.app.json", "tsconfig.app.json"
+copy_file "#{__dir__}/tsconfig.node.json", "tsconfig.node.json"
+
+# --------------------------------------------------------------------------
+# 2.3.4: Remove default Rails assets / create Stimulus + Tailwind structure
+# --------------------------------------------------------------------------
+remove_file "app/javascript/application.js"
+remove_file "app/javascript/controllers/index.js"
+
+create_file "app/javascript/controllers/index.js", <<~JS
+    import { application } from "./application";
+    import { registerControllers } from "stimulus-vite-helpers";
+
+    const controllers = import.meta.glob("./**/*_controller.js", { eager: true });
+    registerControllers(application, controllers);
+JS
+
+
+copy_file "#{__dir__}/application.css", "app/javascript/entrypoints/application.css"
+
+# 2.3.5: Create the main JS entrypoint for Vite
+remove_file "app/javascript/entrypoints/application.js"
+create_file "app/javascript/entrypoints/application.js", <<~JS
+    import "@hotwired/turbo-rails";
+    import "../controllers";
+    import "./turbo-mount";
+    import "./application.css";
+
+    console.log("Hello from application.js");
+JS
+
+# --------------------------------------------------------------------------
+# 2.4: turbo-mount installation
+# --------------------------------------------------------------------------
+say "=== Installing turbo-mount ===", :green
+generate "turbo_mount:install --framework=react"
+
+# We’ll create a dedicated turbo-mount entry for React components
+remove_file "app/javascript/turbo-mount.js"
+create_file "app/javascript/entrypoints/turbo-mount.js", <<~JS
+    import { TurboMount } from "turbo-mount";
+    import { registerComponent } from "turbo-mount/react";
+
+    // Example React component
+    import { App } from "@/components/App";
+
+    const turboMount = new TurboMount();
+    registerComponent(turboMount, "App", App);
+JS
+
+# --------------------------------------------------------------------------
+# 2.5: Example React component + Home controller
+# --------------------------------------------------------------------------
+
+copy_file "#{__dir__}/App.tsx", "app/javascript/components/App.tsx"
+
+empty_directory "public/images"
+run <<~CMD
+    curl -o public/images/rails.svg https://raw.githubusercontent.com/lsproule/react-rails-template/refs/heads/main/images/rails.svg
+    curl -o public/images/vite.svg https://raw.githubusercontent.com/lsproule/react-rails-template/refs/heads/main/images/vite.svg
+    curl -o public/images/react.svg https://raw.githubusercontent.com/lsproule/react-rails-template/refs/heads/main/images/react.svg
+CMD
+
+generate :controller, "route", "index", "--skip-routes", "--no-helper", "--no-assets"
+route "root to: 'route#index'"
+
+remove_file "app/views/route/index.html.erb", force: true
+copy_file "#{__dir__}/index.html.erb", "app/views/route/index.html.erb"
+
+# --------------------------------------------------------------------------
+# 2.6: Insert needed tags in application.html.erb
+# --------------------------------------------------------------------------
+insert_into_file "app/views/layouts/application.html.erb",
+  after: "<%= csrf_meta_tags %>\n" do
+    <<~ERB
+      <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
+      <%= javascript_importmap_tags %>
+      <%= vite_client_tag %>
+      <%= vite_javascript_tag 'application' %>
+    ERB
+  end
+
+# --------------------------------------------------------------------------
+# 2.7: shadcn initialization
+# --------------------------------------------------------------------------
+#run "npx shadcn@latest init"
+copy_file "#{__dir__}/components.json", "components.json"
+copy_file "#{__dir__}/utils.ts", "app/javascript/lib/utils.ts"
+remove_file "tailwind.config.json"
+copy_file "#{__dir__}/tailwind.config.js", "tailwind.config.js"
+
+# --------------------------------------------------------------------------
+# 2.8  setup eslint
+copy_file "#{__dir__}/eslint.config.js", "eslint.config.js"
+
+# --------------------------------------------------------------------------
+# 2.9: Done!
+# --------------------------------------------------------------------------
+say "=== Setup Complete ===", :green
+say "You can now run: bin/rails server", :yellow
+say "Visit http://localhost:3000 to see the example turbo-mounted React component.", :yellow

data/lib/tasks/install.rake

@@ -0,0 +1,11 @@
+# desc "Explaining what the task does"
+# task :vite_react do
+#   # Task goes here
+# end
+#
+namespace :vite_react do
+  desc "Install the vite react setup"
+  task :install do
+    system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/vite_react.rb", __dir__)}"
+  end
+end

data/lib/vite_react/railtie.rb

@@ -0,0 +1,28 @@
+require "rails"
+require "rails/railtie"
+require "rails/generators"
+require "rails/generators/rails/scaffold/scaffold_generator"
+
+
+module ViteReact
+  module ScaffoldGenerator
+    extend ActiveSupport::Concern
+    included do
+      hook_for :scaffold, in: nil, default: true, type: :boolean
+    end
+  end
+end
+
+
+
+module ViteReact
+  class Railtie < ::Rails::Railtie
+    rake_tasks do
+      load "tasks/install.rake"
+    end
+    generators do |app|
+      Rails::Generators.configure! app.config.generators
+      Rails::Generators::ScaffoldGenerator.include ViteReact::ScaffoldGenerator
+    end
+  end
+end

data/lib/vite_react/version.rb

@@ -0,0 +1,3 @@
+module ViteReact
+  VERSION = "0.1.5"
+end

data/lib/vite_react.rb

@@ -0,0 +1,5 @@
+require "vite_react/version"
+require "vite_react/railtie"
+
+module ViteReact
+end

metadata

@@ -0,0 +1,153 @@
+--- !ruby/object:Gem::Specification
+name: vite_react
+version: !ruby/object:Gem::Version
+  version: 0.1.5
+platform: ruby
+authors:
+- lsproule
+bindir: bin
+cert_chain: []
+date: 2025-01-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.0.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.0.1
+- !ruby/object:Gem::Dependency
+  name: devise
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: vite_rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: turbo-mount
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: tailwindcss-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: tailwindcss-ruby
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: "Vite react adds a few generators and vite and react\nto your rails project.
+  It also gets it set up to be able \nto use shadcn. \n"
+email:
+- lucas.sproule.42@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- lib/generators/ui/component/component_generator.rb
+- lib/generators/ui/component/templates/component.tsx.erb
+- lib/generators/ui/register/register_generator.rb
+- lib/generators/vite_react/migration/migration.rb
+- lib/generators/vite_react/model_validation/model_validation_generator.rb
+- lib/generators/vite_react/scaffold/scaffold_generator.rb
+- lib/install/App.tsx
+- lib/install/application.css
+- lib/install/components.json
+- lib/install/eslint.config.js
+- lib/install/index.html.erb
+- lib/install/tailwind.config.js
+- lib/install/tsconfig.app.json
+- lib/install/tsconfig.json
+- lib/install/tsconfig.node.json
+- lib/install/utils.ts
+- lib/install/vite.config.js
+- lib/install/vite_react.rb
+- lib/tasks/install.rake
+- lib/vite_react.rb
+- lib/vite_react/railtie.rb
+- lib/vite_react/version.rb
+homepage: https://docs.lucassproule.com
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://docs.lucassproule.com
+  source_code_uri: https://github.com/lsproule/vite_react
+  changelog_uri: https://github.com/lsproule/vite_react
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.2
+specification_version: 4
+summary: Vite react adds vite and react to your project
+test_files: []