Begin end

[lsproule]

it would be really nice if we could do something like this

<%= turbo_mount("Card", props: {...}) do %>
 // Regular erb
<% end %>

This would be really cool because then I could create components in react that control a majority of the layout, but for a form or something like that. I can just render the erb there. If this is a feature, I didn't see it, so I was curious what it would take to implement, and if you have any suggestions or ideas. I would love to help on this.

[skryukov]

Hey @lsproule thanks for the issue!

I don't think this should be a default behavior, but you can achieve it using a custom plugin like this (using React as example):

import { buildRegisterFunction, TurboMount } from "turbo-mount";
import { createElement, Fragment } from "react";
import { createRoot } from "react-dom/client";

const plugin = {
  mountComponent: (mountProps) => {
    const { el, Component, props } = mountProps;
    const root = createRoot(el);

    // using <template> as a wrapper prevents inner HTML from being displayed on load
    // (SSR is another option)
    const html = (el.querySelector('template') || el).innerHTML

    // Note: this adds another div to wrap HTML elements. You can use custom React
    // components here or pass innerHTML as prop to the original component for better control
    props.children = createElement('div', { dangerouslySetInnerHTML: { __html: html } });

    root.render(createElement(Component, props));

    return () => {
      root.unmount();
    };
  },
};

const registerComponent = buildRegisterFunction(plugin);

export { TurboMount, registerComponent };

export default plugin;

See full demo:
https://stackblitz.com/~/edit/turbo-mount-example-react?file=customReactPlugin.js

[dark-panda]

This would be quite helpful I think for Vue as well, but I've been struggling to sort out how one would go about replicating this using Vue. Anyone have something similar working in Vue? I was also thinking of extending things so you could do slots kind of like this:

<%= turbo_mount('Card', ...) do |card| %>
  <% card.title_slot do %>
    <h1>Title</h1>
  <% end %>

  <% card.body_slot do %>
    <p>This is the body</p>
  <% end %>
<% end %>

I think that would be quite helpful, but I'm pretty new to Vue. We've been investigating Vue recently because some of the bits of our stack like to use Vue for their examples, while we have stuck solely to Stimulus up to this point, and it generally requires that we convert the examples when we encounter them. Being able to more directly replicate the example code using Vue would be a boon for us.

[lsproule]

I am using ssr components to do this now. I actually removed turbo-mount. I just couldn't stomach dangerously set inner html.

require "rails"
require "rails/railtie"

require "net/http"
require "json"
require "securerandom"

module ViteReact
  module ReactComponentHelper
    # Usage:
    #   <%== react_component("MyComponent", props: { name: "Alice" }) %>
    # for client‑side hydration, and:
    #
    #   <%== react_component("MyComponent", props: { name: "Alice" }) do %>
    #     <div>Extra ERB content</div>
    #   <% end %>
    #
    # for SSR via renderToPipeableStream.
    def react_component(name, props: {}, &block)
      if block_given?
        # SERVER‑SIDE RENDERING: capture block content
        children_html = capture(&block)
        # Merge in the children as a prop for your React component
        props_with_children = props.merge(children: children_html)
        ssr_html = render_react_component_ssr(name, props_with_children)
        ssr_html
      else
        # CLIENT‑SIDE RENDERING: output a placeholder div with data attributes
        placeholder_id = "react-component-#{SecureRandom.hex(8)}"
        content_tag(:div, "",
                    id: placeholder_id,
                    data: { react_component: name, props: props.to_json })
      end
    end

    private

    def render_react_component_ssr(name, props)
      port = 4000 # ViteReact.config.node_server_port || 4000
      uri = URI("http://localhost:#{port}/render")
      http = Net::HTTP.new(uri.host, uri.port)
      req = Net::HTTP::Post.new(uri, "Content-Type" => "application/json")
      req.body = { component: name, props: props }.to_json

      res = http.request(req)
      if res.is_a?(Net::HTTPSuccess)
        res.body.html_safe
      else
        Rails.logger.error("SSR Error: #{res.code} #{res.body}")
        "Error rendering component"
      end
    rescue => e
      Rails.logger.error("SSR Exception: #{e.message}")
      "Error rendering component"
    end
  end
end


module ViteReact
  class Railtie < ::Rails::Railtie
    initializer "vite_react.action_view" do
      ActiveSupport.on_load(:action_view) do
        include ViteReact::ReactComponentHelper
      end
    end
    rake_tasks do
      load "tasks/install.rake"
    end
  end
end


