msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

basic SSR working

Browse Source
pull/3539/head
Richard Harris 6 years ago
parent e3c98cf279
commit a2e96dbaba
10 changed files with 137 additions and 96 deletions
Show Stats Download Patch File Download Diff File

2
src/compiler/compile/Component.ts
Unescape View File

@ -837,7 +837,7 @@ export default class Component {
} }
rewrite_props(get_insert: (variable: Var) => Node[]) { rewrite_props(get_insert: (variable: Var) => Node[]) {
// TODO if (!this.ast.instance) return;
const component = this; const component = this;
const { instance_scope, instance_scope_map: map } = this; const { instance_scope, instance_scope_map: map } = this;

45
src/compiler/compile/render_ssr/Renderer.ts
Unescape View File

@ -13,6 +13,7 @@ import Text from './handlers/Text';
import Title from './handlers/Title'; import Title from './handlers/Title';
import { AppendTarget, CompileOptions } from '../../interfaces'; import { AppendTarget, CompileOptions } from '../../interfaces';
import { INode } from '../nodes/interfaces'; import { INode } from '../nodes/interfaces';
import { Expression } from 'estree';
type Handler = (node: any, renderer: Renderer, options: CompileOptions) => void; type Handler = (node: any, renderer: Renderer, options: CompileOptions) => void;
@ -43,17 +44,45 @@ export interface RenderOptions extends CompileOptions{
export default class Renderer { export default class Renderer {
has_bindings = false; has_bindings = false;
code = '';
state = {
quasi: {
type: 'TemplateElement',
value: { raw: '' }
}
};
literal = {
type: 'TemplateLiteral',
expressions: [],
quasis: []
};
targets: AppendTarget[] = []; targets: AppendTarget[] = [];
append(code: string) { append(code: string) {
if (this.targets.length) { throw new Error('no more append');
const target = this.targets[this.targets.length - 1]; // if (this.targets.length) {
const slot_name = target.slot_stack[target.slot_stack.length - 1]; // const target = this.targets[this.targets.length - 1];
target.slots[slot_name] += code; // const slot_name = target.slot_stack[target.slot_stack.length - 1];
} else { // target.slots[slot_name] += code;
this.code += code; // } else {
} // this.code += code;
// }
}
add_string(str: string) {
this.state.quasi.value.raw += str;
}
add_expression(node: Expression) {
this.literal.quasis.push(this.state.quasi);
this.literal.expressions.push(node);
this.state.quasi = {
type: 'TemplateElement',
value: { raw: '' }
};
} }
render(nodes: INode[], options: RenderOptions) { render(nodes: INode[], options: RenderOptions) {

75
src/compiler/compile/render_ssr/handlers/Element.ts
Unescape View File

@ -1,12 +1,12 @@
import { is_void, quote_prop_if_necessary, quote_name_if_necessary } from '../../../utils/names'; import { is_void, quote_prop_if_necessary, quote_name_if_necessary } from '../../../utils/names';
import Attribute from '../../nodes/Attribute'; import Attribute from '../../nodes/Attribute';
import Class from '../../nodes/Class'; import Class from '../../nodes/Class';
import { snip } from '../../utils/snip';
import { stringify_attribute, stringify_class_attribute } from '../../utils/stringify_attribute'; import { stringify_attribute, stringify_class_attribute } from '../../utils/stringify_attribute';
import { get_slot_scope } from './shared/get_slot_scope'; import { get_slot_scope } from './shared/get_slot_scope';
import Renderer, { RenderOptions } from '../Renderer'; import Renderer, { RenderOptions } from '../Renderer';
import Element from '../../nodes/Element'; import Element from '../../nodes/Element';
import Text from '../../nodes/Text'; import Text from '../../nodes/Text';
import { x } from 'code-red';
// source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7 // source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7
const boolean_attributes = new Set([ const boolean_attributes = new Set([
@ -52,7 +52,7 @@ const boolean_attributes = new Set([
export default function(node: Element, renderer: Renderer, options: RenderOptions & { export default function(node: Element, renderer: Renderer, options: RenderOptions & {
slot_scopes: Map<any, any>; slot_scopes: Map<any, any>;
}) { }) {
let opening_tag = `<${node.name}`; renderer.add_string(`<${node.name}`);
// awkward special case // awkward special case
let node_contents; let node_contents;
@ -96,29 +96,29 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
const args = []; const args = [];
node.attributes.forEach(attribute => { node.attributes.forEach(attribute => {
if (attribute.is_spread) { if (attribute.is_spread) {
args.push(snip(attribute.expression)); args.push(attribute.expression.node);
} else { } else {
if (attribute.name === 'value' && node.name === 'textarea') { if (attribute.name === 'value' && node.name === 'textarea') {
node_contents = stringify_attribute(attribute, true); node_contents = stringify_attribute(attribute, true);
} else if (attribute.is_true) { } else if (attribute.is_true) {
args.push(`{ ${quote_name_if_necessary(attribute.name)}: true }`); args.push(x`{ ${attribute.name}: true }`);
} else if ( } else if (
boolean_attributes.has(attribute.name) && boolean_attributes.has(attribute.name) &&
attribute.chunks.length === 1 && attribute.chunks.length === 1 &&
attribute.chunks[0].type !== 'Text' attribute.chunks[0].type !== 'Text'
) { ) {
// a boolean attribute with one non-Text chunk // a boolean attribute with one non-Text chunk
args.push(`{ ${quote_name_if_necessary(attribute.name)}: ${snip(attribute.chunks[0])} }`); args.push(x`{ ${attribute.name}: ${attribute.chunks[0].node} }`);
} else if (attribute.name === 'class' && class_expression) { } else if (attribute.name === 'class' && class_expression) {
// Add class expression // Add class expression
args.push(`{ ${quote_name_if_necessary(attribute.name)}: [\`${stringify_class_attribute(attribute)}\`, \`\${${class_expression}}\`].join(' ').trim() }`); args.push(x`{ ${attribute.name}: [${stringify_class_attribute(attribute)}, ${class_expression}}].join(' ').trim() }`);
} else { } else {
args.push(`{ ${quote_name_if_necessary(attribute.name)}: \`${attribute.name === 'class' ? stringify_class_attribute(attribute) : stringify_attribute(attribute, true)}\` }`); args.push(x`{ ${attribute.name}: ${attribute.name === 'class' ? stringify_class_attribute(attribute) : stringify_attribute(attribute, true)} }`);
} }
} }
}); });
opening_tag += "${@spread([" + args.join(', ') + "])}"; renderer.add_expression(x`@spread([${args}])`);
} else { } else {
node.attributes.forEach((attribute: Attribute) => { node.attributes.forEach((attribute: Attribute) => {
if (attribute.type !== 'Attribute') return; if (attribute.type !== 'Attribute') return;
@ -126,23 +126,32 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
if (attribute.name === 'value' && node.name === 'textarea') { if (attribute.name === 'value' && node.name === 'textarea') {
node_contents = stringify_attribute(attribute, true); node_contents = stringify_attribute(attribute, true);
} else if (attribute.is_true) { } else if (attribute.is_true) {
opening_tag += ` ${attribute.name}`; renderer.add_string(` ${attribute.name}`);
} else if ( } else if (
boolean_attributes.has(attribute.name) && boolean_attributes.has(attribute.name) &&
attribute.chunks.length === 1 && attribute.chunks.length === 1 &&
attribute.chunks[0].type !== 'Text' attribute.chunks[0].type !== 'Text'
) { ) {
// a boolean attribute with one non-Text chunk // a boolean attribute with one non-Text chunk
opening_tag += '${' + snip(attribute.chunks[0]) + ' ? " ' + attribute.name + '" : "" }'; throw new Error('here');
renderer.add_expression(x`${attribute.chunks[0]} ? "${attribute.name}" : ""`);
} else if (attribute.name === 'class' && class_expression) { } else if (attribute.name === 'class' && class_expression) {
add_class_attribute = false; add_class_attribute = false;
opening_tag += ` class="\${[\`${stringify_class_attribute(attribute)}\`, ${class_expression}].join(' ').trim() }"`; renderer.add_string(` class="`);
renderer.add_expression(x`[${stringify_class_attribute(attribute)}, ${class_expression}].join(' ').trim()`);
renderer.add_string(`"`);
} else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') { } else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
const { name } = attribute; const { name } = attribute;
const snippet = snip(attribute.chunks[0]); const snippet = attribute.chunks[0].node;
opening_tag += '${@add_attribute("' + name + '", ' + snippet + ', ' + (boolean_attributes.has(name) ? 1 : 0) + ')}'; console.log(snippet);
renderer.add_expression(x`@add_attribute("${name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`);
} else { } else {
opening_tag += ` ${attribute.name}="${attribute.name === 'class' ? stringify_class_attribute(attribute) : stringify_attribute(attribute, true)}"`; renderer.add_string(` ${attribute.name}="`);
attribute.chunks.forEach(chunk => {
if (chunk.type === 'Text') renderer.add_string(chunk.data);
else renderer.add_expression(x`@escape(${chunk.node})`);
});
renderer.add_string(`"`);
} }
}); });
} }
@ -157,38 +166,36 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
if (name === 'group') { if (name === 'group') {
// TODO server-render group bindings // TODO server-render group bindings
} else if (contenteditable && (name === 'textContent' || name === 'innerHTML')) { } else if (contenteditable && (name === 'textContent' || name === 'innerHTML')) {
node_contents = snip(expression); node_contents = expression.node;
value = name === 'textContent' ? '@escape($$value)' : '$$value'; value = name === 'textContent' ? x`@escape($$value)` : x`$$value`;
} else if (binding.name === 'value' && node.name === 'textarea') { } else if (binding.name === 'value' && node.name === 'textarea') {
const snippet = snip(expression); const snippet = expression.node;
node_contents = '${(' + snippet + ') || ""}'; node_contents = x`${snippet} || ""`;
} else { } else {
const snippet = snip(expression); const snippet = expression.node;
opening_tag += '${@add_attribute("' + name + '", ' + snippet + ', 1)}'; renderer.add_expression(x`@add_attribute("${name}", ${snippet}, 1)`);
} }
}); });
if (add_class_attribute) { // if (add_class_attribute) {
opening_tag += `\${@add_classes([${class_expression}].join(' ').trim())}`; // opening_tag += `\${@add_classes([${class_expression}].join(' ').trim())}`;
} // }
opening_tag += '>';
renderer.append(opening_tag); renderer.add_string('>');
if (node_contents !== undefined) { if (node_contents !== undefined) {
if (contenteditable) { // if (contenteditable) {
renderer.append('${($$value => $$value === void 0 ? `'); // renderer.append('${($$value => $$value === void 0 ? `');
renderer.render(node.children, options); // renderer.render(node.children, options);
renderer.append('` : ' + value + ')(' + node_contents + ')}'); // renderer.append('` : ' + value + ')(' + node_contents + ')}');
} else { // } else {
renderer.append(node_contents); // renderer.append(node_contents);
} // }
} else { } else {
renderer.render(node.children, options); renderer.render(node.children, options);
} }
if (!is_void(node.name)) { if (!is_void(node.name)) {
renderer.append(`</${node.name}>`); renderer.add_string(`</${node.name}>`);
} }
} }

31
src/compiler/compile/render_ssr/handlers/InlineComponent.ts
Unescape View File

@ -1,6 +1,5 @@
import { escape, escape_template, stringify } from '../../utils/stringify'; import { escape, escape_template, stringify, string_literal } from '../../utils/stringify';
import { quote_name_if_necessary } from '../../../utils/names'; import { quote_name_if_necessary } from '../../../utils/names';
import { snip } from '../../utils/snip';
import Renderer, { RenderOptions } from '../Renderer'; import Renderer, { RenderOptions } from '../Renderer';
import { get_slot_scope } from './shared/get_slot_scope'; import { get_slot_scope } from './shared/get_slot_scope';
import { AppendTarget } from '../../../interfaces'; import { AppendTarget } from '../../../interfaces';
@ -18,19 +17,15 @@ function stringify_attribute(chunk: INode) {
} }
function get_attribute_value(attribute) { function get_attribute_value(attribute) {
if (attribute.is_true) return `true`; if (attribute.is_true) return x`true`;
if (attribute.chunks.length === 0) return `''`; if (attribute.chunks.length === 0) return x`''`;
if (attribute.chunks.length === 1) { return attribute.chunks
const chunk = attribute.chunks[0]; .map(chunk => {
if (chunk.type === 'Text') { if (chunk.type === 'Text') return string_literal(chunk.data);
return stringify(chunk.data); return chunk.node;
} })
.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
return snip(chunk);
}
return '`' + attribute.chunks.map(stringify_attribute).join('') + '`';
} }
export default function(node: InlineComponent, renderer: Renderer, options: RenderOptions) { export default function(node: InlineComponent, renderer: Renderer, options: RenderOptions) {
@ -41,7 +36,7 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
renderer.has_bindings = true; renderer.has_bindings = true;
// TODO this probably won't work for contextual bindings // TODO this probably won't work for contextual bindings
const snippet = snip(binding.expression); const snippet = binding.expression.node;
binding_props.push(p`${binding.name}: ${snippet}`); binding_props.push(p`${binding.name}: ${snippet}`);
binding_fns.push(p`${binding.name}: $$value => { ${snippet} = $$value; $$settled = false }`); binding_fns.push(p`${binding.name}: $$value => { ${snippet} = $$value; $$settled = false }`);
@ -66,7 +61,7 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
})`; })`;
} else { } else {
props = x`{ props = x`{
${node.attributes.map(attribute => p`${attribute.name}: ${get_attribute_value(attribute)}`)} ${node.attributes.map(attribute => p`${attribute.name}: ${get_attribute_value(attribute)}`)},
${binding_props} ${binding_props}
}`; }`;
} }
@ -115,5 +110,5 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
${slot_fns} ${slot_fns}
}`; }`;
renderer.append(`\${@validate_component(${expression}, '${node.name}').$$render($$result, ${props}, ${bindings}, ${slots})}`); renderer.add_expression(x`@validate_component(${expression}, "${node.name}").$$render($$result, ${props}, ${bindings}, ${slots})`);
} }

