reactive-actions 0.1.0.pre.alpha.1 → 0.1.0.pre.alpha.3

data/app/assets/javascripts/reactive_actions.js

@@ -1,9 +1,267 @@
 // ReactiveActions JavaScript Client for Rails 8
-// ES Module compatible version
+// ES Module compatible version with manual initialization
 
 class ReactiveActionsClient {
-  constructor() {
-    this.baseUrl = '/reactive_actions/execute';
+  constructor(options = {}) {
+    // Default configuration
+    this.config = {
+      baseUrl: '/reactive_actions/execute',
+      enableAutoBinding: true,
+      enableMutationObserver: true,
+      defaultHttpMethod: 'POST',
+      ...options
+    };
+    
+    this.boundElements = new WeakSet();
+    this.initialized = false;
+  }
+
+  // Update configuration
+  configure(options = {}) {
+    this.config = { ...this.config, ...options };
+    
+    // If baseUrl changed, update it
+    if (options.baseUrl) {
+      this.baseUrl = options.baseUrl;
+    }
+    
+    return this;
+  }
+
+  // Get current configuration
+  getConfig() {
+    return { ...this.config };
+  }
+
+  // Initialize DOM bindings when called - must be called manually
+  initialize(options = {}) {
+    // Update configuration if options provided
+    if (Object.keys(options).length > 0) {
+      this.configure(options);
+    }
+    
+    // Skip if already initialized
+    if (this.initialized) return this;
+    
+    // Only bind if auto-binding is enabled
+    if (this.config.enableAutoBinding) {
+      this.bindExistingElements();
+      
+      if (this.config.enableMutationObserver) {
+        this.setupMutationObserver();
+      }
+    }
+    
+    this.initialized = true;
+    return this;
+  }
+
+  // Force re-initialization (useful after configuration changes)
+  reinitialize() {
+    this.initialized = false;
+    this.boundElements = new WeakSet();
+    this.initialize();
+  }
+
+  // Bind all existing elements with reactive-action attributes
+  bindExistingElements() {
+    const elements = document.querySelectorAll('[reactive-action]');
+    elements.forEach(element => this.bindElement(element));
+  }
+
+  // Set up mutation observer to handle dynamically added elements
+  setupMutationObserver() {
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            // Check if the node itself has reactive-action
+            if (node.hasAttribute && node.hasAttribute('reactive-action')) {
+              this.bindElement(node);
+            }
+            // Check for child elements with reactive-action
+            const children = node.querySelectorAll ? node.querySelectorAll('[reactive-action]') : [];
+            children.forEach(child => this.bindElement(child));
+          }
+        });
+      });
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  // Bind a single element to reactive actions
+  bindElement(element) {
+    // Skip if already bound
+    if (this.boundElements.has(element)) return;
+
+    const actionValue = element.getAttribute('reactive-action');
+    if (!actionValue) return;
+
+    // Parse actions - support multiple actions separated by spaces
+    const actions = this.parseActions(actionValue);
+    
+    actions.forEach(({ event, httpMethod, actionName }) => {
+      const listener = this.createActionListener(element, actionName, httpMethod);
+      
+      // Handle special cases for form submission
+      if (event === 'submit' && element.tagName.toLowerCase() === 'form') {
+        element.addEventListener('submit', (e) => {
+          e.preventDefault();
+          listener(e);
+        });
+      } else {
+        element.addEventListener(event, listener);
+      }
+    });
+
+    // Mark as bound
+    this.boundElements.add(element);
+  }
+
+  // Parse action string(s) - supports "click->action_name", "click->post#action_name", or multiple actions
+  parseActions(actionValue) {
+    const actions = [];
+    const actionPairs = actionValue.trim().split(/\s+/);
+    
+    actionPairs.forEach(pair => {
+      // Match patterns: "event->action", "event->method#action"
+      const match = pair.match(/^(\w+)->((?:(\w+)#)?(.+))$/);
+      if (match) {
+        const [, event, , httpMethod, actionName] = match;
+        actions.push({ 
+          event, 
+          httpMethod: httpMethod ? httpMethod.toUpperCase() : this.config.defaultHttpMethod,
+          actionName 
+        });
+      }
+    });
+    
+    return actions;
+  }
+
+  // Create event listener for an action
+  createActionListener(element, actionName, httpMethod = null) {
+    return async (event) => {
+      try {
+        // Add loading state
+        this.setLoadingState(element, true);
+
+        // Extract data attributes
+        const actionParams = this.extractDataAttributes(element);
+        
+        // Add form data if it's a form element
+        if (element.tagName.toLowerCase() === 'form') {
+          const formData = new FormData(element);
+          for (const [key, value] of formData.entries()) {
+            actionParams[key] = value;
+          }
+        }
+        
+        // Add input value for input elements on change events
+        if (['input', 'select', 'textarea'].includes(element.tagName.toLowerCase()) && 
+            ['change', 'input'].includes(event.type)) {
+          actionParams.value = element.value;
+        }
+
+        // Execute the action using the existing method with specified HTTP method
+        const method = httpMethod || this.config.defaultHttpMethod;
+        const response = await this.execute(actionName, actionParams, { method });
+        
+        // Handle response
+        this.handleActionResponse(element, response, event);
+        
+      } catch (error) {
+        this.handleActionError(element, error, event);
+      } finally {
+        this.setLoadingState(element, false);
+      }
+    };
+  }
+
+  // Extract data attributes from element
+  extractDataAttributes(element) {
+    const data = {};
+    const attributes = element.attributes;
+    
+    for (const attr of attributes) {
+      if (attr.name.startsWith('reactive-action-') && 
+          !['reactive-action', 'reactive-action-success', 'reactive-action-error'].includes(attr.name)) {
+        const key = attr.name
+          .replace('reactive-action-', '')
+          .replace(/-/g, '_'); // Convert kebab-case to snake_case
+        data[key] = attr.value;
+      }
+    }
+    
+    return data;
+  }
+
+  // Set loading state on element
+  setLoadingState(element, loading) {
+    if (loading) {
+      element.classList.add('reactive-loading');
+      if (element.tagName.toLowerCase() === 'button' || element.tagName.toLowerCase() === 'input') {
+        element.disabled = true;
+      }
+      // Store original text if it's a button or link
+      if (['button', 'a'].includes(element.tagName.toLowerCase())) {
+        element.dataset.originalText = element.textContent;
+        element.textContent = element.dataset.loadingText || 'Loading...';
+      }
+    } else {
+      element.classList.remove('reactive-loading');
+      if (element.tagName.toLowerCase() === 'button' || element.tagName.toLowerCase() === 'input') {
+        element.disabled = false;
+      }
+      // Restore original text
+      if (element.dataset.originalText) {
+        element.textContent = element.dataset.originalText;
+        delete element.dataset.originalText;
+      }
+    }
+  }
+
+  // Handle successful action response
+  handleActionResponse(element, response, event) {
+    // Dispatch custom event
+    const customEvent = new CustomEvent('reactive-action:success', {
+      detail: { response, element, originalEvent: event },
+      bubbles: true
+    });
+    element.dispatchEvent(customEvent);
+
+    // Handle success callback if specified
+    const successCallback = element.getAttribute('reactive-action-success');
+    if (successCallback && typeof window[successCallback] === 'function') {
+      window[successCallback](response, element, event);
+    }
+
+    // Log successful responses that aren't ok
+    if (!response.ok) {
+      console.warn('ReactiveActions response not ok:', response);
+    }
+  }
+
+  // Handle action errors
+  handleActionError(element, error, event) {
+    console.error('ReactiveActions error:', error);
+    
+    // Dispatch custom event
+    const customEvent = new CustomEvent('reactive-action:error', {
+      detail: { error, element, originalEvent: event },
+      bubbles: true
+    });
+    element.dispatchEvent(customEvent);
+
+    // Handle error callback if specified
+    const errorCallback = element.getAttribute('reactive-action-error');
+    if (errorCallback && typeof window[errorCallback] === 'function') {
+      window[errorCallback](error, element, event);
+    }
   }
 
   // Get CSRF token from meta tag
@@ -14,9 +272,12 @@ class ReactiveActionsClient {
 
   // Execute an action with parameters
   async execute(actionName, actionParams = {}, options = {}) {
-    const method = options.method || 'POST';
+    const method = options.method || this.config.defaultHttpMethod;
     const contentType = options.contentType || 'application/json';
     
+    // Use configured baseUrl
+    const baseUrl = this.config.baseUrl;
+    
     // Build request options
     const requestOptions = {
       method: method,
@@ -34,7 +295,7 @@ class ReactiveActionsClient {
     }
     
     // Build URL or prepare body based on HTTP method
-    let url = this.baseUrl;
+    let url = baseUrl;
     if (['GET', 'HEAD'].includes(method.toUpperCase())) {
       // For GET requests, append parameters to URL
       const params = new URLSearchParams({
@@ -88,13 +349,10 @@ class ReactiveActionsClient {
   }
 }
 
-// Create and export the instance
-const ReactiveActions = new ReactiveActionsClient();
+// ES Module export
+export default ReactiveActionsClient;
 
-// For backward compatibility, also expose as global
+// Global export
 if (typeof window !== 'undefined') {
-  window.ReactiveActions = ReactiveActions;
-}
-
-// ES Module export
-export default ReactiveActions;
+  window.ReactiveActionsClient = ReactiveActionsClient;
+}

data/app/controllers/reactive_actions/reactive_actions_controller.rb

@@ -4,6 +4,9 @@ module ReactiveActions
   # Main controller for handling reactive action requests
   # Processes action execution and manages error handling for the ReactiveActions engine
   class ReactiveActionsController < ApplicationController
+    # Include rate limiting functionality
+    include ReactiveActions::Controller::RateLimiter
+
     # Allow this action to handle any HTTP method
     def execute
       ReactiveActions.logger.info "ReactiveActionsController#execute[#{request.method}]: #{params.inspect}"
@@ -118,7 +121,8 @@ module ReactiveActions
         'MissingParameterError' => [:bad_request, 'MISSING_PARAMETER'],
         'InvalidParametersError' => [:bad_request, 'INVALID_PARAMETERS'],
         'UnauthorizedError' => [:forbidden, 'UNAUTHORIZED'],
-        'ActionExecutionError' => [:unprocessable_entity, 'EXECUTION_ERROR']
+        'ActionExecutionError' => [:unprocessable_entity, 'EXECUTION_ERROR'],
+        'RateLimitExceededError' => [:too_many_requests, 'RATE_LIMIT_EXCEEDED']
       }
 
       error_type = exception.class.name.demodulize

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

@@ -20,9 +20,27 @@ module ReactiveActions
                                   desc: 'Skip generating example action'
       class_option :mount_path, type: :string, default: '/reactive_actions',
                                 desc: 'Custom mount path for ReactiveActions'
+      class_option :auto_initialize, type: :boolean, default: true,
+                                     desc: 'Auto-initialize ReactiveActions client on page load'
+      class_option :enable_dom_binding, type: :boolean, default: true,
+                                        desc: 'Enable automatic DOM binding'
+      class_option :enable_mutation_observer, type: :boolean, default: true,
+                                              desc: 'Enable mutation observer for dynamic content'
+      class_option :default_http_method, type: :string, default: 'POST',
+                                         desc: 'Default HTTP method for actions'
       class_option :quiet, type: :boolean, default: false,
                            desc: 'Run with minimal output'
 
+      # Rate limiting options
+      class_option :enable_rate_limiting, type: :boolean, default: false,
+                                          desc: 'Enable rate limiting features'
+      class_option :enable_global_rate_limiting, type: :boolean, default: false,
+                                                 desc: 'Enable global controller-level rate limiting'
+      class_option :global_rate_limit, type: :numeric, default: 600,
+                                       desc: 'Global rate limit (requests per window)'
+      class_option :global_rate_limit_window, type: :string, default: '1.minute',
+                                              desc: 'Global rate limit window (e.g., "1.minute", "5.minutes")'
+
       def welcome_message
         return if options[:quiet]
 
@@ -31,24 +49,25 @@ module ReactiveActions
         say ''
       end
 
+      def gather_configuration
+        # Gather all configuration before creating files
+        setup_rate_limiting_configuration_for_initializer
+      end
+
       def create_initializer
-        if options[:quiet] || yes?('Create ReactiveActions initializer? (recommended)', :green)
-          template 'initializer.rb', 'config/initializers/reactive_actions.rb'
-          say '✓ Created initializer', :green unless options[:quiet]
-        else
-          say '✗ Skipped initializer creation', :yellow
-        end
+        return unless options[:quiet] || yes?('Create ReactiveActions initializer? (recommended)', :green)
+
+        template 'initializer.rb', 'config/initializers/reactive_actions.rb'
+        say '✓ Created initializer', :green unless options[:quiet]
       end
 
       def create_actions_directory
-        if options[:quiet] || yes?('Create app/reactive_actions directory?', :green)
-          empty_directory 'app/reactive_actions'
-          say '✓ Created actions directory', :green unless options[:quiet]
+        return unless options[:quiet] || yes?('Create app/reactive_actions directory?', :green)
 
-          ask_for_example_action unless options[:skip_example]
-        else
-          say '✗ Skipped actions directory creation', :yellow
-        end
+        empty_directory 'app/reactive_actions'
+        say '✓ Created actions directory', :green unless options[:quiet]
+
+        ask_for_example_action unless options[:skip_example]
       end
 
       def configure_routes
@@ -64,13 +83,31 @@ module ReactiveActions
       def configure_javascript
         return if options[:skip_javascript]
         return unless javascript_needed?
+        return unless options[:quiet] || yes?('Add ReactiveActions JavaScript client?', :green)
 
-        if options[:quiet] || yes?('Add ReactiveActions JavaScript client?', :green)
-          add_javascript_to_importmap
-          say '✓ Added JavaScript client to importmap', :green unless options[:quiet]
-        else
-          say '✗ Skipped JavaScript configuration', :yellow
-        end
+        add_javascript_to_importmap
+        add_javascript_initialization
+        say '✓ Added JavaScript client with initialization', :green unless options[:quiet]
+      end
+
+      def javascript_configuration_options
+        return if options[:skip_javascript] || options[:quiet]
+        return unless javascript_needed?
+
+        configure_javascript_options
+      end
+
+      def rate_limiting_configuration
+        # Show rate limiting configuration summary if it was configured
+        return unless @rate_limiting_config && @rate_limiting_config[:rate_limiting_enabled] && !options[:quiet]
+
+        say '', :green
+        say '✓ Rate limiting configured:', :green
+        say "  - Rate limiting: #{@rate_limiting_config[:rate_limiting_enabled] ? 'ENABLED' : 'DISABLED'}", :blue
+        say "  - Global rate limiting: #{@rate_limiting_config[:global_rate_limiting_enabled] ? 'ENABLED' : 'DISABLED'}", :blue
+        return unless @rate_limiting_config[:global_rate_limiting_enabled]
+
+        say "  - Global limit: #{@rate_limiting_config[:global_rate_limit]} requests per #{@rate_limiting_config[:global_rate_limit_window]}", :blue
       end
 
       def configuration_options
@@ -94,6 +131,62 @@ module ReactiveActions
 
       private
 
+      def setup_rate_limiting_configuration_for_initializer
+        if rate_limiting_options_provided?
+          configure_rate_limiting_from_options_quietly
+        elsif !options[:quiet] && ask_about_rate_limiting?
+          configure_rate_limiting_interactively
+        else
+          @rate_limiting_config = {}
+        end
+      end
+
+      def rate_limiting_options_provided?
+        options[:enable_rate_limiting] || options[:enable_global_rate_limiting]
+      end
+
+      def ask_about_rate_limiting?
+        yes?('Configure rate limiting? (optional but recommended for production)', :green)
+      end
+
+      def configure_rate_limiting_from_options_quietly
+        @rate_limiting_config = {
+          rate_limiting_enabled: options[:enable_rate_limiting] || options[:enable_global_rate_limiting],
+          global_rate_limiting_enabled: options[:enable_global_rate_limiting]
+        }
+
+        return unless options[:enable_global_rate_limiting]
+
+        @rate_limiting_config[:global_rate_limit] = options[:global_rate_limit]
+        @rate_limiting_config[:global_rate_limit_window] = options[:global_rate_limit_window]
+      end
+
+      def configure_rate_limiting_interactively
+        @rate_limiting_config = {}
+
+        enable_rate_limiting = yes?('Enable rate limiting features?', :green)
+        @rate_limiting_config[:rate_limiting_enabled] = enable_rate_limiting
+        return unless enable_rate_limiting
+
+        enable_global = yes?('Enable global controller-level rate limiting? (recommended)', :green)
+        @rate_limiting_config[:global_rate_limiting_enabled] = enable_global
+
+        return unless enable_global
+
+        limit = ask('Global rate limit (requests per window):', default: 600)
+        @rate_limiting_config[:global_rate_limit] = limit.to_i
+
+        window = ask('Global rate limit window:',
+                     limited_to: %w[30.seconds 1.minute 5.minutes 15.minutes 1.hour],
+                     default: '1.minute')
+        @rate_limiting_config[:global_rate_limit_window] = window
+
+        return unless yes?('Configure custom rate limit key generator? (advanced)', :green)
+
+        say 'You can customize how rate limit keys are generated in the initializer.'
+        @rate_limiting_config[:custom_key_generator] = true
+      end
+
       def should_skip_example_action?
         return true if options[:skip_example]
         return true if !options[:quiet] && !yes?('Generate example action file?', :green)
@@ -164,12 +257,9 @@ module ReactiveActions
         IMPORTMAP
 
         append_to_file 'config/importmap.rb', importmap_content
-
-        # Add the import to application.js to ensure it executes
-        add_import_to_application_js
       end
 
-      def add_import_to_application_js
+      def add_javascript_initialization
         app_js_paths = %w[
           app/javascript/application.js
           app/assets/javascripts/application.js
@@ -179,29 +269,100 @@ module ReactiveActions
         app_js_path = app_js_paths.find { |path| File.exist?(path) }
 
         if app_js_path
-          # Check if import already exists
           app_js_content = File.read(app_js_path)
-          return if app_js_content.include?('import "reactive_actions"')
+          return if app_js_content.include?('ReactiveActions') || app_js_content.include?('reactive_actions')
 
-          import_line = <<~JAVASCRIPT
+          js_config = generate_javascript_config
+          js_code = build_javascript_code(js_config)
 
-            // Import ReactiveActions to make it globally available
-            import "reactive_actions"
-          JAVASCRIPT
+          append_to_file app_js_path, js_code
+          say "✓ Added ReactiveActions initialization to #{app_js_path}", :green unless options[:quiet]
+        else
+          say '⚠ Could not find application.js file. Please manually add ReactiveActions initialization.', :yellow
+        end
+      end
+
+      def generate_javascript_config
+        config = {}
+        mount_path = determine_mount_path || options[:mount_path]
+        config[:baseUrl] = "#{mount_path}/execute" if mount_path != '/reactive_actions'
+
+        config[:enableAutoBinding] = javascript_option_value(:enable_dom_binding)
+        config[:enableMutationObserver] = javascript_option_value(:enable_mutation_observer)
+        config[:defaultHttpMethod] = javascript_option_value(:default_http_method, 'POST')
+
+        # Remove default values to keep config clean
+        config.delete(:enableAutoBinding) if config[:enableAutoBinding] == true
+        config.delete(:enableMutationObserver) if config[:enableMutationObserver] == true
+        config.delete(:defaultHttpMethod) if config[:defaultHttpMethod] == 'POST'
+
+        config.empty? ? '{}' : JSON.pretty_generate(config)
+      end
+
+      def build_javascript_code(js_config)
+        <<~JAVASCRIPT
+
+          // Import and initialize ReactiveActions
+          import ReactiveActionsClient from "reactive_actions"
+
+          // Create and configure ReactiveActions instance
+          const reactiveActions = new ReactiveActionsClient(#{js_config});
 
-          append_to_file app_js_path, import_line
-          say "✓ Added ReactiveActions import to #{app_js_path}", :green unless options[:quiet]
+          #{generate_initialization_code}
+
+          // Make ReactiveActions globally available
+          window.ReactiveActions = reactiveActions;
+        JAVASCRIPT
+      end
+
+      def generate_initialization_code
+        if javascript_option_value(:auto_initialize)
+          <<~JAVASCRIPT.strip
+            // Initialize on DOM content loaded and Turbo events
+            document.addEventListener('DOMContentLoaded', () => reactiveActions.initialize());
+            document.addEventListener('turbo:load', () => reactiveActions.initialize());
+            document.addEventListener('turbo:frame-load', () => reactiveActions.initialize());
+          JAVASCRIPT
         else
-          say '⚠ Could not find application.js file. Please manually add: import "reactive_actions"', :yellow
+          '// Manual initialization - call reactiveActions.initialize() when ready'
+        end
+      end
+
+      def javascript_option_value(option_key, default_value = nil)
+        return options[option_key] if options.key?(option_key)
+        return default_value unless default_value.nil?
+
+        case option_key
+        when :enable_dom_binding, :enable_mutation_observer, :auto_initialize
+          true
+        when :default_http_method
+          'POST'
+        end
+      end
+
+      def configure_javascript_options
+        return unless yes?('Configure JavaScript client options?', :green)
+
+        @javascript_options ||= {}
+        @javascript_options[:auto_initialize] = yes?('Auto-initialize ReactiveActions on page load? (recommended)', :green)
+
+        enable_dom = yes?('Enable automatic DOM binding? (recommended)', :green)
+        @javascript_options[:enable_dom_binding] = enable_dom
+
+        if enable_dom
+          enable_observer = yes?('Enable mutation observer for dynamic content? (recommended)', :green)
+          @javascript_options[:enable_mutation_observer] = enable_observer
         end
+
+        http_methods = %w[POST GET PUT PATCH DELETE]
+        default_method = ask('Default HTTP method:', limited_to: http_methods, default: 'POST')
+        @javascript_options[:default_http_method] = default_method unless default_method == 'POST'
       end
 
       def add_to_sprockets_manifest
         return unless File.exist?('app/assets/config/manifest.js')
 
-        append_to_file 'app/assets/config/manifest.js' do
-          "\n//= link reactive_actions.js\n"
-        end
+        append_to_file 'app/assets/config/manifest.js', "\n//= link reactive_actions.js\n"
       end
 
       def configure_delegated_methods
@@ -256,6 +417,11 @@ module ReactiveActions
         template 'example_action.rb', "app/reactive_actions/#{sanitized_name}.rb"
         say "✓ Created #{sanitized_name}.rb", :green unless options[:quiet]
       end
+
+      # Template method to access rate limiting config in templates
+      def rate_limiting_config
+        @rate_limiting_config || {}
+      end
     end
   end
 end