mirror of https://github.com/sveltejs/svelte
Merge pull request #1024 from sveltejs/gh-1013
update SSR render method, and introduce <:Head>pull/1028/head
Rich Harris
8 years ago
committed by
GitHub
commit
394dec9f11
@ -0,0 +1,32 @@
|
||||
import deindent from '../../utils/deindent';
|
||||
import { stringify } from '../../utils/stringify';
|
||||
import Node from './shared/Node';
|
||||
import Block from '../dom/Block';
|
||||
import Attribute from './Attribute';
|
||||
|
||||
export default class Head extends Node {
|
||||
type: 'Head';
|
||||
attributes: Attribute[];
|
||||
|
||||
init(
|
||||
block: Block,
|
||||
stripWhitespace: boolean,
|
||||
nextSibling: Node
|
||||
) {
|
||||
this.initChildren(block, true, null);
|
||||
}
|
||||
|
||||
build(
|
||||
block: Block,
|
||||
parentNode: string,
|
||||
parentNodes: string
|
||||
) {
|
||||
const { generator } = this;
|
||||
|
||||
this.var = 'document.head';
|
||||
|
||||
this.children.forEach((child: Node) => {
|
||||
child.build(block, 'document.head', null);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import { SsrGenerator } from '../index';
|
||||
import Block from '../Block';
|
||||
import { Node } from '../../../interfaces';
|
||||
import stringifyAttributeValue from './shared/stringifyAttributeValue';
|
||||
import visit from '../visit';
|
||||
|
||||
export default function visitDocument(
|
||||
generator: SsrGenerator,
|
||||
block: Block,
|
||||
node: Node
|
||||
) {
|
||||
generator.append('${(__result.head += `');
|
||||
|
||||
node.children.forEach((child: Node) => {
|
||||
visit(generator, block, child);
|
||||
});
|
||||
|
||||
generator.append('`, "")}');
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import Block from '../../Block';
|
||||
import { escape } 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, '"');
|
||||
}
|
||||
|
||||
block.contextualise(chunk.expression);
|
||||
const { snippet } = chunk.metadata;
|
||||
return '${' + snippet + '}';
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import { Validator } from '../index';
|
||||
import { Node } from '../../interfaces';
|
||||
|
||||
export default function validateHead(validator: Validator, node: Node, refs: Map<string, Node[]>, refCallees: Node[]) {
|
||||
if (node.attributes.length) {
|
||||
validator.error(`<:Head> should not have any attributes or directives`, node.start);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
data: {
|
||||
adjective: 'custom'
|
||||
},
|
||||
|
||||
test(assert, component, target, window) {
|
||||
assert.equal(window.document.title, 'a custom title');
|
||||
|
||||
component.set({ adjective: 'different' });
|
||||
assert.equal(window.document.title, 'a different title');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
<:Head>
|
||||
<title>a {{adjective}} title</title>
|
||||
<meta name='twitter:creator' content='@sveltejs'>
|
||||
</:Head>
|
||||
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
test(assert, component, target, window) {
|
||||
assert.equal(window.document.title, 'changed');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
<:Head>
|
||||
<title>changed</title>
|
||||
<meta name='twitter:creator' content='@sveltejs'>
|
||||
</:Head>
|
||||
@ -0,0 +1,2 @@
|
||||
|
||||
<title>a custom title</title>
|
||||
@ -0,0 +1 @@
|
||||
<title>a custom title</title>
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"adjective": "custom"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<:Head>
|
||||
<title>a {{adjective}} title</title>
|
||||
</:Head>
|
||||
@ -1,3 +1,2 @@
|
||||
div[svelte-1408461649],[svelte-1408461649] div{color:red}
|
||||
div[svelte-54999591],[svelte-54999591] div{color:green}
|
||||
div[svelte-2385185803],[svelte-2385185803] div{color:blue}
|
||||
div[svelte-1580141456],[svelte-1580141456] div{color:green}
|
||||
@ -1,5 +1,8 @@
|
||||
<div svelte-1408461649>red</div>
|
||||
<div svelte-54999591>green: foo</div>
|
||||
<div svelte-2385185803>blue: foo</div>
|
||||
<div svelte-54999591>green: bar</div>
|
||||
<div svelte-2385185803>blue: bar</div>
|
||||
<div svelte-1580141456>green: foo</div>
|
||||
|
||||
|
||||
|
||||
<div svelte-1580141456>green: bar</div>
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
div[svelte-1408461649],[svelte-1408461649] div{color:red}
|
||||
div[svelte-54999591],[svelte-54999591] div{color:green}
|
||||
div[svelte-2385185803],[svelte-2385185803] div{color:blue}
|
||||
div[svelte-1580141456],[svelte-1580141456] div{color:green}
|
||||
@ -1,5 +1,8 @@
|
||||
<div svelte-1408461649>red</div>
|
||||
<div svelte-54999591>green: foo</div>
|
||||
<div svelte-2385185803>blue: foo</div>
|
||||
<div svelte-54999591>green: bar</div>
|
||||
<div svelte-2385185803>blue: bar</div>
|
||||
<div svelte-1580141456>green: foo</div>
|
||||
|
||||
|
||||
|
||||
<div svelte-1580141456>green: bar</div>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue