Export the morph function

app/javascript/index.js

@@ -1,5 +1,6 @@
 import VERSION from './version'
 import schema from './schema'
+import morph from './morph'
 import { invoke, invokeEvents } from './invoke'
 
 if (!self['Turbo'])
@@ -14,7 +15,7 @@ if (!Turbo['StreamActions'])
 
 Turbo.StreamActions.invoke = invoke
 self.TurboBoost = self.TurboBoost || {}
-self.TurboBoost.Streams = { invoke, invokeEvents, schema, VERSION }
+self.TurboBoost.Streams = { invoke, invokeEvents, morph, schema, VERSION }
 
 console.info('@turbo-boost/streams has initialized and registered new stream actions with Turbo.')
 

app/javascript/invoke.js

@@ -1,6 +1,6 @@
 import morph from './morph'
 
-export const invokeEvents = {
+const invokeEvents = {
   before: 'turbo-boost:stream:before-invoke',
   after: 'turbo-boost:stream:after-invoke',
   finish: 'turbo-boost:stream:finish-invoke'
@@ -93,7 +93,7 @@ function performInvoke(method, args, receivers) {
   return invokeMethod(method, args, receivers)
 }
 
-export function invoke() {
+function invoke() {
   const payload = JSON.parse(this.templateContent.textContent)
   const { id, selector, receiver, method, args, delay } = payload
   let receivers = [{ object: self, target: self }]
@@ -118,3 +118,5 @@ export function invoke() {
   if (delay > 0) setTimeout(() => performInvoke(method, args, receivers), delay)
   else performInvoke(method, args, receivers)
 }
+
+export { invoke, invokeEvents }

app/javascript/morph.js

@@ -1,36 +1,42 @@
 import { Idiomorph } from 'idiomorph'
 import schema from './schema'
 
-const input = /INPUT/i
-const inputTypes = /date|datetime-local|email|month|number|password|range|search|tel|text|time|url|week/i
-const textarea = /TEXTAREA/i
 const trixEditor = /TRIX-EDITOR/i
 
-const morphAllowed = node => {
-  if (node.nodeType !== Node.ELEMENT_NODE) return true
-  if (node !== document.activeElement) return true
+const defaultOptions = {
+  callbacks: { beforeNodeMorphed: (oldNode, _newNode) => morphAllowed(oldNode) },
+  morphStyle: 'outerHTML',
+  ignoreActiveValue: true,
+  head: { style: 'morph' }
+}
+
+function isElement(node) {
+  return node.nodeType === Node.ELEMENT_NODE
+}
 
-  // don't morph elements marked as turbo permanent
-  if (
+function isTurboPermanent(node) {
+  if (!isElement(node)) return false
+  return (
     node.hasAttribute(schema.turboPermanentAttribute) &&
     node.getAttribute(schema.turboPermanentAttribute) !== 'false'
   )
-    return false
-
-  // don't morph active textarea
-  if (node.tagName.match(textarea)) return false
-
-  // don't morph active trix-editor
-  if (node.tagName.match(trixEditor)) return false
+}
 
-  // don't morph active inputs
-  return node.tagName.match(input) && node.getAttribute('type').match(inputTypes)
+function isActive(node) {
+  if (!isElement(node)) return false
+  return node === document.activeElement
 }
 
-const callbacks = {
-  beforeNodeMorphed: (oldNode, _newNode) => morphAllowed(oldNode)
+function morphAllowed(node) {
+  if (isTurboPermanent(node)) return false
+  if (isActive(node) && node.tagName.match(trixEditor)) return false
+  return true
 }
 
-const morph = (element, html) => Idiomorph.morph(element, html, { callbacks })
+function morph(element, html, options = {}) {
+  const callbacks = { ...defaultOptions.callbacks, ...options.callbacks }
+  options = { ...defaultOptions, ...options, callbacks }
+  Idiomorph.morph(element, html, options)
+}
 
 export default morph