Skip to content

Commit 623c72d

Browse files
puckowskipuckowski
committed
Update to Sling.js version 18.2.0
* Update to Sling.js version 18.2.0. * Improve animation directive flexibility. * Add automated tests bringing the total to 194.
1 parent 8de0247 commit 623c72d

File tree

8 files changed

+111
-10
lines changed

8 files changed

+111
-10
lines changed

‎dist/dist.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/sling.min.es5.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/sling.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/sling.min.nomodule.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/todo.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@
155155
<div id="setintervaltestdiv1"></div>
156156
<div id="divAnimate2"></div>
157157
<div id="divTestAttr1"></div>
158+
<div id="divRouterOutletAnim"></div>
158159
<div id="divhydrateslfor1" slssrclass="HydrateSlForComponent1"><div slfor="hydratefor:list:makeRow:updateRow"><p>a</p><p>b</p><p>c</p></div></div>
159160
<div class="container" id="divrenderhydrate" slssrclass="TestRenderHydrate1"><table class="table table-hover table-striped test-data"><tbody slfor="myfor:data:makeRow:updateRow"><tr onclick="" onremove=""><td class="col-md-1">1</td><td class="col-md-4"><a href="#" onclick="">clean purple car</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">2</td><td class="col-md-4"><a href="#" onclick="">easy brown pizza</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">3</td><td class="col-md-4"><a href="#" onclick="">easy white house</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">4</td><td class="col-md-4"><a href="#" onclick="">helpful white pizza</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">5</td><td class="col-md-4"><a href="#" onclick="">helpful yellow cookie</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">6</td><td class="col-md-4"><a href="#" onclick="">tall pink car</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr></tbody></table></div>
160161
<div slssrclass="TestSsrHydrateComponent1" id="testssrhydrate"><button id="ssrTest2" onclick="someFunc()">Test Hydrate</button><div id="ssrTest1">SSR placeholder.</div></div>

‎src/globalTests.js

Lines changed: 89 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,62 @@ var Store6 = {
299299
}
300300
};
301301

302+
class HelloWorldComponentAnimate {
303+
constructor() {
304+
this.welcomeHidden = false;
305+
}
306+
307+
hideWelcome() {
308+
this.welcomeHidden = true;
309+
}
310+
311+
showWelcome() {
312+
this.welcomeHidden = false;
313+
}
314+
315+
view() {
316+
return markup('div', {
317+
attrs: {
318+
id: 'divRouterOutletAnim',
319+
...this.welcomeHidden !== true && { class: 'visible' },
320+
style: 'display: flex; justify-content: center; align-items: center; height: 100%;'
321+
},
322+
children: [
323+
...(this.welcomeHidden === false ? [
324+
markup('h1', {
325+
attrs: {
326+
slanimatedestroy: 'hide',
327+
},
328+
children: [
329+
textNode('Hello, world!'),
330+
markup('button', {
331+
attrs: {
332+
onclick: this.hideWelcome.bind(this),
333+
id: 'btnanim1'
334+
},
335+
children: [
336+
textNode('Hide')
337+
]
338+
})
339+
]
340+
})
341+
] : [
342+
markup('button', {
343+
attrs: {
344+
onclick: this.showWelcome.bind(this),
345+
id: 'btnanim2'
346+
},
347+
children: [
348+
textNode('Show')
349+
]
350+
})
351+
])
352+
]
353+
354+
});
355+
}
356+
}
357+
302358
class TestAttributeUserProfileComponent {
303359
constructor() {
304360
this.id = "Unknown";
@@ -8276,6 +8332,35 @@ export class GlobalTestRunner {
82768332
}, 25);
82778333
}
82788334

