diff --git a/src/core/index.js b/src/core/index.js index 17f804bcf..a94b04c18 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -4,6 +4,10 @@ import { PageSnapshot } from "./drive/page_snapshot" import { FrameRenderer } from "./frames/frame_renderer" import { fetch, recentRequests } from "../http/fetch" import { config } from "./config" +import { MorphingPageRenderer } from "./drive/morphing_page_renderer" +import { MorphingFrameRenderer } from "./frames/morphing_frame_renderer" + +export { morphChildren, morphElements } from "./morphing" const session = new Session(recentRequests) const { cache, navigator } = session @@ -116,3 +120,29 @@ export function setFormMode(mode) { ) config.forms.mode = mode } + +/** + * Morph the state of the currentBody based on the attributes and contents of + * the newBody. Morphing body elements may dispatch turbo:morph, + * turbo:before-morph-element, turbo:before-morph-attribute, and + * turbo:morph-element events. + * + * @param currentBody HTMLBodyElement destination of morphing changes + * @param newBody HTMLBodyElement source of morphing changes + */ +export function morphBodyElements(currentBody, newBody) { + MorphingPageRenderer.renderElement(currentBody, newBody) +} + +/** + * Morph the child elements of the currentFrame based on the child elements of + * the newFrame. Morphing turbo-frame elements may dispatch turbo:before-frame-morph, + * turbo:before-morph-element, turbo:before-morph-attribute, and + * turbo:morph-element events. + * + * @param currentFrame FrameElement destination of morphing children changes + * @param newFrame FrameElement source of morphing children changes + */ +export function morphTurboFrameElements(currentFrame, newFrame) { + MorphingFrameRenderer.renderElement(currentFrame, newFrame) +} diff --git a/src/core/morphing.js b/src/core/morphing.js index dfd21e839..c16243a7d 100644 --- a/src/core/morphing.js +++ b/src/core/morphing.js @@ -1,6 +1,14 @@ import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js" import { dispatch } from "../util" +/** + * Morph the state of the currentElement based on the attributes and contents of + * the newElement. Morphing may dispatch turbo:before-morph-element, + * turbo:before-morph-attribute, and turbo:morph-element events. + * + * @param currentElement Element destination of morphing changes + * @param newElement Element source of morphing changes + */ export function morphElements(currentElement, newElement, { callbacks, ...options } = {}) { Idiomorph.morph(currentElement, newElement, { ...options, @@ -8,6 +16,14 @@ export function morphElements(currentElement, newElement, { callbacks, ...option }) } +/** + * Morph the child elements of the currentElement based on the child elements of + * the newElement. Morphing children may dispatch turbo:before-morph-element, + * turbo:before-morph-attribute, and turbo:morph-element events. + * + * @param currentElement Element destination of morphing children changes + * @param newElement Element source of morphing children changes + */ export function morphChildren(currentElement, newElement) { morphElements(currentElement, newElement.children, { morphStyle: "innerHTML" diff --git a/src/tests/unit/export_tests.js b/src/tests/unit/export_tests.js index 485963043..cbded1fcf 100644 --- a/src/tests/unit/export_tests.js +++ b/src/tests/unit/export_tests.js @@ -22,6 +22,10 @@ test("Turbo interface", () => { assert.equal(typeof Turbo.session.drive, "boolean") assert.equal(typeof Turbo.session.formMode, "string") assert.equal(typeof Turbo.fetch, "function") + assert.equal(typeof Turbo.morphElements, "function") + assert.equal(typeof Turbo.morphChildren, "function") + assert.equal(typeof Turbo.morphBodyElements, "function") + assert.equal(typeof Turbo.morphTurboFrameElements, "function") }) test("Session interface", () => {