From 8933a3703fd91507f317a6a92af667a0d1f2dec5 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Wed, 24 Jun 2020 16:13:41 +0800 Subject: [PATCH 1/3] fix collapsing html with static contents --- .../render_dom/wrappers/Element/index.ts | 18 +++++++++--------- .../samples/innerhtml-with-comments/_config.js | 8 ++++++++ .../innerhtml-with-comments/main.svelte | 5 +++++ 3 files changed, 22 insertions(+), 9 deletions(-) create mode 100644 test/runtime/samples/innerhtml-with-comments/_config.js create mode 100644 test/runtime/samples/innerhtml-with-comments/main.svelte diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 2b834404a180..148f837ee6d7 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -6,7 +6,6 @@ import { is_void, sanitize } from '../../../../utils/names'; import FragmentWrapper from '../Fragment'; import { escape_html, string_literal } from '../../../utils/stringify'; import TextWrapper from '../Text'; -import TagWrapper from '../shared/Tag'; import fix_attribute_casing from './fix_attribute_casing'; import { b, x, p } from 'code-red'; import { namespaces } from '../../../../utils/namespaces'; @@ -26,6 +25,8 @@ import { Identifier } from 'estree'; import EventHandler from './EventHandler'; import { extract_names } from 'periscopic'; import Action from '../../../nodes/Action'; +import MustacheTagWrapper from '../MustacheTag'; +import RawMustacheTagWrapper from '../RawMustacheTag'; interface BindingGroup { events: string[]; @@ -337,8 +338,7 @@ export default class ElementWrapper extends Wrapper { if (!this.node.namespace && (this.can_use_innerhtml || can_use_textcontent) && this.fragment.nodes.length > 0) { if (this.fragment.nodes.length === 1 && this.fragment.nodes[0].node.type === 'Text') { block.chunks.create.push( - // @ts-ignore todo: should it be this.fragment.nodes[0].node.data instead? - b`${node}.textContent = ${string_literal(this.fragment.nodes[0].data)};` + b`${node}.textContent = ${string_literal((this.fragment.nodes[0] as TextWrapper).data)};` ); } else { const state = { @@ -926,9 +926,9 @@ export default class ElementWrapper extends Wrapper { } } -function to_html(wrappers: Array, block: Block, literal: any, state: any, can_use_raw_text?: boolean) { +function to_html(wrappers: Array, block: Block, literal: any, state: any, can_use_raw_text?: boolean) { wrappers.forEach(wrapper => { - if (wrapper.node.type === 'Text') { + if (wrapper instanceof TextWrapper) { if ((wrapper as TextWrapper).use_space()) state.quasi.value.raw += ' '; const parent = wrapper.node.parent as Element; @@ -939,13 +939,13 @@ function to_html(wrappers: Array, blo can_use_raw_text ); - state.quasi.value.raw += (raw ? wrapper.node.data : escape_html(wrapper.node.data)) + state.quasi.value.raw += (raw ? wrapper.data : escape_html(wrapper.data)) .replace(/\\/g, '\\\\') .replace(/`/g, '\\`') .replace(/\$/g, '\\$'); } - else if (wrapper.node.type === 'MustacheTag' || wrapper.node.type === 'RawMustacheTag' ) { + else if (wrapper instanceof MustacheTagWrapper || wrapper instanceof RawMustacheTagWrapper) { literal.quasis.push(state.quasi); literal.expressions.push(wrapper.node.expression.manipulate(block)); state.quasi = { @@ -984,8 +984,8 @@ function to_html(wrappers: Array, blo state.quasi.value.raw += '>'; - if (!(wrapper as ElementWrapper).void) { - to_html((wrapper as ElementWrapper).fragment.nodes as Array, block, literal, state); + if (!wrapper.void) { + to_html(wrapper.fragment.nodes as Array, block, literal, state); state.quasi.value.raw += ``; } diff --git a/test/runtime/samples/innerhtml-with-comments/_config.js b/test/runtime/samples/innerhtml-with-comments/_config.js new file mode 100644 index 000000000000..95d4a6fa968d --- /dev/null +++ b/test/runtime/samples/innerhtml-with-comments/_config.js @@ -0,0 +1,8 @@ +export default { + html: ` + + Style: + Bootstrap. + + ` +}; \ No newline at end of file diff --git a/test/runtime/samples/innerhtml-with-comments/main.svelte b/test/runtime/samples/innerhtml-with-comments/main.svelte new file mode 100644 index 000000000000..e00f7550726d --- /dev/null +++ b/test/runtime/samples/innerhtml-with-comments/main.svelte @@ -0,0 +1,5 @@ + + Style: + + Bootstrap. + \ No newline at end of file From f9f1f98dc8f73c9f62e64f936bb7aca71ebf2898 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Thu, 25 Jun 2020 13:25:10 -0400 Subject: [PATCH 2/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d760b0e8dd5e..82d0d58a1582 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * Fix handling of `import`ed value that is used as a store and is also mutated ([#5019](https://github.com/sveltejs/svelte/issues/5019)) * Do not display `a11y-missing-content` warning on elements with `contenteditable` bindings ([#5020](https://github.com/sveltejs/svelte/issues/5020)) * Fix handling of `this` in inline function expressions in the template ([#5033](https://github.com/sveltejs/svelte/issues/5033)) +* Fix collapsing HTML with static content ([#5040](https://github.com/sveltejs/svelte/issues/5040)) * Update `