islandjs-rails 0.1.0

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

@@ -0,0 +1,98 @@
+<div class="max-w-4xl mx-auto p-8">
+  <h1 class="text-4xl font-bold mb-6">🏝️ IslandJS Rails Demo</h1>
+  
+  <div class="bg-blue-50 border-l-4 border-blue-400 p-6 mb-8">
+    <h2 class="text-xl font-semibold text-blue-800 mb-2">Welcome to IslandJS Rails!</h2>
+    <p class="text-blue-700">
+      This demo showcases React components as "islands" within a Rails application, 
+      with full Turbo cache integration for seamless navigation.
+    </p>
+  </div>
+
+  <div class="grid md:grid-cols-2 gap-6 mb-8">
+    <div class="bg-white rounded-lg shadow-md p-6 border">
+      <h3 class="text-lg font-semibold mb-3 text-gray-800">🚀 What You'll See</h3>
+      <ul class="space-y-2 text-gray-600">
+        <li class="flex items-start">
+          <span class="text-green-500 mr-2">✓</span>
+          React components that persist state across Turbo navigation
+        </li>
+        <li class="flex items-start">
+          <span class="text-green-500 mr-2">✓</span>
+          Zero webpack complexity - UMD libraries from vendor files
+        </li>
+        <li class="flex items-start">
+          <span class="text-green-500 mr-2">✓</span>
+          Rails-native development with modern JavaScript
+        </li>
+        <li class="flex items-start">
+          <span class="text-green-500 mr-2">✓</span>
+          Production-ready asset delivery system
+        </li>
+      </ul>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-md p-6 border">
+      <h3 class="text-lg font-semibold mb-3 text-gray-800">🎯 Test the Magic</h3>
+      <p class="text-gray-600 mb-4">
+        Click the React demo below, interact with the component, then navigate back. 
+        Your component state will be preserved thanks to Turbo cache integration!
+      </p>
+      <div class="bg-gray-50 p-3 rounded text-sm text-gray-700">
+        <strong>Try this:</strong> Change the counter, navigate away, then come back. 
+        The counter value persists! 🎉
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-white rounded-lg shadow-md p-6 border mb-8">
+    <h3 class="text-lg font-semibold mb-4 text-gray-800">🏝️ React Island Demo</h3>
+    <p class="text-gray-600 mb-4">
+      Experience React components as "islands" within your Rails application. 
+      This demonstrates the core IslandJS Rails philosophy: modern JavaScript without the complexity.
+    </p>
+    
+    <div class="flex space-x-4">
+      <a href="/islandjs/react" 
+         class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
+        <span class="mr-2">🚀</span>
+        View React Demo
+      </a>
+      
+      <a href="/islandjs/react" 
+         class="inline-flex items-center px-6 py-3 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-colors">
+        <span class="mr-2">🔄</span>
+        Test Turbo Cache
+      </a>
+    </div>
+  </div>
+
+  <div class="bg-gray-50 rounded-lg p-6">
+    <h3 class="text-lg font-semibold mb-3 text-gray-800">📚 How It Works</h3>
+    <div class="grid md:grid-cols-2 gap-4 text-sm text-gray-600">
+      <div>
+        <h4 class="font-medium text-gray-800 mb-2">Vendor System</h4>
+        <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>
+        </ul>
+      </div>
+      <div>
+        <h4 class="font-medium text-gray-800 mb-2">Turbo Integration</h4>
+        <ul class="space-y-1">
+          <li>• Component state persists across navigation</li>
+          <li>• Automatic cache management</li>
+          <li>• Rails-native user experience</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-8 text-center text-gray-500 text-sm">
+    <p>
+      Built with IslandJS Rails • 
+      <a href="https://github.com/praxis-emergent/islandjs-rails" class="text-blue-600 hover:text-blue-800">View on GitHub</a>
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,93 @@
+<div class="max-w-4xl mx-auto p-8">
+  <!-- Navigation -->
+  <div class="mb-6">
+    <a href="/islandjs" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
+      <span class="mr-2">←</span>
+      Back to IslandJS Demo Home
+    </a>
+  </div>
+
+  <h1 class="text-3xl font-bold mb-6">🚀 React Component Island</h1>
+  
+  <!-- Turbo Cache Demo Instructions -->
+  <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
+    <h3 class="text-lg font-semibold text-yellow-800 mb-2">🔄 Test Turbo Cache Integration</h3>
+    <p class="text-yellow-700 mb-2">
+      <strong>Try this:</strong> Interact with the component below (click the button, change the message), 
+      then navigate back to the demo home and return here. Your changes will be preserved!
+    </p>
+    <p class="text-sm text-yellow-600">
+      This demonstrates how IslandJS Rails components maintain state across Turbo navigation.
+    </p>
+  </div>
+
+  <!-- React Component Island -->
+  <div class="bg-white rounded-lg shadow-md p-6 mb-6 border">
+    <h2 class="text-xl font-semibold mb-4 text-gray-800">Interactive React Component</h2>
+    <p class="text-gray-600 mb-4">
+      This React component maintains its state across page navigation thanks to Turbo cache integration.
+    </p>
+    
+    <div id="hello-world-demo" class="border-2 border-dashed border-blue-300 rounded-lg p-6 bg-blue-50">
+      <%= react_component('HelloWorld', { 
+        message: 'Hello from IslandJS Rails!', 
+        count: 0,
+        showAdvanced: false 
+      }) %>
+    </div>
+  </div>
+
+  <!-- Technical Details -->
+  <div class="bg-gray-50 rounded-lg p-6 mb-6">
+    <h3 class="text-lg font-semibold mb-4 text-gray-800">🏗️ How It Works</h3>
+    <div class="grid md:grid-cols-2 gap-4 text-sm">
+      <div>
+        <h4 class="font-medium text-gray-800 mb-2">Component Rendering</h4>
+        <ol class="space-y-1 text-gray-600">
+          <li>1. Rails renders this ERB template</li>
+          <li>2. <code class="bg-gray-200 px-1 rounded">react_component</code> helper creates container</li>
+          <li>3. React loads from vendor files (<code class="bg-gray-200 px-1 rounded">/islands/vendor/</code>)</li>
+          <li>4. Component mounts as independent "island"</li>
+        </ol>
+      </div>
+      <div>
+        <h4 class="font-medium text-gray-800 mb-2">Turbo Integration</h4>
+        <ol class="space-y-1 text-gray-600">
+          <li>1. Component state saved to data attributes</li>
+          <li>2. Turbo caches page with current state</li>
+          <li>3. Navigation preserves component state</li>
+          <li>4. State restored on return visit</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+
+  <!-- Navigation Actions -->
+  <div class="text-center">
+    <a href="/islandjs" 
+       class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
+      <span class="mr-2">←</span>
+      Back to Demo Home
+    </a>
+  </div>
+
+  <!-- Debug Info -->
+  <% if Rails.env.development? %>
+  <div class="mt-8 bg-gray-800 text-green-400 p-4 rounded-lg text-sm font-mono">
+    <h4 class="text-green-300 font-bold mb-2">🔧 Development Info</h4>
+    <div class="space-y-1">
+      <div>Vendor Mode: <%= IslandjsRails.configuration.vendor_script_mode %></div>
+      <div>React: <span id="react-version">Loading...</span></div>
+      <div>ReactDOM: <span id="reactdom-version">Loading...</span></div>
+      <div>Islands Namespace: <span id="islands-namespace">Loading...</span></div>
+    </div>
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        document.getElementById('react-version').textContent = window.React ? 'Loaded' : 'Missing';
+        document.getElementById('reactdom-version').textContent = window.ReactDOM ? 'Loaded' : 'Missing';
+        document.getElementById('islands-namespace').textContent = window.islandjsRails ? 'Available' : 'Missing';
+      });
+    </script>
+  </div>
+  <% end %>
+</div>

data/lib/templates/config/demo_routes.rb

@@ -0,0 +1,3 @@
+  # IslandJS demo routes (you can remove these)
+  get 'islandjs', to: 'islandjs_demo#index'
+  get 'islandjs/react', to: 'islandjs_demo#react'

data/lib/templates/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "islandjs-rails",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rm -f public/islands_bundle.*.js && NODE_ENV=production webpack",
+    "build:dev": "rm -f public/islands_bundle.*.js && NODE_ENV=production webpack",
+    "watch": "NODE_ENV=development webpack --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"
+  }
+}

data/lib/templates/webpack.config.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+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 WebpackManifestPlugin({
+      fileName: 'islands_manifest.json',
+      publicPath: '/'
+    })
+  ],
+  devtool: isProduction ? false : 'source-map'
+};

data/package.json

@@ -0,0 +1,12 @@
+{
+  "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"
+  }
+}