diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index 950b9a3712..e2cbc4751c 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -4,7 +4,7 @@ import annotateWithScopes from '../../utils/annotateWithScopes'; import isReference from '../../utils/isReference'; import { walk } from 'estree-walker'; import deindent from '../../utils/deindent'; -import stringify from '../../utils/stringify'; +import { stringify } from '../../utils/stringify'; import CodeBuilder from '../../utils/CodeBuilder'; import visit from './visit'; import shared from './shared'; diff --git a/src/generators/dom/visitors/Component/Attribute.ts b/src/generators/dom/visitors/Component/Attribute.ts index 10ce5ad981..64f1a1d39f 100644 --- a/src/generators/dom/visitors/Component/Attribute.ts +++ b/src/generators/dom/visitors/Component/Attribute.ts @@ -2,7 +2,7 @@ import { DomGenerator } from '../../index'; import Block from '../../Block'; import { Node } from '../../../../interfaces'; import { State } from '../../interfaces'; -import stringify from '../../../../utils/stringify'; +import { stringify } from '../../../../utils/stringify'; export default function visitAttribute( generator: DomGenerator, diff --git a/src/generators/dom/visitors/Element/Attribute.ts b/src/generators/dom/visitors/Element/Attribute.ts index 2b7f3389d6..b03c379482 100644 --- a/src/generators/dom/visitors/Element/Attribute.ts +++ b/src/generators/dom/visitors/Element/Attribute.ts @@ -1,6 +1,6 @@ import attributeLookup from './lookup'; import deindent from '../../../../utils/deindent'; -import stringify from '../../../../utils/stringify'; +import { stringify } from '../../../../utils/stringify'; import getStaticAttributeValue from './getStaticAttributeValue'; import { DomGenerator } from '../../index'; import Block from '../../Block'; diff --git a/src/generators/dom/visitors/Text.ts b/src/generators/dom/visitors/Text.ts index bf7bf8fd4a..49135a129e 100644 --- a/src/generators/dom/visitors/Text.ts +++ b/src/generators/dom/visitors/Text.ts @@ -2,7 +2,7 @@ import { DomGenerator } from '../index'; import Block from '../Block'; import { Node } from '../../../interfaces'; import { State } from '../interfaces'; -import stringify from '../../../utils/stringify'; +import { stringify } from '../../../utils/stringify'; export default function visitText( generator: DomGenerator, diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts index 53518e32ee..59f9701e7a 100644 --- a/src/generators/server-side-rendering/index.ts +++ b/src/generators/server-side-rendering/index.ts @@ -178,7 +178,12 @@ export default function ssr( function __escape ( html ) { return String( html ).replace( /["'&<>]/g, match => escaped[ match ] ); } - `.replace(/(\\)?@(\w*)/g, (match: string, escaped: string, name: string) => escaped ? match.slice(1) : generator.alias(name)); + `.replace(/(\\)?([@#])(\w*)/g, (match: string, escaped: string, sigil: string, name: string) => { + if (escaped) return match.slice(1); + if (sigil !== '@') return match; + + return generator.alias(name); + }); return generator.generate(result, options, { name, format }); } diff --git a/src/generators/server-side-rendering/visitors/Element.ts b/src/generators/server-side-rendering/visitors/Element.ts index 1dcded426f..6204366163 100644 --- a/src/generators/server-side-rendering/visitors/Element.ts +++ b/src/generators/server-side-rendering/visitors/Element.ts @@ -4,6 +4,7 @@ import visit from '../visit'; import visitWindow from './meta/Window'; import { SsrGenerator } from '../index'; import Block from '../Block'; +import { escape } from '../../../utils/stringify'; import { Node } from '../../../interfaces'; const meta = { @@ -14,7 +15,7 @@ function stringifyAttributeValue(block: Block, chunks: Node[]) { return chunks .map((chunk: Node) => { if (chunk.type === 'Text') { - return chunk.data; + return escape(chunk.data).replace(/"/g, '"'); } const { snippet } = block.contextualise(chunk.expression); diff --git a/src/generators/server-side-rendering/visitors/Text.ts b/src/generators/server-side-rendering/visitors/Text.ts index 493d32a936..0e897aaaa6 100644 --- a/src/generators/server-side-rendering/visitors/Text.ts +++ b/src/generators/server-side-rendering/visitors/Text.ts @@ -1,5 +1,6 @@ import { SsrGenerator } from '../index'; import Block from '../Block'; +import { escape } from '../../../utils/stringify'; import { Node } from '../../../interfaces'; export default function visitText( @@ -7,5 +8,5 @@ export default function visitText( block: Block, node: Node ) { - generator.append(node.data.replace(/(\${|`|\\)/g, '\\$1').replace(/([^\\@#])?([@#])/g, '$1\\$2')); + generator.append(escape(node.data).replace(/(\${|`|\\)/g, '\\$1')); } diff --git a/src/utils/stringify.ts b/src/utils/stringify.ts index b4c65addfd..01eff61eba 100644 --- a/src/utils/stringify.ts +++ b/src/utils/stringify.ts @@ -1,3 +1,7 @@ -export default function stringify(data: string) { +export function stringify(data: string) { return JSON.stringify(data.replace(/([^\\@#])?([@#])/g, '$1\\$2')); } + +export function escape(data: string) { + return data.replace(/([^\\@#])?([@#])/g, '$1\\$2'); +}