diff --git a/src/generators/server-side-rendering/visitors/Component.ts b/src/generators/server-side-rendering/visitors/Component.ts index 2169ee9b6e..a5cef9120f 100644 --- a/src/generators/server-side-rendering/visitors/Component.ts +++ b/src/generators/server-side-rendering/visitors/Component.ts @@ -6,7 +6,7 @@ import { AppendTarget } from '../interfaces'; import { Node } from '../../../interfaces'; import getObject from '../../../utils/getObject'; import getTailSnippet from '../../../utils/getTailSnippet'; -import { escape, stringify } from '../../../utils/stringify'; +import { escape, escapeTemplate, stringify } from '../../../utils/stringify'; export default function visitComponent( generator: SsrGenerator, @@ -14,7 +14,9 @@ export default function visitComponent( node: Node ) { function stringifyAttribute(chunk: Node) { - if (chunk.type === 'Text') return escape(chunk.data); + if (chunk.type === 'Text') { + return escapeTemplate(escape(chunk.data)); + } if (chunk.type === 'MustacheTag') { block.contextualise(chunk.expression); const { snippet } = chunk.metadata; diff --git a/src/generators/server-side-rendering/visitors/Text.ts b/src/generators/server-side-rendering/visitors/Text.ts index 44b1665b2b..092aa535c0 100644 --- a/src/generators/server-side-rendering/visitors/Text.ts +++ b/src/generators/server-side-rendering/visitors/Text.ts @@ -1,6 +1,6 @@ import { SsrGenerator } from '../index'; import Block from '../Block'; -import { escape, escapeHTML } from '../../../utils/stringify'; +import { escape, escapeHTML, escapeTemplate } from '../../../utils/stringify'; import { Node } from '../../../interfaces'; export default function visitText( @@ -8,5 +8,5 @@ export default function visitText( block: Block, node: Node ) { - generator.append(escapeHTML(escape(node.data).replace(/(\${|`|\\)/g, '\\$1'))); + generator.append(escapeTemplate(escapeHTML(escape(node.data)))); } diff --git a/src/generators/server-side-rendering/visitors/shared/stringifyAttributeValue.ts b/src/generators/server-side-rendering/visitors/shared/stringifyAttributeValue.ts index d2df80beab..a5399414cd 100644 --- a/src/generators/server-side-rendering/visitors/shared/stringifyAttributeValue.ts +++ b/src/generators/server-side-rendering/visitors/shared/stringifyAttributeValue.ts @@ -1,12 +1,12 @@ import Block from '../../Block'; -import { escape } from '../../../../utils/stringify'; +import { escape, escapeTemplate } 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, '"'); + return escapeTemplate(escape(chunk.data).replace(/"/g, '"')); } block.contextualise(chunk.expression); diff --git a/src/utils/stringify.ts b/src/utils/stringify.ts index 0fb151c162..43cbd934c3 100644 --- a/src/utils/stringify.ts +++ b/src/utils/stringify.ts @@ -17,3 +17,7 @@ const escaped = { export function escapeHTML(html) { return String(html).replace(/[&<>]/g, match => escaped[match]); } + +export function escapeTemplate(str) { + return str.replace(/(\${|`|\\)/g, '\\$1'); +}