12
src/compiler/compile/render_ssr/handlers/Tag.ts
Unescape View File

@ -1,13 +1,15 @@
import { snip } from '../../utils/snip';
import Renderer, { RenderOptions } from '../Renderer'; import Renderer, { RenderOptions } from '../Renderer';
import { x } from 'code-red';
export default function(node, renderer: Renderer, _options: RenderOptions) { export default function(node, renderer: Renderer, _options: RenderOptions) {
const snippet = snip(node.expression); const snippet = node.expression.node;
renderer.append( renderer.add_expression(
node.parent && node.parent &&
node.parent.type === 'Element' && node.parent.type === 'Element' &&
node.parent.name === 'style' node.parent.name === 'style'
? '${' + snippet + '}' ? snippet
: '${@escape(' + snippet + ')}' : x`@escape(${snippet})`
); );
} }

5
src/compiler/compile/render_ssr/handlers/Text.ts
Unescape View File

@ -1,4 +1,4 @@
import { escape_html, escape_template, escape } from '../../utils/stringify'; import { escape_html } from '../../utils/stringify';
import Renderer, { RenderOptions } from '../Renderer'; import Renderer, { RenderOptions } from '../Renderer';
import Text from '../../nodes/Text'; import Text from '../../nodes/Text';
import Element from '../../nodes/Element'; import Element from '../../nodes/Element';
@ -13,5 +13,6 @@ export default function(node: Text, renderer: Renderer, _options: RenderOptions)
// unless this Text node is inside a <script> or <style> element, escape &,<,> // unless this Text node is inside a <script> or <style> element, escape &,<,>
text = escape_html(text); text = escape_html(text);
} }
renderer.append(escape(escape_template(text)));
renderer.add_string(text);
} }