8335+
testFinalize100AnimateWithinSameRoute() {
8336+
const result = {
8337+
test: 'test keyed animation within same route',
8338+
success: false,
8339+
message: ''
8340+
};
8341+
8342+
mount('divRouterOutletAnim', new HelloWorldComponentAnimate());
8343+
8344+
s.DETACHED_SET_TIMEOUT(() => {
8345+
const btn1 = document.getElementById('btnanim1');
8346+
btn1.click();
8347+
8348+
s.DETACHED_SET_TIMEOUT(() => {
8349+
const btn2 = document.getElementById('btnanim2');
8350+
btn2.click();
8351+
8352+
s.DETACHED_SET_TIMEOUT(() => {
8353+
const ele = document.getElementById('divRouterOutletAnim');
8354+
8355+
result.success = ele && ele.children && ele.children.length === 1 && ele.children[0] && ele.children[0].childNodes.length === 2;
8356+
8357+
window.globalTestResults.push(result);
8358+
window.globalTestCount++;
8359+
}, 1100);
8360+
}, 1100);
8361+
}, 1000);
8362+
}
8363+
82798364
testRunLastDestroyMapNoDuplicates() {
82808365
const result = {
82818366
test: 'test destroy map contains no duplicate nodes',
@@ -9408,7 +9493,7 @@ export class GlobalTestRunner {
94089493
window.globalTestResults.push(result);
94099494
window.globalTestCount++;
94109495
window.globalAsyncCount--;
9411-
}, 25);
9496+
}, 100);
94129497
}
94139498

