islandjs-rails 0.6.0 → 1.0.0

data/lib/islandjs_rails/core_methods.rb

@@ -3,29 +3,37 @@ module IslandjsRails
     # Additional core methods (part 2)
     
     def build_bundle!
-      puts "🔨 Building IslandJS webpack bundle..."
+      puts "🔨 Building IslandJS bundle with Vite..."
       
       unless system('which yarn > /dev/null 2>&1')
         puts "❌ yarn not found, cannot build bundle"
         return false
       end
       
-      unless system('yarn list webpack-cli > /dev/null 2>&1')
-        puts "⚠️  webpack-cli not found, installing..."
-        system('yarn add --dev webpack-cli@^5.1.4')
+      # Check if vite.config.islands.ts exists
+      unless File.exist?(Rails.root.join('vite.config.islands.ts'))
+        puts "⚠️  vite.config.islands.ts not found. Run: rails islandjs:init"
+        return false
       end
       
-      if ENV['NODE_ENV'] == 'production' || ENV['RAILS_ENV'] == 'production'
-        success = system('yarn build')
-      else
-        success = system('yarn build > /dev/null 2>&1')
+      # Determine which build script to use based on package.json
+      package_json_path = Rails.root.join('package.json')
+      build_cmd = 'yarn build'
+      
+      if File.exist?(package_json_path)
+        package_json = JSON.parse(File.read(package_json_path))
+        scripts = package_json['scripts'] || {}
+        build_cmd = 'yarn build:islands' if scripts.key?('build:islands')
       end
       
+      # Run Vite build
+      success = system(build_cmd)
+      
       if success
         puts "✅ Bundle built successfully"
         return true
       else
-        puts "❌ Build failed. Check your webpack configuration."
+        puts "❌ Build failed. Check your vite.config.islands.ts"
         return false
       end
     end
@@ -269,27 +277,27 @@ module IslandjsRails
     end
 
     def install_essential_dependencies!
-      puts "📦 Installing essential webpack dependencies..."
-      puts "  Installing: #{ESSENTIAL_DEPENDENCIES.join(', ')}"
-      
-      missing_deps = ESSENTIAL_DEPENDENCIES.select do |dep|
-        package_name = dep.split('@').first
-        !package_installed?(package_name)
-      end
+      puts "📦 Installing essential Vite dependencies..."
       
-      if missing_deps.empty?
-        puts "✓ All essential dependencies already installed"
-        return
-      end
+      deps_to_install = []
       
-      success = system("yarn add --dev #{missing_deps.join(' ')}")
+      # Check for Vite and React plugin
+      deps_to_install << 'vite@^5.4.19' unless package_installed?('vite')
+      deps_to_install << '@vitejs/plugin-react@^5.0.0' unless package_installed?('@vitejs/plugin-react')
       
-      unless success
-        puts "❌ Failed to install dependencies"
-        exit 1
+      if deps_to_install.any?
+        puts "  Installing: #{deps_to_install.join(', ')}"
+        success = system("yarn add --dev #{deps_to_install.join(' ')}")
+        
+        unless success
+          puts "❌ Failed to install dependencies"
+          exit 1
+        end
+      else
+        puts "  ✓ All essential dependencies already installed"
       end
       
-      puts "✓ Installed essential webpack dependencies"
+      puts "✓ Installed essential Vite dependencies"
     end
 
     def create_scaffolded_structure!
@@ -561,9 +569,7 @@ module IslandjsRails
       puts "  ✓ Removed from package.json: #{package_name}"
     end
 
-    def generate_webpack_config!
-      copy_template_file('webpack.config.js', configuration.webpack_config_path)
-    end
+    # No longer needed - vite.config.islands.ts created by ViteInstaller
 
     def url_accessible?(url, limit = 5, use_ssl_verification = true)
       require 'openssl'
@@ -616,59 +622,49 @@ module IslandjsRails
       detect_global_name(package_name)
     end
     
