jsx_rosetta 0.3.0 → 0.5.1

data/lib/jsx_rosetta/backend/view_component.rb

@@ -28,6 +28,12 @@ module JsxRosetta
       DEFAULT_SLOT_NAME = "children"
       VOID_ELEMENTS = %w[area base br col embed hr img input link meta param source track wbr].freeze
 
+      # Structured intermediate for tag_builder_data_action — avoids the
+      # fragile "parse what you just rendered" pattern. :literal is a raw
+      # action token like `"click->foo#bar"`; :ruby is a Ruby expression
+      # whose value is the action string (e.g. `event.handler.expression`).
+      EventDescriptor = Data.define(:kind, :body)
+
       # JSX component names that have a direct Rails view-helper analog.
       # Override per-instance via `ViewComponent.new(helpers: {...})`, or
       # disable by passing `helpers: false`.
@@ -36,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
@@ -51,13 +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)
-
+        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))
@@ -71,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
@@ -101,7 +216,12 @@ module JsxRosetta
       def stimulus_method_lines(method)
         body_lines = method.body_source.strip.split("\n")
         commented = body_lines.map { |line| "  //   #{line}" }
-        ["  // TODO: translate from the original JSX handler:"] + commented + [
+        header = ["  // TODO: translate from the original JSX handler:"]
+        if method.name != method.original_name
+          header.unshift("  // NOTE: method renamed from #{method.original_name.inspect} " \
+                         "to avoid collision with an earlier handler")
+        end
+        header + commented + [
           "  #{method.name}(event) {",
           "    // ...",
           "  }"
@@ -110,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
@@ -118,6 +251,14 @@ module JsxRosetta
         props = initializable_props(component)
         rest_name = component.rest_prop_name
 
+        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
@@ -130,15 +271,62 @@ module JsxRosetta
         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?
+
+        lines = ["# TODO: module-level constants — translate to Ruby constants " \
+                 "or move to a Rails initializer:"]
+        component.module_bindings.each { |b| lines.concat(comment_lines(b.source)) }
+        "#{lines.join("\n")}\n"
+      end
+
+      # The class body already starts with the magic comment — splice the
+      # module-bindings prefix in between so it lands above the class.
+      def insert_module_bindings_prefix(body, prefix)
+        magic = "# frozen_string_literal: true\n\n"
+        return "#{prefix}#{body}" unless body.start_with?(magic)
+
+        "#{magic}#{prefix}#{body[magic.length..]}"
+      end
+
+      def comment_lines(source)
+        source.split("\n").map { |line| "#   #{line}" }
+      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
@@ -160,8 +348,41 @@ module JsxRosetta
       def ruby_default_for(prop, translator)
         return "nil" if prop.default.nil?
 
-        translated = translator.translate(prop.default.expression)
-        translated ? translated.ruby : "nil # TODO: translate #{prop.default.expression.inspect}"
+        case prop.default
+        when IR::Interpolation
+          translated = translator.translate(prop.default.expression)
+          translated ? translated.ruby : "nil"
+        when IR::ObjectLiteral then render_object_literal_default(prop.default, translator)
+        when IR::ArrayLiteral then render_array_literal_default(prop.default, translator)
+        else "nil"
+        end
+      end
+
+      def render_object_literal_default(object_literal, translator)
+        pairs = object_literal.properties.map do |(key, value)|
+          snake = AST::Inflector.underscore(key)
+          key_str = snake.match?(/\A[a-z_][a-z0-9_]*\z/i) ? "#{snake}:" : "#{key.inspect} =>"
+          "#{key_str} #{render_default_inline_value(value, translator)}"
+        end
+        "{ #{pairs.join(", ")} }"
+      end
+
+      def render_array_literal_default(array_literal, translator)
+        parts = array_literal.elements.map { |el| el.nil? ? "nil" : render_default_inline_value(el, translator) }
+        "[#{parts.join(", ")}]"
+      end
+
+      def render_default_inline_value(value, translator)
+        case value
+        when IR::ObjectLiteral then render_object_literal_default(value, translator)
+        when IR::ArrayLiteral then render_array_literal_default(value, translator)
+        when IR::Interpolation
+          translated = translator.translate(value.expression)
+          translated ? translated.ruby : "nil"
+        when String then value.inspect
+        when true then "true"
+        else "nil"
+        end
       end
 
       def render_erb_template(component, translator)
@@ -194,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:)
@@ -211,6 +438,8 @@ module JsxRosetta
         when IR::Fragment then render_fragment(node, translator, indent: indent)
         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)}"
@@ -218,8 +447,31 @@ 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)
+        end
+      end
+
       def render_loop(loop_node, translator, indent:)
