islandjs-rails 0.7.0 → 1.0.0

data/lib/islandjs_rails/vite_integration.rb

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+module IslandjsRails
+  # Handles Vite integration for Islands architecture
+  class ViteIntegration
+    attr_reader :root_path
+    
+    def initialize(root_path = Rails.root)
+      @root_path = Pathname.new(root_path)
+    end
+    
+    # Check if Vite is already installed in the project
+    def vite_installed?
+      vite_config_exists? || vite_json_exists?
+    end
+    
+    # Check if Inertia is installed
+    def inertia_installed?
+      inertia_gem_installed? || inertia_layout_exists?
+    end
+    
+    # Check if Islands is already configured
+    def islands_configured?
+      islands_vite_config_exists? && islands_structure_exists?
+    end
+    
+    # Get the path to the Islands Vite config
+    def islands_vite_config_path
+      root_path.join('vite.config.islands.ts')
+    end
+    
+    # Get the path to the Islands manifest
+    def islands_manifest_path
+      root_path.join('public/islands/.vite/manifest.json')
+    end
+    
+    # Get the path to the main Vite config
+    def vite_config_path
+      root_path.join('vite.config.ts')
+    end
+    
+    # Get the path to vite.json
+    def vite_json_path
+      root_path.join('vite.json')
+    end
+    
+    # Check if Islands Vite config exists
+    def islands_vite_config_exists?
+      islands_vite_config_path.exist?
+    end
+    
+    # Check if Islands structure exists
+    def islands_structure_exists?
+      root_path.join('app/javascript/islands').directory?
+    end
+    
+    # Check if vite.config.ts exists
+    def vite_config_exists?
+      vite_config_path.exist?
+    end
+    
+    # Check if vite.json exists
+    def vite_json_exists?
+      vite_json_path.exist?
+    end
+    
+    # Check if inertia_rails gem is installed
+    def inertia_gem_installed?
+      Gem.loaded_specs.key?('inertia_rails')
+    end
+    
+    # Check if Inertia layout exists
+    def inertia_layout_exists?
+      root_path.join('app/views/layouts/inertia.html.erb').exist?
+    end
+    
+    # Read Islands manifest
+    def read_islands_manifest
+      return {} unless islands_manifest_path.exist?
+      
+      JSON.parse(islands_manifest_path.read)
+    rescue JSON::ParserError
+      {}
+    end
+    
+    # Get Islands bundle path from manifest
+    def islands_bundle_path
+      manifest = read_islands_manifest
+      entry = manifest['app/javascript/entrypoints/islands.js']
+      
+      return nil unless entry
+      
+      "/islands/#{entry['file']}"
+    end
+    
+    # Check if package.json exists
+    def package_json_exists?
+      root_path.join('package.json').exist?
+    end
+    
+    # Read package.json
+    def read_package_json
+      return {} unless package_json_exists?
+      
+      JSON.parse(root_path.join('package.json').read)
+    rescue JSON::ParserError
+      {}
+    end
+    
+    # Write package.json
+    def write_package_json(data)
+      root_path.join('package.json').write(JSON.pretty_generate(data) + "\n")
+    end
+    
+    # Update package.json scripts for Islands
+    def update_package_json_scripts!
+      package_json = read_package_json
+      scripts = package_json['scripts'] || {}
+      
+      # Always use namespaced scripts for consistency
+      scripts['build:islands'] = 'vite build --config vite.config.islands.ts'
+      scripts['watch:islands'] = 'vite build --config vite.config.islands.ts --watch'
+      
+      # If there's an existing Vite setup (like Inertia), update main build script
+      if scripts['build'] && scripts['build'].include?('vite') && !scripts['build'].include?('build:islands')
+        scripts['build'] = "#{scripts['build']} && yarn build:islands"
+      end
+      
+      package_json['scripts'] = scripts
+      write_package_json(package_json)
+    end
+    
+    # Detect which layout to use for Islands
+    def islands_layout_path
+      # Always use application.html.erb for Islands (ERB pages)
+      # Never touch inertia.html.erb (that's for SPA)
+      root_path.join('app/views/layouts/application.html.erb')
+    end
+    
+    # Check if Islands helper is already in layout
+    def layout_has_islands_helper?
+      return false unless islands_layout_path.exist?
+      
+      content = islands_layout_path.read
+      content.include?('<%= islands %>') || content.include?('islands %>')
+    end
+  end
+end

