+ {{ number
+ }}
+
+ `,
+ )
+ expect((ast.children[0] as ElementNode).children).toMatchObject([
+ {
+ type: NodeTypes.ELEMENT,
+ children: [{ type: NodeTypes.TEXT, content: `{{ number ` }],
+ },
+ {
+ type: NodeTypes.ELEMENT,
+ children: [{ type: NodeTypes.TEXT, content: `}}` }],
+ },
+ ])
+
+ const ast2 = baseParse(`{{ number
`)
+ expect((ast2.children[0] as ElementNode).children).toMatchObject([
+ {
+ type: NodeTypes.ELEMENT,
+ children: [{ type: NodeTypes.TEXT, content: `{{ number ` }],
+ },
+ ])
+ })
+
test('self-closing v-pre', () => {
const ast = baseParse(
- `\n\n` +
- ` \n` +
- ` \n` +
- `
`
- )
-
- expect(ast).toMatchSnapshot()
-
- expect(ast.children).toHaveLength(1)
- const el = ast.children[0] as any
- expect(el).toMatchObject({
- tag: 'div'
- })
- expect(el.children).toHaveLength(2)
- expect(el.children[0]).toMatchObject({
- tag: 'p'
- })
- expect(el.children[1]).toMatchObject({
- type: NodeTypes.COMMENT
- })
- })
-
- test('invalid html', () => {
- expect(() => {
- baseParse(`\n\n
\n`)
- }).toThrow('Element is missing end tag.')
-
- const spy = vi.fn()
- const ast = baseParse(`\n\n
\n`, {
- onError: spy
+ expect(ast.children).toHaveLength(1)
+ expect(ast.children[0]).toMatchObject({ tag: 'div' })
})
- expect(spy.mock.calls).toMatchObject([
- [
+ test('self closing multiple tag', () => {
+ const ast = baseParse(
+ `\n` +
+ ``,
+ )
+
+ expect(ast).toMatchSnapshot()
+
+ expect(ast.children).toHaveLength(2)
+ expect(ast.children[0]).toMatchObject({ tag: 'div' })
+ expect(ast.children[1]).toMatchObject({ tag: 'p' })
+ })
+
+ test('valid html', () => {
+ const ast = baseParse(
+ `\n` +
+ ` \n` +
+ ` \n` +
+ `
`,
+ )
+
+ expect(ast).toMatchSnapshot()
+
+ expect(ast.children).toHaveLength(1)
+ const el = ast.children[0] as any
+ expect(el).toMatchObject({
+ tag: 'div',
+ })
+ expect(el.children).toHaveLength(2)
+ expect(el.children[0]).toMatchObject({
+ tag: 'p',
+ })
+ expect(el.children[1]).toMatchObject({
+ type: NodeTypes.COMMENT,
+ })
+ })
+
+ test('invalid html', () => {
+ expect(() => {
+ baseParse(`\n\n
\n`)
+ }).toThrow('Element is missing end tag.')
+
+ const spy = vi.fn()
+ const ast = baseParse(`\n\n
\n`, {
+ onError: spy,
+ })
+
+ expect(spy.mock.calls).toMatchObject([
+ [
+ {
+ code: ErrorCodes.X_MISSING_END_TAG,
+ loc: {
+ start: {
+ offset: 6,
+ line: 2,
+ column: 1,
+ },
+ },
+ },
+ ],
+ [
+ {
+ code: ErrorCodes.X_INVALID_END_TAG,
+ loc: {
+ start: {
+ offset: 20,
+ line: 4,
+ column: 1,
+ },
+ },
+ },
+ ],
+ ])
+
+ expect(ast).toMatchSnapshot()
+ })
+
+ test('parse with correct location info', () => {
+ const fooSrc = `foo\n is `
+ const barSrc = `{{ bar }}`
+ const butSrc = ` but `
+ const bazSrc = `{{ baz }}`
+ const [foo, bar, but, baz] = baseParse(
+ fooSrc + barSrc + butSrc + bazSrc,
+ ).children
+
+ let offset = 0
+ expect(foo.loc.start).toEqual({ line: 1, column: 1, offset })
+ offset += fooSrc.length
+ expect(foo.loc.end).toEqual({ line: 2, column: 5, offset })
+
+ expect(bar.loc.start).toEqual({ line: 2, column: 5, offset })
+ const barInner = (bar as InterpolationNode).content
+ offset += 3
+ expect(barInner.loc.start).toEqual({ line: 2, column: 8, offset })
+ offset += 3
+ expect(barInner.loc.end).toEqual({ line: 2, column: 11, offset })
+ offset += 3
+ expect(bar.loc.end).toEqual({ line: 2, column: 14, offset })
+
+ expect(but.loc.start).toEqual({ line: 2, column: 14, offset })
+ offset += butSrc.length
+ expect(but.loc.end).toEqual({ line: 2, column: 19, offset })
+
+ expect(baz.loc.start).toEqual({ line: 2, column: 19, offset })
+ const bazInner = (baz as InterpolationNode).content
+ offset += 3
+ expect(bazInner.loc.start).toEqual({ line: 2, column: 22, offset })
+ offset += 3
+ expect(bazInner.loc.end).toEqual({ line: 2, column: 25, offset })
+ offset += 3
+ expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
+ })
+
+ // With standard HTML parsing, the following input would ignore the slash
+ // and treat "<" and "template" as attributes on the open tag of "Hello",
+ // causing `` to fail to close, and ``,
{
- code: ErrorCodes.X_MISSING_END_TAG,
- loc: {
- start: {
- offset: 6,
- line: 2,
- column: 1
- }
- }
- }
- ],
- [
- {
- code: ErrorCodes.X_INVALID_END_TAG,
- loc: {
- start: {
- offset: 20,
- line: 4,
- column: 1
- }
- }
- }
- ]
- ])
+ onError: spy,
+ },
+ )
+ //
+ expect(ast.children.length).toBe(2)
+ expect(ast.children[1]).toMatchObject({
+ type: NodeTypes.ELEMENT,
+ tag: 'script',
+ })
+ })
- expect(ast).toMatchSnapshot()
- })
+ test('arg should be undefined on shorthand dirs with no arg', () => {
+ const ast = baseParse(``)
+ const el = ast.children[0] as ElementNode
+ expect(el.props[0]).toMatchObject({
+ type: NodeTypes.DIRECTIVE,
+ name: 'slot',
+ exp: undefined,
+ arg: undefined,
+ })
+ })
- test('parse with correct location info', () => {
- const [foo, bar, but, baz] = baseParse(
- `
-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: 5, offset })
-
- expect(bar.loc.start).toEqual({ line: 2, column: 5, offset })
- const barInner = (bar as InterpolationNode).content
- offset += 3
- expect(barInner.loc.start).toEqual({ line: 2, column: 8, offset })
- offset += barInner.loc.source.length
- expect(barInner.loc.end).toEqual({ line: 2, column: 11, offset })
- offset += 3
- expect(bar.loc.end).toEqual({ line: 2, column: 14, offset })
-
- expect(but.loc.start).toEqual({ line: 2, column: 14, offset })
- offset += but.loc.source.length
- expect(but.loc.end).toEqual({ line: 2, column: 19, offset })
-
- expect(baz.loc.start).toEqual({ line: 2, column: 19, offset })
- const bazInner = (baz as InterpolationNode).content
- offset += 3
- expect(bazInner.loc.start).toEqual({ line: 2, column: 22, offset })
- offset += bazInner.loc.source.length
- expect(bazInner.loc.end).toEqual({ line: 2, column: 25, offset })
- offset += 3
- expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
+ // edge case found in vue-macros where the input is TS or JSX
+ test('should reset inRCDATA state', () => {
+ baseParse(`\n foo bar`, { - isPreTag: tag => tag === 'pre' + isPreTag: tag => tag === 'pre', }) expect(ast.children).toHaveLength(1) const preElement = ast.children[0] as ElementNode @@ -2047,30 +2175,29 @@ foo expect((preElement.children[0] as TextNode).content).toBe(` foo bar `) }) - it('should NOT remove leading newline character immediately following child-tag of pre element', () => { + test('should NOT remove leading newline character immediately following child-tag of pre element', () => { const ast = baseParse(`
\n foo bar`, { - isPreTag: tag => tag === 'pre' + isPreTag: tag => tag === 'pre', }) const preElement = ast.children[0] as ElementNode expect(preElement.children).toHaveLength(2) expect((preElement.children[1] as TextNode).content).toBe( - `\n foo bar ` + `\n foo bar `, ) }) - it('self-closing pre tag', () => { + test('self-closing pre tag', () => { const ast = baseParse(`\n foo bar`, { - isPreTag: tag => tag === 'pre' + isPreTag: tag => tag === 'pre', }) const elementAfterPre = ast.children[1] as ElementNode // should not affect the and condense its whitespace inside expect((elementAfterPre.children[0] as TextNode).content).toBe(` foo bar`) }) - it('should NOT condense whitespaces in RCDATA text mode', () => { + test('should NOT condense whitespaces in RCDATA text mode', () => { const ast = baseParse(``, { - getTextMode: ({ tag }) => - tag === 'textarea' ? TextModes.RCDATA : TextModes.DATA + parseMode: 'html', }) const preElement = ast.children[0] as ElementNode expect(preElement.children).toHaveLength(1) @@ -2082,15 +2209,15 @@ foo const parse = (content: string, options?: ParserOptions) => baseParse(content, { whitespace: 'preserve', - ...options + ...options, }) - it('should still remove whitespaces at start/end inside an element', () => { + test('should still remove whitespaces at start/end inside an element', () => { const ast = parse(`
',
errors: [
{
type: ErrorCodes.X_MISSING_END_TAG,
- loc: { offset: 10, line: 1, column: 11 }
+ loc: { offset: 10, line: 1, column: 11 },
},
{
type: ErrorCodes.X_MISSING_END_TAG,
- loc: { offset: 0, line: 1, column: 1 }
- }
- ]
- }
+ loc: { offset: 0, line: 1, column: 1 },
+ },
+ ],
+ },
],
X_MISSING_INTERPOLATION_END: [
{
@@ -3024,23 +3177,36 @@ foo
errors: [
{
type: ErrorCodes.X_MISSING_INTERPOLATION_END,
- loc: { offset: 0, line: 1, column: 1 }
- }
- ]
+ loc: { offset: 0, line: 1, column: 1 },
+ },
+ ],
},
{
code: '{{',
errors: [
{
type: ErrorCodes.X_MISSING_INTERPOLATION_END,
- loc: { offset: 0, line: 1, column: 1 }
- }
- ]
+ loc: { offset: 0, line: 1, column: 1 },
+ },
+ ],
+ },
+ {
+ code: ') {
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: key.replace(bracketsRE, ''),
- isStatic: !leadingBracketRE.test(key)
+ isStatic: !leadingBracketRE.test(key),
},
value: isString(obj[key])
? {
type: NodeTypes.SIMPLE_EXPRESSION,
content: obj[key].replace(bracketsRE, ''),
- isStatic: !leadingBracketRE.test(obj[key])
+ isStatic: !leadingBracketRE.test(obj[key]),
}
- : obj[key]
- }))
+ : obj[key],
+ })),
}
}
@@ -48,7 +48,7 @@ export function createElementWithCodegen(
props?: VNodeCall['props'],
children?: VNodeCall['children'],
patchFlag?: VNodeCall['patchFlag'],
- dynamicProps?: VNodeCall['dynamicProps']
+ dynamicProps?: VNodeCall['dynamicProps'],
): ElementNode {
return {
type: NodeTypes.ELEMENT,
@@ -56,7 +56,6 @@ export function createElementWithCodegen(
ns: Namespaces.HTML,
tag: 'div',
tagType: ElementTypes.ELEMENT,
- isSelfClosing: false,
props: [],
children: [],
codegenNode: {
@@ -70,15 +69,15 @@ export function createElementWithCodegen(
isBlock: false,
disableTracking: false,
isComponent: false,
- loc: locStub
- }
+ loc: locStub,
+ },
}
}
type Flags = PatchFlags | ShapeFlags
export function genFlagText(
flag: Flags | Flags[],
- names: { [k: number]: string } = PatchFlagNames
+ names: { [k: number]: string } = PatchFlagNames,
) {
if (isArray(flag)) {
let f = 0
diff --git a/packages/compiler-core/__tests__/transform.spec.ts b/packages/compiler-core/__tests__/transform.spec.ts
index 042865efb..a56be51bc 100644
--- a/packages/compiler-core/__tests__/transform.spec.ts
+++ b/packages/compiler-core/__tests__/transform.spec.ts
@@ -1,18 +1,18 @@
-import { baseParse } from '../src/parse'
-import { transform, NodeTransform } from '../src/transform'
+import { baseParse } from '../src/parser'
+import { type NodeTransform, transform } from '../src/transform'
import {
- ElementNode,
+ type DirectiveNode,
+ type ElementNode,
+ type ExpressionNode,
NodeTypes,
- DirectiveNode,
- ExpressionNode,
- VNodeCall
+ type VNodeCall,
} from '../src/ast'
import { ErrorCodes, createCompilerError } from '../src/errors'
import {
- TO_DISPLAY_STRING,
+ CREATE_COMMENT,
FRAGMENT,
RENDER_SLOT,
- CREATE_COMMENT
+ TO_DISPLAY_STRING,
} from '../src/runtimeHelpers'
import { transformIf } from '../src/transforms/vIf'
import { transformFor } from '../src/transforms/vFor'
@@ -34,7 +34,7 @@ describe('compiler: transform', () => {
}
transform(ast, {
- nodeTransforms: [plugin]
+ nodeTransforms: [plugin],
})
const div = ast.children[0] as ElementNode
@@ -43,29 +43,29 @@ describe('compiler: transform', () => {
ast,
{
parent: null,
- currentNode: ast
- }
+ currentNode: ast,
+ },
])
expect(calls[1]).toMatchObject([
div,
{
parent: ast,
- currentNode: div
- }
+ currentNode: div,
+ },
])
expect(calls[2]).toMatchObject([
div.children[0],
{
parent: div,
- currentNode: div.children[0]
- }
+ currentNode: div.children[0],
+ },
])
expect(calls[3]).toMatchObject([
div.children[1],
{
parent: div,
- currentNode: div.children[1]
- }
+ currentNode: div.children[1],
+ },
])
})
@@ -81,16 +81,16 @@ describe('compiler: transform', () => {
{
type: NodeTypes.TEXT,
content: 'hello',
- isEmpty: false
- }
- ]
- })
+ isEmpty: false,
+ },
+ ],
+ }),
)
}
}
const spy = vi.fn(plugin)
transform(ast, {
- nodeTransforms: [spy]
+ nodeTransforms: [spy],
})
expect(ast.children.length).toBe(2)
@@ -115,7 +115,7 @@ describe('compiler: transform', () => {
}
const spy = vi.fn(plugin)
transform(ast, {
- nodeTransforms: [spy]
+ nodeTransforms: [spy],
})
expect(ast.children.length).toBe(2)
@@ -143,7 +143,7 @@ describe('compiler: transform', () => {
}
const spy = vi.fn(plugin)
transform(ast, {
- nodeTransforms: [spy]
+ nodeTransforms: [spy],
})
expect(ast.children.length).toBe(1)
@@ -170,7 +170,7 @@ describe('compiler: transform', () => {
}
const spy = vi.fn(plugin)
transform(ast, {
- nodeTransforms: [spy]
+ nodeTransforms: [spy],
})
expect(ast.children.length).toBe(1)
@@ -194,31 +194,51 @@ describe('compiler: transform', () => {
}
}
transform(ast, {
- nodeTransforms: [mock]
+ nodeTransforms: [mock],
})
expect(ast.hoists).toMatchObject(hoisted)
expect((ast as any).children[0].props[0].exp.content).toBe(`_hoisted_1`)
expect((ast as any).children[1].props[0].exp.content).toBe(`_hoisted_2`)
})
+ test('context.filename and selfName', () => {
+ const ast = baseParse(``)
+
+ const calls: any[] = []
+ const plugin: NodeTransform = (node, context) => {
+ calls.push({ ...context })
+ }
+
+ transform(ast, {
+ filename: '/the/fileName.vue',
+ nodeTransforms: [plugin],
+ })
+
+ expect(calls.length).toBe(2)
+ expect(calls[1]).toMatchObject({
+ filename: '/the/fileName.vue',
+ selfName: 'FileName',
+ })
+ })
+
test('onError option', () => {
const ast = baseParse(``)
const loc = ast.children[0].loc
const plugin: NodeTransform = (node, context) => {
context.onError(
- createCompilerError(ErrorCodes.X_INVALID_END_TAG, node.loc)
+ createCompilerError(ErrorCodes.X_INVALID_END_TAG, node.loc),
)
}
const spy = vi.fn()
transform(ast, {
nodeTransforms: [plugin],
- onError: spy
+ onError: spy,
})
expect(spy.mock.calls[0]).toMatchObject([
{
code: ErrorCodes.X_INVALID_END_TAG,
- loc
- }
+ loc,
+ },
])
})
@@ -243,8 +263,8 @@ describe('compiler: transform', () => {
transformFor,
transformText,
transformSlotOutlet,
- transformElement
- ]
+ transformElement,
+ ],
})
return ast
}
@@ -253,7 +273,7 @@ describe('compiler: transform', () => {
tag: VNodeCall['tag'],
props?: VNodeCall['props'],
children?: VNodeCall['children'],
- patchFlag?: VNodeCall['patchFlag']
+ patchFlag?: VNodeCall['patchFlag'],
) {
return {
type: NodeTypes.VNODE_CALL,
@@ -261,7 +281,7 @@ describe('compiler: transform', () => {
tag,
props,
children,
- patchFlag
+ patchFlag,
}
}
@@ -275,8 +295,8 @@ describe('compiler: transform', () => {
expect(ast.codegenNode).toMatchObject({
codegenNode: {
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: RENDER_SLOT
- }
+ callee: RENDER_SLOT,
+ },
})
})
@@ -288,14 +308,14 @@ describe('compiler: transform', () => {
test('root v-if', () => {
const ast = transformWithCodegen(``)
expect(ast.codegenNode).toMatchObject({
- type: NodeTypes.IF
+ type: NodeTypes.IF,
})
})
test('root v-for', () => {
const ast = transformWithCodegen(``)
expect(ast.codegenNode).toMatchObject({
- type: NodeTypes.FOR
+ type: NodeTypes.FOR,
})
})
@@ -303,28 +323,28 @@ describe('compiler: transform', () => {
const ast = transformWithCodegen(``)
expect(ast.codegenNode).toMatchObject({
type: NodeTypes.VNODE_CALL,
- directives: { type: NodeTypes.JS_ARRAY_EXPRESSION }
+ directives: { type: NodeTypes.JS_ARRAY_EXPRESSION },
})
})
test('single text', () => {
const ast = transformWithCodegen(`hello`)
expect(ast.codegenNode).toMatchObject({
- type: NodeTypes.TEXT
+ type: NodeTypes.TEXT,
})
})
test('single interpolation', () => {
const ast = transformWithCodegen(`{{ foo }}`)
expect(ast.codegenNode).toMatchObject({
- type: NodeTypes.INTERPOLATION
+ type: NodeTypes.INTERPOLATION,
})
})
test('single CompoundExpression', () => {
const ast = transformWithCodegen(`{{ foo }} bar baz`)
expect(ast.codegenNode).toMatchObject({
- type: NodeTypes.COMPOUND_EXPRESSION
+ type: NodeTypes.COMPOUND_EXPRESSION,
})
})
@@ -336,10 +356,10 @@ describe('compiler: transform', () => {
undefined,
[
{ type: NodeTypes.ELEMENT, tag: `div` },
- { type: NodeTypes.ELEMENT, tag: `div` }
+ { type: NodeTypes.ELEMENT, tag: `div` },
] as any,
- genFlagText(PatchFlags.STABLE_FRAGMENT)
- )
+ genFlagText(PatchFlags.STABLE_FRAGMENT),
+ ),
)
})
@@ -352,13 +372,13 @@ describe('compiler: transform', () => {
[
{ type: NodeTypes.COMMENT },
{ type: NodeTypes.ELEMENT, tag: `div` },
- { type: NodeTypes.COMMENT }
+ { type: NodeTypes.COMMENT },
] as any,
genFlagText([
PatchFlags.STABLE_FRAGMENT,
- PatchFlags.DEV_ROOT_FRAGMENT
- ])
- )
+ PatchFlags.DEV_ROOT_FRAGMENT,
+ ]),
+ ),
)
})
})
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
index 0bc427b97..9f4406864 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -22,7 +22,7 @@ return function render(_ctx, _cache, $props, $setup, $data, $options) {
onClick: () => {
for (let i = 0; i < _ctx.list.length; i++) {
_ctx.log(i)
- }
+ }
}
}, null, 8 /* PROPS */, ["onClick"]))
}"
@@ -36,7 +36,7 @@ return function render(_ctx, _cache, $props, $setup, $data, $options) {
onClick: () => {
for (const x in _ctx.list) {
_ctx.log(x)
- }
+ }
}
}, null, 8 /* PROPS */, ["onClick"]))
}"
@@ -50,7 +50,7 @@ return function render(_ctx, _cache, $props, $setup, $data, $options) {
onClick: () => {
for (const x of _ctx.list) {
_ctx.log(x)
- }
+ }
}
}, null, 8 /* PROPS */, ["onClick"]))
}"
diff --git a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
index 49ad7ad89..d6c46b52e 100644
--- a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
@@ -1,19 +1,19 @@
import {
+ type CompilerOptions,
+ ConstantTypes,
+ type ElementNode,
+ type ForNode,
+ type IfNode,
+ NodeTypes,
+ type VNodeCall,
+ generate,
baseParse as parse,
transform,
- NodeTypes,
- generate,
- CompilerOptions,
- VNodeCall,
- IfNode,
- ElementNode,
- ForNode,
- ConstantTypes
} from '../../src'
import {
FRAGMENT,
+ NORMALIZE_CLASS,
RENDER_LIST,
- NORMALIZE_CLASS
} from '../../src/runtimeHelpers'
import { transformElement } from '../../src/transforms/transformElement'
import { transformExpression } from '../../src/transforms/transformExpression'
@@ -31,9 +31,9 @@ const hoistedChildrenArrayMatcher = (startIndex = 1, length = 1) => ({
type: NodeTypes.ELEMENT,
codegenNode: {
type: NodeTypes.SIMPLE_EXPRESSION,
- content: `_hoisted_${startIndex + i}`
- }
- }))
+ content: `_hoisted_${startIndex + i}`,
+ },
+ })),
})
function transformWithHoist(template: string, options: CompilerOptions = {}) {
@@ -45,17 +45,17 @@ function transformWithHoist(template: string, options: CompilerOptions = {}) {
transformFor,
...(options.prefixIdentifiers ? [transformExpression] : []),
transformElement,
- transformText
+ transformText,
],
directiveTransforms: {
on: transformOn,
- bind: transformBind
+ bind: transformBind,
},
- ...options
+ ...options,
})
expect(ast.codegenNode).toMatchObject({
type: NodeTypes.VNODE_CALL,
- isBlock: true
+ isBlock: true,
})
return ast
}
@@ -67,14 +67,14 @@ describe('compiler: hoistStatic transform', () => {
const root = transformWithHoist(``)
expect(root.hoists.length).toBe(0)
expect(root.codegenNode).toMatchObject({
- tag: `"div"`
+ tag: `"div"`,
})
expect(generate(root).code).toMatchSnapshot()
})
test('hoist simple element', () => {
const root = transformWithHoist(
- ``
+ ``,
)
expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
expect((root.codegenNode as VNodeCall).children).toMatchObject([
@@ -286,9 +286,9 @@ describe('compiler: hoistStatic transform', () => {
tag: `"div"`,
props: { content: `_hoisted_1` },
children: { type: NodeTypes.INTERPOLATION },
- patchFlag: genFlagText(PatchFlags.TEXT)
- }
- }
+ patchFlag: genFlagText(PatchFlags.TEXT),
+ },
+ },
])
expect(generate(root).code).toMatchSnapshot()
})
@@ -303,30 +303,30 @@ describe('compiler: hoistStatic transform', () => {
type: NodeTypes.VNODE_CALL,
tag: `"div"`,
props: { content: `_hoisted_1` },
- children: [{ type: NodeTypes.ELEMENT, tag: `Comp` }]
- }
- }
+ children: [{ type: NodeTypes.ELEMENT, tag: `Comp` }],
+ },
+ },
])
expect(generate(root).code).toMatchSnapshot()
})
test('should hoist v-if props/children if static', () => {
const root = transformWithHoist(
- ``
+ ``,
)
expect(root.hoists).toMatchObject([
createObjectMatcher({
key: `[0]`, // key injected by v-if branch
- id: 'foo'
+ id: 'foo',
}),
{
type: NodeTypes.VNODE_CALL,
- tag: `"span"`
+ tag: `"span"`,
},
- hoistedChildrenArrayMatcher(2)
+ hoistedChildrenArrayMatcher(2),
])
expect(
- ((root.children[0] as ElementNode).children[0] as IfNode).codegenNode
+ ((root.children[0] as ElementNode).children[0] as IfNode).codegenNode,
).toMatchObject({
type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
consequent: {
@@ -334,25 +334,25 @@ describe('compiler: hoistStatic transform', () => {
type: NodeTypes.VNODE_CALL,
tag: `"div"`,
props: { content: `_hoisted_1` },
- children: { content: `_hoisted_3` }
- }
+ children: { content: `_hoisted_3` },
+ },
})
expect(generate(root).code).toMatchSnapshot()
})
test('should hoist v-for children if static', () => {
const root = transformWithHoist(
- ``
+ ``,
)
expect(root.hoists).toMatchObject([
createObjectMatcher({
- id: 'foo'
+ id: 'foo',
}),
{
type: NodeTypes.VNODE_CALL,
- tag: `"span"`
+ tag: `"span"`,
},
- hoistedChildrenArrayMatcher(2)
+ hoistedChildrenArrayMatcher(2),
])
const forBlockCodegen = (
(root.children[0] as ElementNode).children[0] as ForNode
@@ -363,16 +363,16 @@ describe('compiler: hoistStatic transform', () => {
props: undefined,
children: {
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: RENDER_LIST
+ callee: RENDER_LIST,
},
- patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT)
+ patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
})
const innerBlockCodegen = forBlockCodegen!.children.arguments[1]
expect(innerBlockCodegen.returns).toMatchObject({
type: NodeTypes.VNODE_CALL,
tag: `"div"`,
props: { content: `_hoisted_1` },
- children: { content: `_hoisted_3` }
+ children: { content: `_hoisted_3` },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -382,8 +382,8 @@ describe('compiler: hoistStatic transform', () => {
const root = transformWithHoist(
``,
{
- prefixIdentifiers: true
- }
+ prefixIdentifiers: true,
+ },
)
expect(root.hoists.length).toBe(0)
@@ -520,8 +520,8 @@ describe('compiler: hoistStatic transform', () => {
const root = transformWithHoist(
``,
{
- prefixIdentifiers: true
- }
+ prefixIdentifiers: true,
+ },
)
expect(root.hoists.length).toBe(0)
@@ -532,8 +532,8 @@ describe('compiler: hoistStatic transform', () => {
const root = transformWithHoist(
`{{ foo }} `,
{
- prefixIdentifiers: true
- }
+ prefixIdentifiers: true,
+ },
)
expect(root.hoists.length).toBe(0)
@@ -545,8 +545,8 @@ describe('compiler: hoistStatic transform', () => {
``,
{
prefixIdentifiers: true,
- cacheHandlers: true
- }
+ cacheHandlers: true,
+ },
)
expect(root.cached).toBe(1)
@@ -554,8 +554,8 @@ describe('compiler: hoistStatic transform', () => {
expect(
generate(root, {
mode: 'module',
- prefixIdentifiers: true
- }).code
+ prefixIdentifiers: true,
+ }).code,
).toMatchSnapshot()
})
@@ -564,8 +564,8 @@ describe('compiler: hoistStatic transform', () => {
``,
{
prefixIdentifiers: true,
- cacheHandlers: true
- }
+ cacheHandlers: true,
+ },
)
expect(root.cached).toBe(1)
@@ -573,14 +573,14 @@ describe('compiler: hoistStatic transform', () => {
expect(
generate(root, {
mode: 'module',
- prefixIdentifiers: true
- }).code
+ prefixIdentifiers: true,
+ }).code,
).toMatchSnapshot()
})
test('should NOT hoist keyed template v-for with plain element child', () => {
const root = transformWithHoist(
- ` with normal children', () => {
function assert(tag: string) {
const { root, node } = parseWithElementTransform(
- `<${tag} target="#foo">`
+ `<${tag} target="#foo">`,
)
expect(root.components.length).toBe(0)
expect(root.helpers).toContain(TELEPORT)
@@ -445,7 +445,7 @@ describe('compiler: element transform', () => {
expect(node).toMatchObject({
tag: TELEPORT,
props: createObjectMatcher({
- target: '#foo'
+ target: '#foo',
}),
children: [
{
@@ -453,10 +453,10 @@ describe('compiler: element transform', () => {
tag: 'span',
codegenNode: {
type: NodeTypes.VNODE_CALL,
- tag: `"span"`
- }
- }
- ]
+ tag: `"span"`,
+ },
+ },
+ ],
})
}
@@ -467,7 +467,7 @@ describe('compiler: element transform', () => {
test('should handle ', () => {
function assert(tag: string, content: string, hasFallback?: boolean) {
const { root, node } = parseWithElementTransform(
- `<${tag}>${content}`
+ `<${tag}>${content}`,
)
expect(root.components.length).toBe(0)
expect(root.helpers).toContain(SUSPENSE)
@@ -478,19 +478,19 @@ describe('compiler: element transform', () => {
children: hasFallback
? createObjectMatcher({
default: {
- type: NodeTypes.JS_FUNCTION_EXPRESSION
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
},
fallback: {
- type: NodeTypes.JS_FUNCTION_EXPRESSION
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
},
- _: `[1 /* STABLE */]`
+ _: `[1 /* STABLE */]`,
})
: createObjectMatcher({
default: {
- type: NodeTypes.JS_FUNCTION_EXPRESSION
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
},
- _: `[1 /* STABLE */]`
- })
+ _: `[1 /* STABLE */]`,
+ }),
})
}
@@ -499,7 +499,7 @@ describe('compiler: element transform', () => {
assert(
`suspense`,
`foofallback`,
- true
+ true,
)
})
@@ -507,7 +507,7 @@ describe('compiler: element transform', () => {
function assert(tag: string) {
const root = parse(`', () => {
function assert(tag: string) {
const { root, node } = parseWithElementTransform(
- `<${tag}>`
+ `<${tag}>`,
)
expect(root.components.length).toBe(0)
expect(root.helpers).toContain(BASE_TRANSITION)
@@ -541,10 +541,10 @@ describe('compiler: element transform', () => {
props: undefined,
children: createObjectMatcher({
default: {
- type: NodeTypes.JS_FUNCTION_EXPRESSION
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
},
- _: `[1 /* STABLE */]`
- })
+ _: `[1 /* STABLE */]`,
+ }),
})
}
@@ -557,8 +557,8 @@ describe('compiler: element transform', () => {
parseWithElementTransform(``, { onError })
expect(onError.mock.calls[0]).toMatchObject([
{
- code: ErrorCodes.X_V_BIND_NO_EXPRESSION
- }
+ code: ErrorCodes.X_V_BIND_NO_EXPRESSION,
+ },
])
})
@@ -569,10 +569,10 @@ describe('compiler: element transform', () => {
foo(dir) {
_dir = dir
return {
- props: [createObjectProperty(dir.arg!, dir.exp!)]
+ props: [createObjectProperty(dir.arg!, dir.exp!)],
}
- }
- }
+ },
+ },
})
expect(node.props).toMatchObject({
@@ -581,9 +581,9 @@ describe('compiler: element transform', () => {
{
type: NodeTypes.JS_PROPERTY,
key: _dir!.arg,
- value: _dir!.exp
- }
- ]
+ value: _dir!.exp,
+ },
+ ],
})
// should factor in props returned by custom directive transforms
// in patchFlag analysis
@@ -599,11 +599,11 @@ describe('compiler: element transform', () => {
foo() {
return {
props: [],
- needRuntime: true
+ needRuntime: true,
}
- }
- }
- }
+ },
+ },
+ },
)
expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
expect(root.directives).toContain(`foo`)
@@ -623,18 +623,18 @@ describe('compiler: element transform', () => {
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `hello`,
- isStatic: false
+ isStatic: false,
},
// arg
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `bar`,
- isStatic: true
- }
- ]
- }
- ]
- }
+ isStatic: true,
+ },
+ ],
+ },
+ ],
+ },
})
})
@@ -646,24 +646,24 @@ describe('compiler: element transform', () => {
foo() {
return {
props: [],
- needRuntime: CREATE_VNODE
+ needRuntime: CREATE_VNODE,
}
- }
- }
- }
+ },
+ },
+ },
)
expect(root.helpers).toContain(CREATE_VNODE)
expect(root.helpers).not.toContain(RESOLVE_DIRECTIVE)
expect(root.directives.length).toBe(0)
expect(node.directives!.elements[0].elements[0]).toBe(
- `_${helperNameMap[CREATE_VNODE]}`
+ `_${helperNameMap[CREATE_VNODE]}`,
)
})
test('runtime directives', () => {
const { root, node } = parseWithElementTransform(
- ``
+ ``,
)
expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
expect(root.directives).toContain(`foo`)
@@ -676,7 +676,7 @@ describe('compiler: element transform', () => {
elements: [
{
type: NodeTypes.JS_ARRAY_EXPRESSION,
- elements: [`_directive_foo`]
+ elements: [`_directive_foo`],
},
{
type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -685,9 +685,9 @@ describe('compiler: element transform', () => {
// exp
{
type: NodeTypes.SIMPLE_EXPRESSION,
- content: `x`
- }
- ]
+ content: `x`,
+ },
+ ],
},
{
type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -697,13 +697,13 @@ describe('compiler: element transform', () => {
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `y`,
- isStatic: false
+ isStatic: false,
},
// arg
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `arg`,
- isStatic: false
+ isStatic: false,
},
// modifiers
{
@@ -714,33 +714,33 @@ describe('compiler: element transform', () => {
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `mod`,
- isStatic: true
+ isStatic: true,
},
value: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `true`,
- isStatic: false
- }
+ isStatic: false,
+ },
},
{
type: NodeTypes.JS_PROPERTY,
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `mad`,
- isStatic: true
+ isStatic: true,
},
value: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `true`,
- isStatic: false
- }
- }
- ]
- }
- ]
- }
- ]
- }
+ isStatic: false,
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
})
})
@@ -749,9 +749,9 @@ describe('compiler: element transform', () => {
``,
{
directiveTransforms: {
- on: transformOn
- }
- }
+ on: transformOn,
+ },
+ },
)
expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -761,7 +761,7 @@ describe('compiler: element transform', () => {
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `onClick`,
- isStatic: true
+ isStatic: true,
},
value: {
type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -769,17 +769,17 @@ describe('compiler: element transform', () => {
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `a`,
- isStatic: false
+ isStatic: false,
},
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `b`,
- isStatic: false
- }
- ]
- }
- }
- ]
+ isStatic: false,
+ },
+ ],
+ },
+ },
+ ],
})
})
@@ -789,9 +789,9 @@ describe('compiler: element transform', () => {
{
nodeTransforms: [transformStyle, transformElement],
directiveTransforms: {
- bind: transformBind
- }
- }
+ bind: transformBind,
+ },
+ },
)
expect(root.helpers).toContain(NORMALIZE_STYLE)
expect(node.props).toMatchObject({
@@ -802,7 +802,7 @@ describe('compiler: element transform', () => {
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `style`,
- isStatic: true
+ isStatic: true,
},
value: {
type: NodeTypes.JS_CALL_EXPRESSION,
@@ -814,19 +814,19 @@ describe('compiler: element transform', () => {
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{"color":"green"}`,
- isStatic: false
+ isStatic: false,
},
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ color: 'red' }`,
- isStatic: false
- }
- ]
- }
- ]
- }
- }
- ]
+ isStatic: false,
+ },
+ ],
+ },
+ ],
+ },
+ },
+ ],
})
})
@@ -836,10 +836,10 @@ describe('compiler: element transform', () => {
{
nodeTransforms: [transformExpression, transformStyle, transformElement],
directiveTransforms: {
- bind: transformBind
+ bind: transformBind,
},
- prefixIdentifiers: true
- }
+ prefixIdentifiers: true,
+ },
)
expect(root.helpers).toContain(NORMALIZE_STYLE)
expect(node.props).toMatchObject({
@@ -850,14 +850,14 @@ describe('compiler: element transform', () => {
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `style`,
- isStatic: true
+ isStatic: true,
},
value: {
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: NORMALIZE_STYLE
- }
- }
- ]
+ callee: NORMALIZE_STYLE,
+ },
+ },
+ ],
})
})
@@ -867,10 +867,10 @@ describe('compiler: element transform', () => {
{
nodeTransforms: [transformExpression, transformStyle, transformElement],
directiveTransforms: {
- bind: transformBind
+ bind: transformBind,
},
- prefixIdentifiers: true
- }
+ prefixIdentifiers: true,
+ },
)
expect(root.helpers).toContain(NORMALIZE_STYLE)
expect(node.props).toMatchObject({
@@ -881,14 +881,14 @@ describe('compiler: element transform', () => {
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `style`,
- isStatic: true
+ isStatic: true,
},
value: {
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: NORMALIZE_STYLE
- }
- }
- ]
+ callee: NORMALIZE_STYLE,
+ },
+ },
+ ],
})
})
@@ -897,9 +897,9 @@ describe('compiler: element transform', () => {
``,
{
directiveTransforms: {
- bind: transformBind
- }
- }
+ bind: transformBind,
+ },
+ },
)
expect(root.helpers).toContain(NORMALIZE_CLASS)
expect(node.props).toMatchObject({
@@ -910,7 +910,7 @@ describe('compiler: element transform', () => {
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `class`,
- isStatic: true
+ isStatic: true,
},
value: {
type: NodeTypes.JS_CALL_EXPRESSION,
@@ -922,19 +922,19 @@ describe('compiler: element transform', () => {
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `foo`,
- isStatic: true
+ isStatic: true,
},
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ bar: isBar }`,
- isStatic: false
- }
- ]
- }
- ]
- }
- }
- ]
+ isStatic: false,
+ },
+ ],
+ },
+ ],
+ },
+ },
+ ],
})
})
@@ -969,10 +969,10 @@ describe('compiler: element transform', () => {
test('CLASS + STYLE + PROPS', () => {
const { node } = parseWithBind(
- ``
+ ``,
)
expect(node.patchFlag).toBe(
- genFlagText([PatchFlags.CLASS, PatchFlags.STYLE, PatchFlags.PROPS])
+ genFlagText([PatchFlags.CLASS, PatchFlags.STYLE, PatchFlags.PROPS]),
)
expect(node.dynamicProps).toBe(`["foo", "baz"]`)
})
@@ -980,7 +980,7 @@ describe('compiler: element transform', () => {
// should treat `class` and `style` as PROPS
test('PROPS on component', () => {
const { node } = parseWithBind(
- `
`,
+ ),
).toMatchSnapshot()
})
@@ -49,8 +49,8 @@ describe('compiler: v-memo transform', () => {
compile(
`
foobar
- `
- )
+ `,
+ ),
).toMatchSnapshot()
})
})
diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
index ef3485fba..5d94aca27 100644
--- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
@@ -1,17 +1,17 @@
import {
+ BindingTypes,
+ type CompilerOptions,
+ type ComponentNode,
+ type ElementNode,
+ type ForNode,
+ NORMALIZE_PROPS,
+ NodeTypes,
+ type ObjectExpression,
+ type PlainElementNode,
+ type VNodeCall,
+ generate,
baseParse as parse,
transform,
- generate,
- ElementNode,
- ObjectExpression,
- CompilerOptions,
- ForNode,
- PlainElementNode,
- ComponentNode,
- NodeTypes,
- VNodeCall,
- NORMALIZE_PROPS,
- BindingTypes
} from '../../src'
import { ErrorCodes } from '../../src/errors'
import { transformModel } from '../../src/transforms/vModel'
@@ -19,7 +19,7 @@ import { transformElement } from '../../src/transforms/transformElement'
import { transformExpression } from '../../src/transforms/transformExpression'
import { transformFor } from '../../src/transforms/vFor'
import { trackSlotScopes } from '../../src/transforms/vSlot'
-import { CallExpression } from '@babel/types'
+import type { CallExpression } from '@babel/types'
function parseWithVModel(template: string, options: CompilerOptions = {}) {
const ast = parse(template)
@@ -29,13 +29,13 @@ function parseWithVModel(template: string, options: CompilerOptions = {}) {
transformFor,
transformExpression,
transformElement,
- trackSlotScopes
+ trackSlotScopes,
],
directiveTransforms: {
...options.directiveTransforms,
- model: transformModel
+ model: transformModel,
},
- ...options
+ ...options,
})
return ast
@@ -51,29 +51,29 @@ describe('compiler: transform v-model', () => {
expect(props[0]).toMatchObject({
key: {
content: 'modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
content: 'model',
- isStatic: false
- }
+ isStatic: false,
+ },
})
expect(props[1]).toMatchObject({
key: {
content: 'onUpdate:modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
children: [
'$event => ((',
{
content: 'model',
- isStatic: false
+ isStatic: false,
},
- ') = $event)'
- ]
- }
+ ') = $event)',
+ ],
+ },
})
expect(generate(root).code).toMatchSnapshot()
@@ -81,7 +81,7 @@ describe('compiler: transform v-model', () => {
test('simple expression (with prefixIdentifiers)', () => {
const root = parseWithVModel('', {
- prefixIdentifiers: true
+ prefixIdentifiers: true,
})
const node = root.children[0] as ElementNode
const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
@@ -90,29 +90,29 @@ describe('compiler: transform v-model', () => {
expect(props[0]).toMatchObject({
key: {
content: 'modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
content: '_ctx.model',
- isStatic: false
- }
+ isStatic: false,
+ },
})
expect(props[1]).toMatchObject({
key: {
content: 'onUpdate:modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
children: [
'$event => ((',
{
content: '_ctx.model',
- isStatic: false
+ isStatic: false,
},
- ') = $event)'
- ]
- }
+ ') = $event)',
+ ],
+ },
})
expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
@@ -128,29 +128,29 @@ describe('compiler: transform v-model', () => {
expect(props[0]).toMatchObject({
key: {
content: 'modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
content: '\n model\n.\nfoo \n',
- isStatic: false
- }
+ isStatic: false,
+ },
})
expect(props[1]).toMatchObject({
key: {
content: 'onUpdate:modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
children: [
'$event => ((',
{
content: '\n model\n.\nfoo \n',
- isStatic: false
+ isStatic: false,
},
- ') = $event)'
- ]
- }
+ ') = $event)',
+ ],
+ },
})
expect(generate(root).code).toMatchSnapshot()
@@ -165,29 +165,29 @@ describe('compiler: transform v-model', () => {
expect(props[0]).toMatchObject({
key: {
content: 'modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
content: 'model[index]',
- isStatic: false
- }
+ isStatic: false,
+ },
})
expect(props[1]).toMatchObject({
key: {
content: 'onUpdate:modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
children: [
'$event => ((',
{
content: 'model[index]',
- isStatic: false
+ isStatic: false,
},
- ') = $event)'
- ]
- }
+ ') = $event)',
+ ],
+ },
})
expect(generate(root).code).toMatchSnapshot()
@@ -195,7 +195,7 @@ describe('compiler: transform v-model', () => {
test('compound expression (with prefixIdentifiers)', () => {
const root = parseWithVModel('', {
- prefixIdentifiers: true
+ prefixIdentifiers: true,
})
const node = root.children[0] as ElementNode
const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
@@ -204,28 +204,28 @@ describe('compiler: transform v-model', () => {
expect(props[0]).toMatchObject({
key: {
content: 'modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
children: [
{
content: '_ctx.model',
- isStatic: false
+ isStatic: false,
},
'[',
{
content: '_ctx.index',
- isStatic: false
+ isStatic: false,
},
- ']'
- ]
- }
+ ']',
+ ],
+ },
})
expect(props[1]).toMatchObject({
key: {
content: 'onUpdate:modelValue',
- isStatic: true
+ isStatic: true,
},
value: {
children: [
@@ -234,19 +234,19 @@ describe('compiler: transform v-model', () => {
children: [
{
content: '_ctx.model',
- isStatic: false
+ isStatic: false,
},
'[',
{
content: '_ctx.index',
- isStatic: false
+ isStatic: false,
},
- ']'
- ]
+ ']',
+ ],
},
- ') = $event)'
- ]
- }
+ ') = $event)',
+ ],
+ },
})
expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
@@ -260,29 +260,29 @@ describe('compiler: transform v-model', () => {
expect(props[0]).toMatchObject({
key: {
content: 'foo-value',
- isStatic: true
+ isStatic: true,
},
value: {
content: 'model',
- isStatic: false
- }
+ isStatic: false,
+ },
})
expect(props[1]).toMatchObject({
key: {
content: 'onUpdate:fooValue',
- isStatic: true
+ isStatic: true,
},
value: {
children: [
'$event => ((',
{
content: 'model',
- isStatic: false
+ isStatic: false,
},
- ') = $event)'
- ]
- }
+ ') = $event)',
+ ],
+ },
})
expect(generate(root).code).toMatchSnapshot()
@@ -304,12 +304,12 @@ describe('compiler: transform v-model', () => {
{
key: {
content: 'value',
- isStatic: false
+ isStatic: false,
},
value: {
content: 'model',
- isStatic: false
- }
+ isStatic: false,
+ },
},
{
key: {
@@ -317,24 +317,24 @@ describe('compiler: transform v-model', () => {
'"onUpdate:" + ',
{
content: 'value',
- isStatic: false
- }
- ]
+ isStatic: false,
+ },
+ ],
},
value: {
children: [
'$event => ((',
{
content: 'model',
- isStatic: false
+ isStatic: false,
},
- ') = $event)'
- ]
- }
- }
- ]
- }
- ]
+ ') = $event)',
+ ],
+ },
+ },
+ ],
+ },
+ ],
})
expect(generate(root).code).toMatchSnapshot()
@@ -342,7 +342,7 @@ describe('compiler: transform v-model', () => {
test('with dynamic argument (with prefixIdentifiers)', () => {
const root = parseWithVModel('', {
- prefixIdentifiers: true
+ prefixIdentifiers: true,
})
const node = root.children[0] as ElementNode
const props = (node.codegenNode as VNodeCall)
@@ -358,12 +358,12 @@ describe('compiler: transform v-model', () => {
{
key: {
content: '_ctx.value',
- isStatic: false
+ isStatic: false,
},
value: {
content: '_ctx.model',
- isStatic: false
- }
+ isStatic: false,
+ },
},
{
key: {
@@ -371,24 +371,24 @@ describe('compiler: transform v-model', () => {
'"onUpdate:" + ',
{
content: '_ctx.value',
- isStatic: false
- }
- ]
+ isStatic: false,
+ },
+ ],
},
value: {
children: [
'$event => ((',
{
content: '_ctx.model',
- isStatic: false
+ isStatic: false,
},
- ') = $event)'
- ]
- }
- }
- ]
- }
- ]
+ ') = $event)',
+ ],
+ },
+ },
+ ],
+ },
+ ],
})
expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
@@ -397,7 +397,7 @@ describe('compiler: transform v-model', () => {
test('should cache update handler w/ cacheHandlers: true', () => {
const root = parseWithVModel('', {
prefixIdentifiers: true,
- cacheHandlers: true
+ cacheHandlers: true,
})
expect(root.cached).toBe(1)
const codegen = (root.children[0] as PlainElementNode)
@@ -405,7 +405,7 @@ describe('compiler: transform v-model', () => {
// should not list cached prop in dynamicProps
expect(codegen.dynamicProps).toBe(`["modelValue"]`)
expect((codegen.props as ObjectExpression).properties[1].value.type).toBe(
- NodeTypes.JS_CACHE_EXPRESSION
+ NodeTypes.JS_CACHE_EXPRESSION,
)
})
@@ -414,8 +414,8 @@ describe('compiler: transform v-model', () => {
'',
{
prefixIdentifiers: true,
- cacheHandlers: true
- }
+ cacheHandlers: true,
+ },
)
expect(root.cached).toBe(0)
const codegen = (
@@ -423,14 +423,14 @@ describe('compiler: transform v-model', () => {
).codegenNode as VNodeCall
expect(codegen.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`)
expect(
- (codegen.props as ObjectExpression).properties[1].value.type
+ (codegen.props as ObjectExpression).properties[1].value.type,
).not.toBe(NodeTypes.JS_CACHE_EXPRESSION)
})
test('should not cache update handler if it inside v-once', () => {
const root = parseWithVModel('', {
prefixIdentifiers: true,
- cacheHandlers: true
+ cacheHandlers: true,
})
expect(root.cached).not.toBe(2)
expect(root.cached).toBe(1)
@@ -440,8 +440,8 @@ describe('compiler: transform v-model', () => {
const root = parseWithVModel(
'{{ foo
',
+ errors: [
+ {
+ type: ErrorCodes.X_MISSING_INTERPOLATION_END,
+ loc: { offset: 5, line: 1, column: 6 },
+ },
+ {
+ type: ErrorCodes.X_MISSING_END_TAG,
+ loc: { offset: 0, line: 1, column: 1 },
+ },
+ ],
},
{
code: '{{}}',
- errors: []
- }
+ errors: [],
+ },
],
X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END: [
{
@@ -3048,10 +3214,10 @@ foo
errors: [
{
type: ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END,
- loc: { offset: 15, line: 1, column: 16 }
- }
- ]
- }
+ loc: { offset: 15, line: 1, column: 16 },
+ },
+ ],
+ },
],
X_DIRECTIVE_SHORTHAND_NO_ARGUMENT: [
{
@@ -3059,38 +3225,38 @@ foo
warnings: [
{
type: ErrorCodes.X_DIRECTIVE_SHORTHAND_NO_ARGUMENT,
- loc: { offset: 5, line: 1, column: 6 }
- }
- ]
+ loc: { offset: 5, line: 1, column: 6 },
+ },
+ ],
},
{
code: ``,
warnings: [
{
type: ErrorCodes.X_DIRECTIVE_SHORTHAND_NO_ARGUMENT,
- loc: { offset: 5, line: 1, column: 6 }
- }
- ]
+ loc: { offset: 5, line: 1, column: 6 },
+ },
+ ],
},
{
code: ``,
warnings: [
{
type: ErrorCodes.X_DIRECTIVE_SHORTHAND_NO_ARGUMENT,
- loc: { offset: 5, line: 1, column: 6 }
- }
- ]
+ loc: { offset: 5, line: 1, column: 6 },
+ },
+ ],
},
{
code: ``,
warnings: [
{
type: ErrorCodes.X_DIRECTIVE_SHORTHAND_NO_ARGUMENT,
- loc: { offset: 5, line: 1, column: 6 }
- }
- ]
- }
- ]
+ loc: { offset: 5, line: 1, column: 6 },
+ },
+ ],
+ },
+ ],
}
for (const key of Object.keys(patterns)) {
@@ -3101,49 +3267,34 @@ foo
test(
code.replace(
/[\r\n]/g,
- c => `\\x0${c.codePointAt(0)!.toString(16)};`
+ c => `\\x0${c.codePointAt(0)!.toString(16)};`,
),
() => {
const errorSpy = vi.fn()
const warnSpy = vi.fn()
const ast = baseParse(code, {
- getNamespace: (tag, parent) => {
- const ns = parent ? parent.ns : Namespaces.HTML
- if (ns === Namespaces.HTML) {
- if (tag === 'svg') {
- return (Namespaces.HTML + 1) as any
- }
- }
- return ns
- },
- getTextMode: ({ tag }) => {
- if (tag === 'textarea') {
- return TextModes.RCDATA
- }
- if (tag === 'script') {
- return TextModes.RAWTEXT
- }
- return TextModes.DATA
- },
+ parseMode: 'html',
+ getNamespace: tag =>
+ tag === 'svg' ? Namespaces.SVG : Namespaces.HTML,
...options,
onError: errorSpy,
- onWarn: warnSpy
+ onWarn: warnSpy,
})
expect(
errorSpy.mock.calls.map(([err]) => ({
type: err.code,
- loc: err.loc.start
- }))
+ loc: err.loc.start,
+ })),
).toMatchObject(errors)
expect(
warnSpy.mock.calls.map(([err]) => ({
type: err.code,
- loc: err.loc.start
- }))
+ loc: err.loc.start,
+ })),
).toMatchObject(warnings)
expect(ast).toMatchSnapshot()
- }
+ },
)
}
})
diff --git a/packages/compiler-core/__tests__/scopeId.spec.ts b/packages/compiler-core/__tests__/scopeId.spec.ts
index 5f7ea0d2e..c7a21df7a 100644
--- a/packages/compiler-core/__tests__/scopeId.spec.ts
+++ b/packages/compiler-core/__tests__/scopeId.spec.ts
@@ -1,5 +1,5 @@
import { baseCompile } from '../src/compile'
-import { PUSH_SCOPE_ID, POP_SCOPE_ID } from '../src/runtimeHelpers'
+import { POP_SCOPE_ID, PUSH_SCOPE_ID } from '../src/runtimeHelpers'
import { PatchFlags } from '@vue/shared'
import { genFlagText } from './testUtils'
@@ -18,7 +18,7 @@ describe('scopeId compiler support', () => {
test('should wrap default slot', () => {
const { code } = baseCompile(`hello
`
+ `hello
`,
)
expect(root.hoists).toMatchObject([
{
@@ -83,15 +83,15 @@ describe('compiler: hoistStatic transform', () => {
props: createObjectMatcher({ class: 'inline' }),
children: {
type: NodeTypes.TEXT,
- content: `hello`
- }
+ content: `hello`,
+ },
},
- hoistedChildrenArrayMatcher()
+ hoistedChildrenArrayMatcher(),
])
expect(root.codegenNode).toMatchObject({
tag: `"div"`,
props: undefined,
- children: { content: `_hoisted_2` }
+ children: { content: `_hoisted_2` },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -105,13 +105,13 @@ describe('compiler: hoistStatic transform', () => {
props: undefined,
children: [
{ type: NodeTypes.ELEMENT, tag: `span` },
- { type: NodeTypes.ELEMENT, tag: `span` }
- ]
+ { type: NodeTypes.ELEMENT, tag: `span` },
+ ],
},
- hoistedChildrenArrayMatcher()
+ hoistedChildrenArrayMatcher(),
])
expect((root.codegenNode as VNodeCall).children).toMatchObject({
- content: '_hoisted_2'
+ content: '_hoisted_2',
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -123,12 +123,12 @@ describe('compiler: hoistStatic transform', () => {
type: NodeTypes.VNODE_CALL,
tag: `"div"`,
props: undefined,
- children: [{ type: NodeTypes.COMMENT, content: `comment` }]
+ children: [{ type: NodeTypes.COMMENT, content: `comment` }],
},
- hoistedChildrenArrayMatcher()
+ hoistedChildrenArrayMatcher(),
])
expect((root.codegenNode as VNodeCall).children).toMatchObject({
- content: `_hoisted_2`
+ content: `_hoisted_2`,
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -138,16 +138,16 @@ describe('compiler: hoistStatic transform', () => {
expect(root.hoists).toMatchObject([
{
type: NodeTypes.VNODE_CALL,
- tag: `"span"`
+ tag: `"span"`,
},
{
type: NodeTypes.VNODE_CALL,
- tag: `"div"`
+ tag: `"div"`,
},
- hoistedChildrenArrayMatcher(1, 2)
+ hoistedChildrenArrayMatcher(1, 2),
])
expect((root.codegenNode as VNodeCall).children).toMatchObject({
- content: '_hoisted_3'
+ content: '_hoisted_3',
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -160,9 +160,9 @@ describe('compiler: hoistStatic transform', () => {
type: NodeTypes.ELEMENT,
codegenNode: {
type: NodeTypes.VNODE_CALL,
- tag: `_component_Comp`
- }
- }
+ tag: `_component_Comp`,
+ },
+ },
])
expect(generate(root).code).toMatchSnapshot()
})
@@ -177,17 +177,17 @@ describe('compiler: hoistStatic transform', () => {
type: NodeTypes.VNODE_CALL,
tag: `"div"`,
props: createObjectMatcher({
- id: `[foo]`
+ id: `[foo]`,
}),
children: undefined,
patchFlag: genFlagText(PatchFlags.PROPS),
dynamicProps: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `_hoisted_1`,
- isStatic: false
- }
- }
- }
+ isStatic: false,
+ },
+ },
+ },
])
expect(generate(root).code).toMatchSnapshot()
})
@@ -199,14 +199,14 @@ describe('compiler: hoistStatic transform', () => {
{
type: NodeTypes.VNODE_CALL,
tag: `"div"`,
- props: createObjectMatcher({ key: 'foo' })
+ props: createObjectMatcher({ key: 'foo' }),
},
- hoistedChildrenArrayMatcher()
+ hoistedChildrenArrayMatcher(),
])
expect(root.codegenNode).toMatchObject({
tag: `"div"`,
props: undefined,
- children: { content: `_hoisted_2` }
+ children: { content: `_hoisted_2` },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -221,10 +221,10 @@ describe('compiler: hoistStatic transform', () => {
type: NodeTypes.VNODE_CALL,
tag: `"div"`,
props: createObjectMatcher({
- key: `[foo]`
- })
- }
- }
+ key: `[foo]`,
+ }),
+ },
+ },
])
expect(generate(root).code).toMatchSnapshot()
})
@@ -239,12 +239,12 @@ describe('compiler: hoistStatic transform', () => {
type: NodeTypes.VNODE_CALL,
tag: `"div"`,
props: createObjectMatcher({
- ref: `[foo]`
+ ref: `[foo]`,
}),
children: undefined,
- patchFlag: genFlagText(PatchFlags.NEED_PATCH)
- }
- }
+ patchFlag: genFlagText(PatchFlags.NEED_PATCH),
+ },
+ },
])
expect(generate(root).code).toMatchSnapshot()
})
@@ -260,22 +260,22 @@ describe('compiler: hoistStatic transform', () => {
tag: `"div"`,
props: {
type: NodeTypes.SIMPLE_EXPRESSION,
- content: `_hoisted_1`
+ content: `_hoisted_1`,
},
children: undefined,
patchFlag: genFlagText(PatchFlags.NEED_PATCH),
directives: {
- type: NodeTypes.JS_ARRAY_EXPRESSION
- }
- }
- }
+ type: NodeTypes.JS_ARRAY_EXPRESSION,
+ },
+ },
+ },
])
expect(generate(root).code).toMatchSnapshot()
})
test('hoist static props for elements with dynamic text children', () => {
const root = transformWithHoist(
- `{{ hello }}
{{ hello }}
foo {{ 1 }} {{ true }}
`,
{
- prefixIdentifiers: true
- }
+ prefixIdentifiers: true,
+ },
)
expect(root.hoists).toMatchObject([
{
@@ -391,18 +391,18 @@ describe('compiler: hoistStatic transform', () => {
tag: `"span"`,
props: undefined,
children: {
- type: NodeTypes.COMPOUND_EXPRESSION
- }
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ },
},
- hoistedChildrenArrayMatcher()
+ hoistedChildrenArrayMatcher(),
])
expect(root.codegenNode).toMatchObject({
tag: `"div"`,
props: undefined,
children: {
type: NodeTypes.SIMPLE_EXPRESSION,
- content: `_hoisted_2`
- }
+ content: `_hoisted_2`,
+ },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -411,8 +411,8 @@ describe('compiler: hoistStatic transform', () => {
const root = transformWithHoist(
`{{ 1 }}
`,
{
- prefixIdentifiers: true
- }
+ prefixIdentifiers: true,
+ },
)
expect(root.hoists).toMatchObject([
@@ -425,19 +425,19 @@ describe('compiler: hoistStatic transform', () => {
content: {
content: `1`,
isStatic: false,
- constType: ConstantTypes.CAN_STRINGIFY
- }
- }
+ constType: ConstantTypes.CAN_STRINGIFY,
+ },
+ },
},
- hoistedChildrenArrayMatcher()
+ hoistedChildrenArrayMatcher(),
])
expect(root.codegenNode).toMatchObject({
tag: `"div"`,
props: undefined,
children: {
type: NodeTypes.SIMPLE_EXPRESSION,
- content: `_hoisted_2`
- }
+ content: `_hoisted_2`,
+ },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -446,8 +446,8 @@ describe('compiler: hoistStatic transform', () => {
const root = transformWithHoist(
`{{ bar }}
`,
{
- prefixIdentifiers: true
- }
+ prefixIdentifiers: true,
+ },
)
expect(root.hoists).toMatchObject([
@@ -458,7 +458,7 @@ describe('compiler: hoistStatic transform', () => {
key: {
content: `class`,
isStatic: true,
- constType: ConstantTypes.CAN_STRINGIFY
+ constType: ConstantTypes.CAN_STRINGIFY,
},
value: {
type: NodeTypes.JS_CALL_EXPRESSION,
@@ -467,13 +467,13 @@ describe('compiler: hoistStatic transform', () => {
{
content: `{ foo: true }`,
isStatic: false,
- constType: ConstantTypes.CAN_STRINGIFY
- }
- ]
- }
- }
- ]
- }
+ constType: ConstantTypes.CAN_STRINGIFY,
+ },
+ ],
+ },
+ },
+ ],
+ },
])
expect(root.codegenNode).toMatchObject({
tag: `"div"`,
@@ -486,20 +486,20 @@ describe('compiler: hoistStatic transform', () => {
tag: `"span"`,
props: {
type: NodeTypes.SIMPLE_EXPRESSION,
- content: `_hoisted_1`
+ content: `_hoisted_1`,
},
children: {
type: NodeTypes.INTERPOLATION,
content: {
content: `_ctx.bar`,
isStatic: false,
- constType: ConstantTypes.NOT_CONSTANT
- }
+ constType: ConstantTypes.NOT_CONSTANT,
+ },
},
- patchFlag: `1 /* TEXT */`
- }
- }
- ]
+ patchFlag: `1 /* TEXT */`,
+ },
+ },
+ ],
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -508,8 +508,8 @@ describe('compiler: hoistStatic transform', () => {
const root = transformWithHoist(
`{{ o }}
{{ o + 'foo' }}
`
+ `
`,
)
expect(root.hoists.length).toBe(0)
expect(generate(root).code).toMatchSnapshot()
@@ -588,7 +588,7 @@ describe('compiler: hoistStatic transform', () => {
test('should NOT hoist SVG with directives', () => {
const root = transformWithHoist(
- ``
+ ``,
)
expect(root.hoists.length).toBe(2)
expect(generate(root).code).toMatchSnapshot()
@@ -596,13 +596,13 @@ describe('compiler: hoistStatic transform', () => {
test('clone hoisted array children in HMR mode', () => {
const root = transformWithHoist(`
`, {
- hmr: true
+ hmr: true,
})
expect(root.hoists.length).toBe(2)
expect(root.codegenNode).toMatchObject({
children: {
- content: '[..._hoisted_2]'
- }
+ content: '[..._hoisted_2]',
+ },
})
})
})
diff --git a/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts b/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts
index 96a60bd1d..fa711051c 100644
--- a/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts
@@ -1,9 +1,9 @@
import {
+ type ElementNode,
+ type VNodeCall,
+ noopDirectiveTransform,
baseParse as parse,
transform,
- ElementNode,
- noopDirectiveTransform,
- VNodeCall
} from '../../src'
import { transformElement } from '../../src/transforms/transformElement'
@@ -13,8 +13,8 @@ describe('compiler: noop directive transform', () => {
transform(ast, {
nodeTransforms: [transformElement],
directiveTransforms: {
- noop: noopDirectiveTransform
- }
+ noop: noopDirectiveTransform,
+ },
})
const node = ast.children[0] as ElementNode
// As v-noop adds no properties the codegen should be identical to
diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 678d01cbc..5d3f92ced 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -1,36 +1,36 @@
import {
- CompilerOptions,
+ BindingTypes,
+ type CompilerOptions,
+ ErrorCodes,
+ type NodeTransform,
+ baseCompile,
baseParse as parse,
transform,
- ErrorCodes,
- BindingTypes,
- NodeTransform,
transformExpression,
- baseCompile
} from '../../src'
import {
- RESOLVE_COMPONENT,
+ BASE_TRANSITION,
CREATE_VNODE,
+ GUARD_REACTIVE_PROPS,
+ KEEP_ALIVE,
MERGE_PROPS,
+ NORMALIZE_CLASS,
+ NORMALIZE_PROPS,
+ NORMALIZE_STYLE,
+ RESOLVE_COMPONENT,
RESOLVE_DIRECTIVE,
- TO_HANDLERS,
- helperNameMap,
- TELEPORT,
RESOLVE_DYNAMIC_COMPONENT,
SUSPENSE,
- KEEP_ALIVE,
- BASE_TRANSITION,
- NORMALIZE_CLASS,
- NORMALIZE_STYLE,
- NORMALIZE_PROPS,
- GUARD_REACTIVE_PROPS
+ TELEPORT,
+ TO_HANDLERS,
+ helperNameMap,
} from '../../src/runtimeHelpers'
import {
+ type DirectiveNode,
NodeTypes,
+ type RootNode,
+ type VNodeCall,
createObjectProperty,
- DirectiveNode,
- RootNode,
- VNodeCall
} from '../../src/ast'
import { transformElement } from '../../src/transforms/transformElement'
import { transformStyle } from '../../../compiler-dom/src/transforms/transformStyle'
@@ -42,7 +42,7 @@ import { transformText } from '../../src/transforms/transformText'
function parseWithElementTransform(
template: string,
- options: CompilerOptions = {}
+ options: CompilerOptions = {},
): {
root: RootNode
node: VNodeCall
@@ -52,14 +52,14 @@ function parseWithElementTransform(
const ast = parse(`
${template}
`, options)
transform(ast, {
nodeTransforms: [transformElement, transformText],
- ...options
+ ...options,
})
const codegenNode = (ast as any).children[0].children[0]
.codegenNode as VNodeCall
expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
return {
root: ast,
- node: codegenNode
+ node: codegenNode,
}
}
@@ -68,8 +68,8 @@ function parseWithBind(template: string, options?: CompilerOptions) {
...options,
directiveTransforms: {
...options?.directiveTransforms,
- bind: transformBind
- }
+ bind: transformBind,
+ },
})
}
@@ -82,7 +82,7 @@ describe('compiler: element transform', () => {
test('resolve implicitly self-referencing component', () => {
const { root } = parseWithElementTransform(`<${tag}>
`)
transform(root, {
- nodeTransforms: [transformElement, transformText]
+ nodeTransforms: [transformElement, transformText],
})
expect(root.components.length).toBe(0)
expect(root.helpers).toContain(KEEP_ALIVE)
@@ -520,7 +520,7 @@ describe('compiler: element transform', () => {
// keep-alive should not compile content to slots
children: [{ type: NodeTypes.ELEMENT, tag: 'span' }],
// should get a dynamic slots flag to force updates
- patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS)
+ patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS),
})
}
@@ -531,7 +531,7 @@ describe('compiler: element transform', () => {
test('should handle `,
{
prefixIdentifiers: true,
- cacheHandlers: true
- }
+ cacheHandlers: true,
+ },
)
expect(root.cached).not.toBe(2)
expect(root.cached).toBe(1)
@@ -588,21 +588,21 @@ describe('compiler: transform v-on', () => {
test('inline function expression handler', () => {
const { root, node } = parseWithVOn(``, {
prefixIdentifiers: true,
- cacheHandlers: true
+ cacheHandlers: true,
})
expect(root.cached).toBe(1)
const vnodeCall = node.codegenNode as VNodeCall
// should not treat cached handler as dynamicProp, so no flags
expect(vnodeCall.patchFlag).toBeUndefined()
expect(
- (vnodeCall.props as ObjectExpression).properties[0].value
+ (vnodeCall.props as ObjectExpression).properties[0].value,
).toMatchObject({
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 0,
value: {
type: NodeTypes.COMPOUND_EXPRESSION,
- children: [`() => `, { content: `_ctx.foo` }, `()`]
- }
+ children: [`() => `, { content: `_ctx.foo` }, `()`],
+ },
})
})
@@ -611,22 +611,22 @@ describe('compiler: transform v-on', () => {
``,
{
prefixIdentifiers: true,
- cacheHandlers: true
- }
+ cacheHandlers: true,
+ },
)
expect(root.cached).toBe(1)
const vnodeCall = node.codegenNode as VNodeCall
// should not treat cached handler as dynamicProp, so no flags
expect(vnodeCall.patchFlag).toBeUndefined()
expect(
- (vnodeCall.props as ObjectExpression).properties[0].value
+ (vnodeCall.props as ObjectExpression).properties[0].value,
).toMatchObject({
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 0,
value: {
type: NodeTypes.COMPOUND_EXPRESSION,
- children: [`async () => await `, { content: `_ctx.foo` }, `()`]
- }
+ children: [`async () => await `, { content: `_ctx.foo` }, `()`],
+ },
})
})
@@ -635,15 +635,15 @@ describe('compiler: transform v-on', () => {
``,
{
prefixIdentifiers: true,
- cacheHandlers: true
- }
+ cacheHandlers: true,
+ },
)
expect(root.cached).toBe(1)
const vnodeCall = node.codegenNode as VNodeCall
// should not treat cached handler as dynamicProp, so no flags
expect(vnodeCall.patchFlag).toBeUndefined()
expect(
- (vnodeCall.props as ObjectExpression).properties[0].value
+ (vnodeCall.props as ObjectExpression).properties[0].value,
).toMatchObject({
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 0,
@@ -652,16 +652,16 @@ describe('compiler: transform v-on', () => {
children: [
`async function () { await `,
{ content: `_ctx.foo` },
- `() } `
- ]
- }
+ `() } `,
+ ],
+ },
})
})
test('inline statement handler', () => {
const { root, node } = parseWithVOn(``, {
prefixIdentifiers: true,
- cacheHandlers: true
+ cacheHandlers: true,
})
expect(root.cached).toBe(1)
expect(root.cached).toBe(1)
@@ -669,7 +669,7 @@ describe('compiler: transform v-on', () => {
// should not treat cached handler as dynamicProp, so no flags
expect(vnodeCall.patchFlag).toBeUndefined()
expect(
- (vnodeCall.props as ObjectExpression).properties[0].value
+ (vnodeCall.props as ObjectExpression).properties[0].value,
).toMatchObject({
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 0,
@@ -678,9 +678,9 @@ describe('compiler: transform v-on', () => {
children: [
`$event => (`,
{ children: [{ content: `_ctx.foo` }, `++`] },
- `)`
- ]
- }
+ `)`,
+ ],
+ },
})
})
})
diff --git a/packages/compiler-core/__tests__/transforms/vOnce.spec.ts b/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
index 553ac1dfa..30149c62d 100644
--- a/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
@@ -1,10 +1,10 @@
import {
- baseParse as parse,
- transform,
+ type CompilerOptions,
NodeTypes,
generate,
- CompilerOptions,
- getBaseTransformPreset
+ getBaseTransformPreset,
+ baseParse as parse,
+ transform,
} from '../../src'
import { RENDER_SLOT, SET_BLOCK_TRACKING } from '../../src/runtimeHelpers'
@@ -14,7 +14,7 @@ function transformWithOnce(template: string, options: CompilerOptions = {}) {
transform(ast, {
nodeTransforms,
directiveTransforms,
- ...options
+ ...options,
})
return ast
}
@@ -29,8 +29,8 @@ describe('compiler: v-once transform', () => {
index: 0,
value: {
type: NodeTypes.VNODE_CALL,
- tag: `"div"`
- }
+ tag: `"div"`,
+ },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -44,8 +44,8 @@ describe('compiler: v-once transform', () => {
index: 0,
value: {
type: NodeTypes.VNODE_CALL,
- tag: `"div"`
- }
+ tag: `"div"`,
+ },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -59,8 +59,8 @@ describe('compiler: v-once transform', () => {
index: 0,
value: {
type: NodeTypes.VNODE_CALL,
- tag: `_component_Comp`
- }
+ tag: `_component_Comp`,
+ },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -74,8 +74,8 @@ describe('compiler: v-once transform', () => {
index: 0,
value: {
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: RENDER_SLOT
- }
+ callee: RENDER_SLOT,
+ },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -90,7 +90,7 @@ describe('compiler: v-once transform', () => {
// cached nodes should be ignored by hoistStatic transform
test('with hoistStatic: true', () => {
const root = transformWithOnce(`
`, {
- hoistStatic: true
+ hoistStatic: true,
})
expect(root.cached).toBe(1)
expect(root.helpers).toContain(SET_BLOCK_TRACKING)
@@ -100,8 +100,8 @@ describe('compiler: v-once transform', () => {
index: 0,
value: {
type: NodeTypes.VNODE_CALL,
- tag: `"div"`
- }
+ tag: `"div"`,
+ },
})
expect(generate(root).code).toMatchSnapshot()
})
@@ -119,14 +119,14 @@ describe('compiler: v-once transform', () => {
type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
consequent: {
type: NodeTypes.VNODE_CALL,
- tag: `"div"`
+ tag: `"div"`,
},
alternate: {
type: NodeTypes.VNODE_CALL,
- tag: `"p"`
- }
- }
- }
+ tag: `"p"`,
+ },
+ },
+ },
})
})
@@ -138,8 +138,8 @@ describe('compiler: v-once transform', () => {
type: NodeTypes.FOR,
// should cache the entire v-for expression, not just a single branch
codegenNode: {
- type: NodeTypes.JS_CACHE_EXPRESSION
- }
+ type: NodeTypes.JS_CACHE_EXPRESSION,
+ },
})
})
})
diff --git a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
index bb3d9d2cf..aa7b600cc 100644
--- a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
@@ -1,18 +1,18 @@
import {
- CompilerOptions,
+ type CompilerOptions,
+ type ComponentNode,
+ type ElementNode,
+ ErrorCodes,
+ type ForNode,
+ NodeTypes,
+ type ObjectExpression,
+ type RenderSlotCall,
+ type SimpleExpressionNode,
+ type SlotsExpression,
+ type VNodeCall,
+ generate,
baseParse as parse,
transform,
- generate,
- ElementNode,
- NodeTypes,
- ErrorCodes,
- ForNode,
- ComponentNode,
- VNodeCall,
- SlotsExpression,
- ObjectExpression,
- SimpleExpressionNode,
- RenderSlotCall
} from '../../src'
import { transformElement } from '../../src/transforms/transformElement'
import { transformOn } from '../../src/transforms/vOn'
@@ -21,7 +21,7 @@ import { transformExpression } from '../../src/transforms/transformExpression'
import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
import {
trackSlotScopes,
- trackVForSlotScopes
+ trackVForSlotScopes,
} from '../../src/transforms/vSlot'
import { CREATE_SLOTS, RENDER_LIST } from '../../src/runtimeHelpers'
import { createObjectMatcher, genFlagText } from '../testUtils'
@@ -31,7 +31,7 @@ import { transformIf } from '../../src/transforms/vIf'
function parseWithSlots(template: string, options: CompilerOptions = {}) {
const ast = parse(template, {
- whitespace: options.whitespace
+ whitespace: options.whitespace,
})
transform(ast, {
nodeTransforms: [
@@ -42,13 +42,13 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
: []),
transformSlotOutlet,
transformElement,
- trackSlotScopes
+ trackSlotScopes,
],
directiveTransforms: {
on: transformOn,
- bind: transformBind
+ bind: transformBind,
},
- ...options
+ ...options,
})
return {
root: ast,
@@ -56,7 +56,7 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
ast.children[0].type === NodeTypes.ELEMENT
? ((ast.children[0].codegenNode as VNodeCall)
.children as SlotsExpression)
- : null
+ : null,
}
}
@@ -70,25 +70,25 @@ function createSlotMatcher(obj: Record
hey
hey
hey
`,
- true
+ true,
)
})
@@ -61,7 +61,7 @@ describe('Transition multi children warnings', () => {
`,
- true
+ true,
)
})
@@ -73,7 +73,7 @@ describe('Transition multi children warnings', () => {
`,
- true
+ true,
)
})
@@ -85,7 +85,7 @@ describe('Transition multi children warnings', () => {
hey
`,
- true
+ true,
)
})
@@ -96,7 +96,7 @@ describe('Transition multi children warnings', () => {
hey
`,
- false
+ false,
)
})
@@ -107,7 +107,7 @@ describe('Transition multi children warnings', () => {
hey
`,
- false
+ false,
)
})
@@ -120,7 +120,7 @@ describe('Transition multi children warnings', () => {
hey
`,
- false
+ false,
)
})
@@ -132,7 +132,7 @@ describe('Transition multi children warnings', () => {
hey
`,
- false
+ false,
)
})
})
@@ -143,7 +143,7 @@ test('inject persisted when child has v-show', () => {
hello
hello
hello
hello
${repeat(
``,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
${repeat(
``,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
`
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ )}`,
),
- '1'
- ]
+ '1',
+ ],
}, // the children array is hoisted as well
{
- type: NodeTypes.JS_ARRAY_EXPRESSION
- }
+ type: NodeTypes.JS_ARRAY_EXPRESSION,
+ },
])
})
@@ -63,8 +63,8 @@ describe('stringify static html', () => {
const { ast } = compileWithStringify(
`${repeat(
``,
- StringifyThresholds.NODE_COUNT
- )}
${repeat(
``,
- StringifyThresholds.NODE_COUNT
- )}
`
+ StringifyThresholds.NODE_COUNT,
+ )}`,
),
- '1'
- ]
+ '1',
+ ],
},
// the children array is hoisted as well
{
- type: NodeTypes.JS_ARRAY_EXPRESSION
- }
+ type: NodeTypes.JS_ARRAY_EXPRESSION,
+ },
])
})
@@ -92,8 +92,8 @@ describe('stringify static html', () => {
const { ast } = compileWithStringify(
`${repeat(
``,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
`
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ )}`,
)
// should have 6 hoisted nodes (including the entire array),
// but 2~5 should be null because they are merged into 1
@@ -105,19 +105,19 @@ describe('stringify static html', () => {
JSON.stringify(
repeat(
``,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ ),
),
- '5'
- ]
+ '5',
+ ],
},
null,
null,
null,
null,
{
- type: NodeTypes.JS_ARRAY_EXPRESSION
- }
+ type: NodeTypes.JS_ARRAY_EXPRESSION,
+ },
])
})
@@ -125,8 +125,8 @@ describe('stringify static html', () => {
const { ast } = compileWithStringify(
`${repeat(
`{{ 1 }} + {{ false }}`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
${repeat(
``,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
`
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ )}`,
),
- '1'
- ]
+ '1',
+ ],
},
{
- type: NodeTypes.JS_ARRAY_EXPRESSION
- }
+ type: NodeTypes.JS_ARRAY_EXPRESSION,
+ },
])
})
@@ -154,8 +154,8 @@ describe('stringify static html', () => {
`${repeat(
`{{ 1 }} + {{ '<' }}` +
`&`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
${repeat(
`1 + <` + `&`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
`
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ )}`,
),
- '1'
- ]
+ '1',
+ ],
},
{
- type: NodeTypes.JS_ARRAY_EXPRESSION
- }
+ type: NodeTypes.JS_ARRAY_EXPRESSION,
+ },
])
})
@@ -182,7 +182,7 @@ describe('stringify static html', () => {
const { ast, code } = compile(
`${repeat(
`foo`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
)}
${repeat(
`foo`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
)}
${repeat(
`foo`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
${repeat(
`foo`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
${repeat(
`foo`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
${repeat(
`foo`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
| foo |
${repeat(
``,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
`
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ )}`,
)
expect(ast.hoists[0]).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
@@ -399,11 +399,11 @@ describe('stringify static html', () => {
JSON.stringify(
`${repeat(
``,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}`
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ )}`,
),
- '5'
- ]
+ '5',
+ ],
})
})
@@ -412,8 +412,8 @@ describe('stringify static html', () => {
const { ast } = compileWithStringify(
`${repeat(
``,
- StringifyThresholds.NODE_COUNT
- )}`
+ StringifyThresholds.NODE_COUNT,
+ )}`,
)
expect(ast.hoists[0]).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
@@ -422,11 +422,11 @@ describe('stringify static html', () => {
JSON.stringify(
`${repeat(
``,
- StringifyThresholds.NODE_COUNT
- )}`
+ StringifyThresholds.NODE_COUNT,
+ )}`,
),
- '21'
- ]
+ '21',
+ ],
})
})
@@ -436,8 +436,8 @@ describe('stringify static html', () => {
const { ast } = compileWithStringify(
`${svg}${repeat(
repeated,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
`
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ )}`,
)
expect(ast.hoists[0]).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
@@ -446,11 +446,11 @@ describe('stringify static html', () => {
JSON.stringify(
`${svg}${repeat(
repeated,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}`
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ )}`,
),
- '1'
- ]
+ '1',
+ ],
})
})
diff --git a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
index 6eee9f8ba..51c40c45d 100644
--- a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
@@ -1,10 +1,10 @@
import {
+ type CompilerOptions,
+ type ElementNode,
+ NodeTypes,
+ type VNodeCall,
baseParse as parse,
transform,
- CompilerOptions,
- ElementNode,
- NodeTypes,
- VNodeCall
} from '@vue/compiler-core'
import { transformBind } from '../../../compiler-core/src/transforms/vBind'
import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
@@ -12,16 +12,16 @@ import { transformStyle } from '../../src/transforms/transformStyle'
function transformWithStyleTransform(
template: string,
- options: CompilerOptions = {}
+ options: CompilerOptions = {},
) {
const ast = parse(template)
transform(ast, {
nodeTransforms: [transformStyle],
- ...options
+ ...options,
})
return {
root: ast,
- node: ast.children[0] as ElementNode
+ node: ast.children[0] as ElementNode,
}
}
@@ -34,13 +34,13 @@ describe('compiler: style transform', () => {
arg: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `style`,
- isStatic: true
+ isStatic: true,
},
exp: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{"color":"red"}`,
- isStatic: false
- }
+ isStatic: false,
+ },
})
})
@@ -48,8 +48,8 @@ describe('compiler: style transform', () => {
const { node } = transformWithStyleTransform(``, {
nodeTransforms: [transformStyle, transformElement],
directiveTransforms: {
- bind: transformBind
- }
+ bind: transformBind,
+ },
})
expect((node.codegenNode as VNodeCall).props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -58,15 +58,15 @@ describe('compiler: style transform', () => {
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `style`,
- isStatic: true
+ isStatic: true,
},
value: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{"color":"red"}`,
- isStatic: false
- }
- }
- ]
+ isStatic: false,
+ },
+ },
+ ],
})
// should not cause the STYLE patchFlag to be attached
expect((node.codegenNode as VNodeCall).patchFlag).toBeUndefined()
diff --git a/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
index af3365239..a59a7a40a 100644
--- a/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
@@ -1,14 +1,14 @@
import {
+ type CompilerOptions,
+ type PlainElementNode,
baseParse as parse,
transform,
- PlainElementNode,
- CompilerOptions
} from '@vue/compiler-core'
import { transformVHtml } from '../../src/transforms/vHtml'
import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
import {
createObjectMatcher,
- genFlagText
+ genFlagText,
} from '../../../compiler-core/__tests__/testUtils'
import { PatchFlags } from '@vue/shared'
import { DOMErrorCodes } from '../../src/errors'
@@ -18,9 +18,9 @@ function transformWithVHtml(template: string, options: CompilerOptions = {}) {
transform(ast, {
nodeTransforms: [transformElement],
directiveTransforms: {
- html: transformVHtml
+ html: transformVHtml,
},
- ...options
+ ...options,
})
return ast
}
@@ -31,40 +31,40 @@ describe('compiler: v-html transform', () => {
expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
tag: `"div"`,
props: createObjectMatcher({
- innerHTML: `[test]`
+ innerHTML: `[test]`,
}),
children: undefined,
patchFlag: genFlagText(PatchFlags.PROPS),
- dynamicProps: `["innerHTML"]`
+ dynamicProps: `["innerHTML"]`,
})
})
it('should raise error and ignore children when v-html is present', () => {
const onError = vi.fn()
const ast = transformWithVHtml(`hello
`, {
- onError
+ onError,
})
expect(onError.mock.calls).toMatchObject([
- [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }]
+ [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }],
])
expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
tag: `"div"`,
props: createObjectMatcher({
- innerHTML: `[test]`
+ innerHTML: `[test]`,
}),
children: undefined, // <-- children should have been removed
patchFlag: genFlagText(PatchFlags.PROPS),
- dynamicProps: `["innerHTML"]`
+ dynamicProps: `["innerHTML"]`,
})
})
it('should raise error if has no expression', () => {
const onError = vi.fn()
transformWithVHtml(``, {
- onError
+ onError,
})
expect(onError.mock.calls).toMatchObject([
- [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }]
+ [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }],
])
})
})
diff --git a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
index a67ca5d69..02d188f01 100644
--- a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
@@ -1,8 +1,8 @@
import {
+ type CompilerOptions,
+ generate,
baseParse as parse,
transform,
- CompilerOptions,
- generate
} from '@vue/compiler-core'
import { transformModel } from '../../src/transforms/vModel'
import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
@@ -12,7 +12,7 @@ import {
V_MODEL_DYNAMIC,
V_MODEL_RADIO,
V_MODEL_SELECT,
- V_MODEL_TEXT
+ V_MODEL_TEXT,
} from '../../src/runtimeHelpers'
function transformWithModel(template: string, options: CompilerOptions = {}) {
@@ -20,9 +20,9 @@ function transformWithModel(template: string, options: CompilerOptions = {}) {
transform(ast, {
nodeTransforms: [transformElement],
directiveTransforms: {
- model: transformModel
+ model: transformModel,
},
- ...options
+ ...options,
})
return ast
}
@@ -70,7 +70,7 @@ describe('compiler: transform v-model', () => {
expect(generate(root).code).toMatchSnapshot()
const root2 = transformWithModel(
- ''
+ '',
)
expect(root2.helpers).toContain(V_MODEL_DYNAMIC)
expect(generate(root2).code).toMatchSnapshot()
@@ -98,8 +98,8 @@ describe('compiler: transform v-model', () => {
expect(onError).toHaveBeenCalledTimes(1)
expect(onError).toHaveBeenCalledWith(
expect.objectContaining({
- code: DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT
- })
+ code: DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT,
+ }),
)
})
@@ -110,8 +110,8 @@ describe('compiler: transform v-model', () => {
expect(onError).toHaveBeenCalledTimes(1)
expect(onError).toHaveBeenCalledWith(
expect.objectContaining({
- code: DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT
- })
+ code: DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
+ }),
)
})
@@ -119,7 +119,7 @@ describe('compiler: transform v-model', () => {
const onError = vi.fn()
const root = transformWithModel('hello
`, {
- onError
+ onError,
})
expect(onError.mock.calls).toMatchObject([
- [{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }]
+ [{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }],
])
expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
tag: `"div"`,
props: createObjectMatcher({
textContent: {
- arguments: [{ content: 'test' }]
- }
+ arguments: [{ content: 'test' }],
+ },
}),
children: undefined, // <-- children should have been removed
patchFlag: genFlagText(PatchFlags.PROPS),
- dynamicProps: `["textContent"]`
+ dynamicProps: `["textContent"]`,
})
})
it('should raise error if has no expression', () => {
const onError = vi.fn()
transformWithVText(``, {
- onError
+ onError,
})
expect(onError.mock.calls).toMatchObject([
- [{ code: DOMErrorCodes.X_V_TEXT_NO_EXPRESSION }]
+ [{ code: DOMErrorCodes.X_V_TEXT_NO_EXPRESSION }],
])
})
})
diff --git a/packages/compiler-dom/package.json b/packages/compiler-dom/package.json
index 7210a5665..71cdb0832 100644
--- a/packages/compiler-dom/package.json
+++ b/packages/compiler-dom/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/compiler-dom",
- "version": "3.3.11",
+ "version": "3.4.3",
"description": "@vue/compiler-dom",
"main": "index.js",
"module": "dist/compiler-dom.esm-bundler.js",
diff --git a/packages/compiler-dom/src/decodeHtml.ts b/packages/compiler-dom/src/decodeHtml.ts
deleted file mode 100644
index 68b0277a4..000000000
--- a/packages/compiler-dom/src/decodeHtml.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { ParserOptions } from '@vue/compiler-core'
-import namedCharacterReferences from './namedChars.json'
-
-// lazy compute this to make this file tree-shakable for browser
-let maxCRNameLength: number
-
-export const decodeHtml: ParserOptions['decodeEntities'] = (
- rawText,
- asAttr
-) => {
- let offset = 0
- const end = rawText.length
- let decodedText = ''
-
- function advance(length: number) {
- offset += length
- rawText = rawText.slice(length)
- }
-
- while (offset < end) {
- const head = /&(?:#x?)?/i.exec(rawText)
- if (!head || offset + head.index >= end) {
- const remaining = end - offset
- decodedText += rawText.slice(0, remaining)
- advance(remaining)
- break
- }
-
- // Advance to the "&".
- decodedText += rawText.slice(0, head.index)
- advance(head.index)
-
- if (head[0] === '&') {
- // Named character reference.
- let name = ''
- let value: string | undefined = undefined
- if (/[0-9a-z]/i.test(rawText[1])) {
- if (!maxCRNameLength) {
- maxCRNameLength = Object.keys(namedCharacterReferences).reduce(
- (max, name) => Math.max(max, name.length),
- 0
- )
- }
- for (let length = maxCRNameLength; !value && length > 0; --length) {
- name = rawText.slice(1, 1 + length)
- value = (namedCharacterReferences as Record{{ x }} {{ yy }} {{ x$y }}
-
- `)
- // x: used in interpolation
- // y: should not be matched by {{ yy }} or 'y' in binding exps
- // x$y: #4274 should escape special chars when creating Regex
- expect(content).toMatch(
- `return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`
- )
- assertCode(content)
- })
-
- // #4340 interpolations in template strings
- test('js template string interpolations', () => {
- const { content } = compile(`
-
-
- {{ \`\${VAR}VAR2\${VAR3}\` }}
-
- `)
- // VAR2 should not be matched
- expect(content).toMatch(
- `return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`
- )
- assertCode(content)
- })
-
- // edge case: last tag in template
- test('last tag', () => {
- const { content } = compile(`
-
-
- {{ x }} {{ yy }} {{ x$y }}
+
+ `)
+ // x: used in interpolation
+ // y: should not be matched by {{ yy }} or 'y' in binding exps
+ // x$y: #4274 should escape special chars when creating Regex
+ expect(content).toMatch(
+ `return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`,
+ )
+ assertCode(content)
+})
+
+// #4340 interpolations in template strings
+test('js template string interpolations', () => {
+ const { content } = compile(`
+
+
+ {{ \`\${VAR}VAR2\${VAR3}\` }}
+
+ `)
+ // VAR2 should not be matched
+ expect(content).toMatch(
+ `return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`,
+ )
+ assertCode(content)
+})
+
+// edge case: last tag in template
+test('last tag', () => {
+ const { content } = compile(`
+
+
+ {{ Foo.Bar.Baz }}
+
+ `)
+ expect(content).toMatch('return { get Foo() { return Foo } }')
+ assertCode(content)
+})
+
+test('spread operator', () => {
+ const { content } = compile(`
+
+
+
+
+ `)
+ expect(content).toMatch('return { get Foo() { return Foo } }')
+ assertCode(content)
+})
+
+test('property access (whitespace)', () => {
+ const { content } = compile(`
+
+
+ {{ Foo . Bar . Baz }}
+
+ `)
+ expect(content).toMatch('return { get Foo() { return Foo } }')
+ assertCode(content)
+})
+
+// #9974
+test('namespace / dot component usage', () => {
+ const { content } = compile(`
+
+
+ ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
foo: ['Number'],
- bar: ['String']
+ bar: ['String'],
})
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
@@ -568,7 +568,7 @@ describe('resolveType', () => {
'type X = { bar: string }; export { X as Y };' +
// verify that we can parse syntax that is only valid in d.ts
'export const baz: boolean',
- 'C:\\Test\\FolderB\\buz.ts': 'export type Z = { buz: string }'
+ 'C:\\Test\\FolderB\\buz.ts': 'export type Z = { buz: string }',
}
const { props, deps } = resolve(
`
@@ -579,32 +579,32 @@ describe('resolveType', () => {
`,
files,
{},
- 'C:\\Test\\FolderA\\Test.vue'
+ 'C:\\Test\\FolderA\\Test.vue',
)
expect(props).toStrictEqual({
foo: ['Number'],
bar: ['String'],
- buz: ['String']
+ buz: ['String'],
})
expect(deps && [...deps].map(normalize)).toStrictEqual(
- Object.keys(files).map(normalize)
+ Object.keys(files).map(normalize),
)
})
// #8244
test('utility type in external file', () => {
const files = {
- '/foo.ts': 'type A = { n?: number }; export type B = Required'
+ '/foo.ts': 'type A = { n?: number }; export type B = Required',
}
const { props } = resolve(
`
import { B } from './foo'
defineProps()
`,
- files
+ files,
)
expect(props).toStrictEqual({
- n: ['Number']
+ n: ['Number'],
})
})
@@ -613,7 +613,7 @@ describe('resolveType', () => {
'/foo.vue':
'',
'/bar.vue':
- ''
+ '',
}
const { props, deps } = resolve(
`
@@ -621,11 +621,11 @@ describe('resolveType', () => {
import { P as PP } from './bar.vue'
defineProps ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
foo: ['Number'],
- bar: ['String']
+ bar: ['String'],
})
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
@@ -635,18 +635,18 @@ describe('resolveType', () => {
'/foo.ts': `import type { P as PP } from './nested/bar.vue'
export type P = { foo: number } & PP`,
'/nested/bar.vue':
- ''
+ '',
}
const { props, deps } = resolve(
`
import { P } from './foo'
defineProps ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
foo: ['Number'],
- bar: ['String']
+ bar: ['String'],
})
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
@@ -654,17 +654,17 @@ describe('resolveType', () => {
test('relative (chained, re-export)', () => {
const files = {
'/foo.ts': `export { P as PP } from './bar'`,
- '/bar.ts': 'export type P = { bar: string }'
+ '/bar.ts': 'export type P = { bar: string }',
}
const { props, deps } = resolve(
`
import { PP as P } from './foo'
defineProps ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
- bar: ['String']
+ bar: ['String'],
})
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
@@ -672,17 +672,17 @@ describe('resolveType', () => {
test('relative (chained, export *)', () => {
const files = {
'/foo.ts': `export * from './bar'`,
- '/bar.ts': 'export type P = { bar: string }'
+ '/bar.ts': 'export type P = { bar: string }',
}
const { props, deps } = resolve(
`
import { P } from './foo'
defineProps ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
- bar: ['String']
+ bar: ['String'],
})
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
@@ -690,7 +690,7 @@ describe('resolveType', () => {
test('relative (default export)', () => {
const files = {
'/foo.ts': `export default interface P { foo: string }`,
- '/bar.ts': `type X = { bar: string }; export default X`
+ '/bar.ts': `type X = { bar: string }; export default X`,
}
const { props, deps } = resolve(
`
@@ -698,11 +698,11 @@ describe('resolveType', () => {
import X from './bar'
defineProps ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
foo: ['String'],
- bar: ['String']
+ bar: ['String'],
})
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
@@ -711,7 +711,7 @@ describe('resolveType', () => {
const files = {
'/bar.ts': `export { default } from './foo'`,
'/foo.ts': `export default interface P { foo: string }; export interface PP { bar: number }`,
- '/baz.ts': `export { PP as default } from './foo'`
+ '/baz.ts': `export { PP as default } from './foo'`,
}
const { props, deps } = resolve(
`
@@ -719,11 +719,11 @@ describe('resolveType', () => {
import PP from './baz'
defineProps ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
foo: ['String'],
- bar: ['Number']
+ bar: ['Number'],
})
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
@@ -732,17 +732,17 @@ describe('resolveType', () => {
const files = {
'/foo.ts': `export default interface P { foo: string }`,
'/bar.ts': `export default interface PP { bar: number }`,
- '/baz.ts': `export { default as X } from './foo'; export { default as XX } from './bar'; `
+ '/baz.ts': `export { default as X } from './foo'; export { default as XX } from './bar'; `,
}
const { props, deps } = resolve(
`import { X, XX } from './baz'
defineProps ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
- foo: ['String']
+ foo: ['String'],
})
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
@@ -788,17 +788,17 @@ describe('resolveType', () => {
test('ts module resolve', () => {
const files = {
'/node_modules/foo/package.json': JSON.stringify({
- types: 'index.d.ts'
+ types: 'index.d.ts',
}),
'/node_modules/foo/index.d.ts': 'export type P = { foo: number }',
'/tsconfig.json': JSON.stringify({
compilerOptions: {
paths: {
- bar: ['./pp.ts']
- }
- }
+ bar: ['./pp.ts'],
+ },
+ },
}),
- '/pp.ts': 'export type PP = { bar: string }'
+ '/pp.ts': 'export type PP = { bar: string }',
}
const { props, deps } = resolve(
@@ -807,16 +807,16 @@ describe('resolveType', () => {
import { PP } from 'bar'
defineProps ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
foo: ['Number'],
- bar: ['String']
+ bar: ['String'],
})
expect(deps && [...deps]).toStrictEqual([
'/node_modules/foo/index.d.ts',
- '/pp.ts'
+ '/pp.ts',
])
})
@@ -825,23 +825,23 @@ describe('resolveType', () => {
'/tsconfig.json': JSON.stringify({
references: [
{
- path: './tsconfig.app.json'
- }
- ]
+ path: './tsconfig.app.json',
+ },
+ ],
}),
'/tsconfig.app.json': JSON.stringify({
include: ['**/*.ts', '**/*.vue'],
- extends: './tsconfig.web.json'
+ extends: './tsconfig.web.json',
}),
'/tsconfig.web.json': JSON.stringify({
compilerOptions: {
composite: true,
paths: {
- bar: ['./user.ts']
- }
- }
+ bar: ['./user.ts'],
+ },
+ },
}),
- '/user.ts': 'export type User = { bar: string }'
+ '/user.ts': 'export type User = { bar: string }',
}
const { props, deps } = resolve(
@@ -849,11 +849,11 @@ describe('resolveType', () => {
import { User } from 'bar'
defineProps ()
`,
- files
+ files,
)
expect(props).toStrictEqual({
- bar: ['String']
+ bar: ['String'],
})
expect(deps && [...deps]).toStrictEqual(['/src/Foo.vue'])
})
@@ -898,16 +898,16 @@ describe('resolveType', () => {
type PP = { bar: string }
}
export {}
- `
+ `,
}
const { props, deps } = resolve(`defineProps The next line is empty. This is the last line. The next line is empty. This is the last line. {{ render }} {{ foobar }} {{ foobar }} {{ foobar }} {{ foobar }} {{ foobar }} {{ foobar }}The next line contains four spaces.
The next line contains four spaces.
+
`,
- { filename: 'example.vue', sourceMap: true }
- ).descriptor.template as SFCTemplateBlock
+ { filename: 'example.vue', sourceMap: true },
+ ).descriptor.template!
- const result = compile({
+ const { code, map } = compile({
filename: 'example.vue',
- source: template.content
+ source: template.content,
})
- expect(result.map).toMatchSnapshot()
+ expect(map!.sources).toEqual([`example.vue`])
+ expect(map!.sourcesContent).toEqual([template.content])
+
+ const consumer = new SourceMapConsumer(map as RawSourceMap)
+ expect(
+ consumer.originalPositionFor(getPositionInCode(code, 'foobar')),
+ ).toMatchObject(getPositionInCode(template.content, `foobar`))
+})
+
+test('should work w/ AST from descriptor', () => {
+ const source = `
+
+
+
+ `
+ const template = parse(source, {
+ filename: 'example.vue',
+ sourceMap: true,
+ }).descriptor.template!
+
+ expect(template.ast!.source).toBe(source)
+
+ const { code, map } = compile({
+ filename: 'example.vue',
+ source: template.content,
+ ast: template.ast,
+ })
+
+ expect(map!.sources).toEqual([`example.vue`])
+ // when reusing AST from SFC parse for template compile,
+ // the source corresponds to the entire SFC
+ expect(map!.sourcesContent).toEqual([source])
+
+ const consumer = new SourceMapConsumer(map as RawSourceMap)
+ expect(
+ consumer.originalPositionFor(getPositionInCode(code, 'foobar')),
+ ).toMatchObject(getPositionInCode(source, `foobar`))
+
+ expect(code).toBe(
+ compile({
+ filename: 'example.vue',
+ source: template.content,
+ }).code,
+ )
+})
+
+test('should work w/ AST from descriptor in SSR mode', () => {
+ const source = `
+
+
+
+ `
+ const template = parse(source, {
+ filename: 'example.vue',
+ sourceMap: true,
+ }).descriptor.template!
+
+ expect(template.ast!.source).toBe(source)
+
+ const { code, map } = compile({
+ filename: 'example.vue',
+ source: '', // make sure it's actually using the AST instead of source
+ ast: template.ast,
+ ssr: true,
+ })
+
+ expect(map!.sources).toEqual([`example.vue`])
+ // when reusing AST from SFC parse for template compile,
+ // the source corresponds to the entire SFC
+ expect(map!.sourcesContent).toEqual([source])
+
+ const consumer = new SourceMapConsumer(map as RawSourceMap)
+ expect(
+ consumer.originalPositionFor(getPositionInCode(code, 'foobar')),
+ ).toMatchObject(getPositionInCode(source, `foobar`))
+
+ expect(code).toBe(
+ compile({
+ filename: 'example.vue',
+ source: template.content,
+ ssr: true,
+ }).code,
+ )
+})
+
+test('should not reuse AST if using custom compiler', () => {
+ const source = `
+
+
+
+ `
+ const template = parse(source, {
+ filename: 'example.vue',
+ sourceMap: true,
+ }).descriptor.template!
+
+ const { code } = compile({
+ filename: 'example.vue',
+ source: template.content,
+ ast: template.ast,
+ compiler: {
+ parse: () => null as any,
+ // @ts-expect-error
+ compile: input => ({ code: input }),
+ },
+ })
+
+ // what we really want to assert is that the `input` received by the custom
+ // compiler is the source string, not the AST.
+ expect(code).toBe(template.content)
+})
+
+test('should force re-parse on already transformed AST', () => {
+ const source = `
+
+
+
+ `
+ const template = parse(source, {
+ filename: 'example.vue',
+ sourceMap: true,
+ }).descriptor.template!
+
+ // force set to empty, if this is reused then it won't generate proper code
+ template.ast!.children = []
+ template.ast!.transformed = true
+
+ const { code } = compile({
+ filename: 'example.vue',
+ source: '',
+ ast: template.ast,
+ })
+
+ expect(code).toBe(
+ compile({
+ filename: 'example.vue',
+ source: template.content,
+ }).code,
+ )
+})
+
+test('should force re-parse with correct compiler in SSR mode', () => {
+ const source = `
+
+
+
+ `
+ const template = parse(source, {
+ filename: 'example.vue',
+ sourceMap: true,
+ }).descriptor.template!
+
+ // force set to empty, if this is reused then it won't generate proper code
+ template.ast!.children = []
+ template.ast!.transformed = true
+
+ const { code } = compile({
+ filename: 'example.vue',
+ source: '',
+ ast: template.ast,
+ ssr: true,
+ })
+
+ expect(code).toBe(
+ compile({
+ filename: 'example.vue',
+ source: template.content,
+ ssr: true,
+ }).code,
+ )
})
test('template errors', () => {
const result = compile({
filename: 'example.vue',
- source: ``
+ source: ``,
})
expect(result.errors).toMatchSnapshot()
})
@@ -164,20 +335,20 @@ test('preprocessor errors', () => {
div(class='class)
`,
- { filename: 'example.vue', sourceMap: true }
+ { filename: 'example.vue', sourceMap: true },
).descriptor.template as SFCTemplateBlock
const result = compile({
filename: 'example.vue',
source: template.content,
- preprocessLang: template.lang
+ preprocessLang: template.lang,
})
expect(result.errors.length).toBe(1)
const message = result.errors[0].toString()
expect(message).toMatch(`Error: example.vue:3:1`)
expect(message).toMatch(
- `The end of the string reached with no closing bracket ) found.`
+ `The end of the string reached with no closing bracket ) found.`,
)
})
@@ -191,7 +362,7 @@ test('should generate the correct imports expression', () => {
`,
- ssr: true
+ ssr: true,
})
expect(code).toMatch(`_ssrRenderAttr(\"src\", _imports_1)`)
expect(code).toMatch(`_createVNode(\"img\", { src: _imports_1 })`)
@@ -213,7 +384,7 @@ test('should not hoist srcset URLs in SSR mode', () => {
`,
- ssr: true
+ ssr: true,
})
expect(code).toMatchSnapshot()
})
@@ -226,3 +397,65 @@ test('dynamic v-on + static v-on should merged', () => {
expect(result.code).toMatchSnapshot()
})
+
+// #9853 regression found in Nuxt tests
+// walkIdentifiers can get called multiple times on the same node
+// due to #9729 calling it during SFC template usage check.
+// conditions needed:
+// 1. `
+
+ {{ list.map((t, index) => ({ t: t })) }}
+
+ `
+ const { descriptor } = parse(src)
+ // compileScript triggers importUsageCheck
+ compileScript(descriptor, { id: 'xxx' })
+ const { code } = compileTemplate({
+ id: 'xxx',
+ filename: 'test.vue',
+ ast: descriptor.template!.ast,
+ source: descriptor.template!.content,
+ })
+ expect(code).not.toMatch(`_ctx.t`)
+})
+
+interface Pos {
+ line: number
+ column: number
+ name?: string
+}
+
+function getPositionInCode(
+ code: string,
+ token: string,
+ expectName: string | boolean = false,
+): Pos {
+ const generatedOffset = code.indexOf(token)
+ let line = 1
+ let lastNewLinePos = -1
+ for (let i = 0; i < generatedOffset; i++) {
+ if (code.charCodeAt(i) === 10 /* newline char code */) {
+ line++
+ lastNewLinePos = i
+ }
+ }
+ const res: Pos = {
+ line,
+ column:
+ lastNewLinePos === -1
+ ? generatedOffset
+ : generatedOffset - lastNewLinePos - 1,
+ }
+ if (expectName) {
+ res.name = typeof expectName === 'string' ? expectName : token
+ }
+ return res
+}
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index d57ad079d..323c9c7a5 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -1,5 +1,5 @@
import { compileStyle, parse } from '../src'
-import { mockId, compileSFCScript, assertCode } from './utils'
+import { assertCode, compileSFCScript, mockId } from './utils'
describe('CSS vars injection', () => {
test('generating correct code for nested paths', () => {
@@ -8,7 +8,7 @@ describe('CSS vars injection', () => {
``
+ }`,
)
expect(content).toMatch(`_useCssVars(_ctx => ({
"${mockId}-color": (_ctx.color),
@@ -32,7 +32,7 @@ describe('CSS vars injection', () => {
div {
font-size: v-bind(size);
}
- `
+ `,
)
expect(content).toMatch(`_useCssVars(_ctx => ({
"${mockId}-size": (_ctx.size)
@@ -57,7 +57,7 @@ describe('CSS vars injection', () => {
font-size: v-bind(size);
border: v-bind(foo);
}
- `
+ `,
)
// should handle:
// 1. local const bindings
@@ -69,7 +69,7 @@ describe('CSS vars injection', () => {
"${mockId}-foo": (__props.foo)
})`)
expect(content).toMatch(
- `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`
+ `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`,
)
assertCode(content)
})
@@ -85,7 +85,7 @@ describe('CSS vars injection', () => {
font-family: v-bind(フォント);
}`,
filename: 'test.css',
- id: 'data-v-test'
+ id: 'data-v-test',
})
expect(code).toMatchInlineSnapshot(`
".foo {
@@ -106,7 +106,7 @@ describe('CSS vars injection', () => {
color: v-bind(color);
font-size: v-bind('font.size');
}`,
- { isProd: true }
+ { isProd: true },
)
expect(content).toMatch(`_useCssVars(_ctx => ({
"4003f1a6": (_ctx.color),
@@ -120,7 +120,7 @@ describe('CSS vars injection', () => {
}`,
filename: 'test.css',
id: mockId,
- isProd: true
+ isProd: true,
})
expect(code).toMatchInlineSnapshot(`
".foo {
@@ -135,8 +135,8 @@ describe('CSS vars injection', () => {
assertCode(
compileSFCScript(
`\n` +
- ``
- ).content
+ ``,
+ ).content,
)
})
@@ -144,8 +144,8 @@ describe('CSS vars injection', () => {
assertCode(
compileSFCScript(
`\n` +
- ``
- ).content
+ ``,
+ ).content,
)
})
@@ -155,8 +155,8 @@ describe('CSS vars injection', () => {
`\n` + ``
- ).content
+ \n` + ``,
+ ).content,
)
})
@@ -164,8 +164,8 @@ describe('CSS vars injection', () => {
assertCode(
compileSFCScript(
`\n` +
- ``
- ).content
+ ``,
+ ).content,
)
})
@@ -178,7 +178,7 @@ describe('CSS vars injection', () => {
div{ /* color: v-bind(color); */ width:20; }
div{ width: v-bind(width); }
/* comment */
- `
+ `,
)
expect(content).not.toMatch(`"${mockId}-color": (color)`)
@@ -198,7 +198,7 @@ describe('CSS vars injection', () => {
p {
color: v-bind(color);
}
- `
+ `,
)
// color should only be injected once, even if it is twice in style
expect(content).toMatch(`_useCssVars(_ctx => ({
@@ -229,7 +229,7 @@ describe('CSS vars injection', () => {
p {
color: v-bind(((a + b)) / (2 * a));
}
- `
+ `,
)
expect(content).toMatch(`_useCssVars(_ctx => ({
"${mockId}-foo": (_unref(foo)),
@@ -243,7 +243,7 @@ describe('CSS vars injection', () => {
// #6022
test('should be able to parse incomplete expressions', () => {
const {
- descriptor: { cssVars }
+ descriptor: { cssVars },
} = parse(
`
`
+ `,
)
expect(cssVars).toMatchObject([`count.toString(`, `xxx`])
})
@@ -266,10 +266,10 @@ describe('CSS vars injection', () => {
label {
background: v-bind(background);
}
- `
+ `,
)
expect(content).toMatch(
- `export default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCssVars(_ctx => ({\n "xxxxxxxx-background": (_unref(background))\n}))`
+ `export default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCssVars(_ctx => ({\n "xxxxxxxx-background": (_unref(background))\n}))`,
)
})
@@ -287,9 +287,9 @@ describe('CSS vars injection', () => {
{
inlineTemplate: true,
templateOptions: {
- ssr: true
- }
- }
+ ssr: true,
+ },
+ },
)
expect(content).not.toMatch(`_useCssVars`)
})
@@ -308,9 +308,9 @@ describe('CSS vars injection', () => {
{
inlineTemplate: false,
templateOptions: {
- ssr: true
- }
- }
+ ssr: true,
+ },
+ },
)
expect(content).not.toMatch(`_useCssVars`)
})
@@ -333,9 +333,9 @@ describe('CSS vars injection', () => {
`,
{
templateOptions: {
- ssr: true
- }
- }
+ ssr: true,
+ },
+ },
)
expect(content).not.toMatch(`_useCssVars`)
})
diff --git a/packages/compiler-sfc/__tests__/parse.spec.ts b/packages/compiler-sfc/__tests__/parse.spec.ts
index ae362da02..048dab693 100644
--- a/packages/compiler-sfc/__tests__/parse.spec.ts
+++ b/packages/compiler-sfc/__tests__/parse.spec.ts
@@ -1,5 +1,10 @@
import { parse } from '../src'
-import { baseParse, baseCompile } from '@vue/compiler-core'
+import {
+ ElementTypes,
+ NodeTypes,
+ baseCompile,
+ createRoot,
+} from '@vue/compiler-core'
import { SourceMapConsumer } from 'source-map-js'
describe('compiler:sfc', () => {
@@ -7,15 +12,61 @@ describe('compiler:sfc', () => {
test('style block', () => {
// Padding determines how many blank lines will there be before the style block
const padding = Math.round(Math.random() * 10)
- const style = parse(
- `${'\n'.repeat(padding)}\n`
- ).descriptor.styles[0]
+ const src =
+ `${'\n'.repeat(padding)}` +
+ `
- expect(style.map).not.toBeUndefined()
+
- const consumer = new SourceMapConsumer(style.map!)
+
+
+`
+ const {
+ descriptor: { styles },
+ } = parse(src)
+
+ expect(styles[0].map).not.toBeUndefined()
+ const consumer = new SourceMapConsumer(styles[0].map!)
+ const lineOffset =
+ src.slice(0, src.indexOf(`\nok`
const { descriptor, errors } = parse(
- `${content}`
+ `${content}`,
)
expect(descriptor.template!.content).toBe(content)
expect(errors.length).toBe(0)
})
// #1120
- test('alternative template lang should be treated as plain text', () => {
- const content = `p(v-if="1 < 2") test`
+ test('template with preprocessor lang should be treated as plain text', () => {
+ const content = `p(v-if="1 < 2") test `
const { descriptor, errors } = parse(
- `` + content + ``
+ `` + content + ``,
)
expect(errors.length).toBe(0)
expect(descriptor.template!.content).toBe(content)
+ // should not attempt to parse the content
+ expect(descriptor.template!.ast!.children.length).toBe(1)
})
//#2566
@@ -253,17 +306,17 @@ h1 { color: red }
expect(parse(`hi`).descriptor.slotted).toBe(false)
expect(
parse(`hi`).descriptor
- .slotted
+ .slotted,
).toBe(false)
expect(
parse(
- `hi`
- ).descriptor.slotted
+ `hi`,
+ ).descriptor.slotted,
).toBe(true)
expect(
parse(
- `hi`
- ).descriptor.slotted
+ `hi`,
+ ).descriptor.slotted,
).toBe(true)
})
@@ -280,21 +333,54 @@ h1 { color: red }
test('custom compiler', () => {
const { errors } = parse(``, {
compiler: {
- parse: baseParse,
- compile: baseCompile
- }
+ parse: (_, options) => {
+ options.onError!(new Error('foo') as any)
+ return createRoot([])
+ },
+ compile: baseCompile,
+ },
})
- expect(errors.length).toBe(1)
+ expect(errors.length).toBe(2)
+ // error thrown by the custom parse
+ expect(errors[0].message).toBe('foo')
+ // error thrown based on the returned root
+ expect(errors[1].message).toMatch('At least one')
})
test('treat custom blocks as raw text', () => {
const { errors, descriptor } = parse(
- `