reactive_component 0.1.0 → 0.7.0

data/lib/reactive_component/compiler.rb

@@ -1,31 +1,64 @@
 # frozen_string_literal: true
 
-require "prism"
-require "ruby2js"
-require "ruby2js/erubi"
-require "ruby2js/filter/erb"
-require "ruby2js/filter/functions"
-require_relative "erb_extractor"
+require 'prism'
+require_relative 'erubi'
+require_relative 'transpiler'
 
 module ReactiveComponent
   module Compiler
-    ESCAPE_FN_JS = <<~JS.freeze
+    ESCAPE_FN_JS = <<~JS
       function _escape(s) {
         return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
       }
+      // A variable or property read in `<%= %>` is emitted as escapeHTML(value);
+      // every other output is String(value), which `add_html_escaping` wraps.
+      function escapeHTML(s) { return _escape(String(s)); }
     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)) + '"';
+    TAG_FN_JS = <<~JS
+      function _render_class(v) {
+        if (v == null || v === false) return '';
+        if (Array.isArray(v)) return v.map(_render_class).filter(Boolean).join(' ');
+        if (typeof v === 'object') {
+          return Object.entries(v).filter(([, on]) => on).map(([name]) => name).join(' ');
+        }
+        return String(v);
+      }
+      function _render_attrs(attrs) {
+        if (!attrs) return '';
+        let html = '';
+        for (let [k, v] of Object.entries(attrs)) {
+          if (v == null || v === false) continue;
+          if (k === 'class') {
+            const cls = _render_class(v);
+            if (cls) html += ' class="' + _escape(cls) + '"';
+            continue;
           }
+          if (v === true) { html += ' ' + k; continue; }
+          if (typeof v === 'object' && !Array.isArray(v)) {
+            for (let [dk, dv] of Object.entries(v)) {
+              if (dv == null || dv === false) continue;
+              const dashKey = String(dk).replace(/_/g, '-');
+              if (dv === true) { html += ' ' + k + '-' + dashKey; continue; }
+              html += ' ' + k + '-' + dashKey + '="' + _escape(String(dv)) + '"';
+            }
+            continue;
+          }
+          if (Array.isArray(v)) v = v.filter(Boolean).join(' ');
+          html += ' ' + k + '="' + _escape(String(v)) + '"';
         }
-        return html + '>' + _escape(String(content)) + '</' + name + '>';
+        return html;
+      }
+      function _tag(name, content, attrs) {
+        return '<' + name + _render_attrs(attrs) + '>' +
+               (content != null ? _escape(String(content)) : '') +
+               '</' + name + '>';
+      }
+      function _tag_open(name, attrs) {
+        return '<' + name + _render_attrs(attrs) + '>';
+      }
+      function _tag_close(name) {
+        return '</' + name + '>';
       }
     JS
 
@@ -33,7 +66,7 @@ module ReactiveComponent
 
     def compile(component_class)
       erb_source = read_erb(component_class)
-      erb_ruby = Ruby2JS::Erubi.new(erb_source).src
+      erb_ruby = ReactiveComponent::Erubi.new(erb_source).src
 
       extraction = { expressions: {}, raw_fields: Set.new }
 
@@ -43,30 +76,36 @@ module ReactiveComponent
         # 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
+
+        begin
+          read_erb(klass)
+          klass
+        rescue StandardError
+          nil
+        end
       end
 
-      js_function = Ruby2JS.convert(
-        erb_ruby,
-        filters: [:erb, :functions, ReactiveComponent::ErbExtractor],
-        eslevel: 2022,
-        extraction: extraction,
-        nestable_checker: nestable_checker
-      ).to_s
+      js_function = begin
+        ReactiveComponent::Transpiler.call(erb_ruby, extraction: extraction, nestable_checker: nestable_checker)
+      rescue ReactiveComponent::CompileError => e
+        raise ReactiveComponent::CompileError, "#{component_class.name}: #{e.message}"
+      end
 
       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
+      # Every @ivar the template mentions needs its stripped form (`initials`
+      # for `@initials`) in the JS destructure, because the emitter reads those
+      # names directly alongside any extracted-expression vars. Don't subtract
+      # ivars that also appear inside extracted expressions — a template that
+      # uses both `<%= @initials %>` and `<%= @initials.present? %>` needs
+      # both `initials` and `v0` on the data object.
+      simple_ivars = extract_ivar_names(erb_ruby).to_a.sort
 
       # Compile nested component templates and embed as JS functions
-      nested_functions_js = ""
+      nested_functions_js = ''
       embedded_classes = Set.new
 
       nested_components.each do |key, info|
@@ -84,7 +123,7 @@ module ReactiveComponent
           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 += "#{child_body.gsub(/^/, '  ')}\n"
         nested_functions_js += "}\n"
       end
 
