TODO Document: Turbo compatibility

[excid3]

I was looking at using this in a Rails app that uses Turbo on the frontend. Turbo intercepts page visits and handles them with fetch to give an SPA-like experience. Turbo maintains an internal page cache, so the injected HTML needs to be cleaned up.

This causes a problem because if you render a code-input, navigate to another page, then hit the Back button, the code-input renders with the HTML

I can get most of the way there by removing all the non-textarea elements before cache using the following but it still leaves the textarea HTML in the code like you see in the above screenshot.

document.addEventListener("turbo:before-cache", () => {
    document.querySelectorAll("code-input :not(textarea)").forEach((el) => el.remove())
})

    <code-input class="line-numbers code-input_autogrow_height" language="bash">
      <%= form.text_area :body, class: "form-control", rows: 12, data: { code_input_fallback: true } %>
    </code-input>

I think this comes down to how the textarea[data-code-input-fallback] is handled since that attribute seems to be removed.

code-input/code-input.js

Line 741 in 877e596

this.innerHTML = this.escapeHtml(value);

[excid3]

If I skip the fallback textarea, and instead replace it with the code-input only, I can clean it up successfully with:

<code-input name="example" value="<%= FROM RAILS %>" class="line-numbers" language="bash"></code-input>

document.addEventListener("turbo:before-cache", () => {
  document.querySelectorAll("code-input", (el) => el.innerHTML = "")
})

[WebCoder49]

@excid3 It's good that you've found a solution; thank you for looking into it! However, right now I have classed the value attribute as deprecated.

Here is my suggestion that works with the fallback textarea (for more progressive enhancement, and less escaping needed) in my testing:

// HACK to keep code-input element in a usable state when navigated back to. Makes the textarea element in
// code-input.js' implementation work as a fallback textarea for next initialisation
document.addEventListener("turbo:before-cache", () => {
    document.querySelectorAll("code-input textarea").forEach((el) => el.setAttribute("data-code-input-fallback", true));
})

Please let me know if you have any questions.

Sorry that code-input.js couldn't work out of the box with Turbo. I wonder how other web components with a similar initialisation flow handle it (I don't need an answer).

[WebCoder49]

@excid3 Please let me know or close this issue if my response fixes your problem without you having to change your code too much (otherwise if you have questions also let me know; I'm asleep now but can answer tomorrow late morning UK time).

[excid3]

@WebCoder49 Ah yes, that works and is cleaner. 👍

Typically, to make something Turbo-compatible it just needs to be safely re-renderable. For example, if code-input preserved that data-code-input-fallback attribute, it'd probably work out of the box.

We'll often use turbo:before-cache events to clean up third party libraries though, so this isn't too out of the ordinary.