Skip to content

Commit

Permalink
minor fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@eavichay
eavichay committed Mar 28, 2017
1 parent c17bafc commit fc06298
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 24 deletions.
6 changes: 3 additions & 3 deletions Slim.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ class Slim extends HTMLElement {
if (!descriptor.target.hasAttribute('slim-repeat')) {
let sourceRef = descriptor.target._boundRepeaterParent || source;
let value = sourceRef[ descriptor.method ].apply( sourceRef,
descriptor.properties.map( prop => { return (descriptor.target || sourceRef)[prop] }));
descriptor.properties.map( prop => { return descriptor.target[prop] || sourceRef[prop] }));
descriptor.target[ Slim.__dashToCamel(descriptor.attribute) ] = value;
descriptor.target.setAttribute( descriptor.attribute, value )
}
Expand Down Expand Up @@ -661,10 +661,10 @@ Slim.__initRepeater = function() {
}
Array.prototype.slice.call(clone.querySelectorAll('*')).forEach( element => {
element._boundParent = clone._boundParent;
element._boundRepeaterParent = this._boundParent;
element._boundRepeaterParent = clone._boundRepeaterParent;
element[targetPropName] = clone[targetPropName];
element.data_index = clone.data_index;
element.data_source = clone.data_source
element.data_source = clone.data_source;
})
}

Expand Down
22 changes: 11 additions & 11 deletions example/TodoList/Todo2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,18 @@
</style>

<script>
Slim.tag('todo-item', class extends Slim {
get useShadow() { return true; }
get template() {
return `<span class="[[getDoneClass(todo)]]" bind>[[todo.text]]</span>`;
}
Slim.tag('todo-item',
`<span class="[[getDoneClass(todo)]]" bind>[[todo.text]]</span>`,

get isInteractive() { return true;}
class extends Slim {
get useShadow() { return true; }

getDoneClass(todo) {
if (todo.done) return 'done'
return ''
}
get isInteractive() { return true;}

getDoneClass(todo) {
if (todo.done) return 'done'
return ''
}
});

Slim.tag('todo-list', class extends Slim {
Expand All @@ -47,8 +47,8 @@
</div>
<div>
<ul>
<todo-item slim-repeat="todos" slim-repeat-as="todo" click="toggle"></todo-item>
<li slim-repeat="todos" slim-repeat-as="todo">
<todo-item click="toggle"></todo-item>
</li>
</ul>
</div>
Expand Down
53 changes: 52 additions & 1 deletion example/tests/bind-test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@
<script>
Slim.tag('slim-confirm', class extends Slim {


onBeforeCreated() {
console.log('onBeforeCreated', this);
}
get template() {
return `<div>
<div>
Expand Down Expand Up @@ -100,6 +102,55 @@ <h3 slim-show="[[urProp]]">Confirm reusable example</h3>
</bind-parent>


<repeat-tester></repeat-tester>
<script>
Slim.tag('repeat-tester',
`
<ul>
<li slim-repeat="items" slim-repeat-as="item" active="[[isActive(item)]]" bind click="handleItemSelect">[[item.label]]</li>
</ul>
<style>
li {
color: blue;
}
li[active="true"] {
color: white;
background-color: black;
}
</style>
`,
class extends Slim {

get useShadow() { return true; }

onBeforeCreated() {
this.items = [
{label: 'item 1', value: 1},
{label: 'item 2', value: 2},
{label: 'item 3', value: 3},
];

this.current = this.items[0];

setTimeout( () => {
this.items.push( {label: 'item 4', value: 4});
}, 1000);
}

isActive(item) {
console.log(item);
return item === this.current;
}

handleItemSelect(e) {
this.current = e.target.item;
console.log(this.current);
this.update();
}
});
</script>


<!--<event-bus-e1></event-bus-e1>-->
<!--<event-bus-e2></event-bus-e2>-->
<!--<event-bus-e3></event-bus-e3>-->
Expand Down
71 changes: 64 additions & 7 deletions example/tests/repeat-benchmark.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,90 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="../../Slim.js"></script>
<script>
Slim.polyfill('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.min.js');
Slim.polyfill('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.min.js');
</script>
</head>
<body>
</body>
<benchmark-tester></benchmark-tester>
<div id="react"></div>
<benchmark-tester></benchmark-tester>

<script type="text/jsx">
const arr = [];
var R = React.createClass({
componentWillMount: function() {
this.state = {
arr: arr
};
window.startReactBenchmark = () => {
this.startBenchmark();
}
},
startBenchmark: function() {
while( arr.length < ARR_LENGTH ) {
arr.push('A' + Math.random());
}
this.setState({arr: arr.concat()});
},
render: function() {
return (
<div>{ this.state.arr.map( (x,i) => (<div key={i}>{x}</div>))}</div>
);
}
});
window.ReactElement = R;
React.render(<R />, document.getElementById('react'));
</script>

<script>
const ARR_LENGTH = 10000;
const benchmarkReact = function() {
console.time('React');
window.startReactBenchmark();
console.timeEnd('React');
};

const benchmarkHTML = function() {
console.time('JS');
let el = document.createElement('div');
document.body.appendChild(el);
let arr = [];
while (arr.length < ARR_LENGTH) {
const random = Math.random();
arr.push(random);
let child = document.createElement('div');
child.innerText = random.toString();
el.appendChild(child);
}
console.timeEnd('JS');
setTimeout(benchmarkReact, 100);
};

Slim.tag('benchmark-tester', class extends Slim {

get template() {
return `<div slim-repeat="arr" bind>[[data]]</div>`
}

onBeforeCreated() {
this.arr = [];
}

onAfterRender() {
console.log(new Date().getTime())
this.arr = []
while (this.arr.length < 1000) {
this.arr.push(Math.random())
console.time('Slim');
while(this.arr.length < ARR_LENGTH) {
this.arr.push(Math.random());
}
}

update() {
super.update()
console.log(new Date().getTime())
console.timeEnd('Slim');
setTimeout(benchmarkHTML, 100);
}

})
Expand Down
6 changes: 4 additions & 2 deletions example/tests/test-repeater.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@
<head>
</head>
<script src="../../Slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<body>
<repeat-tester></repeat-tester>
<script>
Slim.tag('repeat-tester',
`
<ul>
<li slim-repeat="items" slim-repeat-as="item" active="[[isActive(item)]]" bind click="handleItemSelect">[[item.label]]</li>
<li slim-repeat="items" slim-repeat-as="item" click="handleItemSelect">
<span active="[[isActive(item)]]" bind>[[item.label]]</span>
</li>
</ul>
`,
class extends Slim {
Expand All @@ -27,7 +30,6 @@
}

isActive(item) {
console.log(item);
return item === this.current;
}

Expand Down

0 comments on commit fc06298

Please sign in to comment.