36
src/compiler/compile/render_ssr/index.ts
Unescape View File

@ -19,6 +19,9 @@ export default function ssr(
locate: component.locate locate: component.locate
}, options)); }, options));
// TODO put this inside the Renderer class
renderer.literal.quasis.push(renderer.state.quasi);
// TODO concatenate CSS maps // TODO concatenate CSS maps
const css = options.customElement ? const css = options.customElement ?
{ code: null, map: null } : { code: null, map: null } :
@ -60,7 +63,7 @@ export default function ssr(
// TODO only do this for props with a default value // TODO only do this for props with a default value
const parent_bindings = instance_javascript const parent_bindings = instance_javascript
? props.map(prop => { ? props.map(prop => {
return `if ($$props.${prop.export_name} === void 0 && $$bindings.${prop.export_name} && ${prop.name} !== void 0) $$bindings.${prop.export_name}(${prop.name});`; return b`if ($$props.${prop.export_name} === void 0 && $$bindings.${prop.export_name} && ${prop.name} !== void 0) $$bindings.${prop.export_name}(${prop.name});`;
}) })
: []; : [];
@ -105,7 +108,7 @@ export default function ssr(
${reactive_declarations} ${reactive_declarations}
$$rendered = \`${renderer.code}\`; $$rendered = ${renderer.literal};
} while (!$$settled); } while (!$$settled);
return $$rendered; return $$rendered;
@ -115,23 +118,22 @@ export default function ssr(
${reactive_declarations} ${reactive_declarations}
return \`${renderer.code}\`;`; return ${renderer.literal};`;
const blocks = [ const blocks = [
reactive_stores.length > 0 && `let ${reactive_stores ...reactive_stores.map(({ name }) => {
.map(({ name }) => { const store_name = name.slice(1);
const store_name = name.slice(1); const store = component.var_lookup.get(store_name);
const store = component.var_lookup.get(store_name); if (store && store.hoistable) {
if (store && store.hoistable) { const get_store_value = component.helper('get_store_value');
const get_store_value = component.helper('get_store_value'); return b`let ${name} = ${get_store_value}(${store_name});`;
return `${name} = ${get_store_value}(${store_name})`; }
} return b`let ${name};`;
return name; }),
})
.join(', ')};`,
instance_javascript, instance_javascript,
parent_bindings.join('\n'), ...parent_bindings,
css.code && `$$result.css.add(#css);`, css.code && b`$$result.css.add(#css);`,
main main
].filter(Boolean); ].filter(Boolean);
@ -147,7 +149,7 @@ export default function ssr(
${component.fully_hoisted} ${component.fully_hoisted}
const ${name} = @create_ssr_component(($$result, $$props, $$bindings, $$slots) => { const ${name} = @create_ssr_component(($$result, $$props, $$bindings, $$slots) => {
${blocks.join('\n\n')} ${blocks}
}); });
`; `;
} }