-    def reset_webpack_externals
-      webpack_config_path = configuration.webpack_config_path
-      return unless File.exist?(webpack_config_path)
-      
-      content = File.read(webpack_config_path)
-      
-      externals_block = <<~JS
-      externals: {
-        // IslandjsRails managed externals - do not edit manually
-      },
-      JS
-      
-      updated_content = content.gsub(
-        /externals:\s*\{[^}]*\}(?:,)?/m,
-        externals_block.chomp
-      )
-      
-      File.write(webpack_config_path, updated_content)
-      puts "  ✓ Reset webpack externals"
-    end
+    # No longer needed - Vite externals are in vite.config.islands.ts
 
-    def update_webpack_externals(package_name = nil, global_name = nil)
-      webpack_config_path = configuration.webpack_config_path
-      return unless File.exist?(webpack_config_path)
+    def update_vite_externals(package_name = nil, global_name = nil)
+      vite_config_path = Rails.root.join('vite.config.islands.ts')
+      return unless File.exist?(vite_config_path)
       
-      content = File.read(webpack_config_path)
+      content = File.read(vite_config_path)
       
       externals = {}
+      globals = {}
       
-      # Get installed packages from vendor manifest instead of partials
+      # Get installed packages from vendor manifest
       vendor_manager = IslandjsRails.vendor_manager
       manifest = vendor_manager.send(:read_manifest)
       
       manifest['libs'].each do |lib|
         pkg = lib['name']
-        externals[pkg] = get_global_name_for_package(pkg)
+        global = get_global_name_for_package(pkg)
+        externals[pkg] = true
+        globals[pkg] = global
       end
       
-      externals_lines = externals.map { |pkg, global| "    \"#{pkg}\": \"#{global}\"" }
-      externals_block = <<~JS
-      externals: {
-        // IslandjsRails managed externals - do not edit manually
-      #{externals_lines.join(",\n")}
-      },
-      JS
+      # Build external array for Vite
+      external_array = externals.keys.map { |pkg| "'#{pkg}'" }.join(', ')
+      
+      # Build globals object for Vite
+      globals_lines = globals.map { |pkg, global| "          '#{pkg}': '#{global}'" }
+      globals_block = globals_lines.join(",\n")
       
+      # Update external array
       updated_content = content.gsub(
-        /externals:\s*\{[^}]*\}(?:,)?/m,
-        externals_block.chomp
+        /external:\s*\[[^\]]*\]/m,
+        "external: [#{external_array}]"
+      )
+      
+      # Update globals object
+      updated_content = updated_content.gsub(
+        /globals:\s*\{[^}]*\}/m,
+        "globals: {\n#{globals_block}\n        }"
       )
       
-      File.write(webpack_config_path, updated_content)
-      puts "  ✓ Updated webpack externals"
+      File.write(vite_config_path, updated_content)
+      puts "  ✓ Updated Vite externals in vite.config.islands.ts"
     end
   end
 end

data/lib/islandjs_rails/rails_helpers.rb

@@ -25,32 +25,54 @@ module IslandjsRails
     end
 
     # Render the main IslandJS bundle script tag
+    # Reads from Vite-generated manifest at public/islands/.vite/manifest.json
+    # 
+    # IMPORTANT: Manifest is read on EVERY request (no caching) to ensure
+    # content-hashed filenames are always fresh after rebuilds.
+    # This enables hot-reload behavior: rebuild Islands → hard refresh → new bundle loads
     def island_bundle_script(**attributes)
-      manifest_path = Rails.root.join('public', 'islands_manifest.json')
-      bundle_path = '/islands_bundle.js'
-
+      # Vite manifest path (generated by vite.config.islands.ts)
+      manifest_path = Rails.root.join('public/islands/.vite/manifest.json')
+      
       # Get formatted HTML attributes with defaults (including auto-nonce and defer)
       html_attributes = script_html_attributes(defer: true, **attributes)
 
       unless File.exist?(manifest_path)