data/lib/islandjs_rails.rb

@@ -1,5 +1,6 @@
 require_relative "islandjs_rails/version"
 require_relative "islandjs_rails/configuration"
+require_relative "islandjs_rails/vite_integration"
 require_relative "islandjs_rails/core"
 require_relative "islandjs_rails/vendor_manager"
 require_relative "islandjs_rails/cli"

data/lib/templates/app/javascript/entrypoints/islands.js

@@ -0,0 +1,20 @@
+// IslandJS Rails - Islands Entrypoint
+// This file exports all your Island components to window.islandjsRails
+// Components exported here can be used in ERB templates via <%= react_component('ComponentName') %>
+
+// Import your island components
+import HelloWorld from '../islands/components/HelloWorld.jsx'
+
+// Export to global namespace for ERB template access
+window.islandjsRails = {
+  HelloWorld,
+  // Add more components here as you create them:
+  // ChatWidget,
+  // UserProfile,
+  // etc.
+}
+
+// Optional: Log available components in development
+if (import.meta.env.DEV) {
+  console.log('🏝️ IslandJS components loaded:', Object.keys(window.islandjsRails))
+}

data/lib/templates/app/views/islandjs_demo/index.html.erb

@@ -19,7 +19,7 @@
         </li>
         <li class="flex items-start">
           <span class="text-green-500 mr-2">✓</span>
-          Zero webpack complexity - UMD libraries from vendor files
+          Simplified build process - UMD libraries from vendor files
         </li>
         <li class="flex items-start">
           <span class="text-green-500 mr-2">✓</span>
@@ -75,7 +75,7 @@
         <ul class="space-y-1">
           <li>• React & ReactDOM served from <code class="bg-gray-200 px-1 rounded">/islands/vendor/</code></li>
           <li>• Browser caching for optimal performance</li>
-          <li>• No webpack bundling of external libraries</li>
+          <li>• No bundling of external libraries (loaded as UMD)</li>
         </ul>
       </div>
       <div>

data/lib/templates/package.json

@@ -3,19 +3,12 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "NODE_ENV=production webpack",
-    "build:dev": "NODE_ENV=production webpack",
-    "watch": "NODE_ENV=development webpack --watch"
+    "build:islands": "vite build --config vite.config.islands.ts",
+    "watch:islands": "vite build --config vite.config.islands.ts --watch"
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.23.0",
-    "@babel/preset-react": "^7.23.0",
-    "babel-loader": "^9.1.3",
-    "terser-webpack-plugin": "^5.3.14",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4",
-    "webpack-manifest-plugin": "^5.0.1"
+    "vite": "^5.4.19",
+    "@vitejs/plugin-react": "^5.0.0"
   }
 }