22
test/helpers.js
Unescape View File

@ -182,16 +182,20 @@ export function showOutput(cwd, options = {}, compile = svelte.compile) {
glob('**/*.svelte', { cwd }).forEach(file => { glob('**/*.svelte', { cwd }).forEach(file => {
if (file[0] === '_') return; if (file[0] === '_') return;
const { js } = compile( try {
fs.readFileSync(`${cwd}/${file}`, 'utf-8'), const { js } = compile(
Object.assign(options, { fs.readFileSync(`${cwd}/${file}`, 'utf-8'),
filename: file Object.assign(options, {
}) filename: file
); })
);
console.log( // eslint-disable-line no-console console.log( // eslint-disable-line no-console
`\n>> ${colors.cyan().bold(file)}\n${addLineNumbers(js.code)}\n<< ${colors.cyan().bold(file)}` `\n>> ${colors.cyan().bold(file)}\n${addLineNumbers(js.code)}\n<< ${colors.cyan().bold(file)}`
); );
} catch (err) {
console.log(`failed to generate output: ${err.message}`);
}
}); });
} }

2
test/runtime/index.js
Unescape View File

@ -26,7 +26,7 @@ process.on('unhandledRejection', err => {
unhandled_rejection = err; unhandled_rejection = err;
}); });
describe.only("runtime", () => { describe("runtime", () => {
before(() => { before(() => {
svelte = loadSvelte(false); svelte = loadSvelte(false);
svelte$ = loadSvelte(true); svelte$ = loadSvelte(true);

3
test/server-side-rendering/index.js
Unescape View File

@ -20,7 +20,7 @@ function tryToReadFile(file) {
const sveltePath = process.cwd().split('\\').join('/'); const sveltePath = process.cwd().split('\\').join('/');
describe("ssr", () => { describe.only("ssr", () => {
before(() => { before(() => {
require("../../register")({ require("../../register")({
extensions: ['.svelte', '.html'], extensions: ['.svelte', '.html'],
@ -75,6 +75,7 @@ describe("ssr", () => {
if (show) showOutput(dir, { generate: 'ssr' }); if (show) showOutput(dir, { generate: 'ssr' });
} catch (err) { } catch (err) {
showOutput(dir, { generate: 'ssr' }); showOutput(dir, { generate: 'ssr' });
err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), dir)}/main.svelte`;
throw err; throw err;
} }
}); });

Write Preview
Loading…
Cancel
Save