-        # Fallback to direct bundle path when no manifest
-        return html_safe_string("<script src=\"#{bundle_path}\"#{html_attributes}></script>")
+        # Development hint
+        if Rails.env.development?
+          return html_safe_string("<!-- Islands bundle not built. Run: yarn build:islands -->")
+        else
+          return html_safe_string("<!-- Islands bundle missing -->")
+        end
       end
 
       begin
+        # ALWAYS read manifest fresh (no caching) to pick up new content hashes
+        # This is critical for development workflow and production cache-busting
         manifest = JSON.parse(File.read(manifest_path))
-        # Look for islands_bundle.js in manifest
-        bundle_file = manifest['islands_bundle.js']
+        
+        # Look for islands entrypoint in Vite manifest
+        # Vite format: { "app/javascript/entrypoints/islands.js": { "file": "islands_bundle.abc123.js" } }
+        entry = manifest['app/javascript/entrypoints/islands.js']
 
-        if bundle_file
-          html_safe_string("<script src=\"#{bundle_file}\"#{html_attributes}></script>")
-        else
-          # Fallback to direct bundle path
+        if entry && entry['file']
+          # Bundle path includes content hash for automatic cache-busting
+          bundle_path = "/islands/#{entry['file']}"
           html_safe_string("<script src=\"#{bundle_path}\"#{html_attributes}></script>")
+        else
+          # Manifest exists but entry not found
+          if Rails.env.development?
+            html_safe_string("<!-- Islands entry not found in manifest. Available keys: #{manifest.keys.join(', ')} -->")
+          else
+            html_safe_string("<!-- Islands entry not found in manifest -->")
+          end
+        end
+      rescue JSON::ParserError => e
+        if Rails.env.development?
+          html_safe_string("<!-- Islands manifest parse error: #{e.message} -->")
+        else
+          html_safe_string("<!-- Islands manifest parse error -->")
         end
-      rescue JSON::ParserError
-        # Fallback to direct bundle path on manifest parse error
-        html_safe_string("<script src=\"#{bundle_path}\"#{html_attributes}></script>")
       end
     end
 
@@ -176,7 +198,7 @@ module IslandjsRails
       debug_info = {
         bundle_path: find_bundle_path,
         partials_count: Dir.glob(File.join(IslandjsRails.configuration.partials_dir, '*.html.erb')).count,
-        webpack_config_exists: File.exist?(IslandjsRails.configuration.webpack_config_path),
+        vite_islands_config_exists: File.exist?(Rails.root.join('vite.config.islands.ts')),
         package_json_exists: File.exist?(IslandjsRails.configuration.package_json_path)
       }
       
@@ -185,7 +207,7 @@ module IslandjsRails
           <strong>🏝️ IslandJS Debug Info:</strong><br>
           Bundle Path: #{debug_info[:bundle_path] || 'Not found'}<br>
           Partials: #{debug_info[:partials_count]} found<br>
-          Webpack Config: #{debug_info[:webpack_config_exists] ? '✓' : '✗'}<br>
+          Vite Islands Config: #{debug_info[:vite_islands_config_exists] ? '✓' : '✗'}<br>
           Package.json: #{debug_info[:package_json_exists] ? '✓' : '✗'}
         </div>
       HTML

data/lib/islandjs_rails/railtie.rb

@@ -33,9 +33,9 @@ module IslandjsRails
         return
       end
 
-      # Check if webpack config exists
-      unless File.exist?(Rails.root.join('webpack.config.js'))
-        Rails.logger.warn "IslandJS: webpack.config.js not found. Run 'rails islandjs:init' to set up."
+      # Check if Vite Islands config exists
+      unless File.exist?(Rails.root.join('vite.config.islands.ts'))
+        Rails.logger.warn "IslandJS: vite.config.islands.ts not found. Run 'rails islandjs:init' to set up."
         return
       end
 
@@ -45,14 +45,14 @@ module IslandjsRails
         return
       end
 