data/lib/templates/script/build-vite-atomic.js

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+/**
+ * IslandJS Rails - Atomic Vite Build Script
+ * 
+ * Builds both Inertia (if present) and Islands bundles atomically.
+ * If either build fails, the entire operation fails.
+ * 
+ * Usage: node script/build-vite-atomic.js
+ * Or via package.json: yarn build
+ */
+
+import { execSync } from 'child_process'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.join(__dirname, '..')
+
+// Check if a file exists
+function fileExists(filepath) {
+  try {
+    return fs.existsSync(path.join(rootDir, filepath))
+  } catch {
+    return false
+  }
+}
+
+// Execute command and handle errors
+function exec(command, description) {
+  console.log(`\n📦 ${description}...`)
+  try {
+    execSync(command, {
+      cwd: rootDir,
+      stdio: 'inherit',
+      env: process.env
+    })
+    console.log(`✅ ${description} succeeded`)
+    return true
+  } catch (error) {
+    console.error(`❌ ${description} failed`)
+    throw error
+  }
+}
+
+async function buildAtomic() {
+  console.log('🏗️  Building Vite assets atomically...\n')
+  
+  const hasInertia = fileExists('vite.config.ts')
+  const hasIslands = fileExists('vite.config.islands.ts')
+  
+  if (!hasInertia && !hasIslands) {
+    console.error('❌ No Vite configs found!')
+    console.error('   Expected: vite.config.ts or vite.config.islands.ts')
+    process.exit(1)
+  }
+  
+  try {
+    // Build Inertia if config exists
+    if (hasInertia) {
+      exec('vite build --emptyOutDir', 'Building Inertia assets')
+    }
+    
+    // Build Islands if config exists
+    if (hasIslands) {
+      exec('vite build --config vite.config.islands.ts', 'Building Islands bundle')
+    }
+    
+    console.log('\n🎉 All builds succeeded!')
+    console.log('\n📦 Built assets:')
+    
+    if (hasInertia) {
+      console.log('   ✓ Inertia: public/vite-dev/')
+    }
+    if (hasIslands) {
+      console.log('   ✓ Islands: public/islands/')
+    }
+    
+    process.exit(0)
+    
+  } catch (error) {
+    console.error('\n❌ Build failed!')
+    console.error('   No changes were deployed (atomic guarantee)')
+    process.exit(1)
+  }
+}
+
+buildAtomic()

data/lib/templates/vite.config.islands.ts

@@ -0,0 +1,67 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import fs from 'fs'
+
+// IslandJS Rails - Islands Architecture Build Configuration
+// This config builds React components as IIFE bundles for use in ERB templates
+// Separate from your main Vite build (Inertia, etc.)
+
+export default defineConfig({
+  plugins: [react()],
+  
+  // CRITICAL: Disable copying public/ directory into build output
+  // Prevents Vite from copying public/vendor/islands → public/islands/vendor/islands
+  // We want vendor files to stay ONLY in public/vendor/islands (single source of truth)
+  publicDir: false,
+  
+  // Define global constants for browser (replace Node.js process.env)
+  // CRITICAL: These must be string replacements, not JSON objects
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
+  },
+  
+  build: {
+    // Library mode for IIFE output
+    lib: {
+      entry: path.resolve(__dirname, 'app/javascript/entrypoints/islands.js'),
+      name: 'islandjsRails',
+      formats: ['iife'],
+      // Don't specify fileName here - let rollupOptions handle it
+      fileName: 'islands_bundle'
+    },
+    
+    // Externalize React - loaded via UMD from CDN
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM'
+        },
+        // Use [hash] for content-based fingerprinting (auto cache-busting)
+        // This ensures every build change gets a new filename
+        entryFileNames: 'islands_bundle.[hash].js',
+        chunkFileNames: 'chunks/[name].[hash].js',
+        assetFileNames: 'assets/[name].[hash][extname]'
+      }
+    },
+    
+    // Output to public/islands directory
+    outDir: 'public/islands',
+    // Clean output directory (vendor files are in public/vendor/islands, separate)
+    emptyOutDir: true,
+    
+    // Generate manifest for Rails helpers (critical for fingerprinting!)
+    manifest: true,
+    
+    // Source maps for development
+    sourcemap: process.env.NODE_ENV !== 'production'
+  },
+  
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'app/javascript')
+    }
+  }
+})

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: islandjs-rails
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Eric Arnold
@@ -114,7 +114,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0.22'
 description: IslandJS Rails enables React and other JavaScript islands in Rails apps
-  with zero webpack configuration. Load UMD libraries from CDNs, integrate with ERB
+  with zero build configuration. Load UMD libraries from CDNs, integrate with ERB
   partials, and render components with Turbo-compatible lifecycle management.
 email:
 - ericarnold00+praxisemergent@gmail.com
