Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
it('should add scope attribute for all elements', () => {
const code = `
<template>
<div id="foo">
<p class="bar">Test</p>
<p data-v-abcde="">{{ test }}</p>
</div>
</template>
`
const program = parse(code, {})
const ast = transformTemplate(program.templateBody!, code)
const scope = '1a2s3d'
const scopeName = 'data-scope-' + scope
const scopeAttr: TEAttribute = {
type: 'Attribute',
attrIndex: -1,
name: scopeName,
range: [-1, -1]
}
const result = addScope(ast, scope)
const expected: any = ast
expected.children[1].startTag.attrs[scopeName] = scopeAttr // #foo
expected.children[1].children[1].startTag.attrs[scopeName] = scopeAttr // .bar
it('should extract v-for directive', () => {
const code =
'<template><ul><li></li></ul></template>'
const program = parse(code, {})
const ast = program.templateBody!
// prettier-ignore
const expected = createTemplate([
h('ul', [], [
h('li', [vFor(['item', 'key', 'i'], 'obj')], []),
])
])
assertWithoutRange(transformTemplate(ast, code), expected)
})
})
it('should evaluate literal value of directives', () => {
const code = '<template><p>test</p></template>'
const program = parse(code, {})
const ast = program.templateBody!
// prettier-ignore
const expected = createTemplate([
h(
'p',
[d('if', 'true')],
['test']
)
])
assertWithoutRange(transformTemplate(ast, code), expected)
})
it('should transform element', () => {
const code = '<template><div>Test {{ foo }}<p>bar</p></div></template>'
const program = parse(code, {})
const ast = program.templateBody!
// prettier-ignore
const expected = createTemplate([
h('div', [], [
'Test ',
exp('foo'),
h('p', [], [
'bar'
])
])
])
assertWithoutRange(transformTemplate(ast, code), expected)
})
it('should transform v-bind.prop directive', () => {
const code = '<template><div></div></template>'
const program = parse(code, {})
const ast = program.templateBody!
// prettier-ignore
const expected = createTemplate([
h(
'div',
[
d('bind', { argument: 'lang', modifiers: ['prop'] }, 'en')
],
[]
)
])
assertWithoutRange(transformTemplate(ast, code), expected)
})
function recreateVueTempalteSourceFile(
vueTemplateFileName: string,
sourceFile: ts.SourceFile,
scriptSnapshot: ts.IScriptSnapshot
) {
// TODO: share the logic of transforming the code into AST
// with the template mode
const vueText = scriptSnapshot.getText(0, scriptSnapshot.getLength());
const templateCode = parseVueTemplate(vueText);
const scriptSrc = parseVueScriptSrc(vueText);
const program = parse(templateCode, { sourceType: 'module' });
let expressions: ts.Expression[] = [];
try {
expressions = getTemplateTransformFunctions(tsModule).transformTemplate(program, templateCode);
injectVueTemplate(tsModule, sourceFile, expressions, scriptSrc);
} catch (err) {
console.log(`Failed to transform template of ${vueTemplateFileName}`);
console.log(err);
}
const newText = printer.printFile(sourceFile);
const newSourceFile = tsModule.createSourceFile(
vueTemplateFileName,
newText,
sourceFile.languageVersion,
function parseTemplateBlock(template: string): TETemplate | undefined {
// TODO: Use parsed SFCBlock after it is fixed that the issue vue-template-compiler
// breaks original source position by deindent
const code = template.replace(/[\s\S]*<\/script>/, matched => {
return matched.replace(/./g, ' ')
})
const { templateBody } = parseTemplate(code, {})
return templateBody && transformTemplate(templateBody, code)
}
it('should work in complex case', () => {
const code = `<template><div id="foo"><h1>Hello</h1><p>World</p></div></template>`
const template = parseTemplate(code, {}).templateBody!
const ast: any = transformTemplate(template, code)
const actual = modify(code, [
remove(ast.children[0].startTag.attrs.id),
replace(ast.children[0].children[0].children[0], 'Hi'),
insertBefore(ast.children[0].children[1], 'Test')
])
const expected =
'<template><div><h1>Hi</h1>Test<p>World</p></div></template>'
expect(actual).toBe(expected)
})