-      # Check if essential webpack dependencies are installed
-      essential_deps = ['webpack', 'webpack-cli', '@babel/core']
+      # Check if essential Vite dependencies are installed
+      essential_deps = ['vite', '@vitejs/plugin-react']
       missing_deps = essential_deps.select do |dep|
         !system("yarn list #{dep} > /dev/null 2>&1")
       end
 
       unless missing_deps.empty?
-        Rails.logger.warn "IslandJS: Missing dependencies: #{missing_deps.join(', ')}. Run 'rails islandjs:init' to install."
+        Rails.logger.warn "IslandJS: Missing dependencies: #{missing_deps.join(', ')}. Run 'yarn install'."
       end
     end
   end

data/lib/islandjs_rails/tasks.rb

@@ -57,7 +57,7 @@ namespace :islandjs do
     IslandjsRails.status!
   end
 
-  desc "Clean all island partials and reset webpack externals"
+  desc "Clean all island partials and reset Vite externals"
   task :clean => :environment do
     IslandjsRails.clean!
   end
@@ -69,7 +69,7 @@ namespace :islandjs do
     puts "=" * 40
     puts "Package.json path: #{config.package_json_path}"
     puts "Partials directory: #{config.partials_dir}"
-    puts "Webpack config path: #{config.webpack_config_path}"
+    puts "Vite Islands config: vite.config.islands.ts"
     puts "Supported CDNs: #{config.supported_cdns.join(', ')}"
     puts "Built-in global name overrides: #{IslandjsRails::BUILT_IN_GLOBAL_NAME_OVERRIDES.size} available"
   end

data/lib/islandjs_rails/vendor_manager.rb

@@ -237,9 +237,12 @@ module IslandjsRails
         <% # Load each library separately for better caching %>
       ERB
       
-      manifest['libs'].each do |lib|
+      # CRITICAL: Order libraries correctly (react before react-dom)
+      ordered_libs = order_libraries(manifest['libs'])
+      
+      ordered_libs.each do |lib|
         content += <<~ERB
-          <script src="/islands/vendor/#{lib['file']}" data-turbo-track="reload"></script>
+          <script src="/vendor/islands/#{lib['file']}" data-turbo-track="reload"></script>
         ERB
       end
       
@@ -256,7 +259,7 @@ module IslandjsRails
         <%# IslandJS Rails Vendor UMD Scripts (Combined Mode) %>
         <%# Generated automatically - do not edit manually %>
         <%# Combined bundle: #{combined_info['size_kb']}KB %>
-        <script src="/islands/vendor/#{combined_info['file']}" data-turbo-track="reload"></script>
+        <script src="/vendor/islands/#{combined_info['file']}" data-turbo-track="reload"></script>
       ERB
       
       write_vendor_partial(content)

data/lib/islandjs_rails/version.rb

@@ -1,3 +1,3 @@
 module IslandjsRails
-  VERSION = "0.6.0"
+  VERSION = "1.0.0"
 end

data/lib/islandjs_rails/vite_installer.rb

@@ -0,0 +1,286 @@
+# frozen_string_literal: true
+
+require 'fileutils'
+require 'json'
+require_relative 'vite_integration'
+
+module IslandjsRails
+  # Idempotent installer for Islands + Vite integration
+  class ViteInstaller
+    attr_reader :vite_integration, :root_path
+    
+    def initialize(root_path = Rails.root)
+      @root_path = Pathname.new(root_path)
+      @vite_integration = ViteIntegration.new(root_path)
+    end
+    
+    # Main installation method - fully idempotent
+    def install!
+      puts "🏝️  Initializing IslandJS Rails with Vite..."
+      
+      # Check current state
+      check_prerequisites!
+      
+      # Install/configure based on current state
+      if vite_integration.vite_installed?
+        puts "✓ Vite detected, configuring Islands alongside existing setup"
+        configure_islands_alongside_vite!
+      else
+        puts "✓ Installing Vite for Islands"
+        install_vite_from_scratch!
+      end
+      
+      # Always run these (idempotent)
+      create_islands_structure!
+      create_vendor_system!
+      inject_islands_helper!
+      
+      puts "\n🎉 IslandJS Rails initialized successfully!"
+      print_next_steps
+    end
+    
+    private
+    
+    def check_prerequisites!
+      unless command_exists?('node')
+        raise Error, "Node.js not found. Please install Node.js 16+ first."
+      end
+      
+      unless command_exists?('yarn')
+        puts "⚠️  Yarn not found, installing..."
+        system('npm install -g yarn')
+      end
+    end
+    
+    def configure_islands_alongside_vite!
+      # Vite already exists, just add Islands config
+      create_islands_vite_config! unless vite_integration.islands_vite_config_exists?
+      create_islands_entrypoint!
+      update_package_json_for_islands!
+      install_vite_dependencies!
+    end
+    
+    def install_vite_from_scratch!
+      # No Vite yet, install everything
+      create_base_vite_config!
+      create_islands_vite_config!
+      create_islands_entrypoint!
+      setup_package_json!
+      install_vite_dependencies!
+    end
+    
+    def create_base_vite_config!
+      return if vite_integration.vite_config_exists?
+      
+      puts "✓ Creating base vite.config.ts"
+      
+      template = <<~TYPESCRIPT
+        import { defineConfig } from 'vite'
+        import react from '@vitejs/plugin-react'
+        import path from 'path'
+        
+        export default defineConfig({
+          plugins: [
+            react(),
+          ],
+          resolve: {
+            alias: {
+              '@': path.resolve(__dirname, 'app/javascript')
+            },
+          },
+        })
+      TYPESCRIPT
+      
+      vite_integration.vite_config_path.write(template)
+    end
+    
+    def create_islands_vite_config!
+      return if vite_integration.islands_vite_config_exists?
+      
+      puts "✓ Creating vite.config.islands.ts"
+      
+      template_path = File.expand_path('../templates/vite.config.islands.ts', __dir__)
+      FileUtils.cp(template_path, vite_integration.islands_vite_config_path)
+    end
+    
+    def create_islands_entrypoint!
+      entrypoint_path = root_path.join('app/javascript/entrypoints/islands.js')
+      return if entrypoint_path.exist?
+      
+      puts "✓ Creating Islands entrypoint"
+      
+      FileUtils.mkdir_p(entrypoint_path.dirname)
+      template_path = File.expand_path('../templates/app/javascript/entrypoints/islands.js', __dir__)
+      FileUtils.cp(template_path, entrypoint_path)
+    end
+    
+    def setup_package_json!
+      if vite_integration.package_json_exists?
+        update_package_json_for_islands!
+      else
+        create_package_json!
+      end
+    end
+    
+    def create_package_json!
+      puts "✓ Creating package.json"
+      
+      package_json = {
+        "private" => true,
+        "type" => "module",
+        "scripts" => {
+          "build:islands" => "vite build --config vite.config.islands.ts",
+          "watch:islands" => "vite build --config vite.config.islands.ts --watch"
+        },
+        "dependencies" => {},
+        "devDependencies" => {}
+      }
+      
+      vite_integration.write_package_json(package_json)
+    end
+    
+    def update_package_json_for_islands!
+      puts "✓ Updating package.json scripts"
+      vite_integration.update_package_json_scripts!
+    end
+    
+    def install_vite_dependencies!
+      puts "📦 Installing Vite dependencies..."
+      
+      # Check what's already installed
+      package_json = vite_integration.read_package_json
+      dev_deps = package_json['devDependencies'] || {}
+      
+      deps_to_install = []
+      
+      # Required Vite dependencies
+      deps_to_install << 'vite@^5.4.19' unless dev_deps.key?('vite')
+      deps_to_install << '@vitejs/plugin-react@^5.0.0' unless dev_deps.key?('@vitejs/plugin-react')
+      
+      if deps_to_install.any?
+        puts "  Installing: #{deps_to_install.join(', ')}"
+        system("yarn add --dev #{deps_to_install.join(' ')}")
+      else
+        puts "  ✓ Vite dependencies already installed"
+      end
+    end
+    
+    def create_islands_structure!
+      islands_dir = root_path.join('app/javascript/islands')
+      
+      if islands_dir.exist?
+        puts "✓ Islands structure already exists"
+        return
+      end
+      
+      puts "✓ Creating Islands directory structure"
+      
+      # Create directories
+      FileUtils.mkdir_p(islands_dir.join('components'))
+      FileUtils.mkdir_p(islands_dir.join('utils'))
+      
+      # Copy HelloWorld component template
+      hello_world_path = islands_dir.join('components/HelloWorld.jsx')
+      unless hello_world_path.exist?
+        template_path = File.expand_path('../templates/app/javascript/islands/components/HelloWorld.jsx', __dir__)
+        FileUtils.cp(template_path, hello_world_path) if File.exist?(template_path)
+      end
+      
+      # Copy Turbo utilities
+      turbo_utils_path = islands_dir.join('utils/turbo.js')
+      unless turbo_utils_path.exist?
+        template_path = File.expand_path('../templates/app/javascript/islands/utils/turbo.js', __dir__)
+        FileUtils.cp(template_path, turbo_utils_path) if File.exist?(template_path)
+      end
+    end
+    
+    def create_vendor_system!
+      vendor_dir = root_path.join('public/vendor/islands')
+      
+      if vendor_dir.exist?
+        puts "✓ Vendor system already exists"
+        return
+      end
+      
+      puts "✓ Creating vendor directory"
+      FileUtils.mkdir_p(vendor_dir)
+      
+      # Create vendor UMD partial
+      create_vendor_partial!
+    end
+    
+    def create_vendor_partial!
+      partials_dir = root_path.join('app/views/shared/islands')
+      FileUtils.mkdir_p(partials_dir)
+      
+      partial_path = partials_dir.join('_vendor_umd.html.erb')
+      return if partial_path.exist?
+      
+      puts "✓ Creating vendor UMD partial"
+      
+      # Create empty partial - will be populated when packages are installed
+      partial_content = <<~ERB
+        <%# IslandJS Rails - UMD Vendor Scripts %>
+        <%# This partial is auto-generated. Run: rails islandjs:install[react] %>
+      ERB
+      
+      partial_path.write(partial_content)
+    end
+    
+    def inject_islands_helper!
+      layout_path = vite_integration.islands_layout_path
+      
+      unless layout_path.exist?
+        puts "⚠️  application.html.erb not found, skipping helper injection"
+        return
+      end
+      
+      if vite_integration.layout_has_islands_helper?
+        puts "✓ Islands helper already in layout"
+        return
+      end
+      
+      puts "✓ Adding <%= islands %> to application.html.erb"
+      
+      content = layout_path.read
+      
+      # Try to inject before </head>
+      if content.include?('</head>')
+        updated = content.sub('</head>', "    <%= islands %>\n  </head>")
+        layout_path.write(updated)
+      else
+        puts "  ⚠️  Could not find </head> tag, please add <%= islands %> manually"
+      end
+    end
+    
+    def print_next_steps
+      puts "\n📋 Next steps:"
+      puts "1. Install React UMD libraries:"
+      puts "   rails \"islandjs:install[react,19.1.0]\""
+      puts "   rails \"islandjs:install[react-dom,19.1.0]\""
+      puts ""
+      puts "2. Build Islands bundle:"
+      puts "   yarn build:islands"
+      puts ""
+      puts "3. Use in ERB templates:"
+      puts "   <%= react_component('HelloWorld', { message: 'Hello!' }) %>"
+      puts ""
+      
+      if vite_integration.vite_installed?
+        puts "💡 Existing Vite setup detected! You now have:"
+        puts "   - Islands dev: yarn watch:islands"
+        puts "   - Build both: yarn build"
+      else
+        puts "💡 Start development:"
+        puts "   yarn watch:islands"
+      end
+      
+      puts ""
+      puts "🚀 Ready to build Islands!"
+    end
+    
+    def command_exists?(command)
+      system("which #{command} > /dev/null 2>&1")
+    end
+  end
+end