Merge branch 'master' into sigil-component-attribute-ssr

pull/1165/head
Conduitry 7 years ago committed by GitHub
commit 7b282e58a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -162,6 +162,8 @@ export default class Element extends Node {
this.generator.slots.add(slotName); this.generator.slots.add(slotName);
} }
if (this.name === 'noscript') return;
const childState = { const childState = {
parentNode: this.var, parentNode: this.var,
parentNodes: parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null parentNodes: parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null
@ -415,7 +417,15 @@ export default class Element extends Node {
} }
function toHTML(node: Element | Text) { function toHTML(node: Element | Text) {
if (node.type === 'Text') return escapeHTML(node.data); if (node.type === 'Text') {
return node.parent &&
node.parent.type === 'Element' &&
(node.parent.name === 'script' || node.parent.name === 'style')
? node.data
: escapeHTML(node.data);
}
if (node.name === 'noscript') return '';
let open = `<${node.name}`; let open = `<${node.name}`;
@ -433,10 +443,6 @@ export default class Element extends Node {
if (isVoidElementName(node.name)) return open + '>'; if (isVoidElementName(node.name)) return open + '>';
if (node.name === 'script' || node.name === 'style') {
return `${open}>${node.data}</${node.name}>`;
}
return `${open}>${node.children.map(toHTML).join('')}</${node.name}>`; return `${open}>${node.children.map(toHTML).join('')}</${node.name}>`;
} }
} }

@ -68,8 +68,6 @@ export default function visitElement(
if (node.name === 'textarea' && textareaContents !== undefined) { if (node.name === 'textarea' && textareaContents !== undefined) {
generator.append(textareaContents); generator.append(textareaContents);
} else if (node.name === 'script' || node.name === 'style') {
generator.append(escape(node.data));
} else { } else {
node.children.forEach((child: Node) => { node.children.forEach((child: Node) => {
visit(generator, block, child); visit(generator, block, child);

@ -10,5 +10,11 @@ export default function visitMustacheTag(
block.contextualise(node.expression); block.contextualise(node.expression);
const { snippet } = node.metadata; const { snippet } = node.metadata;
generator.append('${__escape(' + snippet + ')}'); generator.append(
node.parent &&
node.parent.type === 'Element' &&
node.parent.name === 'style'
? '${' + snippet + '}'
: '${__escape(' + snippet + ')}'
);
} }

@ -8,5 +8,14 @@ export default function visitText(
block: Block, block: Block,
node: Node node: Node
) { ) {
generator.append(escapeTemplate(escapeHTML(escape(node.data)))); let text = node.data;
if (
!node.parent ||
node.parent.type !== 'Element' ||
(node.parent.name !== 'script' && node.parent.name !== 'style')
) {
// unless this Text node is inside a <script> or <style> element, escape &,<,>
text = escapeHTML(text);
}
generator.append(escape(escapeTemplate(text)));
} }

@ -224,10 +224,22 @@ export default function tag(parser: Parser) {
); );
parser.read(/<\/textarea>/); parser.read(/<\/textarea>/);
element.end = parser.index; element.end = parser.index;
} else if (name === 'script' || name === 'style') { } else if (name === 'script') {
// special case // special case
element.data = parser.readUntil(new RegExp(`</${name}>`)); const start = parser.index;
parser.eat(`</${name}>`, true); const data = parser.readUntil(/<\/script>/);
const end = parser.index;
element.children.push({ start, end, type: 'Text', data });
parser.eat('</script>', true);
element.end = parser.index;
} else if (name === 'style') {
// special case
element.children = readSequence(
parser,
() =>
parser.template.slice(parser.index, parser.index + 8) === '</style>'
);
parser.read(/<\/style>/);
element.end = parser.index; element.end = parser.index;
} else { } else {
parser.stack.push(element); parser.stack.push(element);

@ -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>
Loading…
Cancel
Save