94149499
attempts++;
@@ -12410,7 +12495,7 @@ export class GlobalTestRunner {
1241012495

1241112496
attempts++;
1241212497

12413-
if (attempts === 90 && window.globalAsyncCount > 0) {
12498+
if (attempts === 110 && window.globalAsyncCount > 0) {
1241412499
window.globalTestResults.push(result);
1241512500
window.globalTestCount++;
1241612501

@@ -13834,7 +13919,7 @@ export class GlobalTestRunner {
1383413919
const correctDiv3 = rowEle && rowEle.children.length === 3 && rowEle.children[2].textContent === 'Mode: 0';
1383513920

1383613921
s.DETACHED_SET_TIMEOUT(() => {
13837-
const changeDetectionCalled = stateObj.count2 && stateObj.count2 === 6;
13922+
const changeDetectionCalled = stateObj.count2 && stateObj.count2 >= 6;
1383813923

1383913924
result.success = updateCountCorrect && rowsReducedCorrect && rowsRestoredCorrect && changeDetectionCalled
1384013925
&& correctDiv1 && correctDiv2 && correctDiv3;
@@ -13852,7 +13937,7 @@ export class GlobalTestRunner {
1385213937

1385313938
attempts++;
1385413939

13855-
if (attempts === 90 && window.globalAsyncCount > 0) {
13940+
if (attempts === 110 && window.globalAsyncCount > 0) {
1385613941
window.globalTestResults.push(result);
1385713942
window.globalTestCount++;
1385813943
window.globalAsyncCount--;

‎src/sling/core/sling.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -588,6 +588,8 @@ const diffVChildren = (oldNode, oldVChildren, newVChildren) => {
588588
};
589589

590590
const removeAfterAnimationIfNeeded = (vNode) => {
591+
const routeCount = s._router.count;
592+
591593
if (vNode['slanimatedestroytarget'] !== undefined && vNode['slanimatedestroytarget'] !== '' && !vNode.slAnimateDestroy
592594
&& vNode.attributes.slanimatedestroy !== undefined && vNode.getAttribute('slanimatedestroy') !== '') {
593595
const targetFn = vNode['slanimatedestroytarget'];
@@ -619,6 +621,8 @@ const removeAfterAnimationIfNeeded = (vNode) => {
619621
if (!s._router.currentRoute.animateDestroy) {
620622
if (s._router.currentRoute && vNode.id !== s._router.currentRoute.root) {
621623
vNode.remove();
624+
} else if (routeCount === s._router.count) {
625+
vNode.remove();
622626
}
623627
nodeToAnim.onanimationend = animProxy;
624628
nodeToAnim.onanimationstart = animStartProxy;
@@ -645,11 +649,15 @@ const removeAfterAnimationIfNeeded = (vNode) => {
645649
} else {
646650
if (s._router.currentRoute && vNode.id !== s._router.currentRoute.root) {
647651
vNode.remove();
652+
} else if (routeCount === s._router.count) {
653+
vNode.remove();
648654
}
649655
}
650656
} else {
651657
if (s._router.currentRoute && vNode.id !== s._router.currentRoute.root) {
652658
vNode.remove();
659+
} else if (routeCount === s._router.count) {
660+
vNode.remove();
653661
}
654662
}
655663
} else if (vNode.nodeType !== 3
@@ -676,6 +684,8 @@ const removeAfterAnimationIfNeeded = (vNode) => {
676684

677685
if (s._router.currentRoute && vNode.id !== s._router.currentRoute.root) {
678686
vNode.remove();
687+
} else if (routeCount === s._router.count) {
688+
vNode.remove();
679689
}
680690

681691
vNode.slAnimationName = null;
@@ -691,6 +701,8 @@ const removeAfterAnimationIfNeeded = (vNode) => {
691701
} else if (!vNode.slAnimateDestroy) {
692702
if (s._router.currentRoute && vNode.id !== s._router.currentRoute.root) {
693703
vNode.remove();
704+
} else if (routeCount === s._router.count) {
705+
vNode.remove();
694706
}
695707
}
696708
}
@@ -999,7 +1011,7 @@ const _mountInternal = (target, component, attachDetector) => {
9991011
}
10001012

10011013
export function version() {
1002-
return '18.1.0';
1014+
return '18.2.0';
10031015
}
10041016

10051017
function xmur3(str) {
@@ -1743,7 +1755,8 @@ s._router = {
17431755
lastHash: false,
17441756
currentRoute: null,
17451757
mountRoute: '',
1746-
strategy: '#'
1758+
strategy: '#',
1759+
count: 0
17471760
};
17481761

17491762
Object.seal(s._router);
@@ -1911,6 +1924,7 @@ export function route(routeStr, routeParams = {}, attachDetector = true) {
19111924
}
19121925

19131926
s._router.lastHash = routeStr;
1927+
s._router.count++;
19141928

19151929
const scrollPosition = slContext.pageYOffset;
19161930

‎src/todo.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@
155155
<div id="setintervaltestdiv1"></div>
156156
<div id="divAnimate2"></div>
157157
<div id="divTestAttr1"></div>
158+
<div id="divRouterOutletAnim"></div>
158159
<div id="divhydrateslfor1" slssrclass="HydrateSlForComponent1"><div slfor="hydratefor:list:makeRow:updateRow"><p>a</p><p>b</p><p>c</p></div></div>
159160
<div class="container" id="divrenderhydrate" slssrclass="TestRenderHydrate1"><table class="table table-hover table-striped test-data"><tbody slfor="myfor:data:makeRow:updateRow"><tr onclick="" onremove=""><td class="col-md-1">1</td><td class="col-md-4"><a href="#" onclick="">clean purple car</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">2</td><td class="col-md-4"><a href="#" onclick="">easy brown pizza</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">3</td><td class="col-md-4"><a href="#" onclick="">easy white house</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">4</td><td class="col-md-4"><a href="#" onclick="">helpful white pizza</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">5</td><td class="col-md-4"><a href="#" onclick="">helpful yellow cookie</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr><tr onclick="" onremove=""><td class="col-md-1">6</td><td class="col-md-4"><a href="#" onclick="">tall pink car</a></td><td class="col-md-1"><a href="#" onclick=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr></tbody></table></div>
160161
<div slssrclass="TestSsrHydrateComponent1" id="testssrhydrate"><button id="ssrTest2" onclick="someFunc()">Test Hydrate</button><div id="ssrTest1">SSR placeholder.</div></div>

0 commit comments

Comments
 (0)