jsx_rosetta 0.4.0 → 0.5.1

data/lib/jsx_rosetta/backend/view_component.rb

@@ -42,6 +42,32 @@ module JsxRosetta
         "Image" => { method: :image_tag, positional: :src }.freeze
       }.freeze
 
+      # Per-library TODO header lines surfaced above the verbatim hook
+      # source. Each library has a different Rails analog, so we don't
+      # collapse them into a single generic block. Keys must mirror the
+      # `:library` values produced by IR::Lowering. First line is rendered
+      # with the `<%#` opener; subsequent lines are indented continuation.
+      HOOK_TODO_HEADERS = {
+        react: [
+          "TODO: React hooks detected. None translate automatically. Hotwire/Stimulus",
+          "handles behavior; controllers/views handle state; turbo-frames handle async",
+          "loading. Original source:"
+        ].freeze,
+        apollo: [
+          "TODO: Apollo data-fetching hooks detected. None translate automatically.",
+          "Move the fetch to the Rails controller (or a model/service); pass the",
+          "result in as a prop. For useMutation, use a form POST + redirect or a",
+          "Turbo Stream response. Original source:"
+        ].freeze,
+        next_js: [
+          "TODO: Next.js navigation hooks detected. None translate automatically.",
+          "Rails analogs: useRouter -> redirect_to / form actions;",
+          "usePathname -> request.path; useSearchParams / useParams -> params;",
+          "useSelectedLayoutSegment(s) -> match against request.path in the view.",
+          "Original source:"
+        ].freeze
+      }.freeze
+
       def initialize(helpers: nil, layout: :sidecar)
         super()
         @helpers = case helpers
@@ -57,15 +83,17 @@ module JsxRosetta
       end
 
       def emit(component)
-        prop_names = component.props.map(&:name)
-        prop_names << component.rest_prop_name if component.rest_prop_name
-        translator = ExpressionTranslator.new(
-          prop_names: prop_names, local_binding_names: component.local_binding_names
-        )
-
+        translator = build_translator(component)
         base_name = "#{AST::Inflector.underscore(component.name)}_component"
         @stimulus_identifier = component.stimulus_methods.any? ? stimulus_identifier(component) : nil
 
+        # Data-factory components (column-descriptor modules) have no
+        # template — they're pure-data classes. Skip the .erb pair and
+        # emit a single .rb with the factory method. JSX render lambdas
+        # inside the data have nowhere to live in the ViewComponent
+        # ERB-template world, so we surface a TODO note in the class.
+        return emit_data_factory(component) if component.mode == :data_factory
+
         files = [
           File.new(path: "#{base_name}.rb", contents: render_ruby_class(component, translator)),
           File.new(path: erb_path(base_name), contents: render_erb_template(component, translator))
@@ -79,6 +107,85 @@ module JsxRosetta
         files
       end
 
+      # For data-factory components emit a plain Ruby class (no ApplicationViewComponent
+      # base, no ERB template). The user can mix it into a ViewComponent or call
+      # the method directly — the goal is to surface the translated data array,
+      # not to render it in isolation.
+      def emit_data_factory(component)
+        method_name = AST::Inflector.underscore(component.name)
+        param_names = component.props.map(&:name)
+        translator = ExpressionTranslator.new(prop_names: [], local_binding_names: param_names)
+        signature = data_factory_signature(method_name, param_names)
+        body = translator.with_locals(param_names) do
+          inline_render_value(component.body, translator, indent: 4)
+        end
+        contents = <<~RUBY
+          # frozen_string_literal: true
+
+          # TODO: data-factory module — the translated array contains JSX render
+          # lambdas as `nil` placeholders. Wire each up to a Phlex helper or a
+          # method on the consuming ViewComponent.
+          class #{class_name_for(component)}
+            def #{signature}
+              #{body}
+            end
+          end
+        RUBY
+        [File.new(path: "#{AST::Inflector.underscore(component.name)}.rb", contents: contents)]
+      end
+
+      def class_name_for(component)
+        component.name[0].upcase + component.name[1..]
+      end
+
+      def data_factory_signature(method_name, param_names)
+        return method_name if param_names.empty?
+
+        kwargs = param_names.map { |name| "#{AST::Inflector.underscore(name)}: nil" }
+        "#{method_name}(#{kwargs.join(", ")})"
+      end
+
+      # Recursively render a non-JSX value (ObjectLiteral / ArrayLiteral /
+      # Lambda / Interpolation / primitives) without the kwarg-list
+      # context the Phlex backend uses. IR::Lambda and unmatched cases
+      # both fall through to `nil` — there's no Phlex class to host a
+      # rendered method body, and the class-level TODO comment above the
+      # emitted file already flags both for the reviewer.
+      def inline_render_value(value, translator, indent: 0)
+        case value
+        when IR::ObjectLiteral then render_factory_object_literal(value, translator, indent: indent)
+        when IR::ArrayLiteral then render_factory_array_literal(value, translator, indent: indent)
+        when IR::Interpolation then translator.translate(value.expression)&.ruby || "nil"
+        when String then value.inspect
+        when true then "true"
+        else "nil"
+        end
+      end
+
+      def render_factory_object_literal(obj, translator, indent:)
+        parts = obj.properties.map do |(key, value)|
+          rendered = inline_render_value(value, translator, indent: indent + 2)
+          snake = AST::Inflector.underscore(key)
+          if snake.match?(/\A[a-z_][a-z0-9_]*\z/)
+            "#{snake}: #{rendered}"
+          else
+            "#{key.inspect} => #{rendered}"
+          end
+        end
+        "{ #{parts.join(", ")} }"
+      end
+
+      def render_factory_array_literal(arr, translator, indent:)
+        parts = arr.elements.map do |el|
+          el.nil? ? "nil" : inline_render_value(el, translator, indent: indent + 2)
+        end
+        return "[]" if parts.empty?
+
+        pad = " " * (indent + 2)
+        close_pad = " " * indent
+        "[\n#{pad}#{parts.join(",\n#{pad}")}\n#{close_pad}]"
+      end
+
       def erb_path(base_name)
         @layout == :sidecar ? "#{base_name}/#{base_name}.html.erb" : "#{base_name}.html.erb"
       end
@@ -123,6 +230,19 @@ module JsxRosetta
 
       private
 
+      def build_translator(component)
+        prop_names = component.props.map(&:name)
+        prop_names << component.rest_prop_name if component.rest_prop_name
+        prop_aliases = component.props.each_with_object({}) do |prop, hash|
+          hash[prop.alias_name] = prop.name if prop.alias_name
+        end
+        ExpressionTranslator.new(
+          prop_names: prop_names,
+          local_binding_names: component.local_binding_names,
+          prop_aliases: prop_aliases
+        )
+      end
+
       def initializable_props(component)
         component.props.reject { |prop| prop.name == DEFAULT_SLOT_NAME }
       end
@@ -131,21 +251,50 @@ module JsxRosetta
         props = initializable_props(component)
         rest_name = component.rest_prop_name
 
-        body = if props.empty? && rest_name.nil?
-                 <<~RUBY
-                   # frozen_string_literal: true
-
-                   class #{component.name}Component < ::ViewComponent::Base
-                   end
-                 RUBY
-               else
-                 render_ruby_class_with_props(component, props, rest_name, translator)
-               end
+        body = render_class_with_optional_props(component, props, rest_name, translator)
+        body = inject_render_method_skeletons(body, component)
 
         prefix = render_module_bindings_prefix(component)
         prefix.empty? ? body : insert_module_bindings_prefix(body, prefix)
       end
 
+      def render_class_with_optional_props(component, props, rest_name, translator)
+        if props.empty? && rest_name.nil?
+          <<~RUBY
+            # frozen_string_literal: true
+
+            class #{component.name}Component < ::ViewComponent::Base
+            end
+          RUBY
+        else
+          render_ruby_class_with_props(component, props, rest_name, translator)
+        end
+      end
+
+      # For each RenderMethod, emit a method skeleton on the class just
+      # before the closing `end`. ERB-rendered VC bodies don't translate
+      # cleanly to Ruby methods (Phlex does — see its renderer), so the
+      # skeleton stays empty and the JSX source is preserved as a comment
+      # for the reviewer to translate by hand.
+      def inject_render_method_skeletons(body, component)
+        return body if component.render_methods.empty?
+
+        skeletons = component.render_methods.map { |rm| render_method_skeleton(rm) }
+        body.sub(/(\n)end\n\z/, "\n\n#{skeletons.join("\n\n")}\\1end\n")
+      end
+
+      def render_method_skeleton(render_method)
+        snake_params = render_method.params.map { |p| AST::Inflector.underscore(p) }
+        signature = snake_params.empty? ? render_method.name : "#{render_method.name}(#{snake_params.join(", ")})"
+        [
+          "  # TODO: translate the JSX body for #{render_method.name} — was a",
+          "  # local arrow returning JSX in the source component.",
+          "  def #{signature}",
+          "    \"\"",
+          "  end"
+        ].join("\n")
+      end
+
       def render_module_bindings_prefix(component)
         return "" if component.module_bindings.empty?
 
@@ -169,14 +318,15 @@ module JsxRosetta
       end
 
       def render_ruby_class_with_props(component, props, rest_name, translator)
+        rest_snake = rest_name && AST::Inflector.underscore(rest_name)
         kwargs = props.map { |prop| ruby_kwarg(prop, translator) }
-        kwargs << "**#{rest_name}" if rest_name
+        kwargs << "**#{rest_snake}" if rest_snake
 
         assignments = props.map do |prop|
           snake = AST::Inflector.underscore(prop.name)
           "    @#{snake} = #{snake}"
         end
-        assignments << "    @#{rest_name} = #{rest_name}" if rest_name
+        assignments << "    @#{rest_snake} = #{rest_snake}" if rest_snake
 
         <<~RUBY
           # frozen_string_literal: true
@@ -265,14 +415,20 @@ module JsxRosetta
       def render_react_hooks_todo(hooks)
         return "" if hooks.empty?
 
-        lines = [
-          "<%# TODO: React hooks detected. None translate automatically. Hotwire/Stimulus",
-          "    handles behavior; controllers/views handle state; turbo-frames handle async",
-          "    loading. Original source:"
-        ]
-        hooks.each { |hook| lines << "    #{hook.source}" }
+        blocks = hooks.group_by(&:library).map { |library, calls| hook_todo_block(library, calls) }
+        "#{blocks.join("\n")}\n"
+      end
+
+      def hook_todo_block(library, calls)
+        header_lines = HOOK_TODO_HEADERS.fetch(library, HOOK_TODO_HEADERS[:react])
+        lines = ["<%# #{header_lines.first}"]
+        header_lines.drop(1).each { |line| lines << "    #{line}" }
+        calls.each do |call|
+          lines << "    operation: #{call.operation}" if call.operation
+          lines << "    #{call.source}"
+        end
         lines << "%>"
-        "#{lines.join("\n")}\n"
+        lines.join("\n")
       end
 
       def render_ir_node(node, translator, indent:)
@@ -283,6 +439,7 @@ module JsxRosetta
         when IR::Conditional then render_conditional(node, translator, indent: indent)
         when IR::Loop then render_loop(node, translator, indent: indent)
         when IR::RenderProp then render_orphan_render_prop(node, translator, indent: indent)
+        when IR::LocalRenderCall then render_local_render_call(node, translator, indent: indent)
         when IR::Slot then render_slot(node, indent: indent)
         when IR::Text then "#{spaces(indent)}#{node.value}"
         when IR::Interpolation then "#{spaces(indent)}#{interpolation_to_erb(node, translator)}"
@@ -290,6 +447,23 @@ module JsxRosetta
         end
       end
 
+      # `{renderHeader(arg)}` → `<%= render_header(arg) %>`. The matching
+      # method definition is emitted on the component class via
+      # `render_render_methods_section`. The class method returns an
+      # HTML-safe string (Rails' `content_tag` / `safe_join` is the
+      # canonical approach), and `<%= %>` interpolates it into the template.
+      def render_local_render_call(call, translator, indent:)
+        if call.args.empty?
+          "#{spaces(indent)}<%= #{call.method_name} %>"
+        else
+          arg_sources = call.args.map do |arg|
+            translated = translator.translate(arg.expression)
+            translated ? translated.ruby : arg.expression
+          end
+          "#{spaces(indent)}<%= #{call.method_name}(#{arg_sources.join(", ")}) %>"
+        end
+      end
+
       def render_orphan_render_prop(render_prop, translator, indent:)
         translator.with_locals(render_prop.params) do
           render_ir_node(render_prop.body, translator, indent: indent)
@@ -531,9 +705,16 @@ module JsxRosetta
         lines.join("\n")
       end
 
+      # A translated value of `"nil"` is treated as untranslatable: the
+      # translator emits `"nil"` for known-local bindings (so the file
+      # loads as a leaf reference), but driving an `<% if %>` with `nil`
+      # silently disables the whole branch. Fall back to the verbatim
+      # expression so the human reviewer sees what needs translating.
       def render_test_expression(test, translator)
         translated = translator.translate(test.expression)
-        translated ? translated.ruby : test.expression
+        return translated.ruby if translated && translated.ruby != "nil"
+
+        test.expression
       end
 
       def render_slot(slot, indent:)
@@ -644,7 +825,7 @@ module JsxRosetta
       # literal portions literally and the interpolations as ERB tags.
       def plain_attribute_value_erb(interpolation, translator)
         translated = translator.translate(interpolation.expression)
-        if double_quoted_ruby_string?(translated&.ruby) && translated.unresolved_identifiers.empty?
+        if quoted_ruby_string?(translated&.ruby) && translated.unresolved_identifiers.empty?
           inlined_ruby_string(translated.ruby)
         else
           interpolation_to_erb(interpolation, translator)
@@ -653,7 +834,7 @@ module JsxRosetta
 
       def render_style_binding(binding, translator)
         translated = translator.translate(binding.expression)
-        if double_quoted_ruby_string?(translated&.ruby)
+        if quoted_ruby_string?(translated&.ruby)
           %(class="#{inlined_ruby_string(translated.ruby)}")
         elsif translated
           %(class="<%= #{translated.ruby} %>")
@@ -662,8 +843,11 @@ module JsxRosetta
         end
       end
 
-      def double_quoted_ruby_string?(ruby)
-        ruby.is_a?(String) && ruby.start_with?('"') && ruby.end_with?('"')
+      def quoted_ruby_string?(ruby)
+        ruby.is_a?(String) && (
+          (ruby.start_with?('"') && ruby.end_with?('"')) ||
+          (ruby.start_with?("'") && ruby.end_with?("'"))
+        )
       end
 
       # Given a Ruby double-quoted string with #{...} interpolations, emit it