module ViteReact
  module ReactComponentHelper
    # Renders a React component with extended options.
    #
    # Options:
    #   - i18n: if true, merge current locale translations from Rails I18n YAML into props under :i18n.
    #   - filename: if provided, used to determine the component file path on the Node server.
    #
    # Example usage:
    #   <%== react_component("MyComponent", file_name="CustomFile", props: { name: "Alice" }, options: { i18n: true }) %>
    def react_component(name, file_name: nil,  props: {}, options: {}, &block)
      # Process options BEFORE any other logic.
      if options[:i18n]
        # Fetch only translations for the current locale from the YAML files.
        translations = I18n.backend.send(:translations)[I18n.locale] || {}
        props[:i18n] = translations
      end
      filename = name if file_name.nil?
      if block_given?
        # SERVER‑SIDE RENDERING: capture block content as children.
        children_html = capture(&block)
        props_with_children = props.merge(children: children_html)
        ssr_html = render_react_component_ssr(name, props_with_children, filename)
        ssr_html
      else
        # CLIENT‑SIDE RENDERING: output a placeholder div with data attributes.
        placeholder_id = "react-component-#{SecureRandom.hex(8)}"
        data_attributes = { react_component: name, props: props.to_json }
        data_attributes[:filename] = filename if filename
        content_tag(:div, "", id: placeholder_id, data: data_attributes)
      end
    end

    private

    def render_react_component_ssr(name, props, filename = nil)
      port = 4000 # Alternatively, use ViteReact.config.node_server_port || 4000
      uri = URI("http://localhost:#{port}/render")
      http = Net::HTTP.new(uri.host, uri.port)
      req = Net::HTTP::Post.new(uri, "Content-Type" => "application/json")
      payload = { component: name, props: props }
      payload[:filename] = filename if filename
      req.body = payload.to_json

      res = http.request(req)
      if res.is_a?(Net::HTTPSuccess)
        res.body.html_safe
      else
        Rails.logger.error("SSR Error: #{res.code} #{res.body}")
        "Error rendering component"
      end
    rescue => e
      Rails.logger.error("SSR Exception: #{e.message}")
      "Error rendering component"
    end
  end
end

[skryukov]

Thanks for the snippet @lsproule, what do you use on the node.js side?

[lsproule]

Vite has the ability to just render the components. I do need a bit of a hacky script

import express, { Request, Response } from 'express';
import { createServer as createViteServer } from 'vite';
import React from "react";
import { renderToPipeableStream } from "react-dom/server";
import parse from 'html-react-parser';



const port = process.env.PORT || 4000;

async function startServer() {
  const app = express();

  // Create Vite server in middleware mode.
  const vite = await createViteServer({
    server: { middlewareMode: true },
    appType: 'custom'
  });

  // Use Vite's middleware.
  app.use(vite.middlewares);

  app.use(express.json());

  // SSR render endpoint
  app.post("/render", async (req: Request, res: Response) => {
    try {
      const { component, props } = req.body;
      console.log("props", props)
      render(component, props, res);
    } catch (error) {
      vite.ssrFixStacktrace(error as Error);
      console.error("SSR error:", error);
      res.status(500).send("Internal Server Error");
    }
  });

  app.listen(port, () => console.log(`vite_react_ssr Node server listening on port ${port}`));
}



async function render(componentName: string, props: any, res: Response) {

  const module = await import(`@/ssr-components/${componentName}.tsx`);
  const Component = module.default;
  if (props?.children) {
    props.children = parse(props.children);
  }

  const element = React.createElement(Component, props);

  const streamObj = renderToPipeableStream(element, {
    onShellReady() {
      res.setHeader("Content-Type", "text/html");
      streamObj.pipe(res);
    },
    onShellError(error) {
      console.error("Shell error:", error);
      res.status(500).send("Internal Server Error");
    },
    onError(error) {
      console.error("Streaming error:", error);
    }
  });
}

startServer();

[lsproule]

I am thinking of how I want to clean it up, but I saw what you guys were doing and was like that is sick. I specialized mine for react because I wanted to be able to use shadcn components and v0 because I hate frontend code, but it's kinda sick because I can use turbo streams inside react. So rails websockets can just dynamically modify the page

[skryukov]

Thanks @lsproule, I hope this will help me finally start working on the the SSR support for Turbo Mount 😄

[lsproule]

I think it needs it because like

<%= turbo_stream_from "somthing" %>
<%= react_component('App') %>
  <div>hello</div>
  <div id="replace"></div>
<% end %>

this is valid in my project, and it just ssr render the component without dangerously setting the html, so I can use react and erb interchangeably in server components. As much as I think server side components were silly... they kinda save my ass here. I would really like to fix this

props.children = parse(props.children);

I have to parse html into "react" which is a bit of a sharp edge, but less than dangerously set innerhtml, and I am thinking maybe I could find a c/c++/rust html -> react parser and this would become a non-issue. I just don't want to do it in js or ruby tbh.

[lsproule]

if anyone has any suggestions, I would love to hear it.

[skryukov]

if anyone has any suggestions, I would love to hear it.

@lsproule could you elaborate on why you are using html-react-parser instead of dangerouslySetInnerHTML? Rails handles sanitation for us, so using dangerouslySetInnerHTML should be absolutely fine from an XSS point of view (ERB will just return the same string as is in the body of the HTML, right?). Also, html-react-parser doesn't sanitize input anyway. So, is there something else I'm missing? 👀

[lsproule]

xss is a problem here because if you do it based on user input and it's not sanitized you can potentially open yourself up to issues right. Right now I am being lazy however https://github.com/remarkablemark/html-react-parser?tab=readme-ov-file#replace
This can be implemented better. If you look at their issue here.
remarkablemark/html-react-parser#94
Again, I am just being lazy right now, but 100% plan on making it not be able to be xss and doing that server side is 100% more reliable than doing it client side. You can't trust clients.

[lsproule]

I didn't mean to close the issue sorry lol

[lsproule]

You can see what I mean though. dangerously set inner html is 100% susceptible to xss attacks if you aren't careful, i.e. not setting innerhtml with unsanitized user input. however, in my naive approach I said ehh who really cares about xss on a framework only I use lol. However, it needs to be just not possible, and the only safe way to do that is on the server side since users cannot be trusted
@skryukov