"
return function render() {
with (this) {
- return createVNode(Comment, 0, \\"foo\\")
+ return _createVNode(_Comment, 0, \\"foo\\")
}
}"
`;
"
return function render() {
with (this) {
- return toString(_ctx.foo)
+ return _toString(_ctx.foo)
}
}"
`;
"
return function render() {
with (this) {
- return renderList(list, (v, k, i) => toString(v))
+ return _renderList(list, (v, k, i) => {
+ return _toString(v)
+ })
}
}"
`;
+exports[`compiler: codegen forNode w/ prefixIdentifiers: true 1`] = `
+"
+return function render() {
+ const _ctx = this
+ return renderList(list, (v, k, i) => {
+ return toString(v)
+ })
+}"
+`;
+
exports[`compiler: codegen forNode w/ skipped key alias 1`] = `
"
return function render() {
with (this) {
- return renderList(list, (v, __key, i) => toString(v))
+ return _renderList(list, (v, __key, i) => {
+ return _toString(v)
+ })
}
}"
`;
"
return function render() {
with (this) {
- return renderList(list, (__value, k, i) => toString(v))
+ return _renderList(list, (__value, k, i) => {
+ return _toString(v)
+ })
}
}"
`;
"
return function render() {
with (this) {
- return renderList(list, (__value, __key, i) => toString(v))
+ return _renderList(list, (__value, __key, i) => {
+ return _toString(v)
+ })
}
}"
`;
"const _Vue = Vue
return function render() {
with (this) {
- const { helperOne, helperTwo } = _Vue
+ const { helperOne: _helperOne, helperTwo: _helperTwo } = _Vue
return null
}
}"
`;
+exports[`compiler: codegen function mode preamble w/ prefixIdentifiers: true 1`] = `
+"const { helperOne, helperTwo } = Vue
+
+return function render() {
+ const _ctx = this
+ return null
+}"
+`;
+
exports[`compiler: codegen hoists 1`] = `
"const _hoisted_1 = hello
const _hoisted_2 = { id: \\"foo\\" }
return foo
? \\"foo\\"
: (a + b)
- ? toString(bye)
- : createVNode(Comment, 0, \\"foo\\")
+ ? _toString(bye)
+ : _createVNode(_Comment, 0, \\"foo\\")
}
}"
`;
return foo
? \\"foo\\"
: (a + b)
- ? toString(bye)
+ ? _toString(bye)
: null
}
}"
"
return function render() {
with (this) {
- return toString(hello)
+ return _toString(hello)
}
}"
`;
with (this) {
return [
\\"foo\\",
- toString(hello),
- createVNode(Comment, 0, \\"foo\\")
+ _toString(hello),
+ _createVNode(_Comment, 0, \\"foo\\")
]
}
}"
`;
+
+exports[`compiler: codegen text + comment + interpolation w/ prefixIdentifiers: true 1`] = `
+"
+return function render() {
+ const _ctx = this
+ return [
+ \\"foo\\",
+ toString(hello),
+ createVNode(Comment, 0, \\"foo\\")
+ ]
+}"
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`function mode 1`] = `
+"const _Vue = Vue
+return function render() {
+ with (this) {
+ const { createVNode: _createVNode, toString: _toString, renderList: _renderList } = _Vue
+ return _createVNode(\\"div\\", {
+ id: \\"foo\\",
+ class: bar
+ }, [
+ _toString(world),
+ ok
+ ? _createVNode(\\"div\\", 0, \\"yes\\")
+ : \\"no\\",
+ _renderList(list, (i, j) => {
+ return _createVNode(\\"div\\", 0, [_createVNode(\\"span\\", 0, _toString(i + j))])
+ })
+ ])
+ }
+}"
+`;
"isStatic": false,
"loc": Object {
"end": Object {
- "column": 34,
+ "column": 33,
"line": 1,
- "offset": 33,
+ "offset": 32,
},
"source": "\\"{ some: condition }\\"",
"start": Object {
- "column": 13,
+ "column": 14,
"line": 1,
- "offset": 12,
+ "offset": 13,
},
},
"type": 4,
"isStatic": false,
"loc": Object {
"end": Object {
- "column": 35,
+ "column": 34,
"line": 2,
- "offset": 71,
+ "offset": 70,
},
"source": "\\"{ color: 'red' }\\"",
"start": Object {
- "column": 17,
+ "column": 18,
"line": 2,
- "offset": 53,
+ "offset": 54,
},
},
"type": 4,
"isSelfClosing": true,
"loc": Object {
"end": Object {
- "column": 38,
+ "column": 39,
"line": 2,
"offset": 73,
},
"source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
"start": Object {
- "column": 2,
+ "column": 3,
"line": 2,
"offset": 37,
},
"isStatic": true,
"loc": Object {
"end": Object {
- "column": 17,
+ "column": 18,
"line": 2,
"offset": 52,
},
"source": "style",
"start": Object {
- "column": 12,
+ "column": 13,
"line": 2,
"offset": 47,
},
"end": Object {
"column": 36,
"line": 2,
- "offset": 71,
+ "offset": 70,
},
"source": "\\"{ color: 'red' }\\"",
"start": Object {
- "column": 18,
+ "column": 20,
"line": 2,
- "offset": 53,
+ "offset": 54,
},
},
"type": 4,
},
"loc": Object {
"end": Object {
- "column": 36,
+ "column": 37,
"line": 2,
"offset": 71,
},
"source": "v-bind:style=\\"{ color: 'red' }\\"",
"start": Object {
- "column": 5,
+ "column": 6,
"line": 2,
"offset": 40,
},
"content": " a comment with <html> inside it ",
"loc": Object {
"end": Object {
- "column": 42,
+ "column": 43,
"line": 3,
"offset": 116,
},
"source": "<!-- a comment with <html> inside it -->",
"start": Object {
- "column": 2,
+ "column": 3,
"line": 3,
"offset": 76,
},
"isStatic": false,
"loc": Object {
"end": Object {
- "column": 34,
+ "column": 33,
"line": 1,
- "offset": 33,
+ "offset": 32,
},
"source": "\\"{ some: condition }\\"",
"start": Object {
- "column": 13,
+ "column": 14,
"line": 1,
- "offset": 12,
+ "offset": 13,
},
},
"type": 4,
createArrayExpression,
ElementNode
} from '../src'
-import { CREATE_VNODE, COMMENT, TO_STRING } from '../src/runtimeConstants'
+import {
+ CREATE_VNODE,
+ COMMENT,
+ TO_STRING,
+ RENDER_LIST
+} from '../src/runtimeConstants'
const mockLoc: SourceLocation = {
source: ``,
})
const { code } = generate(root, { mode: 'function' })
expect(code).toMatch(`const _Vue = Vue`)
- expect(code).toMatch(`const { helperOne, helperTwo } = _Vue`)
+ expect(code).toMatch(
+ `const { helperOne: _helperOne, helperTwo: _helperTwo } = _Vue`
+ )
+ expect(code).toMatchSnapshot()
+ })
+
+ test('function mode preamble w/ prefixIdentifiers: true', () => {
+ const root = createRoot({
+ imports: [`helperOne`, `helperTwo`]
+ })
+ const { code } = generate(root, {
+ mode: 'function',
+ prefixIdentifiers: true
+ })
+ expect(code).not.toMatch(`const _Vue = Vue`)
+ expect(code).toMatch(`const { helperOne, helperTwo } = Vue`)
expect(code).toMatchSnapshot()
})
children: [createExpression(`hello`, false, mockLoc, true)]
})
)
- expect(code).toMatch(`return toString(hello)`)
+ expect(code).toMatch(`return _${TO_STRING}(hello)`)
expect(code).toMatchSnapshot()
})
]
})
)
- expect(code).toMatch(`return ${CREATE_VNODE}(${COMMENT}, 0, "foo")`)
+ expect(code).toMatch(`return _${CREATE_VNODE}(_${COMMENT}, 0, "foo")`)
expect(code).toMatchSnapshot()
})
expect(code).toMatch(`
return [
"foo",
- toString(hello),
- ${CREATE_VNODE}(${COMMENT}, 0, "foo")
+ _${TO_STRING}(hello),
+ _${CREATE_VNODE}(_${COMMENT}, 0, "foo")
]`)
expect(code).toMatchSnapshot()
})
+ test('text + comment + interpolation w/ prefixIdentifiers: true', () => {
+ const { code } = generate(
+ createRoot({
+ children: [
+ {
+ type: NodeTypes.TEXT,
+ content: 'foo',
+ isEmpty: false,
+ loc: mockLoc
+ },
+ createExpression(`hello`, false, mockLoc, true),
+ {
+ type: NodeTypes.COMMENT,
+ content: 'foo',
+ loc: mockLoc
+ }
+ ]
+ }),
+ {
+ prefixIdentifiers: true
+ }
+ )
+ expect(code).toMatch(`
+ return [
+ "foo",
+ ${TO_STRING}(hello),
+ ${CREATE_VNODE}(${COMMENT}, 0, "foo")
+ ]`)
+ expect(code).toMatchSnapshot()
+ })
+
test('compound expression', () => {
const { code } = generate(
createRoot({
]
})
)
- expect(code).toMatch(`return toString(_ctx.foo)`)
+ expect(code).toMatch(`return _${TO_STRING}(_ctx.foo)`)
expect(code).toMatchSnapshot()
})
{
type: NodeTypes.IF,
loc: mockLoc,
- isRoot: true,
branches: [
{
type: NodeTypes.IF_BRANCH,
condition: createExpression('foo', false, mockLoc),
loc: mockLoc,
- isRoot: true,
children: [
{
type: NodeTypes.TEXT,
type: NodeTypes.IF_BRANCH,
condition: createExpression('a + b', false, mockLoc),
loc: mockLoc,
- isRoot: true,
children: [createExpression(`bye`, false, mockLoc, true)]
},
{
type: NodeTypes.IF_BRANCH,
condition: undefined,
loc: mockLoc,
- isRoot: true,
children: [
{
type: NodeTypes.COMMENT,
return foo
? "foo"
: (a + b)
- ? ${TO_STRING}(bye)
- : ${CREATE_VNODE}(${COMMENT}, 0, "foo")`)
+ ? _${TO_STRING}(bye)
+ : _${CREATE_VNODE}(_${COMMENT}, 0, "foo")`)
expect(code).toMatchSnapshot()
})
{
type: NodeTypes.IF,
loc: mockLoc,
- isRoot: true,
branches: [
{
type: NodeTypes.IF_BRANCH,
condition: createExpression('foo', false, mockLoc),
loc: mockLoc,
- isRoot: true,
children: [
{
type: NodeTypes.TEXT,
type: NodeTypes.IF_BRANCH,
condition: createExpression('a + b', false, mockLoc),
loc: mockLoc,
- isRoot: true,
children: [createExpression(`bye`, false, mockLoc, true)]
}
]
return foo
? "foo"
: (a + b)
- ? ${TO_STRING}(bye)
+ ? _${TO_STRING}(bye)
: null`)
expect(code).toMatchSnapshot()
})
]
})
)
- expect(code).toMatch(`renderList(list, (v, k, i) => toString(v))`)
+ expect(code).toMatch(
+ `return _${RENDER_LIST}(list, (v, k, i) => {
+ return _${TO_STRING}(v)
+ })`
+ )
+ expect(code).toMatchSnapshot()
+ })
+
+ test('forNode w/ prefixIdentifiers: true', () => {
+ const { code } = generate(
+ createRoot({
+ children: [
+ {
+ type: NodeTypes.FOR,
+ loc: mockLoc,
+ source: createExpression(`list`, false, mockLoc),
+ valueAlias: createExpression(`v`, false, mockLoc),
+ keyAlias: createExpression(`k`, false, mockLoc),
+ objectIndexAlias: createExpression(`i`, false, mockLoc),
+ children: [createExpression(`v`, false, mockLoc, true)]
+ }
+ ]
+ }),
+ {
+ prefixIdentifiers: true
+ }
+ )
+ expect(code).toMatch(
+ `return ${RENDER_LIST}(list, (v, k, i) => {
+ return ${TO_STRING}(v)
+ })`
+ )
expect(code).toMatchSnapshot()
})
]
})
)
- expect(code).toMatch(`renderList(list, (__value, k, i) => toString(v))`)
+ expect(code).toMatch(
+ `return _${RENDER_LIST}(list, (__value, k, i) => {
+ return _${TO_STRING}(v)
+ })`
+ )
expect(code).toMatchSnapshot()
})
]
})
)
- expect(code).toMatch(`renderList(list, (v, __key, i) => toString(v))`)
+ expect(code).toMatch(
+ `return _${RENDER_LIST}(list, (v, __key, i) => {
+ return _${TO_STRING}(v)
+ })`
+ )
expect(code).toMatchSnapshot()
})
]
})
)
- expect(code).toMatch(`renderList(list, (__value, __key, i) => toString(v))`)
+ expect(code).toMatch(
+ `return _${RENDER_LIST}(list, (__value, __key, i) => {
+ return _${TO_STRING}(v)
+ })`
+ )
expect(code).toMatchSnapshot()
})
import { SourceMapConsumer, RawSourceMap } from 'source-map'
// Integration tests for parser + transform + codegen
-test('basic source map support', async () => {
- const source = `hello {{ world }}`
+test('function mode', async () => {
+ const source = `
+<div id="foo" :class="bar">
+ {{ world }}
+ <div v-if="ok">yes</div>
+ <template v-else>no</template>
+ <div v-for="(i, j) in list"><span>{{ i + j }}</span></div>
+</div>
+`.trim()
const { code, map } = compile(source, {
sourceMap: true,
filename: `foo.vue`
})
- expect(code).toMatch(
- `const _Vue = Vue
-return function render() {
- with (this) {
- const { toString } = _Vue
- return [
- "hello ",
- toString(world)
- ]
- }
-}`
- )
+ expect(code).toMatchSnapshot()
expect(map!.sources).toEqual([`foo.vue`])
expect(map!.sourcesContent).toEqual([source])
const consumer = await new SourceMapConsumer(map as RawSourceMap)
- const pos = consumer.originalPositionFor({
- line: 7,
- column: 16
+
+ // id=
+ expect(
+ consumer.originalPositionFor({
+ line: 6,
+ column: 6
+ })
+ ).toMatchObject({
+ line: 1,
+ column: 5
+ })
+
+ // "foo"
+ expect(
+ consumer.originalPositionFor({
+ line: 6,
+ column: 10
+ })
+ ).toMatchObject({
+ line: 1,
+ column: 8
+ })
+
+ // :class=
+ expect(
+ consumer.originalPositionFor({
+ line: 7,
+ column: 6
+ })
+ ).toMatchObject({
+ line: 1,
+ column: 15
})
- expect(pos).toMatchObject({
+ // bar
+ expect(
+ consumer.originalPositionFor({
+ line: 7,
+ column: 13
+ })
+ ).toMatchObject({
line: 1,
- column: 6
+ column: 22
+ })
+
+ // {{ world }}
+ expect(
+ consumer.originalPositionFor({
+ line: 9,
+ column: 16
+ })
+ ).toMatchObject({
+ line: 2,
+ column: 2
+ })
+
+ // ok
+ expect(
+ consumer.originalPositionFor({
+ line: 10,
+ column: 6
+ })
+ ).toMatchObject({
+ line: 3,
+ column: 13
+ })
+
+ // i
+ expect(
+ consumer.originalPositionFor({
+ line: 13,
+ column: 25
+ })
+ ).toMatchObject({
+ line: 5,
+ column: 15
+ })
+
+ // j
+ expect(
+ consumer.originalPositionFor({
+ line: 13,
+ column: 28
+ })
+ ).toMatchObject({
+ line: 5,
+ column: 18
+ })
+
+ // list
+ expect(
+ consumer.originalPositionFor({
+ line: 13,
+ column: 18
+ })
+ ).toMatchObject({
+ line: 5,
+ column: 24
+ })
+
+ // i + j
+ expect(
+ consumer.originalPositionFor({
+ line: 14,
+ column: 81
+ })
+ ).toMatchObject({
+ line: 5,
+ column: 36
})
})
+
+test.todo('function mode w/ prefixIdentifiers: true')
+
+test.todo('module mode')
+
+test.todo('module mode w/ prefixIdentifiers: true')
isStatic: false,
isInterpolation: false,
loc: {
- start: { offset: 10, line: 1, column: 11 },
- end: { offset: 13, line: 1, column: 14 },
+ start: { offset: 11, line: 1, column: 12 },
+ end: { offset: 12, line: 1, column: 13 },
source: '"a"'
}
},
test('parse with correct location info', () => {
const [foo, bar, but, baz] = parse(
- 'foo \n is {{ bar }} but {{ baz }}'
+ `
+foo
+ is {{ bar }} but {{ baz }}`.trim()
).children
let offset = 0
expect(foo.loc.start).toEqual({ line: 1, column: 1, offset })
offset += foo.loc.source.length
- expect(foo.loc.end).toEqual({ line: 2, column: 4, offset })
+ expect(foo.loc.end).toEqual({ line: 2, column: 5, offset })
- expect(bar.loc.start).toEqual({ line: 2, column: 4, offset })
+ expect(bar.loc.start).toEqual({ line: 2, column: 5, offset })
offset += bar.loc.source.length
- expect(bar.loc.end).toEqual({ line: 2, column: 13, offset })
+ expect(bar.loc.end).toEqual({ line: 2, column: 14, offset })
- expect(but.loc.start).toEqual({ line: 2, column: 13, offset })
+ expect(but.loc.start).toEqual({ line: 2, column: 14, offset })
offset += but.loc.source.length
- expect(but.loc.end).toEqual({ line: 2, column: 18, offset })
+ expect(but.loc.end).toEqual({ line: 2, column: 19, offset })
- expect(baz.loc.start).toEqual({ line: 2, column: 18, offset })
+ expect(baz.loc.start).toEqual({ line: 2, column: 19, offset })
offset += baz.loc.source.length
- expect(baz.loc.end).toEqual({ line: 2, column: 27, offset })
+ expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
})
describe('namedCharacterReferences option', () => {
CompilerOptions,
parse,
transform,
- ErrorCodes,
- compile
+ ErrorCodes
} from '../../src'
import { transformElement } from '../../src/transforms/transformElement'
import {
const { root, node } = parseWithElementTransform(
`<div id="foo" class="bar" />`
)
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
// should hoist the static object
expect(root.hoists).toMatchObject([
createStaticObjectMatcher({
const { root, node } = parseWithElementTransform(
`<div id="foo"><span/></div>`
)
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
expect(root.hoists).toMatchObject([
createStaticObjectMatcher({
id: 'foo'
type: NodeTypes.ELEMENT,
tag: 'span',
codegenNode: {
- callee: CREATE_VNODE,
+ callee: `_${CREATE_VNODE}`,
arguments: [`"span"`]
}
}
test('0 placeholder for children with no props', () => {
const { node } = parseWithElementTransform(`<div><span/></div>`)
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
expect(node.arguments).toMatchObject([
`"div"`,
`0`,
type: NodeTypes.ELEMENT,
tag: 'span',
codegenNode: {
- callee: CREATE_VNODE,
+ callee: `_${CREATE_VNODE}`,
arguments: [`"span"`]
}
}
const { root, node } = parseWithElementTransform(`<div v-bind="obj" />`)
// single v-bind doesn't need mergeProps
expect(root.imports).not.toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
// should directly use `obj` in props position
expect(node.arguments[1]).toMatchObject({
type: NodeTypes.EXPRESSION,
`<div id="foo" v-bind="obj" />`
)
expect(root.imports).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
expect(node.arguments[1]).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: MERGE_PROPS,
+ callee: `_${MERGE_PROPS}`,
arguments: [
createStaticObjectMatcher({
id: 'foo'
`<div v-bind="obj" id="foo" />`
)
expect(root.imports).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
expect(node.arguments[1]).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: MERGE_PROPS,
+ callee: `_${MERGE_PROPS}`,
arguments: [
{
type: NodeTypes.EXPRESSION,
`<div id="foo" v-bind="obj" class="bar" />`
)
expect(root.imports).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
expect(node.arguments[1]).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: MERGE_PROPS,
+ callee: `_${MERGE_PROPS}`,
arguments: [
createStaticObjectMatcher({
id: 'foo'
`<div id="foo" v-on="obj" class="bar" />`
)
expect(root.imports).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
expect(node.arguments[1]).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: MERGE_PROPS,
+ callee: `_${MERGE_PROPS}`,
arguments: [
createStaticObjectMatcher({
id: 'foo'
}),
{
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: TO_HANDLERS,
+ callee: `_${TO_HANDLERS}`,
arguments: [
{
type: NodeTypes.EXPRESSION,
`<div id="foo" v-on="handlers" v-bind="obj" />`
)
expect(root.imports).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
expect(node.arguments[1]).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: MERGE_PROPS,
+ callee: `_${MERGE_PROPS}`,
arguments: [
createStaticObjectMatcher({
id: 'foo'
}),
{
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: TO_HANDLERS,
+ callee: `_${TO_HANDLERS}`,
arguments: [
{
type: NodeTypes.EXPRESSION,
}
}
})
- expect(node.callee).toBe(CREATE_VNODE)
+ expect(node.callee).toBe(`_${CREATE_VNODE}`)
expect(node.arguments[1]).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
expect(root.imports).toContain(RESOLVE_DIRECTIVE)
expect(root.statements[0]).toMatch(`${RESOLVE_DIRECTIVE}("foo")`)
- expect(node.callee).toBe(APPLY_DIRECTIVES)
+ expect(node.callee).toBe(`_${APPLY_DIRECTIVES}`)
expect(node.arguments).toMatchObject([
{
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
+ callee: `_${CREATE_VNODE}`,
arguments: [
`"div"`,
{
expect(root.statements[1]).toMatch(`${RESOLVE_DIRECTIVE}("bar")`)
expect(root.statements[2]).toMatch(`${RESOLVE_DIRECTIVE}("baz")`)
- expect(node.callee).toBe(APPLY_DIRECTIVES)
+ expect(node.callee).toBe(`_${APPLY_DIRECTIVES}`)
expect(node.arguments).toMatchObject([
{
type: NodeTypes.JS_CALL_EXPRESSION
])
})
- test('props dedupe', () => {
- const { code } = compile(
- `<div class="a" :class="b" @click.foo="a" @click.bar="b" style="color: red" />
- <div id="foo"/>`
- )
- console.log(code)
- })
+ test.todo(`props dedupe`)
test.todo('slot outlets')
})
loc: {
start: {
line: 1,
- column: 16
+ column: 17
},
end: {
line: 1,
- column: 20
+ column: 19
}
}
},
const source = '<span v-for="item in items" />'
const forNode = parseWithForTransform(source)
+ const itemOffset = source.indexOf('item')
expect(forNode.valueAlias!.content).toBe('item')
- expect(forNode.valueAlias!.loc.start.offset).toBe(
- source.indexOf('item') - 1
- )
+ expect(forNode.valueAlias!.loc.start.offset).toBe(itemOffset)
expect(forNode.valueAlias!.loc.start.line).toBe(1)
- expect(forNode.valueAlias!.loc.start.column).toBe(source.indexOf('item'))
+ expect(forNode.valueAlias!.loc.start.column).toBe(itemOffset + 1)
expect(forNode.valueAlias!.loc.end.line).toBe(1)
expect(forNode.valueAlias!.loc.end.column).toBe(
- source.indexOf('item') + 4
+ itemOffset + 1 + `item`.length
)
+ const itemsOffset = source.indexOf('items')
expect(forNode.source.content).toBe('items')
- expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+ expect(forNode.source.loc.start.offset).toBe(itemsOffset)
expect(forNode.source.loc.start.line).toBe(1)
- expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+ expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
expect(forNode.source.loc.end.line).toBe(1)
- expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+ expect(forNode.source.loc.end.column).toBe(
+ itemsOffset + 1 + `items`.length
+ )
})
test('bracketed value', () => {
const source = '<span v-for="( item ) in items" />'
const forNode = parseWithForTransform(source)
+ const itemOffset = source.indexOf('item')
expect(forNode.valueAlias!.content).toBe('item')
- expect(forNode.valueAlias!.loc.start.offset).toBe(
- source.indexOf('item') - 1
- )
+ expect(forNode.valueAlias!.loc.start.offset).toBe(itemOffset)
expect(forNode.valueAlias!.loc.start.line).toBe(1)
- expect(forNode.valueAlias!.loc.start.column).toBe(source.indexOf('item'))
+ expect(forNode.valueAlias!.loc.start.column).toBe(itemOffset + 1)
expect(forNode.valueAlias!.loc.end.line).toBe(1)
expect(forNode.valueAlias!.loc.end.column).toBe(
- source.indexOf('item') + 4
+ itemOffset + 1 + `item`.length
)
+ const itemsOffset = source.indexOf('items')
expect(forNode.source.content).toBe('items')
- expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+ expect(forNode.source.loc.start.offset).toBe(itemsOffset)
expect(forNode.source.loc.start.line).toBe(1)
- expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+ expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
expect(forNode.source.loc.end.line).toBe(1)
- expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+ expect(forNode.source.loc.end.column).toBe(
+ itemsOffset + 1 + `items`.length
+ )
})
test('de-structured value', () => {
const source = '<span v-for="( { id, key })in items" />'
const forNode = parseWithForTransform(source)
+ const valueIndex = source.indexOf('{ id, key }')
expect(forNode.valueAlias!.content).toBe('{ id, key }')
- expect(forNode.valueAlias!.loc.start.offset).toBe(
- source.indexOf('{ id, key }') - 1
- )
+ expect(forNode.valueAlias!.loc.start.offset).toBe(valueIndex)
expect(forNode.valueAlias!.loc.start.line).toBe(1)
- expect(forNode.valueAlias!.loc.start.column).toBe(
- source.indexOf('{ id, key }')
- )
+ expect(forNode.valueAlias!.loc.start.column).toBe(valueIndex + 1)
expect(forNode.valueAlias!.loc.end.line).toBe(1)
expect(forNode.valueAlias!.loc.end.column).toBe(
- source.indexOf('{ id, key }') + '{ id, key }'.length
+ valueIndex + 1 + '{ id, key }'.length
)
+ const itemsOffset = source.indexOf('items')
expect(forNode.source.content).toBe('items')
- expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+ expect(forNode.source.loc.start.offset).toBe(itemsOffset)
expect(forNode.source.loc.start.line).toBe(1)
- expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+ expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
expect(forNode.source.loc.end.line).toBe(1)
- expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+ expect(forNode.source.loc.end.column).toBe(
+ itemsOffset + 1 + `items`.length
+ )
})
test('bracketed value, key, index', () => {
const source = '<span v-for="( item, key, index ) in items" />'
const forNode = parseWithForTransform(source)
+ const itemOffset = source.indexOf('item')
expect(forNode.valueAlias!.content).toBe('item')
- expect(forNode.valueAlias!.loc.start.offset).toBe(
- source.indexOf('item') - 1
- )
+ expect(forNode.valueAlias!.loc.start.offset).toBe(itemOffset)
expect(forNode.valueAlias!.loc.start.line).toBe(1)
- expect(forNode.valueAlias!.loc.start.column).toBe(source.indexOf('item'))
+ expect(forNode.valueAlias!.loc.start.column).toBe(itemOffset + 1)
expect(forNode.valueAlias!.loc.end.line).toBe(1)
expect(forNode.valueAlias!.loc.end.column).toBe(
- source.indexOf('item') + 4
+ itemOffset + 1 + `item`.length
)
+ const keyOffset = source.indexOf('key')
expect(forNode.keyAlias!.content).toBe('key')
- expect(forNode.keyAlias!.loc.start.offset).toBe(source.indexOf('key') - 1)
+ expect(forNode.keyAlias!.loc.start.offset).toBe(keyOffset)
expect(forNode.keyAlias!.loc.start.line).toBe(1)
- expect(forNode.keyAlias!.loc.start.column).toBe(source.indexOf('key'))
+ expect(forNode.keyAlias!.loc.start.column).toBe(keyOffset + 1)
expect(forNode.keyAlias!.loc.end.line).toBe(1)
- expect(forNode.keyAlias!.loc.end.column).toBe(source.indexOf('key') + 3)
+ expect(forNode.keyAlias!.loc.end.column).toBe(
+ keyOffset + 1 + `key`.length
+ )
+ const indexOffset = source.indexOf('index')
expect(forNode.objectIndexAlias!.content).toBe('index')
- expect(forNode.objectIndexAlias!.loc.start.offset).toBe(
- source.indexOf('index') - 1
- )
+ expect(forNode.objectIndexAlias!.loc.start.offset).toBe(indexOffset)
expect(forNode.objectIndexAlias!.loc.start.line).toBe(1)
- expect(forNode.objectIndexAlias!.loc.start.column).toBe(
- source.indexOf('index')
- )
+ expect(forNode.objectIndexAlias!.loc.start.column).toBe(indexOffset + 1)
expect(forNode.objectIndexAlias!.loc.end.line).toBe(1)
expect(forNode.objectIndexAlias!.loc.end.column).toBe(
- source.indexOf('index') + 5
+ indexOffset + 1 + `index`.length
)
+ const itemsOffset = source.indexOf('items')
expect(forNode.source.content).toBe('items')
- expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+ expect(forNode.source.loc.start.offset).toBe(itemsOffset)
expect(forNode.source.loc.start.line).toBe(1)
- expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+ expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
expect(forNode.source.loc.end.line).toBe(1)
- expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+ expect(forNode.source.loc.end.column).toBe(
+ itemsOffset + 1 + `items`.length
+ )
})
test('skipped key', () => {
const source = '<span v-for="( item,, index ) in items" />'
const forNode = parseWithForTransform(source)
+ const itemOffset = source.indexOf('item')
expect(forNode.valueAlias!.content).toBe('item')
- expect(forNode.valueAlias!.loc.start.offset).toBe(
- source.indexOf('item') - 1
- )
+ expect(forNode.valueAlias!.loc.start.offset).toBe(itemOffset)
expect(forNode.valueAlias!.loc.start.line).toBe(1)
- expect(forNode.valueAlias!.loc.start.column).toBe(source.indexOf('item'))
+ expect(forNode.valueAlias!.loc.start.column).toBe(itemOffset + 1)
expect(forNode.valueAlias!.loc.end.line).toBe(1)
expect(forNode.valueAlias!.loc.end.column).toBe(
- source.indexOf('item') + 4
+ itemOffset + 1 + `item`.length
)
+ const indexOffset = source.indexOf('index')
expect(forNode.objectIndexAlias!.content).toBe('index')
- expect(forNode.objectIndexAlias!.loc.start.offset).toBe(
- source.indexOf('index') - 1
- )
+ expect(forNode.objectIndexAlias!.loc.start.offset).toBe(indexOffset)
expect(forNode.objectIndexAlias!.loc.start.line).toBe(1)
- expect(forNode.objectIndexAlias!.loc.start.column).toBe(
- source.indexOf('index')
- )
+ expect(forNode.objectIndexAlias!.loc.start.column).toBe(indexOffset + 1)
expect(forNode.objectIndexAlias!.loc.end.line).toBe(1)
expect(forNode.objectIndexAlias!.loc.end.column).toBe(
- source.indexOf('index') + 5
+ indexOffset + 1 + `index`.length
)
+ const itemsOffset = source.indexOf('items')
expect(forNode.source.content).toBe('items')
- expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+ expect(forNode.source.loc.start.offset).toBe(itemsOffset)
expect(forNode.source.loc.start.line).toBe(1)
- expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+ expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
expect(forNode.source.loc.end.line).toBe(1)
- expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+ expect(forNode.source.loc.end.column).toBe(
+ itemsOffset + 1 + `items`.length
+ )
})
})
})
test('basic v-if', () => {
const node = parseWithIfTransform(`<div v-if="ok"/>`)
expect(node.type).toBe(NodeTypes.IF)
- expect(node.isRoot).toBe(true)
expect(node.branches.length).toBe(1)
- expect(node.branches[0].isRoot).toBe(true)
expect(node.branches[0].condition!.content).toBe(`ok`)
expect(node.branches[0].children.length).toBe(1)
expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
loc: {
start: {
line: 1,
- column: 17
+ column: 18
},
end: {
line: 1,
- column: 26
+ column: 25
}
}
},
const pos = p(1, 1, 0)
const newPos = advancePositionWithClone(pos, 'foo\nbar\nbaz', 10)
- expect(newPos.column).toBe(2)
+ expect(newPos.column).toBe(3)
expect(newPos.line).toBe(3)
expect(newPos.offset).toBe(10)
})
expect(loc2.start.column).toBe(1)
expect(loc2.start.line).toBe(2)
expect(loc2.start.offset).toBe(4)
- expect(loc2.end.column).toBe(3)
+ expect(loc2.end.column).toBe(4)
expect(loc2.end.line).toBe(2)
expect(loc2.end.offset).toBe(7)
})
export interface IfNode extends Node {
type: NodeTypes.IF
branches: IfBranchNode[]
- isRoot: boolean
}
export interface IfBranchNode extends Node {
type: NodeTypes.IF_BRANCH
condition: ExpressionNode | undefined // else
children: ChildNode[]
- isRoot: boolean
}
export interface ForNode extends Node {
offset: number
indentLevel: number
map?: SourceMapGenerator
+ helper(name: string): string
push(code: string, node?: CodegenNode): void
indent(): void
deindent(withoutNewLine?: boolean): void
? undefined
: new (require('source-map')).SourceMapGenerator(),
+ helper(name) {
+ return prefixIdentifiers ? name : `_${name}`
+ },
push(code, node?: CodegenNode) {
context.code += code
if (context.map) {
if (node) {
- context.map.addMapping({
+ const mapping = {
source: context.filename,
original: {
line: node.loc.start.line,
line: context.line,
column: context.column - 1
}
- })
+ }
+ context.map.addMapping(mapping)
}
- advancePositionWithMutation(context, code, code.length)
+ advancePositionWithMutation(context, code)
}
},
indent() {
): CodegenResult {
const context = createCodegenContext(ast, options)
const { mode, push, prefixIdentifiers, indent, deindent, newline } = context
- const imports = ast.imports.join(', ')
+ const hasImports = ast.imports.length
// preambles
if (mode === 'function') {
// In prefix mode, we place the const declaration at top so it's done
// only once; But if we not prefixing, we place the decalration inside the
// with block so it doesn't incur the `in` check cost for every helper access.
- if (imports) {
+ if (hasImports) {
if (prefixIdentifiers) {
- push(`const { ${imports} } = Vue\n`)
+ push(`const { ${ast.imports.join(', ')} } = Vue\n`)
} else {
// save Vue in a separate variable to avoid collision
push(`const _Vue = Vue`)
push(`return `)
} else {
// generate import statements for helpers
- if (imports) {
- push(`import { ${imports} } from 'vue'\n`)
+ if (hasImports) {
+ push(`import { ${ast.imports.join(', ')} } from 'vue'\n`)
}
genHoists(ast.hoists, context)
push(`export default `)
push(`with (this) {`)
indent()
// function mode const declarations should be inside with block
- if (mode === 'function' && imports) {
- push(`const { ${imports} } = _Vue`)
+ // also they should be renamed to avoid collision with user properties
+ if (mode === 'function' && hasImports) {
+ push(`const { ${ast.imports.map(n => `${n}: _${n}`).join(', ')} } = _Vue`)
newline()
}
} else {
// generate the VNode tree expression
push(`return `)
- genChildren(ast.children, context, true /* asRoot */)
+ genChildren(ast.children, context, true)
if (!prefixIdentifiers) {
deindent()
push(`}`)
}
// This will generate a single vnode call if:
-// - The list has length === 1, AND:
-// - This is a root node, OR:
-// - The only child is a text or expression.
+// - The target position explicitly allows a single node (root, if, for)
+// - The list has length === 1, AND The only child is a text or expression.
function genChildren(
children: ChildNode[],
context: CodegenContext,
- asRoot: boolean = false
+ allowSingle: boolean = false
) {
if (!children.length) {
return context.push(`null`)
const child = children[0]
if (
children.length === 1 &&
- (asRoot ||
+ (allowSingle ||
child.type === NodeTypes.TEXT ||
child.type == NodeTypes.EXPRESSION)
) {
}
function genExpression(node: ExpressionNode, context: CodegenContext) {
- const { push } = context
+ const { push, helper } = context
const { content, children, isStatic, isInterpolation } = node
if (isInterpolation) {
- push(`${TO_STRING}(`)
+ push(`${helper(TO_STRING)}(`)
}
if (children) {
genCompoundExpression(node, context)
function genComment(node: CommentNode, context: CodegenContext) {
if (__DEV__) {
- context.push(
- `${CREATE_VNODE}(${COMMENT}, 0, ${JSON.stringify(node.content)})`,
+ const { push, helper } = context
+ push(
+ `${helper(CREATE_VNODE)}(${helper(COMMENT)}, 0, ${JSON.stringify(
+ node.content
+ )})`,
node
)
}
}
function genIfBranch(
- { condition, children, isRoot }: IfBranchNode,
+ { condition, children }: IfBranchNode,
branches: IfBranchNode[],
nextIndex: number,
context: CodegenContext
indent()
context.indentLevel++
push(`? `)
- genChildren(children, context, isRoot)
+ genChildren(children, context, true)
context.indentLevel--
newline()
push(`: `)
} else {
// v-else
__DEV__ && assert(nextIndex === branches.length)
- genChildren(children, context, isRoot)
+ genChildren(children, context, true)
}
}
function genFor(node: ForNode, context: CodegenContext) {
- const { push } = context
+ const { push, helper, indent, deindent } = context
const { source, keyAlias, valueAlias, objectIndexAlias, children } = node
- push(`${RENDER_LIST}(`, node)
+ push(`${helper(RENDER_LIST)}(`, node)
genExpression(source, context)
push(`, (`)
if (valueAlias) {
push(`, `)
genExpression(objectIndexAlias, context)
}
- push(`) => `)
- genChildren(children, context)
- push(`)`)
+ push(`) => {`)
+ indent()
+ push(`return `)
+ genChildren(children, context, true)
+ deindent()
+ push(`})`)
}
// JavaScript
advanceBy(context, name.length)
// Value
- let value: { content: string; loc: SourceLocation } | undefined = undefined
+ let value:
+ | {
+ content: string
+ isQuoted: boolean
+ loc: SourceLocation
+ }
+ | undefined = undefined
+
if (/^[\t\r\n\f ]*=/.test(context.source)) {
advanceSpaces(context)
advanceBy(context, 1)
}
}
+ if (value && value.isQuoted) {
+ const valueLoc = value.loc
+ valueLoc.start.offset++
+ valueLoc.start.column++
+ valueLoc.end = advancePositionWithClone(valueLoc.start, value.content)
+ }
+
return {
type: NodeTypes.DIRECTIVE,
name:
function parseAttributeValue(
context: ParserContext
-): { content: string; loc: SourceLocation } | undefined {
+):
+ | {
+ content: string
+ isQuoted: boolean
+ loc: SourceLocation
+ }
+ | undefined {
const start = getCursor(context)
let content: string
- if (/^["']/.test(context.source)) {
+ const quote = context.source[0]
+ const isQuoted = quote === `"` || quote === `'`
+ if (isQuoted) {
// Quoted value.
- const quote = context.source[0]
advanceBy(context, 1)
const endIndex = context.source.indexOf(quote)
content = parseTextData(context, match[0].length, TextModes.ATTRIBUTE_VALUE)
}
- return { content, loc: getSelection(context, start) }
+ return { content, isQuoted, loc: getSelection(context, start) }
}
function parseInterpolation(
parent: ParentNode
childIndex: number
currentNode: ChildNode | null
+ helper(name: string): string
replaceNode(node: ChildNode): void
removeNode(node?: ChildNode): void
onNodeRemoved: () => void
parent: root,
childIndex: 0,
currentNode: null,
+ helper(name) {
+ context.imports.add(name)
+ return prefixIdentifiers ? name : `_${name}`
+ },
replaceNode(node) {
/* istanbul ignore if */
if (__DEV__ && !context.currentNode) {
switch (node.type) {
case NodeTypes.COMMENT:
- context.imports.add(CREATE_VNODE)
+ context.helper(CREATE_VNODE)
// inject import for the Comment symbol, which is needed for creating
// comment nodes with `createVNode`
- context.imports.add(COMMENT)
+ context.helper(COMMENT)
break
case NodeTypes.EXPRESSION:
// no need to traverse, but we need to inject toString helper
if (node.isInterpolation) {
- context.imports.add(TO_STRING)
+ context.helper(TO_STRING)
}
break
let componentIdentifier: string | undefined
if (isComponent) {
- context.imports.add(RESOLVE_COMPONENT)
componentIdentifier = `_component_${toValidId(node.tag)}`
context.statements.push(
- `const ${componentIdentifier} = ${RESOLVE_COMPONENT}(${JSON.stringify(
- node.tag
- )})`
+ `const ${componentIdentifier} = ${context.helper(
+ RESOLVE_COMPONENT
+ )}(${JSON.stringify(node.tag)})`
)
}
}
const { loc } = node
- context.imports.add(CREATE_VNODE)
- const vnode = createCallExpression(CREATE_VNODE, args, loc)
+ const vnode = createCallExpression(
+ context.helper(CREATE_VNODE),
+ args,
+ loc
+ )
if (runtimeDirectives && runtimeDirectives.length) {
- context.imports.add(APPLY_DIRECTIVES)
node.codegenNode = createCallExpression(
- APPLY_DIRECTIVES,
+ context.helper(APPLY_DIRECTIVES),
[
vnode,
createArrayExpression(
mergeArgs.push(exp)
} else {
// v-on="obj" -> toHandlers(obj)
- context.imports.add(TO_HANDLERS)
mergeArgs.push({
type: NodeTypes.JS_CALL_EXPRESSION,
loc,
- callee: TO_HANDLERS,
+ callee: context.helper(TO_HANDLERS),
arguments: [exp]
})
}
)
}
if (mergeArgs.length > 1) {
- context.imports.add(MERGE_PROPS)
- propsExpression = createCallExpression(MERGE_PROPS, mergeArgs, elementLoc)
+ propsExpression = createCallExpression(
+ context.helper(MERGE_PROPS),
+ mergeArgs,
+ elementLoc
+ )
} else {
// single v-bind with nothing else - no need for a mergeProps call
propsExpression = mergeArgs[0]
dir: DirectiveNode,
context: TransformContext
): ArrayExpression {
- // inject import for `resolveDirective`
- context.imports.add(RESOLVE_DIRECTIVE)
// inject statement for resolving directive
const dirIdentifier = `_directive_${toValidId(dir.name)}`
context.statements.push(
- `const ${dirIdentifier} = ${RESOLVE_DIRECTIVE}(${JSON.stringify(dir.name)})`
+ `const ${dirIdentifier} = ${context.helper(
+ RESOLVE_DIRECTIVE
+ )}(${JSON.stringify(dir.name)})`
)
const dirArgs: ArrayExpression['elements'] = [dirIdentifier]
const { loc } = dir
const parseResult = parseForExpression(dir.exp, context)
if (parseResult) {
- context.imports.add(RENDER_LIST)
+ context.helper(RENDER_LIST)
const { source, value, key, index } = parseResult
context.replaceNode({
processExpression(dir.exp, context)
}
if (dir.name === 'if') {
- // check if this v-if is root - so that in codegen we can avoid generating
- // arrays for each branch
- const isRoot = context.parent === context.root
context.replaceNode({
type: NodeTypes.IF,
loc: node.loc,
- branches: [createIfBranch(node, dir, isRoot)],
- isRoot
+ branches: [createIfBranch(node, dir)]
})
} else {
// locate the adjacent v-if
if (sibling && sibling.type === NodeTypes.IF) {
// move the node to the if node's branches
context.removeNode()
- const branch = createIfBranch(node, dir, sibling.isRoot)
+ const branch = createIfBranch(node, dir)
if (__DEV__ && comments.length) {
branch.children = [...comments, ...branch.children]
}
}
)
-function createIfBranch(
- node: ElementNode,
- dir: DirectiveNode,
- isRoot: boolean
-): IfBranchNode {
+function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode {
return {
type: NodeTypes.IF_BRANCH,
loc: node.loc,
condition: dir.name === 'else' ? undefined : dir.exp,
- children: node.tagType === ElementTypes.TEMPLATE ? node.children : [node],
- isRoot
+ children: node.tagType === ElementTypes.TEMPLATE ? node.children : [node]
}
}
export function advancePositionWithClone(
pos: Position,
source: string,
- numberOfCharacters: number
+ numberOfCharacters: number = source.length
): Position {
return advancePositionWithMutation({ ...pos }, source, numberOfCharacters)
}
export function advancePositionWithMutation(
pos: Position,
source: string,
- numberOfCharacters: number
+ numberOfCharacters: number = source.length
): Position {
let linesCount = 0
let lastNewLinePos = -1
pos.column =
lastNewLinePos === -1
? pos.column + numberOfCharacters
- : Math.max(1, numberOfCharacters - lastNewLinePos - 1)
+ : Math.max(1, numberOfCharacters - lastNewLinePos)
return pos
}
projects / thirdparty / vuejs / core.git / commitdiff
