Add append, prepend and replace operations

javascript/cable_ready.js

@@ -37,6 +37,18 @@ const didMorph = operation => el => {
 const DOMOperations = {
   // DOM Mutations
 
+  append: operation => {
+    processElements(operation, element => {
+      dispatch(element, 'cable-ready:before-append', operation)
+      const { html, focusSelector } = operation
+      if (!operation.cancel) {
+        element.insertAdjacentHTML('beforeend', html)
+        assignFocus(focusSelector)
+      }
+      dispatch(element, 'cable-ready:after-append', operation)
+    })
+  },
+
   innerHtml: operation => {
     processElements(operation, element => {
       dispatch(element, 'cable-ready:before-inner-html', operation)
@@ -116,6 +128,18 @@ const DOMOperations = {
     })
   },
 
+  prepend: operation => {
+    processElements(operation, element => {
+      dispatch(element, 'cable-ready:before-prepend', operation)
+      const { html, focusSelector } = operation
+      if (!operation.cancel) {
+        element.insertAdjacentHTML('afterbegin', html)
+        assignFocus(focusSelector)
+      }
+      dispatch(element, 'cable-ready:after-prepend', operation)
+    })
+  },
+
   remove: operation => {
     processElements(operation, element => {
       dispatch(element, 'cable-ready:before-remove', operation)
@@ -128,6 +152,20 @@ const DOMOperations = {
     })
   },
 
+  replace: operation => {
+    processElements(operation, element => {
+      dispatch(element, 'cable-ready:before-replace', operation)
+      const { html, focusSelector } = operation
+      const parent = element.parentElement
+      const ordinal = Array.from(parent.children).indexOf(element)
+      if (!operation.cancel) {
+        element.outerHTML = html
+        assignFocus(focusSelector)
+      }
+      dispatch(parent.children[ordinal], 'cable-ready:after-replace', operation)
+    })
+  },
+
   textContent: operation => {
     processElements(operation, element => {
       dispatch(element, 'cable-ready:before-text-content', operation)

lib/cable_ready/channels.rb

@@ -15,6 +15,7 @@ def initialize
       @channels = {}
       @operations = {}
       %i[
+        append
         add_css_class
         clear_storage
         console_log
@@ -25,11 +26,13 @@ def initialize
         morph
         notification
         outer_html
+        prepend
         push_state
         remove
         remove_attribute
         remove_css_class
         remove_storage_item
+        replace
         set_attribute
         set_cookie
         set_dataset_property