@@ -127,7 +127,6 @@ files:
 - LICENSE.md
 - README.md
 - exe/islandjs-rails
-- islandjs-rails.gemspec
 - lib/islandjs-rails.rb
 - lib/islandjs_rails.rb
 - lib/islandjs_rails/cli.rb
@@ -139,18 +138,19 @@ files:
 - lib/islandjs_rails/tasks.rb
 - lib/islandjs_rails/vendor_manager.rb
 - lib/islandjs_rails/version.rb
+- lib/islandjs_rails/vite_installer.rb
+- lib/islandjs_rails/vite_integration.rb
 - lib/templates/app/controllers/islandjs_demo_controller.rb
+- lib/templates/app/javascript/entrypoints/islands.js
 - lib/templates/app/javascript/islands/components/.gitkeep
 - lib/templates/app/javascript/islands/components/HelloWorld.jsx
-- lib/templates/app/javascript/islands/index.js
 - lib/templates/app/javascript/islands/utils/turbo.js
 - lib/templates/app/views/islandjs_demo/index.html.erb
 - lib/templates/app/views/islandjs_demo/react.html.erb
 - lib/templates/config/demo_routes.rb
 - lib/templates/package.json
-- lib/templates/webpack.config.js
-- package.json
-- yarn.lock
+- lib/templates/script/build-vite-atomic.js
+- lib/templates/vite.config.islands.ts
 homepage: https://github.com/praxis-emergent/islandjs-rails
 licenses:
 - MIT
@@ -160,7 +160,8 @@ metadata:
   changelog_uri: https://github.com/praxis-emergent/islandjs-rails/blob/main/CHANGELOG.md
   documentation_uri: https://github.com/praxis-emergent/islandjs-rails/blob/main/README.md
 post_install_message: "\n\U0001F3DD️ IslandJS Rails installed successfully!\n\n\U0001F4CB
-  Next step: Initialize IslandJS in your Rails app\n\n    rails islandjs:init\n\n"
+  Next step: Initialize IslandJS in your Rails app\n\n    rails islandjs:init\n\nThis
+  will set up Vite for Islands architecture alongside your existing setup.\n\n"
 rdoc_options: []
 require_paths:
 - lib

data/islandjs-rails.gemspec

@@ -1,55 +0,0 @@
-require_relative "lib/islandjs_rails/version"
-
-Gem::Specification.new do |spec|
-  spec.name          = "islandjs-rails"
-  spec.version       = IslandjsRails::VERSION
-  spec.authors       = ["Eric Arnold"]
-  spec.email         = ["ericarnold00+praxisemergent@gmail.com"]
-
-  spec.summary       = "Simple, modern JavaScript islands for Rails"
-  spec.description   = "IslandJS Rails enables React and other JavaScript islands in Rails apps with zero webpack configuration. Load UMD libraries from CDNs, integrate with ERB partials, and render components with Turbo-compatible lifecycle management."
-  spec.homepage      = "https://github.com/praxis-emergent/islandjs-rails"
-  spec.license       = "MIT"
-  spec.required_ruby_version = ">= 3.0.0"
-
-  spec.metadata["homepage_uri"] = spec.homepage
-  spec.metadata["source_code_uri"] = "https://github.com/praxis-emergent/islandjs-rails"
-  spec.metadata["changelog_uri"] = "https://github.com/praxis-emergent/islandjs-rails/blob/main/CHANGELOG.md"
-  spec.metadata["documentation_uri"] = "https://github.com/praxis-emergent/islandjs-rails/blob/main/README.md"
-
-  # Specify which files should be added to the gem when it is released.
-  spec.files = Dir.chdir(__dir__) do
-    `git ls-files -z`.split("\x0").reject do |f|
-      (File.expand_path(f) == __FILE__) ||
-        f.start_with?(*%w[bin/ test/ spec/ features/ .git .github .claude appveyor Gemfile]) ||
-        f.match?(%r{\A(\.rspec|Rakefile)\z}) ||
-        f.end_with?(".gem")
-    end
-  end
-  
-  spec.bindir = "exe"
-  spec.executables = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
-  spec.require_paths = ["lib"]
-
-  # Post-install message
-  spec.post_install_message = <<~MSG
-    
-    🏝️ IslandJS Rails installed successfully!
-    
-    📋 Next step: Initialize IslandJS in your Rails app
-
-        rails islandjs:init
-    
-  MSG
-
-  # Rails integration
-  spec.add_dependency "rails", ">= 7.0", "< 9.0"
-  spec.add_dependency "thor", "~> 1.0"
-  
-  # Development dependencies
-  spec.add_development_dependency "rake", "~> 13.0"
-  spec.add_development_dependency "rspec", "~> 3.0"
-  spec.add_development_dependency "webmock", "~> 3.0"
-  spec.add_development_dependency "vcr", "~> 6.0"
-  spec.add_development_dependency "simplecov", "~> 0.22"
-end 

