Skip to content

Commit e519256

Browse files
puckowskipuckowski
committed
Update Sling.js to version 19.0.0
* Update Sling.js to version 19.0.0. * Add automated tests bringing the total to 195. * Add new slref directive to get node reference in component. * Update wiki for directives.
1 parent 537f2f2 commit e519256

File tree

12 files changed

+139
-8
lines changed

12 files changed

+139
-8
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
# Sling
44

5-
Sling is a client-side JavaScript framework for building Single Page Applications (SPAs). Sling is lightweight, **29KB minified, and less than 9KB gzipped**.
5+
Sling is a client-side JavaScript framework for building Single Page Applications (SPAs). Sling is lightweight, **30KB minified, and less than 9KB gzipped**.
66

77
Sling creates and uses an Incremental DOM to perform differential updates for fast rendering.
88

‎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
@@ -158,6 +158,7 @@
158158
<div id="divTestAttr1"></div>
159159
<div id="divRouterOutletAnim"></div>
160160
<div id="divdetectthen1"></div>
161+
<div id="divtestrefcomp1"></div>
161162
<div id="divhydrateslfor1" slssrclass="HydrateSlForComponent1"><div slfor="hydratefor:list:makeRow:updateRow"><p>a</p><p>b</p><p>c</p></div></div>
162163
<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>
163164
<div slssrclass="TestSsrHydrateComponent1" id="testssrhydrate"><button id="ssrTest2" onclick="someFunc()">Test Hydrate</button><div id="ssrTest1">SSR placeholder.</div></div>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sling.js",
3-
"version": "18.4.2",
3+
"version": "19.0.0",
44
"description": "Client-side JavaScript framework for building Single Page Applications.",
55
"main": "index.js",
66
"scripts": {

‎src/globalTests.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -720,6 +720,35 @@ export class AnimateKeyframesComponent6 {
720720
}
721721
}
722722