@@ -92,8 +131,10 @@ module ReactiveComponent
       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
@@ -110,7 +151,7 @@ module ReactiveComponent
             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 += "#{child_body.gsub(/^/, '  ')}\n"
           nested_functions_js += "}\n"
         end
       end
@@ -118,7 +159,7 @@ module ReactiveComponent
       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 += "let { #{fields.join(', ')} } = data;\n"
       js_body += add_html_escaping(parent_raw_body, raw_fields)
 
       {
@@ -149,15 +190,17 @@ module ReactiveComponent
       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
+        value = if collection_computed.key?(var_name)
+                  evaluator.evaluate_collection(ruby_source, collection_computed[var_name])
+                else
+                  evaluator.evaluate(ruby_source)
+                end
+        data[var_name] = ReactiveComponent.sanitize_for_broadcast(value, source: ruby_source)
       end
 
       compiled[:simple_ivars].each do |ivar_name|
-        data[ivar_name] = kwargs[ivar_name.to_sym] if kwargs.key?(ivar_name.to_sym)
+        value = kwargs.key?(ivar_name.to_sym) ? kwargs[ivar_name.to_sym] : evaluator.evaluate("@#{ivar_name}")
+        data[ivar_name] = ReactiveComponent.sanitize_for_broadcast(value, source: "@#{ivar_name}")
       end
 
       data
@@ -167,44 +210,59 @@ module ReactiveComponent
       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)
+        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")
+      rb_path = component_class.instance_method(:initialize).source_location&.first
+      raise ArgumentError, "Cannot find source file for #{component_class}" unless rb_path
 
-      raise ArgumentError, "Cannot find ERB template for #{component_class}" unless erb_path && File.exist?(erb_path)
+      erb_path = erb_path_for(rb_path)
+      raise ArgumentError, "Cannot find ERB template for #{component_class}" unless erb_path
 
       File.read(erb_path)
     end
 
+    # ViewComponent supports both flat (`foo_component.html.erb`) and sidecar
+    # (`foo_component/foo_component.html.erb`) template layouts. Try both.
+    def erb_path_for(rb_path)
+      flat = rb_path.sub(/\.rb\z/, '.html.erb')
+      return flat if File.exist?(flat)
+
+      base = File.basename(rb_path, '.rb')
+      sidecar = File.join(File.dirname(rb_path), base, "#{base}.html.erb")
+      return sidecar if File.exist?(sidecar)
+
+      nil
+    end
+
     def strip_function_wrapper(js_function)
       js_function
-        .sub(/\Afunction render\(\{[^}]*\}\) \{\n?/, "")
-        .sub(/\}\s*\z/, "")
-        .gsub(/^  /, "")
+        .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"
+      destructure = "let { #{fields.join(', ')} } = data;\n"
       escaped_body = add_html_escaping(body, raw_fields)
-      helpers = include_helpers ? "#{ESCAPE_FN_JS}#{TAG_FN_JS}" : ""
+      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>';"
+      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
+        expr = ::Regexp.last_match(1)
         if raw_fields.include?(expr)
           "+= #{expr};"
         else

data/lib/reactive_component/data_evaluator.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-require "action_view"
-require "action_view/record_identifier"
+require 'action_view'
+require 'action_view/record_identifier'
 
 module ReactiveComponent
   class DataEvaluator
@@ -10,14 +10,15 @@ module ReactiveComponent
     include ActionView::Helpers::NumberHelper
     include ActionView::Helpers::TagHelper
     include ActionView::Helpers::OutputSafetyHelper
+    include ActionView::Helpers::TranslationHelper
     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
+      return unless defined?(Rails) && Rails.application
+
+      subclass.include Rails.application.routes.url_helpers
     end
 
     def self.finalize!
@@ -28,32 +29,42 @@ module ReactiveComponent
       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
+      return unless 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 StandardError
+        @component_delegate = component_class.allocate
       end
     end
 
     def evaluate(ruby_source)
       instance_eval(ruby_source)
     rescue NameError
-      @component_delegate&.instance_eval(ruby_source) rescue nil
-    rescue => e
+      begin
+        @component_delegate&.instance_eval(ruby_source)
+      rescue StandardError
+        nil
+      end
+    rescue StandardError => e
       Rails.logger.error "[ReactiveComponent::DataEvaluator] Error evaluating '#{ruby_source}': #{e.message}"
       nil
     end
 
     def render(renderable, &block)
       renderer = ReactiveComponent.renderer || ActionController::Base
+      if block
+        # ViewComponent needs block content set via with_content
+        block_result = yield
+        renderable.with_content(block_result) if renderable.respond_to?(:with_content)
+      end
       renderer.render(renderable, layout: false)
     end
 
@@ -66,9 +77,9 @@ module ReactiveComponent
       return [] unless collection
 
       block_var = computed[:block_var]