-        iterable_ruby = render_test_expression(loop_node.iterable, translator)
+        iterable_ruby = render_loop_iterable(loop_node.iterable, translator)
         js_bindings = [loop_node.item_binding, loop_node.index_binding].compact
         ruby_bindings = js_bindings.map { |name| AST::Inflector.underscore(name) }
         binding_str = "|#{ruby_bindings.join(", ")}|"
@@ -235,6 +487,14 @@ module JsxRosetta
         ].join("\n")
       end
 
+      def render_loop_iterable(iterable, translator)
+        case iterable
+        when IR::ArrayLiteral then render_array_literal_default(iterable, translator)
+        when IR::Interpolation then render_test_expression(iterable, translator)
+        else "[]"
+        end
+      end
+
       def render_element(element, translator, indent:)
         return render_element_with_tag_builder(element, translator, indent: indent) if needs_tag_builder?(element)
 
@@ -312,13 +572,11 @@ module JsxRosetta
 
       def tag_builder_data_action(events, translator)
         descriptors = events.map { |event| tag_builder_event_descriptor(event, translator) }
-        all_literal = descriptors.all? { |d| d.start_with?('"') && d.end_with?('"') }
-        joined = if descriptors.size == 1
-                   descriptors.first
-                 elsif all_literal
-                   %("#{descriptors.map { |d| d[1..-2] }.join(" ")}")
+        joined = case descriptors
+                 in [single]
+                   render_single_event_descriptor(single)
                  else
-                   %("#{descriptors.map { |d| literal_to_interpolated(d) }.join(" ")}")
+                   %("#{descriptors.map { |d| descriptor_in_string(d) }.join(" ")}")
                  end
         %("data-action" => #{joined})
       end
@@ -327,23 +585,34 @@ module JsxRosetta
         case event
         when IR::EventBinding
           translated = translator.translate(event.handler.expression)
-          translated ? translated.ruby : event.handler.expression.inspect
+          if translated
+            EventDescriptor.new(:ruby, translated.ruby)
+          else
+            EventDescriptor.new(:ruby, event.handler.expression.inspect)
+          end
         when IR::StimulusBinding
-          %("#{event.event}->#{@stimulus_identifier}##{event.method_name}")
+          EventDescriptor.new(:literal, "#{event.event}->#{@stimulus_identifier}##{event.method_name}")
         end
       end
 
-      def literal_to_interpolated(descriptor)
-        if descriptor.start_with?('"') && descriptor.end_with?('"')
-          descriptor[1..-2]
-        else
-          "\#{#{descriptor}}"
-        end
+      def render_single_event_descriptor(descriptor)
+        descriptor.kind == :literal ? %("#{descriptor.body}") : descriptor.body
+      end
+
+      # Render a descriptor inline inside a Ruby string literal: literals
+      # are spliced verbatim, ruby expressions become `#{...}`.
+      def descriptor_in_string(descriptor)
+        descriptor.kind == :literal ? descriptor.body : "\#{#{descriptor.body}}"
       end
 
+      # Wrap the spread expression in `(… || {})` so a nil-valued prop
+      # default doesn't raise at render time. `<div {...maybeNil}>` →
+      # `**(@maybe_nil || {})`. Cheap to emit unconditionally; the
+      # `|| {}` shortcuts on non-nil values.
       def tag_builder_spread(expression, translator)
         translated = translator.translate(expression)
-        translated ? translated.ruby : expression
+        ruby = translated ? translated.ruby : expression
+        "(#{ruby} || {})"
       end
 
       def render_component_invocation(invocation, translator, indent:)
@@ -354,7 +623,10 @@ module JsxRosetta
         class_name = component_class_name(invocation.name)
         new_call = kwargs.empty? ? "#{class_name}.new" : "#{class_name}.new(#{kwargs})"
 
-        if invocation.children.empty?
+        render_prop = invocation.children.find { |c| c.is_a?(IR::RenderProp) }
+        if render_prop
+          render_component_with_render_prop(new_call, render_prop, translator, indent)
+        elsif invocation.children.empty?
           "#{spaces(indent)}<%= render #{new_call} %>"
         else
           inner = invocation.children.map { |child| render_ir_node(child, translator, indent: indent + 2) }.join("\n")
@@ -362,6 +634,15 @@ module JsxRosetta
         end
       end
 
+      def render_component_with_render_prop(new_call, render_prop, translator, indent)
+        snake_params = render_prop.params.map { |p| AST::Inflector.underscore(p) }
+        param_str = snake_params.empty? ? "" : " |#{snake_params.join(", ")}|"
+        inner = translator.with_locals(render_prop.params) do
+          render_ir_node(render_prop.body, translator, indent: indent + 2)
+        end
+        "#{spaces(indent)}<%= render #{new_call} do#{param_str} %>\n#{inner}\n#{spaces(indent)}<% end %>"
+      end
+
       # JSX `<Foo.Bar>` → Ruby `Foo::BarComponent`. Plain `<Card>` stays as
       # `CardComponent`. Each member-expression segment joins with `::`,
       # and `Component` suffixes the leaf so the result is a constant path
@@ -424,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:)
@@ -455,52 +743,53 @@ module JsxRosetta
       end
 
       def render_style(style, translator)
