diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts index 5957e1db0d..b369f6eff9 100644 --- a/src/compiler/compile/render_ssr/handlers/Element.ts +++ b/src/compiler/compile/render_ssr/handlers/Element.ts @@ -197,11 +197,15 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio } function add_close_tag() { - if (!is_void(node.name)) { - renderer.add_string(''); + if (node.tag_expr.node.type === 'Literal') { + if (!is_void(node.tag_expr.node.value as string)) { + renderer.add_string(''); + } + return; } + renderer.add_expression(x`((tag) => @is_void(String(tag || '')) ? '' : \`\`)(${node.tag_expr.node})`); } function add_tag_name() { diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts index 9588f806f9..c4d7f02bf0 100644 --- a/src/runtime/internal/ssr.ts +++ b/src/runtime/internal/ssr.ts @@ -1,6 +1,7 @@ import { set_current_component, current_component } from './lifecycle'; import { run_all, blank_object } from './utils'; import { boolean_attributes } from '../../compiler/compile/render_ssr/handlers/shared/boolean_attributes'; +export { is_void } from '../../compiler/utils/names'; export const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u; // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2 @@ -19,7 +20,7 @@ export function spread(args, attrs_to_add) { attributes.class += ' ' + classes_to_add; } } - + if (styles_to_add) { if (attributes.style == null) { attributes.style = style_object_to_string(styles_to_add); @@ -55,7 +56,7 @@ export function merge_ssr_styles(style_attribute, style_directive) { if (!name) continue; style_object[name] = value; } - + for (const name in style_directive) { const value = style_directive[name]; if (value) { diff --git a/test/runtime/index.ts b/test/runtime/index.ts index f3c962f1d9..b96c74bac6 100644 --- a/test/runtime/index.ts +++ b/test/runtime/index.ts @@ -155,13 +155,14 @@ describe('runtime', () => { const target = window.document.querySelector('main'); + let ssrHtml: string | undefined = undefined; if (hydrate && from_ssr_html) { // ssr into target compileOptions.generate = 'ssr'; cleanRequireCache(); const SsrSvelteComponent = require(`./samples/${dir}/main.svelte`).default; - const { html } = SsrSvelteComponent.render(config.props); - target.innerHTML = html; + ssrHtml = SsrSvelteComponent.render(config.props).html; + target.innerHTML = ssrHtml; delete compileOptions.generate; } else { target.innerHTML = ''; @@ -210,7 +211,8 @@ describe('runtime', () => { target, window, raf, - compileOptions + compileOptions, + ssrHtml })).then(() => { component.$destroy(); diff --git a/test/runtime/samples/dynamic-element-string/_config.js b/test/runtime/samples/dynamic-element-string/_config.js index acad91c901..0821558add 100644 --- a/test/runtime/samples/dynamic-element-string/_config.js +++ b/test/runtime/samples/dynamic-element-string/_config.js @@ -1,3 +1,7 @@ export default { - html: '
Foo
' + html: '
Foo
', + + test({ assert, target }) { + assert.htmlEqual(target.innerHTML, '
Foo
'); + } }; diff --git a/test/runtime/samples/dynamic-element-void-tag/_config.js b/test/runtime/samples/dynamic-element-void-tag/_config.js new file mode 100644 index 0000000000..23647f114c --- /dev/null +++ b/test/runtime/samples/dynamic-element-void-tag/_config.js @@ -0,0 +1,15 @@ +export default { + props: { + propTag: 'hr' + }, + html: '



', + + test({ assert, component, target, ssrHtml }) { + assert.htmlEqual(target.innerHTML, '



'); + if (ssrHtml) { + assert.equal(ssrHtml, '

\n

\n

\n
\n\n
'); + } + component.propTag = 'link'; + assert.htmlEqual(target.innerHTML, '


'); + } +}; diff --git a/test/runtime/samples/dynamic-element-void-tag/main.svelte b/test/runtime/samples/dynamic-element-void-tag/main.svelte new file mode 100644 index 0000000000..1d819d9353 --- /dev/null +++ b/test/runtime/samples/dynamic-element-void-tag/main.svelte @@ -0,0 +1,12 @@ + + +

+ + + + +