-      eval_context = self
 
       lambdas = {}
+      typed = {}
       nested = {}
       (computed[:expressions] || {}).each do |var_name, info|
         if info[:nested_component]
@@ -81,13 +92,23 @@ module ReactiveComponent
           nested[var_name] = { klass: klass, kwargs: kwarg_lambdas }
         else
           lambdas[var_name] = eval_lambda(block_var, info[:source])
+          typed[var_name] = info[:source] if info[:typed]
         end
       end
 
       collection.map do |item|
         result = {}
         lambdas.each do |var_name, fn|
-          result[var_name] = fn.call(item).to_s
+          value = fn.call(item)
+          # Condition fields keep their type — the client tests them for
+          # truthiness and "false" is truthy in JS. Output fields stay
+          # stringified so nil renders as "" rather than "null". Sanitized
+          # here, not only in build_data: the nested-component path skips it.
+          result[var_name] = if typed.key?(var_name)
+                               ReactiveComponent.sanitize_for_broadcast(value, source: typed[var_name])
+                             else
+                               value.to_s
+                             end
         end
         nested.each do |var_name, nc_info|
           kwargs_values = nc_info[:kwargs].transform_values { |fn| fn.call(item) }
@@ -97,10 +118,10 @@ module ReactiveComponent
             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
+                                 klass.build_data_for_nested(**kwargs_values)
+                               else
+                                 ReactiveComponent::Compiler.build_data_for_nested(klass, **kwargs_values)
+                               end
           end
         end
         result
@@ -111,6 +132,10 @@ module ReactiveComponent
       Rails.application.routes.default_url_options
     end
 
+    def controller
+      nil
+    end
+
     def optimize_routes_generation?
       false
     end
@@ -118,14 +143,16 @@ module ReactiveComponent
     private
 
     def eval_lambda(block_var, source)
-      instance_eval("lambda { |#{block_var}| #{source} }")
+      # lambda { |<block_var>| <source> }
+      instance_eval("lambda { |#{block_var}| #{source} }", __FILE__, __LINE__)
     rescue NameError
-      @component_delegate.instance_eval("lambda { |#{block_var}| #{source} }")
+      # lambda { |<block_var>| <source> }
+      @component_delegate.instance_eval("lambda { |#{block_var}| #{source} }", __FILE__, __LINE__)
     end
 
-    def method_missing(method, *args, **kwargs, &block)
+    def method_missing(method, ...)
       if component_own_method?(method)
-        @component_delegate.send(method, *args, **kwargs, &block)
+        @component_delegate.send(method, ...)
       else
         super
       end
@@ -137,9 +164,10 @@ module ReactiveComponent
 
     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)
+      klass.method_defined?(method, false) ||
+        klass.private_method_defined?(method, false)
     end
   end
 end

data/lib/reactive_component/engine.rb

@@ -6,13 +6,19 @@ module ReactiveComponent
   class Engine < ::Rails::Engine
     isolate_namespace ReactiveComponent
 
-    initializer "reactive_component.importmap", before: "importmap" do |app|
+    initializer 'reactive_component.data_evaluator' do
+      ReactiveComponent::DataEvaluator.finalize!
+    end
+
+    initializer 'reactive_component.importmap', before: 'importmap' do |app|
       if defined?(Importmap)
         app.config.importmap.paths <<
-          Engine.root.join("config/importmap.rb")
+          Engine.root.join('config/importmap.rb')
 
-        app.config.assets.paths <<
-          Engine.root.join("app/javascript")
+        if app.config.respond_to?(:assets)
+          app.config.assets.paths <<
+            Engine.root.join('app/javascript')
+        end
       end
     end
   end

data/lib/reactive_component/erubi.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require 'erubi'
+
+module ReactiveComponent
+  # ERB → Ruby. Erubi with a `_buf` buffer, plus one rule the stock engine
+  # lacks: an expression that opens a block (`<%= render X do %>`) is emitted
+  # as `_buf.append= expr do` so the block attaches to the call instead of to
+  # a parenthesised `.to_s`. The transpiler recognises both `<<` and `append=`.
+  class Erubi < ::Erubi::Engine
+    BLOCK_EXPR = /((\s|\))do|\{)(\s*\|[^|]*\|)?\s*\Z/
+
+    def initialize(input, properties = {})
+      properties[:bufvar] ||= '_buf'
+      properties[:preamble] ||= "#{properties[:bufvar]} = ::String.new;"
+      properties[:postamble] ||= "#{properties[:bufvar]}.to_s"
+      super
+    end
+
+    private
+
+    def add_expression(_indicator, code)
+      if BLOCK_EXPR.match?(code)
+        src << " #{@bufvar}.append= " << code
+      else
+        src << " #{@bufvar} << (" << code << ').to_s;'
+      end
+    end
+  end
+end