Add support to replace the turbo_frame contents

Author: hajee

.github/workflows/prettier.yml

@@ -25,5 +25,5 @@ jobs:
         run: 'npm install --legacy-peer-deps'
 
       - name: Run Prettier
-        run: 'npx prettier --check --fail-on-errors .'
+        run: 'npx prettier --check .'
 

app/assets/builds/@turbo-boost/commands.js

@@ -9,9 +9,9 @@ const parseError = error => {
   dispatch(lifecycle.events.clientError, document, { detail: { message, error } }, true)
 }
 
-const parseAndRenderResponse = response => {
+const parseAndRenderResponse = frameId => response => {
   const { strategy } = headers.tokenize(response.headers.get(headers.RESPONSE_HEADER))
-  response.text().then(content => render(strategy, content))
+  response.text().then(content => render(strategy, content, frameId))
 }
 
 const invoke = (payload = {}) => {
@@ -21,7 +21,7 @@ const invoke = (payload = {}) => {
       headers: headers.prepare({}),
       body: JSON.stringify(payload)
     })
-      .then(parseAndRenderResponse)
+      .then(parseAndRenderResponse(payload.frameId))
       .catch(parseError)
   } catch (error) {
     parseError(error)

app/assets/builds/@turbo-boost/commands.js.map

@@ -1,3 +1,18 @@
+import elements from './elements'
+
+const getElementByIdFromHTMLString = (htmlString, id) => {
+  var parser = new DOMParser()
+  var doc = parser.parseFromString(htmlString, 'text/html')
+  var element = doc.getElementById(id)
+  return element.outerHTML
+}
+
+const frameReplace = (content, frameId) => {
+  const newFrame = getElementByIdFromHTMLString(content, frameId)
+  const frame = document.querySelector(`#${frameId}`)
+  if (frame && newFrame) TurboBoost?.Streams?.morph?.method(frame, newFrame)
+}
+
 const append = content => {
   document.body.insertAdjacentHTML('beforeend', content)
 }
@@ -14,10 +29,11 @@ const replace = content => {
 }
 
 // TODO: dispatch events after append/replace so we can apply page state
-export const render = (strategy, content) => {
+export const render = (strategy, content, frameId) => {
   if (strategy && content) {
     if (strategy.match(/^Append$/i)) return append(content)
     if (strategy.match(/^Replace$/i)) return replace(content)
+    if (strategy.match(/^FrameReplace$/i)) return frameReplace(content, frameId)
   }
 }
 

app/javascript/invoker.js

@@ -235,6 +235,7 @@ def turbo_stream_template_exists?
   # Commands support the following redering strategies on the client.
   # 1. Replace: The entire page (head, body) is replaced with the new content via morph
   # 2. Append: The new content is appended to the body
+  # 3. FrameReplace: Replace the turbo frame specified in the command with the frame in the content. The content can contain more( e.g. whole content)
   def client_render_strategy
     # Use the replace strategy if the follow things are true:
     #
@@ -244,6 +245,9 @@ def client_render_strategy
     if command_params[:driver] == "window" && controller_action_allowed?
       return "Replace" unless turbo_stream_template_exists?
     end
+    if command_params[:driver] == "frame" && controller_action_allowed?
+      return "FrameReplace" unless turbo_stream_template_exists?
+    end
 
     "Append"
   end

app/javascript/renderer.js

@@ -3,5 +3,6 @@
 class DecrementCountCommand < ApplicationCommand
   def perform
     Current.user.decrement! :count
+    controller.instance_variable_set(:@extra_data, "decremented")
   end
 end

lib/turbo_boost/commands/runner.rb

@@ -3,5 +3,6 @@
 class IncrementCountCommand < ApplicationCommand
   def perform
     Current.user.increment! :count
+    controller.instance_variable_set(:@extra_data, "incremented")
   end
 end

test/dummy/app/assets/builds/tailwind.css

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class TurboFrameReplacesController < ApplicationController
+  # GET /turbo_frame_replace
+  def show
+    @extra_data ||= "Unchanged"
+  end
+end