Skip to content

Commit

Permalink
Reduce JS.commands payload by moving defaults to client
Browse files Browse the repository at this point in the history 
Closes phoenixframework#2600
  • Loading branch information
@SteffenDE
SteffenDE committed Jan 30, 2024
1 parent ecdd3d7 commit 2fccd8a
Show file tree
Hide file tree
Showing 4 changed files with 206 additions and 221 deletions.
3 changes: 3 additions & 0 deletions assets/js/phoenix_live_view/js.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import DOM from "./dom"
import ARIA from "./aria"

let focusStack = null
let default_transition_time = 200

let JS = {
exec(eventType, phxEvent, view, sourceEl, defaults){
Expand Down Expand Up @@ -170,6 +171,7 @@ let JS = {
},

toggle(eventType, view, el, display, ins, outs, time){
time = time || default_transition_time
let [inClasses, inStartClasses, inEndClasses] = ins || [[], [], []]
let [outClasses, outStartClasses, outEndClasses] = outs || [[], [], []]
if(inClasses.length > 0 || outClasses.length > 0){
Expand Down Expand Up @@ -232,6 +234,7 @@ let JS = {
},

addOrRemoveClasses(el, adds, removes, transition, time, view){
time = time || default_transition_time
let [transitionRun, transitionStart, transitionEnd] = transition || [[], [], []]
if(transitionRun.length > 0){
let onStart = () => {
Expand Down
216 changes: 111 additions & 105 deletions assets/test/js_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ let setupView = (content) => {
describe("JS", () => {
beforeEach(() => {
global.document.body.innerHTML = ""
jest.useFakeTimers()
})

afterEach(() => {
jest.useRealTimers()
})

describe("exec_toggle", () => {
Expand All @@ -34,19 +39,20 @@ describe("JS", () => {

expect(modal.style.display).toEqual("")
JS.exec("click", click.getAttribute("phx-click"), view, click)
window.requestAnimationFrame(() => {
expect(modal.style.display).toEqual("none")
jest.runAllTimers()

JS.exec("click", click.getAttribute("phx-click"), view, click)
window.requestAnimationFrame(() => {
expect(modal.style.display).toEqual("block")
expect(showEndCalled).toBe(true)
expect(hideEndCalled).toBe(true)
expect(showStartCalled).toBe(true)
expect(hideStartCalled).toBe(true)
done()
})
})
expect(modal.style.display).toEqual("none")

JS.exec("click", click.getAttribute("phx-click"), view, click)
jest.runAllTimers()

expect(modal.style.display).toEqual("block")
expect(showEndCalled).toBe(true)
expect(hideEndCalled).toBe(true)
expect(showStartCalled).toBe(true)
expect(hideStartCalled).toBe(true)

done()
})

test("with display", done => {
Expand All @@ -67,22 +73,23 @@ describe("JS", () => {

expect(modal.style.display).toEqual("")
JS.exec("click", click.getAttribute("phx-click"), view, click)
window.requestAnimationFrame(() => {
expect(modal.style.display).toEqual("none")
jest.runAllTimers()

JS.exec("click", click.getAttribute("phx-click"), view, click)
window.requestAnimationFrame(() => {
expect(modal.style.display).toEqual("inline-block")
expect(showEndCalled).toBe(true)
expect(hideEndCalled).toBe(true)
expect(showStartCalled).toBe(true)
expect(hideStartCalled).toBe(true)
done()
})
})
expect(modal.style.display).toEqual("none")

JS.exec("click", click.getAttribute("phx-click"), view, click)
jest.runAllTimers()

expect(modal.style.display).toEqual("inline-block")
expect(showEndCalled).toBe(true)
expect(hideEndCalled).toBe(true)
expect(showStartCalled).toBe(true)
expect(hideStartCalled).toBe(true)
done()
})

test("with in and out classes", done => {
test("with in and out classes", (done) => {
jest.useFakeTimers()
let view = setupView(`
<div id="modal">modal</div>
<div id="click" phx-click='[["toggle", {"to": "#modal", "ins": [["fade-in"],[],[]], "outs": [["fade-out"],[],[]]}]]'></div>
Expand All @@ -101,30 +108,27 @@ describe("JS", () => {
expect(modal.style.display).toEqual("")
expect(modal.classList.contains("fade-out")).toBe(false)
expect(modal.classList.contains("fade-in")).toBe(false)

// toggle in
JS.exec("click", click.getAttribute("phx-click"), view, click)
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
expect(modal.classList.contains("fade-out")).toBe(true)
expect(modal.classList.contains("fade-in")).toBe(false)

JS.exec("click", click.getAttribute("phx-click"), view, click)
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
expect(modal.classList.contains("fade-out")).toBe(false)
expect(modal.classList.contains("fade-in")).toBe(true)
expect(showEndCalled).toBe(true)
expect(hideEndCalled).toBe(true)
expect(showStartCalled).toBe(true)
expect(hideStartCalled).toBe(true)
done()
})
})
})
})
})
})
jest.advanceTimersByTime(100)
expect(modal.classList.contains("fade-out")).toBe(true)
expect(modal.classList.contains("fade-in")).toBe(false)
jest.runAllTimers()

// toggle out
JS.exec("click", click.getAttribute("phx-click"), view, click)
jest.advanceTimersByTime(100)
expect(modal.classList.contains("fade-out")).toBe(false)
expect(modal.classList.contains("fade-in")).toBe(true)
jest.runAllTimers()

expect(showEndCalled).toBe(true)
expect(hideEndCalled).toBe(true)
expect(showStartCalled).toBe(true)
expect(hideStartCalled).toBe(true)

done()
})
})

Expand All @@ -138,11 +142,15 @@ describe("JS", () => {
let click = document.querySelector("#click")

expect(Array.from(modal.classList)).toEqual(["modal"])

JS.exec("click", click.getAttribute("phx-click"), view, click)
setTimeout(() => {
expect(Array.from(modal.classList)).toEqual(["modal", "fade-out"])
done()
}, 200)
jest.advanceTimersByTime(100)

expect(Array.from(modal.classList)).toEqual(["modal", "fade-out"])
jest.runAllTimers()

expect(Array.from(modal.classList)).toEqual(["modal"])
done()
})

test("with multiple selector", done => {
Expand All @@ -157,12 +165,19 @@ describe("JS", () => {

expect(Array.from(modal1.classList)).toEqual(["modal"])
expect(Array.from(modal2.classList)).toEqual(["modal"])

JS.exec("click", click.getAttribute("phx-click"), view, click)
setTimeout(() => {
expect(Array.from(modal1.classList)).toEqual(["modal", "fade-out"])
expect(Array.from(modal2.classList)).toEqual(["modal", "fade-out"])
done()
}, 200)
jest.advanceTimersByTime(100)

expect(Array.from(modal1.classList)).toEqual(["modal", "fade-out"])
expect(Array.from(modal2.classList)).toEqual(["modal", "fade-out"])

jest.runAllTimers()

expect(Array.from(modal1.classList)).toEqual(["modal"])
expect(Array.from(modal2.classList)).toEqual(["modal"])

done()
})
})

Expand Down Expand Up @@ -242,15 +257,15 @@ describe("JS", () => {
JS.exec("click", add.getAttribute("phx-click"), view, add)
JS.exec("click", add.getAttribute("phx-click"), view, add)
JS.exec("click", add.getAttribute("phx-click"), view, add)
window.requestAnimationFrame(() => {
expect(Array.from(modal.classList)).toEqual(["modal", "class1"])
jest.runAllTimers()

JS.exec("click", remove.getAttribute("phx-click"), view, remove)
window.requestAnimationFrame(() => {
expect(Array.from(modal.classList)).toEqual(["modal"])
done()
})
})
expect(Array.from(modal.classList)).toEqual(["modal", "class1"])

JS.exec("click", remove.getAttribute("phx-click"), view, remove)
jest.runAllTimers()

expect(Array.from(modal.classList)).toEqual(["modal"])
done()
})

test("with multiple selector", done => {
Expand All @@ -266,17 +281,17 @@ describe("JS", () => {
let remove = document.querySelector("#remove")

JS.exec("click", add.getAttribute("phx-click"), view, add)
window.requestAnimationFrame(() => {
expect(Array.from(modal1.classList)).toEqual(["modal", "class1"])
expect(Array.from(modal2.classList)).toEqual(["modal", "class1"])

JS.exec("click", remove.getAttribute("phx-click"), view, remove)
window.requestAnimationFrame(() => {
expect(Array.from(modal1.classList)).toEqual(["modal"])
expect(Array.from(modal2.classList)).toEqual(["modal"])
done()
})
})
jest.runAllTimers()

expect(Array.from(modal1.classList)).toEqual(["modal", "class1"])
expect(Array.from(modal2.classList)).toEqual(["modal", "class1"])

JS.exec("click", remove.getAttribute("phx-click"), view, remove)
jest.runAllTimers()

expect(Array.from(modal1.classList)).toEqual(["modal"])
expect(Array.from(modal2.classList)).toEqual(["modal"])
done()
})
})

Expand All @@ -290,19 +305,15 @@ describe("JS", () => {
let toggle = document.querySelector("#toggle")

JS.exec("click", toggle.getAttribute("phx-click"), view, toggle)
jest.runAllTimers()

window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
expect(Array.from(modal.classList)).toEqual(["modal", "class1"])
JS.exec("click", toggle.getAttribute("phx-click"), view, toggle)
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
expect(Array.from(modal.classList)).toEqual(["modal"])
done()
})
})
})
})
expect(Array.from(modal.classList)).toEqual(["modal", "class1"])

JS.exec("click", toggle.getAttribute("phx-click"), view, toggle)
jest.runAllTimers()

expect(Array.from(modal.classList)).toEqual(["modal"])
done()
})
test("with multiple selector", done => {
let view = setupView(`
Expand All @@ -315,21 +326,16 @@ describe("JS", () => {
let toggle = document.querySelector("#toggle")

JS.exec("click", toggle.getAttribute("phx-click"), view, toggle)
jest.runAllTimers()

window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
expect(Array.from(modal1.classList)).toEqual(["modal", "class1"])
expect(Array.from(modal2.classList)).toEqual(["modal", "class1"])
JS.exec("click", toggle.getAttribute("phx-click"), view, toggle)
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
expect(Array.from(modal1.classList)).toEqual(["modal"])
expect(Array.from(modal2.classList)).toEqual(["modal"])
done()
})
})
})
})
expect(Array.from(modal1.classList)).toEqual(["modal", "class1"])
expect(Array.from(modal2.classList)).toEqual(["modal", "class1"])
JS.exec("click", toggle.getAttribute("phx-click"), view, toggle)
jest.runAllTimers()

expect(Array.from(modal1.classList)).toEqual(["modal"])
expect(Array.from(modal2.classList)).toEqual(["modal"])
done()
})
})

Expand Down Expand Up @@ -535,9 +541,9 @@ describe("JS", () => {

expect(modal.style.display).toEqual("")
JS.exec("click", click.getAttribute("phx-click"), view, click)
window.requestAnimationFrame(() => {
expect(modal.style.display).toEqual("none")
})
jest.runAllTimers()

expect(modal.style.display).toEqual("none")
})
})

Expand Down
Loading

0 comments on commit 2fccd8a

Please sign in to comment.