mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
committed by
GitHub
commit
d6dc60285e
@ -1,17 +1,17 @@
|
||||
import Block from '../../Block';
|
||||
import { escape } from '../../../../utils/stringify';
|
||||
import { escape, escapeTemplate } from '../../../../utils/stringify';
|
||||
import { Node } from '../../../../interfaces';
|
||||
|
||||
export default function stringifyAttributeValue(block: Block, chunks: Node[]) {
|
||||
return chunks
|
||||
.map((chunk: Node) => {
|
||||
if (chunk.type === 'Text') {
|
||||
return escape(chunk.data).replace(/"/g, '"');
|
||||
return escapeTemplate(escape(chunk.data).replace(/"/g, '"'));
|
||||
}
|
||||
|
||||
block.contextualise(chunk.expression);
|
||||
const { snippet } = chunk.metadata;
|
||||
return '${' + snippet + '}';
|
||||
return '${__escape(' + snippet + ')}';
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
cascade: false,
|
||||
dev: true
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
.foo[svelte-xyz]{}
|
||||
@ -0,0 +1,7 @@
|
||||
<div class='foo'></div>
|
||||
|
||||
<style>
|
||||
.foo {
|
||||
/* empty */
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
cascade: false
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<div class='foo'></div>
|
||||
|
||||
<style>
|
||||
.foo {
|
||||
/* empty */
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
dev: true
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
<p>foo: {{foo}}</p>
|
||||
<p>bar: {{bar}}</p>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
tag: 'my-app'
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,18 @@
|
||||
import * as assert from 'assert';
|
||||
import './main.html';
|
||||
|
||||
export default function (target) {
|
||||
const warnings = [];
|
||||
const warn = console.warn;
|
||||
|
||||
console.warn = warning => {
|
||||
warnings.push(warning);
|
||||
};
|
||||
|
||||
target.innerHTML = '<my-app foo=yes />';
|
||||
|
||||
assert.equal(warnings.length, 1);
|
||||
assert.equal(warnings[0], `<my-app> was created without expected data property 'bar'`);
|
||||
|
||||
console.warn = warn;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
html: `<span title='"foo"'>foo</span>`
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<span title='{{"\"foo\""}}'>foo</span>
|
||||
@ -0,0 +1,16 @@
|
||||
export default {
|
||||
test(assert, component, target) {
|
||||
const promise = Promise.resolve().then(() => component.set({ answer: 42 }));
|
||||
|
||||
component.set({ promise });
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<p>wait for it...</p>`);
|
||||
|
||||
return promise
|
||||
.then(() => {
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>the answer is 42!</p>
|
||||
`);
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
{{#if promise}}
|
||||
{{#await promise}}
|
||||
<p>wait for it...</p>
|
||||
{{then _}}
|
||||
<p>the answer is {{answer}}!</p>
|
||||
{{catch error}}
|
||||
<p>well that's odd</p>
|
||||
{{/await}}
|
||||
{{/if}}
|
||||
@ -0,0 +1 @@
|
||||
<div>{{value}}</div>
|
||||
@ -1,3 +1,3 @@
|
||||
export default {
|
||||
html: '<code>`${foo}\\n`</code>'
|
||||
html: '<code>`${foo}\\n`</code>\n<div title="`${foo}\\n`">foo</div>\n<div>`${foo}\\n`</div>',
|
||||
};
|
||||
|
||||
@ -1 +1,8 @@
|
||||
<code>`${foo}\n`</code>
|
||||
<div title="`${foo}\n`">foo</div>
|
||||
<Widget value="`${foo}\n`"/>
|
||||
|
||||
<script>
|
||||
import Widget from './Widget.html';
|
||||
export default { components: { Widget } };
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,52 @@
|
||||
export default {
|
||||
data: {
|
||||
color: 'red',
|
||||
foo: '/* < & > */',
|
||||
},
|
||||
|
||||
html: `
|
||||
<div>
|
||||
<style>
|
||||
/* something with < and > */
|
||||
div {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
foo
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<style>
|
||||
div > div {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
foo
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<style>
|
||||
/* something with < and > */
|
||||
/* < & > */
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
foo
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<style>
|
||||
/* < & > */
|
||||
div > div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
foo
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
@ -0,0 +1,43 @@
|
||||
<div>
|
||||
<style>
|
||||
/* something with < and > */
|
||||
div {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
foo
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<style>
|
||||
div > div {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
foo
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<style>
|
||||
/* something with < and > */
|
||||
{{foo}}
|
||||
div {
|
||||
color: {{color}};
|
||||
}
|
||||
</style>
|
||||
foo
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<style>
|
||||
{{foo}}
|
||||
div > div {
|
||||
color: {{color}};
|
||||
}
|
||||
</style>
|
||||
foo
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,9 @@
|
||||
export default {
|
||||
'skip-ssr': true,
|
||||
|
||||
html: `
|
||||
<div>foo</div>
|
||||
|
||||
<div>foo<div>foo</div></div>
|
||||
`,
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<noscript>foo</noscript>
|
||||
|
||||
<div>foo<noscript>foo</noscript></div>
|
||||
|
||||
<div>foo<div>foo<noscript>foo</noscript></div></div>
|
||||
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>
|
||||
<style>div { color: red; }</style>
|
||||
<script>alert('<>');</script>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
<div>
|
||||
<style>div { color: red; }</style>
|
||||
<script>alert('<>');</script>
|
||||
</div>
|
||||
@ -0,0 +1 @@
|
||||
<div>{{value}}</div>
|
||||
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
data: { foo: 'foo' },
|
||||
html: `<div>foo @ foo # foo</div>`,
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
<Widget value='foo @ {{foo}} # foo'/>
|
||||
|
||||
<script>
|
||||
import Widget from './Widget.html';
|
||||
export default { components: { Widget } };
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
<input bind:value>
|
||||
@ -0,0 +1,28 @@
|
||||
import { Store } from '../../../../store.js';
|
||||
|
||||
const store = new Store({
|
||||
name: 'world'
|
||||
});
|
||||
|
||||
export default {
|
||||
store,
|
||||
|
||||
html: `
|
||||
<h1>Hello world!</h1>
|
||||
<input>
|
||||
`,
|
||||
|
||||
test(assert, component, target, window) {
|
||||
const input = target.querySelector('input');
|
||||
const event = new window.Event('input');
|
||||
|
||||
input.value = 'everybody';
|
||||
input.dispatchEvent(event);
|
||||
|
||||
assert.equal(store.get('name'), 'everybody');
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<h1>Hello everybody!</h1>
|
||||
<input>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
<h1>Hello {{$name}}!</h1>
|
||||
<TextInput bind:value=$name/>
|
||||
|
||||
<script>
|
||||
import TextInput from './TextInput.html';
|
||||
|
||||
export default {
|
||||
components: { TextInput }
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue