reactive_component 0.1.0

data/lib/reactive_component/compiler.rb

@@ -0,0 +1,221 @@
+# frozen_string_literal: true
+
+require "prism"
+require "ruby2js"
+require "ruby2js/erubi"
+require "ruby2js/filter/erb"
+require "ruby2js/filter/functions"
+require_relative "erb_extractor"
+
+module ReactiveComponent
+  module Compiler
+    ESCAPE_FN_JS = <<~JS.freeze
+      function _escape(s) {
+        return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+      }
+    JS
+
+    TAG_FN_JS = <<~JS.freeze
+      function _tag(name, content, attrs) {
+        let html = '<' + name;
+        if (attrs) {
+          for (let [k, v] of Object.entries(attrs)) {
+            if (v == null || v === false) continue;
+            if (Array.isArray(v)) v = v.filter(Boolean).join(' ');
+            html += ' ' + k + '="' + _escape(String(v)) + '"';
+          }
+        }
+        return html + '>' + _escape(String(content)) + '</' + name + '>';
+      }
+    JS
+
+    module_function
+
+    def compile(component_class)
+      erb_source = read_erb(component_class)
+      erb_ruby = Ruby2JS::Erubi.new(erb_source).src
+
+      extraction = { expressions: {}, raw_fields: Set.new }
+
+      nestable_checker = lambda do |class_name, inside_block: false|
+        klass = class_name.safe_constantize
+        return nil unless klass
+        # Components with their own model attr are only nestable inside collection loops
+        # (where we can call build_data per item), not as standalone nested components
+        return nil if !inside_block && klass.respond_to?(:_live_model_attr) && klass._live_model_attr
+        begin; read_erb(klass); klass; rescue; nil; end
+      end
+
+      js_function = Ruby2JS.convert(
+        erb_ruby,
+        filters: [:erb, :functions, ReactiveComponent::ErbExtractor],
+        eslevel: 2022,
+        extraction: extraction,
+        nestable_checker: nestable_checker
+      ).to_s
+
+      expressions = extraction[:expressions] || {}
+      raw_fields = extraction[:raw_fields] || Set.new
+      collection_computed = extraction[:collection_computed] || {}
+      nested_components = extraction[:nested_components] || {}
+
+      # Simple @ivars not consumed by extraction become JS params directly
+      all_ivars = extract_ivar_names(erb_ruby)
+      consumed_ivars = expressions.values
+        .flat_map { |src| src.scan(/@(\w+)/).flatten }.to_set
+      simple_ivars = (all_ivars - consumed_ivars).to_a.sort
+
+      # Compile nested component templates and embed as JS functions
+      nested_functions_js = ""
+      embedded_classes = Set.new
+
+      nested_components.each do |key, info|
+        child_class = info[:class_name].constantize
+        embedded_classes << child_class.name
+        child_compiled = compile(child_class)
+        child_body = unwrap_function(
+          child_compiled[:raw_js_function],
+          child_compiled[:fields],
+          child_compiled[:raw_fields],
+          include_helpers: false
+        )
+        if ReactiveComponent.debug
+          debug_label = info[:class_name].underscore.humanize
+          child_body = wrap_debug_return(child_body, debug_label)
+        end
+        nested_functions_js += "function _render_#{key}(data) {\n"
+        nested_functions_js += child_body.gsub(/^/, "  ") + "\n"
+        nested_functions_js += "}\n"
+      end
+
+      # Embed JS functions for nested components used inside collection loops
+      collection_computed.each_value do |cc_info|
+        (cc_info[:expressions] || {}).each_value do |expr_info|
+          next unless expr_info[:nested_component]
+          nc_class_name = expr_info[:nested_component][:class_name]
+          next if embedded_classes.include?(nc_class_name)
+          embedded_classes << nc_class_name
+
+          child_class = nc_class_name.constantize
+          child_compiled = compile(child_class)
+          fn_name = nc_class_name.underscore
+          child_body = unwrap_function(
+            child_compiled[:raw_js_function],
+            child_compiled[:fields],
+            child_compiled[:raw_fields],
+            include_helpers: false
+          )
+          if ReactiveComponent.debug
+            debug_label = nc_class_name.underscore.humanize
+            child_body = wrap_debug_return(child_body, debug_label)
+          end
+          nested_functions_js += "function _render_#{fn_name}(data) {\n"
+          nested_functions_js += child_body.gsub(/^/, "  ") + "\n"
+          nested_functions_js += "}\n"
+        end
+      end
+
+      fields = (expressions.keys + simple_ivars + nested_components.keys).uniq.sort
+      parent_raw_body = strip_function_wrapper(js_function)
+      js_body = "#{ESCAPE_FN_JS}#{TAG_FN_JS}#{nested_functions_js}"
+      js_body += "let { #{fields.join(", ")} } = data;\n"
+      js_body += add_html_escaping(parent_raw_body, raw_fields)
+
+      {
+        js_body: js_body,
+        fields: fields,
+        expressions: expressions,
+        simple_ivars: simple_ivars,
+        collection_computed: collection_computed,
+        nested_components: nested_components,
+        raw_js_function: js_function,
+        raw_fields: raw_fields
+      }
+    end
+
+    def compile_js(component_class)
+      compile(component_class)[:js_body]
+    end
+
+    def compiled_data_for(klass)
+      @compiled_data_cache ||= {}
+      @compiled_data_cache[klass.name] ||= compile(klass)
+    end
+
+    def build_data_for_nested(klass, **kwargs)
+      compiled = compiled_data_for(klass)
+      evaluator = ReactiveComponent::DataEvaluator.new(nil, nil, component_class: klass, **kwargs)
+      data = {}
+      collection_computed = compiled[:collection_computed] || {}
+
+      compiled[:expressions].each do |var_name, ruby_source|
+        data[var_name] = if collection_computed.key?(var_name)
+          evaluator.evaluate_collection(ruby_source, collection_computed[var_name])
+        else
+          evaluator.evaluate(ruby_source)
+        end
+      end
+
+      compiled[:simple_ivars].each do |ivar_name|
+        data[ivar_name] = kwargs[ivar_name.to_sym] if kwargs.key?(ivar_name.to_sym)
+      end
+
+      data
+    end
+
+    def extract_ivar_names(erb_ruby)
+      result = Prism.parse(erb_ruby)
+      ivars = Set.new
+      walk(result.value) do |node|
+        ivars << node.name.to_s.delete_prefix("@") if node.is_a?(Prism::InstanceVariableReadNode)
+      end
+      ivars
+    end
+
+    def read_erb(component_class)
+      erb_path = component_class.instance_method(:initialize)
+                   .source_location&.first
+                   &.sub(/\.rb$/, ".html.erb")
+
+      raise ArgumentError, "Cannot find ERB template for #{component_class}" unless erb_path && File.exist?(erb_path)
+
+      File.read(erb_path)
+    end
+
+    def strip_function_wrapper(js_function)
+      js_function
+        .sub(/\Afunction render\(\{[^}]*\}\) \{\n?/, "")
+        .sub(/\}\s*\z/, "")
+        .gsub(/^  /, "")
+    end
+
+    def unwrap_function(js_function, fields, raw_fields, include_helpers: true)
+      body = strip_function_wrapper(js_function)
+      destructure = "let { #{fields.join(", ")} } = data;\n"
+      escaped_body = add_html_escaping(body, raw_fields)
+      helpers = include_helpers ? "#{ESCAPE_FN_JS}#{TAG_FN_JS}" : ""
+      "#{helpers}#{destructure}#{escaped_body}"
+    end
+
+    def wrap_debug_return(body, label)
+      wrapper = "return '<div data-reactive-debug=\"#{label}' + (data.dom_id ? ' #' + data.dom_id : '') + '\" class=\"reactive-debug-wrapper\">' + _buf + '</div>';"
+      body.sub(/return _buf\s*\z/, wrapper)
+    end
+
+    def add_html_escaping(body, raw_fields)
+      body.gsub(/\+= String\((.+?)\);/) do
+        expr = $1
+        if raw_fields.include?(expr)
+          "+= #{expr};"
+        else
+          "+= _escape(String(#{expr}));"
+        end
+      end
+    end
+
+    def walk(node, &block)
+      yield node
+      node.child_nodes.compact.each { |child| walk(child, &block) }
+    end
+  end
+end

data/lib/reactive_component/data_evaluator.rb

@@ -0,0 +1,145 @@
+# frozen_string_literal: true
+
+require "action_view"
+require "action_view/record_identifier"
+
+module ReactiveComponent
+  class DataEvaluator
+    include ActionView::Helpers::DateHelper
+    include ActionView::Helpers::TextHelper
+    include ActionView::Helpers::NumberHelper
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::OutputSafetyHelper
+    include ActionView::RecordIdentifier
+    include ActionView::Helpers::UrlHelper
+
+    def self.inherited(subclass)
+      super
+      if defined?(Rails) && Rails.application
+        subclass.include Rails.application.routes.url_helpers
+      end
+    end
+
+    def self.finalize!
+      include Rails.application.routes.url_helpers if defined?(Rails) && Rails.application
+    end
+
+    def initialize(model_attr, record, component_class: nil, **kwargs)
+      instance_variable_set(:"@#{model_attr}", record) if model_attr
+      kwargs.each { |k, v| instance_variable_set(:"@#{k}", v) }
+
+      if component_class
+        begin
+          constructor_args = model_attr ? { model_attr => record }.merge(kwargs) : kwargs
+          instance = component_class.new(**constructor_args)
+          @component_delegate = instance
+          instance.instance_variables.each do |ivar|
+            next if (model_attr && ivar == :"@#{model_attr}") || instance_variable_defined?(ivar)
+            instance_variable_set(ivar, instance.instance_variable_get(ivar))
+          end
+        rescue
+          @component_delegate = component_class.allocate
+        end
+      end
+    end
+
+    def evaluate(ruby_source)
+      instance_eval(ruby_source)
+    rescue NameError
+      @component_delegate&.instance_eval(ruby_source) rescue nil
+    rescue => e
+      Rails.logger.error "[ReactiveComponent::DataEvaluator] Error evaluating '#{ruby_source}': #{e.message}"
+      nil
+    end
+
+    def render(renderable, &block)
+      renderer = ReactiveComponent.renderer || ActionController::Base
+      renderer.render(renderable, layout: false)
+    end
+
+    def evaluate_collection(ruby_source, computed)
+      collection = begin
+        instance_eval(ruby_source)
+      rescue NameError
+        @component_delegate&.instance_eval(ruby_source)
+      end
+      return [] unless collection
+
+      block_var = computed[:block_var]
+      eval_context = self
+
+      lambdas = {}
+      nested = {}
+      (computed[:expressions] || {}).each do |var_name, info|
+        if info[:nested_component]
+          nc = info[:nested_component]
+          klass = nc[:class_name].constantize
+          kwarg_lambdas = {}
+          nc[:kwargs].each do |kw_name, kw_source|
+            kwarg_lambdas[kw_name.to_sym] = eval_lambda(block_var, kw_source)
+          end
+          nested[var_name] = { klass: klass, kwargs: kwarg_lambdas }
+        else
+          lambdas[var_name] = eval_lambda(block_var, info[:source])
+        end
+      end
+
+      collection.map do |item|
+        result = {}
+        lambdas.each do |var_name, fn|
+          result[var_name] = fn.call(item).to_s
+        end
+        nested.each do |var_name, nc_info|
+          kwargs_values = nc_info[:kwargs].transform_values { |fn| fn.call(item) }
+          klass = nc_info[:klass]
+          if klass.respond_to?(:live_model_attr) && klass.live_model_attr
+            record = kwargs_values.delete(klass.live_model_attr)
+            result[var_name] = klass.build_data(record, **kwargs_values)
+          else
+            result[var_name] = if klass.respond_to?(:build_data_for_nested)
+              klass.build_data_for_nested(**kwargs_values)
+            else
+              ReactiveComponent::Compiler.build_data_for_nested(klass, **kwargs_values)
+            end
+          end
+        end
+        result
+      end
+    end
+
+    def default_url_options
+      Rails.application.routes.default_url_options
+    end
+
+    def optimize_routes_generation?
+      false
+    end
+
+    private
+
+    def eval_lambda(block_var, source)
+      instance_eval("lambda { |#{block_var}| #{source} }")
+    rescue NameError
+      @component_delegate.instance_eval("lambda { |#{block_var}| #{source} }")
+    end
+
+    def method_missing(method, *args, **kwargs, &block)
+      if component_own_method?(method)
+        @component_delegate.send(method, *args, **kwargs, &block)
+      else
+        super
+      end
+    end
+
+    def respond_to_missing?(method, include_private = false)
+      component_own_method?(method) || super
+    end
+
+    def component_own_method?(method)
+      return false unless @component_delegate
+      klass = @component_delegate.class
+      klass.instance_methods(false).include?(method) ||
+        klass.private_instance_methods(false).include?(method)
+    end
+  end
+end

data/lib/reactive_component/engine.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+# This file should be required from the main lib/reactive_component.rb module file.
+
+module ReactiveComponent
+  class Engine < ::Rails::Engine
+    isolate_namespace ReactiveComponent
+
+    initializer "reactive_component.importmap", before: "importmap" do |app|
+      if defined?(Importmap)
+        app.config.importmap.paths <<
+          Engine.root.join("config/importmap.rb")
+
+        app.config.assets.paths <<
+          Engine.root.join("app/javascript")
+      end
+    end
+  end
+end