Hi and thanks for this gem!

I'm wondering if it is possible to render a component that uses both js.erb and html.erb. If possible I would also like to be able to render this component from both js.erb and html.erb files. I think this could be solved with more html markup to communicate with sidecar js assets. But i think there are often benefits of working directly in js.erb syntax so that is what this question is about.

Consider this example where a toolbar button is added either directly from a html.erb with a <script> tag or inserted to the DOM with insertAdjacentHTML from js.erb.

From html.erb with <script>

# some_parent_file.html.erb
<%= render ToolbarItemComponent.new %>

____________________________________
# In this case it would go to a html.erb
# toolbar_item_component.html.erb

<%= TOOLBAR_ITEM_HTML %> 

<script>
  <%= TOOLBAR_ITEM_JS %>
</script>

From js.erb with insertAdjecentHTML

# some_parent_file.js.erb
<%= render ToolbarItemComponent.new %>

____________________________________
# Then it would look for a js.erb, but since multiple partials per component isn't 
# allowed this kind of structure wouldn't really work right?  
# toolbar_item_component.js.erb

document.querySelector('#toolbar).insertAdjacentHTML('beforeend', "<%= TOOLBAR_ITEM_HTML %>")

# QUESTION HERE. 

# Where can I put the TOOLBAR_ITEM_HTML that i'm referencing above?
# How can i avoid the battle with html in quoted strings?
# Its probably a noob question but how would i import another partial to this component?

<%= TOOLBAR_ITEM_JS %>

Possible solution

I was thinking about splitting the component in two somehow. Could this be an option? How would i write the js method then to simulate the html rendering logic? And in what file/method would be a good place to put that js code (i dont want to write it in a quoted string)? How to include for example components/_toolbar_item_component.js.erb?

<% toolbar_item = ToolbarItemComponent.new %>

# get html
<%= render toolbar_item %>

# get js
<%= render toolbar_item.js %>

I'm very open to any kind of suggestions on how to structure and render this component.

Thank you for your time!