From e81fb88f4113e2ddd58c548fc141a5f1a4b574ab Mon Sep 17 00:00:00 2001 From: Josh Duff Date: Wed, 28 Mar 2018 12:35:46 -0500 Subject: [PATCH] Fix backtick string literals not being recognized for the svg property Failing test for #1284 Fixes #1284 --- src/generators/Generator.ts | 3 ++- src/utils/nodeToString.ts | 11 ++++++++++ src/validate/js/index.ts | 3 ++- src/validate/js/propValidators/namespace.ts | 5 +++-- .../Rect.html | 7 +++++++ .../_config.js | 21 +++++++++++++++++++ .../main.html | 11 ++++++++++ 7 files changed, 57 insertions(+), 4 deletions(-) create mode 100644 src/utils/nodeToString.ts create mode 100644 test/runtime/samples/svg-child-component-declared-namespace-backtick-string/Rect.html create mode 100644 test/runtime/samples/svg-child-component-declared-namespace-backtick-string/_config.js create mode 100644 test/runtime/samples/svg-child-component-declared-namespace-backtick-string/main.html diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts index 72edbe8d0e..07c4ab51e8 100644 --- a/src/generators/Generator.ts +++ b/src/generators/Generator.ts @@ -9,6 +9,7 @@ import flattenReference from '../utils/flattenReference'; import reservedNames from '../utils/reservedNames'; import namespaces from '../utils/namespaces'; import { removeNode, removeObjectKey } from '../utils/removeNode'; +import nodeToString from '../utils/nodeToString'; import wrapModule from './wrapModule'; import annotateWithScopes, { Scope } from '../utils/annotateWithScopes'; import getName from '../utils/getName'; @@ -599,7 +600,7 @@ export default class Generator { } if (templateProperties.namespace) { - const ns = templateProperties.namespace.value.value; + const ns = nodeToString(templateProperties.namespace); this.namespace = namespaces[ns] || ns; } diff --git a/src/utils/nodeToString.ts b/src/utils/nodeToString.ts new file mode 100644 index 0000000000..230214bb57 --- /dev/null +++ b/src/utils/nodeToString.ts @@ -0,0 +1,11 @@ +import { Node } from '../interfaces'; + +export default function nodeToString(prop: Node) { + if (prop.value.type === 'Literal' && typeof prop.value.value === 'string') { + return prop.value.value; + } else if (prop.value.type === 'TemplateLiteral' + && prop.value.quasis.length === 1 + && prop.value.expressions.length === 0) { + return prop.value.quasis[0].value.raw; + } +} diff --git a/src/validate/js/index.ts b/src/validate/js/index.ts index a0fc3ee017..3762cc81be 100644 --- a/src/validate/js/index.ts +++ b/src/validate/js/index.ts @@ -3,6 +3,7 @@ import fuzzymatch from '../utils/fuzzymatch'; import checkForDupes from './utils/checkForDupes'; import checkForComputedKeys from './utils/checkForComputedKeys'; import namespaces from '../../utils/namespaces'; +import nodeToString from '../../utils/nodeToString'; import getName from '../../utils/getName'; import { Validator } from '../'; import { Node } from '../../interfaces'; @@ -77,7 +78,7 @@ export default function validateJs(validator: Validator, js: Node) { }); if (props.has('namespace')) { - const ns = props.get('namespace').value.value; + const ns = nodeToString(props.get('namespace')); validator.namespace = namespaces[ns] || ns; } diff --git a/src/validate/js/propValidators/namespace.ts b/src/validate/js/propValidators/namespace.ts index cf887df2bd..a6270864ea 100644 --- a/src/validate/js/propValidators/namespace.ts +++ b/src/validate/js/propValidators/namespace.ts @@ -1,4 +1,5 @@ import * as namespaces from '../../../utils/namespaces'; +import nodeToString from '../../../utils/nodeToString' import fuzzymatch from '../../utils/fuzzymatch'; import { Validator } from '../../'; import { Node } from '../../../interfaces'; @@ -6,9 +7,9 @@ import { Node } from '../../../interfaces'; const valid = new Set(namespaces.validNamespaces); export default function namespace(validator: Validator, prop: Node) { - const ns = prop.value.value; + const ns = nodeToString(prop); - if (prop.value.type !== 'Literal' || typeof ns !== 'string') { + if (typeof ns !== 'string') { validator.error( `The 'namespace' property must be a string literal representing a valid namespace`, prop diff --git a/test/runtime/samples/svg-child-component-declared-namespace-backtick-string/Rect.html b/test/runtime/samples/svg-child-component-declared-namespace-backtick-string/Rect.html new file mode 100644 index 0000000000..0813c3c143 --- /dev/null +++ b/test/runtime/samples/svg-child-component-declared-namespace-backtick-string/Rect.html @@ -0,0 +1,7 @@ + + + diff --git a/test/runtime/samples/svg-child-component-declared-namespace-backtick-string/_config.js b/test/runtime/samples/svg-child-component-declared-namespace-backtick-string/_config.js new file mode 100644 index 0000000000..b4a0da70db --- /dev/null +++ b/test/runtime/samples/svg-child-component-declared-namespace-backtick-string/_config.js @@ -0,0 +1,21 @@ +export default { + data: { + x: 0, + y: 0, + width: 100, + height: 100 + }, + + html: ``, + + test ( assert, component, target ) { + const svg = target.querySelector( 'svg' ); + const rect = target.querySelector( 'rect' ); + + assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' ); + assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' ); + + component.set({ width: 150, height: 50 }); + assert.equal( target.innerHTML, `` ); + }, +}; diff --git a/test/runtime/samples/svg-child-component-declared-namespace-backtick-string/main.html b/test/runtime/samples/svg-child-component-declared-namespace-backtick-string/main.html new file mode 100644 index 0000000000..7bef9787b0 --- /dev/null +++ b/test/runtime/samples/svg-child-component-declared-namespace-backtick-string/main.html @@ -0,0 +1,11 @@ + + + + +