723+
export class TestRefComponent1 {
724+
725+
constructor() {
726+
this.ref1 = null;
727+
}
728+
729+
slAfterInit() {
730+
const state = getState();
731+
state.ref1 = this.ref1 !== null && this.ref1 !== undefined && this.ref1.id === 'divtestrefcomp1';
732+
setState(state);
733+
}
734+
735+
view() {
736+
return markup('div', {
737+
attrs: {
738+
id: 'divtestrefcomp1',
739+
slref: 'ref1'
740+
},
741+
children: [
742+
markup('button', {
743+
children: [
744+
textNode('Hello, world!')
745+
]
746+
})
747+
]
748+
})
749+
}
750+
}
751+
723752
export class AtRuleMediaComponent1 {
724753

725754
slStyle() {
@@ -12675,6 +12704,26 @@ export class GlobalTestRunner {
1267512704
message: ''
1267612705
};
1267712706

12707+
mount('divtestrefcomp1', new TestRefComponent1());
12708+
12709+
s.DETACHED_SET_TIMEOUT(() => {
12710+
const ref = s._updateMap.get('divtestrefcomp1').ref1;
12711+
const state = getState();
12712+
12713+
result.success = state.ref1 && ref !== null && ref !== undefined && ref.id === 'divtestrefcomp1';
12714+
12715+
window.globalTestResults.push(result);
12716+
window.globalTestCount++;
12717+
}, 18);
12718+
}
12719+
12720+
testFinalize990WithSimpleRef() {
12721+
const result = {
12722+
test: 'test simple reference',
12723+
success: false,
12724+
message: ''
12725+
};
12726+
1267812727
mount('routecomponent', new NoRouteComponent());
1267912728
addRoute('basictest/:someId', { component: new RouteBasicComponent(), root: 'routecomponent' });
1268012729
route('basictest/5');

‎src/sling/core/sling.js

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -436,6 +436,10 @@ const diffVAttrs = (node, oldAttrs, newAttrs) => {
436436
node.removeAttribute(remove);
437437
});
438438

439+
if (newAttrs.slref !== undefined) {
440+
node.slref = node;
441+
}
442+
439443
const isPreventDefault = newAttrs['slpreventdefault'];
440444
let appliedPrevention = false;
441445

@@ -1008,6 +1012,16 @@ const _mountInternal = (target, component, attachDetector) => {
10081012
prepareNodeForDestroyHook(target, component.slOnDestroy.bind(component));
10091013
}
10101014

1015+
let refs = target.querySelectorAll('[slref]');
1016+
if (target.slref !== undefined) {
1017+
refs = Array.from(refs);
1018+
refs.push(target);
1019+
}
1020+
for (let index = 0; index < refs.length; ++index) {
1021+
const slrefValue = refs[index].getAttribute('slref');
1022+
component[slrefValue] = refs[index].slref;
1023+
}
1024+
10111025
if (component.slAfterInit) {
10121026
component.slAfterInit();
10131027
_performChangeDetection();
@@ -1021,7 +1035,7 @@ const _mountInternal = (target, component, attachDetector) => {
10211035
}
10221036

10231037
export function version() {
1024-
return '18.4.2';
1038+
return '19.0.0';
10251039
}
10261040

10271041
function xmur3(str) {
@@ -1713,6 +1727,16 @@ export function update(rootEl, component) {
17131727
rootEl = diffVDom(rootEl, vNewApp, component);
17141728
}
17151729

1730+
let refs = rootEl.querySelectorAll('[slref]');
1731+
if (rootEl.slref !== undefined) {
1732+
refs = Array.from(refs);
1733+
refs.push(rootEl);
1734+
}
1735+
for (let index = 0; index < refs.length; ++index) {
1736+
const slrefValue = refs[index].getAttribute('slref');
1737+
component[slrefValue] = refs[index].slref;
1738+
}
1739+
17161740
s._afterInitArr.forEach((afterInitFn) => {
17171741
afterInitFn();
17181742
});

‎src/sling/core/sling.slim.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -417,6 +417,10 @@ const diffVAttrs = (node, oldAttrs, newAttrs) => {
417417
node.removeAttribute(remove);
418418
});
419419

420+
if (newAttrs.slref !== undefined) {
421+
node.slref = node;
422+
}
423+
420424
const isPreventDefault = newAttrs['slpreventdefault'];
421425
let appliedPrevention = false;
422426

@@ -949,6 +953,15 @@ const _mountInternal = (target, component, attachDetector) => {
949953
prepareNodeForDestroyHook(target, component.slOnDestroy.bind(component));
950954
}
951955

956+
const refs = target.querySelectorAll('[slref]');
957+
if (target.slref !== undefined) {
958+
refs.push(target);
959+
}
960+
for (let index = 0; index < refs.length; ++index) {
961+
const slrefValue = refs[index].getAttribute('slref');
962+
slrefValue = refs[index].slref;
963+
}
964+
952965
if (component.slAfterInit) {
953966
component.slAfterInit();
954967
_performChangeDetection();
@@ -962,7 +975,7 @@ const _mountInternal = (target, component, attachDetector) => {
962975
}
963976

964977
export function version() {
965-
return '18.4.2';
978+
return '19.0.0';
966979
}
967980

968981
export function resolveAll(promiseArr) {
@@ -1024,6 +1037,15 @@ export function update(rootEl, component) {
10241037
rootEl = diffVDom(rootEl, vNewApp, component);
10251038
}
10261039

1040+
const refs = rootEl.querySelectorAll('[slref]');
1041+
if (rootEl.slref !== undefined) {
1042+
refs.push(target);
1043+
}
1044+
for (let index = 0; index < refs.length; ++index) {
1045+
const slrefValue = refs[index].getAttribute('slref');
1046+
slrefValue = refs[index].slref;
1047+
}
1048+
10271049
s._afterInitArr.forEach((afterInitFn) => {
10281050
afterInitFn();
10291051
});

0 commit comments

Comments
 (0)