-        rendered = style.declarations.map { |decl| render_style_declaration(decl, translator) }.join(" ")
+        rendered = style.declarations.map { |decl| style_declaration(decl, translator, format: :erb) }.join(" ")
         %(style="#{rendered}")
       end
 
-      def render_style_declaration(decl, translator)
+      def render_class_list_attribute(class_list, translator)
+        parts = class_list.segments.map { |seg| class_segment(seg, translator, format: :erb) }
+        %(class="#{parts.join(" ")}")
+      end
+
+      def class_list_to_ruby_string(class_list, translator)
+        parts = class_list.segments.map { |seg| class_segment(seg, translator, format: :ruby_string) }
+        %("#{parts.join(" ")}")
+      end
+
+      # Render one IR::Style declaration in either ERB-template form
+      # (`color: <%= @c %>;`) or Ruby-string-interpolation form
+      # (`color: #{@c};`).
+      def style_declaration(decl, translator, format:)
         value = case decl.value
                 when String then decl.value
-                when IR::Interpolation
-                  translated = translator.translate(decl.value.expression)
-                  "<%= #{translated&.ruby || decl.value.expression} %>"
+                when IR::Interpolation then interpolation_value(decl.value.expression, translator, format: format)
                 end
         "#{decl.property}: #{value};"
       end
 
-      def render_class_list_attribute(class_list, translator)
-        parts = class_list.segments.map { |seg| class_segment_for_html(seg, translator) }
-        %(class="#{parts.join(" ")}")
-      end
-
-      def class_segment_for_html(segment, translator)
+      # Render one ClassList segment in either ERB-template form or Ruby
+      # string-interpolation form.
+      def class_segment(segment, translator, format:)
         case segment
         when String then segment
-        when IR::Interpolation
-          translated = translator.translate(segment.expression)
-          "<%= #{translated&.ruby || segment.expression} %>"
-        when IR::ConditionalSegment
-          cond_translated = translator.translate(segment.condition.expression)
-          cond_ruby = cond_translated&.ruby || segment.condition.expression
-          "<%= #{cond_ruby} ? #{segment.class_name.inspect} : '' %>"
+        when IR::Interpolation then interpolation_value(segment.expression, translator, format: format)
+        when IR::ConditionalSegment then conditional_class_segment(segment, translator, format: format)
         end
       end
 
-      def class_list_to_ruby_string(class_list, translator)
-        parts = class_list.segments.map { |seg| class_segment_for_ruby(seg, translator) }
-        %("#{parts.join(" ")}")
+      def interpolation_value(expression, translator, format:)
+        translated = translator.translate(expression)
+        ruby = translated&.ruby || expression
+        format == :erb ? "<%= #{ruby} %>" : "\#{#{ruby}}"
       end
 
-      def class_segment_for_ruby(segment, translator)
-        case segment
-        when String then segment
-        when IR::Interpolation
-          translated = translator.translate(segment.expression)
-          "\#{#{translated&.ruby || segment.expression}}"
-        when IR::ConditionalSegment
-          cond_translated = translator.translate(segment.condition.expression)
-          cond_ruby = cond_translated&.ruby || segment.condition.expression
+      def conditional_class_segment(segment, translator, format:)
+        cond_translated = translator.translate(segment.condition.expression)
+        cond_ruby = cond_translated&.ruby || segment.condition.expression
+        if format == :erb
+          "<%= #{cond_ruby} ? #{segment.class_name.inspect} : '' %>"
+        else
           %(\#{#{cond_ruby} ? #{segment.class_name.inspect} : ""})
         end
       end
@@ -536,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)
@@ -545,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} %>")
@@ -554,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
@@ -598,15 +890,7 @@ module JsxRosetta
       end
 
       def style_to_ruby_string(style, translator)
-        parts = style.declarations.map do |decl|
-          value = case decl.value
-                  when String then decl.value
-                  when IR::Interpolation
-                    translated = translator.translate(decl.value.expression)
-                    "\#{#{translated&.ruby || decl.value.expression}}"
-                  end
-          "#{decl.property}: #{value};"
-        end
+        parts = style.declarations.map { |decl| style_declaration(decl, translator, format: :ruby_string) }
         %("#{parts.join(" ")}")
       end
 

data/lib/jsx_rosetta/backend.rb

@@ -4,6 +4,7 @@ require_relative "backend/base"
 require_relative "backend/view_component"
 require_relative "backend/view_component/expression_translator"
 require_relative "backend/rails_view"
+require_relative "backend/phlex"
 require_relative "backend/routes_script"
 
 module JsxRosetta