mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
commit
3b70920991
@ -1,10 +1,11 @@
|
||||
export function noop () {}
|
||||
|
||||
export function assign ( target ) {
|
||||
for ( var i = 1; i < arguments.length; i += 1 ) {
|
||||
var source = arguments[i];
|
||||
for ( var k in source ) target[k] = source[k];
|
||||
var k, source, i = 1, len = arguments.length;
|
||||
for ( ; i < len; i++ ) {
|
||||
source = arguments[i];
|
||||
for ( k in source ) target[k] = source[k];
|
||||
}
|
||||
|
||||
return target;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
|
||||
@keyframes why {
|
||||
0% { color: red; }
|
||||
100% { color: blue; }
|
||||
}
|
||||
|
||||
[svelte-2486527405].animated, [svelte-2486527405] .animated {
|
||||
animation: why 2s;
|
||||
}
|
||||
|
||||
[svelte-2486527405].also-animated, [svelte-2486527405] .also-animated {
|
||||
animation: not-defined-here 2s;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
<div class='animated'>animated</div>
|
||||
<div class='also-animated'>also animated</div>
|
||||
|
||||
<style>
|
||||
@keyframes -global-why {
|
||||
0% { color: red; }
|
||||
100% { color: blue; }
|
||||
}
|
||||
|
||||
.animated {
|
||||
animation: why 2s;
|
||||
}
|
||||
|
||||
.also-animated {
|
||||
animation: not-defined-here 2s;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
cascade: false
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
|
||||
div.foo {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.foo {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
<div>red</div>
|
||||
<div class='foo'>bold/blue</div>
|
||||
|
||||
<style>
|
||||
:global(div) {
|
||||
color: red;
|
||||
}
|
||||
|
||||
:global(div.foo) {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
:global(.foo) {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
|
||||
@keyframes svelte-776829126-why {
|
||||
0% { color: red; }
|
||||
100% { color: blue; }
|
||||
}
|
||||
|
||||
[svelte-776829126].animated, [svelte-776829126] .animated {
|
||||
animation: svelte-776829126-why 2s;
|
||||
}
|
||||
|
||||
[svelte-776829126].also-animated, [svelte-776829126] .also-animated {
|
||||
animation: not-defined-here 2s;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
<div class='animated'>animated</div>
|
||||
<div class='also-animated'>also animated</div>
|
||||
|
||||
<style>
|
||||
@keyframes why {
|
||||
0% { color: red; }
|
||||
100% { color: blue; }
|
||||
}
|
||||
|
||||
.animated {
|
||||
animation: why 2s;
|
||||
}
|
||||
|
||||
.also-animated {
|
||||
animation: not-defined-here 2s;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
cascade: false
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
|
||||
div[svelte-4161687011] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
div.foo[svelte-4161687011] {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.foo[svelte-4161687011] {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
<div>red</div>
|
||||
<div class='foo'>bold/blue</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
|
||||
div.foo {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.foo {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"message": "Cannot bind to rvalue",
|
||||
"pos": 19,
|
||||
"loc": {
|
||||
"line": 1,
|
||||
"column": 19
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<input bind:value='a + b'>
|
||||
@ -0,0 +1,55 @@
|
||||
export default {
|
||||
data: {
|
||||
prop: 'bar',
|
||||
obj: {
|
||||
foo: 'a',
|
||||
bar: 'b',
|
||||
baz: 'c'
|
||||
}
|
||||
},
|
||||
|
||||
html: `
|
||||
<input>
|
||||
<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
|
||||
`,
|
||||
|
||||
test ( assert, component, target, window ) {
|
||||
const input = target.querySelector( 'input' );
|
||||
const event = new window.Event( 'input' );
|
||||
|
||||
assert.equal( input.value, 'b' );
|
||||
|
||||
// edit bar
|
||||
input.value = 'e';
|
||||
input.dispatchEvent( event );
|
||||
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<input>
|
||||
<pre>{"foo":"a","bar":"e","baz":"c"}</pre>
|
||||
` );
|
||||
|
||||
// edit baz
|
||||
component.set({ prop: 'baz' });
|
||||
assert.equal( input.value, 'c' );
|
||||
|
||||
input.value = 'f';
|
||||
input.dispatchEvent( event );
|
||||
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<input>
|
||||
<pre>{"foo":"a","bar":"e","baz":"f"}</pre>
|
||||
` );
|
||||
|
||||
// edit foo
|
||||
component.set({ prop: 'foo' });
|
||||
assert.equal( input.value, 'a' );
|
||||
|
||||
input.value = 'd';
|
||||
input.dispatchEvent( event );
|
||||
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<input>
|
||||
<pre>{"foo":"d","bar":"e","baz":"f"}</pre>
|
||||
` );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,2 @@
|
||||
<input bind:value='obj[prop]'>
|
||||
<pre>{{JSON.stringify(obj)}}</pre>
|
||||
@ -0,0 +1,30 @@
|
||||
export default {
|
||||
data: {
|
||||
prop: 'name',
|
||||
user: {
|
||||
name: 'alice'
|
||||
}
|
||||
},
|
||||
|
||||
html: `<input>\n<p>hello alice</p>`,
|
||||
|
||||
test ( assert, component, target, window ) {
|
||||
const input = target.querySelector( 'input' );
|
||||
|
||||
assert.equal( input.value, 'alice' );
|
||||
|
||||
const event = new window.Event( 'input' );
|
||||
|
||||
input.value = 'bob';
|
||||
input.dispatchEvent( event );
|
||||
|
||||
assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` );
|
||||
|
||||
const user = component.get( 'user' );
|
||||
user.name = 'carol';
|
||||
|
||||
component.set({ user });
|
||||
assert.equal( input.value, 'carol' );
|
||||
assert.equal( target.innerHTML, `<input>\n<p>hello carol</p>` );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,2 @@
|
||||
<input bind:value='user[prop]'>
|
||||
<p>hello {{user.name}}</p>
|
||||
@ -0,0 +1,55 @@
|
||||
export default {
|
||||
data: {
|
||||
prop: 'bar',
|
||||
objects: [{
|
||||
foo: 'a',
|
||||
bar: 'b',
|
||||
baz: 'c'
|
||||
}]
|
||||
},
|
||||
|
||||
html: `
|
||||
<input>
|
||||
<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
|
||||
`,
|
||||
|
||||
test ( assert, component, target, window ) {
|
||||
const input = target.querySelector( 'input' );
|
||||
const event = new window.Event( 'input' );
|
||||
|
||||
assert.equal( input.value, 'b' );
|
||||
|
||||
// edit bar
|
||||
input.value = 'e';
|
||||
input.dispatchEvent( event );
|
||||
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<input>
|
||||
<pre>{"foo":"a","bar":"e","baz":"c"}</pre>
|
||||
` );
|
||||
|
||||
// edit baz
|
||||
component.set({ prop: 'baz' });
|
||||
assert.equal( input.value, 'c' );
|
||||
|
||||
input.value = 'f';
|
||||
input.dispatchEvent( event );
|
||||
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<input>
|
||||
<pre>{"foo":"a","bar":"e","baz":"f"}</pre>
|
||||
` );
|
||||
|
||||
// edit foo
|
||||
component.set({ prop: 'foo' });
|
||||
assert.equal( input.value, 'a' );
|
||||
|
||||
input.value = 'd';
|
||||
input.dispatchEvent( event );
|
||||
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<input>
|
||||
<pre>{"foo":"d","bar":"e","baz":"f"}</pre>
|
||||
` );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
{{#each objects as obj}}
|
||||
<input bind:value='obj[prop]'>
|
||||
<pre>{{JSON.stringify(obj)}}</pre>
|
||||
{{/each}}
|
||||
@ -0,0 +1,5 @@
|
||||
{{#if show}}
|
||||
{{#each fields as field}}
|
||||
<span>{{field}}</span>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
@ -0,0 +1,36 @@
|
||||
export default {
|
||||
data: {
|
||||
show: false,
|
||||
fields: [1, 2]
|
||||
},
|
||||
|
||||
html: `<div></div>`,
|
||||
|
||||
test ( assert, component, target ) {
|
||||
component.set({
|
||||
show: true,
|
||||
fields: [1, 2, 3]
|
||||
});
|
||||
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<div>
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
</div>
|
||||
` );
|
||||
|
||||
component.set({
|
||||
fields: [1, 2, 3, 4]
|
||||
});
|
||||
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<div>
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
</div>
|
||||
` );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
<div>
|
||||
<Nested :show :fields/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import Nested from './Nested.html';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Nested
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue