Add support to replace the turbo_frame contents

.github/workflows/prettier.yml

@@ -6,7 +6,7 @@ on:
       - '*'
   push:
     branches:
-      - main
+      - '*'
 
 jobs:
   prettier:

.github/workflows/standardrb.yml

@@ -6,7 +6,7 @@ on:
       - '*'
   push:
     branches:
-      - main
+      - '*'
 
 jobs:
   standard:

.github/workflows/tests.yml

@@ -29,7 +29,7 @@ on:
   # change this accordingly.
   push:
     branches:
-      - main
+      - '*'
 
   # Run weekly, so that the baseline AppMap artifact does not expire.
   schedule:

app/javascript/invoker.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/javascript/renderer.js

@@ -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)
   }
 }
 

lib/turbo_boost/commands/runner.rb

@@ -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

test/dummy/db/schema.rb

@@ -1,5 +1,3 @@
-# frozen_string_literal: true
-
 # This file is auto-generated from the current state of the database. Instead
 # of editing this file, please use the migrations feature of Active Record to
 # incrementally modify your database, and then regenerate this schema definition.