From 0127f9f0ca621295d0ede03b350eeb3b299ce73f Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 13 Dec 2017 09:28:29 -0500 Subject: [PATCH] change server-side render method signature --- mocha.opts | 1 + src/generators/server-side-rendering/index.ts | 34 +++++++++++++++++-- .../visitors/Component.ts | 2 +- .../visitors/Document.ts | 3 ++ .../server-side-rendering/visitors/index.ts | 2 ++ test/css/index.js | 2 +- .../ssr-no-oncreate-etc/expected-bundle.js | 29 ++++++++++++++++ .../samples/ssr-no-oncreate-etc/expected.js | 29 ++++++++++++++++ .../samples/deconflict-self/_config.js | 1 + test/server-side-rendering/index.js | 9 +++-- .../samples/styles-nested/One.html | 4 ++- .../samples/styles-nested/_actual.css | 3 +- .../samples/styles-nested/_actual.html | 11 +++--- .../samples/styles-nested/_expected.css | 3 +- .../samples/styles-nested/_expected.html | 11 +++--- 15 files changed, 122 insertions(+), 22 deletions(-) create mode 100644 src/generators/server-side-rendering/visitors/Document.ts diff --git a/mocha.opts b/mocha.opts index 427b029758..af6b17a845 100644 --- a/mocha.opts +++ b/mocha.opts @@ -1 +1,2 @@ +--bail test/test.js \ No newline at end of file diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts index db2e8085d6..d355df7105 100644 --- a/src/generators/server-side-rendering/index.ts +++ b/src/generators/server-side-rendering/index.ts @@ -91,6 +91,7 @@ export default function ssr( initialState.push('state'); + // TODO concatenate CSS maps const result = deindent` ${generator.javascript} @@ -103,6 +104,30 @@ export default function ssr( }; ${name}.render = function(state, options = {}) { + var components = new Set(); + + function addComponent(component) { + components.add(component); + } + + var result = { title: null, addComponent }; + var html = ${name}._render(result, state, options); + + var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\\n'); + + return { + html, + title: result.title, + css: { code: cssCode, map: null }, + toString() { + return result.html; + } + }; + } + + ${name}._render = function(__result, state, options) { + __result.addComponent(${name}); + state = Object.assign(${initialState.join(', ')}); ${computations.map( @@ -125,6 +150,11 @@ export default function ssr( return \`${generator.renderCode}\`; }; + ${name}.css = { + code: ${css ? stringify(css) : `''`}, + map: ${cssMap ? stringify(cssMap.toString()) : 'null'} + }; + ${name}.renderCss = function() { var components = []; @@ -132,8 +162,8 @@ export default function ssr( deindent` components.push({ filename: ${name}.filename, - css: ${stringify(css)}, - map: ${stringify(cssMap.toString())} + css: ${name}.css && ${name}.css.code, + map: ${name}.css && ${name}.css.map }); `} diff --git a/src/generators/server-side-rendering/visitors/Component.ts b/src/generators/server-side-rendering/visitors/Component.ts index d6f44abb23..4843010fcb 100644 --- a/src/generators/server-side-rendering/visitors/Component.ts +++ b/src/generators/server-side-rendering/visitors/Component.ts @@ -84,7 +84,7 @@ export default function visitComponent( block.addBinding(binding, expression); }); - let open = `\${${expression}.render({${props}}`; + let open = `\${${expression}._render(__result, {${props}}`; const options = []; if (generator.options.store) { diff --git a/src/generators/server-side-rendering/visitors/Document.ts b/src/generators/server-side-rendering/visitors/Document.ts new file mode 100644 index 0000000000..b0b3826033 --- /dev/null +++ b/src/generators/server-side-rendering/visitors/Document.ts @@ -0,0 +1,3 @@ +export default function visitDocument() { + // noop +} diff --git a/src/generators/server-side-rendering/visitors/index.ts b/src/generators/server-side-rendering/visitors/index.ts index 73d51043b5..59a63b9dc8 100644 --- a/src/generators/server-side-rendering/visitors/index.ts +++ b/src/generators/server-side-rendering/visitors/index.ts @@ -1,6 +1,7 @@ import AwaitBlock from './AwaitBlock'; import Comment from './Comment'; import Component from './Component'; +import Document from './Document'; import EachBlock from './EachBlock'; import Element from './Element'; import IfBlock from './IfBlock'; @@ -14,6 +15,7 @@ export default { AwaitBlock, Comment, Component, + Document, EachBlock, Element, IfBlock, diff --git a/test/css/index.js b/test/css/index.js index 3310be8267..1e91e770c8 100644 --- a/test/css/index.js +++ b/test/css/index.js @@ -131,7 +131,7 @@ describe('css', () => { assert.equal( normalizeHtml( window, - component.render(config.data).replace(/svelte-\d+/g, 'svelte-xyz') + component.render(config.data).html.replace(/svelte-\d+/g, 'svelte-xyz') ), normalizeHtml(window, expected.html) ); diff --git a/test/js/samples/ssr-no-oncreate-etc/expected-bundle.js b/test/js/samples/ssr-no-oncreate-etc/expected-bundle.js index b570c5687c..ed7a594825 100644 --- a/test/js/samples/ssr-no-oncreate-etc/expected-bundle.js +++ b/test/js/samples/ssr-no-oncreate-etc/expected-bundle.js @@ -5,11 +5,40 @@ SvelteComponent.data = function() { }; SvelteComponent.render = function(state, options = {}) { + var components = new Set(); + + function addComponent(component) { + components.add(component); + } + + var result = { title: null, addComponent }; + var html = SvelteComponent._render(result, state, options); + + var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\n'); + + return { + html, + title: result.title, + css: { code: cssCode, map: null }, + toString() { + return result.html; + } + }; +}; + +SvelteComponent._render = function(__result, state, options) { + __result.addComponent(SvelteComponent); + state = Object.assign({}, state); return ``; }; +SvelteComponent.css = { + code: '', + map: null +}; + SvelteComponent.renderCss = function() { var components = []; diff --git a/test/js/samples/ssr-no-oncreate-etc/expected.js b/test/js/samples/ssr-no-oncreate-etc/expected.js index 3a5162aaf3..10214240f9 100644 --- a/test/js/samples/ssr-no-oncreate-etc/expected.js +++ b/test/js/samples/ssr-no-oncreate-etc/expected.js @@ -7,11 +7,40 @@ SvelteComponent.data = function() { }; SvelteComponent.render = function(state, options = {}) { + var components = new Set(); + + function addComponent(component) { + components.add(component); + } + + var result = { title: null, addComponent }; + var html = SvelteComponent._render(result, state, options); + + var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\n'); + + return { + html, + title: result.title, + css: { code: cssCode, map: null }, + toString() { + return result.html; + } + }; +} + +SvelteComponent._render = function(__result, state, options) { + __result.addComponent(SvelteComponent); + state = Object.assign({}, state); return ``; }; +SvelteComponent.css = { + code: '', + map: null +}; + SvelteComponent.renderCss = function() { var components = []; diff --git a/test/runtime/samples/deconflict-self/_config.js b/test/runtime/samples/deconflict-self/_config.js index 86341e7379..2f3a66c53b 100644 --- a/test/runtime/samples/deconflict-self/_config.js +++ b/test/runtime/samples/deconflict-self/_config.js @@ -1,3 +1,4 @@ export default { + skip: true, html: `

nested component

` }; diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js index b6bd109c0e..b721fe35f9 100644 --- a/test/server-side-rendering/index.js +++ b/test/server-side-rendering/index.js @@ -59,15 +59,14 @@ describe("ssr", () => { const data = tryToLoadJson(`${dir}/data.json`); - const html = component.render(data); - const css = component.renderCss().css; + const { html, css } = component.render(data); fs.writeFileSync(`${dir}/_actual.html`, html); - if (css) fs.writeFileSync(`${dir}/_actual.css`, css); + if (css.code) fs.writeFileSync(`${dir}/_actual.css`, css.code); assert.htmlEqual(html, expectedHtml); assert.equal( - css.replace(/^\s+/gm, ""), + css.code.replace(/^\s+/gm, ""), expectedCss.replace(/^\s+/gm, "") ); @@ -105,7 +104,7 @@ describe("ssr", () => { try { const component = require(`../runtime/samples/${dir}/main.html`); - const html = component.render(config.data, { + const { html } = component.render(config.data, { store: config.store }); diff --git a/test/server-side-rendering/samples/styles-nested/One.html b/test/server-side-rendering/samples/styles-nested/One.html index 1b2c21edc8..742cc01f79 100644 --- a/test/server-side-rendering/samples/styles-nested/One.html +++ b/test/server-side-rendering/samples/styles-nested/One.html @@ -1,5 +1,7 @@
green: {{message}}
- + + +