data/lib/templates/app/javascript/islands/index.js

@@ -1,10 +0,0 @@
-// IslandJS Rails - Main entry point
-// This file is the webpack entry point for your JavaScript islands
-
-// React component imports
-import HelloWorld from './components/HelloWorld.jsx';
-
-// Mount components to the global islandjsRails namespace
-window.islandjsRails = {
-  HelloWorld
-};

data/lib/templates/webpack.config.js

@@ -1,85 +0,0 @@
-const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const fs = require('fs');
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-// Custom plugin to clean old island bundle files
-class CleanIslandsPlugin {
-  apply(compiler) {
-    compiler.hooks.afterEmit.tap('CleanIslandsPlugin', (compilation) => {
-      const publicDir = path.resolve(__dirname, 'public');
-      if (!fs.existsSync(publicDir)) return;
-      
-      // Get the newly emitted files
-      const emittedFiles = Object.keys(compilation.assets).map(
-        filename => filename.split('/').pop() // Get just the filename
-      );
-      
-      const files = fs.readdirSync(publicDir);
-      files.forEach(file => {
-        // Clean old islands files, but keep the newly emitted ones
-        // Also include .map and .LICENSE.txt files
-        const isEmitted = emittedFiles.includes(file) || 
-                         emittedFiles.some(ef => file.startsWith(ef) && (
-                           file.endsWith('.map') || file.endsWith('.LICENSE.txt')
-                         ));
-        
-        if (file.startsWith('islands_') && !isEmitted) {
-          const filePath = path.join(publicDir, file);
-          try {
-            fs.unlinkSync(filePath);
-          } catch (err) {
-            // Ignore errors
-          }
-        }
-      });
-    });
-  }
-}
-
-module.exports = {
-  mode: isProduction ? 'production' : 'development',
-  entry: {
-    islands_bundle: ['./app/javascript/islands/index.js']
-  },
-  externals: {
-    // IslandJS managed externals - do not edit manually
-  },
-  output: {
-    filename: '[name].[contenthash].js',
-    path: path.resolve(__dirname, 'public'),
-    publicPath: '/',
-    clean: false
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env', '@babel/preset-react']
-          }
-        }
-      }
-    ]
-  },
-  resolve: {
-    extensions: ['.js', '.jsx']
-  },
-  optimization: {
-    minimize: isProduction,
-    minimizer: [new TerserPlugin()]
-  },
-  plugins: [
-    new CleanIslandsPlugin(),
-    new WebpackManifestPlugin({
-      fileName: 'islands_manifest.json',
-      publicPath: '/'
-    })
-  ],
-  devtool: isProduction ? false : 'source-map'
-};

data/package.json

@@ -1,12 +0,0 @@
-{
-  "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.23.0",
-    "@babel/preset-react": "^7.23.0",
-    "babel-loader": "^9.1.3",
-    "terser-webpack-plugin": "^5.3.14",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4",
-    "webpack-manifest-plugin": "^5.0.1"
-  }
-}